feat: Added prop 'openFirstItem' to accordion component

src/components/Accordion/Accordion.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="vp-raw" :data-accordion-id="accordionId">
+  <div :data-accordion-id="accordionId">
     <slot />
   </div>
 </template>
 <script lang="ts" setup>
 import { nanoid } from 'nanoid'
 import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
+interface AccordionProps {
+  alwaysOpen?: boolean
+  openFirstItem?: boolean
+  flush?: boolean
+}
 
-const props = defineProps({
-  alwaysOpen: {
-    type: Boolean,
-    default: false,
-  },
-  flush: {
-    type: Boolean,
-    default: false,
-  },
+const props = withDefaults(defineProps<AccordionProps>(), {
+  alwaysOpen: false,
+  openFirstItem: true,
+  flush: false,
 })
 
 const accordionId = nanoid()

src/components/Accordion/AccordionHeader.vue

@@ -1,19 +1,8 @@
 <template>
   <div ref="header">
-    <button
-        v-if="isLoaded"
-        type="button"
-        @click="toggleItem"
-        :class="headerClasses"
-    >
+    <button v-if="isLoaded" type="button" @click="toggleItem" :class="headerClasses">
       <span class="w-full"><slot /></span>
-      <svg
-          data-accordion-icon
-          :class="arrowClasses"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-      >
+      <svg data-accordion-icon :class="arrowClasses" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path>
       </svg>
     </button>
@@ -22,8 +11,7 @@
 
 <script lang="ts" setup>
 import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
-import { computed, onMounted, ref } from 'vue'
-import type { ComputedRef } from 'vue'
+import { computed, onMounted, ref, type ComputedRef } from 'vue'
 import { useAccordionHeaderClasses } from '@/components/Accordion/composables/useAccordionHeaderClasses'
 
 const isLoaded = ref(false)
@@ -48,7 +36,7 @@ function alwaysOpenToggleItem() {
   panelState.value.isVisible = !panelState.value.isVisible
 }
 function toggleItem() {
-  if (accordionState.value.alwaysOpen ) return alwaysOpenToggleItem()
+  if (accordionState.value.alwaysOpen) return alwaysOpenToggleItem()
   commonToggleItem()
 }
 

src/components/Accordion/AccordionPanel.vue

@@ -11,7 +11,6 @@ import { nanoid } from 'nanoid'
 
 const { accordionsStates } = useAccordionState()
 
-
 const panelId = nanoid()
 const panel = ref()
 const accordionId = computed(() => {
@@ -28,7 +27,7 @@ onMounted(() => {
   accordionState.value.panels[panelId] = {
     id: panelId,
     order: panelsCount,
-    isVisible: !panelsCount,
+    isVisible: (accordionState.value.openFirstItem && panelsCount === 0) ?? false,
   }
 })
 </script>

src/components/Accordion/composables/useAccordionState.ts

@@ -1,17 +1,24 @@
 import { onBeforeMount, onBeforeUnmount, reactive } from 'vue'
 import type { tState } from '@/components/Accordion/types'
-
+interface AccordionProps {
+  alwaysOpen?: boolean
+  openFirstItem?: boolean
+  flush?: boolean
+}
 const accordionsStates = reactive<tState>({})
-export function useAccordionState(id?: string, options?: {flush: boolean, alwaysOpen: boolean}): {
+export function useAccordionState(
+  id?: string,
+  options?: AccordionProps
+): {
   accordionsStates: tState
 } {
-
   onBeforeMount(() => {
     if (!id) return
     accordionsStates[id] = {
       id: id,
       flush: options?.flush ?? false,
       alwaysOpen: options?.alwaysOpen ?? false,
+      openFirstItem: options?.openFirstItem ?? true,
       panels: {},
     }
   })
@@ -24,5 +31,3 @@ export function useAccordionState(id?: string, options?: {flush: boolean, always
     accordionsStates,
   }
 }
-
-

src/components/Accordion/types.ts

@@ -8,9 +8,10 @@ type tAccordionPanels = {
   [key: string]: tAccordionPanel
 }
 type tStateElement = {
-  id: string,
-  flush: boolean,
-  alwaysOpen: boolean,
+  id: string
+  flush: boolean
+  alwaysOpen: boolean
+  openFirstItem: boolean
   panels: tAccordionPanels
 }
 export type tState = {