feat(BModal): adapt close button for better customization. Allow toggle directive.

Author: phlegx

packages/bootstrap-vue-next/src/components/BModal.vue

@@ -36,14 +36,18 @@
                   </slot>
                 </component>
                 <template v-if="!hideHeaderCloseBoolean">
-                  <button v-if="hasHeaderCloseSlot" type="button" @click="hide('close')">
+                  <BButton
+                    v-if="hasHeaderCloseSlot"
+                    v-bind="headerCloseAttrs"
+                    @click="hide('close')"
+                  >
                     <slot name="header-close" />
-                  </button>
+                  </BButton>
                   <BCloseButton
                     v-else
                     ref="closeButton"
-                    :aria-label="headerCloseLabel"
                     :white="headerCloseWhite"
+                    v-bind="headerCloseAttrs"
                     @click="hide('close')"
                   />
                 </template>
@@ -132,8 +136,10 @@ const props = withDefaults(
     headerBgVariant?: ColorVariant | null
     headerBorderVariant?: ColorVariant | null
     headerClass?: ClassValue
+    headerCloseClass?: ClassValue
     headerCloseLabel?: string
     headerCloseWhite?: Booleanish
+    headerCloseVariant?: ButtonVariant | null
     headerTextVariant?: ColorVariant | null
     hideBackdrop?: Booleanish
     hideFooter?: Booleanish
@@ -172,6 +178,10 @@ const props = withDefaults(
     headerBgVariant: null,
     headerBorderVariant: null,
     headerClass: undefined,
+    headerCloseClass: undefined,
+    headerCloseLabel: 'Close',
+    headerCloseWhite: false,
+    headerCloseVariant: 'secondary',
     footerBgVariant: null,
     footerBorderVariant: null,
     footerClass: undefined,
@@ -190,8 +200,6 @@ const props = withDefaults(
     cancelVariant: 'secondary',
     centered: false,
     fullscreen: false,
-    headerCloseLabel: 'Close',
-    headerCloseWhite: false,
     hideBackdrop: false,
     hideFooter: false,
     hideHeader: false,
@@ -251,7 +259,7 @@ const slots = useSlots()
 
 const computedId = useId(() => props.id, 'modal')
 
-const modelValue = useVModel(props, 'modelValue', emit)
+const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
 
 const busyBoolean = useBooleanish(() => props.busy)
 const lazyBoolean = useBooleanish(() => props.lazy)
@@ -339,6 +347,14 @@ const headerClasses = computed(() => [
   },
 ])
 
+const headerCloseClasses = computed(() => [props.headerCloseClass])
+
+const headerCloseAttrs = computed(() => ({
+  'variant': hasHeaderCloseSlot.value ? props.headerCloseVariant : undefined,
+  'class': headerCloseClasses.value,
+  'aria-label': props.headerCloseLabel,
+}))
+
 const footerClasses = computed(() => [
   props.footerClass,
   {

packages/bootstrap-vue-next/src/components/modal.spec.ts

@@ -1,6 +1,8 @@
 import {enableAutoUnmount, mount} from '@vue/test-utils'
 import {afterEach, beforeEach, describe, expect, it} from 'vitest'
 import BModal from './BModal.vue'
+import BCloseButton from './BButton/BCloseButton.vue'
+import BButton from './BButton/BButton.vue'
 // import BTransition from './BTransition/BTransition.vue'
 
 describe('modal', () => {
@@ -313,6 +315,109 @@ describe('modal', () => {
     expect($div3.exists()).toBe(true)
   })
 
+  it('nested div BCloseButton has class when prop headerCloseClass', () => {
+    const wrapper = mount(BModal, {
+      global: {stubs: {teleport: true}},
+      props: {headerCloseClass: 'foobar'},
+    })
+    const $div = wrapper.get('div')
+    const $bclosebutton = $div.getComponent(BCloseButton)
+    expect($bclosebutton.classes()).toContain('foobar')
+  })
+
+  it('nested div BCloseButton has class when prop headerCloseWhite', () => {
+    const wrapper = mount(BModal, {
+      global: {stubs: {teleport: true}},
+      props: {headerCloseWhite: true},
+    })
+    const $div = wrapper.get('div')
+    const $bclosebutton = $div.getComponent(BCloseButton)
+    expect($bclosebutton.classes()).toContain('btn-close-white')
+  })
+
+  it('nested div BCloseButton has no variant class when headerCloseVariant', () => {
+    const wrapper = mount(BModal, {
+      global: {stubs: {teleport: true}},
+      props: {headerCloseVariant: 'warning'},
+    })
+    const $div = wrapper.get('div')
+    const $bclosebutton = $div.getComponent(BCloseButton)
+    expect($bclosebutton.classes()).not.toContain('btn-warning')
+  })
+
+  it('nested div BCloseButton has aria-label to be Close by default', () => {
+    const wrapper = mount(BModal, {
+      global: {stubs: {teleport: true}},
+    })
+    const $div = wrapper.get('div')
+    const $bclosebutton = $div.getComponent(BCloseButton)
+    expect($bclosebutton.attributes('aria-label')).toBe('Close')
+  })
+
+  it('nested div BCloseButton has aria-label to be prop headerCloseLabel', () => {
+    const wrapper = mount(BModal, {
+      global: {stubs: {teleport: true}},
+      props: {headerCloseLabel: 'foobar'},
+    })
+    const $div = wrapper.get('div')
+    const $bclosebutton = $div.getComponent(BCloseButton)
+    expect($bclosebutton.attributes('aria-label')).toBe('foobar')
+  })
+
+  it('nested div BButton has class when prop headerCloseClass', () => {
+    const wrapper = mount(BModal, {
+      global: {stubs: {teleport: true}},
+      props: {headerCloseClass: 'foobar'},
+      slots: {'header-close': 'foobar'},
+    })
+    const $div = wrapper.get('div')
+    const $bbutton = $div.getComponent(BButton)
+    expect($bbutton.classes()).toContain('foobar')
+  })
+
+  it('nested div BButton has class when prop headerCloseWhite', () => {
+    const wrapper = mount(BModal, {
+      global: {stubs: {teleport: true}},
+      props: {headerCloseWhite: true},
+      slots: {'header-close': 'foobar'},
+    })
+    const $div = wrapper.get('div')
+    const $bbutton = $div.getComponent(BButton)
+    expect($bbutton.classes()).not.toContain('btn-close-white')
+  })
+
+  it('nested div BButton has variant class when headerCloseVariant', () => {
+    const wrapper = mount(BModal, {
+      global: {stubs: {teleport: true}},
+      props: {headerCloseVariant: 'warning'},
+      slots: {'header-close': 'foobar'},
+    })
+    const $div = wrapper.get('div')
+    const $bbutton = $div.getComponent(BButton)
+    expect($bbutton.classes()).toContain('btn-warning')
+  })
+
+  it('nested div BButton has aria-label to be Close by default', () => {
+    const wrapper = mount(BModal, {
+      global: {stubs: {teleport: true}},
+      slots: {'header-close': 'foobar'},
+    })
+    const $div = wrapper.get('div')
+    const $bbutton = $div.getComponent(BButton)
+    expect($bbutton.attributes('aria-label')).toBe('Close')
+  })
+
+  it('nested div BButton has aria-label to be prop headerCloseLabel', () => {
+    const wrapper = mount(BModal, {
+      global: {stubs: {teleport: true}},
+      props: {headerCloseLabel: 'foobar'},
+      slots: {'header-close': 'foobar'},
+    })
+    const $div = wrapper.get('div')
+    const $bbutton = $div.getComponent(BButton)
+    expect($bbutton.attributes('aria-label')).toBe('foobar')
+  })
+
   // Test isActive states
 
   // Test emit states