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

feat: added basic accordion

Browse Source
This commit is contained in:
victor
2022-12-07 22:25:16 +04:00
parent ca0811803c
commit d9b2dfd9a4
5 changed files with 106 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

37
package-lock.json generated
View File

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

5
package.json
View File

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

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

@@ -1,51 +1,37 @@
<template> <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"
</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"
</h2> :class="{'rounded-t-xl border-b-0': i === 0}"
<div id="accordion-collapse-body-1" class="hidden" aria-labelledby="accordion-collapse-heading-1"> @click="toggleItem(item)"
<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> <span>{{item.header}}</span>
<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> <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}" 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> </div>
</div> </template>
<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> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, toRefs } from 'vue' import { ref } from 'vue'
import type { PropType } from 'vue' import type { PropType } from 'vue'
import { nanoid } from 'nanoid'
import type { AccordionItem, AccordionTransformedItem } from '@/components/Accordion/types'
const props = defineProps({ const props = defineProps({
alwaysOpen: { alwaysOpen: {
@@ -56,8 +42,8 @@ const props = defineProps({
type: String, type: String,
default: '', default: '',
}, },
children: { items: {
type: Array, type: Array as PropType<AccordionItem[]>,
default() { default() {
return [] 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> </script>

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

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