From 02970f7158840d2a68c1db784515b797140d5cd1 Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Sun, 11 Dec 2022 11:18:32 +0400
Subject: [PATCH] fix: properly flush logic

---
 src/components/Accordion/Accordion.vue        |  6 +-----
 src/components/Accordion/AccordionContent.vue |  3 +++
 src/components/Accordion/AccordionHeader.vue  | 20 +++++--------------
 .../composables/useAccordionState.ts          |  5 +++--
 src/components/Accordion/types.ts             |  3 ++-
 5 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/src/components/Accordion/Accordion.vue b/src/components/Accordion/Accordion.vue
index a47c3b7..cdf0f17 100644
--- a/src/components/Accordion/Accordion.vue
+++ b/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'
-if (props.alwaysOpen) mode = 'alwaysOpen'
-if (props.flush) mode = 'flush'
-useAccordionState(accordionId, mode)
+useAccordionState(accordionId, { ...props })
 </script>
diff --git a/src/components/Accordion/AccordionContent.vue b/src/components/Accordion/AccordionContent.vue
index bad3b60..85d0af1 100644
--- a/src/components/Accordion/AccordionContent.vue
+++ b/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>
diff --git a/src/components/Accordion/AccordionHeader.vue b/src/components/Accordion/AccordionHeader.vue
index 1bc5c0d..017af7c 100644
--- a/src/components/Accordion/AccordionHeader.vue
+++ b/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(() => {
-  return accordionsStates[accordionId]
-})
+const accordionState = computed(() => 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 = {
-    flush: flushToggleItem,
-    alwaysOpen: alwaysOpenToggleItem,
-    default: commonToggleItem,
-  }
-  actionsMap[accordionState.value.mode]()
+  if (accordionState.value.alwaysOpen ) return alwaysOpenToggleItem()
+  commonToggleItem()
 }
 
 const { accordionsStates } = useAccordionState()
diff --git a/src/components/Accordion/composables/useAccordionState.ts b/src/components/Accordion/composables/useAccordionState.ts
index 306e7f8..89b13f6 100644
--- a/src/components/Accordion/composables/useAccordionState.ts
+++ b/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: {},
     }
   })
diff --git a/src/components/Accordion/types.ts b/src/components/Accordion/types.ts
index ffc4a72..e10045c 100644
--- a/src/components/Accordion/types.ts
+++ b/src/components/Accordion/types.ts
@@ -9,7 +9,8 @@ type tAccordionPanels = {
 }
 type tStateElement = {
   id: string,
-  mode: tAccordionMode
+  flush: boolean,
+  alwaysOpen: boolean,
 
   panels: tAccordionPanels
 }