fix: properly flush logic

src/components/Accordion/Accordion.vue

@@ -6,7 +6,6 @@
 <script lang="ts" setup>
 import { provide } from 'vue'
 import { nanoid } from 'nanoid'
-import type { tAccordionMode } from '@/components/Accordion/types'
 import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
 
 const props = defineProps({
@@ -22,8 +21,5 @@ const props = defineProps({
 
 const accordionId = nanoid()
 provide('accordionId', accordionId)
-let mode: tAccordionMode = 'default'
+useAccordionState(accordionId, { ...props })
-if (props.alwaysOpen) mode = 'alwaysOpen'
-if (props.flush) mode = 'flush'
-useAccordionState(accordionId, mode)
 </script>

src/components/Accordion/AccordionContent.vue

@@ -4,6 +4,7 @@
       hidden: !panelState.isVisible,
       'border-b-0': panelState.order !== panelsCount - 1,
       'border-t-0': panelState.order === panelsCount - 1,
+      'border-x-0': accordionState.flush,
     }"
     class="p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900"
   >
@@ -20,6 +21,8 @@ const panelId: any = inject('panelId')
 
 
 const { accordionsStates } = useAccordionState()
+
+const accordionState = computed(() => accordionsStates[accordionId])
 const panelState = computed(() => accordionsStates[accordionId].panels[panelId])
 const panelsCount = computed(() => Object.keys(accordionsStates[accordionId].panels[panelId]).length)
 </script>

src/components/Accordion/AccordionHeader.vue

@@ -3,8 +3,9 @@
       type="button"
       @click="toggleItem"
       :class="{
-        'rounded-t-xl': panelState.order === 0,
+        'rounded-t-xl': panelState.order === 0 && !accordionState.flush,
         'border-b-0': panelState.order !== panelsCount - 1,
+        'border-x-0': accordionState.flush,
         }"
       class="flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
   >
@@ -30,9 +31,7 @@ import { computed, inject } from 'vue'
 const accordionId: any = inject('accordionId')
 const panelId: any = inject('panelId')
 
-const accordionState = computed(() => {
+const accordionState = computed(() => accordionsStates[accordionId])
-  return accordionsStates[accordionId]
-})
 const panelsCount = computed(() => Object.keys(accordionsStates[accordionId].panels[panelId]).length)
 
 const commonToggleItem = () => {
@@ -48,18 +47,9 @@ const alwaysOpenToggleItem = () => {
   const selectedPanel = accordionState.value.panels[panelId]
   selectedPanel.isVisible = !selectedPanel.isVisible
 }
-const flushToggleItem = () => {
-  const selectedPanel = accordionState.value.panels[panelId]
-  if (selectedPanel.isVisible) return
-  commonToggleItem()
-}
 const toggleItem = () => {
-  const actionsMap = {
+  if (accordionState.value.alwaysOpen ) return alwaysOpenToggleItem()
-    flush: flushToggleItem,
+  commonToggleItem()
-    alwaysOpen: alwaysOpenToggleItem,
-    default: commonToggleItem,
-  }
-  actionsMap[accordionState.value.mode]()
 }
 
 const { accordionsStates } = useAccordionState()

src/components/Accordion/composables/useAccordionState.ts

@@ -2,7 +2,7 @@ import { onBeforeMount, onBeforeUnmount, reactive } from 'vue'
 import type { tAccordionMode, tState } from '@/components/Accordion/types'
 
 const accordionsStates = reactive<tState>({})
-export function useAccordionState(id?: string, mode?: tAccordionMode): {
+export function useAccordionState(id?: string, options?: {flush: boolean, alwaysOpen: boolean}): {
   accordionsStates: tState
 } {
 
@@ -10,7 +10,8 @@ export function useAccordionState(id?: string, mode?: tAccordionMode): {
     if (!id) return
     accordionsStates[id] = {
       id: id,
-      mode: mode ? mode : 'default',
+      flush: options?.flush ?? false,
+      alwaysOpen: options?.alwaysOpen ?? false,
       panels: {},
     }
   })

src/components/Accordion/types.ts

@@ -9,7 +9,8 @@ type tAccordionPanels = {
 }
 type tStateElement = {
   id: string,
-  mode: tAccordionMode
+  flush: boolean,
+  alwaysOpen: boolean,
 
   panels: tAccordionPanels
 }