Merge pull request #112 from assasin0076/feat_accordion

feat: added basic accordion

src/components/Accordion/Accordion.vue

@@ -1,71 +1,25 @@
 <template>
-  <div id="accordion-collapse" data-accordion="collapse">
-    <h2 id="accordion-collapse-heading-1">
-      <button type="button" class="flex justify-between items-center p-5 w-full font-medium text-left text-gray-500 rounded-t-xl border border-b-0 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" data-accordion-target="#accordion-collapse-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
-        <span>What is Flowbite?</span>
-        <svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" 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" clip-rule="evenodd"></path></svg>
-      </button>
-    </h2>
-    <div id="accordion-collapse-body-1" class="hidden" aria-labelledby="accordion-collapse-heading-1">
-      <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
-        <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-        <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-      </div>
-    </div>
-    <h2 id="accordion-collapse-heading-2">
-      <button type="button" class="flex justify-between items-center p-5 w-full font-medium text-left text-gray-500 border border-b-0 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" data-accordion-target="#accordion-collapse-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2">
-        <span>Is there a Figma file available?</span>
-        <svg data-accordion-icon class="w-6 h-6 shrink-0" 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" clip-rule="evenodd"></path></svg>
-      </button>
-    </h2>
-    <div id="accordion-collapse-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
-      <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
-        <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-        <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-      </div>
-    </div>
-    <h2 id="accordion-collapse-heading-3">
-      <button type="button" class="flex justify-between 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" data-accordion-target="#accordion-collapse-body-3" aria-expanded="false" aria-controls="accordion-collapse-body-3">
-        <span>What are the differences between Flowbite and Tailwind UI?</span>
-        <svg data-accordion-icon class="w-6 h-6 shrink-0" 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" clip-rule="evenodd"></path></svg>
-      </button>
-    </h2>
-    <div id="accordion-collapse-body-3" class="hidden" aria-labelledby="accordion-collapse-heading-3">
-      <div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
-        <p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
-        <p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
-        <p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
-        <ul class="pl-5 list-disc text-gray-500 dark:text-gray-400">
-          <li><a href="https://flowbite.com/pro/" class="text-blue-600 dark:text-blue-500 hover:underline">Flowbite Pro</a></li>
-          <li><a href="https://tailwindui.com/" rel="nofollow" class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
-        </ul>
-      </div>
-    </div>
+  <div class="vp-raw">
+    <slot :accordionId="accordionId"/>
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, toRefs } from 'vue'
-import type { PropType } from 'vue'
+import { provide } from 'vue'
+import { nanoid } from 'nanoid'
+import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
 
 const props = defineProps({
   alwaysOpen: {
     type: Boolean,
     default: false,
   },
-  arrowIcon: {
-    type: String,
-    default: '',
-  },
-  children: {
-    type: Array,
-    default() {
-      return []
-    },
-  },
   flush: {
     type: Boolean,
     default: false,
   },
 })
 
+const accordionId = nanoid()
+provide('accordionId', accordionId)
+useAccordionState(accordionId, { ...props })
 </script>

src/components/Accordion/AccordionContent.vue

@@ -0,0 +1,13 @@
+<template>
+  <div
+    :class="contentClasses"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useAccordionContentClasses } from '@/components/Accordion/composables/useAccordionContentClasses'
+
+const { contentClasses } = useAccordionContentClasses()
+</script>

src/components/Accordion/AccordionHeader.vue

@@ -0,0 +1,49 @@
+<template>
+  <button
+      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"
+    >
+      <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>
+</template>
+
+<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 { accordionsStates } = useAccordionState()
+const accordionState = computed(() => accordionsStates[accordionId])
+const panelState = computed(() => accordionState.value.panels[panelId])
+
+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
+  }
+}
+function alwaysOpenToggleItem() {
+  panelState.value.isVisible = !panelState.value.isVisible
+}
+function toggleItem() {
+  if (accordionState.value.alwaysOpen ) return alwaysOpenToggleItem()
+  commonToggleItem()
+}
+
+</script>

src/components/Accordion/AccordionPanel.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, onBeforeMount, provide } from 'vue'
+import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
+import { nanoid } from 'nanoid'
+
+const { accordionsStates } = useAccordionState()
+
+const panelId = nanoid()
+const accordionId: string = inject('accordionId') ?? ''
+provide('panelId', panelId)
+
+const accordionState = computed(() => {
+  return accordionsStates[accordionId]
+})
+
+onBeforeMount(() => {
+  const panelsCount = Object.keys(accordionState.value.panels).length
+  accordionState.value.panels[panelId] = {
+    id: panelId,
+    order: panelsCount,
+    isVisible: !panelsCount,
+  }
+})
+</script>

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

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

src/components/Accordion/types.ts

@@ -0,0 +1,18 @@
+export type tAccordionMode = 'flush' | 'alwaysOpen' | 'default'
+export type tAccordionPanel = {
+  order: number
+  id: string
+  isVisible: boolean
+}
+type tAccordionPanels = {
+  [key: string]: tAccordionPanel
+}
+type tStateElement = {
+  id: string,
+  flush: boolean,
+  alwaysOpen: boolean,
+  panels: tAccordionPanels
+}
+export type tState = {
+  [key: string]: tStateElement
+}

src/index.ts

@@ -1,3 +1,7 @@
+export { default as Accordion } from './components/Accordion/Accordion.vue'
+export { default as AccordionPanel } from './components/Accordion/AccordionPanel.vue'
+export { default as AccordionHeader } from './components/Accordion/AccordionHeader.vue'
+export { default as AccordionContent } from './components/Accordion/AccordionContent.vue'
 export { default as Button } from './components/Button/Button.vue'
 export { default as Spinner } from './components/Spinner/Spinner.vue'
 export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.vue'
@@ -12,7 +16,6 @@ export { default as BreadcrumbItem } from './components/Breadcrumb/BreadcrumbIte
 export { default as Avatar } from './components/Avatar/Avatar.vue'
 export { default as StackedAvatars } from './components/Avatar/StackedAvatars.vue'
 export { default as StackedAvatarsCounter } from './components/Avatar/StackedAvatarsCounter.vue'
-export { default as Accordion } from './components/Accordion/Accordion.vue'
 export { default as Badge } from './components/Badge/Badge.vue'
 export { default as TheCard } from './components/Card/TheCard.vue'
 export { default as Carousel } from './components/Carousel/Carousel.vue'