jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: refactored accordion

Browse Source
This commit is contained in:
victor
2022-12-11 00:05:01 +04:00
parent beb6efaa8a
commit 93e863f02c
11 changed files with 467 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
docs/components/accordion/accordion.md
View File

@@ -53,29 +53,53 @@ Always open prop to makes accordion able to open multiple elements.
```vue ```vue
<script setup> <script setup>
import { Accordion } from 'flowbite' import { Accordion } from 'flowbite'
import { ref } from 'vue' import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
import AccordionContent from '@/components/Accordion/AccordionContent.vue'
const items = ref([
{ header: 'header' },
{ header: 'another header' },
{ header: 'and one more header' },
])
</script> </script>
<template> <template>
<Accordion :items="items" always-open> <Accordion>
<accordion-panel>
<template #header>
<accordion-header>header</accordion-header>
</template>
<template #content>
<accordion-content>
<div> <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="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> <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>
</accordion-content>
</template>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>another header</accordion-header>
</template>
<template #content>
<accordion-content>
<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="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> <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>
</accordion-content>
</template>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>and one more header</accordion-header>
</template>
<template #content>
<accordion-content>
<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="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> <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>
</accordion-content>
</template>
</accordion-panel>
</Accordion> </Accordion>
</template> </template>
@@ -88,29 +112,53 @@ Flush prop makes opened tab being not able to close.
```vue ```vue
<script setup> <script setup>
import { Accordion } from 'flowbite' import { Accordion } from 'flowbite'
import { ref } from 'vue' import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
import AccordionContent from '@/components/Accordion/AccordionContent.vue'
const items = ref([
{ header: 'header' },
{ header: 'another header' },
{ header: 'and one more header' },
])
</script> </script>
<template> <template>
<Accordion :items="items" flush> <Accordion flush>
<accordion-panel>
<template #header>
<accordion-header>header</accordion-header>
</template>
<template #content>
<accordion-content>
<div> <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="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> <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>
</accordion-content>
</template>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>another header</accordion-header>
</template>
<template #content>
<accordion-content>
<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="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> <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>
</accordion-content>
</template>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>and one more header</accordion-header>
</template>
<template #content>
<accordion-content>
<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="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> <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>
</accordion-content>
</template>
</accordion-panel>
</Accordion> </Accordion>
</template> </template>
@@ -123,29 +171,53 @@ You can style headers with `header-classes` prop and content containers with `co
```vue ```vue
<script setup> <script setup>
import { Accordion } from 'flowbite' import { Accordion } from 'flowbite'
import { ref } from 'vue' import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
import AccordionContent from '@/components/Accordion/AccordionContent.vue'
const items = ref([
{ header: 'header' },
{ header: 'another header' },
{ header: 'and one more header' },
])
</script> </script>
<template> <template>
<Accordion :items="items" header-classes="bg-blue-800"> <Accordion flush>
<accordion-panel>
<template #header>
<accordion-header>header</accordion-header>
</template>
<template #content>
<accordion-content>
<div> <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="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> <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>
</accordion-content>
</template>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header class="bg-blue-800">another header</accordion-header>
</template>
<template #content>
<accordion-content>
<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="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> <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>
</accordion-content>
</template>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>and one more header</accordion-header>
</template>
<template #content>
<accordion-content>
<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="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> <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>
</accordion-content>
</template>
</accordion-panel>
</Accordion> </Accordion>
</template> </template>

38
docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
View File

@@ -1,27 +1,51 @@
<script setup> <script setup>
import { Accordion } from '../../../../src/index' import { Accordion } from '../../../../src/index'
import { ref } from 'vue' import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
import AccordionContent from '@/components/Accordion/AccordionContent.vue'
const items = ref([
{ header: 'header' },
{ header: 'another header' },
{ header: 'and one more header' },
])
</script> </script>
<template> <template>
<Accordion :items="items" always-open> <Accordion always-open>
<accordion-panel>
<template #header>
<accordion-header>header</accordion-header>
</template>
<template #content>
<accordion-content>
<div> <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="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> <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>
</accordion-content>
</template>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>another header</accordion-header>
</template>
<template #content>
<accordion-content>
<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="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> <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>
</accordion-content>
</template>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>and one more header</accordion-header>
</template>
<template #content>
<accordion-content>
<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="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> <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>
</accordion-content>
</template>
</accordion-panel>
</Accordion> </Accordion>
</template> </template>

38
docs/components/accordion/examples/AccordionExample.vue
View File

@@ -1,27 +1,51 @@
<script setup> <script setup>
import { Accordion } from '../../../../src/index' import { Accordion } from '../../../../src/index'
import { ref } from 'vue' import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
import AccordionContent from '@/components/Accordion/AccordionContent.vue'
const items = ref([
{ header: 'header' },
{ header: 'another header' },
{ header: 'and one more header' },
])
</script> </script>
<template> <template>
<Accordion :items="items"> <Accordion>
<accordion-panel>
<template #header>
<accordion-header>header</accordion-header>
</template>
<template #content>
<accordion-content>
<div> <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="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> <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>
</accordion-content>
</template>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>another header</accordion-header>
</template>
<template #content>
<accordion-content>
<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="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> <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>
</accordion-content>
</template>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>and one more header</accordion-header>
</template>
<template #content>
<accordion-content>
<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="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> <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>
</accordion-content>
</template>
</accordion-panel>
</Accordion> </Accordion>
</template> </template>

38
docs/components/accordion/examples/AccordionFlushExample.vue
View File

@@ -1,27 +1,51 @@
<script setup> <script setup>
import { Accordion } from '../../../../src/index' import { Accordion } from '../../../../src/index'
import { ref } from 'vue' import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
import AccordionContent from '@/components/Accordion/AccordionContent.vue'
const items = ref([
{ header: 'header' },
{ header: 'another header' },
{ header: 'and one more header' },
])
</script> </script>
<template> <template>
<Accordion :items="items" flush> <Accordion flush>
<accordion-panel>
<template #header>
<accordion-header>header</accordion-header>
</template>
<template #content>
<accordion-content>
<div> <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="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> <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>
</accordion-content>
</template>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>another header</accordion-header>
</template>
<template #content>
<accordion-content>
<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="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> <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>
</accordion-content>
</template>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>and one more header</accordion-header>
</template>
<template #content>
<accordion-content>
<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="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> <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>
</accordion-content>
</template>
</accordion-panel>
</Accordion> </Accordion>
</template> </template>

38
docs/components/accordion/examples/AccordionStyledHeadersExample.vue
View File

@@ -1,27 +1,51 @@
<script setup> <script setup>
import { Accordion } from '../../../../src/index' import { Accordion } from '../../../../src/index'
import { ref } from 'vue' import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
import AccordionContent from '@/components/Accordion/AccordionContent.vue'
const items = ref([
{ header: 'header' },
{ header: 'another header' },
{ header: 'and one more header' },
])
</script> </script>
<template> <template>
<Accordion :items="items" header-classes="bg-blue-800"> <Accordion flush>
<accordion-panel>
<template #header>
<accordion-header>header</accordion-header>
</template>
<template #content>
<accordion-content>
<div> <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="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> <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>
</accordion-content>
</template>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header class="bg-blue-800">another header</accordion-header>
</template>
<template #content>
<accordion-content>
<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="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> <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>
</accordion-content>
</template>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>and one more header</accordion-header>
</template>
<template #content>
<accordion-content>
<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="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> <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>
</accordion-content>
</template>
</accordion-panel>
</Accordion> </Accordion>
</template> </template>

80
src/components/Accordion/Accordion.vue
View File

@@ -1,89 +1,29 @@
<template> <template>
<div class="vp-raw"> <div class="vp-raw">
<template v-for="(item, i) in formattedItems" :key="item.id"> <slot :accordionId="accordionId"/>
<h2>
<button
type="button"
:class="[
{ 'rounded-t-xl border-b-0': i === 0 },
headerClasses
]"
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"
@click="toggleItem(item)"
>
<span class="w-full">{{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
:class="[ { hidden: !item.isVisible }, contentClasses ]"
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"
>
<slot />
</div>
</template>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { provide } from 'vue'
import type { PropType } from 'vue'
import { nanoid } from 'nanoid' import { nanoid } from 'nanoid'
import type { AccordionItem, AccordionTransformedItem } from '@/components/Accordion/types' import type { tAccordionMode } from '@/components/Accordion/types'
import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
const props = defineProps({ const props = defineProps({
alwaysOpen: { alwaysOpen: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
headerClasses: {
type: String,
default: '',
},
contentClasses: {
type: String,
default: '',
},
items: {
type: Array as PropType<AccordionItem[]>,
default() {
return []
},
},
flush: { flush: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
}) })
const formattedItems = ref<AccordionTransformedItem[]>(props.items.map((item, i) => ({ ...item, id: nanoid(), isVisible: i === 0 }))) const accordionId = nanoid()
provide('accordionId', accordionId)
const commonToggleItem = (selectedItem: AccordionTransformedItem) => { let mode: tAccordionMode = 'default'
const isSelectedVisible = selectedItem.isVisible if (props.alwaysOpen) mode = 'alwaysOpen'
formattedItems.value = formattedItems.value.map((item) => { if (props.flush) mode = 'flush'
if (item.id !== selectedItem.id) return { ...item, isVisible: false } useAccordionState(accordionId, mode)
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> </script>

20
src/components/Accordion/AccordionContent.vue Normal file
View File

@@ -0,0 +1,20 @@
<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"
>
<slot />
</div>
</template>
<script lang="ts" setup>
import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
import { computed, inject } from 'vue'
const accordionId: any = inject('accordionId')
const panelId: any = inject('panelId')
const { accordionsStates } = useAccordionState()
const panelState = computed(() => accordionsStates[accordionId].panels[panelId])
</script>

63
src/components/Accordion/AccordionHeader.vue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<button
type="button"
@click="toggleItem"
:class="{ 'rounded-t-xl border-b-0': panelState.order === 0 }"
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>
<svg
data-accordion-icon
class="w-6 h-6 shrink-0"
:class="{'rotate-180': panelState.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>
</template>
<script lang="ts" setup>
import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
import { computed, inject, provide } from 'vue'
const accordionId: any = inject('accordionId')
const panelId: any = inject('panelId')
const accordionState = computed(() => {
return accordionsStates[accordionId]
})
const commonToggleItem = () => {
const selectedPanel = accordionState.value.panels[panelId]
const isSelectedVisible = selectedPanel.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
}
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]()
}
const { accordionsStates } = useAccordionState()
const panelState = computed(() => accordionsStates[accordionId].panels[panelId])
</script>

31
src/components/Accordion/AccordionPanel.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<div>
<slot name="header" @click="toggleItem"/>
<slot name="content"/>
</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: any = 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>

27
src/components/Accordion/composables/useAccordionState.ts Normal file
View File

@@ -0,0 +1,27 @@
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): {
accordionsStates: tState
} {
onBeforeMount(() => {
if (!id) return
accordionsStates[id] = {
id: id,
mode: mode ? mode : 'default',
panels: {},
}
})
onBeforeUnmount(() => {
if (!id) return
delete accordionsStates[id]
})
return {
accordionsStates,
}
}

20
src/components/Accordion/types.ts
View File

@@ -1,8 +1,18 @@
export type AccordionItem = { export type tAccordionMode = 'flush' | 'alwaysOpen' | 'default'
header: string export type tAccordionPanel = {
icon?: string order: number
}
export interface AccordionTransformedItem extends AccordionItem {
id: string id: string
isVisible: boolean isVisible: boolean
} }
type tAccordionPanels = {
[key: string]: tAccordionPanel
}
type tStateElement = {
id: string,
mode: tAccordionMode
panels: tAccordionPanels
}
export type tState = {
[key: string]: tStateElement
}