feat: added basic accordion

docs/components/accordion/examples/AccordionExample.vue

@@ -1,8 +1,22 @@
 <template>
   <div class="vp-raw flex flex-col">
-    <Accordion></Accordion>
+    <Accordion :items="items" flush>
+      <div>
+        <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>
+        <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>
+    </Accordion>
   </div>
 </template>
 <script setup>
+
+const items = [
+  { header: 'ehehe' },
+  { header: 'ehehe\'nt' },
+]
 import { Accordion } from '../../../../src/index'
 </script>

package-lock.json

@@ -14,7 +14,8 @@
         "floating-vue": "^2.0.0-beta.20",
         "flowbite": "1.5.4",
         "lodash-es": "4.17.21",
-        "tailwindcss": "3.2.4"
+        "nanoid": "4.0.0",
+        "tailwindcss": "^3"
       },
       "devDependencies": {
         "@types/lodash-es": "4.17.6",
@@ -3502,14 +3503,14 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.4",
+      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==",
       "bin": {
-        "nanoid": "bin/nanoid.cjs"
+        "nanoid": "bin/nanoid.js"
       },
       "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+        "node": "^14 || ^16 || >=18"
       }
     },
     "node_modules/natural-compare": {
@@ -3859,6 +3860,17 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/postcss/node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/preact": {
       "version": "10.11.3",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.11.3.tgz",
@@ -7901,9 +7913,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.3.4",
+      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+      "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg=="
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -8074,6 +8086,13 @@
         "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
+      },
+      "dependencies": {
+        "nanoid": {
+          "version": "3.3.4",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+          "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+        }
       }
     },
     "postcss-import": {

package.json

@@ -64,12 +64,13 @@
     "vue-tsc": "0.30.0"
   },
   "dependencies": {
-    "floating-vue": "^2.0.0-beta.20",
     "@vueuse/core": "9.3.0",
     "classnames": "2.3.2",
+    "floating-vue": "^2.0.0-beta.20",
     "flowbite": "1.5.4",
     "lodash-es": "4.17.21",
-    "tailwindcss": "3.2.4"
+    "nanoid": "4.0.0",
+    "tailwindcss": "^3"
   },
   "engines": {
     "node": "14.x",

src/components/Accordion/Accordion.vue

@@ -1,51 +1,37 @@
 <template>
-  <div id="accordion-collapse" data-accordion="collapse">
+  <div>
-    <h2 id="accordion-collapse-heading-1">
+    <template v-for="(item, i) in formattedItems" :key="item.id">
-      <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">
+      <h2>
-        <span>What is Flowbite?</span>
+        <button
-        <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>
+          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"
+          :class="{'rounded-t-xl border-b-0': i === 0}"
+          @click="toggleItem(item)"
+        >
+          <span>{{item.header}}</span>
+          <svg
+            data-accordion-icon
+            class="w-6 h-6 shrink-0"
+            :class="{'rotate-180': item.isVisible}"
+            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>
       </h2>
-    <div id="accordion-collapse-body-1" class="hidden" aria-labelledby="accordion-collapse-heading-1">
+      <div :class="{hidden: !item.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">
-      <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
+        <slot />
-        <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>
+    </template>
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, toRefs } from 'vue'
+import { ref } from 'vue'
 import type { PropType } from 'vue'
+import { nanoid } from 'nanoid'
+import type { AccordionItem, AccordionTransformedItem } from '@/components/Accordion/types'
 
 const props = defineProps({
   alwaysOpen: {
@@ -56,8 +42,8 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  children: {
+  items: {
-    type: Array,
+    type: Array as PropType<AccordionItem[]>,
     default() {
       return []
     },
@@ -68,4 +54,26 @@ const props = defineProps({
   },
 })
 
+const formattedItems = ref<AccordionTransformedItem[]>(props.items.map((item, i) => ({ ...item, id: nanoid(), isVisible: i === 0 })))
+
+const commonToggleItem = (selectedItem: AccordionTransformedItem) => {
+  const isSelectedVisible = selectedItem.isVisible
+  formattedItems.value = formattedItems.value.map((item) => {
+    if (item.id !== selectedItem.id) return { ...item, isVisible: false }
+    return { ...item, isVisible: !isSelectedVisible }
+  })
+}
+const alwaysOpenToggleItem = (selectedItem: AccordionTransformedItem) => {
+  selectedItem.isVisible = !selectedItem.isVisible
+}
+const flushToggleItem = (selectedItem: AccordionTransformedItem) => {
+  const isSelectedVisible = selectedItem.isVisible
+  if (isSelectedVisible) return
+  commonToggleItem(selectedItem)
+}
+const toggleItem = (selectedItem: AccordionTransformedItem) => {
+  if (props.alwaysOpen) return alwaysOpenToggleItem(selectedItem)
+  if (props.flush) return flushToggleItem(selectedItem)
+  commonToggleItem(selectedItem)
+}
 </script>

src/components/Accordion/types.ts

@@ -0,0 +1,8 @@
+export type AccordionItem = {
+  header: string
+  icon?: string
+}
+export interface AccordionTransformedItem extends AccordionItem {
+  id: string
+  isVisible: boolean
+}