refactor: refactored classes logic

src/components/Accordion/AccordionContent.vue

@@ -1,28 +1,13 @@
 <template>
   <div
-    :class="{
-      hidden: !panelState.isVisible,
-      'border-b-0': panelState.order !== panelsCount - 1 || accordionState.flush,
-      '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"
+    :class="contentClasses"
   >
     <slot />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
-import { computed, inject } from 'vue'
+import { useAccordionContentClasses } from '@/components/Accordion/composables/useAccordionContentClasses'
 
-const accordionId: any = inject('accordionId')
-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)
+const { contentClasses } = useAccordionContentClasses()
 </script>

src/components/Accordion/AccordionHeader.vue

@@ -2,19 +2,12 @@
   <button
       type="button"
       @click="toggleItem"
-      :class="{
-        'rounded-t-xl': panelState.order === 0 && !accordionState.flush,
-        'border-t-0': panelState.order === 0 && accordionState.flush,
-        'border-b-0': isBottomBorderVisibleForFlush,
-        '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"
+      :class="headerClasses"
   >
     <span class="w-full"><slot /></span>
     <svg
         data-accordion-icon
-        class="w-6 h-6 shrink-0"
-        :class="{'rotate-180': panelState.isVisible}"
+        :class="arrowClasses"
         fill="currentColor"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
@@ -27,36 +20,30 @@
 <script lang="ts" setup>
 import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
 import { computed, inject } from 'vue'
+import { useAccordionHeaderClasses } from '@/components/Accordion/composables/useAccordionHeaderClasses'
 
+const accordionId: string = inject('accordionId') ?? ''
+const panelId: string = inject('panelId') ?? ''
 
-const accordionId: any = inject('accordionId')
-const panelId: any = inject('panelId')
-
+const { accordionsStates } = useAccordionState()
 const accordionState = computed(() => accordionsStates[accordionId])
-const panelsCount = computed(() => Object.keys(accordionsStates[accordionId].panels[panelId]).length)
-const isPanelLast = computed(() => panelState.value.order !== panelsCount.value - 1)
-const isBottomBorderVisibleForFlush = computed(() =>
-    isPanelLast.value ||
-    (accordionState.value.flush && panelState.value.order === panelsCount.value - 1 && !panelState.value.isVisible))
+const panelState = computed(() => accordionState.value.panels[panelId])
 
-const commonToggleItem = () => {
-  const selectedPanel = accordionState.value.panels[panelId]
-  const isSelectedVisible = selectedPanel.isVisible
+const { headerClasses, arrowClasses } = useAccordionHeaderClasses()
+function commonToggleItem() {
+  const isSelectedVisible = panelState.value.isVisible
   for (const panelIndex in accordionState.value.panels) {
     const panel = accordionState.value.panels[panelIndex]
     if (panel.id !== panelId) panel.isVisible = false
     else panel.isVisible = !isSelectedVisible
   }
 }
-const alwaysOpenToggleItem = () => {
-  const selectedPanel = accordionState.value.panels[panelId]
-  selectedPanel.isVisible = !selectedPanel.isVisible
+function alwaysOpenToggleItem() {
+  panelState.value.isVisible = !panelState.value.isVisible
 }
-const toggleItem = () => {
+function toggleItem() {
   if (accordionState.value.alwaysOpen ) return alwaysOpenToggleItem()
   commonToggleItem()
 }
 
-const { accordionsStates } = useAccordionState()
-const panelState = computed(() => accordionsStates[accordionId].panels[panelId])
 </script>

src/components/Accordion/AccordionPanel.vue

@@ -1,7 +1,7 @@
+// TODO: 1 слот
 <template>
   <div>
-    <slot name="header"/>
-    <slot name="content"/>
+    <slot></slot>
   </div>
 </template>
 
@@ -13,7 +13,7 @@ import { nanoid } from 'nanoid'
 const { accordionsStates } = useAccordionState()
 
 const panelId = nanoid()
-const accordionId: any = inject('accordionId')
+const accordionId: string = inject('accordionId') ?? ''
 provide('panelId', panelId)
 
 const accordionState = computed(() => {

src/components/Accordion/composables/useAccordionContentClasses.ts

@@ -0,0 +1,29 @@
+import { computed, inject } from 'vue'
+import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
+import classNames from 'classnames'
+
+
+const baseContentClasses = 'p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900'
+export function useAccordionContentClasses() {
+  const accordionId: string = inject('accordionId') ?? ''
+  const panelId: string = 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)
+
+  const contentClasses = computed(() => classNames(baseContentClasses, {
+    hidden: !panelState.value.isVisible,
+    'border-b-0': panelState.value.order !== panelsCount.value - 1 || accordionState.value.flush,
+    'border-t-0': panelState.value.order === panelsCount.value - 1,
+    'border-x-0': accordionState.value.flush,
+  }))
+  return {
+    contentClasses,
+  }
+}
+
+

src/components/Accordion/composables/useAccordionHeaderClasses.ts

@@ -0,0 +1,35 @@
+import { computed, inject } from 'vue'
+import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
+import classNames from 'classnames'
+
+
+const baseHeaderClasses = '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'
+const baseArrowClasses = 'w-6 h-6 shrink-0'
+export function useAccordionHeaderClasses() {
+  const accordionId: string = inject('accordionId') ?? ''
+  const panelId: string = inject('panelId') ?? ''
+
+  const { accordionsStates } = useAccordionState()
+  const accordionState = computed(() => accordionsStates[accordionId])
+  const panelState = computed(() => accordionState.value.panels[panelId])
+  const panelsCount = computed(() => Object.keys(panelState.value).length)
+  const isPanelLast = computed(() => panelState.value.order !== panelsCount.value - 1)
+  const isBottomBorderVisibleForFlush = computed(() =>
+    isPanelLast.value ||
+    (accordionState.value.flush && panelState.value.order === panelsCount.value - 1 && !panelState.value.isVisible))
+
+  const headerClasses = computed(() => classNames(baseHeaderClasses, {
+    'bg-gray-100 dark:bg-gray-800': panelState.value.isVisible,
+    'rounded-t-xl': panelState.value.order === 0 && !accordionState.value.flush,
+    'border-t-0': panelState.value.order === 0 && accordionState.value.flush,
+    'border-b-0': isBottomBorderVisibleForFlush.value,
+    'border-x-0': accordionState.value.flush,
+  }))
+  const arrowClasses = computed(() => classNames(baseArrowClasses,{ 'rotate-180': panelState.value.isVisible }))
+  return {
+    headerClasses,
+    arrowClasses,
+  }
+}
+
+

src/components/Accordion/composables/useAccordionState.ts

@@ -1,5 +1,5 @@
 import { onBeforeMount, onBeforeUnmount, reactive } from 'vue'
-import type { tAccordionMode, tState } from '@/components/Accordion/types'
+import type { tState } from '@/components/Accordion/types'
 
 const accordionsStates = reactive<tState>({})
 export function useAccordionState(id?: string, options?: {flush: boolean, alwaysOpen: boolean}): {