feat(Accordion): add multiple prop and close others by default

docs/components/content/examples/AccordionExampleBasic.vue

@@ -12,6 +12,7 @@ const items = [{
 }, {
   label: 'Theming',
   icon: 'i-heroicons-eye-dropper',
+  closeOthers: true,
   content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
 }, {
   label: 'Layouts',

docs/content/2.elements/5.accordion.md

@@ -16,6 +16,7 @@ Pass an array to the `items` prop of the Accordion component. Each item can have
 - `content` - The content to display in the panel by default.
 - `disabled` - Determines whether the item is disabled or not.
 - `defaultOpen` - Determines whether the item is initially open or closed.
+- `closeOthers` - Determines whether the item click close others or not.
 
 ::component-example
 #default
@@ -34,7 +35,12 @@ const items = [{
   icon: 'i-heroicons-arrow-down-tray',
   disabled: true,
   content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}, ...]
+}, {
+  label: 'Theming',
+  icon: 'i-heroicons-eye-dropper',
+  closeOthers: true,
+  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+} ...]
 </script>
 
 <template>
@@ -130,6 +136,29 @@ excludedProps:
 ---
 ::
 
+### Close others
+
+Use the `close-others` prop to always close others when an item is opened.
+
+::component-card
+---
+baseProps:
+  items:
+    - label: "What is NuxtLabs UI?"
+      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+    - label: "Getting Started"
+      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+    - label: "Theming"
+      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+    - label: "Components"
+      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+props:
+  closeOthers: true
+excludedProps:
+  - defaultOpen
+---
+::
+
 ## Slots
 
 You can use slots to customize the buttons and items content of the Accordion.

src/runtime/components/elements/Accordion.vue

@@ -1,9 +1,9 @@
 <template>
   <div :class="ui.wrapper">
     <HDisclosure v-for="(item, index) in items" v-slot="{ open, close }" :key="index" :default-open="defaultOpen || item.defaultOpen">
-      <HDisclosureButton as="template" :disabled="item.disabled">
+      <HDisclosureButton :ref="() => updateClosesRefs(close, index)" as="template" :disabled="item.disabled">
         <slot :item="item" :index="index" :open="open" :close="close">
-          <UButton v-bind="{ ...omit(ui.default, ['openIcon', 'closeIcon']), ...$attrs, ...omit(item, ['slot', 'disabled', 'content', 'defaultOpen']) }" class="w-full">
+          <UButton v-bind="{ ...omit(ui.default, ['openIcon', 'closeIcon']), ...$attrs, ...omit(item, ['slot', 'disabled', 'content', 'defaultOpen']) }" class="w-full" @click="closeAll(index)">
             <template #trailing>
               <UIcon
                 :name="!open ? openIcon : closeIcon ? closeIcon : openIcon"
@@ -54,7 +54,7 @@ export default defineComponent({
   inheritAttrs: false,
   props: {
     items: {
-      type: Array as PropType<Partial<Button & { slot: string, disabled: boolean, content: string, defaultOpen: boolean }>[]>,
+      type: Array as PropType<Partial<Button & { slot: string, disabled: boolean, content: string, defaultOpen: boolean, closeOthers: boolean }>[]>,
       default: () => []
     },
     defaultOpen: {
@@ -69,6 +69,10 @@ export default defineComponent({
       type: String,
       default: () => appConfig.ui.accordion.default.closeIcon
     },
+    closeOthers: {
+      type: Boolean,
+      default: false
+    },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.accordion>>,
       default: () => appConfig.ui.accordion
@@ -82,12 +86,31 @@ export default defineComponent({
 
     const uiButton = computed<Partial<typeof appConfig.ui.button>>(() => appConfig.ui.button)
 
+    const closesRefs = ref([])
+
+    function updateClosesRefs (close, index) {
+      closesRefs.value[index] = close
+    }
+
+    function closeAll (itemIndex) {
+      if (!props.items[itemIndex].closeOthers && !props.closeOthers) return
+
+      closesRefs.value.forEach((close, index) => {
+        if (index === itemIndex) return
+
+        close()
+      })
+    }
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       uiButton,
-      omit
+      omit,
+      closeAll,
+      closesRefs,
+      updateClosesRefs
     }
   }
 })
-</script>
+</script>