Jan 7, 2025 · Jan 7, 2025 · Jan 7, 2025 · Jan 7, 2025
diff --git a/packages/coreui-vue/src/components/accordion/CAccordionBody.ts b/packages/coreui-vue/src/components/accordion/CAccordionBody.ts
 const CAccordionBody = defineComponent({
  name: 'CAccordionBody',
  setup(_, { slots }) {
    const id = inject('id')
    const visible = inject('visible') as Ref<boolean>
    return () =>
      h(
        CCollapse,
        { class: 'accordion-collapse', visible: visible.value },
        { class: 'accordion-collapse',id,visible: visible.value },
        {
          default: () => h('div', { class: ['accordion-body'] }, slots.default && slots.default()),
        },
diff --git a/packages/coreui-vue/src/components/accordion/CAccordionButton.ts b/packages/coreui-vue/src/components/accordion/CAccordionButton.ts
 const CAccordionButton = defineComponent({
  name: 'CAccordionButton',
  setup(_, { slots }) {
    const id = inject('id') as string
    const toggleVisibility = inject('toggleVisibility') as () => void
    const visible = inject('visible') as Ref<boolean>

        'button',
        {
          type: 'button',
          'aria-expanded': !visible.value,
          'aria-control': id,
          'aria-expanded': visible.value,
          class: ['accordion-button', { ['collapsed']: !visible.value }],
          onClick: () => toggleVisibility(),
        },
diff --git a/packages/coreui-vue/src/components/accordion/CAccordionItem.ts b/packages/coreui-vue/src/components/accordion/CAccordionItem.ts
 import { defineComponent, h, inject, provide, ref, watch, Ref } from 'vue'
 import { defineComponent, h, inject, provide, ref, watch, Ref, useId } from 'vue'

 const CAccordionItem = defineComponent({
  name: 'CAccordionItem',
  props: {
    /**
     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
     */
    id: String,
    /**
     * The item key.
     */
    const alwaysOpen = inject('alwaysOpen') as boolean
    const setActiveItemKey = inject('setActiveItemKey') as (key: number | string) => void

    const itemKey = ref(props.itemKey ?? Math.random().toString(36).slice(2, 11))
    const id = props.id ?? useId()
    const itemKey = ref(props.itemKey ?? id)
    const visible = ref(Boolean(activeItemKey.value === itemKey.value))

    watch(activeItemKey, () => (visible.value = Boolean(activeItemKey.value === itemKey.value)))

    const toggleVisibility = () => {
      visible.value = !visible.value
      !alwaysOpen && visible && setActiveItemKey(itemKey.value)
      if (!alwaysOpen && visible) {
        setActiveItemKey(itemKey.value)
      }
    }

    provide('id', id)
    provide('visible', visible)
    provide('toggleVisibility', toggleVisibility)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,11 +4,12 @@ import { CCollapse } from '../collapse/CCollapse'
		const CAccordionBody = defineComponent({
		name: 'CAccordionBody',
		setup(_, { slots }) {
		const id = inject('id')
		const visible = inject('visible') as Ref<boolean>
		return () =>
		h(
		CCollapse,
		{ class: 'accordion-collapse', visible: visible.value },
		{ class: 'accordion-collapse',id,visible: visible.value },
		{
		default: () => h('div', { class: ['accordion-body'] }, slots.default && slots.default()),
		},
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,6 +3,7 @@ import { defineComponent, h, inject, Ref } from 'vue'
		const CAccordionButton = defineComponent({
		name: 'CAccordionButton',
		setup(_, { slots }) {
		const id = inject('id') as string
		const toggleVisibility = inject('toggleVisibility') as () => void
		const visible = inject('visible') as Ref<boolean>

Expand All		@@ -11,7 +12,8 @@ const CAccordionButton = defineComponent({
		'button',
		{
		type: 'button',
		'aria-expanded': !visible.value,
		'aria-control': id,
		'aria-expanded': visible.value,
		class: ['accordion-button', { ['collapsed']: !visible.value }],
		onClick: () => toggleVisibility(),
		},
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,8 +1,12 @@
		import { defineComponent, h, inject, provide, ref, watch, Ref } from 'vue'
		import { defineComponent, h, inject, provide, ref, watch, Ref, useId } from 'vue'

		const CAccordionItem = defineComponent({
		name: 'CAccordionItem',
		props: {
		/**
		* The id global attribute defines an identifier (ID) that must be unique in the whole document.
		*/
		id: String,
		/**
		* The item key.
		*/
Expand All		@@ -13,16 +17,20 @@ const CAccordionItem = defineComponent({
		const alwaysOpen = inject('alwaysOpen') as boolean
		const setActiveItemKey = inject('setActiveItemKey') as (key: number \| string) => void

		const itemKey = ref(props.itemKey ?? Math.random().toString(36).slice(2, 11))
		const id = props.id ?? useId()
		const itemKey = ref(props.itemKey ?? id)
		const visible = ref(Boolean(activeItemKey.value === itemKey.value))

		watch(activeItemKey, () => (visible.value = Boolean(activeItemKey.value === itemKey.value)))

		const toggleVisibility = () => {
		visible.value = !visible.value
		!alwaysOpen && visible && setActiveItemKey(itemKey.value)
		if (!alwaysOpen && visible) {
		setActiveItemKey(itemKey.value)
		}
		}

		provide('id', id)
		provide('visible', visible)
		provide('toggleVisibility', toggleVisibility)

Expand Down