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

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

@@ -1,51 +1,37 @@
<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>
<template v-for="(item, i) in formattedItems" :key="item.id">
<h2>
<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"
: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 :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>
<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: {
type: Array,
items: {
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>

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
}