From 13be6cc7bca4f738f7f82bb4eaa72f0f62196c47 Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Sun, 11 Dec 2022 00:15:09 +0400
Subject: [PATCH] fix: fixed borders

---
 src/components/Accordion/AccordionContent.vue | 11 ++++++++---
 src/components/Accordion/AccordionHeader.vue  |  8 ++++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/Accordion/AccordionContent.vue b/src/components/Accordion/AccordionContent.vue
index 9325428..bad3b60 100644
--- a/src/components/Accordion/AccordionContent.vue
+++ b/src/components/Accordion/AccordionContent.vue
@@ -1,7 +1,11 @@
 <template>
   <div
-      :class="{ hidden: !panelState.isVisible }"
-      class="p-5 border [&:not(:last-item)]:border-b-0 last:border-t-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900"
+    :class="{
+      hidden: !panelState.isVisible,
+      'border-b-0': panelState.order !== panelsCount - 1,
+      'border-t-0': panelState.order === panelsCount - 1,
+    }"
+    class="p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900"
   >
     <slot />
   </div>
@@ -14,7 +18,8 @@ import { computed, inject } from 'vue'
 const accordionId: any = inject('accordionId')
 const panelId: any = inject('panelId')
 
-const { accordionsStates } = useAccordionState()
 
+const { accordionsStates } = useAccordionState()
 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 20e00ce..1bc5c0d 100644
--- a/src/components/Accordion/AccordionHeader.vue
+++ b/src/components/Accordion/AccordionHeader.vue
@@ -2,7 +2,10 @@
   <button
       type="button"
       @click="toggleItem"
-      :class="{ 'rounded-t-xl border-b-0': panelState.order === 0 }"
+      :class="{
+        'rounded-t-xl': panelState.order === 0,
+        'border-b-0': panelState.order !== panelsCount - 1,
+        }"
       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"
   >
     <span class="w-full"><slot /></span>
@@ -21,7 +24,7 @@
 
 <script lang="ts" setup>
 import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
-import { computed, inject, provide } from 'vue'
+import { computed, inject } from 'vue'
 
 
 const accordionId: any = inject('accordionId')
@@ -30,6 +33,7 @@ const panelId: any = inject('panelId')
 const accordionState = computed(() => {
   return accordionsStates[accordionId]
 })
+const panelsCount = computed(() => Object.keys(accordionsStates[accordionId].panels[panelId]).length)
 
 const commonToggleItem = () => {
   const selectedPanel = accordionState.value.panels[panelId]