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

Merge branch 'main' into feat_table

Browse Source
This commit is contained in:
victor
2022-12-13 19:47:13 +04:00
parent 705908a4de 11fe2dd903
commit 59a5ed46f5
18 changed files with 562 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/.vitepress/config.ts
View File

@@ -34,6 +34,7 @@ function buildSidebar() {
function getComponents() {
return [
{ text: 'Accordion', link: 'components/accordion/accordion.md' },
{ text: 'Alert', link: '/components/alert/alert.md' },
{ text: 'Avatar', link: 'components/avatar/avatar.md' },
{ text: 'Breadcrumb', link: 'components/breadcrumb/breadcrumb.md' },
@@ -52,7 +53,6 @@ function getComponents() {
{ text: 'Modal', link: 'components/modal/modal.md' },
{ text: 'Navbar', link: 'components/navbar/navbar.md' },
{ text: '- Accordion', link: 'components/accordion/accordion.md' },
{ text: '- Carousel', link: 'components/carousel/carousel.md' },
{ text: '- Footer', link: 'components/footer/footer.md' },
{ text: '- Pagination', link: 'components/pagination/pagination.md' },

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

@@ -1,15 +1,186 @@
<script setup>
import AccordionExample from './examples/AccordionExample.vue'
import AccordionExample from './examples/AccordionExample.vue';
import AccordionAlwaysOpenExample from './examples/AccordionAlwaysOpenExample.vue';
import AccordionFlushExample from './examples/AccordionFlushExample.vue';
import AccordionStyledHeadersExample from './examples/AccordionStyledHeadersExample.vue';
</script>
# Vue Accordion Component - Flowbite
#### Use Tailwind CSS accordion component to show expanding content
---
:::tip
Original reference: [https://flowbite.com/docs/components/accordion/](https://flowbite.com/docs/components/accordion/)
:::
## Default accordion
Use this example to basic accordion.
```vue
<script setup>
import { Accordion } from 'flowbite-vue'
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
</script>
<template>
<Accordion></Accordion>
<Accordion>
<accordion-panel>
<accordion-header>header</accordion-header>
<accordion-content>
<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>
</accordion-content>
</accordion-panel>
<accordion-panel>
<accordion-header>another header</accordion-header>
<accordion-content>
<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-content>
</accordion-panel>
<accordion-panel>
<accordion-header>and one more header</accordion-header>
<accordion-content>
<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-content>
</accordion-panel>
</Accordion>
</template>
```
<AccordionExample />
## Always open accordion
Always open prop to makes accordion able to open multiple elements.
```vue
<script setup>
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
</script>
<template>
<Accordion always-open>
<accordion-panel>
<accordion-header>header</accordion-header>
<accordion-content>
<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>
</accordion-content>
</accordion-panel>
<accordion-panel>
<accordion-header>another header</accordion-header>
<accordion-content>
<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-content>
</accordion-panel>
<accordion-panel>
<accordion-header>and one more header</accordion-header>
<accordion-content>
<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-content>
</accordion-panel>
</Accordion>
</template>
```
<AccordionAlwaysOpenExample />
## Flush accordion
Flush prop removes side borders, and rounded corners
```vue
<script setup>
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
</script>
<template>
<Accordion flush>
<accordion-panel>
<accordion-header>header</accordion-header>
<accordion-content>
<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>
</accordion-content>
</accordion-panel>
<accordion-panel>
<accordion-header>another header</accordion-header>
<accordion-content>
<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-content>
</accordion-panel>
<accordion-panel>
<accordion-header>and one more header</accordion-header>
<accordion-content>
<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-content>
</accordion-panel>
</Accordion>
</template>
```
<AccordionFlushExample />
## Styling accordion
You can style accordion content and headers by passing tailwind classes into them.
```vue
<script setup>
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
</script>
<template>
<Accordion>
<accordion-panel>
<accordion-header>header</accordion-header>
<accordion-content>
<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>
</accordion-content>
</accordion-panel>
<accordion-panel>
<accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">another header</accordion-header>
<accordion-content>
<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-content>
</accordion-panel>
<accordion-panel>
<accordion-header>and one more header</accordion-header>
<accordion-content>
<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-content>
</accordion-panel>
</Accordion>
</template>
```
<AccordionStyledHeadersExample />

35
docs/components/accordion/examples/AccordionAlwaysOpenExample.vue Normal file
View File

@@ -0,0 +1,35 @@
<script setup>
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
</script>
<template>
<Accordion always-open>
<accordion-panel>
<accordion-header>header</accordion-header>
<accordion-content>
<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>
</accordion-content>
</accordion-panel>
<accordion-panel>
<accordion-header>another header</accordion-header>
<accordion-content>
<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-content>
</accordion-panel>
<accordion-panel>
<accordion-header>and one more header</accordion-header>
<accordion-content>
<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-content>
</accordion-panel>
</Accordion>
</template>

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

@@ -1,8 +1,35 @@
<template>
<div class="vp-raw flex flex-col">
<Accordion></Accordion>
</div>
</template>
<script setup>
import { Accordion } from '../../../../src/index'
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
</script>
<template>
<Accordion>
<accordion-panel>
<accordion-header>header</accordion-header>
<accordion-content>
<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>
</accordion-content>
</accordion-panel>
<accordion-panel>
<accordion-header>another header</accordion-header>
<accordion-content>
<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-content>
</accordion-panel>
<accordion-panel>
<accordion-header>and one more header</accordion-header>
<accordion-content>
<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-content>
</accordion-panel>
</Accordion>
</template>

35
docs/components/accordion/examples/AccordionFlushExample.vue Normal file
View File

@@ -0,0 +1,35 @@
<script setup>
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
</script>
<template>
<Accordion flush>
<accordion-panel>
<accordion-header>header</accordion-header>
<accordion-content>
<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>
</accordion-content>
</accordion-panel>
<accordion-panel>
<accordion-header>another header</accordion-header>
<accordion-content>
<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-content>
</accordion-panel>
<accordion-panel>
<accordion-header>and one more header</accordion-header>
<accordion-content>
<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-content>
</accordion-panel>
</Accordion>
</template>

35
docs/components/accordion/examples/AccordionStyledHeadersExample.vue Normal file
View File

@@ -0,0 +1,35 @@
<script setup>
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
</script>
<template>
<Accordion >
<accordion-panel>
<accordion-header>header</accordion-header>
<accordion-content>
<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>
</accordion-content>
</accordion-panel>
<accordion-panel>
<accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">another header</accordion-header>
<accordion-content>
<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-content>
</accordion-panel>
<accordion-panel>
<accordion-header>and one more header</accordion-header>
<accordion-content>
<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-content>
</accordion-panel>
</Accordion>
</template>

37
package-lock.json generated
View File

@@ -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",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
"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",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
"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": {

5
package.json
View File

@@ -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",

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

29
src/components/Accordion/composables/useAccordionContentClasses.ts Normal file
View File

@@ -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,
}
}

35
src/components/Accordion/composables/useAccordionHeaderClasses.ts Normal file
View File

@@ -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,
}
}

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

@@ -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,
}
}

18
src/components/Accordion/types.ts Normal file
View File

@@ -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
}

7
src/components/Tooltip/Tooltip.vue
View File

@@ -1,18 +1,19 @@
<template>
<div class="flex items-start">
<TooltipComponent :placement="placement" :triggers="[trigger]" :theme="theme" auto-hide>
<Tooltip :placement="placement" :triggers="[trigger]" :theme="theme" auto-hide>
<slot name="trigger"></slot>
<template #popper>
<slot name="content"></slot>
</template>
</TooltipComponent>
</Tooltip>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import type { TooltipPlacement, TooltipStyle, TooltipTrigger } from './types'
import { Tooltip as TooltipComponent } from 'floating-vue'
import * as pkg from 'floating-vue'
const { Tooltip } = pkg
import 'floating-vue/dist/style.css'
import { computed } from 'vue'

5
src/index.ts
View File

@@ -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'