From cd7aaf2eff4da6d57bba487572c9998c5492fd93 Mon Sep 17 00:00:00 2001 From: Jukka Raimovaara Date: Tue, 12 Mar 2024 19:15:57 +0200 Subject: [PATCH] open/close -> show/hide (#1813) * fix!(BDropdown): change open/close to show/hide * fix!(BCollapse): change open/close to show/hide --- apps/docs/src/docs/components/collapse.md | 15 +------ .../src/components/BCollapse.vue | 42 +++++++++---------- .../src/components/BDropdown/BDropdown.vue | 14 +++---- .../components/BDropdown/BDropdownItem.vue | 4 +- .../src/components/BLink/BLink.vue | 2 +- .../src/components/BNav/BNavItemDropdown.vue | 14 +++---- .../components/BNav/nav-item-dropdown.spec.ts | 6 +-- packages/bootstrap-vue-next/src/utils/keys.ts | 8 ++-- 8 files changed, 47 insertions(+), 58 deletions(-) diff --git a/apps/docs/src/docs/components/collapse.md b/apps/docs/src/docs/components/collapse.md index 2eec7e14c..01ef5ac8b 100644 --- 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 | @@ -246,17 +246,6 @@ The following properties are available for the `header` and `footer` slots: -## Optionally scoped default slot - -New in v2.2.0 - -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 index d92b6e084..f25b079bd 100644 --- 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(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(() => ({ 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,7 +188,7 @@ 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)) @@ -196,7 +196,7 @@ const hide = () => { } 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), }) diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue index f71a30e7f..f3e7c7f74 100644 --- 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" > - + @@ -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 index ca2cc5172..460a68728 100644 --- 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): void => { emit('click', e) if (navbarData !== null && navbarData?.autoClose?.value === true) { - collapseData?.close?.() + collapseData?.hide?.() } - dropdownData?.close?.() + dropdownData?.hide?.() } diff --git a/packages/bootstrap-vue-next/src/components/BLink/BLink.vue b/packages/bootstrap-vue-next/src/components/BLink/BLink.vue index f21924a3c..c596dca74 100644 --- 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): 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 index d9d67f569..6aa31fd6e 100644 --- a/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue +++ b/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue @@ -21,7 +21,7 @@ @@ -95,19 +95,19 @@ defineSlots<{ }>() const dropdown = ref | 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, }) 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 index aa1892d03..f7b8ebf14 100644 --- 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 index e1cf87a2a..f75f3d0e2 100644 --- a/packages/bootstrap-vue-next/src/utils/keys.ts +++ b/packages/bootstrap-vue-next/src/utils/keys.ts @@ -115,8 +115,8 @@ export const radioGroupKey: InjectionKey<{ // Collapse export const collapseInjectionKey: InjectionKey<{ id?: Readonly> - readonly close?: () => void - readonly open?: () => void + readonly hide?: () => void + readonly show?: () => void readonly toggle?: () => void visible?: Readonly> isNav?: Readonly> @@ -124,8 +124,8 @@ export const collapseInjectionKey: InjectionKey<{ export const dropdownInjectionKey: InjectionKey<{ id?: Readonly> - readonly close?: () => void - readonly open?: () => void + readonly hide?: () => void + readonly show?: () => void readonly toggle?: () => void visible?: Readonly> isNav?: Readonly>