open/close -> show/hide (#1813)

* fix!(BDropdown): change open/close to show/hide * fix!(BCollapse): change open/close to show/hide
bootstrap-vue-next · Mar 12, 2024 · cd7aaf2 · cd7aaf2
1 parent 584a986
commit cd7aaf2
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 58 deletions.
diff --git a/apps/docs/src/docs/components/collapse.md b/apps/docs/src/docs/components/collapse.md
@@ -215,8 +215,8 @@ The following properties are available for the `header` and `footer` slots:
 | --------- | -------- | ------------------------------------- |
 | `visible` | Boolean  | Visible state of the collapse         |
 | `toggle`  | Function | When called, will toggle the collapse |
-| `open`    | Function | When called, will open the collapse   |
-| `close`   | Function | When called, will close the collapse  |
+| `show`    | Function | When called, will open the collapse   |
+| `hide`    | Function | When called, will close the collapse  |
 | `id`      | String   | The ID of the collapsible element     |
 
 <HighlightCard>
@@ -246,17 +246,6 @@ The following properties are available for the `header` and `footer` slots:
   </template>
 </HighlightCard>
 
-## Optionally scoped default slot
-
-<span class="badge badge-info small">New in v2.2.0</span>
-
-The default slot can be optionally scoped. The following scope properties are available:
-
-| Property  | Type     | Description                          |
-| --------- | -------- | ------------------------------------ |
-| `visible` | Boolean  | Visible state of the collapse        |
-| `close`   | Function | When called, will close the collapse |
-
 ## Accessibility
 
 The `v-b-toggle` directive will automatically add the ARIA attributes `aria-controls` and

diff --git a/packages/bootstrap-vue-next/src/components/BCollapse.vue b/packages/bootstrap-vue-next/src/components/BCollapse.vue
@@ -59,9 +59,9 @@ const emit = defineEmits<{
 }>()
 
 type SharedSlotsData = {
-  close: () => void
+  hide: () => void
   id: string
-  open: () => void
+  show: () => void
   toggle: () => void
   visible: boolean
 }
@@ -94,20 +94,20 @@ const computedId = useId(() => props.id, 'collapse')
 
 const element = ref<HTMLElement | null>(null)
 const isCollapsing = ref(false)
-const show = ref(modelValue.value)
+const showRef = ref(modelValue.value)
 
 const computedClasses = computed(() => ({
-  'show': show.value,
+  'show': showRef.value,
   'navbar-collapse': props.isNav,
   'collapsing': isCollapsing.value,
-  'closing': show.value && !modelValue.value,
+  'closing': showRef.value && !modelValue.value,
   'collapse-horizontal': props.horizontal,
 }))
 
-const close = () => {
+const hide = () => {
   modelValue.value = false
 }
-const open = () => {
+const show = () => {
   modelValue.value = true
 }
 const toggleFn = () => {
@@ -116,8 +116,8 @@ const toggleFn = () => {
 
 const sharedSlots = computed<SharedSlotsData>(() => ({
   toggle: toggleFn,
-  open,
-  close,
+  show,
+  hide,
   id: computedId.value,
   visible: modelValue.value,
 }))
@@ -135,7 +135,7 @@ const reveal = () => {
   }
   clearTimeout(hideTimeout)
   clearTimeout(revealTimeout)
-  show.value = true
+  showRef.value = true
   if (_skipAnimation) return
   isCollapsing.value = true
   nextTick(() => {
@@ -155,7 +155,7 @@ const reveal = () => {
   })
 }
 
-const hide = () => {
+const hideFn = () => {
   const event = buildTriggerableEvent('hide', {cancelable: true})
   emit('hide', event)
   if (event.defaultPrevented) {
@@ -166,7 +166,7 @@ const hide = () => {
   clearTimeout(hideTimeout)
   if (element.value === null) return
   if (_skipAnimation) {
-    show.value = false
+    showRef.value = false
     return
   }
   if (isCollapsing.value) {
@@ -188,15 +188,15 @@ const hide = () => {
     element.value.style.height = ``
     element.value.style.width = ``
     hideTimeout = setTimeout(() => {
-      show.value = false
+      showRef.value = false
       isCollapsing.value = false
       emit('hidden')
     }, getTransitionDelay(element.value))
   })
 }
 
 watch(modelValue, () => {
-  modelValue.value ? reveal() : hide()
+  modelValue.value ? reveal() : hideFn()
 })
 
 onMounted(() => {
@@ -227,7 +227,7 @@ watch(
   () => props.visible,
   (newval) => {
     _skipAnimation = true
-    newval ? open() : close()
+    newval ? show() : hide()
     nextTick(() => {
       _skipAnimation = props.skipAnimation
     })
@@ -239,19 +239,19 @@ useEventListener(element, 'bv-toggle', () => {
 })
 
 defineExpose({
-  close,
+  hide,
   isNav: props.isNav,
-  open,
+  show,
   toggle: toggleFn,
-  visible: readonly(show),
+  visible: readonly(showRef),
 })
 
 provide(collapseInjectionKey, {
   id: computedId,
-  close,
-  open,
+  hide,
+  show,
   toggle: toggleFn,
-  visible: readonly(show),
+  visible: readonly(showRef),
   isNav: toRef(() => props.isNav),
 })
 </script>
diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
@@ -49,7 +49,7 @@
         :role="role"
         @click="onClickInside"
       >
-        <slot :hide="close" :show="open" />
+        <slot :hide="hide" :show="show" />
       </ul>
     </Teleport>
   </div>
@@ -301,10 +301,10 @@ const onClickInside = () => {
   }
 }
 
-const close = () => {
+const hide = () => {
   modelValue.value && toggle()
 }
-const open = () => {
+const show = () => {
   modelValue.value || toggle()
 }
 const toggle = () => {
@@ -329,15 +329,15 @@ watch(
 )
 
 defineExpose({
-  close,
-  open,
+  hide,
+  show,
   toggle,
 })
 
 provide(dropdownInjectionKey, {
   id: computedId,
-  open,
-  close,
+  show,
+  hide,
   toggle,
   visible: toRef(() => modelValue.value),
   isNav: toRef(() => props.isNav),

diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue
@@ -99,8 +99,8 @@ const navbarData = inject(navbarInjectionKey, null)
 const clicked = (e: Readonly<MouseEvent>): void => {
   emit('click', e)
   if (navbarData !== null && navbarData?.autoClose?.value === true) {
-    collapseData?.close?.()
+    collapseData?.hide?.()
   }
-  dropdownData?.close?.()
+  dropdownData?.hide?.()
 }
 </script>
diff --git a/packages/bootstrap-vue-next/src/components/BLink/BLink.vue b/packages/bootstrap-vue-next/src/components/BLink/BLink.vue
@@ -153,7 +153,7 @@ const clicked = (e: Readonly<MouseEvent>): void => {
     (collapseData?.isNav?.value === true && navbarData === null) ||
     (navbarData !== null && navbarData.autoClose?.value === true)
   ) {
-    collapseData?.close?.()
+    collapseData?.hide?.()
   }
 
   emit('click', e)

diff --git a/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue b/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue
@@ -21,7 +21,7 @@
         <slot name="toggle-text" />
       </template>
       <template #default>
-        <slot :hide="close" :show="open" />
+        <slot :hide="hide" :show="show" />
       </template>
     </BDropdown>
   </li>
@@ -95,19 +95,19 @@ defineSlots<{
 }>()
 const dropdown = ref<InstanceType<typeof BDropdown> | null>(null)
 
-const close = () => {
-  dropdown.value?.close()
+const hide = () => {
+  dropdown.value?.hide()
 }
-const open = () => {
-  dropdown.value?.open()
+const show = () => {
+  dropdown.value?.show()
 }
 const toggle = () => {
   dropdown.value?.toggle()
 }
 
 defineExpose({
-  close,
-  open,
+  hide,
+  show,
   toggle,
 })
 </script>
diff --git a/packages/bootstrap-vue-next/src/components/BNav/nav-item-dropdown.spec.ts b/packages/bootstrap-vue-next/src/components/BNav/nav-item-dropdown.spec.ts
@@ -26,15 +26,15 @@ describe('nav-item-dropdown', () => {
   it('is opened if open called', async () => {
     const wrapper = mount(BNavItemDropdown)
     const $bbutton = wrapper.findComponent(BButton)
-    await wrapper.vm.open()
+    await wrapper.vm.show()
     expect($bbutton.classes()).toContain('show')
   })
 
   it('is closed if close called', async () => {
     const wrapper = mount(BNavItemDropdown)
     const $bbutton = wrapper.findComponent(BButton)
-    await wrapper.vm.open()
-    await wrapper.vm.close()
+    await wrapper.vm.show()
+    await wrapper.vm.hide()
     expect($bbutton.classes()).not.toContain('show')
   })
 

diff --git a/packages/bootstrap-vue-next/src/utils/keys.ts b/packages/bootstrap-vue-next/src/utils/keys.ts
@@ -115,17 +115,17 @@ export const radioGroupKey: InjectionKey<{
 // Collapse
 export const collapseInjectionKey: InjectionKey<{
   id?: Readonly<Ref<string>>
-  readonly close?: () => void
-  readonly open?: () => void
+  readonly hide?: () => void
+  readonly show?: () => void
   readonly toggle?: () => void
   visible?: Readonly<Ref<boolean>>
   isNav?: Readonly<Ref<boolean>>
 }> = Symbol('collapse')
 
 export const dropdownInjectionKey: InjectionKey<{
   id?: Readonly<Ref<string>>
-  readonly close?: () => void
-  readonly open?: () => void
+  readonly hide?: () => void
+  readonly show?: () => void
   readonly toggle?: () => void
   visible?: Readonly<Ref<boolean>>
   isNav?: Readonly<Ref<boolean>>