bootstrap-vue-next · VividLemon · Nov 26, 2024 · Nov 26, 2024
diff --git a/apps/docs/src/components/ShowHideProps.vue b/apps/docs/src/components/ShowHideProps.vue
@@ -0,0 +1,95 @@
+<template>
+  <BTable :items="items" :fields="fields" hover small responsive bordered striped>
+    <template #cell(description)="d"> {{ d.item.description }} </template>
+    <template #cell(components)="d"
+      ><div v-for="component in d.item.components" :key="component">
+        <a :href="'#' + component.toLowerCase()">{{ component }}</a>
+      </div></template
+    >
+  </BTable>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue'
+import {buildCommonProps, dropdownProps, kebabCase, pick, showHideProps} from '../utils'
+
+interface MigrationMap {
+  [key: string]: {oldProp: string; components: string[]}
+}
+
+interface ComponentMap {
+  [key: string]: string[]
+}
+
+const mappedComponents: ComponentMap = {
+  showHideProps: [
+    'BCollapse',
+    'BDropdown',
+    'BModal',
+    'BNavItemDropdown',
+    'BOffcanvas',
+    'BPopover',
+    'BToast',
+    'BTooltip',
+  ],
+  dropdownCommon: ['BDropdown', 'BNavItemDropdown'],
+}
+
+const migrationMap: MigrationMap = {
+  initialAnimation: {
+    oldProp: 'appear',
+    components: ['BAccordian', 'BAccordianItem', 'showHideProps'],
+  },
+  lazy: {oldProp: 'lazy', components: ['BAccordian', 'BAccordianItem', 'showHideProps']},
+  modelValue: {oldProp: 'visible', components: ['showHideProps']},
+  noAnimation: {oldProp: 'skip-animation', components: ['showHideProps']},
+  noFade: {oldProp: 'skip-animation', components: ['showHideProps']},
+  noBackdrop: {oldProp: 'hide-backdrop', components: ['BModal', 'BOffcanvas']},
+  noEllipsis: {oldProp: 'hide-ellipsis', components: ['BPagination']},
+  noFooter: {oldProp: 'hide-footer', components: ['BModal']},
+  noGotoEndButtons: {oldProp: 'hide-goto-end-buttons', components: ['BPagination']},
+  noHeader: {
+    oldProp: 'hide-header',
+    components: ['BModal', 'BOffcanvas', 'BPlaceholderCard', 'BPlaceholderTable'],
+  },
+  noHeaderClose: {oldProp: 'hide-header-close', components: ['BModal', 'BOffcanvas']},
+  noWrapper: {oldProp: 'skip-wrapper', components: ['dropdownCommon']},
+  show: {oldProp: '', components: ['showHideProps']},
+  transProps: {oldProp: '', components: ['showHideProps']},
+  unmountLazy: {
+    oldProp: 'lazy',
+    components: ['BAccordian', 'BAccordianItem', 'showHideProps'],
+  },
+  visible: {oldProp: 'visible', components: ['showHideProps']},
+}
+
+const combinedProps = {
+  ...showHideProps,
+  ...pick(buildCommonProps(), [
+    'noBackdrop',
+    'noEllipsis',
+    'noGotoEndButtons',
+    'noHeader',
+    'noHeaderClose',
+  ]),
+  ...pick(dropdownProps, ['noWrapper']),
+}
+
+const mapComponents = (key: string) =>
+  migrationMap[key].components
+    .map((component) => (mappedComponents[component] ? mappedComponents[component] : component))
+    .flat()
+
+const items = computed(() =>
+  Object.entries(combinedProps)
+    .map(([key, value]) => ({
+      prop: kebabCase(key),
+      oldProp: migrationMap[key].oldProp,
+      components: mapComponents(key),
+      ...value,
+    }))
+    .sort((a, b) => a.prop.localeCompare(b.prop))
+)
+
+const fields = ['prop', 'oldProp', 'description', 'components']
+</script>
diff --git a/apps/docs/src/data/components/collapse.data.ts b/apps/docs/src/data/components/collapse.data.ts
@@ -77,17 +77,35 @@ export default {
         {
           event: 'hidden',
           description: 'Emitted when collapse has finished closing',
-          args: [],
+          args: [
+            {
+              arg: 'value',
+              type: 'BvTriggerableEvent',
+              description: 'The event object',
+            },
+          ],
         },
         {
           event: 'hide-prevented',
           description: 'Emitted when the Collapse tried to close, but was prevented from doing so.',
-          args: [],
+          args: [
+            {
+              arg: 'value',
+              type: 'BvTriggerableEvent',
+              description: 'The event object',
+            },
+          ],
         },
         {
           event: 'show',
           description: 'Emitted when collapse has started to open',
-          args: [],
+          args: [
+            {
+              arg: 'value',
+              type: 'BvTriggerableEvent',
+              description: 'The event object',
+            },
+          ],
         },
         {
           event: 'shown',
@@ -103,7 +121,24 @@ export default {
         {
           event: 'show-prevented',
           description: 'Emitted when the Collapse tried to open, but was prevented from doing so.',
-          args: [],
+          args: [
+            {
+              arg: 'value',
+              type: 'BvTriggerableEvent',
+              description: 'The event object',
+            },
+          ],
+        },
+        {
+          event: 'toggle',
+          description: 'Emitted when collapse has started to toggle',
+          args: [
+            {
+              arg: 'value',
+              type: 'BvTriggerableEvent',
+              description: 'The event object',
+            },
+          ],
         },
       ],
       slots: [

diff --git a/apps/docs/src/data/components/modal.data.ts b/apps/docs/src/data/components/modal.data.ts
@@ -1,6 +1,6 @@
 import type {BvnComponentProps} from 'bootstrap-vue-next'
 import type {ComponentReference, PropertyReference, SlotScopeReference} from '../../types'
-import {showHideProps} from '../../utils'
+import {buildCommonProps, pick, showHideProps} from '../../utils'
 
 const sharedSlots: SlotScopeReference[] = [
   {
@@ -209,32 +209,11 @@ export default {
             description:
               'Applies one of the Bootstrap theme color variants to the header (this takes priority over headerBgVariant and headerTextVariant)',
           },
-          noBackdrop: {
-            type: 'boolean',
-            default: false,
-            description: 'Disables rendering of the modal backdrop',
-          },
           noFooter: {
             type: 'boolean',
             default: false,
             description: 'Disables rendering of the modal footer',
           },
-          noHeader: {
-            type: 'boolean',
-            default: false,
-            description: 'Disables rendering of the modal header',
-          },
-          noHeaderClose: {
-            type: 'boolean',
-            default: false,
-            description: 'Disables rendering of the modal header close button',
-          },
-          id: {
-            type: 'string',
-            default: undefined,
-            description:
-              "Used to set the 'id' attribute on the rendered content, and used as the base to generate any additional element IDs as needed",
-          },
           modalClass: {
             type: 'ClassValue',
             default: undefined,
@@ -321,6 +300,7 @@ export default {
             description: 'Specify the HTML tag to render instead of the default tag for the title',
           },
           ...showHideProps,
+          ...pick(buildCommonProps(), ['id', 'noBackdrop', 'noHeader', 'noHeaderClose']),
         } satisfies Record<keyof BvnComponentProps['BModal'], PropertyReference>,
       },
       emits: [

diff --git a/apps/docs/src/data/components/pagination.data.ts b/apps/docs/src/data/components/pagination.data.ts
@@ -57,16 +57,6 @@ export default {
             default: '\u00AB',
             description: 'Content to place in the go to first page button',
           },
-          noEllipsis: {
-            type: 'boolean',
-            default: false,
-            description: 'Do not show ellipsis buttons',
-          },
-          noGotoEndButtons: {
-            type: 'boolean',
-            default: false,
-            description: 'Hides the go to first and go to last page buttons',
-          },
           labelFirstPage: {
             type: 'string',
             default: 'Go to first page',
@@ -172,7 +162,7 @@ export default {
                 default: undefined,
               },
             }),
-            ['ariaControls', 'ariaLabel', 'disabled', 'size']
+            ['ariaControls', 'ariaLabel', 'disabled', 'noEllipsis', 'noGotoEndButtons', 'size']
           ),
         } satisfies Record<keyof BvnComponentProps['BPagination'], PropertyReference>,
       },

diff --git a/apps/docs/src/docs/migration-guide.md b/apps/docs/src/docs/migration-guide.md
@@ -19,7 +19,7 @@ some places where this library will insulate you from the changes to the underly
 a general familiarity with the changes in the core dependencies will serve you well.
 
 For instance, there are likely many places where you use `Bootstrap` utility classes in order to style your components.
-`Bootstrap 5` change made a [breaking change](https://getbootstrap.com/docs/5.3/migration/#utilities-3) to all utility
+`Bootstrap 5` made a [breaking change](https://getbootstrap.com/docs/5.3/migration/#utilities-3) to all utility
 classes that involve `left` and `right` (or `l` and `r`) to be `start` and `end` (or `s` and `e`). This
 will affect compents such as `BNavBar` in unexpected ways that BSVN has no control over.
 
@@ -61,13 +61,37 @@ is rounded. The edge specific props such as`rounded-top` override the `rounded`
 
 This takes the place of `top`, `bottom`, `left`, and `right` values for the `rounded` prop.
 
+### Show and Hide
+
+We have made an effort to standardize the names and behaviors of props that are related to the showing
+and hiding of components and subcomponents.
+
+The primary reactive way to contorl the visibility of a component is generally by use of the `v-model` rather
+than a `visible` as in `BCollapse`, `BModal`, `BToast`.
+
+Rather than using `hide` as a prefix to specify that you don't want a subcomponent to be rendered, we've moved to using `no`
+as the prefix. For instant in `BPlaceholder`, `hideHeader` becomes `noHeader`. Similarly we use the 'no' prefix in place
+of 'skip' in places like `BCollapse` where `skipAnimation` becomes `noAnimation`.
+
+The properties and components that are affected by this change are show in the following table:
+
+<ShowHideProps/>
+
 ## Grid
 
 BSVN doesn't currently implement the ability to define `breakpoint` names.
 
 See the [Bootstrap 5 migration guide](https://getbootstrap.com/docs/5.3/migration/#grid-updates), in particular
 values for `order` on `<BCol>` only provides support for 1 - 5.
 
+## BAccordian
+
+see [Show and Hide](#show-and-hide) shared properties.
+
+### BAccordianItem
+
+see [Show and Hide](#show-and-hide) shared properties.
+
 ## BAlert
 
 As in `bootstrap-vue`, a simple `BAlert` is not visible by default. However, the means of showing the alert are different.
@@ -186,7 +210,7 @@ events on this component.
 
 `$root` instance events `bv::collapse::state` and `bv::toggle::collapse` are deprecrated.
 
-<NotYetImplemented>The `appear` prop.</NotYetImplemented>
+see [Show and Hide](#show-and-hide) shared properties.
 
 ## BDropdown
 
@@ -210,6 +234,8 @@ The `html` prop has been deprecated, use the `button-content`.
 The the boolean argument to control returning focus to the toggle button on the `hide` scoped property of the default slot is deprecated.
 It is less important in BSVN since bootstrap v5 by default doesn't have the focus ring that v4 has.
 
+see [Show and Hide](#show-and-hide) shared properties.
+
 <NotYetImplemented>`toggleAttrs`</NotYetImplemented>
 
 ### Dropdown sub-components
@@ -355,7 +381,7 @@ They work as documented in vue.js, so there is no longer a need for the properti
 
 ## BJumbotron
 
-<NotYetImplemened/>
+<NotYetImplemented/>
 
 Note that Bootstrap has deprecated their Jumbotron component, but it can be replicated using
 utility classes. See their [migration guide](https://getbootstrap.com/docs/5.3/migration/#jumbotron)
@@ -393,7 +419,7 @@ See [BLink](#blink) for changes to link and router behavior.
 
 ## BMedia
 
-<NotYetImplemened/>
+<NotYetImplemented/>
 
 Note that Bootstrap has deprecated their Media object, but it can be replicated using
 flex utility classes. See their [documentation](https://getbootstrap.com/docs/5.3/utilities/flex/#media-object) for details.
@@ -417,9 +443,11 @@ Example using `useModalController.confirm` to replace `msgBoxConfirm` (Remember
 
 <<< DEMO ./demo/ModalConfirm.vue
 
-The `show` and `confirm` `props` object accespts all of the properties that are defined on
+The `show` and `confirm` `props` object accepts all of the properties that are defined on
 [BModal](/docs/components/modal#component-reference) excpet for `modelValue`.
 
+see [Show and Hide](#show-and-hide) shared properties.
+
 ## BNav
 
 `align` prop now takes values from [`AlignmentJustifyContent`](/docs/types/alignment): `start`, `center`, `end`, `between`, `around`, and `evenly`
@@ -436,14 +464,22 @@ The `type` prop is deprectated. Use the the `v-b-color-mode` directive or `useCo
 
 `align` prop now takes values from [`AlignmentJustifyContent`](/docs/types/alignment): `start`, `center`, `end`, `between`, `around`, and `evenly`
 
+## BOffcanvas
+
+see [Show and Hide](#show-and-hide) shared properties.
+
 ## BPagination
 
-Keyboard Navigation and Small Screen Support.
+see [Show and Hide](#show-and-hide) shared properties.
 
 ## BPaginationNav
 
 <NotYetImplemented/>
 
+## BPopover
+
+see [Show and Hide](#show-and-hide) shared properties.
+
 ## BSkeleton
 
 `<BSkeleton*>` components have been replaced by the more appropriately named `<BPlaceholder*>` components.
@@ -455,3 +491,11 @@ Keyboard Navigation and Small Screen Support.
 ## BTime
 
 <NotYetImplemented><BLink href="https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/1860#event-14531487213">See issue #1860</BLink></NotYetImplemented>
+
+## BToast
+
+see [Show and Hide](#show-and-hide) shared properties.
+
+## BTooltip
+
+see [Show and Hide](#show-and-hide) shared properties.
diff --git a/apps/docs/src/utils/common-props.ts b/apps/docs/src/utils/common-props.ts
@@ -265,6 +265,31 @@ export const commonProps = () =>
       default: undefined,
       description: 'Sets the value of the `name` attribute on the form control',
     },
+    noBackdrop: {
+      type: 'boolean',
+      default: false,
+      description: 'Disables rendering of the backdrop',
+    },
+    noEllipsis: {
+      type: 'boolean',
+      default: false,
+      description: 'Do not show ellipsis buttons',
+    },
+    noGotoEndButtons: {
+      type: 'boolean',
+      default: false,
+      description: 'Hides the go to first and go to last page buttons',
+    },
+    noHeader: {
+      type: 'boolean',
+      default: false,
+      description: 'Disables rendering of the  header',
+    },
+    noHeaderClose: {
+      type: 'boolean',
+      default: false,
+      description: 'Disables rendering of the header close button',
+    },
     noHoverPause: {
       type: 'boolean',
       default: false,