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

feat: Added prop 'openFirstItem' to accordion component

Browse Source
This commit is contained in:
Ilya Artamonov
2023-08-25 18:42:34 +03:00
parent 3fe681d106
commit 477eb11156
10 changed files with 657 additions and 506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
docs/.vitepress/config.ts
View File

@@ -11,23 +11,17 @@ function buildSidebar() {
{
text: 'Components',
collapsible: true,
items: [
...getComponents(),
],
items: [...getComponents()],
},
{
text: 'Form',
collapsible: true,
items: [
...getFormComponents(),
],
items: [...getFormComponents()],
},
{
text: 'Utils',
collapsible: true,
items: [
...getUtils(),
],
items: [...getUtils()],
},
]
}
@@ -78,7 +72,7 @@ function getFormComponents() {
function getUtils() {
return [
{ text: 'Flowbite Themable', link: '/components/flowbiteThemable/flowbiteThemable.md' },
{ text: 'Toast Provider', link: '/components/toastProvider/toastProvider.md' }
{ text: 'Toast Provider', link: '/components/toastProvider/toastProvider.md' },
]
}
@@ -90,9 +84,9 @@ export default defineConfig({
title: 'Flowbite Vue 3',
cleanUrls: 'without-subfolders',
head: [
['link', { rel: "icon", type: "image/svg", href: "/assets/logo.svg"}],
['link', { rel: 'icon', type: 'image/svg', href: '/assets/logo.svg' }],
[
"script",
'script',
{},
`
// Fathom - beautiful, simple website analytics
@@ -112,21 +106,20 @@ export default defineConfig({
fathom("set", "siteId", "MPNTKCVJ");
fathom("trackPageview");
// / Fathom
`
]
`,
],
],
themeConfig: {
sidebar: buildSidebar(),
logo: '/assets/logo.svg',
socialLinks: [
{ icon: 'github', link: 'https://github.com/themesberg/flowbite-vue' },
{ icon: 'discord', link: 'https://discord.gg/4eeurUVvTy' }
{ icon: 'discord', link: 'https://discord.gg/4eeurUVvTy' },
],
footer: {
message: 'Released under the MIT License.',
copyright: 'Copyright © 2023 Flowbite™'
copyright: 'Copyright © 2023 Flowbite™',
},
},
})

45
docs/components/accordion.md
View File

@@ -3,6 +3,7 @@ import AccordionExample from './accordion/examples/AccordionExample.vue';
import AccordionAlwaysOpenExample from './accordion/examples/AccordionAlwaysOpenExample.vue';
import AccordionFlushExample from './accordion/examples/AccordionFlushExample.vue';
import AccordionStyledHeadersExample from './accordion/examples/AccordionStyledHeadersExample.vue';
import AccordionOpenFirstItemExample from './accordion/examples/AccordionOpenFirstItemExample.vue';
</script>
# Vue Accordion - Flowbite
@@ -184,3 +185,47 @@ import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'fl
```
<AccordionStyledHeadersExample />
## Closed first item
```vue
<script setup>
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
</script>
<template>
<Accordion :open-first-item="false">
<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>
```
<AccordionOpenFirstItemExample />

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

@@ -3,33 +3,50 @@ import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '..
</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>
<div class="vp-raw">
<Accordion>
<AccordionPanel>
<AccordionHeader>header</AccordionHeader>
<AccordionContent>
<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>
</AccordionContent>
</AccordionPanel>
<AccordionPanel>
<AccordionHeader>another header</AccordionHeader>
<AccordionContent>
<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>
</AccordionContent>
</AccordionPanel>
<AccordionPanel>
<AccordionHeader>and one more header</AccordionHeader>
<AccordionContent>
<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>
</AccordionContent>
</AccordionPanel>
</Accordion>
</div>
</template>

52
docs/components/accordion/examples/AccordionOpenFirstItemExample.vue Normal file
View File

@@ -0,0 +1,52 @@
<script setup>
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
</script>
<template>
<div class="vp-raw">
<Accordion :open-first-item="false">
<AccordionPanel>
<AccordionHeader>header</AccordionHeader>
<AccordionContent>
<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>
</AccordionContent>
</AccordionPanel>
<AccordionPanel>
<AccordionHeader>another header</AccordionHeader>
<AccordionContent>
<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>
</AccordionContent>
</AccordionPanel>
<AccordionPanel>
<AccordionHeader>and one more header</AccordionHeader>
<AccordionContent>
<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>
</AccordionContent>
</AccordionPanel>
</Accordion>
</div>
</template>

899
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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

@@ -1,21 +1,21 @@
<template>
<div class="vp-raw" :data-accordion-id="accordionId">
<div :data-accordion-id="accordionId">
<slot />
</div>
</template>
<script lang="ts" setup>
import { nanoid } from 'nanoid'
import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
interface AccordionProps {
alwaysOpen?: boolean
openFirstItem?: boolean
flush?: boolean
}
const props = defineProps({
alwaysOpen: {
type: Boolean,
default: false,
},
flush: {
type: Boolean,
default: false,
},
const props = withDefaults(defineProps<AccordionProps>(), {
alwaysOpen: false,
openFirstItem: true,
flush: false,
})
const accordionId = nanoid()

20
src/components/Accordion/AccordionHeader.vue
View File

@@ -1,19 +1,8 @@
<template>
<div ref="header">
<button
v-if="isLoaded"
type="button"
@click="toggleItem"
:class="headerClasses"
>
<button v-if="isLoaded" 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"
>
<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>
@@ -22,8 +11,7 @@
<script lang="ts" setup>
import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
import { computed, onMounted, ref } from 'vue'
import type { ComputedRef } from 'vue'
import { computed, onMounted, ref, type ComputedRef } from 'vue'
import { useAccordionHeaderClasses } from '@/components/Accordion/composables/useAccordionHeaderClasses'
const isLoaded = ref(false)
@@ -48,7 +36,7 @@ function alwaysOpenToggleItem() {
panelState.value.isVisible = !panelState.value.isVisible
}
function toggleItem() {
if (accordionState.value.alwaysOpen ) return alwaysOpenToggleItem()
if (accordionState.value.alwaysOpen) return alwaysOpenToggleItem()
commonToggleItem()
}

3
src/components/Accordion/AccordionPanel.vue
View File

@@ -11,7 +11,6 @@ import { nanoid } from 'nanoid'
const { accordionsStates } = useAccordionState()
const panelId = nanoid()
const panel = ref()
const accordionId = computed(() => {
@@ -28,7 +27,7 @@ onMounted(() => {
accordionState.value.panels[panelId] = {
id: panelId,
order: panelsCount,
isVisible: !panelsCount,
isVisible: (accordionState.value.openFirstItem && panelsCount === 0) ?? false,
}
})
</script>

15
src/components/Accordion/composables/useAccordionState.ts
View File

@@ -1,17 +1,24 @@
import { onBeforeMount, onBeforeUnmount, reactive } from 'vue'
import type { tState } from '@/components/Accordion/types'
interface AccordionProps {
alwaysOpen?: boolean
openFirstItem?: boolean
flush?: boolean
}
const accordionsStates = reactive<tState>({})
export function useAccordionState(id?: string, options?: {flush: boolean, alwaysOpen: boolean}): {
export function useAccordionState(
id?: string,
options?: AccordionProps
): {
accordionsStates: tState
} {
onBeforeMount(() => {
if (!id) return
accordionsStates[id] = {
id: id,
flush: options?.flush ?? false,
alwaysOpen: options?.alwaysOpen ?? false,
openFirstItem: options?.openFirstItem ?? true,
panels: {},
}
})
@@ -24,5 +31,3 @@ export function useAccordionState(id?: string, options?: {flush: boolean, always
accordionsStates,
}
}

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

@@ -8,9 +8,10 @@ type tAccordionPanels = {
[key: string]: tAccordionPanel
}
type tStateElement = {
id: string,
flush: boolean,
alwaysOpen: boolean,
id: string
flush: boolean
alwaysOpen: boolean
openFirstItem: boolean
panels: tAccordionPanels
}
export type tState = {