diff --git a/.gitignore b/.gitignore index 5d9bcae..c334da0 100644 --- a/.gitignore +++ b/.gitignore @@ -3,7 +3,7 @@ public_html # Vite node_modules .DS_Store -dist +# dist dist_types dist-ssr *.local diff --git a/dist/components/FwbAccordion/FwbAccordion.vue.d.ts b/dist/components/FwbAccordion/FwbAccordion.vue.d.ts new file mode 100644 index 0000000..6fe7841 --- /dev/null +++ b/dist/components/FwbAccordion/FwbAccordion.vue.d.ts @@ -0,0 +1,39 @@ +declare const _default: __VLS_WithTemplateSlots; + default: boolean; + }; + alwaysOpen: { + type: import("vue").PropType; + default: boolean; + }; + openFirstItem: { + type: import("vue").PropType; + default: boolean; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: boolean; + }; + alwaysOpen: { + type: import("vue").PropType; + default: boolean; + }; + openFirstItem: { + type: import("vue").PropType; + default: boolean; + }; +}>>, { + flush: boolean; + alwaysOpen: boolean; + openFirstItem: boolean; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbAccordion/FwbAccordionContent.vue.d.ts b/dist/components/FwbAccordion/FwbAccordionContent.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbAccordion/FwbAccordionContent.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbAccordion/FwbAccordionHeader.vue.d.ts b/dist/components/FwbAccordion/FwbAccordionHeader.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbAccordion/FwbAccordionHeader.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbAccordion/FwbAccordionPanel.vue.d.ts b/dist/components/FwbAccordion/FwbAccordionPanel.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbAccordion/FwbAccordionPanel.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbAccordion/composables/useAccordionContentClasses.d.ts b/dist/components/FwbAccordion/composables/useAccordionContentClasses.d.ts new file mode 100644 index 0000000..8991c97 --- /dev/null +++ b/dist/components/FwbAccordion/composables/useAccordionContentClasses.d.ts @@ -0,0 +1,4 @@ +import { type Ref } from 'vue'; +export declare function useAccordionContentClasses(contentRef: Ref): { + contentClasses: import("vue").ComputedRef; +}; diff --git a/dist/components/FwbAccordion/composables/useAccordionHeaderClasses.d.ts b/dist/components/FwbAccordion/composables/useAccordionHeaderClasses.d.ts new file mode 100644 index 0000000..6a97c0b --- /dev/null +++ b/dist/components/FwbAccordion/composables/useAccordionHeaderClasses.d.ts @@ -0,0 +1,5 @@ +import { type Ref } from 'vue'; +export declare function useAccordionHeaderClasses(headerRef: Ref): { + headerClasses: import("vue").ComputedRef; + arrowClasses: import("vue").ComputedRef; +}; diff --git a/dist/components/FwbAccordion/composables/useAccordionState.d.ts b/dist/components/FwbAccordion/composables/useAccordionState.d.ts new file mode 100644 index 0000000..408a067 --- /dev/null +++ b/dist/components/FwbAccordion/composables/useAccordionState.d.ts @@ -0,0 +1,10 @@ +import type { tState } from '../types'; +interface AccordionProps { + alwaysOpen?: boolean; + openFirstItem?: boolean; + flush?: boolean; +} +export declare function useAccordionState(id?: string, options?: AccordionProps): { + accordionsStates: tState; +}; +export {}; diff --git a/dist/components/FwbAccordion/types.d.ts b/dist/components/FwbAccordion/types.d.ts new file mode 100644 index 0000000..d18061e --- /dev/null +++ b/dist/components/FwbAccordion/types.d.ts @@ -0,0 +1,20 @@ +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; + openFirstItem: boolean; + panels: tAccordionPanels; +}; +export type tState = { + [key: string]: tStateElement; +}; +export {}; diff --git a/dist/components/FwbAlert/FwbAlert.vue.d.ts b/dist/components/FwbAlert/FwbAlert.vue.d.ts new file mode 100644 index 0000000..804bda0 --- /dev/null +++ b/dist/components/FwbAlert/FwbAlert.vue.d.ts @@ -0,0 +1,56 @@ +import type { AlertType } from './types'; +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + closable: { + type: import("vue").PropType; + default: boolean; + }; + icon: { + type: import("vue").PropType; + default: boolean; + }; + border: { + type: import("vue").PropType; + default: boolean; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { + close: () => void; +}, string, import("vue").PublicProps, Readonly; + default: string; + }; + closable: { + type: import("vue").PropType; + default: boolean; + }; + icon: { + type: import("vue").PropType; + default: boolean; + }; + border: { + type: import("vue").PropType; + default: boolean; + }; +}>> & { + onClose?: (() => any) | undefined; +}, { + type: AlertType; + closable: boolean; + icon: boolean; + border: boolean; +}, {}>, { + default: any; + 'close-icon': any; + icon: any; + title: any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbAlert/types.d.ts b/dist/components/FwbAlert/types.d.ts new file mode 100644 index 0000000..2da1d69 --- /dev/null +++ b/dist/components/FwbAlert/types.d.ts @@ -0,0 +1 @@ +export type AlertType = 'info' | 'danger' | 'success' | 'warning' | 'dark'; diff --git a/dist/components/FwbAvatar/FwbAvatar.vue.d.ts b/dist/components/FwbAvatar/FwbAvatar.vue.d.ts new file mode 100644 index 0000000..942da98 --- /dev/null +++ b/dist/components/FwbAvatar/FwbAvatar.vue.d.ts @@ -0,0 +1,95 @@ +import { type PropType } from 'vue'; +import type { AvatarSize, AvatarStatus, AvatarStatusPosition } from './types'; +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + stacked: { + type: BooleanConstructor; + default: boolean; + }; + status: { + type: PropType; + default: null; + }; + statusPosition: { + type: PropType; + default: string; + }; + initials: { + type: StringConstructor; + default: null; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; + stacked: { + type: BooleanConstructor; + default: boolean; + }; + status: { + type: PropType; + default: null; + }; + statusPosition: { + type: PropType; + default: string; + }; + initials: { + type: StringConstructor; + default: null; + }; +}>>, { + img: string; + rounded: boolean; + alt: string; + bordered: boolean; + size: AvatarSize; + stacked: boolean; + status: AvatarStatus; + statusPosition: AvatarStatusPosition; + initials: string; +}, {}>, { + placeholder?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbAvatar/FwbAvatarStack.vue.d.ts b/dist/components/FwbAvatar/FwbAvatarStack.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbAvatar/FwbAvatarStack.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbAvatar/FwbAvatarStackCounter.vue.d.ts b/dist/components/FwbAvatar/FwbAvatarStackCounter.vue.d.ts new file mode 100644 index 0000000..f12575c --- /dev/null +++ b/dist/components/FwbAvatar/FwbAvatarStackCounter.vue.d.ts @@ -0,0 +1,23 @@ +declare const _default: import("vue").DefineComponent<{ + total: { + type: NumberConstructor; + default: number; + }; + href: { + type: StringConstructor; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly>, { + href: string; + total: number; +}, {}>; +export default _default; diff --git a/dist/components/FwbAvatar/composables/useAvatarClasses.d.ts b/dist/components/FwbAvatar/composables/useAvatarClasses.d.ts new file mode 100644 index 0000000..f5db832 --- /dev/null +++ b/dist/components/FwbAvatar/composables/useAvatarClasses.d.ts @@ -0,0 +1,19 @@ +import { type Ref } from 'vue'; +import type { AvatarSize, AvatarStatus, AvatarStatusPosition } from '@/components/FwbAvatar/types'; +export type UseAvatarClassesProps = { + status: Ref; + bordered: Ref; + img: Ref; + alt: Ref; + rounded: Ref; + size: Ref; + stacked: Ref; + statusPosition: Ref; +}; +export declare function useAvatarClasses(props: UseAvatarClassesProps): { + avatarClasses: Ref; + avatarDotClasses: Ref; + avatarPlaceholderClasses: Ref; + avatarPlaceholderWrapperClasses: Ref; + avatarPlaceholderInitialsClasses: Ref; +}; diff --git a/dist/components/FwbAvatar/types.d.ts b/dist/components/FwbAvatar/types.d.ts new file mode 100644 index 0000000..6f561bc --- /dev/null +++ b/dist/components/FwbAvatar/types.d.ts @@ -0,0 +1,5 @@ +export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; +export type AvatarStatus = 'away' | 'busy' | 'offline' | 'online'; +export type AvatarStatusPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'; +export type AvatarType = 'default' | 'rounded'; +export type avatarDotIndicatorPositionClasses = `${AvatarStatusPosition}-${AvatarType}`; diff --git a/dist/components/FwbBadge/FwbBadge.vue.d.ts b/dist/components/FwbBadge/FwbBadge.vue.d.ts new file mode 100644 index 0000000..f9d1628 --- /dev/null +++ b/dist/components/FwbBadge/FwbBadge.vue.d.ts @@ -0,0 +1,41 @@ +import type { BadgeSize, BadgeType } from './types'; +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + href: { + type: import("vue").PropType; + default: null; + }; + size: { + type: import("vue").PropType; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; + href: { + type: import("vue").PropType; + default: null; + }; + size: { + type: import("vue").PropType; + default: string; + }; +}>>, { + type: BadgeType; + href: string | null; + size: BadgeSize; +}, {}>, { + icon?(_: {}): any; + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbBadge/composables/useBadgeClasses.d.ts b/dist/components/FwbBadge/composables/useBadgeClasses.d.ts new file mode 100644 index 0000000..d73cb6d --- /dev/null +++ b/dist/components/FwbBadge/composables/useBadgeClasses.d.ts @@ -0,0 +1,13 @@ +import type { BadgeSize, BadgeType } from '../types'; +import { type Ref } from 'vue'; +export type UseBadgeClassesProps = { + type: BadgeType; + size: BadgeSize; + href: string | null; +}; +export type UseBadgeClassesOptions = { + isContentEmpty: Ref; +}; +export declare function useBadgeClasses(props: UseBadgeClassesProps, options: UseBadgeClassesOptions): { + badgeClasses: Ref; +}; diff --git a/dist/components/FwbBadge/types.d.ts b/dist/components/FwbBadge/types.d.ts new file mode 100644 index 0000000..ffd6353 --- /dev/null +++ b/dist/components/FwbBadge/types.d.ts @@ -0,0 +1,2 @@ +export type BadgeType = 'default' | 'dark' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink'; +export type BadgeSize = 'xs' | 'sm'; diff --git a/dist/components/FwbBreadcrumb/FwbBreadcrumb.vue.d.ts b/dist/components/FwbBreadcrumb/FwbBreadcrumb.vue.d.ts new file mode 100644 index 0000000..0441a0d --- /dev/null +++ b/dist/components/FwbBreadcrumb/FwbBreadcrumb.vue.d.ts @@ -0,0 +1,21 @@ +declare const _default: __VLS_WithTemplateSlots>, { + solid: boolean; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbBreadcrumb/FwbBreadcrumbItem.vue.d.ts b/dist/components/FwbBreadcrumb/FwbBreadcrumbItem.vue.d.ts new file mode 100644 index 0000000..4af7f36 --- /dev/null +++ b/dist/components/FwbBreadcrumb/FwbBreadcrumbItem.vue.d.ts @@ -0,0 +1,32 @@ +declare const _default: __VLS_WithTemplateSlots>, { + href: string; + home: boolean; +}, {}>, { + "arrow-icon"?(_: {}): any; + "home-icon"?(_: {}): any; + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbBreadcrumb/composables/useBreadcrumbClasses.d.ts b/dist/components/FwbBreadcrumb/composables/useBreadcrumbClasses.d.ts new file mode 100644 index 0000000..1b0041a --- /dev/null +++ b/dist/components/FwbBreadcrumb/composables/useBreadcrumbClasses.d.ts @@ -0,0 +1,8 @@ +import { type Ref } from 'vue'; +export type useBreadcrumbProps = { + solid: Ref; +}; +export declare function useBreadcrumbClasses(props: useBreadcrumbProps): { + breadcrumbClasses: Ref; + breadcrumbWrapperClasses: Ref; +}; diff --git a/dist/components/FwbBreadcrumb/composables/useBreadcrumbItemClasses.d.ts b/dist/components/FwbBreadcrumb/composables/useBreadcrumbItemClasses.d.ts new file mode 100644 index 0000000..819bc37 --- /dev/null +++ b/dist/components/FwbBreadcrumb/composables/useBreadcrumbItemClasses.d.ts @@ -0,0 +1,8 @@ +import { type Ref } from 'vue'; +export type useBreadcrumbItemProps = { + href: Ref; + home: Ref; +}; +export declare function useBreadcrumbItemClasses(props: useBreadcrumbItemProps): { + breadcrumbItemClasses: Ref; +}; diff --git a/dist/components/FwbBreadcrumb/types.d.ts b/dist/components/FwbBreadcrumb/types.d.ts new file mode 100644 index 0000000..f60e755 --- /dev/null +++ b/dist/components/FwbBreadcrumb/types.d.ts @@ -0,0 +1 @@ +export type BreadcrumbType = 'default' | 'solid'; diff --git a/dist/components/FwbButton/FwbButton.vue.d.ts b/dist/components/FwbButton/FwbButton.vue.d.ts new file mode 100644 index 0000000..4130ed3 --- /dev/null +++ b/dist/components/FwbButton/FwbButton.vue.d.ts @@ -0,0 +1,132 @@ +import type { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './types'; +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + color: { + type: import("vue").PropType; + default: string; + }; + disabled: { + type: import("vue").PropType; + default: boolean; + }; + href: { + type: import("vue").PropType; + default: string; + }; + size: { + type: import("vue").PropType; + default: string; + }; + loading: { + type: import("vue").PropType; + default: boolean; + }; + gradient: { + type: import("vue").PropType; + default: null; + }; + shadow: { + type: import("vue").PropType; + default: null; + }; + pill: { + type: import("vue").PropType; + default: boolean; + }; + square: { + type: import("vue").PropType; + default: boolean; + }; + outline: { + type: import("vue").PropType; + default: boolean; + }; + loadingPosition: { + type: import("vue").PropType<"prefix" | "suffix">; + default: string; + }; + tag: { + type: import("vue").PropType; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; + color: { + type: import("vue").PropType; + default: string; + }; + disabled: { + type: import("vue").PropType; + default: boolean; + }; + href: { + type: import("vue").PropType; + default: string; + }; + size: { + type: import("vue").PropType; + default: string; + }; + loading: { + type: import("vue").PropType; + default: boolean; + }; + gradient: { + type: import("vue").PropType; + default: null; + }; + shadow: { + type: import("vue").PropType; + default: null; + }; + pill: { + type: import("vue").PropType; + default: boolean; + }; + square: { + type: import("vue").PropType; + default: boolean; + }; + outline: { + type: import("vue").PropType; + default: boolean; + }; + loadingPosition: { + type: import("vue").PropType<"prefix" | "suffix">; + default: string; + }; + tag: { + type: import("vue").PropType; + default: string; + }; +}>>, { + class: string; + color: ButtonVariant; + disabled: boolean; + href: string; + size: ButtonSize; + loading: boolean; + gradient: ButtonGradient | null; + shadow: ButtonMonochromeGradient | null; + pill: boolean; + square: boolean; + outline: boolean; + loadingPosition: "prefix" | "suffix"; + tag: string; +}, {}>, { + prefix?(_: {}): any; + default?(_: {}): any; + suffix?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbButton/composables/useButtonClasses.d.ts b/dist/components/FwbButton/composables/useButtonClasses.d.ts new file mode 100644 index 0000000..b97a9b9 --- /dev/null +++ b/dist/components/FwbButton/composables/useButtonClasses.d.ts @@ -0,0 +1,22 @@ +import { type Ref } from 'vue'; +import type { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from '../types'; +export type ButtonClassMap = { + hover: Record; + default: Record; +}; +export type UseButtonClassesProps = { + class: Ref; + pill: Ref; + disabled: Ref; + loading: Ref; + outline: Ref; + size: Ref; + square: Ref; + color: Ref; + gradient: Ref; + shadow: Ref; +}; +export declare function useButtonClasses(props: UseButtonClassesProps): { + wrapperClasses: string; + spanClasses: string; +}; diff --git a/dist/components/FwbButton/composables/useButtonSpinner.d.ts b/dist/components/FwbButton/composables/useButtonSpinner.d.ts new file mode 100644 index 0000000..98245bc --- /dev/null +++ b/dist/components/FwbButton/composables/useButtonSpinner.d.ts @@ -0,0 +1,13 @@ +import { type Ref } from 'vue'; +import type { ButtonGradient, ButtonSize, ButtonVariant } from '../types'; +import type { SpinnerColor, SpinnerSize } from './../../FwbSpinner/types'; +export type UseButtonSpinnerProps = { + outline: Ref; + size: Ref; + color: Ref; + gradient: Ref; +}; +export declare function useButtonSpinner(props: UseButtonSpinnerProps): { + size: Ref; + color: Ref; +}; diff --git a/dist/components/FwbButton/tests/Button.spec.d.ts b/dist/components/FwbButton/tests/Button.spec.d.ts new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/dist/components/FwbButton/tests/Button.spec.d.ts @@ -0,0 +1 @@ +export {}; diff --git a/dist/components/FwbButton/types.d.ts b/dist/components/FwbButton/types.d.ts new file mode 100644 index 0000000..d0c2fab --- /dev/null +++ b/dist/components/FwbButton/types.d.ts @@ -0,0 +1,5 @@ +export type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'; +export type ButtonDuotoneGradient = 'purple-blue' | 'cyan-blue' | 'green-blue' | 'purple-pink' | 'pink-orange' | 'teal-lime' | 'red-yellow'; +export type ButtonGradient = ButtonDuotoneGradient | ButtonMonochromeGradient; +export type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'; +export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; diff --git a/dist/components/FwbButtonGroup/FwbButtonGroup.vue.d.ts b/dist/components/FwbButtonGroup/FwbButtonGroup.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbButtonGroup/FwbButtonGroup.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbCard/FwbCard.vue.d.ts b/dist/components/FwbCard/FwbCard.vue.d.ts new file mode 100644 index 0000000..b560a7e --- /dev/null +++ b/dist/components/FwbCard/FwbCard.vue.d.ts @@ -0,0 +1,50 @@ +import { type PropType } from 'vue'; +import type { CardsVariant } from './types'; +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; +}>>, { + href: string; + imgAlt: string; + imgSrc: string; + variant: CardsVariant; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbCard/composables/useCardClasses.d.ts b/dist/components/FwbCard/composables/useCardClasses.d.ts new file mode 100644 index 0000000..ab5aff9 --- /dev/null +++ b/dist/components/FwbCard/composables/useCardClasses.d.ts @@ -0,0 +1,9 @@ +import { type Ref } from 'vue'; +import type { CardsVariant } from '../types'; +export type UseCardsClassesProps = { + variant: Ref; +}; +export declare function useCardsClasses(props: UseCardsClassesProps): { + cardClasses: Ref; + horizontalImageClasses: Ref; +}; diff --git a/dist/components/FwbCard/types.d.ts b/dist/components/FwbCard/types.d.ts new file mode 100644 index 0000000..8a62cf4 --- /dev/null +++ b/dist/components/FwbCard/types.d.ts @@ -0,0 +1 @@ +export type CardsVariant = 'default' | 'image' | 'horizontal'; diff --git a/dist/components/FwbCarousel/FwbCarousel.vue.d.ts b/dist/components/FwbCarousel/FwbCarousel.vue.d.ts new file mode 100644 index 0000000..a85a28f --- /dev/null +++ b/dist/components/FwbCarousel/FwbCarousel.vue.d.ts @@ -0,0 +1,61 @@ +import { type PropType } from 'vue'; +import type { PictureItem } from '@/components/FwbCarousel/types'; +declare const _default: import("vue").DefineComponent<{ + pictures: { + type: PropType; + default(): never[]; + }; + noIndicators: { + type: BooleanConstructor; + default: boolean; + }; + noControls: { + type: BooleanConstructor; + default: boolean; + }; + slide: { + type: BooleanConstructor; + default: boolean; + }; + slideInterval: { + type: NumberConstructor; + default: number; + }; + animation: { + type: BooleanConstructor; + default: boolean; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default(): never[]; + }; + noIndicators: { + type: BooleanConstructor; + default: boolean; + }; + noControls: { + type: BooleanConstructor; + default: boolean; + }; + slide: { + type: BooleanConstructor; + default: boolean; + }; + slideInterval: { + type: NumberConstructor; + default: number; + }; + animation: { + type: BooleanConstructor; + default: boolean; + }; +}>>, { + pictures: PictureItem[]; + noIndicators: boolean; + noControls: boolean; + slide: boolean; + slideInterval: number; + animation: boolean; +}, {}>; +export default _default; diff --git a/dist/components/FwbCarousel/types.d.ts b/dist/components/FwbCarousel/types.d.ts new file mode 100644 index 0000000..004fdf3 --- /dev/null +++ b/dist/components/FwbCarousel/types.d.ts @@ -0,0 +1,4 @@ +export type PictureItem = { + alt?: string; + src: string; +}; diff --git a/dist/components/FwbCheckbox/FwbCheckbox.vue.d.ts b/dist/components/FwbCheckbox/FwbCheckbox.vue.d.ts new file mode 100644 index 0000000..861cadc --- /dev/null +++ b/dist/components/FwbCheckbox/FwbCheckbox.vue.d.ts @@ -0,0 +1,41 @@ +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + disabled: { + type: import("vue").PropType; + default: boolean; + }; + modelValue: { + type: import("vue").PropType; + default: boolean; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly; + default: string; + }; + disabled: { + type: import("vue").PropType; + default: boolean; + }; + modelValue: { + type: import("vue").PropType; + default: boolean; + }; +}>> & { + "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; +}, { + label: string; + disabled: boolean; + modelValue: boolean; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbCheckbox/composables/useCheckboxClasses.d.ts b/dist/components/FwbCheckbox/composables/useCheckboxClasses.d.ts new file mode 100644 index 0000000..f085ccd --- /dev/null +++ b/dist/components/FwbCheckbox/composables/useCheckboxClasses.d.ts @@ -0,0 +1,4 @@ +export declare function useCheckboxClasses(): { + checkboxClasses: import("vue").ComputedRef; + labelClasses: import("vue").ComputedRef; +}; diff --git a/dist/components/FwbDropdown/FwbDropdown.vue.d.ts b/dist/components/FwbDropdown/FwbDropdown.vue.d.ts new file mode 100644 index 0000000..9521eb8 --- /dev/null +++ b/dist/components/FwbDropdown/FwbDropdown.vue.d.ts @@ -0,0 +1,41 @@ +import type { DropdownPlacement } from './types'; +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + placement: { + type: import("vue").PropType; + default: string; + }; + transition: { + type: import("vue").PropType; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; + placement: { + type: import("vue").PropType; + default: string; + }; + transition: { + type: import("vue").PropType; + default: string; + }; +}>>, { + text: string; + placement: DropdownPlacement; + transition: string; +}, {}>, { + trigger?(_: {}): any; + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbDropdown/composables/useDropdownClasses.d.ts b/dist/components/FwbDropdown/composables/useDropdownClasses.d.ts new file mode 100644 index 0000000..4d540c2 --- /dev/null +++ b/dist/components/FwbDropdown/composables/useDropdownClasses.d.ts @@ -0,0 +1,11 @@ +import { type Ref } from 'vue'; +import type { DropdownPlacement } from '../types'; +export type UseDropdownClassesProps = { + placement: Ref; + contentRef: Ref; + visible: Ref; +}; +export declare function useDropdownClasses(props: UseDropdownClassesProps): { + contentClasses: Ref; + contentStyles: Ref; +}; diff --git a/dist/components/FwbDropdown/types.d.ts b/dist/components/FwbDropdown/types.d.ts new file mode 100644 index 0000000..f097949 --- /dev/null +++ b/dist/components/FwbDropdown/types.d.ts @@ -0,0 +1 @@ +export type DropdownPlacement = 'top' | 'bottom' | 'left' | 'right'; diff --git a/dist/components/FwbFileInput/FwbFileInput.vue.d.ts b/dist/components/FwbFileInput/FwbFileInput.vue.d.ts new file mode 100644 index 0000000..5fcc94a --- /dev/null +++ b/dist/components/FwbFileInput/FwbFileInput.vue.d.ts @@ -0,0 +1,59 @@ +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + size: { + type: import("vue").PropType; + default: string; + }; + modelValue: { + type: import("vue").PropType; + default: null; + }; + multiple: { + type: import("vue").PropType; + default: boolean; + }; + dropzone: { + type: import("vue").PropType; + default: boolean; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly; + default: string; + }; + size: { + type: import("vue").PropType; + default: string; + }; + modelValue: { + type: import("vue").PropType; + default: null; + }; + multiple: { + type: import("vue").PropType; + default: boolean; + }; + dropzone: { + type: import("vue").PropType; + default: boolean; + }; +}>> & { + "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; +}, { + label: string; + size: string; + modelValue: File | File[] | null; + multiple: boolean; + dropzone: boolean; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbFileInput/composables/useFileInputClasses.d.ts b/dist/components/FwbFileInput/composables/useFileInputClasses.d.ts new file mode 100644 index 0000000..bebb8a4 --- /dev/null +++ b/dist/components/FwbFileInput/composables/useFileInputClasses.d.ts @@ -0,0 +1,7 @@ +export declare function useFileInputClasses(size: string): { + fileInpClasses: import("vue").ComputedRef; + labelClasses: import("vue").ComputedRef; + dropzoneLabelClasses: import("vue").ComputedRef; + dropzoneWrapClasses: import("vue").ComputedRef; + dropzoneTextClasses: import("vue").ComputedRef; +}; diff --git a/dist/components/FwbFooter/FwbFooter.vue.d.ts b/dist/components/FwbFooter/FwbFooter.vue.d.ts new file mode 100644 index 0000000..ffa8028 --- /dev/null +++ b/dist/components/FwbFooter/FwbFooter.vue.d.ts @@ -0,0 +1,31 @@ +type FooterType = 'sitemap' | 'default' | 'logo' | 'socialmedia'; +declare const _default: __VLS_WithTemplateSlots; + default: boolean; + }; + footerType: { + type: import("vue").PropType; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: boolean; + }; + footerType: { + type: import("vue").PropType; + default: string; + }; +}>>, { + sticky: boolean; + footerType: FooterType; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbFooter/FwbFooterBrand.vue.d.ts b/dist/components/FwbFooter/FwbFooterBrand.vue.d.ts new file mode 100644 index 0000000..53f093f --- /dev/null +++ b/dist/components/FwbFooter/FwbFooterBrand.vue.d.ts @@ -0,0 +1,74 @@ +declare const _default: import("vue").DefineComponent<{ + name: { + type: import("vue").PropType; + required: true; + default: string; + }; + href: { + type: import("vue").PropType; + required: true; + default: string; + }; + alt: { + type: import("vue").PropType; + default: string; + }; + src: { + type: import("vue").PropType; + required: true; + default: string; + }; + imageClass: { + type: import("vue").PropType; + default: string; + }; + nameClass: { + type: import("vue").PropType; + default: string; + }; + aClass: { + type: import("vue").PropType; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + required: true; + default: string; + }; + href: { + type: import("vue").PropType; + required: true; + default: string; + }; + alt: { + type: import("vue").PropType; + default: string; + }; + src: { + type: import("vue").PropType; + required: true; + default: string; + }; + imageClass: { + type: import("vue").PropType; + default: string; + }; + nameClass: { + type: import("vue").PropType; + default: string; + }; + aClass: { + type: import("vue").PropType; + default: string; + }; +}>>, { + name: string; + href: string; + alt: string; + src: string; + imageClass: string; + nameClass: string; + aClass: string; +}, {}>; +export default _default; diff --git a/dist/components/FwbFooter/FwbFooterCopyright.vue.d.ts b/dist/components/FwbFooter/FwbFooterCopyright.vue.d.ts new file mode 100644 index 0000000..d8ac269 --- /dev/null +++ b/dist/components/FwbFooter/FwbFooterCopyright.vue.d.ts @@ -0,0 +1,50 @@ +declare const _default: import("vue").DefineComponent<{ + by: { + type: import("vue").PropType; + default: string; + }; + href: { + type: import("vue").PropType; + default: string; + }; + aClass: { + type: import("vue").PropType; + default: string; + }; + year: { + type: import("vue").PropType; + default: number; + }; + copyrightMessage: { + type: import("vue").PropType; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; + href: { + type: import("vue").PropType; + default: string; + }; + aClass: { + type: import("vue").PropType; + default: string; + }; + year: { + type: import("vue").PropType; + default: number; + }; + copyrightMessage: { + type: import("vue").PropType; + default: string; + }; +}>>, { + by: string; + href: string; + aClass: string; + year: string | number; + copyrightMessage: string; +}, {}>; +export default _default; diff --git a/dist/components/FwbFooter/FwbFooterIcon.vue.d.ts b/dist/components/FwbFooter/FwbFooterIcon.vue.d.ts new file mode 100644 index 0000000..22fd409 --- /dev/null +++ b/dist/components/FwbFooter/FwbFooterIcon.vue.d.ts @@ -0,0 +1,39 @@ +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + ariaLabel: { + type: import("vue").PropType; + default: string; + }; + srText: { + type: import("vue").PropType; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; + ariaLabel: { + type: import("vue").PropType; + default: string; + }; + srText: { + type: import("vue").PropType; + default: string; + }; +}>>, { + href: string; + ariaLabel: string; + srText: string; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbFooter/FwbFooterLink.vue.d.ts b/dist/components/FwbFooter/FwbFooterLink.vue.d.ts new file mode 100644 index 0000000..85335dd --- /dev/null +++ b/dist/components/FwbFooter/FwbFooterLink.vue.d.ts @@ -0,0 +1,41 @@ +declare const _default: __VLS_WithTemplateSlots; + required: true; + default: string; + }; + aClass: { + type: import("vue").PropType; + default: string; + }; + component: { + type: import("vue").PropType; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + required: true; + default: string; + }; + aClass: { + type: import("vue").PropType; + default: string; + }; + component: { + type: import("vue").PropType; + default: string; + }; +}>>, { + href: string; + aClass: string; + component: string; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbFooter/FwbFooterLinkGroup.vue.d.ts b/dist/components/FwbFooter/FwbFooterLinkGroup.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbFooter/FwbFooterLinkGroup.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbInput/FwbInput.vue.d.ts b/dist/components/FwbInput/FwbInput.vue.d.ts new file mode 100644 index 0000000..11fde61 --- /dev/null +++ b/dist/components/FwbInput/FwbInput.vue.d.ts @@ -0,0 +1,81 @@ +import { type InputSize, type InputType, type ValidationStatus } from './types'; +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + label: { + type: import("vue").PropType; + default: string; + }; + disabled: { + type: import("vue").PropType; + default: boolean; + }; + size: { + type: import("vue").PropType; + default: string; + }; + modelValue: { + type: import("vue").PropType; + required: true; + default: string; + }; + required: { + type: import("vue").PropType; + default: boolean; + }; + validationStatus: { + type: import("vue").PropType; + default: undefined; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; + label: { + type: import("vue").PropType; + default: string; + }; + disabled: { + type: import("vue").PropType; + default: boolean; + }; + size: { + type: import("vue").PropType; + default: string; + }; + modelValue: { + type: import("vue").PropType; + required: true; + default: string; + }; + required: { + type: import("vue").PropType; + default: boolean; + }; + validationStatus: { + type: import("vue").PropType; + default: undefined; + }; +}>>, { + type: InputType; + label: string; + disabled: boolean; + size: InputSize; + modelValue: string; + required: boolean; + validationStatus: ValidationStatus; +}, {}>, { + prefix?(_: {}): any; + suffix?(_: {}): any; + validationMessage?(_: {}): any; + helper?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbInput/composables/useInputClasses.d.ts b/dist/components/FwbInput/composables/useInputClasses.d.ts new file mode 100644 index 0000000..a510ca9 --- /dev/null +++ b/dist/components/FwbInput/composables/useInputClasses.d.ts @@ -0,0 +1,11 @@ +import { type Ref } from 'vue'; +import { type InputSize, type ValidationStatus } from '../types'; +export type UseInputClassesProps = { + size: Ref; + disabled: Ref; + validationStatus: Ref; +}; +export declare function useInputClasses(props: UseInputClassesProps): { + inputClasses: Ref; + labelClasses: Ref; +}; diff --git a/dist/components/FwbInput/types.d.ts b/dist/components/FwbInput/types.d.ts new file mode 100644 index 0000000..d1a44fb --- /dev/null +++ b/dist/components/FwbInput/types.d.ts @@ -0,0 +1,7 @@ +export type InputSize = 'sm' | 'md' | 'lg'; +export type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week'; +export declare const validationStatusMap: { + readonly Success: "success"; + readonly Error: "error"; +}; +export type ValidationStatus = typeof validationStatusMap[keyof typeof validationStatusMap]; diff --git a/dist/components/FwbJumbotron/FwbJumbotron.vue.d.ts b/dist/components/FwbJumbotron/FwbJumbotron.vue.d.ts new file mode 100644 index 0000000..c5ceec2 --- /dev/null +++ b/dist/components/FwbJumbotron/FwbJumbotron.vue.d.ts @@ -0,0 +1,58 @@ +import type { HeaderLevel } from './types'; +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + headerLevel: { + type: import("vue").PropType; + default: number; + }; + subText: { + type: import("vue").PropType; + default: string; + }; + subTextClasses: { + type: import("vue").PropType; + default: string; + }; + headerText: { + type: import("vue").PropType; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; + headerLevel: { + type: import("vue").PropType; + default: number; + }; + subText: { + type: import("vue").PropType; + default: string; + }; + subTextClasses: { + type: import("vue").PropType; + default: string; + }; + headerText: { + type: import("vue").PropType; + default: string; + }; +}>>, { + headerClasses: string; + headerLevel: HeaderLevel; + subText: string; + subTextClasses: string; + headerText: string; +}, {}>, { + default: any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbJumbotron/types.d.ts b/dist/components/FwbJumbotron/types.d.ts new file mode 100644 index 0000000..92ce5cf --- /dev/null +++ b/dist/components/FwbJumbotron/types.d.ts @@ -0,0 +1 @@ +export type HeaderLevel = 1 | 2 | 3 | 4 | 5 | 6; diff --git a/dist/components/FwbListGroup/FwbListGroup.vue.d.ts b/dist/components/FwbListGroup/FwbListGroup.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbListGroup/FwbListGroup.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbListGroup/FwbListGroupItem.vue.d.ts b/dist/components/FwbListGroup/FwbListGroupItem.vue.d.ts new file mode 100644 index 0000000..3db66a9 --- /dev/null +++ b/dist/components/FwbListGroup/FwbListGroupItem.vue.d.ts @@ -0,0 +1,32 @@ +declare const _default: __VLS_WithTemplateSlots>, { + disabled: boolean; + hover: boolean; +}, {}>, { + prefix?(_: {}): any; + default?(_: {}): any; + suffix?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbListGroup/composables/useListGroupClasses.d.ts b/dist/components/FwbListGroup/composables/useListGroupClasses.d.ts new file mode 100644 index 0000000..2199bfe --- /dev/null +++ b/dist/components/FwbListGroup/composables/useListGroupClasses.d.ts @@ -0,0 +1,4 @@ +import { type Ref } from 'vue'; +export declare function useListGroupClasses(): { + containerClasses: Ref; +}; diff --git a/dist/components/FwbListGroup/composables/useListGroupItemClasses.d.ts b/dist/components/FwbListGroup/composables/useListGroupItemClasses.d.ts new file mode 100644 index 0000000..d138fde --- /dev/null +++ b/dist/components/FwbListGroup/composables/useListGroupItemClasses.d.ts @@ -0,0 +1,8 @@ +import { type Ref } from 'vue'; +export type UseListGroupItemClassesProps = { + hover: Ref; + disabled: Ref; +}; +export declare function useListGroupItemClasses(props: UseListGroupItemClassesProps): { + itemClasses: Ref; +}; diff --git a/dist/components/FwbModal/FwbModal.vue.d.ts b/dist/components/FwbModal/FwbModal.vue.d.ts new file mode 100644 index 0000000..ad2daaa --- /dev/null +++ b/dist/components/FwbModal/FwbModal.vue.d.ts @@ -0,0 +1,46 @@ +import type { ModalSize } from './types'; +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + notEscapable: { + type: import("vue").PropType; + default: boolean; + }; + persistent: { + type: import("vue").PropType; + default: boolean; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "click:outside")[], "close" | "click:outside", import("vue").PublicProps, Readonly; + default: string; + }; + notEscapable: { + type: import("vue").PropType; + default: boolean; + }; + persistent: { + type: import("vue").PropType; + default: boolean; + }; +}>> & { + onClose?: ((...args: any[]) => any) | undefined; + "onClick:outside"?: ((...args: any[]) => any) | undefined; +}, { + size: ModalSize; + notEscapable: boolean; + persistent: boolean; +}, {}>, { + header?(_: {}): any; + "close-icon"?(_: {}): any; + body?(_: {}): any; + footer?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbModal/types.d.ts b/dist/components/FwbModal/types.d.ts new file mode 100644 index 0000000..0610eb6 --- /dev/null +++ b/dist/components/FwbModal/types.d.ts @@ -0,0 +1,2 @@ +export type ModalPosition = 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right'; +export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl'; diff --git a/dist/components/FwbNavbar/FwbMegaMenu.vue.d.ts b/dist/components/FwbNavbar/FwbMegaMenu.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbNavbar/FwbMegaMenu.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbNavbar/FwbMegaMenuDropdown.vue.d.ts b/dist/components/FwbNavbar/FwbMegaMenuDropdown.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbNavbar/FwbMegaMenuDropdown.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbNavbar/FwbNavbar.vue.d.ts b/dist/components/FwbNavbar/FwbNavbar.vue.d.ts new file mode 100644 index 0000000..b241017 --- /dev/null +++ b/dist/components/FwbNavbar/FwbNavbar.vue.d.ts @@ -0,0 +1,54 @@ +declare const _default: __VLS_WithTemplateSlots>, { + class: string; + rounded: boolean; + solid: boolean; + sticky: boolean; +}, {}>, { + logo?(_: {}): any; + "menu-icon"?(_: {}): any; + default?(_: { + isShowMenu: boolean; + }): any; + "right-side"?(_: {}): any; + "mega-menu-dropdown"?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbNavbar/FwbNavbarCollapse.vue.d.ts b/dist/components/FwbNavbar/FwbNavbarCollapse.vue.d.ts new file mode 100644 index 0000000..c586245 --- /dev/null +++ b/dist/components/FwbNavbar/FwbNavbarCollapse.vue.d.ts @@ -0,0 +1,21 @@ +declare const _default: __VLS_WithTemplateSlots>, { + isShowMenu: boolean; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbNavbar/FwbNavbarLink.d.ts b/dist/components/FwbNavbar/FwbNavbarLink.d.ts new file mode 100644 index 0000000..e69de29 diff --git a/dist/components/FwbNavbar/FwbNavbarLink.vue.d.ts b/dist/components/FwbNavbar/FwbNavbarLink.vue.d.ts new file mode 100644 index 0000000..dd9d203 --- /dev/null +++ b/dist/components/FwbNavbar/FwbNavbarLink.vue.d.ts @@ -0,0 +1,61 @@ +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + disabled: { + type: import("vue").PropType; + default: boolean; + }; + linkAttr: { + type: import("vue").PropType; + default: string; + }; + component: { + type: import("vue").PropType; + default: string; + }; + isActive: { + type: import("vue").PropType; + default: boolean; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { + click: (event: Event) => void; +}, string, import("vue").PublicProps, Readonly; + default: string; + }; + disabled: { + type: import("vue").PropType; + default: boolean; + }; + linkAttr: { + type: import("vue").PropType; + default: string; + }; + component: { + type: import("vue").PropType; + default: string; + }; + isActive: { + type: import("vue").PropType; + default: boolean; + }; +}>> & { + onClick?: ((event: Event) => any) | undefined; +}, { + link: string; + disabled: boolean; + linkAttr: string; + component: string; + isActive: boolean; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbNavbar/FwbNavbarLogo.vue.d.ts b/dist/components/FwbNavbar/FwbNavbarLogo.vue.d.ts new file mode 100644 index 0000000..7e8536d --- /dev/null +++ b/dist/components/FwbNavbar/FwbNavbarLogo.vue.d.ts @@ -0,0 +1,57 @@ +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + alt: { + type: import("vue").PropType; + default: string; + }; + linkAttr: { + type: import("vue").PropType; + default: string; + }; + component: { + type: import("vue").PropType; + default: string; + }; + imageUrl: { + type: import("vue").PropType; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; + alt: { + type: import("vue").PropType; + default: string; + }; + linkAttr: { + type: import("vue").PropType; + default: string; + }; + component: { + type: import("vue").PropType; + default: string; + }; + imageUrl: { + type: import("vue").PropType; + default: string; + }; +}>>, { + link: string; + alt: string; + linkAttr: string; + component: string; + imageUrl: string; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbPagination/FwbPagination.vue.d.ts b/dist/components/FwbPagination/FwbPagination.vue.d.ts new file mode 100644 index 0000000..2c47b59 --- /dev/null +++ b/dist/components/FwbPagination/FwbPagination.vue.d.ts @@ -0,0 +1,135 @@ +import type { PaginationLayout } from './types'; +declare const _default: __VLS_WithTemplateSlots; + default: number; + }; + totalPages: { + type: import("vue").PropType; + default: undefined; + }; + perPage: { + type: import("vue").PropType; + default: number; + }; + totalItems: { + type: import("vue").PropType; + default: number; + }; + layout: { + type: import("vue").PropType; + default: string; + }; + showIcons: { + type: import("vue").PropType; + default: boolean; + }; + sliceLength: { + type: import("vue").PropType; + default: number; + }; + previousLabel: { + type: import("vue").PropType; + default: string; + }; + nextLabel: { + type: import("vue").PropType; + default: string; + }; + enableFirstAndLastButtons: { + type: import("vue").PropType; + default: boolean; + }; + showLabels: { + type: import("vue").PropType; + default: boolean; + }; + large: { + type: import("vue").PropType; + default: boolean; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { + 'update:model-value': (page: number) => void; + 'page-changed': (page: number) => void; +}, string, import("vue").PublicProps, Readonly; + default: number; + }; + totalPages: { + type: import("vue").PropType; + default: undefined; + }; + perPage: { + type: import("vue").PropType; + default: number; + }; + totalItems: { + type: import("vue").PropType; + default: number; + }; + layout: { + type: import("vue").PropType; + default: string; + }; + showIcons: { + type: import("vue").PropType; + default: boolean; + }; + sliceLength: { + type: import("vue").PropType; + default: number; + }; + previousLabel: { + type: import("vue").PropType; + default: string; + }; + nextLabel: { + type: import("vue").PropType; + default: string; + }; + enableFirstAndLastButtons: { + type: import("vue").PropType; + default: boolean; + }; + showLabels: { + type: import("vue").PropType; + default: boolean; + }; + large: { + type: import("vue").PropType; + default: boolean; + }; +}>> & { + "onUpdate:model-value"?: ((page: number) => any) | undefined; + "onPage-changed"?: ((page: number) => any) | undefined; +}, { + modelValue: number; + totalPages: number; + perPage: number; + totalItems: number; + layout: PaginationLayout; + showIcons: boolean; + sliceLength: number; + previousLabel: string; + nextLabel: string; + enableFirstAndLastButtons: boolean; + showLabels: boolean; + large: boolean; +}, {}>, { + start: any; + 'first-button': any; + 'prev-button': any; + 'prev-icon': any; + 'page-button': any; + 'next-button': any; + 'next-icon': any; + 'last-button': any; + end: any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbPagination/types.d.ts b/dist/components/FwbPagination/types.d.ts new file mode 100644 index 0000000..0a1e3b6 --- /dev/null +++ b/dist/components/FwbPagination/types.d.ts @@ -0,0 +1 @@ +export type PaginationLayout = 'navigation' | 'pagination' | 'table'; diff --git a/dist/components/FwbProgress/FwbProgress.vue.d.ts b/dist/components/FwbProgress/FwbProgress.vue.d.ts new file mode 100644 index 0000000..4734fed --- /dev/null +++ b/dist/components/FwbProgress/FwbProgress.vue.d.ts @@ -0,0 +1,60 @@ +import type { ProgressLabelPosition, ProgressSize, ProgressVariant } from './types'; +declare const _default: import("vue").DefineComponent<{ + label: { + type: import("vue").PropType; + default: string; + }; + progress: { + type: import("vue").PropType; + default: number; + }; + color: { + type: import("vue").PropType; + default: string; + }; + size: { + type: import("vue").PropType; + default: string; + }; + labelPosition: { + type: import("vue").PropType; + default: string; + }; + labelProgress: { + type: import("vue").PropType; + default: boolean; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; + progress: { + type: import("vue").PropType; + default: number; + }; + color: { + type: import("vue").PropType; + default: string; + }; + size: { + type: import("vue").PropType; + default: string; + }; + labelPosition: { + type: import("vue").PropType; + default: string; + }; + labelProgress: { + type: import("vue").PropType; + default: boolean; + }; +}>>, { + label: string; + progress: number; + color: ProgressVariant; + size: ProgressSize; + labelPosition: ProgressLabelPosition; + labelProgress: boolean; +}, {}>; +export default _default; diff --git a/dist/components/FwbProgress/composables/useProgressClasses.d.ts b/dist/components/FwbProgress/composables/useProgressClasses.d.ts new file mode 100644 index 0000000..3c15f2e --- /dev/null +++ b/dist/components/FwbProgress/composables/useProgressClasses.d.ts @@ -0,0 +1,12 @@ +import { type Ref } from 'vue'; +import type { ProgressLabelPosition, ProgressSize, ProgressVariant } from '../types'; +export type UseProgressClassesProps = { + color: Ref; + size: Ref; + labelPosition: Ref; +}; +export declare function useProgressClasses(props: UseProgressClassesProps): { + innerClasses: Ref; + outerClasses: Ref; + outsideLabelClasses: Ref; +}; diff --git a/dist/components/FwbProgress/types.d.ts b/dist/components/FwbProgress/types.d.ts new file mode 100644 index 0000000..b3c132b --- /dev/null +++ b/dist/components/FwbProgress/types.d.ts @@ -0,0 +1,3 @@ +export type ProgressLabelPosition = 'inside' | 'outside' | 'none'; +export type ProgressSize = 'sm' | 'md' | 'lg' | 'xl'; +export type ProgressVariant = 'default' | 'dark' | 'green' | 'red' | 'yellow' | 'purple' | 'blue' | 'indigo'; diff --git a/dist/components/FwbRadio/FwbRadio.vue.d.ts b/dist/components/FwbRadio/FwbRadio.vue.d.ts new file mode 100644 index 0000000..e649487 --- /dev/null +++ b/dist/components/FwbRadio/FwbRadio.vue.d.ts @@ -0,0 +1,59 @@ +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + disabled: { + type: import("vue").PropType; + default: boolean; + }; + name: { + type: import("vue").PropType; + default: string; + }; + value: { + type: import("vue").PropType; + default: string; + }; + modelValue: { + type: import("vue").PropType; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly; + default: string; + }; + disabled: { + type: import("vue").PropType; + default: boolean; + }; + name: { + type: import("vue").PropType; + default: string; + }; + value: { + type: import("vue").PropType; + default: string; + }; + modelValue: { + type: import("vue").PropType; + default: string; + }; +}>> & { + "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; +}, { + label: string; + disabled: boolean; + name: string; + value: string; + modelValue: string; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbRadio/composables/useRadioClasses.d.ts b/dist/components/FwbRadio/composables/useRadioClasses.d.ts new file mode 100644 index 0000000..e69de29 diff --git a/dist/components/FwbRange/FwbRange.vue.d.ts b/dist/components/FwbRange/FwbRange.vue.d.ts new file mode 100644 index 0000000..9e2a608 --- /dev/null +++ b/dist/components/FwbRange/FwbRange.vue.d.ts @@ -0,0 +1,71 @@ +import type { InputSize } from '@/components/FwbInput/types'; +declare const _default: import("vue").DefineComponent<{ + label: { + type: import("vue").PropType; + default: string; + }; + disabled: { + type: import("vue").PropType; + default: boolean; + }; + max: { + type: import("vue").PropType; + default: number; + }; + min: { + type: import("vue").PropType; + default: number; + }; + size: { + type: import("vue").PropType; + default: string; + }; + modelValue: { + type: import("vue").PropType; + default: number; + }; + steps: { + type: import("vue").PropType; + default: number; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly; + default: string; + }; + disabled: { + type: import("vue").PropType; + default: boolean; + }; + max: { + type: import("vue").PropType; + default: number; + }; + min: { + type: import("vue").PropType; + default: number; + }; + size: { + type: import("vue").PropType; + default: string; + }; + modelValue: { + type: import("vue").PropType; + default: number; + }; + steps: { + type: import("vue").PropType; + default: number; + }; +}>> & { + "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; +}, { + label: string; + disabled: boolean; + max: number; + min: number; + size: InputSize; + modelValue: number; + steps: number; +}, {}>; +export default _default; diff --git a/dist/components/FwbRange/composables/useRangeClasses.d.ts b/dist/components/FwbRange/composables/useRangeClasses.d.ts new file mode 100644 index 0000000..a69390c --- /dev/null +++ b/dist/components/FwbRange/composables/useRangeClasses.d.ts @@ -0,0 +1,10 @@ +import { type Ref } from 'vue'; +import type { InputSize } from '@/components/FwbInput/types'; +export type UseRangeClassesProps = { + size: Ref; + disabled: Ref; +}; +export declare function useRangeClasses(props: UseRangeClassesProps): { + rangeClasses: import("vue").ComputedRef; + labelClasses: import("vue").ComputedRef; +}; diff --git a/dist/components/FwbRating/FwbRating.vue.d.ts b/dist/components/FwbRating/FwbRating.vue.d.ts new file mode 100644 index 0000000..686b45c --- /dev/null +++ b/dist/components/FwbRating/FwbRating.vue.d.ts @@ -0,0 +1,58 @@ +import type { RatingSize } from './types'; +declare const _default: __VLS_WithTemplateSlots; + default: number; + }; + size: { + type: import("vue").PropType; + default: string; + }; + rating: { + type: import("vue").PropType; + default: number; + }; + reviewLink: { + type: import("vue").PropType; + default: string; + }; + reviewText: { + type: import("vue").PropType; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: number; + }; + size: { + type: import("vue").PropType; + default: string; + }; + rating: { + type: import("vue").PropType; + default: number; + }; + reviewLink: { + type: import("vue").PropType; + default: string; + }; + reviewText: { + type: import("vue").PropType; + default: string; + }; +}>>, { + scale: number; + size: RatingSize; + rating: number; + reviewLink: string; + reviewText: string; +}, {}>, { + besideText?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbRating/composables/useRatingClasses.d.ts b/dist/components/FwbRating/composables/useRatingClasses.d.ts new file mode 100644 index 0000000..6166013 --- /dev/null +++ b/dist/components/FwbRating/composables/useRatingClasses.d.ts @@ -0,0 +1,8 @@ +import { type Ref } from 'vue'; +import type { RatingSize } from '../types'; +export type UseRatingClassesProps = { + size: Ref; +}; +export declare function useRatingClasses(props: UseRatingClassesProps): { + sizeClasses: Ref; +}; diff --git a/dist/components/FwbRating/types.d.ts b/dist/components/FwbRating/types.d.ts new file mode 100644 index 0000000..edf1e6e --- /dev/null +++ b/dist/components/FwbRating/types.d.ts @@ -0,0 +1 @@ +export type RatingSize = 'sm' | 'md' | 'lg'; diff --git a/dist/components/FwbSelect/FwbSelect.vue.d.ts b/dist/components/FwbSelect/FwbSelect.vue.d.ts new file mode 100644 index 0000000..55afd9a --- /dev/null +++ b/dist/components/FwbSelect/FwbSelect.vue.d.ts @@ -0,0 +1,89 @@ +import type { InputSize } from './../FwbInput/types'; +import { type OptionsType, type ValidationStatus } from './types'; +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + placeholder: { + type: import("vue").PropType; + default: string; + }; + disabled: { + type: import("vue").PropType; + default: boolean; + }; + size: { + type: import("vue").PropType; + default: string; + }; + modelValue: { + type: import("vue").PropType; + default: string; + }; + validationStatus: { + type: import("vue").PropType; + default: undefined; + }; + options: { + type: import("vue").PropType; + default: () => never[]; + }; + underline: { + type: import("vue").PropType; + default: boolean; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly; + default: string; + }; + placeholder: { + type: import("vue").PropType; + default: string; + }; + disabled: { + type: import("vue").PropType; + default: boolean; + }; + size: { + type: import("vue").PropType; + default: string; + }; + modelValue: { + type: import("vue").PropType; + default: string; + }; + validationStatus: { + type: import("vue").PropType; + default: undefined; + }; + options: { + type: import("vue").PropType; + default: () => never[]; + }; + underline: { + type: import("vue").PropType; + default: boolean; + }; +}>> & { + "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; +}, { + label: string; + placeholder: string; + disabled: boolean; + size: InputSize; + modelValue: string; + validationStatus: ValidationStatus; + options: OptionsType[]; + underline: boolean; +}, {}>, { + validationMessage?(_: {}): any; + helper?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbSelect/composables/useSelectClasses.d.ts b/dist/components/FwbSelect/composables/useSelectClasses.d.ts new file mode 100644 index 0000000..6de93c0 --- /dev/null +++ b/dist/components/FwbSelect/composables/useSelectClasses.d.ts @@ -0,0 +1,12 @@ +import { type Ref } from 'vue'; +import { type InputSize, type ValidationStatus } from '../types'; +export type UseSelectClassesProps = { + size: Ref; + disabled: Ref; + underline: Ref; + validationStatus: Ref; +}; +export declare function useSelectClasses(props: UseSelectClassesProps): { + selectClasses: Ref; + labelClasses: Ref; +}; diff --git a/dist/components/FwbSelect/types.d.ts b/dist/components/FwbSelect/types.d.ts new file mode 100644 index 0000000..cc171db --- /dev/null +++ b/dist/components/FwbSelect/types.d.ts @@ -0,0 +1,10 @@ +export type InputSize = 'sm' | 'md' | 'lg'; +export type OptionsType = { + name: string; + value: string; +}; +export declare const validationStatusMap: { + readonly Success: "success"; + readonly Error: "error"; +}; +export type ValidationStatus = typeof validationStatusMap[keyof typeof validationStatusMap]; diff --git a/dist/components/FwbSidebar/FwbSidebar.vue.d.ts b/dist/components/FwbSidebar/FwbSidebar.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbSidebar/FwbSidebar.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbSidebar/FwbSidebarCta.vue.d.ts b/dist/components/FwbSidebar/FwbSidebarCta.vue.d.ts new file mode 100644 index 0000000..270d5a5 --- /dev/null +++ b/dist/components/FwbSidebar/FwbSidebarCta.vue.d.ts @@ -0,0 +1,25 @@ +declare const _default: __VLS_WithTemplateSlots; + default: undefined; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { + close: () => void; +}, string, import("vue").PublicProps, Readonly; + default: undefined; + }; +}>> & { + onClose?: (() => any) | undefined; +}, { + label: string; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbSidebar/FwbSidebarDropdownItem.vue.d.ts b/dist/components/FwbSidebar/FwbSidebarDropdownItem.vue.d.ts new file mode 100644 index 0000000..1ce7134 --- /dev/null +++ b/dist/components/FwbSidebar/FwbSidebarDropdownItem.vue.d.ts @@ -0,0 +1,15 @@ +declare function toggleDropdown(): void; +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + icon?(_: {}): any; + trigger?(_: {}): any; + "arrow-icon"?(_: { + toggleDropdown: typeof toggleDropdown; + }): any; + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbSidebar/FwbSidebarItem.vue.d.ts b/dist/components/FwbSidebar/FwbSidebarItem.vue.d.ts new file mode 100644 index 0000000..fce9952 --- /dev/null +++ b/dist/components/FwbSidebar/FwbSidebarItem.vue.d.ts @@ -0,0 +1,32 @@ +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + tag: { + type: import("vue").PropType; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; + tag: { + type: import("vue").PropType; + default: string; + }; +}>>, { + link: string; + tag: string; +}, {}>, { + icon?(_: {}): any; + default?(_: {}): any; + suffix?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbSidebar/FwbSidebarItemGroup.vue.d.ts b/dist/components/FwbSidebar/FwbSidebarItemGroup.vue.d.ts new file mode 100644 index 0000000..d06828b --- /dev/null +++ b/dist/components/FwbSidebar/FwbSidebarItemGroup.vue.d.ts @@ -0,0 +1,23 @@ +declare const _default: __VLS_WithTemplateSlots; + required: true; + default: boolean; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + required: true; + default: boolean; + }; +}>>, { + border: boolean; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbSidebar/FwbSidebarLogo.vue.d.ts b/dist/components/FwbSidebar/FwbSidebarLogo.vue.d.ts new file mode 100644 index 0000000..856377b --- /dev/null +++ b/dist/components/FwbSidebar/FwbSidebarLogo.vue.d.ts @@ -0,0 +1,50 @@ +declare const _default: import("vue").DefineComponent<{ + link: { + type: import("vue").PropType; + default: string; + }; + name: { + type: import("vue").PropType; + default: string; + }; + alt: { + type: import("vue").PropType; + default: string; + }; + tag: { + type: import("vue").PropType; + default: string; + }; + logo: { + type: import("vue").PropType; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; + name: { + type: import("vue").PropType; + default: string; + }; + alt: { + type: import("vue").PropType; + default: string; + }; + tag: { + type: import("vue").PropType; + default: string; + }; + logo: { + type: import("vue").PropType; + default: string; + }; +}>>, { + link: string; + name: string; + alt: string; + tag: string; + logo: string; +}, {}>; +export default _default; diff --git a/dist/components/FwbSpinner/FwbSpinner.vue.d.ts b/dist/components/FwbSpinner/FwbSpinner.vue.d.ts new file mode 100644 index 0000000..6519cac --- /dev/null +++ b/dist/components/FwbSpinner/FwbSpinner.vue.d.ts @@ -0,0 +1,24 @@ +import type { SpinnerColor, SpinnerSize } from './types'; +declare const _default: import("vue").DefineComponent<{ + color: { + type: import("vue").PropType; + default: string; + }; + size: { + type: import("vue").PropType; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; + size: { + type: import("vue").PropType; + default: string; + }; +}>>, { + color: SpinnerColor; + size: SpinnerSize; +}, {}>; +export default _default; diff --git a/dist/components/FwbSpinner/composables/useSpinnerClasses.d.ts b/dist/components/FwbSpinner/composables/useSpinnerClasses.d.ts new file mode 100644 index 0000000..b3c29e2 --- /dev/null +++ b/dist/components/FwbSpinner/composables/useSpinnerClasses.d.ts @@ -0,0 +1,9 @@ +import { type Ref } from 'vue'; +import type { SpinnerColor, SpinnerSize } from '../types'; +export type UseSpinnerClassesProps = { + color: Ref; + size: Ref; +}; +export declare function useSpinnerClasses(props: UseSpinnerClassesProps): { + spinnerClasses: Ref; +}; diff --git a/dist/components/FwbSpinner/types.d.ts b/dist/components/FwbSpinner/types.d.ts new file mode 100644 index 0000000..f1e45bb --- /dev/null +++ b/dist/components/FwbSpinner/types.d.ts @@ -0,0 +1,2 @@ +export type SpinnerColor = 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white'; +export type SpinnerSize = '0' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'; diff --git a/dist/components/FwbTable/FwbTable.vue.d.ts b/dist/components/FwbTable/FwbTable.vue.d.ts new file mode 100644 index 0000000..387fb70 --- /dev/null +++ b/dist/components/FwbTable/FwbTable.vue.d.ts @@ -0,0 +1,39 @@ +declare const _default: __VLS_WithTemplateSlots>, { + striped: boolean; + stripedColumns: boolean; + hoverable: boolean; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbTable/FwbTableBody.vue.d.ts b/dist/components/FwbTable/FwbTableBody.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbTable/FwbTableBody.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbTable/FwbTableCell.vue.d.ts b/dist/components/FwbTable/FwbTableCell.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbTable/FwbTableCell.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbTable/FwbTableHead.vue.d.ts b/dist/components/FwbTable/FwbTableHead.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbTable/FwbTableHead.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbTable/FwbTableHeadCell.vue.d.ts b/dist/components/FwbTable/FwbTableHeadCell.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbTable/FwbTableHeadCell.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbTable/FwbTableRow.vue.d.ts b/dist/components/FwbTable/FwbTableRow.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbTable/FwbTableRow.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbTable/composables/useTableCellClasses.d.ts b/dist/components/FwbTable/composables/useTableCellClasses.d.ts new file mode 100644 index 0000000..361936b --- /dev/null +++ b/dist/components/FwbTable/composables/useTableCellClasses.d.ts @@ -0,0 +1,4 @@ +import { type Ref } from 'vue'; +export declare function useTableCellClasses(): { + tableCellClasses: Ref; +}; diff --git a/dist/components/FwbTable/composables/useTableHeadCellClasses.d.ts b/dist/components/FwbTable/composables/useTableHeadCellClasses.d.ts new file mode 100644 index 0000000..b9c7b35 --- /dev/null +++ b/dist/components/FwbTable/composables/useTableHeadCellClasses.d.ts @@ -0,0 +1,4 @@ +import { type Ref } from 'vue'; +export declare function useTableHeadCellClasses(): { + tableHeadCellClasses: Ref; +}; diff --git a/dist/components/FwbTable/composables/useTableRowClasses.d.ts b/dist/components/FwbTable/composables/useTableRowClasses.d.ts new file mode 100644 index 0000000..4c050e6 --- /dev/null +++ b/dist/components/FwbTable/composables/useTableRowClasses.d.ts @@ -0,0 +1,4 @@ +import { type Ref } from 'vue'; +export declare function useTableRowClasses(): { + tableRowClasses: Ref; +}; diff --git a/dist/components/FwbTabs/FwbTab.vue.d.ts b/dist/components/FwbTabs/FwbTab.vue.d.ts new file mode 100644 index 0000000..cea9efe --- /dev/null +++ b/dist/components/FwbTabs/FwbTab.vue.d.ts @@ -0,0 +1,38 @@ +declare const _default: __VLS_WithTemplateSlots>, { + title: string; + disabled: boolean; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbTabs/FwbTabPane.vue.d.ts b/dist/components/FwbTabs/FwbTabPane.vue.d.ts new file mode 100644 index 0000000..a4248a8 --- /dev/null +++ b/dist/components/FwbTabs/FwbTabPane.vue.d.ts @@ -0,0 +1,40 @@ +declare const _default: import("vue").DefineComponent<{ + name: { + type: StringConstructor; + required: true; + }; + title: { + type: StringConstructor; + default: string; + }; + disabled: { + type: BooleanConstructor; + default: boolean; + }; + active: { + type: BooleanConstructor; + default: boolean; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly>, { + title: string; + disabled: boolean; + active: boolean; +}, {}>; +export default _default; diff --git a/dist/components/FwbTabs/FwbTabs.vue.d.ts b/dist/components/FwbTabs/FwbTabs.vue.d.ts new file mode 100644 index 0000000..7625af0 --- /dev/null +++ b/dist/components/FwbTabs/FwbTabs.vue.d.ts @@ -0,0 +1,43 @@ +import type { TabsVariant } from './types'; +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + modelValue: { + type: import("vue").PropType; + default: string; + }; + directive: { + type: import("vue").PropType<"if" | "show">; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "click:pane")[], "update:modelValue" | "click:pane", import("vue").PublicProps, Readonly; + default: string; + }; + modelValue: { + type: import("vue").PropType; + default: string; + }; + directive: { + type: import("vue").PropType<"if" | "show">; + default: string; + }; +}>> & { + "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; + "onClick:pane"?: ((...args: any[]) => any) | undefined; +}, { + variant: TabsVariant; + modelValue: string; + directive: "if" | "show"; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbTabs/composables/useTabClasses.d.ts b/dist/components/FwbTabs/composables/useTabClasses.d.ts new file mode 100644 index 0000000..c1945db --- /dev/null +++ b/dist/components/FwbTabs/composables/useTabClasses.d.ts @@ -0,0 +1,15 @@ +import { type Ref } from 'vue'; +import type { TabsVariant } from './../types'; +export type TabClassMap = { + active: string; + default: string; + disabled: string; +}; +export type UseTabClassesProps = { + active: Ref; + disabled: Ref; + variant?: TabsVariant; +}; +export declare function useTabClasses(props: UseTabClassesProps): { + tabClasses: Ref; +}; diff --git a/dist/components/FwbTabs/composables/useTabsClasses.d.ts b/dist/components/FwbTabs/composables/useTabsClasses.d.ts new file mode 100644 index 0000000..abab368 --- /dev/null +++ b/dist/components/FwbTabs/composables/useTabsClasses.d.ts @@ -0,0 +1,9 @@ +import { type Ref } from 'vue'; +import type { TabsVariant } from '../types'; +export type UseTabsClassesProps = { + variant: TabsVariant; +}; +export declare function useTabsClasses(props: UseTabsClassesProps): { + divClasses: Ref; + ulClasses: Ref; +}; diff --git a/dist/components/FwbTabs/injection/config.d.ts b/dist/components/FwbTabs/injection/config.d.ts new file mode 100644 index 0000000..5fb5476 --- /dev/null +++ b/dist/components/FwbTabs/injection/config.d.ts @@ -0,0 +1,4 @@ +export declare const TAB_ACTIVATE_INJECTION_KEY = "flowbite-tab-activate-func-injection"; +export declare const TAB_ACTIVE_NAME_INJECTION_KEY = "flowbite-tab-active-name-injection"; +export declare const TAB_STYLE_INJECTION_KEY = "flowbite-tab-style-injection"; +export declare const TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY = "flowbite-tab-visibility-directive-injection"; diff --git a/dist/components/FwbTabs/types.d.ts b/dist/components/FwbTabs/types.d.ts new file mode 100644 index 0000000..06664d1 --- /dev/null +++ b/dist/components/FwbTabs/types.d.ts @@ -0,0 +1 @@ +export type TabsVariant = 'default' | 'underline' | 'pills'; diff --git a/dist/components/FwbTextarea/FwbTextarea.vue.d.ts b/dist/components/FwbTextarea/FwbTextarea.vue.d.ts new file mode 100644 index 0000000..96bfbfe --- /dev/null +++ b/dist/components/FwbTextarea/FwbTextarea.vue.d.ts @@ -0,0 +1,59 @@ +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + placeholder: { + type: import("vue").PropType; + default: string; + }; + modelValue: { + type: import("vue").PropType; + default: string; + }; + rows: { + type: import("vue").PropType; + default: number; + }; + custom: { + type: import("vue").PropType; + default: boolean; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly; + default: string; + }; + placeholder: { + type: import("vue").PropType; + default: string; + }; + modelValue: { + type: import("vue").PropType; + default: string; + }; + rows: { + type: import("vue").PropType; + default: number; + }; + custom: { + type: import("vue").PropType; + default: boolean; + }; +}>> & { + "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; +}, { + label: string; + placeholder: string; + modelValue: string; + rows: number; + custom: boolean; +}, {}>, { + footer?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbTextarea/composables/useTextareaClasses.d.ts b/dist/components/FwbTextarea/composables/useTextareaClasses.d.ts new file mode 100644 index 0000000..bcad03b --- /dev/null +++ b/dist/components/FwbTextarea/composables/useTextareaClasses.d.ts @@ -0,0 +1,6 @@ +export declare function useTextareaClasses(custom: boolean): { + textareaClasses: import("vue").ComputedRef; + labelClasses: import("vue").ComputedRef; + wrapperClasses: import("vue").ComputedRef<"" | "block w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">; + footerClasses: import("vue").ComputedRef; +}; diff --git a/dist/components/FwbTimeline/FwbTimeline.vue.d.ts b/dist/components/FwbTimeline/FwbTimeline.vue.d.ts new file mode 100644 index 0000000..e424567 --- /dev/null +++ b/dist/components/FwbTimeline/FwbTimeline.vue.d.ts @@ -0,0 +1,21 @@ +declare const _default: __VLS_WithTemplateSlots>, { + horizontal: boolean; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbTimeline/FwbTimelineBody.vue.d.ts b/dist/components/FwbTimeline/FwbTimelineBody.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbTimeline/FwbTimelineBody.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbTimeline/FwbTimelineContent.vue.d.ts b/dist/components/FwbTimeline/FwbTimelineContent.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbTimeline/FwbTimelineContent.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbTimeline/FwbTimelineItem.vue.d.ts b/dist/components/FwbTimeline/FwbTimelineItem.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbTimeline/FwbTimelineItem.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbTimeline/FwbTimelinePoint.vue.d.ts b/dist/components/FwbTimeline/FwbTimelinePoint.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbTimeline/FwbTimelinePoint.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbTimeline/FwbTimelineTime.vue.d.ts b/dist/components/FwbTimeline/FwbTimelineTime.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbTimeline/FwbTimelineTime.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbTimeline/FwbTimelineTitle.vue.d.ts b/dist/components/FwbTimeline/FwbTimelineTitle.vue.d.ts new file mode 100644 index 0000000..ac44b0f --- /dev/null +++ b/dist/components/FwbTimeline/FwbTimelineTitle.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbToast/FwbToast.vue.d.ts b/dist/components/FwbToast/FwbToast.vue.d.ts new file mode 100644 index 0000000..842bb28 --- /dev/null +++ b/dist/components/FwbToast/FwbToast.vue.d.ts @@ -0,0 +1,57 @@ +import { type PropType } from 'vue'; +import type { ToastAlign, ToastType } from './types'; +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + alignment: { + type: PropType; + default: string; + }; + closable: { + type: BooleanConstructor; + default: boolean; + }; + divide: { + type: BooleanConstructor; + default: boolean; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").PublicProps, Readonly; + default: string; + }; + alignment: { + type: PropType; + default: string; + }; + closable: { + type: BooleanConstructor; + default: boolean; + }; + divide: { + type: BooleanConstructor; + default: boolean; + }; +}>> & { + onClose?: ((...args: any[]) => any) | undefined; +}, { + type: ToastType; + closable: boolean; + alignment: ToastAlign; + divide: boolean; +}, {}>, { + icon?(_: { + class: { + 'ml-3': boolean; + }; + }): any; + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbToast/FwbToastProvider.vue.d.ts b/dist/components/FwbToast/FwbToastProvider.vue.d.ts new file mode 100644 index 0000000..4c8f0af --- /dev/null +++ b/dist/components/FwbToast/FwbToastProvider.vue.d.ts @@ -0,0 +1,26 @@ +import { type PropType } from 'vue'; +import type { ToastTransition } from './types'; +declare const _default: import("vue").DefineComponent<{ + transition: { + type: PropType; + default: string; + }; +}, { + toasts: import("vue").Ref<{ + time: number; + type: import("./types").ToastType; + text: string; + component?: import("vue").DefineComponent | undefined; + componentProps?: Record | undefined; + id: string; + }[]>; + removeToast: (id: string) => boolean; +}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; +}>>, { + transition: ToastTransition; +}, {}>; +export default _default; diff --git a/dist/components/FwbToast/composables/useToast.d.ts b/dist/components/FwbToast/composables/useToast.d.ts new file mode 100644 index 0000000..6a25d87 --- /dev/null +++ b/dist/components/FwbToast/composables/useToast.d.ts @@ -0,0 +1,2 @@ +import type { UseToastInjection } from '../types'; +export declare function useToast(): UseToastInjection; diff --git a/dist/components/FwbToast/composables/useToastClasses.d.ts b/dist/components/FwbToast/composables/useToastClasses.d.ts new file mode 100644 index 0000000..fd1c5e0 --- /dev/null +++ b/dist/components/FwbToast/composables/useToastClasses.d.ts @@ -0,0 +1,14 @@ +import { type Ref } from 'vue'; +import type { ToastAlign, ToastType } from '../types'; +type UseToastClassesReturns = { + typeClasses: Ref; + wrapperClasses: Ref; + contentClasses: Ref; +}; +type UseToastClassesProps = { + type: Ref; + divide: Ref; + alignment: Ref; +}; +export declare function useToastClasses(props: UseToastClassesProps): UseToastClassesReturns; +export {}; diff --git a/dist/components/FwbToast/injection/config.d.ts b/dist/components/FwbToast/injection/config.d.ts new file mode 100644 index 0000000..00a087a --- /dev/null +++ b/dist/components/FwbToast/injection/config.d.ts @@ -0,0 +1 @@ +export declare const FLOWBITE_TOAST_INJECTION_KEY = "flowbite-toast-injection-key"; diff --git a/dist/components/FwbToast/types.d.ts b/dist/components/FwbToast/types.d.ts new file mode 100644 index 0000000..148dcc0 --- /dev/null +++ b/dist/components/FwbToast/types.d.ts @@ -0,0 +1,19 @@ +import type { DefineComponent } from 'vue'; +export type ToastAlign = 'start' | 'center' | 'end'; +export type ToastType = 'success' | 'warning' | 'danger' | 'empty'; +export type ToastItem = { + time: number; + type: ToastType; + text: string; + component?: DefineComponent; + componentProps?: Record; +}; +export type ToastItemWithId = ToastItem & { + id: string; +}; +export type ToastTransition = 'slide-left' | 'slide-right' | 'fade' | 'slide-top' | 'slide-bottom'; +export type UseToastInjection = { + add: (toast: ToastItem) => string; + remove: (id: string) => boolean; + pop: () => string; +}; diff --git a/dist/components/FwbToggle/FwbToggle.vue.d.ts b/dist/components/FwbToggle/FwbToggle.vue.d.ts new file mode 100644 index 0000000..1baf4e1 --- /dev/null +++ b/dist/components/FwbToggle/FwbToggle.vue.d.ts @@ -0,0 +1,53 @@ +import type { InputSize } from '@/components/FwbInput/types'; +declare const _default: import("vue").DefineComponent<{ + label: { + type: import("vue").PropType; + default: string; + }; + color: { + type: import("vue").PropType; + default: string; + }; + disabled: { + type: import("vue").PropType; + default: boolean; + }; + size: { + type: import("vue").PropType; + default: string; + }; + modelValue: { + type: import("vue").PropType; + default: boolean; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly; + default: string; + }; + color: { + type: import("vue").PropType; + default: string; + }; + disabled: { + type: import("vue").PropType; + default: boolean; + }; + size: { + type: import("vue").PropType; + default: string; + }; + modelValue: { + type: import("vue").PropType; + default: boolean; + }; +}>> & { + "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; +}, { + label: string; + color: string; + disabled: boolean; + size: InputSize; + modelValue: boolean; +}, {}>; +export default _default; diff --git a/dist/components/FwbToggle/composables/useToggleClasses.d.ts b/dist/components/FwbToggle/composables/useToggleClasses.d.ts new file mode 100644 index 0000000..f7f6e34 --- /dev/null +++ b/dist/components/FwbToggle/composables/useToggleClasses.d.ts @@ -0,0 +1,13 @@ +import { type Ref } from 'vue'; +import type { InputSize } from '@/components/FwbInput/types'; +export type UseToggleClassesProps = { + size: Ref; + color: Ref; +}; +export declare function useToggleClasses(props: UseToggleClassesProps): { + labelClasses: import("vue").ComputedRef; + toggleSize: import("vue").ComputedRef; + toggleClasses: import("vue").ComputedRef; + toggleColor: import("vue").ComputedRef; + toggleBallClasses: import("vue").ComputedRef; +}; diff --git a/dist/components/FwbTooltip/FwbTooltip.vue.d.ts b/dist/components/FwbTooltip/FwbTooltip.vue.d.ts new file mode 100644 index 0000000..21457c6 --- /dev/null +++ b/dist/components/FwbTooltip/FwbTooltip.vue.d.ts @@ -0,0 +1,42 @@ +import type { TooltipPlacement, TooltipStyle, TooltipTrigger } from './types'; +import 'floating-vue/dist/style.css'; +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + placement: { + type: import("vue").PropType; + default: string; + }; + theme: { + type: import("vue").PropType; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; + placement: { + type: import("vue").PropType; + default: string; + }; + theme: { + type: import("vue").PropType; + default: string; + }; +}>>, { + trigger: TooltipTrigger; + placement: TooltipPlacement; + theme: TooltipStyle; +}, {}>, { + trigger?(_: {}): any; + content?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/FwbTooltip/types.d.ts b/dist/components/FwbTooltip/types.d.ts new file mode 100644 index 0000000..7a1f68c --- /dev/null +++ b/dist/components/FwbTooltip/types.d.ts @@ -0,0 +1,3 @@ +export type TooltipPlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end'; +export type TooltipStyle = 'dark' | 'light'; +export type TooltipTrigger = 'hover' | 'click'; diff --git a/dist/components/Typography/FwbA.vue.d.ts b/dist/components/Typography/FwbA.vue.d.ts new file mode 100644 index 0000000..8a77ade --- /dev/null +++ b/dist/components/Typography/FwbA.vue.d.ts @@ -0,0 +1,30 @@ +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + href: { + type: import("vue").PropType; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; + href: { + type: import("vue").PropType; + default: string; + }; +}>>, { + color: string; + href: string; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/Typography/FwbHeading.vue.d.ts b/dist/components/Typography/FwbHeading.vue.d.ts new file mode 100644 index 0000000..9cf946b --- /dev/null +++ b/dist/components/Typography/FwbHeading.vue.d.ts @@ -0,0 +1,39 @@ +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; + tag: { + type: import("vue").PropType<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">; + default: string; + }; + customSize: { + type: import("vue").PropType; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; + tag: { + type: import("vue").PropType<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">; + default: string; + }; + customSize: { + type: import("vue").PropType; + default: string; + }; +}>>, { + color: string; + tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; + customSize: string; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/Typography/FwbImg.vue.d.ts b/dist/components/Typography/FwbImg.vue.d.ts new file mode 100644 index 0000000..ab335e3 --- /dev/null +++ b/dist/components/Typography/FwbImg.vue.d.ts @@ -0,0 +1,68 @@ +declare const _default: import("vue").DefineComponent<{ + caption: { + type: import("vue").PropType; + default: string; + }; + alt: { + type: import("vue").PropType; + default: string; + }; + size: { + type: import("vue").PropType; + default: string; + }; + src: { + type: import("vue").PropType; + default: string; + }; + alignment: { + type: import("vue").PropType; + default: string; + }; + imgClass: { + type: import("vue").PropType; + default: string; + }; + captionClass: { + type: import("vue").PropType; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; + alt: { + type: import("vue").PropType; + default: string; + }; + size: { + type: import("vue").PropType; + default: string; + }; + src: { + type: import("vue").PropType; + default: string; + }; + alignment: { + type: import("vue").PropType; + default: string; + }; + imgClass: { + type: import("vue").PropType; + default: string; + }; + captionClass: { + type: import("vue").PropType; + default: string; + }; +}>>, { + caption: string; + alt: string; + size: string; + src: string; + alignment: string; + imgClass: string; + captionClass: string; +}, {}>; +export default _default; diff --git a/dist/components/Typography/FwbP.vue.d.ts b/dist/components/Typography/FwbP.vue.d.ts new file mode 100644 index 0000000..41f27d1 --- /dev/null +++ b/dist/components/Typography/FwbP.vue.d.ts @@ -0,0 +1,21 @@ +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; +}>>, { + class: string; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/utils/FlowbiteThemable/FlowbiteThemable.vue.d.ts b/dist/components/utils/FlowbiteThemable/FlowbiteThemable.vue.d.ts new file mode 100644 index 0000000..9fe5d66 --- /dev/null +++ b/dist/components/utils/FlowbiteThemable/FlowbiteThemable.vue.d.ts @@ -0,0 +1,22 @@ +import type { FlowbiteTheme } from './types'; +declare const _default: __VLS_WithTemplateSlots; + default: string; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + default: string; + }; +}>>, { + theme: FlowbiteTheme; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/utils/FlowbiteThemable/FlowbiteThemableChild.vue.d.ts b/dist/components/utils/FlowbiteThemable/FlowbiteThemableChild.vue.d.ts new file mode 100644 index 0000000..ba9269d --- /dev/null +++ b/dist/components/utils/FlowbiteThemable/FlowbiteThemableChild.vue.d.ts @@ -0,0 +1,40 @@ +import { type PropType } from 'vue'; +import type { FlowbiteTheme, ThemableChildrenApply } from '@/components/utils/FlowbiteThemable/types'; +declare const _default: __VLS_WithTemplateSlots; + required: true; + }; + tag: { + type: StringConstructor; + default: string; + }; + theme: { + type: PropType; + default: undefined; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + required: true; + }; + tag: { + type: StringConstructor; + default: string; + }; + theme: { + type: PropType; + default: undefined; + }; +}>>, { + tag: string; + theme: FlowbiteTheme; +}, {}>, { + default?(_: {}): any; +}>; +export default _default; +type __VLS_WithTemplateSlots = T & { + new (): { + $slots: S; + }; +}; diff --git a/dist/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.d.ts b/dist/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.d.ts new file mode 100644 index 0000000..484aa41 --- /dev/null +++ b/dist/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.d.ts @@ -0,0 +1,14 @@ +import { type Ref } from 'vue'; +import type { FlowbiteTheme } from '../types'; +type UseFlowbiteThemableReturns = { + backgroundClasses: Ref; + borderClasses: Ref; + color: Ref; + disabledClasses: Ref; + focusClasses: Ref; + hoverClasses: Ref; + isActive: Ref; + textClasses: Ref; +}; +export declare function useFlowbiteThemable(_theme?: FlowbiteTheme): UseFlowbiteThemableReturns; +export {}; diff --git a/dist/components/utils/FlowbiteThemable/composables/useFlowbiteThemableChildClasses.d.ts b/dist/components/utils/FlowbiteThemable/composables/useFlowbiteThemableChildClasses.d.ts new file mode 100644 index 0000000..d1dd960 --- /dev/null +++ b/dist/components/utils/FlowbiteThemable/composables/useFlowbiteThemableChildClasses.d.ts @@ -0,0 +1,12 @@ +import { type Ref } from 'vue'; +import type { ThemableChildrenApply } from '../types'; +import type { FlowbiteTheme } from '@/components/utils/FlowbiteThemable/types'; +type UseFlowbiteThemableChildReturns = { + classes: Ref; +}; +type UseFlowbiteThemableChildProps = { + apply: Ref; + theme?: Ref; +}; +export declare function useFlowbiteThemableChildClasses(props: UseFlowbiteThemableChildProps): UseFlowbiteThemableChildReturns; +export {}; diff --git a/dist/components/utils/FlowbiteThemable/injection/config.d.ts b/dist/components/utils/FlowbiteThemable/injection/config.d.ts new file mode 100644 index 0000000..2ef9ae2 --- /dev/null +++ b/dist/components/utils/FlowbiteThemable/injection/config.d.ts @@ -0,0 +1 @@ +export declare const FLOWBITE_THEMABLE_INJECTION_KEY = "flowbite-themable-injection-key"; diff --git a/dist/components/utils/FlowbiteThemable/types.d.ts b/dist/components/utils/FlowbiteThemable/types.d.ts new file mode 100644 index 0000000..af5fe97 --- /dev/null +++ b/dist/components/utils/FlowbiteThemable/types.d.ts @@ -0,0 +1,5 @@ +export type FlowbiteTheme = 'blue' | 'green' | 'red' | 'pink' | 'purple'; +export type FlowbiteThemablePayload = { + theme: FlowbiteTheme; +}; +export type ThemableChildrenApply = 'background' | 'disabled' | 'hover' | 'text' | 'border' | 'focus'; diff --git a/dist/components/utils/FwbSlotListener/FwbSlotListener.vue.d.ts b/dist/components/utils/FwbSlotListener/FwbSlotListener.vue.d.ts new file mode 100644 index 0000000..12a9abc --- /dev/null +++ b/dist/components/utils/FwbSlotListener/FwbSlotListener.vue.d.ts @@ -0,0 +1,28 @@ +import { type PropType } from 'vue'; +import type { SlotListenerTrigger } from '@/components/utils/FwbSlotListener/types'; +declare const _default: import("vue").DefineComponent<{ + trigger: { + type: PropType; + default: string; + }; +}, { + handleClick: (e: MouseEvent) => void; + handleBlur: (e: FocusEvent) => void; + handleFocus: (e: FocusEvent) => void; + handleMouseLeave: (e: MouseEvent) => void; + handleMouseEnter: (e: MouseEvent) => void; +}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "focus" | "blur" | "mouseenter" | "mouseleave")[], "click" | "focus" | "blur" | "mouseenter" | "mouseleave", import("vue").PublicProps, Readonly; + default: string; + }; +}>> & { + onFocus?: ((...args: any[]) => any) | undefined; + onBlur?: ((...args: any[]) => any) | undefined; + onClick?: ((...args: any[]) => any) | undefined; + onMouseenter?: ((...args: any[]) => any) | undefined; + onMouseleave?: ((...args: any[]) => any) | undefined; +}, { + trigger: SlotListenerTrigger; +}, {}>; +export default _default; diff --git a/dist/components/utils/FwbSlotListener/types.d.ts b/dist/components/utils/FwbSlotListener/types.d.ts new file mode 100644 index 0000000..08e1c29 --- /dev/null +++ b/dist/components/utils/FwbSlotListener/types.d.ts @@ -0,0 +1,8 @@ +export type SlotListenerTrigger = 'click' | 'focus' | 'hover'; +export type TriggerEventHandlers = { + onClick: (e: MouseEvent) => void; + onMouseenter: (e: MouseEvent) => void; + onMouseleave: (e: MouseEvent) => void; + onFocus: (e: FocusEvent) => void; + onBlur: (e: FocusEvent) => void; +}; diff --git a/dist/composables.d.ts b/dist/composables.d.ts new file mode 100644 index 0000000..2864772 --- /dev/null +++ b/dist/composables.d.ts @@ -0,0 +1,2 @@ +import { useToast } from '@/components/FwbToast/composables/useToast'; +export { useToast }; diff --git a/dist/composables/useClasses.d.ts b/dist/composables/useClasses.d.ts new file mode 100644 index 0000000..ba1307e --- /dev/null +++ b/dist/composables/useClasses.d.ts @@ -0,0 +1 @@ +export declare function useClasses(): void; diff --git a/dist/composables/useMergeClasses.d.ts b/dist/composables/useMergeClasses.d.ts new file mode 100644 index 0000000..38905a3 --- /dev/null +++ b/dist/composables/useMergeClasses.d.ts @@ -0,0 +1 @@ +export declare const useMergeClasses: (componentClasses: string | string[]) => string; diff --git a/dist/flowbite-vue.mjs b/dist/flowbite-vue.mjs new file mode 100644 index 0000000..9148af4 --- /dev/null +++ b/dist/flowbite-vue.mjs @@ -0,0 +1,8787 @@ +import { reactive as so, onBeforeMount as oo, onBeforeUnmount as no, defineComponent as C, openBlock as u, createElementBlock as g, unref as y, renderSlot as w, computed as c, ref as R, onMounted as He, normalizeClass as x, createCommentVNode as P, createElementVNode as f, useAttrs as ae, mergeProps as re, useSlots as De, toRefs as Y, toDisplayString as M, createBlock as H, resolveDynamicComponent as X, withCtx as j, resolveComponent as be, normalizeProps as Se, Fragment as q, renderList as Me, withModifiers as wt, isRef as Xt, getCurrentScope as ao, onScopeDispose as lo, getCurrentInstance as is, nextTick as Zt, watch as kt, watchEffect as io, createTextVNode as te, Comment as uo, toRef as nt, createVNode as ze, Transition as ds, normalizeStyle as et, pushScopeId as us, popScopeId as cs, withKeys as fs, provide as de, inject as Q, withDirectives as Te, vShow as co, guardReactiveProps as ps, h as pt, TransitionGroup as fo, withScopeId as po, vModelCheckbox as gs, vModelDynamic as go, vModelRadio as ho, vModelText as hs, vModelSelect as mo } from "vue"; +let ms = (e = 21) => crypto.getRandomValues(new Uint8Array(e)).reduce((t, r) => (r &= 63, r < 36 ? t += r.toString(36) : r < 62 ? t += (r - 26).toString(36).toUpperCase() : r > 62 ? t += "-" : t += "_", t), ""); +const Rt = so({}); +function ut(e, t) { + return oo(() => { + e && (Rt[e] = { + id: e, + flush: t?.flush ?? !1, + alwaysOpen: t?.alwaysOpen ?? !1, + openFirstItem: t?.openFirstItem ?? !0, + panels: {} + }); + }), no(() => { + e && delete Rt[e]; + }), { + accordionsStates: Rt + }; +} +const bo = ["data-accordion-id"], Qf = /* @__PURE__ */ C({ + __name: "FwbAccordion", + props: { + alwaysOpen: { type: Boolean, default: !1 }, + openFirstItem: { type: Boolean, default: !0 }, + flush: { type: Boolean, default: !1 } + }, + setup(e) { + const t = e, r = ms(); + return ut(r, { ...t }), (s, o) => (u(), g("div", { "data-accordion-id": y(r) }, [ + w(s.$slots, "default") + ], 8, bo)); + } +}); +function vo() { + for (var e = 0, t, r, s = ""; e < arguments.length; ) + (t = arguments[e++]) && (r = bs(t)) && (s && (s += " "), s += r); + return s; +} +function bs(e) { + if (typeof e == "string") + return e; + for (var t, r = "", s = 0; s < e.length; s++) + e[s] && (t = bs(e[s])) && (r && (r += " "), r += t); + return r; +} +var er = "-"; +function yo(e) { + var t = xo(e), r = e.conflictingClassGroups, s = e.conflictingClassGroupModifiers, o = s === void 0 ? {} : s; + function n(l) { + var i = l.split(er); + return i[0] === "" && i.length !== 1 && i.shift(), vs(i, t) || wo(l); + } + function a(l, i) { + var d = r[l] || []; + return i && o[l] ? [].concat(d, o[l]) : d; + } + return { + getClassGroupId: n, + getConflictingClassGroupIds: a + }; +} +function vs(e, t) { + if (e.length === 0) + return t.classGroupId; + var r = e[0], s = t.nextPart.get(r), o = s ? vs(e.slice(1), s) : void 0; + if (o) + return o; + if (t.validators.length !== 0) { + var n = e.join(er); + return t.validators.find(function(a) { + var l = a.validator; + return l(n); + })?.classGroupId; + } +} +var mr = /^\[(.+)\]$/; +function wo(e) { + if (mr.test(e)) { + var t = mr.exec(e)[1], r = t?.substring(0, t.indexOf(":")); + if (r) + return "arbitrary.." + r; + } +} +function xo(e) { + var t = e.theme, r = e.prefix, s = { + nextPart: /* @__PURE__ */ new Map(), + validators: [] + }, o = _o(Object.entries(e.classGroups), r); + return o.forEach(function(n) { + var a = n[0], l = n[1]; + Gt(l, s, a, t); + }), s; +} +function Gt(e, t, r, s) { + e.forEach(function(o) { + if (typeof o == "string") { + var n = o === "" ? t : br(t, o); + n.classGroupId = r; + return; + } + if (typeof o == "function") { + if (ko(o)) { + Gt(o(s), t, r, s); + return; + } + t.validators.push({ + validator: o, + classGroupId: r + }); + return; + } + Object.entries(o).forEach(function(a) { + var l = a[0], i = a[1]; + Gt(i, br(t, l), r, s); + }); + }); +} +function br(e, t) { + var r = e; + return t.split(er).forEach(function(s) { + r.nextPart.has(s) || r.nextPart.set(s, { + nextPart: /* @__PURE__ */ new Map(), + validators: [] + }), r = r.nextPart.get(s); + }), r; +} +function ko(e) { + return e.isThemeGetter; +} +function _o(e, t) { + return t ? e.map(function(r) { + var s = r[0], o = r[1], n = o.map(function(a) { + return typeof a == "string" ? t + a : typeof a == "object" ? Object.fromEntries(Object.entries(a).map(function(l) { + var i = l[0], d = l[1]; + return [t + i, d]; + })) : a; + }); + return [s, n]; + }) : e; +} +function Co(e) { + if (e < 1) + return { + get: function() { + }, + set: function() { + } + }; + var t = 0, r = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map(); + function o(n, a) { + r.set(n, a), t++, t > e && (t = 0, s = r, r = /* @__PURE__ */ new Map()); + } + return { + get: function(a) { + var l = r.get(a); + if (l !== void 0) + return l; + if ((l = s.get(a)) !== void 0) + return o(a, l), l; + }, + set: function(a, l) { + r.has(a) ? r.set(a, l) : o(a, l); + } + }; +} +var ys = "!"; +function $o(e) { + var t = e.separator || ":", r = t.length === 1, s = t[0], o = t.length; + return function(a) { + for (var l = [], i = 0, d = 0, p, m = 0; m < a.length; m++) { + var v = a[m]; + if (i === 0) { + if (v === s && (r || a.slice(m, m + o) === t)) { + l.push(a.slice(d, m)), d = m + o; + continue; + } + if (v === "/") { + p = m; + continue; + } + } + v === "[" ? i++ : v === "]" && i--; + } + var h = l.length === 0 ? a : a.substring(d), b = h.startsWith(ys), k = b ? h.substring(1) : h, $ = p && p > d ? p - d : void 0; + return { + modifiers: l, + hasImportantModifier: b, + baseClassName: k, + maybePostfixModifierPosition: $ + }; + }; +} +function So(e) { + if (e.length <= 1) + return e; + var t = [], r = []; + return e.forEach(function(s) { + var o = s[0] === "["; + o ? (t.push.apply(t, r.sort().concat([s])), r = []) : r.push(s); + }), t.push.apply(t, r.sort()), t; +} +function To(e) { + return { + cache: Co(e.cacheSize), + splitModifiers: $o(e), + ...yo(e) + }; +} +var Po = /\s+/; +function Fo(e, t) { + var r = t.splitModifiers, s = t.getClassGroupId, o = t.getConflictingClassGroupIds, n = /* @__PURE__ */ new Set(); + return e.trim().split(Po).map(function(a) { + var l = r(a), i = l.modifiers, d = l.hasImportantModifier, p = l.baseClassName, m = l.maybePostfixModifierPosition, v = s(m ? p.substring(0, m) : p), h = !!m; + if (!v) { + if (!m) + return { + isTailwindClass: !1, + originalClassName: a + }; + if (v = s(p), !v) + return { + isTailwindClass: !1, + originalClassName: a + }; + h = !1; + } + var b = So(i).join(":"), k = d ? b + ys : b; + return { + isTailwindClass: !0, + modifierId: k, + classGroupId: v, + originalClassName: a, + hasPostfixModifier: h + }; + }).reverse().filter(function(a) { + if (!a.isTailwindClass) + return !0; + var l = a.modifierId, i = a.classGroupId, d = a.hasPostfixModifier, p = l + i; + return n.has(p) ? !1 : (n.add(p), o(i, d).forEach(function(m) { + return n.add(l + m); + }), !0); + }).reverse().map(function(a) { + return a.originalClassName; + }).join(" "); +} +function zo() { + for (var e = arguments.length, t = new Array(e), r = 0; r < e; r++) + t[r] = arguments[r]; + var s, o, n, a = l; + function l(d) { + var p = t[0], m = t.slice(1), v = m.reduce(function(h, b) { + return b(h); + }, p()); + return s = To(v), o = s.cache.get, n = s.cache.set, a = i, i(d); + } + function i(d) { + var p = o(d); + if (p) + return p; + var m = Fo(d, s); + return n(d, m), m; + } + return function() { + return a(vo.apply(null, arguments)); + }; +} +function V(e) { + var t = function(s) { + return s[e] || []; + }; + return t.isThemeGetter = !0, t; +} +var ws = /^\[(?:([a-z-]+):)?(.+)\]$/i, Ao = /^\d+\/\d+$/, Io = /* @__PURE__ */ new Set(["px", "full", "screen"]), Mo = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, Oo = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, Bo = /^-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/; +function le(e) { + return Ae(e) || Io.has(e) || Ao.test(e) || Ut(e); +} +function Ut(e) { + return Be(e, "length", jo); +} +function Lo(e) { + return Be(e, "size", xs); +} +function Eo(e) { + return Be(e, "position", xs); +} +function No(e) { + return Be(e, "url", Ho); +} +function gt(e) { + return Be(e, "number", Ae); +} +function Ae(e) { + return !Number.isNaN(Number(e)); +} +function Ro(e) { + return e.endsWith("%") && Ae(e.slice(0, -1)); +} +function Je(e) { + return vr(e) || Be(e, "number", vr); +} +function I(e) { + return ws.test(e); +} +function Ke() { + return !0; +} +function ve(e) { + return Mo.test(e); +} +function Vo(e) { + return Be(e, "", Do); +} +function Be(e, t, r) { + var s = ws.exec(e); + return s ? s[1] ? s[1] === t : r(s[2]) : !1; +} +function jo(e) { + return Oo.test(e); +} +function xs() { + return !1; +} +function Ho(e) { + return e.startsWith("url("); +} +function vr(e) { + return Number.isInteger(Number(e)); +} +function Do(e) { + return Bo.test(e); +} +function Wo() { + var e = V("colors"), t = V("spacing"), r = V("blur"), s = V("brightness"), o = V("borderColor"), n = V("borderRadius"), a = V("borderSpacing"), l = V("borderWidth"), i = V("contrast"), d = V("grayscale"), p = V("hueRotate"), m = V("invert"), v = V("gap"), h = V("gradientColorStops"), b = V("gradientColorStopPositions"), k = V("inset"), $ = V("margin"), S = V("opacity"), T = V("padding"), A = V("saturate"), L = V("scale"), _ = V("sepia"), E = V("skew"), F = V("space"), N = V("translate"), D = function() { + return ["auto", "contain", "none"]; + }, G = function() { + return ["auto", "hidden", "clip", "visible", "scroll"]; + }, J = function() { + return ["auto", I, t]; + }, z = function() { + return [I, t]; + }, ce = function() { + return ["", le]; + }, U = function() { + return ["auto", Ae, I]; + }, Z = function() { + return ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"]; + }, K = function() { + return ["solid", "dashed", "dotted", "double", "none"]; + }, se = function() { + return ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity", "plus-lighter"]; + }, Ue = function() { + return ["start", "end", "center", "between", "around", "evenly", "stretch"]; + }, qe = function() { + return ["", "0", I]; + }, hr = function() { + return ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"]; + }, Ye = function() { + return [Ae, gt]; + }, ft = function() { + return [Ae, I]; + }; + return { + cacheSize: 500, + theme: { + colors: [Ke], + spacing: [le], + blur: ["none", "", ve, I], + brightness: Ye(), + borderColor: [e], + borderRadius: ["none", "", "full", ve, I], + borderSpacing: z(), + borderWidth: ce(), + contrast: Ye(), + grayscale: qe(), + hueRotate: ft(), + invert: qe(), + gap: z(), + gradientColorStops: [e], + gradientColorStopPositions: [Ro, Ut], + inset: J(), + margin: J(), + opacity: Ye(), + padding: z(), + saturate: Ye(), + scale: Ye(), + sepia: qe(), + skew: ft(), + space: z(), + translate: z() + }, + classGroups: { + // Layout + /** + * Aspect Ratio + * @see https://tailwindcss.com/docs/aspect-ratio + */ + aspect: [{ + aspect: ["auto", "square", "video", I] + }], + /** + * Container + * @see https://tailwindcss.com/docs/container + */ + container: ["container"], + /** + * Columns + * @see https://tailwindcss.com/docs/columns + */ + columns: [{ + columns: [ve] + }], + /** + * Break After + * @see https://tailwindcss.com/docs/break-after + */ + "break-after": [{ + "break-after": hr() + }], + /** + * Break Before + * @see https://tailwindcss.com/docs/break-before + */ + "break-before": [{ + "break-before": hr() + }], + /** + * Break Inside + * @see https://tailwindcss.com/docs/break-inside + */ + "break-inside": [{ + "break-inside": ["auto", "avoid", "avoid-page", "avoid-column"] + }], + /** + * Box Decoration Break + * @see https://tailwindcss.com/docs/box-decoration-break + */ + "box-decoration": [{ + "box-decoration": ["slice", "clone"] + }], + /** + * Box Sizing + * @see https://tailwindcss.com/docs/box-sizing + */ + box: [{ + box: ["border", "content"] + }], + /** + * Display + * @see https://tailwindcss.com/docs/display + */ + display: ["block", "inline-block", "inline", "flex", "inline-flex", "table", "inline-table", "table-caption", "table-cell", "table-column", "table-column-group", "table-footer-group", "table-header-group", "table-row-group", "table-row", "flow-root", "grid", "inline-grid", "contents", "list-item", "hidden"], + /** + * Floats + * @see https://tailwindcss.com/docs/float + */ + float: [{ + float: ["right", "left", "none"] + }], + /** + * Clear + * @see https://tailwindcss.com/docs/clear + */ + clear: [{ + clear: ["left", "right", "both", "none"] + }], + /** + * Isolation + * @see https://tailwindcss.com/docs/isolation + */ + isolation: ["isolate", "isolation-auto"], + /** + * Object Fit + * @see https://tailwindcss.com/docs/object-fit + */ + "object-fit": [{ + object: ["contain", "cover", "fill", "none", "scale-down"] + }], + /** + * Object Position + * @see https://tailwindcss.com/docs/object-position + */ + "object-position": [{ + object: [].concat(Z(), [I]) + }], + /** + * Overflow + * @see https://tailwindcss.com/docs/overflow + */ + overflow: [{ + overflow: G() + }], + /** + * Overflow X + * @see https://tailwindcss.com/docs/overflow + */ + "overflow-x": [{ + "overflow-x": G() + }], + /** + * Overflow Y + * @see https://tailwindcss.com/docs/overflow + */ + "overflow-y": [{ + "overflow-y": G() + }], + /** + * Overscroll Behavior + * @see https://tailwindcss.com/docs/overscroll-behavior + */ + overscroll: [{ + overscroll: D() + }], + /** + * Overscroll Behavior X + * @see https://tailwindcss.com/docs/overscroll-behavior + */ + "overscroll-x": [{ + "overscroll-x": D() + }], + /** + * Overscroll Behavior Y + * @see https://tailwindcss.com/docs/overscroll-behavior + */ + "overscroll-y": [{ + "overscroll-y": D() + }], + /** + * Position + * @see https://tailwindcss.com/docs/position + */ + position: ["static", "fixed", "absolute", "relative", "sticky"], + /** + * Top / Right / Bottom / Left + * @see https://tailwindcss.com/docs/top-right-bottom-left + */ + inset: [{ + inset: [k] + }], + /** + * Right / Left + * @see https://tailwindcss.com/docs/top-right-bottom-left + */ + "inset-x": [{ + "inset-x": [k] + }], + /** + * Top / Bottom + * @see https://tailwindcss.com/docs/top-right-bottom-left + */ + "inset-y": [{ + "inset-y": [k] + }], + /** + * Start + * @see https://tailwindcss.com/docs/top-right-bottom-left + */ + start: [{ + start: [k] + }], + /** + * End + * @see https://tailwindcss.com/docs/top-right-bottom-left + */ + end: [{ + end: [k] + }], + /** + * Top + * @see https://tailwindcss.com/docs/top-right-bottom-left + */ + top: [{ + top: [k] + }], + /** + * Right + * @see https://tailwindcss.com/docs/top-right-bottom-left + */ + right: [{ + right: [k] + }], + /** + * Bottom + * @see https://tailwindcss.com/docs/top-right-bottom-left + */ + bottom: [{ + bottom: [k] + }], + /** + * Left + * @see https://tailwindcss.com/docs/top-right-bottom-left + */ + left: [{ + left: [k] + }], + /** + * Visibility + * @see https://tailwindcss.com/docs/visibility + */ + visibility: ["visible", "invisible", "collapse"], + /** + * Z-Index + * @see https://tailwindcss.com/docs/z-index + */ + z: [{ + z: ["auto", Je] + }], + // Flexbox and Grid + /** + * Flex Basis + * @see https://tailwindcss.com/docs/flex-basis + */ + basis: [{ + basis: J() + }], + /** + * Flex Direction + * @see https://tailwindcss.com/docs/flex-direction + */ + "flex-direction": [{ + flex: ["row", "row-reverse", "col", "col-reverse"] + }], + /** + * Flex Wrap + * @see https://tailwindcss.com/docs/flex-wrap + */ + "flex-wrap": [{ + flex: ["wrap", "wrap-reverse", "nowrap"] + }], + /** + * Flex + * @see https://tailwindcss.com/docs/flex + */ + flex: [{ + flex: ["1", "auto", "initial", "none", I] + }], + /** + * Flex Grow + * @see https://tailwindcss.com/docs/flex-grow + */ + grow: [{ + grow: qe() + }], + /** + * Flex Shrink + * @see https://tailwindcss.com/docs/flex-shrink + */ + shrink: [{ + shrink: qe() + }], + /** + * Order + * @see https://tailwindcss.com/docs/order + */ + order: [{ + order: ["first", "last", "none", Je] + }], + /** + * Grid Template Columns + * @see https://tailwindcss.com/docs/grid-template-columns + */ + "grid-cols": [{ + "grid-cols": [Ke] + }], + /** + * Grid Column Start / End + * @see https://tailwindcss.com/docs/grid-column + */ + "col-start-end": [{ + col: ["auto", { + span: ["full", Je] + }, I] + }], + /** + * Grid Column Start + * @see https://tailwindcss.com/docs/grid-column + */ + "col-start": [{ + "col-start": U() + }], + /** + * Grid Column End + * @see https://tailwindcss.com/docs/grid-column + */ + "col-end": [{ + "col-end": U() + }], + /** + * Grid Template Rows + * @see https://tailwindcss.com/docs/grid-template-rows + */ + "grid-rows": [{ + "grid-rows": [Ke] + }], + /** + * Grid Row Start / End + * @see https://tailwindcss.com/docs/grid-row + */ + "row-start-end": [{ + row: ["auto", { + span: [Je] + }, I] + }], + /** + * Grid Row Start + * @see https://tailwindcss.com/docs/grid-row + */ + "row-start": [{ + "row-start": U() + }], + /** + * Grid Row End + * @see https://tailwindcss.com/docs/grid-row + */ + "row-end": [{ + "row-end": U() + }], + /** + * Grid Auto Flow + * @see https://tailwindcss.com/docs/grid-auto-flow + */ + "grid-flow": [{ + "grid-flow": ["row", "col", "dense", "row-dense", "col-dense"] + }], + /** + * Grid Auto Columns + * @see https://tailwindcss.com/docs/grid-auto-columns + */ + "auto-cols": [{ + "auto-cols": ["auto", "min", "max", "fr", I] + }], + /** + * Grid Auto Rows + * @see https://tailwindcss.com/docs/grid-auto-rows + */ + "auto-rows": [{ + "auto-rows": ["auto", "min", "max", "fr", I] + }], + /** + * Gap + * @see https://tailwindcss.com/docs/gap + */ + gap: [{ + gap: [v] + }], + /** + * Gap X + * @see https://tailwindcss.com/docs/gap + */ + "gap-x": [{ + "gap-x": [v] + }], + /** + * Gap Y + * @see https://tailwindcss.com/docs/gap + */ + "gap-y": [{ + "gap-y": [v] + }], + /** + * Justify Content + * @see https://tailwindcss.com/docs/justify-content + */ + "justify-content": [{ + justify: ["normal"].concat(Ue()) + }], + /** + * Justify Items + * @see https://tailwindcss.com/docs/justify-items + */ + "justify-items": [{ + "justify-items": ["start", "end", "center", "stretch"] + }], + /** + * Justify Self + * @see https://tailwindcss.com/docs/justify-self + */ + "justify-self": [{ + "justify-self": ["auto", "start", "end", "center", "stretch"] + }], + /** + * Align Content + * @see https://tailwindcss.com/docs/align-content + */ + "align-content": [{ + content: ["normal"].concat(Ue(), ["baseline"]) + }], + /** + * Align Items + * @see https://tailwindcss.com/docs/align-items + */ + "align-items": [{ + items: ["start", "end", "center", "baseline", "stretch"] + }], + /** + * Align Self + * @see https://tailwindcss.com/docs/align-self + */ + "align-self": [{ + self: ["auto", "start", "end", "center", "stretch", "baseline"] + }], + /** + * Place Content + * @see https://tailwindcss.com/docs/place-content + */ + "place-content": [{ + "place-content": [].concat(Ue(), ["baseline"]) + }], + /** + * Place Items + * @see https://tailwindcss.com/docs/place-items + */ + "place-items": [{ + "place-items": ["start", "end", "center", "baseline", "stretch"] + }], + /** + * Place Self + * @see https://tailwindcss.com/docs/place-self + */ + "place-self": [{ + "place-self": ["auto", "start", "end", "center", "stretch"] + }], + // Spacing + /** + * Padding + * @see https://tailwindcss.com/docs/padding + */ + p: [{ + p: [T] + }], + /** + * Padding X + * @see https://tailwindcss.com/docs/padding + */ + px: [{ + px: [T] + }], + /** + * Padding Y + * @see https://tailwindcss.com/docs/padding + */ + py: [{ + py: [T] + }], + /** + * Padding Start + * @see https://tailwindcss.com/docs/padding + */ + ps: [{ + ps: [T] + }], + /** + * Padding End + * @see https://tailwindcss.com/docs/padding + */ + pe: [{ + pe: [T] + }], + /** + * Padding Top + * @see https://tailwindcss.com/docs/padding + */ + pt: [{ + pt: [T] + }], + /** + * Padding Right + * @see https://tailwindcss.com/docs/padding + */ + pr: [{ + pr: [T] + }], + /** + * Padding Bottom + * @see https://tailwindcss.com/docs/padding + */ + pb: [{ + pb: [T] + }], + /** + * Padding Left + * @see https://tailwindcss.com/docs/padding + */ + pl: [{ + pl: [T] + }], + /** + * Margin + * @see https://tailwindcss.com/docs/margin + */ + m: [{ + m: [$] + }], + /** + * Margin X + * @see https://tailwindcss.com/docs/margin + */ + mx: [{ + mx: [$] + }], + /** + * Margin Y + * @see https://tailwindcss.com/docs/margin + */ + my: [{ + my: [$] + }], + /** + * Margin Start + * @see https://tailwindcss.com/docs/margin + */ + ms: [{ + ms: [$] + }], + /** + * Margin End + * @see https://tailwindcss.com/docs/margin + */ + me: [{ + me: [$] + }], + /** + * Margin Top + * @see https://tailwindcss.com/docs/margin + */ + mt: [{ + mt: [$] + }], + /** + * Margin Right + * @see https://tailwindcss.com/docs/margin + */ + mr: [{ + mr: [$] + }], + /** + * Margin Bottom + * @see https://tailwindcss.com/docs/margin + */ + mb: [{ + mb: [$] + }], + /** + * Margin Left + * @see https://tailwindcss.com/docs/margin + */ + ml: [{ + ml: [$] + }], + /** + * Space Between X + * @see https://tailwindcss.com/docs/space + */ + "space-x": [{ + "space-x": [F] + }], + /** + * Space Between X Reverse + * @see https://tailwindcss.com/docs/space + */ + "space-x-reverse": ["space-x-reverse"], + /** + * Space Between Y + * @see https://tailwindcss.com/docs/space + */ + "space-y": [{ + "space-y": [F] + }], + /** + * Space Between Y Reverse + * @see https://tailwindcss.com/docs/space + */ + "space-y-reverse": ["space-y-reverse"], + // Sizing + /** + * Width + * @see https://tailwindcss.com/docs/width + */ + w: [{ + w: ["auto", "min", "max", "fit", I, t] + }], + /** + * Min-Width + * @see https://tailwindcss.com/docs/min-width + */ + "min-w": [{ + "min-w": ["min", "max", "fit", I, le] + }], + /** + * Max-Width + * @see https://tailwindcss.com/docs/max-width + */ + "max-w": [{ + "max-w": ["0", "none", "full", "min", "max", "fit", "prose", { + screen: [ve] + }, ve, I] + }], + /** + * Height + * @see https://tailwindcss.com/docs/height + */ + h: [{ + h: [I, t, "auto", "min", "max", "fit"] + }], + /** + * Min-Height + * @see https://tailwindcss.com/docs/min-height + */ + "min-h": [{ + "min-h": ["min", "max", "fit", I, le] + }], + /** + * Max-Height + * @see https://tailwindcss.com/docs/max-height + */ + "max-h": [{ + "max-h": [I, t, "min", "max", "fit"] + }], + // Typography + /** + * Font Size + * @see https://tailwindcss.com/docs/font-size + */ + "font-size": [{ + text: ["base", ve, Ut] + }], + /** + * Font Smoothing + * @see https://tailwindcss.com/docs/font-smoothing + */ + "font-smoothing": ["antialiased", "subpixel-antialiased"], + /** + * Font Style + * @see https://tailwindcss.com/docs/font-style + */ + "font-style": ["italic", "not-italic"], + /** + * Font Weight + * @see https://tailwindcss.com/docs/font-weight + */ + "font-weight": [{ + font: ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", gt] + }], + /** + * Font Family + * @see https://tailwindcss.com/docs/font-family + */ + "font-family": [{ + font: [Ke] + }], + /** + * Font Variant Numeric + * @see https://tailwindcss.com/docs/font-variant-numeric + */ + "fvn-normal": ["normal-nums"], + /** + * Font Variant Numeric + * @see https://tailwindcss.com/docs/font-variant-numeric + */ + "fvn-ordinal": ["ordinal"], + /** + * Font Variant Numeric + * @see https://tailwindcss.com/docs/font-variant-numeric + */ + "fvn-slashed-zero": ["slashed-zero"], + /** + * Font Variant Numeric + * @see https://tailwindcss.com/docs/font-variant-numeric + */ + "fvn-figure": ["lining-nums", "oldstyle-nums"], + /** + * Font Variant Numeric + * @see https://tailwindcss.com/docs/font-variant-numeric + */ + "fvn-spacing": ["proportional-nums", "tabular-nums"], + /** + * Font Variant Numeric + * @see https://tailwindcss.com/docs/font-variant-numeric + */ + "fvn-fraction": ["diagonal-fractions", "stacked-fractons"], + /** + * Letter Spacing + * @see https://tailwindcss.com/docs/letter-spacing + */ + tracking: [{ + tracking: ["tighter", "tight", "normal", "wide", "wider", "widest", I] + }], + /** + * Line Clamp + * @see https://tailwindcss.com/docs/line-clamp + */ + "line-clamp": [{ + "line-clamp": ["none", Ae, gt] + }], + /** + * Line Height + * @see https://tailwindcss.com/docs/line-height + */ + leading: [{ + leading: ["none", "tight", "snug", "normal", "relaxed", "loose", I, le] + }], + /** + * List Style Image + * @see https://tailwindcss.com/docs/list-style-image + */ + "list-image": [{ + "list-image": ["none", I] + }], + /** + * List Style Type + * @see https://tailwindcss.com/docs/list-style-type + */ + "list-style-type": [{ + list: ["none", "disc", "decimal", I] + }], + /** + * List Style Position + * @see https://tailwindcss.com/docs/list-style-position + */ + "list-style-position": [{ + list: ["inside", "outside"] + }], + /** + * Placeholder Color + * @deprecated since Tailwind CSS v3.0.0 + * @see https://tailwindcss.com/docs/placeholder-color + */ + "placeholder-color": [{ + placeholder: [e] + }], + /** + * Placeholder Opacity + * @see https://tailwindcss.com/docs/placeholder-opacity + */ + "placeholder-opacity": [{ + "placeholder-opacity": [S] + }], + /** + * Text Alignment + * @see https://tailwindcss.com/docs/text-align + */ + "text-alignment": [{ + text: ["left", "center", "right", "justify", "start", "end"] + }], + /** + * Text Color + * @see https://tailwindcss.com/docs/text-color + */ + "text-color": [{ + text: [e] + }], + /** + * Text Opacity + * @see https://tailwindcss.com/docs/text-opacity + */ + "text-opacity": [{ + "text-opacity": [S] + }], + /** + * Text Decoration + * @see https://tailwindcss.com/docs/text-decoration + */ + "text-decoration": ["underline", "overline", "line-through", "no-underline"], + /** + * Text Decoration Style + * @see https://tailwindcss.com/docs/text-decoration-style + */ + "text-decoration-style": [{ + decoration: [].concat(K(), ["wavy"]) + }], + /** + * Text Decoration Thickness + * @see https://tailwindcss.com/docs/text-decoration-thickness + */ + "text-decoration-thickness": [{ + decoration: ["auto", "from-font", le] + }], + /** + * Text Underline Offset + * @see https://tailwindcss.com/docs/text-underline-offset + */ + "underline-offset": [{ + "underline-offset": ["auto", I, le] + }], + /** + * Text Decoration Color + * @see https://tailwindcss.com/docs/text-decoration-color + */ + "text-decoration-color": [{ + decoration: [e] + }], + /** + * Text Transform + * @see https://tailwindcss.com/docs/text-transform + */ + "text-transform": ["uppercase", "lowercase", "capitalize", "normal-case"], + /** + * Text Overflow + * @see https://tailwindcss.com/docs/text-overflow + */ + "text-overflow": ["truncate", "text-ellipsis", "text-clip"], + /** + * Text Indent + * @see https://tailwindcss.com/docs/text-indent + */ + indent: [{ + indent: z() + }], + /** + * Vertical Alignment + * @see https://tailwindcss.com/docs/vertical-align + */ + "vertical-align": [{ + align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", I] + }], + /** + * Whitespace + * @see https://tailwindcss.com/docs/whitespace + */ + whitespace: [{ + whitespace: ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces"] + }], + /** + * Word Break + * @see https://tailwindcss.com/docs/word-break + */ + break: [{ + break: ["normal", "words", "all", "keep"] + }], + /** + * Hyphens + * @see https://tailwindcss.com/docs/hyphens + */ + hyphens: [{ + hyphens: ["none", "manual", "auto"] + }], + /** + * Content + * @see https://tailwindcss.com/docs/content + */ + content: [{ + content: ["none", I] + }], + // Backgrounds + /** + * Background Attachment + * @see https://tailwindcss.com/docs/background-attachment + */ + "bg-attachment": [{ + bg: ["fixed", "local", "scroll"] + }], + /** + * Background Clip + * @see https://tailwindcss.com/docs/background-clip + */ + "bg-clip": [{ + "bg-clip": ["border", "padding", "content", "text"] + }], + /** + * Background Opacity + * @deprecated since Tailwind CSS v3.0.0 + * @see https://tailwindcss.com/docs/background-opacity + */ + "bg-opacity": [{ + "bg-opacity": [S] + }], + /** + * Background Origin + * @see https://tailwindcss.com/docs/background-origin + */ + "bg-origin": [{ + "bg-origin": ["border", "padding", "content"] + }], + /** + * Background Position + * @see https://tailwindcss.com/docs/background-position + */ + "bg-position": [{ + bg: [].concat(Z(), [Eo]) + }], + /** + * Background Repeat + * @see https://tailwindcss.com/docs/background-repeat + */ + "bg-repeat": [{ + bg: ["no-repeat", { + repeat: ["", "x", "y", "round", "space"] + }] + }], + /** + * Background Size + * @see https://tailwindcss.com/docs/background-size + */ + "bg-size": [{ + bg: ["auto", "cover", "contain", Lo] + }], + /** + * Background Image + * @see https://tailwindcss.com/docs/background-image + */ + "bg-image": [{ + bg: ["none", { + "gradient-to": ["t", "tr", "r", "br", "b", "bl", "l", "tl"] + }, No] + }], + /** + * Background Color + * @see https://tailwindcss.com/docs/background-color + */ + "bg-color": [{ + bg: [e] + }], + /** + * Gradient Color Stops From Position + * @see https://tailwindcss.com/docs/gradient-color-stops + */ + "gradient-from-pos": [{ + from: [b] + }], + /** + * Gradient Color Stops Via Position + * @see https://tailwindcss.com/docs/gradient-color-stops + */ + "gradient-via-pos": [{ + via: [b] + }], + /** + * Gradient Color Stops To Position + * @see https://tailwindcss.com/docs/gradient-color-stops + */ + "gradient-to-pos": [{ + to: [b] + }], + /** + * Gradient Color Stops From + * @see https://tailwindcss.com/docs/gradient-color-stops + */ + "gradient-from": [{ + from: [h] + }], + /** + * Gradient Color Stops Via + * @see https://tailwindcss.com/docs/gradient-color-stops + */ + "gradient-via": [{ + via: [h] + }], + /** + * Gradient Color Stops To + * @see https://tailwindcss.com/docs/gradient-color-stops + */ + "gradient-to": [{ + to: [h] + }], + // Borders + /** + * Border Radius + * @see https://tailwindcss.com/docs/border-radius + */ + rounded: [{ + rounded: [n] + }], + /** + * Border Radius Start + * @see https://tailwindcss.com/docs/border-radius + */ + "rounded-s": [{ + "rounded-s": [n] + }], + /** + * Border Radius End + * @see https://tailwindcss.com/docs/border-radius + */ + "rounded-e": [{ + "rounded-e": [n] + }], + /** + * Border Radius Top + * @see https://tailwindcss.com/docs/border-radius + */ + "rounded-t": [{ + "rounded-t": [n] + }], + /** + * Border Radius Right + * @see https://tailwindcss.com/docs/border-radius + */ + "rounded-r": [{ + "rounded-r": [n] + }], + /** + * Border Radius Bottom + * @see https://tailwindcss.com/docs/border-radius + */ + "rounded-b": [{ + "rounded-b": [n] + }], + /** + * Border Radius Left + * @see https://tailwindcss.com/docs/border-radius + */ + "rounded-l": [{ + "rounded-l": [n] + }], + /** + * Border Radius Start Start + * @see https://tailwindcss.com/docs/border-radius + */ + "rounded-ss": [{ + "rounded-ss": [n] + }], + /** + * Border Radius Start End + * @see https://tailwindcss.com/docs/border-radius + */ + "rounded-se": [{ + "rounded-se": [n] + }], + /** + * Border Radius End End + * @see https://tailwindcss.com/docs/border-radius + */ + "rounded-ee": [{ + "rounded-ee": [n] + }], + /** + * Border Radius End Start + * @see https://tailwindcss.com/docs/border-radius + */ + "rounded-es": [{ + "rounded-es": [n] + }], + /** + * Border Radius Top Left + * @see https://tailwindcss.com/docs/border-radius + */ + "rounded-tl": [{ + "rounded-tl": [n] + }], + /** + * Border Radius Top Right + * @see https://tailwindcss.com/docs/border-radius + */ + "rounded-tr": [{ + "rounded-tr": [n] + }], + /** + * Border Radius Bottom Right + * @see https://tailwindcss.com/docs/border-radius + */ + "rounded-br": [{ + "rounded-br": [n] + }], + /** + * Border Radius Bottom Left + * @see https://tailwindcss.com/docs/border-radius + */ + "rounded-bl": [{ + "rounded-bl": [n] + }], + /** + * Border Width + * @see https://tailwindcss.com/docs/border-width + */ + "border-w": [{ + border: [l] + }], + /** + * Border Width X + * @see https://tailwindcss.com/docs/border-width + */ + "border-w-x": [{ + "border-x": [l] + }], + /** + * Border Width Y + * @see https://tailwindcss.com/docs/border-width + */ + "border-w-y": [{ + "border-y": [l] + }], + /** + * Border Width Start + * @see https://tailwindcss.com/docs/border-width + */ + "border-w-s": [{ + "border-s": [l] + }], + /** + * Border Width End + * @see https://tailwindcss.com/docs/border-width + */ + "border-w-e": [{ + "border-e": [l] + }], + /** + * Border Width Top + * @see https://tailwindcss.com/docs/border-width + */ + "border-w-t": [{ + "border-t": [l] + }], + /** + * Border Width Right + * @see https://tailwindcss.com/docs/border-width + */ + "border-w-r": [{ + "border-r": [l] + }], + /** + * Border Width Bottom + * @see https://tailwindcss.com/docs/border-width + */ + "border-w-b": [{ + "border-b": [l] + }], + /** + * Border Width Left + * @see https://tailwindcss.com/docs/border-width + */ + "border-w-l": [{ + "border-l": [l] + }], + /** + * Border Opacity + * @see https://tailwindcss.com/docs/border-opacity + */ + "border-opacity": [{ + "border-opacity": [S] + }], + /** + * Border Style + * @see https://tailwindcss.com/docs/border-style + */ + "border-style": [{ + border: [].concat(K(), ["hidden"]) + }], + /** + * Divide Width X + * @see https://tailwindcss.com/docs/divide-width + */ + "divide-x": [{ + "divide-x": [l] + }], + /** + * Divide Width X Reverse + * @see https://tailwindcss.com/docs/divide-width + */ + "divide-x-reverse": ["divide-x-reverse"], + /** + * Divide Width Y + * @see https://tailwindcss.com/docs/divide-width + */ + "divide-y": [{ + "divide-y": [l] + }], + /** + * Divide Width Y Reverse + * @see https://tailwindcss.com/docs/divide-width + */ + "divide-y-reverse": ["divide-y-reverse"], + /** + * Divide Opacity + * @see https://tailwindcss.com/docs/divide-opacity + */ + "divide-opacity": [{ + "divide-opacity": [S] + }], + /** + * Divide Style + * @see https://tailwindcss.com/docs/divide-style + */ + "divide-style": [{ + divide: K() + }], + /** + * Border Color + * @see https://tailwindcss.com/docs/border-color + */ + "border-color": [{ + border: [o] + }], + /** + * Border Color X + * @see https://tailwindcss.com/docs/border-color + */ + "border-color-x": [{ + "border-x": [o] + }], + /** + * Border Color Y + * @see https://tailwindcss.com/docs/border-color + */ + "border-color-y": [{ + "border-y": [o] + }], + /** + * Border Color Top + * @see https://tailwindcss.com/docs/border-color + */ + "border-color-t": [{ + "border-t": [o] + }], + /** + * Border Color Right + * @see https://tailwindcss.com/docs/border-color + */ + "border-color-r": [{ + "border-r": [o] + }], + /** + * Border Color Bottom + * @see https://tailwindcss.com/docs/border-color + */ + "border-color-b": [{ + "border-b": [o] + }], + /** + * Border Color Left + * @see https://tailwindcss.com/docs/border-color + */ + "border-color-l": [{ + "border-l": [o] + }], + /** + * Divide Color + * @see https://tailwindcss.com/docs/divide-color + */ + "divide-color": [{ + divide: [o] + }], + /** + * Outline Style + * @see https://tailwindcss.com/docs/outline-style + */ + "outline-style": [{ + outline: [""].concat(K()) + }], + /** + * Outline Offset + * @see https://tailwindcss.com/docs/outline-offset + */ + "outline-offset": [{ + "outline-offset": [I, le] + }], + /** + * Outline Width + * @see https://tailwindcss.com/docs/outline-width + */ + "outline-w": [{ + outline: [le] + }], + /** + * Outline Color + * @see https://tailwindcss.com/docs/outline-color + */ + "outline-color": [{ + outline: [e] + }], + /** + * Ring Width + * @see https://tailwindcss.com/docs/ring-width + */ + "ring-w": [{ + ring: ce() + }], + /** + * Ring Width Inset + * @see https://tailwindcss.com/docs/ring-width + */ + "ring-w-inset": ["ring-inset"], + /** + * Ring Color + * @see https://tailwindcss.com/docs/ring-color + */ + "ring-color": [{ + ring: [e] + }], + /** + * Ring Opacity + * @see https://tailwindcss.com/docs/ring-opacity + */ + "ring-opacity": [{ + "ring-opacity": [S] + }], + /** + * Ring Offset Width + * @see https://tailwindcss.com/docs/ring-offset-width + */ + "ring-offset-w": [{ + "ring-offset": [le] + }], + /** + * Ring Offset Color + * @see https://tailwindcss.com/docs/ring-offset-color + */ + "ring-offset-color": [{ + "ring-offset": [e] + }], + // Effects + /** + * Box Shadow + * @see https://tailwindcss.com/docs/box-shadow + */ + shadow: [{ + shadow: ["", "inner", "none", ve, Vo] + }], + /** + * Box Shadow Color + * @see https://tailwindcss.com/docs/box-shadow-color + */ + "shadow-color": [{ + shadow: [Ke] + }], + /** + * Opacity + * @see https://tailwindcss.com/docs/opacity + */ + opacity: [{ + opacity: [S] + }], + /** + * Mix Blend Mode + * @see https://tailwindcss.com/docs/mix-blend-mode + */ + "mix-blend": [{ + "mix-blend": se() + }], + /** + * Background Blend Mode + * @see https://tailwindcss.com/docs/background-blend-mode + */ + "bg-blend": [{ + "bg-blend": se() + }], + // Filters + /** + * Filter + * @deprecated since Tailwind CSS v3.0.0 + * @see https://tailwindcss.com/docs/filter + */ + filter: [{ + filter: ["", "none"] + }], + /** + * Blur + * @see https://tailwindcss.com/docs/blur + */ + blur: [{ + blur: [r] + }], + /** + * Brightness + * @see https://tailwindcss.com/docs/brightness + */ + brightness: [{ + brightness: [s] + }], + /** + * Contrast + * @see https://tailwindcss.com/docs/contrast + */ + contrast: [{ + contrast: [i] + }], + /** + * Drop Shadow + * @see https://tailwindcss.com/docs/drop-shadow + */ + "drop-shadow": [{ + "drop-shadow": ["", "none", ve, I] + }], + /** + * Grayscale + * @see https://tailwindcss.com/docs/grayscale + */ + grayscale: [{ + grayscale: [d] + }], + /** + * Hue Rotate + * @see https://tailwindcss.com/docs/hue-rotate + */ + "hue-rotate": [{ + "hue-rotate": [p] + }], + /** + * Invert + * @see https://tailwindcss.com/docs/invert + */ + invert: [{ + invert: [m] + }], + /** + * Saturate + * @see https://tailwindcss.com/docs/saturate + */ + saturate: [{ + saturate: [A] + }], + /** + * Sepia + * @see https://tailwindcss.com/docs/sepia + */ + sepia: [{ + sepia: [_] + }], + /** + * Backdrop Filter + * @deprecated since Tailwind CSS v3.0.0 + * @see https://tailwindcss.com/docs/backdrop-filter + */ + "backdrop-filter": [{ + "backdrop-filter": ["", "none"] + }], + /** + * Backdrop Blur + * @see https://tailwindcss.com/docs/backdrop-blur + */ + "backdrop-blur": [{ + "backdrop-blur": [r] + }], + /** + * Backdrop Brightness + * @see https://tailwindcss.com/docs/backdrop-brightness + */ + "backdrop-brightness": [{ + "backdrop-brightness": [s] + }], + /** + * Backdrop Contrast + * @see https://tailwindcss.com/docs/backdrop-contrast + */ + "backdrop-contrast": [{ + "backdrop-contrast": [i] + }], + /** + * Backdrop Grayscale + * @see https://tailwindcss.com/docs/backdrop-grayscale + */ + "backdrop-grayscale": [{ + "backdrop-grayscale": [d] + }], + /** + * Backdrop Hue Rotate + * @see https://tailwindcss.com/docs/backdrop-hue-rotate + */ + "backdrop-hue-rotate": [{ + "backdrop-hue-rotate": [p] + }], + /** + * Backdrop Invert + * @see https://tailwindcss.com/docs/backdrop-invert + */ + "backdrop-invert": [{ + "backdrop-invert": [m] + }], + /** + * Backdrop Opacity + * @see https://tailwindcss.com/docs/backdrop-opacity + */ + "backdrop-opacity": [{ + "backdrop-opacity": [S] + }], + /** + * Backdrop Saturate + * @see https://tailwindcss.com/docs/backdrop-saturate + */ + "backdrop-saturate": [{ + "backdrop-saturate": [A] + }], + /** + * Backdrop Sepia + * @see https://tailwindcss.com/docs/backdrop-sepia + */ + "backdrop-sepia": [{ + "backdrop-sepia": [_] + }], + // Tables + /** + * Border Collapse + * @see https://tailwindcss.com/docs/border-collapse + */ + "border-collapse": [{ + border: ["collapse", "separate"] + }], + /** + * Border Spacing + * @see https://tailwindcss.com/docs/border-spacing + */ + "border-spacing": [{ + "border-spacing": [a] + }], + /** + * Border Spacing X + * @see https://tailwindcss.com/docs/border-spacing + */ + "border-spacing-x": [{ + "border-spacing-x": [a] + }], + /** + * Border Spacing Y + * @see https://tailwindcss.com/docs/border-spacing + */ + "border-spacing-y": [{ + "border-spacing-y": [a] + }], + /** + * Table Layout + * @see https://tailwindcss.com/docs/table-layout + */ + "table-layout": [{ + table: ["auto", "fixed"] + }], + /** + * Caption Side + * @see https://tailwindcss.com/docs/caption-side + */ + caption: [{ + caption: ["top", "bottom"] + }], + // Transitions and Animation + /** + * Tranisition Property + * @see https://tailwindcss.com/docs/transition-property + */ + transition: [{ + transition: ["none", "all", "", "colors", "opacity", "shadow", "transform", I] + }], + /** + * Transition Duration + * @see https://tailwindcss.com/docs/transition-duration + */ + duration: [{ + duration: ft() + }], + /** + * Transition Timing Function + * @see https://tailwindcss.com/docs/transition-timing-function + */ + ease: [{ + ease: ["linear", "in", "out", "in-out", I] + }], + /** + * Transition Delay + * @see https://tailwindcss.com/docs/transition-delay + */ + delay: [{ + delay: ft() + }], + /** + * Animation + * @see https://tailwindcss.com/docs/animation + */ + animate: [{ + animate: ["none", "spin", "ping", "pulse", "bounce", I] + }], + // Transforms + /** + * Transform + * @see https://tailwindcss.com/docs/transform + */ + transform: [{ + transform: ["", "gpu", "none"] + }], + /** + * Scale + * @see https://tailwindcss.com/docs/scale + */ + scale: [{ + scale: [L] + }], + /** + * Scale X + * @see https://tailwindcss.com/docs/scale + */ + "scale-x": [{ + "scale-x": [L] + }], + /** + * Scale Y + * @see https://tailwindcss.com/docs/scale + */ + "scale-y": [{ + "scale-y": [L] + }], + /** + * Rotate + * @see https://tailwindcss.com/docs/rotate + */ + rotate: [{ + rotate: [Je, I] + }], + /** + * Translate X + * @see https://tailwindcss.com/docs/translate + */ + "translate-x": [{ + "translate-x": [N] + }], + /** + * Translate Y + * @see https://tailwindcss.com/docs/translate + */ + "translate-y": [{ + "translate-y": [N] + }], + /** + * Skew X + * @see https://tailwindcss.com/docs/skew + */ + "skew-x": [{ + "skew-x": [E] + }], + /** + * Skew Y + * @see https://tailwindcss.com/docs/skew + */ + "skew-y": [{ + "skew-y": [E] + }], + /** + * Transform Origin + * @see https://tailwindcss.com/docs/transform-origin + */ + "transform-origin": [{ + origin: ["center", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", "top-left", I] + }], + // Interactivity + /** + * Accent Color + * @see https://tailwindcss.com/docs/accent-color + */ + accent: [{ + accent: ["auto", e] + }], + /** + * Appearance + * @see https://tailwindcss.com/docs/appearance + */ + appearance: ["appearance-none"], + /** + * Cursor + * @see https://tailwindcss.com/docs/cursor + */ + cursor: [{ + cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", I] + }], + /** + * Caret Color + * @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities + */ + "caret-color": [{ + caret: [e] + }], + /** + * Pointer Events + * @see https://tailwindcss.com/docs/pointer-events + */ + "pointer-events": [{ + "pointer-events": ["none", "auto"] + }], + /** + * Resize + * @see https://tailwindcss.com/docs/resize + */ + resize: [{ + resize: ["none", "y", "x", ""] + }], + /** + * Scroll Behavior + * @see https://tailwindcss.com/docs/scroll-behavior + */ + "scroll-behavior": [{ + scroll: ["auto", "smooth"] + }], + /** + * Scroll Margin + * @see https://tailwindcss.com/docs/scroll-margin + */ + "scroll-m": [{ + "scroll-m": z() + }], + /** + * Scroll Margin X + * @see https://tailwindcss.com/docs/scroll-margin + */ + "scroll-mx": [{ + "scroll-mx": z() + }], + /** + * Scroll Margin Y + * @see https://tailwindcss.com/docs/scroll-margin + */ + "scroll-my": [{ + "scroll-my": z() + }], + /** + * Scroll Margin Start + * @see https://tailwindcss.com/docs/scroll-margin + */ + "scroll-ms": [{ + "scroll-ms": z() + }], + /** + * Scroll Margin End + * @see https://tailwindcss.com/docs/scroll-margin + */ + "scroll-me": [{ + "scroll-me": z() + }], + /** + * Scroll Margin Top + * @see https://tailwindcss.com/docs/scroll-margin + */ + "scroll-mt": [{ + "scroll-mt": z() + }], + /** + * Scroll Margin Right + * @see https://tailwindcss.com/docs/scroll-margin + */ + "scroll-mr": [{ + "scroll-mr": z() + }], + /** + * Scroll Margin Bottom + * @see https://tailwindcss.com/docs/scroll-margin + */ + "scroll-mb": [{ + "scroll-mb": z() + }], + /** + * Scroll Margin Left + * @see https://tailwindcss.com/docs/scroll-margin + */ + "scroll-ml": [{ + "scroll-ml": z() + }], + /** + * Scroll Padding + * @see https://tailwindcss.com/docs/scroll-padding + */ + "scroll-p": [{ + "scroll-p": z() + }], + /** + * Scroll Padding X + * @see https://tailwindcss.com/docs/scroll-padding + */ + "scroll-px": [{ + "scroll-px": z() + }], + /** + * Scroll Padding Y + * @see https://tailwindcss.com/docs/scroll-padding + */ + "scroll-py": [{ + "scroll-py": z() + }], + /** + * Scroll Padding Start + * @see https://tailwindcss.com/docs/scroll-padding + */ + "scroll-ps": [{ + "scroll-ps": z() + }], + /** + * Scroll Padding End + * @see https://tailwindcss.com/docs/scroll-padding + */ + "scroll-pe": [{ + "scroll-pe": z() + }], + /** + * Scroll Padding Top + * @see https://tailwindcss.com/docs/scroll-padding + */ + "scroll-pt": [{ + "scroll-pt": z() + }], + /** + * Scroll Padding Right + * @see https://tailwindcss.com/docs/scroll-padding + */ + "scroll-pr": [{ + "scroll-pr": z() + }], + /** + * Scroll Padding Bottom + * @see https://tailwindcss.com/docs/scroll-padding + */ + "scroll-pb": [{ + "scroll-pb": z() + }], + /** + * Scroll Padding Left + * @see https://tailwindcss.com/docs/scroll-padding + */ + "scroll-pl": [{ + "scroll-pl": z() + }], + /** + * Scroll Snap Align + * @see https://tailwindcss.com/docs/scroll-snap-align + */ + "snap-align": [{ + snap: ["start", "end", "center", "align-none"] + }], + /** + * Scroll Snap Stop + * @see https://tailwindcss.com/docs/scroll-snap-stop + */ + "snap-stop": [{ + snap: ["normal", "always"] + }], + /** + * Scroll Snap Type + * @see https://tailwindcss.com/docs/scroll-snap-type + */ + "snap-type": [{ + snap: ["none", "x", "y", "both"] + }], + /** + * Scroll Snap Type Strictness + * @see https://tailwindcss.com/docs/scroll-snap-type + */ + "snap-strictness": [{ + snap: ["mandatory", "proximity"] + }], + /** + * Touch Action + * @see https://tailwindcss.com/docs/touch-action + */ + touch: [{ + touch: ["auto", "none", "pinch-zoom", "manipulation", { + pan: ["x", "left", "right", "y", "up", "down"] + }] + }], + /** + * User Select + * @see https://tailwindcss.com/docs/user-select + */ + select: [{ + select: ["none", "text", "all", "auto"] + }], + /** + * Will Change + * @see https://tailwindcss.com/docs/will-change + */ + "will-change": [{ + "will-change": ["auto", "scroll", "contents", "transform", I] + }], + // SVG + /** + * Fill + * @see https://tailwindcss.com/docs/fill + */ + fill: [{ + fill: [e, "none"] + }], + /** + * Stroke Width + * @see https://tailwindcss.com/docs/stroke-width + */ + "stroke-w": [{ + stroke: [le, gt] + }], + /** + * Stroke + * @see https://tailwindcss.com/docs/stroke + */ + stroke: [{ + stroke: [e, "none"] + }], + // Accessibility + /** + * Screen Readers + * @see https://tailwindcss.com/docs/screen-readers + */ + sr: ["sr-only", "not-sr-only"] + }, + conflictingClassGroups: { + overflow: ["overflow-x", "overflow-y"], + overscroll: ["overscroll-x", "overscroll-y"], + inset: ["inset-x", "inset-y", "start", "end", "top", "right", "bottom", "left"], + "inset-x": ["right", "left"], + "inset-y": ["top", "bottom"], + flex: ["basis", "grow", "shrink"], + gap: ["gap-x", "gap-y"], + p: ["px", "py", "ps", "pe", "pt", "pr", "pb", "pl"], + px: ["pr", "pl"], + py: ["pt", "pb"], + m: ["mx", "my", "ms", "me", "mt", "mr", "mb", "ml"], + mx: ["mr", "ml"], + my: ["mt", "mb"], + "font-size": ["leading"], + "fvn-normal": ["fvn-ordinal", "fvn-slashed-zero", "fvn-figure", "fvn-spacing", "fvn-fraction"], + "fvn-ordinal": ["fvn-normal"], + "fvn-slashed-zero": ["fvn-normal"], + "fvn-figure": ["fvn-normal"], + "fvn-spacing": ["fvn-normal"], + "fvn-fraction": ["fvn-normal"], + rounded: ["rounded-s", "rounded-e", "rounded-t", "rounded-r", "rounded-b", "rounded-l", "rounded-ss", "rounded-se", "rounded-ee", "rounded-es", "rounded-tl", "rounded-tr", "rounded-br", "rounded-bl"], + "rounded-s": ["rounded-ss", "rounded-es"], + "rounded-e": ["rounded-se", "rounded-ee"], + "rounded-t": ["rounded-tl", "rounded-tr"], + "rounded-r": ["rounded-tr", "rounded-br"], + "rounded-b": ["rounded-br", "rounded-bl"], + "rounded-l": ["rounded-tl", "rounded-bl"], + "border-spacing": ["border-spacing-x", "border-spacing-y"], + "border-w": ["border-w-s", "border-w-e", "border-w-t", "border-w-r", "border-w-b", "border-w-l"], + "border-w-x": ["border-w-r", "border-w-l"], + "border-w-y": ["border-w-t", "border-w-b"], + "border-color": ["border-color-t", "border-color-r", "border-color-b", "border-color-l"], + "border-color-x": ["border-color-r", "border-color-l"], + "border-color-y": ["border-color-t", "border-color-b"], + "scroll-m": ["scroll-mx", "scroll-my", "scroll-ms", "scroll-me", "scroll-mt", "scroll-mr", "scroll-mb", "scroll-ml"], + "scroll-mx": ["scroll-mr", "scroll-ml"], + "scroll-my": ["scroll-mt", "scroll-mb"], + "scroll-p": ["scroll-px", "scroll-py", "scroll-ps", "scroll-pe", "scroll-pt", "scroll-pr", "scroll-pb", "scroll-pl"], + "scroll-px": ["scroll-pr", "scroll-pl"], + "scroll-py": ["scroll-pt", "scroll-pb"] + }, + conflictingClassGroupModifiers: { + "font-size": ["leading"] + } + }; +} +var B = /* @__PURE__ */ zo(Wo); +const Go = "p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900"; +function Uo(e) { + const t = c(() => e.value.parentElement.parentElement.dataset.accordionId), r = c(() => e.value.parentElement.dataset.panelId), { accordionsStates: s } = ut(), o = c(() => s[t.value]), n = c(() => s[t.value].panels[r.value]), a = c(() => Object.keys(s[t.value].panels[r.value]).length); + return { + contentClasses: c(() => B( + Go, + !n.value.isVisible && "hidden", + (n.value.order !== a.value - 1 || o.value.flush) && "border-b-0", + n.value.order === a.value - 1 && "border-t-0", + o.value.flush && "border-x-0" + )) + }; +} +const Xf = /* @__PURE__ */ C({ + __name: "FwbAccordionContent", + setup(e) { + const t = R(!1), r = R(); + let s; + return He(() => { + s = Uo(r).contentClasses, t.value = !0; + }), (o, n) => (u(), g("div", { + ref_key: "content", + ref: r + }, [ + t.value ? (u(), g("div", { + key: 0, + class: x(y(s)) + }, [ + w(o.$slots, "default") + ], 2)) : P("", !0) + ], 512)); + } +}), qo = "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", Yo = "w-6 h-6 shrink-0"; +function Jo(e) { + const t = c(() => e.value.parentElement.parentElement.dataset.accordionId), r = c(() => e.value.parentElement.dataset.panelId), { accordionsStates: s } = ut(), o = c(() => s[t.value]), n = c(() => o.value.panels[r.value]), a = c(() => Object.keys(n.value).length), l = c(() => n.value.order !== a.value - 1), i = c(() => l.value || o.value.flush && n.value.order === a.value - 1 && !n.value.isVisible), d = c(() => B( + qo, + n.value.isVisible && "bg-gray-100 dark:bg-gray-800", + n.value.order === 0 && !o.value.flush && "rounded-t-xl", + n.value.order === 0 && o.value.flush && "border-t-0", + i.value && "border-b-0", + o.value.flush && "border-x-0" + )), p = c(() => B(Yo, n.value.isVisible && "rotate-180")); + return { + headerClasses: d, + arrowClasses: p + }; +} +const Ko = { class: "w-full" }, Qo = /* @__PURE__ */ f("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" +}, null, -1), Xo = [ + Qo +], Zf = /* @__PURE__ */ C({ + __name: "FwbAccordionHeader", + setup(e) { + const t = R(!1), r = R(), s = c(() => r.value.parentElement.parentElement.dataset.accordionId), o = c(() => r.value.parentElement.dataset.panelId), { accordionsStates: n } = ut(), a = c(() => n[s.value]), l = c(() => a.value.panels[o.value]); + let i, d; + function p() { + const h = l.value.isVisible; + for (const b in a.value.panels) { + const k = a.value.panels[b]; + k.id !== o.value ? k.isVisible = !1 : k.isVisible = !h; + } + } + function m() { + l.value.isVisible = !l.value.isVisible; + } + function v() { + if (a.value.alwaysOpen) + return m(); + p(); + } + return He(() => { + const h = Jo(r); + i = h.headerClasses, d = h.arrowClasses, t.value = !0; + }), (h, b) => (u(), g("div", { + ref_key: "header", + ref: r + }, [ + t.value ? (u(), g("button", { + key: 0, + type: "button", + class: x(y(i)), + onClick: v + }, [ + f("span", Ko, [ + w(h.$slots, "default") + ]), + (u(), g("svg", { + "data-accordion-icon": "", + class: x(y(d)), + fill: "currentColor", + viewBox: "0 0 20 20", + xmlns: "http://www.w3.org/2000/svg" + }, Xo, 2)) + ], 2)) : P("", !0) + ], 512)); + } +}), Zo = ["data-panel-id"], ep = /* @__PURE__ */ C({ + __name: "FwbAccordionPanel", + setup(e) { + const { accordionsStates: t } = ut(), r = ms(), s = R(), o = c(() => s.value ? s.value.parentElement.dataset.accordionId : null), n = c(() => t[o.value]); + return He(() => { + const a = Object.keys(n?.value?.panels)?.length; + n.value.panels[r] = { + id: r, + order: a, + isVisible: (n.value.openFirstItem && a === 0) ?? !1 + }; + }), (a, l) => (u(), g("div", { + ref_key: "panel", + ref: s, + "data-panel-id": y(r) + }, [ + o.value ? w(a.$slots, "default", { key: 0 }) : P("", !0) + ], 8, Zo)); + } +}), en = { class: "flex items-center" }, tn = /* @__PURE__ */ f("svg", { + class: "flex-shrink-0 w-5 h-5", + fill: "currentColor", + viewBox: "0 0 20 20", + xmlns: "http://www.w3.org/2000/svg" +}, [ + /* @__PURE__ */ f("path", { + "fill-rule": "evenodd", + d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", + "clip-rule": "evenodd" + }) +], -1), rn = /* @__PURE__ */ f("span", { class: "sr-only" }, "Dismiss", -1), sn = /* @__PURE__ */ f("svg", { + class: "w-5 h-5", + fill: "currentColor", + viewBox: "0 0 20 20", + xmlns: "http://www.w3.org/2000/svg" +}, [ + /* @__PURE__ */ f("path", { + "fill-rule": "evenodd", + d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", + "clip-rule": "evenodd" + }) +], -1), on = [ + rn, + sn +], nn = "ml-auto -mr-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex h-8 w-8 dark:bg-gray-800 dark:hover:bg-gray-700", tp = /* @__PURE__ */ C({ + inheritAttrs: !1, + __name: "FwbAlert", + props: { + type: { default: "info" }, + closable: { type: Boolean, default: !1 }, + icon: { type: Boolean, default: !1 }, + border: { type: Boolean, default: !1 } + }, + emits: ["close"], + setup(e, { emit: t }) { + const r = e, s = t, o = ae(), n = { + danger: "text-red-800 dark:text-red-400", + dark: "text-gray-800 dark:text-gray-300", + info: "text-blue-800 dark:text-blue-400", + success: "text-green-800 dark:text-green-400", + warning: "text-yellow-800 dark:text-yellow-300" + }, a = { + danger: "bg-red-50", + dark: "bg-gray-50", + info: "bg-blue-50", + success: "bg-green-50", + warning: "bg-yellow-50" + }, i = B(nn, { + danger: "text-red-500 dark:text-red-400 bg-red-50 hover:bg-red-200 focus:ring-red-400", + dark: "text-gray-500 dark:text-gray-300 bg-gray-50 hover:bg-gray-200 focus:ring-gray-400 dark:hover:text-white", + info: "text-blue-500 dark:text-blue-400 bg-blue-50 hover:bg-blue-200 focus:ring-blue-400", + success: "text-green-500 dark:text-green-400 bg-green-50 hover:bg-green-200 focus:ring-green-400", + warning: "text-yellow-500 dark:text-yellow-300 bg-yellow-50 hover:bg-yellow-200 focus:ring-yellow-400" + }[r.type]), d = { + danger: "border-red-500 dark:text-red-400", + dark: "border-gray-500 dark:text-gray-400", + info: "border-blue-500 dark:text-blue-400", + success: "border-green-500 dark:text-green-400", + warning: "border-yellow-500 dark:text-yellow-400" + }, p = { + danger: [n.danger, a.danger].join(" "), + dark: [n.dark, a.dark].join(" "), + info: [n.info, a.info].join(" "), + success: [n.success, a.success].join(" "), + warning: [n.warning, a.warning].join(" ") + }, m = B( + "p-4 gap-3 text-sm dark:bg-gray-800 rounded-lg", + p[r.type], + (r.icon || r.closable) && "flex items-center", + d[r.type], + r.border && "border", + o.class + ), v = R(!0); + function h() { + s("close"), v.value = !1; + } + return (b, k) => v.value ? (u(), g("div", re({ key: 0 }, b.$attrs, { + class: y(m), + role: "alert" + }), [ + f("div", en, [ + b.icon || b.$slots.icon ? w(b.$slots, "icon", { key: 0 }, () => [ + tn + ]) : P("", !0), + w(b.$slots, "title") + ]), + w(b.$slots, "default", { onCloseClick: h }), + w(b.$slots, "close-icon", { onCloseClick: h }, () => [ + b.closable ? (u(), g("button", { + key: 0, + type: "button", + class: x(y(i)), + "aria-label": "Close", + onClick: h + }, on, 2)) : P("", !0) + ]) + ], 16)) : P("", !0); + } +}), me = (e) => B(e), yr = { + xs: "w-6 h-6", + sm: "w-8 h-8", + md: "w-10 h-10", + lg: "w-20 h-20", + xl: "w-36 h-36" +}, wr = { + default: "rounded", + rounded: "rounded-full" +}, an = "ring-2 ring-gray-300 dark:ring-gray-500 p-1", ln = "absolute h-3.5 w-3.5 rounded-full border-2 border-white dark:border-gray-800", dn = { + away: "bg-gray-400", + busy: "bg-yellow-400", + offline: "bg-red-400", + online: "bg-green-400" +}, un = { + "top-right-rounded": "top-0 -right-0.5", + "top-right-default": "-top-1.5 -right-1.5", + "top-left-rounded": "top-0 left-0", + "top-left-default": "top-0 left-0 transform -translate-y-1/2 -translate-x-1/2", + "bottom-right-rounded": "bottom-0 -right-0.5", + "bottom-right-default": "bottom-0 -right-1.5 translate-y-1/2", + "bottom-left-rounded": "bottom-0 left-0", + "bottom-left-default": "-bottom-1.5 left-0 transform -translate-x-1/2 " +}, cn = "absolute w-auto h-auto text-gray-400", fn = "flex overflow-hidden relative justify-center items-center", pn = "bg-gray-100 dark:bg-gray-600", gn = "font-medium text-gray-600 dark:text-gray-300", hn = { + xs: "bottom-0", + sm: "bottom-0", + md: "-bottom-1", + lg: "-bottom-2", + xl: "-bottom-4" +}; +function mn(e) { + const t = c( + () => me([ + yr[e.size.value], + wr[e.rounded.value ? "rounded" : "default"], + e.bordered.value ? an : "", + e.stacked.value ? "border-2 border-white dark:border-gray-800" : "" + ]) + ), r = c(() => { + const a = `${e.statusPosition.value}-${e.rounded.value ? "rounded" : "default"}`; + return me([ + ln, + dn[e.status.value], + un[a] + ]); + }), s = c( + () => me([ + cn, + hn[e.size.value] + ]) + ), o = c( + () => me([ + fn, + yr[e.size.value], + wr[e.rounded.value ? "rounded" : "default"], + e.img.value && e.bordered.value ? "" : pn, + e.bordered.value ? " overflow-visible" : "" + ]) + ), n = c( + () => me([ + gn + ]) + ); + return { + avatarClasses: t, + avatarDotClasses: r, + avatarPlaceholderClasses: s, + avatarPlaceholderInitialsClasses: n, + avatarPlaceholderWrapperClasses: o + }; +} +const bn = { class: "relative" }, vn = ["alt", "src"], yn = /* @__PURE__ */ f("path", { + "clip-rule": "evenodd", + d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z", + "fill-rule": "evenodd" +}, null, -1), wn = [ + yn +], xn = ["data-pos"], rp = /* @__PURE__ */ C({ + __name: "FwbAvatar", + props: { + alt: { + type: String, + default: "Avatar" + }, + bordered: { + type: Boolean, + default: !1 + }, + img: { + type: String, + default: "" + }, + rounded: { + type: Boolean, + default: !1 + }, + size: { + type: String, + default: "md" + }, + stacked: { + type: Boolean, + default: !1 + }, + status: { + type: String, + default: null + }, + statusPosition: { + type: String, + default: "top-right" + }, + initials: { + type: String, + default: null + } + }, + setup(e) { + const t = R(!1); + function r() { + t.value = !0; + } + const s = De(), o = c(() => s.placeholder), n = e, { + avatarClasses: a, + avatarDotClasses: l, + avatarPlaceholderClasses: i, + avatarPlaceholderInitialsClasses: d, + avatarPlaceholderWrapperClasses: p + } = mn(Y(n)); + return (m, v) => (u(), g("div", bn, [ + f("div", { + class: x(y(p)) + }, [ + e.img && !t.value ? (u(), g("img", { + key: 0, + alt: e.alt, + class: x(y(a)), + src: e.img, + onError: r + }, null, 42, vn)) : !e.initials && o.value ? (u(), g("div", { + key: 1, + class: x(y(i)) + }, [ + w(m.$slots, "placeholder") + ], 2)) : !e.img && !e.initials ? (u(), g("svg", { + key: 2, + class: x(y(i)), + fill: "currentColor", + viewBox: "0 0 20 20", + xmlns: "http://www.w3.org/2000/svg" + }, wn, 2)) : (u(), g("div", { + key: 3, + class: x(y(d)) + }, M(e.initials), 3)) + ], 2), + e.status ? (u(), g("span", { + key: 0, + class: x(y(l)), + "data-pos": e.statusPosition + }, null, 10, xn)) : P("", !0) + ])); + } +}), he = (e, t) => { + const r = e.__vccOpts || e; + for (const [s, o] of t) + r[s] = o; + return r; +}, kn = {}, _n = { class: "flex -space-x-4" }; +function Cn(e, t) { + return u(), g("div", _n, [ + w(e.$slots, "default") + ]); +} +const sp = /* @__PURE__ */ he(kn, [["render", Cn]]), $n = ["href"], op = /* @__PURE__ */ C({ + __name: "FwbAvatarStackCounter", + props: { + total: { + type: Number, + default: 1 + }, + href: { + type: String, + default: "#" + } + }, + setup(e) { + return (t, r) => (u(), g("a", { + class: "relative flex justify-center items-center w-10 h-10 text-xs font-medium text-white bg-gray-700 rounded-full border-2 border-white hover:bg-gray-600 dark:border-gray-800", + href: e.href + }, "+" + M(e.total), 9, $n)); + } +}), Sn = "mr-2 px-2.5 py-0.5 rounded flex items-center justify-center", Tn = "bg-blue-100 hover:bg-blue-200 text-blue-800 dark:text-blue-800 dark:hover:bg-blue-300", Pn = "p-1 rounded-full mr-2", Fn = { + default: "text-blue-800 dark:text-blue-800", + dark: "text-gray-800 dark:bg-gray-700", + red: "text-red-800 dark:text-red-900", + green: "text-green-800 dark:text-green-900", + yellow: "text-yellow-800 dark:text-yellow-900", + indigo: "text-indigo-800 dark:text-indigo-900", + purple: "text-purple-800 dark:text-purple-900", + pink: "text-pink-800 dark:text-pink-900" +}, zn = { + default: "bg-blue-100 dark:bg-blue-200", + dark: "bg-gray-100 dark:bg-gray-700", + red: "bg-red-100 dark:bg-red-200", + green: "bg-green-100 dark:bg-green-200", + yellow: "bg-yellow-100 dark:bg-yellow-200", + indigo: "bg-indigo-100 dark:bg-indigo-200", + purple: "bg-purple-100 dark:bg-purple-200", + pink: "bg-pink-100 dark:bg-pink-200" +}, An = { + xs: "text-xs font-semibold", + sm: "text-sm font-medium" +}; +function In(e, t) { + const r = ae(); + return { + badgeClasses: c(() => B( + An[e.size], + e.href ? "" : zn[e.type], + e.href ? "" : Fn[e.type], + e.href ? Tn : "", + t.isContentEmpty.value ? Pn : Sn, + r.class + )) + }; +} +const np = /* @__PURE__ */ C({ + __name: "FwbBadge", + props: { + type: { default: "default" }, + size: { default: "xs" }, + href: { default: null } + }, + setup(e) { + const t = e, r = De(), s = c(() => !r.default), o = c(() => t.href ? "a" : "span"), { badgeClasses: n } = In(t, { isContentEmpty: s }); + return (a, l) => (u(), H(X(o.value), { + class: x(y(n)), + href: a.href + }, { + default: j(() => [ + w(a.$slots, "icon"), + w(a.$slots, "default") + ]), + _: 3 + }, 8, ["class", "href"])); + } +}); +function Mn(e) { + return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e; +} +var ks = { exports: {} }; +/*! + Copyright (c) 2018 Jed Watson. + Licensed under the MIT License (MIT), see + http://jedwatson.github.io/classnames +*/ +(function(e) { + (function() { + var t = {}.hasOwnProperty; + function r() { + for (var s = [], o = 0; o < arguments.length; o++) { + var n = arguments[o]; + if (n) { + var a = typeof n; + if (a === "string" || a === "number") + s.push(n); + else if (Array.isArray(n)) { + if (n.length) { + var l = r.apply(null, n); + l && s.push(l); + } + } else if (a === "object") { + if (n.toString !== Object.prototype.toString && !n.toString.toString().includes("[native code]")) { + s.push(n.toString()); + continue; + } + for (var i in n) + t.call(n, i) && n[i] && s.push(i); + } + } + } + return s.join(" "); + } + e.exports ? (r.default = r, e.exports = r) : window.classNames = r; + })(); +})(ks); +var On = ks.exports; +const W = /* @__PURE__ */ Mn(On), Bn = "inline-flex items-center space-x-1 md:space-x-3", Ln = { + default: "flex", + solid: "flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700" +}; +function En(e) { + const t = c(() => W(Bn)), r = c(() => W( + Ln[e.solid.value ? "solid" : "defauilt"] + )); + return { + breadcrumbClasses: t, + breadcrumbWrapperClasses: r + }; +} +const ap = /* @__PURE__ */ C({ + __name: "FwbBreadcrumb", + props: { + solid: { + type: Boolean, + default: !1 + } + }, + setup(e) { + const t = e, { breadcrumbClasses: r, breadcrumbWrapperClasses: s } = En(Y(t)); + return (o, n) => (u(), g("nav", { + class: x(y(s)), + "aria-label": "Breadcrumb" + }, [ + f("ol", { + class: x(y(r)) + }, [ + w(o.$slots, "default") + ], 2) + ], 2)); + } +}), Nn = "ml-1 inline-flex items-center text-sm font-medium dark:text-gray-400", Rn = "text-gray-700 hover:text-gray-900 dark:hover:text-white", Vn = "text-gray-500"; +function jn(e) { + return { + breadcrumbItemClasses: c(() => W( + Nn, + e.href.value ? Rn : Vn + )) + }; +} +const Hn = { class: "inline-flex items-center" }, Dn = { + key: 0, + class: "w-6 h-6 text-gray-400 mr-1", + fill: "currentColor", + viewBox: "0 0 20 20", + xmlns: "http://www.w3.org/2000/svg" +}, Wn = /* @__PURE__ */ f("path", { + "clip-rule": "evenodd", + d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", + "fill-rule": "evenodd" +}, null, -1), Gn = [ + Wn +], Un = { + key: 0, + class: "w-4 h-4 mr-2", + fill: "currentColor", + viewBox: "0 0 20 20", + xmlns: "http://www.w3.org/2000/svg" +}, qn = /* @__PURE__ */ f("path", { d: "M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" }, null, -1), Yn = [ + qn +], lp = /* @__PURE__ */ C({ + __name: "FwbBreadcrumbItem", + props: { + href: { + type: String, + default: null + }, + home: { + type: Boolean, + default: !1 + } + }, + setup(e) { + const t = e, r = c(() => t.href ? "a" : "span"), { breadcrumbItemClasses: s } = jn(Y(t)); + return (o, n) => (u(), g("li", Hn, [ + w(o.$slots, "arrow-icon", {}, () => [ + e.home ? P("", !0) : (u(), g("svg", Dn, Gn)) + ]), + (u(), H(X(r.value), { + class: x(y(s)), + href: e.href + }, { + default: j(() => [ + w(o.$slots, "home-icon", {}, () => [ + e.home ? (u(), g("svg", Un, Yn)) : P("", !0) + ]), + w(o.$slots, "default") + ]), + _: 3 + }, 8, ["class", "href"])) + ])); + } +}), Jn = { + 0: "w-0 h-0", + 0.5: "w-0.5 h-0.5", + 1: "w-1 h-1", + 1.5: "w-1.5 h-1.5", + 10: "w-10 h-10", + 11: "w-11 h-11", + 12: "w-12 h-12", + 2: "w-2 h-2", + 2.5: "w-2.5 h-2.5", + 3: "w-3 h-3", + 4: "w-4 h-4", + 5: "w-5 h-5", + 6: "w-6 h-6", + 7: "w-7 h-7", + 8: "w-8 h-8", + 9: "w-9 h-9" +}, Kn = { + blue: "fill-blue-600", + gray: "fill-gray-600 dark:fill-gray-300", + green: "fill-green-500", + pink: "fill-pink-600", + purple: "fill-purple-600", + red: "fill-red-600", + white: "fill-white", + yellow: "fill-yellow-400" +}; +function Qn(e) { + const t = c(() => Jn[e.size.value]), r = c(() => Kn[e.color.value]), s = c(() => "text-gray-200 dark:text-gray-600"), o = c(() => "animate-spin"); + return { spinnerClasses: c(() => W( + o.value, + s.value, + r.value, + t.value + )) }; +} +const Xn = /* @__PURE__ */ f("path", { + d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", + fill: "currentColor" +}, null, -1), Zn = /* @__PURE__ */ f("path", { + d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", + fill: "currentFill" +}, null, -1), ea = [ + Xn, + Zn +], ht = /* @__PURE__ */ C({ + __name: "FwbSpinner", + props: { + color: { default: "blue" }, + size: { default: "4" } + }, + setup(e) { + const t = e, { spinnerClasses: r } = Qn(Y(t)); + return (s, o) => (u(), g("svg", { + class: x(y(r)), + fill: "none", + role: "status", + viewBox: "0 0 100 101", + xmlns: "http://www.w3.org/2000/svg" + }, ea, 2)); + } +}), xr = { + default: { + default: "text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800", + blue: "text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800", + alternative: "font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600", + dark: "text-white bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg dark:bg-gray-800 dark:focus:ring-gray-700 dark:border-gray-700", + light: "text-gray-900 bg-white border border-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-200 font-medium rounded-lg dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:focus:ring-gray-700", + green: "focus:outline-none text-white bg-green-700 focus:ring-4 focus:ring-green-300 font-medium rounded-lg dark:bg-green-600 dark:focus:ring-green-800", + red: "focus:outline-none text-white bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg dark:bg-red-600 dark:focus:ring-red-900", + yellow: "focus:outline-none text-white bg-yellow-400 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg dark:focus:ring-yellow-900", + purple: "focus:outline-none text-white bg-purple-700 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg dark:bg-purple-600 dark:focus:ring-purple-900", + pink: "focus:outline-none text-white bg-pink-700 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg dark:bg-pink-600 dark:focus:ring-pink-900" + }, + hover: { + default: "hover:bg-blue-800 dark:hover:bg-blue-700", + blue: "hover:bg-blue-800 dark:hover:bg-blue-700", + alternative: "hover:bg-gray-100 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700", + dark: "hover:bg-gray-900 dark:hover:bg-gray-700", + light: "hover:bg-gray-100 dark:hover:border-gray-600", + green: "hover:bg-green-800 dark:hover:bg-green-700", + red: "hover:bg-red-800 dark:hover:bg-red-700", + yellow: "hover:bg-yellow-500", + purple: "hover:bg-purple-800 dark:hover:bg-purple-700", + pink: "hover:bg-pink-800 dark:hover:bg-pink-700" + } +}, kr = { + default: { + dark: "text-gray-900 border border-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm text-center dark:border-gray-600 dark:text-gray-400 dark:focus:ring-gray-800", + default: "text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800", + blue: "text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800", + green: "text-green-700 border border-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm text-center dark:border-green-500 dark:text-green-500 dark:focus:ring-green-800", + purple: "text-purple-700 border border-purple-700 focus:ring-4 focus:outline-none focus:ring-purple-300 font-medium rounded-lg text-sm text-center dark:border-purple-400 dark:text-purple-400 dark:focus:ring-purple-900", + pink: "text-pink-700 border border-pink-700 focus:ring-4 focus:outline-none focus:ring-pink-300 font-medium rounded-lg text-sm text-center dark:border-pink-400 dark:text-pink-400 dark:focus:ring-pink-900", + red: "text-red-700 border border-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm text-center dark:border-red-500 dark:text-red-500 dark:focus:ring-red-900", + yellow: "text-yellow-400 border border-yellow-400 focus:ring-4 focus:outline-none focus:ring-yellow-300 font-medium rounded-lg text-sm text-center dark:border-yellow-300 dark:text-yellow-300 dark:focus:ring-yellow-900" + }, + hover: { + dark: "hover:text-white hover:bg-gray-900 dark:hover:text-white dark:hover:bg-gray-600", + default: "hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-600", + blue: "hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-600", + green: "hover:text-white hover:bg-green-800 dark:hover:text-white dark:hover:bg-green-600", + purple: "hover:text-white hover:bg-purple-800 dark:hover:text-white dark:hover:bg-purple-500", + pink: "hover:text-white hover:bg-pink-800 dark:hover:text-white dark:hover:bg-pink-500", + red: "hover:text-white hover:bg-red-800 dark:hover:text-white dark:hover:bg-red-600", + yellow: "hover:text-white hover:bg-yellow-500 dark:hover:text-white dark:hover:bg-yellow-400" + } +}, _r = { + hover: { + "cyan-blue": "hover:bg-gradient-to-bl", + "green-blue": "hover:bg-gradient-to-bl", + "pink-orange": "hover:bg-gradient-to-bl", + "purple-blue": "hover:bg-gradient-to-bl", + "purple-pink": "hover:bg-gradient-to-l", + "red-yellow": "hover:bg-gradient-to-bl", + "teal-lime": "hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200", + blue: "hover:bg-gradient-to-br", + cyan: "hover:bg-gradient-to-br", + green: "hover:bg-gradient-to-br", + lime: "hover:bg-gradient-to-br", + pink: "hover:bg-gradient-to-br", + purple: "hover:bg-gradient-to-br", + red: "hover:bg-gradient-to-br", + teal: "hover:bg-gradient-to-br" + }, + default: { + "cyan-blue": "text-white bg-gradient-to-r from-cyan-500 to-blue-500 focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg", + "green-blue": "text-white bg-gradient-to-br from-green-400 to-blue-600 focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg", + "pink-orange": "text-white bg-gradient-to-br from-pink-500 to-orange-400 focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800 font-medium rounded-lg", + "purple-blue": "text-white bg-gradient-to-br from-purple-600 to-blue-500 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg", + "purple-pink": "text-white bg-gradient-to-r from-purple-500 to-pink-500 focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800 font-medium rounded-lg", + "red-yellow": "text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 font-medium rounded-lg", + "teal-lime": "text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-teal-700 font-medium rounded-lg", + blue: "text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 rounded-lg", + cyan: "text-white bg-gradient-to-r from-cyan-500 via-cyan-600 to-cyan-700 focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 rounded-lg", + green: "text-white bg-gradient-to-r from-green-500 via-green-600 to-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 dark:focus:ring-green-800 rounded-lg", + lime: "text-gray-900 bg-gradient-to-r from-lime-500 via-lime-600 to-lime-700 focus:ring-4 focus:outline-none focus:ring-lime-300 dark:focus:ring-lime-800 rounded-lg", + pink: "text-white bg-gradient-to-r from-pink-500 via-pink-600 to-pink-700 focus:ring-4 focus:outline-none focus:ring-pink-300 dark:focus:ring-pink-800 rounded-lg", + purple: "text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 rounded-lg", + red: "text-white bg-gradient-to-r from-red-500 via-red-600 to-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 rounded-lg", + teal: "text-white bg-gradient-to-r from-teal-500 via-teal-600 to-teal-700 focus:ring-4 focus:outline-none focus:ring-teal-300 dark:focus:ring-teal-800 rounded-lg" + } +}, Cr = { + default: { + "cyan-blue": "relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800", + "green-blue": "relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800", + "pink-orange": "relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-pink-500 to-orange-400 dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800", + "purple-blue": "relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800", + "purple-pink": "relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800", + "red-yellow": "relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 dark:text-white focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400", + "teal-lime": "relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-teal-300 to-lime-300 dark:text-white focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-lime-800" + }, + hover: { + "cyan-blue": "group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white", + "green-blue": "group-hover:from-green-400 group-hover:to-blue-600 hover:text-white", + "pink-orange": "group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white", + "purple-blue": "group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white", + "purple-pink": "group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white", + "red-yellow": "group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:hover:text-gray-900", + "teal-lime": "group-hover:from-teal-300 group-hover:to-lime-300 dark:hover:text-gray-900" + } +}, ta = { + xs: "text-xs px-2 py-1", + sm: "text-sm px-3 py-1.5", + md: "text-sm px-4 py-2", + lg: "text-base px-5 py-2.5", + xl: "text-base px-6 py-3" +}, ra = { + xs: "text-xs p-1", + sm: "text-sm p-1.5", + md: "text-sm p-2", + lg: "text-base p-2.5", + xl: "text-base p-3" +}, $r = { + blue: "shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80", + cyan: "shadow-lg shadow-cyan-500/50 dark:shadow-lg dark:shadow-cyan-800/80", + green: "shadow-lg shadow-green-500/50 dark:shadow-lg dark:shadow-green-800/80", + lime: "shadow-lg shadow-lime-500/50 dark:shadow-lg dark:shadow-lime-800/80", + pink: "shadow-lg shadow-pink-500/50 dark:shadow-lg dark:shadow-pink-800/80", + purple: "shadow-lg shadow-purple-500/50 dark:shadow-lg dark:shadow-purple-800/80", + red: "shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80", + teal: "shadow-lg shadow-teal-500/50 dark:shadow-lg dark:shadow-teal-800/80" +}, Vt = ["blue", "green", "cyan", "teal", "lime", "red", "pink", "purple"], sa = ["alternative", "light"]; +function oa(e) { + const t = De(), r = c(() => e.square.value ? ra[e.size.value] : ta[e.size.value]), s = c(() => { + const n = !!e.gradient.value, a = !!e.color.value, l = e.outline.value; + let i = "", d = ""; + if (n && l) + Vt.includes(e.gradient.value) ? console.warn(`cannot use outline prop with "${e.gradient.value}" gradient`) : (d = Cr.default[e.gradient.value], e.disabled.value || (i = Cr.hover[e.gradient.value])); + else if (n) + d = _r.default[e.gradient.value], e.disabled.value || (i = _r.hover[e.gradient.value]); + else if (a && l) + if (sa.includes(e.color.value)) + console.warn(`cannot use outline prop with "${e.color.value}" color`); + else { + const m = e.color.value; + d = kr.default[m], e.disabled.value || (i = kr.hover[m]); + } + else { + const m = e.color.value; + d = xr.default[m], e.disabled.value || (i = xr.hover[m]); + } + let p = ""; + return e.shadow.value === "" ? e.gradient.value && Vt.includes(e.gradient.value) && (p = $r[e.gradient.value]) : typeof e.shadow.value == "string" && Vt.includes(e.shadow.value) && (p = $r[e.shadow.value]), [ + d, + i, + p, + e.pill.value && "!rounded-full", + e.disabled.value && "cursor-not-allowed opacity-50", + n && l ? "p-0.5" : r.value, + (t.prefix || t.suffix || e.loading.value) && "inline-flex items-center", + e.class.value + ].filter((m) => m).join(" "); + }), o = c(() => e.gradient.value && e.outline.value ? [ + "relative bg-white dark:bg-gray-900 rounded-md inline-flex items-center", + r.value, + e.disabled.value ? "" : "group-hover:bg-opacity-0 transition-all ease-in duration-75" + ].filter((n) => n).join(" ") : ""); + return { + wrapperClasses: s.value, + spanClasses: o.value + }; +} +function na(e) { + const t = { + xs: "2.5", + sm: "3", + md: "4", + lg: "5", + xl: "6" + }, r = c(() => t[e.size.value]); + return { + color: c(() => e.outline.value ? e.gradient.value ? e.gradient.value.includes("purple") ? "purple" : e.gradient.value.includes("blue") ? "blue" : e.gradient.value.includes("pink") ? "pink" : e.gradient.value.includes("red") ? "red" : "white" : ["alternative", "dark", "light"].includes(e.color.value) ? "white" : e.color.value === "default" ? "blue" : e.color.value : "white"), + size: r + }; +} +const aa = { + key: 0, + class: "mr-2" +}, la = { + key: 0, + class: "mr-2" +}, ia = { + key: 1, + class: "ml-2" +}, da = { + key: 1, + class: "ml-2" +}, ua = /* @__PURE__ */ C({ + __name: "FwbButton", + props: { + class: { default: "" }, + color: { default: "default" }, + gradient: { default: null }, + size: { default: "md" }, + shadow: { default: null }, + pill: { type: Boolean, default: !1 }, + square: { type: Boolean, default: !1 }, + outline: { type: Boolean, default: !1 }, + loading: { type: Boolean, default: !1 }, + loadingPosition: { default: "prefix" }, + disabled: { type: Boolean, default: !1 }, + href: { default: "" }, + tag: { default: "a" } + }, + setup(e) { + const t = e, r = oa(Y(t)), s = c(() => me(r.wrapperClasses)), o = c(() => me(r.spanClasses)), n = c(() => t.outline && t.gradient), a = c(() => t.loading && t.loadingPosition === "prefix"), l = c(() => t.loading && t.loadingPosition === "suffix"), { color: i, size: d } = na(Y(t)), p = t.tag !== "a" ? be(t.tag) : "a", m = t.href ? p : "button", v = t.tag === "router-link" || t.tag === "nuxt-link" ? "to" : "href"; + return (h, b) => (u(), H(X(y(m)), Se({ + class: s.value, + [y(v) || ""]: h.href, + disabled: y(m) === "button" && h.disabled + }), { + default: j(() => [ + !n.value && (h.$slots.prefix || a.value) ? (u(), g("div", aa, [ + a.value ? (u(), H(ht, { + key: 0, + color: y(i), + size: y(d) + }, null, 8, ["color", "size"])) : w(h.$slots, "prefix", { key: 1 }) + ])) : P("", !0), + f("span", { + class: x(o.value) + }, [ + n.value && (h.$slots.prefix || a.value) ? (u(), g("span", la, [ + a.value ? (u(), H(ht, { + key: 0, + color: y(i), + size: y(d) + }, null, 8, ["color", "size"])) : w(h.$slots, "prefix", { key: 1 }) + ])) : P("", !0), + w(h.$slots, "default"), + n.value && (h.$slots.suffix || l.value) ? (u(), g("span", ia, [ + l.value ? (u(), H(ht, { + key: 0, + color: y(i), + size: y(d) + }, null, 8, ["color", "size"])) : w(h.$slots, "suffix", { key: 1 }) + ])) : P("", !0) + ], 2), + !n.value && (h.$slots.suffix || l.value) ? (u(), g("div", da, [ + l.value ? (u(), H(ht, { + key: 0, + color: y(i), + size: y(d) + }, null, 8, ["color", "size"])) : w(h.$slots, "suffix", { key: 1 }) + ])) : P("", !0) + ]), + _: 3 + }, 16, ["class", "disabled"])); + } +}); +const ca = {}, fa = { + class: "btn-group inline-flex rounded-md shadow-sm", + role: "group" +}; +function pa(e, t) { + return u(), g("div", fa, [ + w(e.$slots, "default") + ]); +} +const ip = /* @__PURE__ */ he(ca, [["render", pa]]); +function ga(e) { + const t = c(() => e.variant.value === "default" ? "block max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700" : e.variant.value === "image" ? "max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700" : e.variant.value === "horizontal" ? "flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700" : ""), r = c( + () => e.variant.value === "horizontal" ? "object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg" : "" + ); + return { + cardClasses: t, + horizontalImageClasses: r + }; +} +const ha = ["alt", "src"], dp = /* @__PURE__ */ C({ + __name: "FwbCard", + props: { + href: { + type: String, + default: "" + }, + imgAlt: { + type: String, + default: "" + }, + imgSrc: { + type: String, + default: "" + }, + variant: { + type: String, + default: "default" + } + }, + setup(e) { + const t = e, { cardClasses: r, horizontalImageClasses: s } = ga(Y(t)), o = c(() => t.href ? "a" : "div"); + return (n, a) => (u(), H(X(o.value), { + class: x(y(r)), + href: e.href + }, { + default: j(() => [ + e.imgSrc ? (u(), g("img", { + key: 0, + alt: e.imgAlt, + class: x([y(s), "rounded-t-lg"]), + src: e.imgSrc + }, null, 10, ha)) : P("", !0), + f("div", null, [ + w(n.$slots, "default") + ]) + ]), + _: 3 + }, 8, ["class", "href"])); + } +}), ma = { class: "relative" }, ba = { class: "overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96" }, va = ["alt", "src"], ya = { + key: 0, + class: "flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2" +}, wa = ["aria-label", "onClick"], xa = /* @__PURE__ */ f("span", { class: "inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none" }, [ + /* @__PURE__ */ f("svg", { + class: "w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800", + fill: "none", + stroke: "currentColor", + viewBox: "0 0 24 24", + xmlns: "http://www.w3.org/2000/svg" + }, [ + /* @__PURE__ */ f("path", { + d: "M15 19l-7-7 7-7", + "stroke-linecap": "round", + "stroke-linejoin": "round", + "stroke-width": "2" + }) + ]), + /* @__PURE__ */ f("span", { class: "hidden" }, "Previous") +], -1), ka = [ + xa +], _a = /* @__PURE__ */ f("span", { class: "inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none" }, [ + /* @__PURE__ */ f("svg", { + class: "w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800", + fill: "none", + stroke: "currentColor", + viewBox: "0 0 24 24", + xmlns: "http://www.w3.org/2000/svg" + }, [ + /* @__PURE__ */ f("path", { + d: "M9 5l7 7-7 7", + "stroke-linecap": "round", + "stroke-linejoin": "round", + "stroke-width": "2" + }) + ]), + /* @__PURE__ */ f("span", { class: "hidden" }, "Next") +], -1), Ca = [ + _a +], up = /* @__PURE__ */ C({ + __name: "FwbCarousel", + props: { + pictures: { + type: Array, + default() { + return []; + } + }, + noIndicators: { + type: Boolean, + default: !1 + }, + noControls: { + type: Boolean, + default: !1 + }, + slide: { + type: Boolean, + default: !1 + }, + slideInterval: { + type: Number, + default: 3e3 + }, + animation: { + type: Boolean, + default: !1 + } + }, + setup(e) { + const t = e, r = R(0), s = R(""), o = R(), n = () => { + o.value = setInterval(function() { + i(); + }, t.slideInterval); + }, a = () => { + clearInterval(o.value), n(); + }, l = (p) => { + r.value = p, a(); + }, i = () => { + r.value !== t.pictures.length - 1 ? r.value++ : r.value = 0, s.value = "right", a(); + }, d = () => { + r.value !== 0 ? r.value-- : r.value = t.pictures.length - 1, s.value = "left", a(); + }; + return He(() => { + t.slide && n(); + }), (p, m) => (u(), g("div", ma, [ + f("div", ba, [ + (u(!0), g(q, null, Me(e.pictures, (v, h) => (u(), g("div", { + key: h, + class: x([h === r.value ? "z-30" : "z-0", "absolute inset-0 -translate-y-0"]) + }, [ + f("img", { + alt: v.alt, + src: v.src, + class: "block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" + }, null, 8, va) + ], 2))), 128)) + ]), + e.noIndicators ? P("", !0) : (u(), g("div", ya, [ + (u(!0), g(q, null, Me(e.pictures, (v, h) => (u(), g("button", { + key: h, + "aria-label": "Slide " + h, + class: x([h === r.value ? "bg-white" : "bg-white/50", "w-3 h-3 rounded-full bg-white"]), + "aria-current": "false", + type: "button", + onClick: wt((b) => l(h), ["prevent"]) + }, null, 10, wa))), 128)) + ])), + e.noControls ? P("", !0) : (u(), g(q, { key: 1 }, [ + f("button", { + class: "flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none", + "data-carousel-prev": "", + type: "button", + onClick: wt(d, ["prevent"]) + }, ka), + f("button", { + class: "flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none", + "data-carousel-next": "", + type: "button", + onClick: wt(i, ["prevent"]) + }, Ca) + ], 64)) + ])); + } +}); +var Sr; +const tr = typeof window < "u", $a = (e) => typeof e < "u", Sa = (e) => typeof e == "function", Ta = (e) => typeof e == "string", jt = () => { +}; +tr && ((Sr = window?.navigator) != null && Sr.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent); +function _t(e) { + return typeof e == "function" ? e() : y(e); +} +function Pa(e) { + return e; +} +function Fa(e, t) { + var r; + if (typeof e == "number") + return e + t; + const s = ((r = e.match(/^-?[0-9]+\.?[0-9]*/)) == null ? void 0 : r[0]) || "", o = e.slice(s.length), n = parseFloat(s) + t; + return Number.isNaN(n) ? e : n + o; +} +function rr(e) { + return ao() ? (lo(e), !0) : !1; +} +function za(e) { + return typeof e == "function" ? c(e) : R(e); +} +function Aa(e, t = !0) { + is() ? He(e) : t ? e() : Zt(e); +} +function Ia(e, t, r = {}) { + const { + immediate: s = !0 + } = r, o = R(!1); + let n = null; + function a() { + n && (clearTimeout(n), n = null); + } + function l() { + o.value = !1, a(); + } + function i(...d) { + a(), o.value = !0, n = setTimeout(() => { + o.value = !1, n = null, e(...d); + }, _t(t)); + } + return s && (o.value = !0, tr && i()), rr(l), { + isPending: o, + start: i, + stop: l + }; +} +function Ma(e = !1, t = {}) { + const { + truthyValue: r = !0, + falsyValue: s = !1 + } = t, o = Xt(e), n = R(e); + function a(l) { + if (arguments.length) + return n.value = l, n.value; + { + const i = _t(r); + return n.value = n.value === i ? _t(s) : i, n.value; + } + } + return o ? a : [n, a]; +} +function Ze(e) { + var t; + const r = _t(e); + return (t = r?.$el) != null ? t : r; +} +const At = tr ? window : void 0; +function mt(...e) { + let t, r, s, o; + if (Ta(e[0]) ? ([r, s, o] = e, t = At) : [t, r, s, o] = e, !t) + return jt; + let n = jt; + const a = kt(() => Ze(t), (i) => { + n(), i && (i.addEventListener(r, s, o), n = () => { + i.removeEventListener(r, s, o), n = jt; + }); + }, { immediate: !0, flush: "post" }), l = () => { + a(), n(); + }; + return rr(l), l; +} +function Oa(e, t, r = {}) { + const { window: s = At, ignore: o, capture: n = !0, detectIframe: a = !1 } = r; + if (!s) + return; + const l = R(!0); + let i; + const d = (h) => { + s.clearTimeout(i); + const b = Ze(e); + !b || b === h.target || h.composedPath().includes(b) || !l.value || t(h); + }, p = (h) => o && o.some((b) => { + const k = Ze(b); + return k && (h.target === k || h.composedPath().includes(k)); + }), m = [ + mt(s, "click", d, { passive: !0, capture: n }), + mt(s, "pointerdown", (h) => { + const b = Ze(e); + l.value = !!b && !h.composedPath().includes(b) && !p(h); + }, { passive: !0 }), + mt(s, "pointerup", (h) => { + if (h.button === 0) { + const b = h.composedPath(); + h.composedPath = () => b, i = s.setTimeout(() => d(h), 50); + } + }, { passive: !0 }), + a && mt(s, "blur", (h) => { + var b; + const k = Ze(e); + ((b = document.activeElement) == null ? void 0 : b.tagName) === "IFRAME" && !k?.contains(document.activeElement) && t(h); + }) + ].filter(Boolean); + return () => m.forEach((h) => h()); +} +function Ba(e, t = !1) { + const r = R(), s = () => r.value = !!e(); + return s(), Aa(s, t), r; +} +function Qe(e, t = {}) { + const { window: r = At } = t, s = Ba(() => r && "matchMedia" in r && typeof r.matchMedia == "function"); + let o; + const n = R(!1), a = () => { + o && ("removeEventListener" in o ? o.removeEventListener("change", l) : o.removeListener(l)); + }, l = () => { + s.value && (a(), o = r.matchMedia(za(e).value), n.value = o.matches, "addEventListener" in o ? o.addEventListener("change", l) : o.addListener(l)); + }; + return io(l), rr(() => a()), n; +} +const _s = { + sm: 640, + md: 768, + lg: 1024, + xl: 1280, + "2xl": 1536 +}; +var La = Object.defineProperty, Tr = Object.getOwnPropertySymbols, Ea = Object.prototype.hasOwnProperty, Na = Object.prototype.propertyIsEnumerable, Pr = (e, t, r) => t in e ? La(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, Ra = (e, t) => { + for (var r in t || (t = {})) + Ea.call(t, r) && Pr(e, r, t[r]); + if (Tr) + for (var r of Tr(t)) + Na.call(t, r) && Pr(e, r, t[r]); + return e; +}; +function Cs(e, t = {}) { + function r(l, i) { + let d = e[l]; + return i != null && (d = Fa(d, i)), typeof d == "number" && (d = `${d}px`), d; + } + const { window: s = At } = t; + function o(l) { + return s ? s.matchMedia(l).matches : !1; + } + const n = (l) => Qe(`(min-width: ${r(l)})`, t), a = Object.keys(e).reduce((l, i) => (Object.defineProperty(l, i, { + get: () => n(i), + enumerable: !0, + configurable: !0 + }), l), {}); + return Ra({ + greater(l) { + return Qe(`(min-width: ${r(l, 0.1)})`, t); + }, + greaterOrEqual: n, + smaller(l) { + return Qe(`(max-width: ${r(l, -0.1)})`, t); + }, + smallerOrEqual(l) { + return Qe(`(max-width: ${r(l)})`, t); + }, + between(l, i) { + return Qe(`(min-width: ${r(l)}) and (max-width: ${r(i, -0.1)})`, t); + }, + isGreater(l) { + return o(`(min-width: ${r(l, 0.1)})`); + }, + isGreaterOrEqual(l) { + return o(`(min-width: ${r(l)})`); + }, + isSmaller(l) { + return o(`(max-width: ${r(l, -0.1)})`); + }, + isSmallerOrEqual(l) { + return o(`(max-width: ${r(l)})`); + }, + isInBetween(l, i) { + return o(`(min-width: ${r(l)}) and (max-width: ${r(i, -0.1)})`); + } + }, a); +} +function Va(e) { + return JSON.parse(JSON.stringify(e)); +} +const Fr = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, zr = "__vueuse_ssr_handlers__"; +Fr[zr] = Fr[zr] || {}; +var Ar; +(function(e) { + e.UP = "UP", e.RIGHT = "RIGHT", e.DOWN = "DOWN", e.LEFT = "LEFT", e.NONE = "NONE"; +})(Ar || (Ar = {})); +var ja = Object.defineProperty, Ir = Object.getOwnPropertySymbols, Ha = Object.prototype.hasOwnProperty, Da = Object.prototype.propertyIsEnumerable, Mr = (e, t, r) => t in e ? ja(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, Wa = (e, t) => { + for (var r in t || (t = {})) + Ha.call(t, r) && Mr(e, r, t[r]); + if (Ir) + for (var r of Ir(t)) + Da.call(t, r) && Mr(e, r, t[r]); + return e; +}; +const Ga = { + easeInSine: [0.12, 0, 0.39, 0], + easeOutSine: [0.61, 1, 0.88, 1], + easeInOutSine: [0.37, 0, 0.63, 1], + easeInQuad: [0.11, 0, 0.5, 0], + easeOutQuad: [0.5, 1, 0.89, 1], + easeInOutQuad: [0.45, 0, 0.55, 1], + easeInCubic: [0.32, 0, 0.67, 0], + easeOutCubic: [0.33, 1, 0.68, 1], + easeInOutCubic: [0.65, 0, 0.35, 1], + easeInQuart: [0.5, 0, 0.75, 0], + easeOutQuart: [0.25, 1, 0.5, 1], + easeInOutQuart: [0.76, 0, 0.24, 1], + easeInQuint: [0.64, 0, 0.78, 0], + easeOutQuint: [0.22, 1, 0.36, 1], + easeInOutQuint: [0.83, 0, 0.17, 1], + easeInExpo: [0.7, 0, 0.84, 0], + easeOutExpo: [0.16, 1, 0.3, 1], + easeInOutExpo: [0.87, 0, 0.13, 1], + easeInCirc: [0.55, 0, 1, 0.45], + easeOutCirc: [0, 0.55, 0.45, 1], + easeInOutCirc: [0.85, 0, 0.15, 1], + easeInBack: [0.36, 0, 0.66, -0.56], + easeOutBack: [0.34, 1.56, 0.64, 1], + easeInOutBack: [0.68, -0.6, 0.32, 1.6] +}; +Wa({ + linear: Pa +}, Ga); +function $s(e, t, r, s = {}) { + var o, n, a; + const { + clone: l = !1, + passive: i = !1, + eventName: d, + deep: p = !1, + defaultValue: m + } = s, v = is(), h = r || v?.emit || ((o = v?.$emit) == null ? void 0 : o.bind(v)) || ((a = (n = v?.proxy) == null ? void 0 : n.$emit) == null ? void 0 : a.bind(v?.proxy)); + let b = d; + t || (t = "modelValue"), b = d || b || `update:${t.toString()}`; + const k = (S) => l ? Sa(l) ? l(S) : Va(S) : S, $ = () => $a(e[t]) ? k(e[t]) : m; + if (i) { + const S = $(), T = R(S); + return kt(() => e[t], (A) => T.value = k(A)), kt(T, (A) => { + (A !== e[t] || p) && h(b, A); + }, { deep: p }), T; + } else + return c({ + get() { + return $(); + }, + set(S) { + h(b, S); + } + }); +} +var Ua = typeof global == "object" && global && global.Object === Object && global; +const qa = Ua; +var Ya = typeof self == "object" && self && self.Object === Object && self, Ja = qa || Ya || Function("return this")(); +const sr = Ja; +var Ka = sr.Symbol; +const Ce = Ka; +var Ss = Object.prototype, Qa = Ss.hasOwnProperty, Xa = Ss.toString, Xe = Ce ? Ce.toStringTag : void 0; +function Za(e) { + var t = Qa.call(e, Xe), r = e[Xe]; + try { + e[Xe] = void 0; + var s = !0; + } catch { + } + var o = Xa.call(e); + return s && (t ? e[Xe] = r : delete e[Xe]), o; +} +var el = Object.prototype, tl = el.toString; +function rl(e) { + return tl.call(e); +} +var sl = "[object Null]", ol = "[object Undefined]", Or = Ce ? Ce.toStringTag : void 0; +function or(e) { + return e == null ? e === void 0 ? ol : sl : Or && Or in Object(e) ? Za(e) : rl(e); +} +function nr(e) { + return e != null && typeof e == "object"; +} +var nl = "[object Symbol]"; +function ar(e) { + return typeof e == "symbol" || nr(e) && or(e) == nl; +} +function al(e, t) { + for (var r = -1, s = e == null ? 0 : e.length, o = Array(s); ++r < s; ) + o[r] = t(e[r], r, e); + return o; +} +var ll = Array.isArray; +const We = ll; +var il = 1 / 0, Br = Ce ? Ce.prototype : void 0, Lr = Br ? Br.toString : void 0; +function Ts(e) { + if (typeof e == "string") + return e; + if (We(e)) + return al(e, Ts) + ""; + if (ar(e)) + return Lr ? Lr.call(e) : ""; + var t = e + ""; + return t == "0" && 1 / e == -il ? "-0" : t; +} +function Ct(e) { + var t = typeof e; + return e != null && (t == "object" || t == "function"); +} +function dl(e) { + return e; +} +var ul = "[object AsyncFunction]", cl = "[object Function]", fl = "[object GeneratorFunction]", pl = "[object Proxy]"; +function gl(e) { + if (!Ct(e)) + return !1; + var t = or(e); + return t == cl || t == fl || t == ul || t == pl; +} +var hl = sr["__core-js_shared__"]; +const Ht = hl; +var Er = function() { + var e = /[^.]+$/.exec(Ht && Ht.keys && Ht.keys.IE_PROTO || ""); + return e ? "Symbol(src)_1." + e : ""; +}(); +function ml(e) { + return !!Er && Er in e; +} +var bl = Function.prototype, vl = bl.toString; +function yl(e) { + if (e != null) { + try { + return vl.call(e); + } catch { + } + try { + return e + ""; + } catch { + } + } + return ""; +} +var wl = /[\\^$.*+?()[\]{}|]/g, xl = /^\[object .+?Constructor\]$/, kl = Function.prototype, _l = Object.prototype, Cl = kl.toString, $l = _l.hasOwnProperty, Sl = RegExp( + "^" + Cl.call($l).replace(wl, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$" +); +function Tl(e) { + if (!Ct(e) || ml(e)) + return !1; + var t = gl(e) ? Sl : xl; + return t.test(yl(e)); +} +function Pl(e, t) { + return e?.[t]; +} +function lr(e, t) { + var r = Pl(e, t); + return Tl(r) ? r : void 0; +} +function Fl(e, t, r) { + switch (r.length) { + case 0: + return e.call(t); + case 1: + return e.call(t, r[0]); + case 2: + return e.call(t, r[0], r[1]); + case 3: + return e.call(t, r[0], r[1], r[2]); + } + return e.apply(t, r); +} +var zl = 800, Al = 16, Il = Date.now; +function Ml(e) { + var t = 0, r = 0; + return function() { + var s = Il(), o = Al - (s - r); + if (r = s, o > 0) { + if (++t >= zl) + return arguments[0]; + } else + t = 0; + return e.apply(void 0, arguments); + }; +} +function Ol(e) { + return function() { + return e; + }; +} +var Bl = function() { + try { + var e = lr(Object, "defineProperty"); + return e({}, "", {}), e; + } catch { + } +}(); +const $t = Bl; +var Ll = $t ? function(e, t) { + return $t(e, "toString", { + configurable: !0, + enumerable: !1, + value: Ol(t), + writable: !0 + }); +} : dl; +const El = Ll; +var Nl = Ml(El); +const Rl = Nl; +var Vl = 9007199254740991, jl = /^(?:0|[1-9]\d*)$/; +function Ps(e, t) { + var r = typeof e; + return t = t ?? Vl, !!t && (r == "number" || r != "symbol" && jl.test(e)) && e > -1 && e % 1 == 0 && e < t; +} +function Hl(e, t, r) { + t == "__proto__" && $t ? $t(e, t, { + configurable: !0, + enumerable: !0, + value: r, + writable: !0 + }) : e[t] = r; +} +function Fs(e, t) { + return e === t || e !== e && t !== t; +} +var Dl = Object.prototype, Wl = Dl.hasOwnProperty; +function Gl(e, t, r) { + var s = e[t]; + (!(Wl.call(e, t) && Fs(s, r)) || r === void 0 && !(t in e)) && Hl(e, t, r); +} +var Nr = Math.max; +function Ul(e, t, r) { + return t = Nr(t === void 0 ? e.length - 1 : t, 0), function() { + for (var s = arguments, o = -1, n = Nr(s.length - t, 0), a = Array(n); ++o < n; ) + a[o] = s[t + o]; + o = -1; + for (var l = Array(t + 1); ++o < t; ) + l[o] = s[o]; + return l[t] = r(a), Fl(e, this, l); + }; +} +var ql = 9007199254740991; +function Yl(e) { + return typeof e == "number" && e > -1 && e % 1 == 0 && e <= ql; +} +var Jl = "[object Arguments]"; +function Rr(e) { + return nr(e) && or(e) == Jl; +} +var zs = Object.prototype, Kl = zs.hasOwnProperty, Ql = zs.propertyIsEnumerable, Xl = Rr(function() { + return arguments; +}()) ? Rr : function(e) { + return nr(e) && Kl.call(e, "callee") && !Ql.call(e, "callee"); +}; +const As = Xl; +var Zl = /\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/, ei = /^\w*$/; +function ti(e, t) { + if (We(e)) + return !1; + var r = typeof e; + return r == "number" || r == "symbol" || r == "boolean" || e == null || ar(e) ? !0 : ei.test(e) || !Zl.test(e) || t != null && e in Object(t); +} +var ri = lr(Object, "create"); +const at = ri; +function si() { + this.__data__ = at ? at(null) : {}, this.size = 0; +} +function oi(e) { + var t = this.has(e) && delete this.__data__[e]; + return this.size -= t ? 1 : 0, t; +} +var ni = "__lodash_hash_undefined__", ai = Object.prototype, li = ai.hasOwnProperty; +function ii(e) { + var t = this.__data__; + if (at) { + var r = t[e]; + return r === ni ? void 0 : r; + } + return li.call(t, e) ? t[e] : void 0; +} +var di = Object.prototype, ui = di.hasOwnProperty; +function ci(e) { + var t = this.__data__; + return at ? t[e] !== void 0 : ui.call(t, e); +} +var fi = "__lodash_hash_undefined__"; +function pi(e, t) { + var r = this.__data__; + return this.size += this.has(e) ? 0 : 1, r[e] = at && t === void 0 ? fi : t, this; +} +function Oe(e) { + var t = -1, r = e == null ? 0 : e.length; + for (this.clear(); ++t < r; ) { + var s = e[t]; + this.set(s[0], s[1]); + } +} +Oe.prototype.clear = si; +Oe.prototype.delete = oi; +Oe.prototype.get = ii; +Oe.prototype.has = ci; +Oe.prototype.set = pi; +function gi() { + this.__data__ = [], this.size = 0; +} +function It(e, t) { + for (var r = e.length; r--; ) + if (Fs(e[r][0], t)) + return r; + return -1; +} +var hi = Array.prototype, mi = hi.splice; +function bi(e) { + var t = this.__data__, r = It(t, e); + if (r < 0) + return !1; + var s = t.length - 1; + return r == s ? t.pop() : mi.call(t, r, 1), --this.size, !0; +} +function vi(e) { + var t = this.__data__, r = It(t, e); + return r < 0 ? void 0 : t[r][1]; +} +function yi(e) { + return It(this.__data__, e) > -1; +} +function wi(e, t) { + var r = this.__data__, s = It(r, e); + return s < 0 ? (++this.size, r.push([e, t])) : r[s][1] = t, this; +} +function Ge(e) { + var t = -1, r = e == null ? 0 : e.length; + for (this.clear(); ++t < r; ) { + var s = e[t]; + this.set(s[0], s[1]); + } +} +Ge.prototype.clear = gi; +Ge.prototype.delete = bi; +Ge.prototype.get = vi; +Ge.prototype.has = yi; +Ge.prototype.set = wi; +var xi = lr(sr, "Map"); +const ki = xi; +function _i() { + this.size = 0, this.__data__ = { + hash: new Oe(), + map: new (ki || Ge)(), + string: new Oe() + }; +} +function Ci(e) { + var t = typeof e; + return t == "string" || t == "number" || t == "symbol" || t == "boolean" ? e !== "__proto__" : e === null; +} +function Mt(e, t) { + var r = e.__data__; + return Ci(t) ? r[typeof t == "string" ? "string" : "hash"] : r.map; +} +function $i(e) { + var t = Mt(this, e).delete(e); + return this.size -= t ? 1 : 0, t; +} +function Si(e) { + return Mt(this, e).get(e); +} +function Ti(e) { + return Mt(this, e).has(e); +} +function Pi(e, t) { + var r = Mt(this, e), s = r.size; + return r.set(e, t), this.size += r.size == s ? 0 : 1, this; +} +function Le(e) { + var t = -1, r = e == null ? 0 : e.length; + for (this.clear(); ++t < r; ) { + var s = e[t]; + this.set(s[0], s[1]); + } +} +Le.prototype.clear = _i; +Le.prototype.delete = $i; +Le.prototype.get = Si; +Le.prototype.has = Ti; +Le.prototype.set = Pi; +var Fi = "Expected a function"; +function ir(e, t) { + if (typeof e != "function" || t != null && typeof t != "function") + throw new TypeError(Fi); + var r = function() { + var s = arguments, o = t ? t.apply(this, s) : s[0], n = r.cache; + if (n.has(o)) + return n.get(o); + var a = e.apply(this, s); + return r.cache = n.set(o, a) || n, a; + }; + return r.cache = new (ir.Cache || Le)(), r; +} +ir.Cache = Le; +var zi = 500; +function Ai(e) { + var t = ir(e, function(s) { + return r.size === zi && r.clear(), s; + }), r = t.cache; + return t; +} +var Ii = /[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g, Mi = /\\(\\)?/g, Oi = Ai(function(e) { + var t = []; + return e.charCodeAt(0) === 46 && t.push(""), e.replace(Ii, function(r, s, o, n) { + t.push(o ? n.replace(Mi, "$1") : s || r); + }), t; +}); +const Bi = Oi; +function Li(e) { + return e == null ? "" : Ts(e); +} +function Ot(e, t) { + return We(e) ? e : ti(e, t) ? [e] : Bi(Li(e)); +} +var Ei = 1 / 0; +function dr(e) { + if (typeof e == "string" || ar(e)) + return e; + var t = e + ""; + return t == "0" && 1 / e == -Ei ? "-0" : t; +} +function Ni(e, t) { + t = Ot(t, e); + for (var r = 0, s = t.length; e != null && r < s; ) + e = e[dr(t[r++])]; + return r && r == s ? e : void 0; +} +function Ri(e, t) { + for (var r = -1, s = t.length, o = e.length; ++r < s; ) + e[o + r] = t[r]; + return e; +} +var Vr = Ce ? Ce.isConcatSpreadable : void 0; +function Vi(e) { + return We(e) || As(e) || !!(Vr && e && e[Vr]); +} +function Is(e, t, r, s, o) { + var n = -1, a = e.length; + for (r || (r = Vi), o || (o = []); ++n < a; ) { + var l = e[n]; + t > 0 && r(l) ? t > 1 ? Is(l, t - 1, r, s, o) : Ri(o, l) : s || (o[o.length] = l); + } + return o; +} +function ji(e) { + var t = e == null ? 0 : e.length; + return t ? Is(e, 1) : []; +} +function Hi(e) { + return Rl(Ul(e, void 0, ji), e + ""); +} +function Di(e, t) { + return e != null && t in Object(e); +} +function Wi(e, t, r) { + t = Ot(t, e); + for (var s = -1, o = t.length, n = !1; ++s < o; ) { + var a = dr(t[s]); + if (!(n = e != null && r(e, a))) + break; + e = e[a]; + } + return n || ++s != o ? n : (o = e == null ? 0 : e.length, !!o && Yl(o) && Ps(a, o) && (We(e) || As(e))); +} +function Gi(e, t) { + return e != null && Wi(e, t, Di); +} +function Ui(e, t, r, s) { + if (!Ct(e)) + return e; + t = Ot(t, e); + for (var o = -1, n = t.length, a = n - 1, l = e; l != null && ++o < n; ) { + var i = dr(t[o]), d = r; + if (i === "__proto__" || i === "constructor" || i === "prototype") + return e; + if (o != a) { + var p = l[i]; + d = s ? s(p, i, l) : void 0, d === void 0 && (d = Ct(p) ? p : Ps(t[o + 1]) ? [] : {}); + } + Gl(l, i, d), l = l[i]; + } + return e; +} +function qi(e, t, r) { + for (var s = -1, o = t.length, n = {}; ++s < o; ) { + var a = t[s], l = Ni(e, a); + r(l, a) && Ui(n, Ot(a, e), l); + } + return n; +} +function Yi(e, t) { + return qi(e, t, function(r, s) { + return Gi(e, s); + }); +} +var Ji = Hi(function(e, t) { + return e == null ? {} : Yi(e, t); +}); +const Ki = Ji; +function St(e, t = !0, r = []) { + return e.forEach((s) => { + if (s !== null) { + if (typeof s != "object") { + (typeof s == "string" || typeof s == "number") && r.push(te(String(s))); + return; + } + if (Array.isArray(s)) { + St(s, t, r); + return; + } + if (s.type === q) { + if (s.children === null) + return; + Array.isArray(s.children) && St(s.children, t, r); + } else + s.type !== uo && r.push(s); + } + }), r; +} +function Qi(e, t = "default", r = void 0) { + const s = e[t]; + if (!s) + return console.warn("getFirstSlotVNode", `slot[${t}] is empty`), null; + const o = St(s(r)); + return o.length === 1 ? o[0] : (console.warn("getFirstSlotVNode", `slot[${t}] should have exactly one child`), null); +} +const Xi = { + focus: ["onFocus", "onBlur"], + click: ["onClick"], + hover: ["onMouseenter", "onMouseleave"] +}; +function Zi(e, t) { + Object.entries(Xi).forEach(([, r]) => { + r.forEach((s) => { + e.props ? e.props = Object.assign({}, e.props) : e.props = {}; + const o = e.props[s], n = t[s]; + o ? e.props[s] = (...a) => { + o(...a), n(...a); + } : e.props[s] = n; + }); + }); +} +const jr = C({ + name: "SlotListener", + props: { + trigger: { + type: String, + default: "click" + } + }, + emits: ["click", "focus", "blur", "mouseenter", "mouseleave"], + setup(e, { emit: t }) { + return { + handleClick: (l) => { + t("click", l); + }, + handleBlur: (l) => { + t("blur", l); + }, + handleFocus: (l) => { + t("focus", l); + }, + handleMouseLeave: (l) => { + t("mouseleave", l); + }, + handleMouseEnter: (l) => { + t("mouseenter", l); + } + }; + }, + render() { + const { + $slots: e + } = this, t = { + onClick: this.handleClick, + onMouseenter: this.handleMouseEnter, + onMouseleave: this.handleMouseLeave, + onFocus: this.handleFocus, + onBlur: this.handleBlur + }, r = Qi(e, "default"), s = [ + t + ]; + return r?.props && s.push( + Ki(r.props, "onClick", "onMouseenter", "onMouseleave", "onFocus", "onBlur") + ), r && Zi( + r, + { + onBlur: (n) => { + s.forEach((a) => { + a?.onBlur?.(n); + }); + }, + onFocus: (n) => { + s.forEach((a) => { + a?.onFocus?.(n); + }); + }, + onClick: (n) => { + s.forEach((a) => { + a?.onClick?.(n); + }); + }, + onMouseenter: (n) => { + s.forEach((a) => { + a?.onMouseenter?.(n); + }); + }, + onMouseleave: (n) => { + s.forEach((a) => { + a?.onMouseleave?.(n); + }); + } + } + ), r; + } +}), ed = "absolute z-10 bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700", bt = 8, td = { + bottom: "", + left: "top-0", + right: "top-0", + top: "" +}, rd = { + bottom(e) { + return `bottom: -${e.height + bt}px;`; + }, + left(e) { + return `left: -${e.width + bt}px;`; + }, + right(e) { + return `right: -${e.width + bt}px;`; + }, + top(e) { + return `top: -${e.height + bt}px;`; + } +}; +function sd(e) { + kt(e.visible, (o) => { + o && Zt(() => r()); + }); + const t = R(""), r = () => { + const o = e.contentRef.value?.getBoundingClientRect(); + if (!o) { + t.value = ""; + return; + } + t.value = rd[e.placement.value](o); + }; + return { + contentClasses: c(() => W( + ed, + td[e.placement.value] + )), + contentStyles: t + }; +} +const od = (e) => (us("data-v-7ea3917f"), e = e(), cs(), e), nd = { class: "inline-flex items-center" }, ad = /* @__PURE__ */ od(() => /* @__PURE__ */ f("svg", { + class: "w-4 h-4 ml-2", + fill: "none", + stroke: "currentColor", + viewBox: "0 0 24 24", + xmlns: "http://www.w3.org/2000/svg" +}, [ + /* @__PURE__ */ f("path", { + d: "M19 9l-7 7-7-7", + "stroke-linecap": "round", + "stroke-linejoin": "round", + "stroke-width": "2" + }) +], -1)), ld = /* @__PURE__ */ C({ + __name: "FwbDropdown", + props: { + placement: { default: "bottom" }, + text: { default: "" }, + transition: { default: "" } + }, + setup(e) { + const t = R(!1), r = () => t.value = !1, s = () => t.value = !t.value, o = e, n = { + bottom: "to-bottom", + left: "to-left", + right: "to-right", + top: "to-top" + }, a = c(() => o.transition === null ? n[o.placement] : o.transition), l = R(), i = R(), { contentClasses: d, contentStyles: p } = sd({ + placement: nt(o, "placement"), + visible: t, + contentRef: l + }); + return Oa(i, () => { + t.value && (t.value = !1); + }), (m, v) => (u(), g("div", { + ref_key: "wrapper", + ref: i, + class: "inline-flex relative" + }, [ + f("div", nd, [ + ze(jr, { onClick: s }, { + default: j(() => [ + w(m.$slots, "trigger", {}, () => [ + ze(ua, null, { + suffix: j(() => [ + ad + ]), + default: j(() => [ + te(M(m.text) + " ", 1) + ]), + _: 1 + }) + ], !0) + ]), + _: 3 + }) + ]), + ze(ds, { name: a.value }, { + default: j(() => [ + t.value ? (u(), g("div", { + key: 0, + ref_key: "content", + ref: l, + class: x([y(d)]), + style: et(y(p)) + }, [ + ze(jr, { onClick: r }, { + default: j(() => [ + w(m.$slots, "default", {}, void 0, !0) + ]), + _: 3 + }) + ], 6)) : P("", !0) + ]), + _: 3 + }, 8, ["name"]) + ], 512)); + } +}); +const cp = /* @__PURE__ */ he(ld, [["__scopeId", "data-v-7ea3917f"]]), fp = /* @__PURE__ */ C({ + inheritAttrs: !1, + __name: "FwbFooter", + props: { + sticky: { type: Boolean, default: !1 }, + footerType: { default: "default" } + }, + setup(e) { + const t = e, r = ae(), s = B( + t.footerType === "sitemap" && "bg-gray-800", + t.footerType === "socialmedia" && "p-4 bg-white sm:p-6 dark:bg-gray-800", + t.footerType === "logo" && "p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800", + t.footerType === "default" && "p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800", + t.sticky && "absolute bottom-0 left-0 z-20 w-full border-t border-gray-200 dark:border-gray-600", + r.class + ); + return (o, n) => (u(), g("footer", re(o.$attrs, { class: y(s) }), [ + w(o.$slots, "default") + ], 16)); + } +}), id = ["href"], dd = ["alt", "src"], pp = /* @__PURE__ */ C({ + inheritAttrs: !1, + __name: "FwbFooterBrand", + props: { + href: { default: "" }, + src: { default: "" }, + alt: { default: "" }, + name: { default: "" }, + imageClass: { default: "" }, + nameClass: { default: "" }, + aClass: { default: "" } + }, + setup(e) { + const t = ae(), r = e, s = B("mb-6 md:mb-0", t.class), o = B("flex items-center", r.aClass), n = B("h-8 mr-3", r.imageClass), a = B("self-center text-2xl font-semibold whitespace-nowrap dark:text-white", r.nameClass); + return (l, i) => (u(), g("div", re({ class: y(s) }, l.$attrs), [ + f("a", { + class: x(y(o)), + href: l.href + }, [ + f("img", { + alt: l.alt, + class: x(y(n)), + src: l.src + }, null, 10, dd), + f("span", { + class: x(y(a)) + }, M(l.name), 3) + ], 10, id) + ], 16)); + } +}), gp = /* @__PURE__ */ C({ + inheritAttrs: !1, + __name: "FwbFooterCopyright", + props: { + year: { default: (/* @__PURE__ */ new Date()).getFullYear() }, + by: { default: "" }, + href: { default: "" }, + aClass: { default: "" }, + copyrightMessage: { default: "All Rights Reserved." } + }, + setup(e) { + const t = e, r = ae(), s = B("block text-sm text-gray-500 sm:text-center dark:text-gray-400", r.class), o = B(t.href ? "hover:underline" : "ml-1", t.aClass), n = t.href ? "a" : "span"; + return (a, l) => (u(), g("span", re(a.$attrs, { class: y(s) }), [ + te(" © " + M(a.year) + " ", 1), + (u(), H(X(y(n)), { + class: x(y(o)), + href: a.href + }, { + default: j(() => [ + te(M(a.by), 1) + ]), + _: 1 + }, 8, ["class", "href"])), + te(" " + M(a.copyrightMessage), 1) + ], 16)); + } +}), ud = { class: "sr-only" }, hp = /* @__PURE__ */ C({ + inheritAttrs: !1, + __name: "FwbFooterIcon", + props: { + href: { default: "" }, + ariaLabel: { default: "" }, + srText: { default: "" } + }, + setup(e) { + const t = ae(), s = e.href ? "a" : "span", o = B("text-gray-500 hover:text-gray-900 dark:hover:text-white", t.class); + return (n, a) => (u(), H(X(y(s)), re({ + "aria-label": n.ariaLabel, + class: y(o), + href: n.href + }, n.$attrs), { + default: j(() => [ + w(n.$slots, "default"), + f("span", ud, M(n.srText), 1) + ]), + _: 3 + }, 16, ["aria-label", "class", "href"])); + } +}), mp = /* @__PURE__ */ C({ + inheritAttrs: !1, + __name: "FwbFooterLink", + props: { + href: { default: "" }, + aClass: { default: "" }, + component: { default: "a" } + }, + setup(e) { + const t = ae(), r = e, s = r.component === "a" ? "a" : be(r.component), o = r.component === "router-link" ? "to" : "href", n = B("hover:underline", r.aClass), a = B("mr-4 md:mr-6 last:mr-0", t.class); + return (l, i) => (u(), g("li", re(l.$attrs, { class: y(a) }), [ + (u(), H(X(y(s)), Se({ + [y(o) || ""]: l.href, + class: y(n) + }), { + default: j(() => [ + w(l.$slots, "default") + ]), + _: 3 + }, 16, ["class"])) + ], 16)); + } +}), bp = /* @__PURE__ */ C({ + inheritAttrs: !1, + __name: "FwbFooterLinkGroup", + setup(e) { + const t = ae(), r = B("flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0", t.class); + return (s, o) => (u(), g("ul", re(s.$attrs, { class: y(r) }), [ + w(s.$slots, "default") + ], 16)); + } +}), vp = /* @__PURE__ */ C({ + inheritAttrs: !1, + __name: "FwbJumbotron", + props: { + headerLevel: { default: 1 }, + subText: { default: "" }, + subTextClasses: { default: "" }, + headerText: { default: "" }, + headerClasses: { default: "" } + }, + setup(e) { + const t = e, r = ae(), s = c(() => B( + "bg-white dark:bg-gray-900 py-8 lg:py-16 px-4 mx-auto max-w-screen-xl text-center ", + r.class + )), o = c(() => B("mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white", t.headerClasses)), n = c(() => B("mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-0 lg:px-16 dark:text-gray-400", t.subTextClasses)); + return (a, l) => (u(), g("div", re(a.$attrs, { class: s.value }), [ + (u(), H(X(`h${a.headerLevel}`), { + class: x(o.value) + }, { + default: j(() => [ + te(M(a.headerText), 1) + ]), + _: 1 + }, 8, ["class"])), + f("div", { + class: x(n.value) + }, M(a.subText), 3), + w(a.$slots, "default") + ], 16)); + } +}), cd = "overflow-hidden w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white"; +function fd() { + return { + containerClasses: c(() => W( + cd + )) + }; +} +const yp = /* @__PURE__ */ C({ + __name: "FwbListGroup", + setup(e) { + const { containerClasses: t } = fd(); + return (r, s) => (u(), g("ul", { + class: x(y(t)) + }, [ + w(r.$slots, "default") + ], 2)); + } +}), pd = { + border: (e) => e.substring(0, e.lastIndexOf("-")) +}, gd = (e, t = pd) => { + const s = Object.keys(t).find((o) => e.includes(o)); + return s ? t[s](e) : e.substring(0, e.indexOf("-")); +}; +function ne(...e) { + return e.filter((t) => t).reduce((t, r) => { + const s = Array.isArray(r) ? Array.from(r).map((p) => p.split(" ")).flat() : r.split(" "), o = s.map((p) => gd(p)), n = o.filter((p) => !t.types.includes(p)), l = [...o.filter((p) => t.types.includes(p)), ...n], i = [.../* @__PURE__ */ new Set([...t.types, ...l])], d = i.map((p) => { + if (l.includes(p)) { + const v = o.indexOf(p); + if (v >= 0) + return s[v] || ""; + } + const m = t.types.indexOf(p); + return m >= 0 && t.classes[m] || ""; + }).filter((p) => !!p); + return { + types: i, + classes: d + }; + }, { types: [], classes: [] }).classes.join(" "); +} +const hd = "inline-flex items-center w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600", md = "block w-full px-4 py-2 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white", bd = "bg-gray-100 cursor-not-allowed dark:bg-gray-600 dark:text-gray-400"; +function vd(e) { + return { + itemClasses: c(() => ne( + hd, + e.disabled.value ? bd : "", + !e.disabled.value && e.hover.value ? md : "" + )) + }; +} +const yd = { + key: 0, + class: "mr-2" +}, wd = { + key: 1, + class: "ml-2" +}, wp = /* @__PURE__ */ C({ + __name: "FwbListGroupItem", + props: { + hover: { + type: Boolean, + default: !1 + }, + disabled: { + type: Boolean, + default: !1 + } + }, + setup(e) { + const t = e, { itemClasses: r } = vd(Y(t)); + return (s, o) => (u(), g("li", { + class: x(y(r)) + }, [ + s.$slots.prefix ? (u(), g("div", yd, [ + w(s.$slots, "prefix") + ])) : P("", !0), + w(s.$slots, "default"), + s.$slots.suffix ? (u(), g("div", wd, [ + w(s.$slots, "suffix") + ])) : P("", !0) + ], 2)); + } +}), xd = /* @__PURE__ */ f("div", { class: "bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40" }, null, -1), kd = { class: "relative bg-white rounded-lg shadow dark:bg-gray-700" }, _d = /* @__PURE__ */ f("svg", { + class: "w-5 h-5", + fill: "currentColor", + viewBox: "0 0 20 20", + xmlns: "http://www.w3.org/2000/svg" +}, [ + /* @__PURE__ */ f("path", { + "clip-rule": "evenodd", + d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", + "fill-rule": "evenodd" + }) +], -1), Cd = { + key: 0, + class: "p-6 rounded-b border-gray-200 border-t dark:border-gray-600" +}, xp = /* @__PURE__ */ C({ + __name: "FwbModal", + props: { + notEscapable: { type: Boolean, default: !1 }, + persistent: { type: Boolean, default: !1 }, + size: { default: "2xl" } + }, + emits: ["close", "click:outside"], + setup(e, { emit: t }) { + const r = e, s = t, o = { + xs: "max-w-xs", + sm: "max-w-sm", + md: "max-w-md", + lg: "max-w-lg", + xl: "max-w-xl", + "2xl": "max-w-2xl", + "3xl": "max-w-3xl", + "4xl": "max-w-4xl", + "5xl": "max-w-5xl", + "6xl": "max-w-6xl", + "7xl": "max-w-7xl" + }; + function n() { + s("close"); + } + function a() { + r.persistent || (s("click:outside"), n()); + } + function l() { + !r.notEscapable && !r.persistent && n(); + } + const i = R(null); + return He(() => { + i.value && i.value.focus(); + }), (d, p) => (u(), g("div", null, [ + xd, + f("div", { + ref_key: "modalRef", + ref: i, + class: "overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center flex", + tabindex: "0", + onClick: wt(a, ["self"]), + onKeyup: fs(l, ["esc"]) + }, [ + f("div", { + class: x([`${o[d.size]}`, "relative p-4 w-full h-full"]) + }, [ + f("div", kd, [ + f("div", { + class: x([d.$slots.header ? "border-b border-gray-200 dark:border-gray-600" : "", "p-4 rounded-t flex justify-between items-center"]) + }, [ + w(d.$slots, "header"), + d.persistent ? P("", !0) : (u(), g("button", { + key: 0, + "aria-label": "close", + class: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white", + type: "button", + onClick: n + }, [ + w(d.$slots, "close-icon", {}, () => [ + _d + ]) + ])) + ], 2), + f("div", { + class: x([d.$slots.header ? "" : "pt-0", "p-6"]) + }, [ + w(d.$slots, "body") + ], 2), + d.$slots.footer ? (u(), g("div", Cd, [ + w(d.$slots, "footer") + ])) : P("", !0) + ]) + ], 2) + ], 544) + ])); + } +}), $d = { class: "container flex flex-wrap justify-between items-center mx-auto" }, Sd = /* @__PURE__ */ f("span", { class: "sr-only" }, "Open main menu", -1), Td = /* @__PURE__ */ f("svg", { + "aria-hidden": "true", + class: "w-6 h-6", + fill: "currentColor", + viewBox: "0 0 20 20", + xmlns: "http://www.w3.org/2000/svg" +}, [ + /* @__PURE__ */ f("path", { + "clip-rule": "evenodd", + d: "M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z", + "fill-rule": "evenodd" + }) +], -1), Pd = { + key: 0, + class: "hidden md:order-2 md:flex" +}, Fd = " border-gray-200", zd = "fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600", Ad = "rounded", Id = "p-3 bg-gray-50 dark:bg-gray-800 dark:border-gray-700", Md = "bg-white px-2 sm:px-4 py-2.5 dark:bg-gray-900", kp = /* @__PURE__ */ C({ + __name: "FwbNavbar", + props: { + class: { + type: String, + default: "" + }, + sticky: { + type: Boolean, + default: !1 + }, + rounded: { + type: Boolean, + default: !1 + }, + solid: { + type: Boolean, + default: !1 + } + }, + setup(e) { + const t = e, r = R(!1); + function s() { + r.value = !r.value; + } + de("megaMenuToggle", { + megaMenuVisble: r, + toggleMenu: s + }); + const o = De(), a = Cs(_s).smaller("md"), l = R(!1), i = Ma(l), d = c(() => me( + [ + Fd, + t.sticky ? zd : "", + t.rounded ? Ad : "", + t.solid ? Id : Md, + t.class + ].join(" ") + )), p = c( + () => a ? l.value : !0 + ); + return (m, v) => (u(), g("nav", { + class: x(d.value) + }, [ + f("div", $d, [ + w(m.$slots, "logo"), + f("button", { + "aria-controls": "navbar-default", + "aria-expanded": "false", + class: "inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600", + type: "button", + onClick: v[0] || (v[0] = (h) => y(i)()) + }, [ + Sd, + w(m.$slots, "menu-icon", {}, () => [ + Td + ]) + ]), + w(m.$slots, "default", { isShowMenu: p.value }), + y(o)["right-side"] ? (u(), g("div", Pd, [ + w(m.$slots, "right-side") + ])) : P("", !0) + ]), + w(m.$slots, "mega-menu-dropdown") + ], 2)); + } +}), Od = "w-full md:block md:w-auto", Bd = "flex flex-col p-4 mt-4 rounded-lg border border-gray-100 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700", Ld = "bg-gray-50", _p = /* @__PURE__ */ C({ + __name: "FwbNavbarCollapse", + props: { + isShowMenu: { + type: Boolean, + default: !1 + } + }, + setup(e) { + const r = Cs(_s).smaller("md"), s = e, o = c(() => W( + Od, + s.isShowMenu ? "" : "hidden" + )), n = c(() => W( + Bd, + r.value ? Ld : "" + )); + return (a, l) => (u(), g("div", { + class: x(o.value) + }, [ + f("ul", { + class: x(n.value) + }, [ + w(a.$slots, "default") + ], 2) + ], 2)); + } +}), Ed = "bg-blue-700 md:bg-transparent text-white md:text-blue-700 dark:text-white", Nd = "text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent", Rd = "block py-2 pr-4 pl-3 rounded md:p-0", Cp = /* @__PURE__ */ C({ + __name: "FwbNavbarLink", + props: { + link: { default: "/" }, + isActive: { type: Boolean, default: !1 }, + component: { default: "a" }, + linkAttr: { default: "href" }, + disabled: { type: Boolean, default: !1 } + }, + emits: ["click"], + setup(e, { emit: t }) { + const r = e, s = t, o = c(() => r.component !== "a" ? be(r.component) : "a"), n = B( + Rd, + r.isActive ? Ed : Nd + ), a = (l) => { + r.disabled || s("click", l); + }; + return (l, i) => (u(), g("li", null, [ + (u(), H(X(o.value), Se({ + [l.linkAttr || ""]: l.link, + class: y(n), + onClick: a + }), { + default: j(() => [ + w(l.$slots, "default") + ]), + _: 3 + }, 16, ["class"])) + ])); + } +}), Vd = ["src", "alt"], jd = { class: "self-center text-xl font-semibold whitespace-nowrap dark:text-white" }, $p = /* @__PURE__ */ C({ + __name: "FwbNavbarLogo", + props: { + link: { default: "/" }, + imageUrl: { default: "/assets/logo.svg" }, + alt: { default: "Logo" }, + component: { default: "a" }, + linkAttr: { default: "href" } + }, + setup(e) { + const t = e, r = c(() => t.component !== "a" ? be(t.component) : "a"); + return (s, o) => (u(), H(X(r.value), Se({ + class: "flex items-center", + [s.linkAttr || ""]: s.link + }), { + default: j(() => [ + f("img", { + src: s.imageUrl, + alt: s.alt, + class: "mr-3 h-6 sm:h-10" + }, null, 8, Vd), + f("span", jd, [ + w(s.$slots, "default") + ]) + ]), + _: 3 + }, 16)); + } +}), Hd = /* @__PURE__ */ f("svg", { + version: "1.1", + xmlns: "http://www.w3.org/2000/svg", + width: "16", + height: "16", + viewBox: "0 0 24 24", + class: "dark:fill-gray-400 hover:dark:fill-white" +}, [ + /* @__PURE__ */ f("title", null, "settings"), + /* @__PURE__ */ f("path", { d: "M16 12c0-1.104-0.449-2.106-1.172-2.828s-1.724-1.172-2.828-1.172-2.106 0.449-2.828 1.172-1.172 1.724-1.172 2.828 0.449 2.106 1.172 2.828 1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828zM14 12c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414zM20.315 15.404c0.046-0.105 0.112-0.191 0.192-0.257 0.112-0.092 0.251-0.146 0.403-0.147h0.090c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121-0.337-1.58-0.879-2.121-1.293-0.879-2.121-0.879h-0.159c-0.11-0.001-0.215-0.028-0.308-0.076-0.127-0.066-0.23-0.172-0.292-0.312-0.003-0.029-0.004-0.059-0.004-0.089-0.024-0.055-0.040-0.111-0.049-0.168 0.020-0.334 0.077-0.454 0.168-0.547l0.062-0.062c0.585-0.586 0.878-1.356 0.877-2.122s-0.294-1.536-0.881-2.122c-0.586-0.585-1.356-0.878-2.122-0.877s-1.536 0.294-2.12 0.879l-0.046 0.046c-0.083 0.080-0.183 0.136-0.288 0.166-0.14 0.039-0.291 0.032-0.438-0.033-0.101-0.044-0.187-0.11-0.253-0.19-0.092-0.112-0.146-0.251-0.147-0.403v-0.090c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879-1.58 0.337-2.121 0.879-0.879 1.293-0.879 2.121v0.159c-0.001 0.11-0.028 0.215-0.076 0.308-0.066 0.127-0.172 0.23-0.312 0.292-0.029 0.003-0.059 0.004-0.089 0.004-0.055 0.024-0.111 0.040-0.168 0.049-0.335-0.021-0.455-0.078-0.548-0.169l-0.062-0.062c-0.586-0.585-1.355-0.878-2.122-0.878s-1.535 0.294-2.122 0.882c-0.585 0.586-0.878 1.355-0.878 2.122s0.294 1.536 0.879 2.12l0.048 0.047c0.080 0.083 0.136 0.183 0.166 0.288 0.039 0.14 0.032 0.291-0.031 0.434-0.006 0.016-0.013 0.034-0.021 0.052-0.041 0.109-0.108 0.203-0.191 0.275-0.11 0.095-0.25 0.153-0.383 0.156h-0.090c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.294-0.879 2.122 0.337 1.58 0.879 2.121 1.293 0.879 2.121 0.879h0.159c0.11 0.001 0.215 0.028 0.308 0.076 0.128 0.067 0.233 0.174 0.296 0.321 0.024 0.055 0.040 0.111 0.049 0.168-0.020 0.334-0.077 0.454-0.168 0.547l-0.062 0.062c-0.585 0.586-0.878 1.356-0.877 2.122s0.294 1.536 0.881 2.122c0.586 0.585 1.356 0.878 2.122 0.877s1.536-0.294 2.12-0.879l0.047-0.048c0.083-0.080 0.183-0.136 0.288-0.166 0.14-0.039 0.291-0.032 0.434 0.031 0.016 0.006 0.034 0.013 0.052 0.021 0.109 0.041 0.203 0.108 0.275 0.191 0.095 0.11 0.153 0.25 0.156 0.383v0.092c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879 1.58-0.337 2.121-0.879 0.879-1.293 0.879-2.121v-0.159c0.001-0.11 0.028-0.215 0.076-0.308 0.067-0.128 0.174-0.233 0.321-0.296 0.055-0.024 0.111-0.040 0.168-0.049 0.334 0.020 0.454 0.077 0.547 0.168l0.062 0.062c0.586 0.585 1.356 0.878 2.122 0.877s1.536-0.294 2.122-0.881c0.585-0.586 0.878-1.356 0.877-2.122s-0.294-1.536-0.879-2.12l-0.048-0.047c-0.080-0.083-0.136-0.183-0.166-0.288-0.039-0.14-0.032-0.291 0.031-0.434zM18.396 9.302c-0.012-0.201-0.038-0.297-0.076-0.382v0.080c0 0.043 0.003 0.084 0.008 0.125 0.021 0.060 0.043 0.119 0.068 0.177 0.004 0.090 0.005 0.091 0.005 0.092 0.249 0.581 0.684 1.030 1.208 1.303 0.371 0.193 0.785 0.298 1.211 0.303h0.18c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707-0.111 0.525-0.293 0.707-0.431 0.293-0.707 0.293h-0.090c-0.637 0.003-1.22 0.228-1.675 0.603-0.323 0.266-0.581 0.607-0.75 0.993-0.257 0.582-0.288 1.21-0.127 1.782 0.119 0.423 0.341 0.814 0.652 1.136l0.072 0.073c0.196 0.196 0.294 0.45 0.294 0.707s-0.097 0.512-0.292 0.707c-0.197 0.197-0.451 0.295-0.709 0.295s-0.512-0.097-0.707-0.292l-0.061-0.061c-0.463-0.453-1.040-0.702-1.632-0.752-0.437-0.037-0.882 0.034-1.293 0.212-0.578 0.248-1.027 0.683-1.3 1.206-0.193 0.371-0.298 0.785-0.303 1.211v0.181c0 0.276-0.111 0.525-0.293 0.707s-0.43 0.292-0.706 0.292-0.525-0.111-0.707-0.293-0.293-0.431-0.293-0.707v-0.090c-0.015-0.66-0.255-1.242-0.644-1.692-0.284-0.328-0.646-0.585-1.058-0.744-0.575-0.247-1.193-0.274-1.756-0.116-0.423 0.119-0.814 0.341-1.136 0.652l-0.073 0.072c-0.196 0.196-0.45 0.294-0.707 0.294s-0.512-0.097-0.707-0.292c-0.197-0.197-0.295-0.451-0.295-0.709s0.097-0.512 0.292-0.707l0.061-0.061c0.453-0.463 0.702-1.040 0.752-1.632 0.037-0.437-0.034-0.882-0.212-1.293-0.248-0.578-0.683-1.027-1.206-1.3-0.371-0.193-0.785-0.298-1.211-0.303l-0.18 0.001c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707 0.111-0.525 0.293-0.707 0.431-0.293 0.707-0.293h0.090c0.66-0.015 1.242-0.255 1.692-0.644 0.328-0.284 0.585-0.646 0.744-1.058 0.247-0.575 0.274-1.193 0.116-1.756-0.119-0.423-0.341-0.814-0.652-1.136l-0.073-0.073c-0.196-0.196-0.294-0.45-0.294-0.707s0.097-0.512 0.292-0.707c0.197-0.197 0.451-0.295 0.709-0.295s0.512 0.097 0.707 0.292l0.061 0.061c0.463 0.453 1.040 0.702 1.632 0.752 0.37 0.032 0.745-0.014 1.101-0.137 0.096-0.012 0.186-0.036 0.266-0.072-0.031 0.001-0.061 0.003-0.089 0.004-0.201 0.012-0.297 0.038-0.382 0.076h0.080c0.043 0 0.084-0.003 0.125-0.008 0.060-0.021 0.119-0.043 0.177-0.068 0.090-0.004 0.091-0.005 0.092-0.005 0.581-0.249 1.030-0.684 1.303-1.208 0.193-0.37 0.298-0.785 0.303-1.21v-0.181c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293 0.525 0.111 0.707 0.293 0.293 0.431 0.293 0.707v0.090c0.003 0.637 0.228 1.22 0.603 1.675 0.266 0.323 0.607 0.581 0.996 0.751 0.578 0.255 1.206 0.286 1.778 0.125 0.423-0.119 0.814-0.341 1.136-0.652l0.073-0.072c0.196-0.196 0.45-0.294 0.707-0.294s0.512 0.097 0.707 0.292c0.197 0.197 0.295 0.451 0.295 0.709s-0.097 0.512-0.292 0.707l-0.061 0.061c-0.453 0.463-0.702 1.040-0.752 1.632-0.032 0.37 0.014 0.745 0.137 1.101 0.012 0.095 0.037 0.185 0.072 0.266-0.001-0.032-0.002-0.062-0.004-0.089z" }) +], -1), Sp = /* @__PURE__ */ C({ + __name: "FwbMegaMenu", + setup(e) { + const { megaMenuVisble: t, toggleMenu: r } = Q("megaMenuToggle"); + return R(!1), (s, o) => (u(), g("div", { + onClick: o[0] || (o[0] = //@ts-ignore + (...n) => y(r) && y(r)(...n)), + id: "mega-menu-full-cta-dropdown-button", + class: "flex gap-2 items-center justify-between w-full py-2 px-3 font-medium text-gray-700 border-b border-gray-100 md:w-auto hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-white md:p-0 dark:text-gray-400 md:dark:hover:white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700" + }, [ + Hd, + w(s.$slots, "default") + ])); + } +}), Dd = { class: "grid max-w-screen-xl px-4 py-5 mx-auto text-sm text-gray-500 dark:text-gray-400 md:grid-cols-3 md:px-6" }, Tp = /* @__PURE__ */ C({ + __name: "FwbMegaMenuDropdown", + setup(e) { + const { megaMenuVisble: t, toggleMenu: r } = Q("megaMenuToggle"); + return (s, o) => (u(), g("div", { + id: "mega-menu-full-cta-dropdown", + class: x([y(t) == !1 ? "hidden" : "", "mt-1 bg-white border-gray-200 shadow-sm border-y dark:bg-gray-800 dark:border-gray-600"]) + }, [ + f("div", Dd, [ + w(s.$slots, "default") + ]) + ], 2)); + } +}), Wd = { "aria-label": "Navigation" }, Gd = { class: "font-semibold text-gray-900 dark:text-white" }, Ud = { class: "font-semibold text-gray-900 dark:text-white" }, qd = { class: "font-semibold text-gray-900 dark:text-white" }, Yd = ["disabled"], Jd = ["disabled"], Kd = { + key: 0, + stroke: "currentColor", + fill: "currentColor", + "stroke-width": "0", + viewBox: "0 0 20 20", + "aria-hidden": "true", + class: "h-5 w-5", + height: "1em", + width: "1em", + xmlns: "http://www.w3.org/2000/svg" +}, Qd = /* @__PURE__ */ f("path", { + "fill-rule": "evenodd", + d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", + "clip-rule": "evenodd" +}, null, -1), Xd = [ + Qd +], Zd = ["disabled", "onClick"], eu = ["disabled"], tu = { + key: 0, + stroke: "currentColor", + fill: "currentColor", + "stroke-width": "0", + viewBox: "0 0 20 20", + "aria-hidden": "true", + class: "h-5 w-5", + height: "1em", + width: "1em", + xmlns: "http://www.w3.org/2000/svg" +}, ru = /* @__PURE__ */ f("path", { + "fill-rule": "evenodd", + d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", + "clip-rule": "evenodd" +}, null, -1), su = [ + ru +], ou = ["disabled"], Pp = /* @__PURE__ */ C({ + __name: "FwbPagination", + props: { + modelValue: { default: 1 }, + totalPages: { default: void 0 }, + perPage: { default: 10 }, + totalItems: { default: 10 }, + layout: { default: "pagination" }, + showIcons: { type: Boolean, default: !1 }, + sliceLength: { default: 2 }, + previousLabel: { default: "Prev" }, + nextLabel: { default: "Next" }, + enableFirstAndLastButtons: { type: Boolean, default: !1 }, + showLabels: { type: Boolean, default: !0 }, + large: { type: Boolean, default: !1 } + }, + emits: ["update:model-value", "page-changed"], + setup(e, { emit: t }) { + const r = t, s = e; + function o(_) { + r("update:model-value", _), r("page-changed", _); + } + function n() { + r("update:model-value", s.modelValue - 1), r("page-changed", s.modelValue - 1); + } + function a() { + r("update:model-value", s.modelValue + 1), r("page-changed", s.modelValue + 1); + } + function l() { + r("update:model-value", 1), r("page-changed", 1); + } + function i() { + const _ = d.value; + r("update:model-value", _), r("page-changed", _); + } + const d = c(() => s.totalPages ? s.totalPages : Math.ceil(s.totalItems / s.perPage)), p = c(() => s.modelValue <= 1), m = c(() => s.modelValue >= d.value), v = (_) => _ === s.modelValue, h = c(() => { + if (s.layout === "navigation") + return []; + if (s.layout === "table") + return []; + if (d.value <= s.sliceLength * 2 + 1) { + const F = []; + for (let N = 1; N <= d.value; N++) + F.push(N); + return F; + } + if (s.modelValue <= s.sliceLength) { + const F = [], N = Math.abs(s.modelValue - s.sliceLength) + s.modelValue + s.sliceLength + 1; + for (let D = 1; D <= N; D++) + F.push(D); + return F; + } + if (s.modelValue >= d.value - s.sliceLength) { + const F = []; + for (let N = Math.abs(d.value - s.sliceLength * 2); N <= d.value; N++) + F.push(N); + return F; + } + const _ = [], E = s.modelValue - s.sliceLength > 0 ? s.modelValue - s.sliceLength : 1; + for (let F = E; F < s.modelValue + s.sliceLength + 1 && !(F >= d.value); F++) + _.push(F); + return _; + }), b = c(() => s.modelValue * s.perPage - s.perPage + 1), k = c(() => { + const _ = s.modelValue * s.perPage; + return s.totalItems && _ > s.totalItems ? s.totalItems : _; + }), $ = c(() => s.totalItems ? s.totalItems : d.value * s.perPage), S = c(() => s.modelValue === 1), T = c(() => s.modelValue === d.value); + function A(_) { + const E = "flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white", F = "text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:bg-gray-700 dark:text-white", N = "px-4 h-10"; + return B(E, _ && F, s.large && N); + } + function L(_) { + const E = "flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white", F = "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-white cursor-not-allowed", N = "px-4 h-10", D = "border-none text-white hover:text-white bg-gray-800 rounded-none first:rounded-l last:rounded-r hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"; + return B( + E, + _ === s.modelValue && F, + s.large && N, + (_ > d.value || _ < 1) && F, + s.layout === "navigation" && "first:mr-3", + (s.layout === "navigation" || s.layout === "table") && "rounded-lg", + s.layout === "table" && D + ); + } + return (_, E) => (u(), g("nav", Wd, [ + _.layout === "table" ? (u(), g("div", { + key: 0, + class: x(["text-gray-700 dark:text-gray-400 mb-2", _.large ? "text-base" : "text-sm"]) + }, [ + te(" Showing "), + f("span", Gd, M(b.value), 1), + te(" to "), + f("span", Ud, M(k.value), 1), + te(" of "), + f("span", qd, M($.value), 1) + ], 2)) : P("", !0), + f("div", { + class: x(["inline-flex", _.large && "text-base h-10"]) + }, [ + w(_.$slots, "start"), + _.enableFirstAndLastButtons ? w(_.$slots, "first-button", { key: 0 }, () => [ + f("button", { + disabled: S.value, + class: x(L(1)), + onClick: l + }, " First ", 10, Yd) + ]) : P("", !0), + w(_.$slots, "prev-button", { + disabled: p.value, + decreasePage: n + }, () => [ + f("button", { + disabled: p.value, + class: x(L(_.modelValue - 1)), + onClick: n + }, [ + w(_.$slots, "prev-icon", {}, () => [ + _.showIcons || _.$slots["prev-icon"] ? (u(), g("svg", Kd, Xd)) : P("", !0) + ]), + _.showLabels ? (u(), g(q, { key: 0 }, [ + te(M(_.previousLabel), 1) + ], 64)) : P("", !0) + ], 10, Jd) + ]), + (u(!0), g(q, null, Me(h.value, (F) => w(_.$slots, "page-button", { + key: F, + page: F, + setPage: o, + disabled: v(F) + }, () => [ + f("button", { + disabled: v(F), + class: x(A(F === _.modelValue)), + onClick: (N) => o(F) + }, M(F), 11, Zd) + ])), 128)), + w(_.$slots, "next-button", { + disabled: m.value, + increasePage: a + }, () => [ + f("button", { + disabled: m.value, + class: x(L(_.modelValue + 1)), + onClick: a + }, [ + _.showLabels ? (u(), g(q, { key: 0 }, [ + te(M(_.nextLabel), 1) + ], 64)) : P("", !0), + w(_.$slots, "next-icon", {}, () => [ + _.showIcons || _.$slots["next-icon"] ? (u(), g("svg", tu, su)) : P("", !0) + ]) + ], 10, eu) + ]), + _.enableFirstAndLastButtons ? w(_.$slots, "last-button", { key: 1 }, () => [ + f("button", { + disabled: T.value, + class: x(L(d.value)), + onClick: i + }, " Last ", 10, ou) + ]) : P("", !0), + w(_.$slots, "end") + ], 2) + ])); + } +}), nu = { + default: "bg-blue-600 dark:bg-blue-600", + blue: "bg-blue-600 dark:bg-blue-600", + dark: "bg-gray-600 dark:bg-gray-300", + green: "bg-green-600 dark:bg-green-500", + red: "bg-red-600 dark:bg-red-500", + yellow: "bg-yellow-400", + indigo: "bg-indigo-600 dark:bg-indigo-500", + purple: "bg-purple-600 dark:bg-purple-500" +}, au = { + default: "", + blue: "text-blue-700 dark:text-blue-500", + dark: "dark:text-white", + green: "text-green-700 dark:text-green-500", + red: "text-red-700 dark:text-red-500", + yellow: "text-yellow-700 dark:text-yellow-500", + indigo: "text-indigo-700 dark:text-indigo-500", + purple: "text-purple-700 dark:text-purple-500" +}, Hr = { + sm: "h-1.5 text-xs leading-none", + md: "h-2.5 text-xs leading-none", + lg: "h-4 text-sm leading-none", + xl: "h-6 text-base leading-tight" +}; +function lu(e) { + const t = c(() => W( + nu[e.color.value], + Hr[e.size.value] + )), r = c(() => W( + Hr[e.size.value] + )), s = c(() => W( + au[e.color.value] + )); + return { + innerClasses: t, + outerClasses: r, + outsideLabelClasses: s + }; +} +const iu = { + key: 0, + class: "flex justify-between mb-1" +}, Fp = /* @__PURE__ */ C({ + __name: "FwbProgress", + props: { + color: { default: "default" }, + label: { default: "" }, + labelPosition: { default: "none" }, + labelProgress: { type: Boolean, default: !1 }, + progress: { default: 0 }, + size: { default: "md" } + }, + setup(e) { + const t = e, { + innerClasses: r, + outerClasses: s, + outsideLabelClasses: o + } = lu(Y(t)); + return (n, a) => (u(), g("div", null, [ + n.label || n.labelProgress && n.labelPosition === "outside" ? (u(), g("div", iu, [ + f("span", { + class: x([y(o), "text-base font-medium"]) + }, M(n.label), 3), + n.labelProgress && n.labelPosition === "outside" ? (u(), g("span", { + key: 0, + class: x([y(o), "text-sm font-medium"]) + }, M(n.progress) + "%", 3)) : P("", !0) + ])) : P("", !0), + f("div", { + class: x([y(s), "w-full bg-gray-200 rounded-full dark:bg-gray-700"]) + }, [ + f("div", { + class: x([y(r), "rounded-full font-medium text-blue-100 text-center p-0.5"]), + style: et({ width: n.progress + "%" }) + }, [ + n.labelProgress && n.labelPosition === "inside" ? (u(), g(q, { key: 0 }, [ + te(M(n.progress) + "% ", 1) + ], 64)) : P("", !0) + ], 6) + ], 2) + ])); + } +}), du = { + sm: "w-5 h-5", + md: "w-7 h-7", + lg: "w-10 h-10" +}; +function uu(e) { + return { sizeClasses: c(() => W( + du[e.size.value] ?? "" + )) }; +} +const cu = { class: "flex items-center" }, fu = /* @__PURE__ */ f("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }, null, -1), pu = [ + fu +], gu = /* @__PURE__ */ f("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }, null, -1), hu = [ + gu +], mu = /* @__PURE__ */ f("span", { class: "w-1 h-1 mx-1.5 bg-gray-500 rounded-full dark:bg-gray-400" }, null, -1), bu = ["href"], zp = /* @__PURE__ */ C({ + __name: "FwbRating", + props: { + rating: { default: 3 }, + reviewLink: { default: "" }, + reviewText: { default: "" }, + scale: { default: 5 }, + size: { default: "md" } + }, + setup(e) { + const t = e, r = c(() => Math.floor(t.rating)), s = c(() => t.scale - r.value), { sizeClasses: o } = uu(Y(t)); + return (n, a) => (u(), g("div", cu, [ + (u(!0), g(q, null, Me(r.value, (l) => (u(), g("svg", { + key: l, + class: x([y(o), "text-yellow-400"]), + fill: "currentColor", + viewBox: "0 0 20 20", + xmlns: "http://www.w3.org/2000/svg" + }, pu, 2))), 128)), + (u(!0), g(q, null, Me(s.value, (l) => (u(), g("svg", { + key: l, + class: x([y(o), "text-gray-300 dark:text-gray-500"]), + fill: "currentColor", + viewBox: "0 0 20 20", + xmlns: "http://www.w3.org/2000/svg" + }, hu, 2))), 128)), + w(n.$slots, "besideText"), + n.reviewText && n.reviewLink ? (u(), g(q, { key: 0 }, [ + mu, + f("a", { + href: n.reviewLink, + class: "text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white" + }, M(n.reviewText), 9, bu) + ], 64)) : P("", !0) + ])); + } +}), vu = { class: "h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800" }, yu = { class: "space-y-2 font-medium" }, Ap = /* @__PURE__ */ C({ + inheritAttrs: !1, + __name: "FwbSidebar", + setup(e) { + const t = ae(), r = B("absolute top-0 left-0 z-40 w-64 h-screen transition-transform", t.class); + return (s, o) => (u(), g("aside", re(s.$attrs, { + class: y(r), + "aria-label": "Sidebar" + }), [ + f("div", vu, [ + f("div", yu, [ + w(s.$slots, "default") + ]) + ]) + ], 16)); + } +}), wu = { + class: "p-4 mt-6 rounded-lg bg-blue-50 dark:bg-blue-900", + role: "alert" +}, xu = { class: "flex items-center mb-3" }, ku = { class: "bg-orange-100 text-orange-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900" }, _u = /* @__PURE__ */ f("span", { class: "sr-only" }, "Close", -1), Cu = /* @__PURE__ */ f("svg", { + class: "w-2.5 h-2.5", + "aria-hidden": "true", + xmlns: "http://www.w3.org/2000/svg", + fill: "none", + viewBox: "0 0 14 14" +}, [ + /* @__PURE__ */ f("path", { + stroke: "currentColor", + "stroke-linecap": "round", + "stroke-linejoin": "round", + "stroke-width": "2", + d: "m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" + }) +], -1), $u = [ + _u, + Cu +], Ip = /* @__PURE__ */ C({ + __name: "FwbSidebarCta", + props: { + label: { default: void 0 } + }, + emits: ["close"], + setup(e, { emit: t }) { + const r = t; + function s() { + r("close"); + } + return (o, n) => (u(), g("div", wu, [ + f("div", xu, [ + f("span", ku, M(o.label), 1), + f("button", { + type: "button", + class: "ml-auto -mx-1.5 -my-1.5 bg-blue-50 inline-flex justify-center items-center w-6 h-6 text-blue-900 rounded-lg focus:ring-2 focus:ring-blue-400 p-1 hover:bg-blue-200 h-6 w-6 dark:bg-blue-900 dark:text-blue-400 dark:hover:bg-blue-800", + "aria-label": "Close", + onClick: s + }, $u) + ]), + w(o.$slots, "default") + ])); + } +}), Su = { class: "overflow-hidden" }, Tu = /* @__PURE__ */ f("svg", { + class: "flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white", + "aria-hidden": "true", + xmlns: "http://www.w3.org/2000/svg", + fill: "currentColor", + viewBox: "0 0 18 21" +}, [ + /* @__PURE__ */ f("path", { d: "M15 12a1 1 0 0 0 .962-.726l2-7A1 1 0 0 0 17 3H3.77L3.175.745A1 1 0 0 0 2.208 0H1a1 1 0 0 0 0 2h.438l.6 2.255v.019l2 7 .746 2.986A3 3 0 1 0 9 17a2.966 2.966 0 0 0-.184-1h2.368c-.118.32-.18.659-.184 1a3 3 0 1 0 3-3H6.78l-.5-2H15Z" }) +], -1), Pu = { class: "flex-1 ml-3 text-left whitespace-nowrap" }, Fu = /* @__PURE__ */ f("path", { + stroke: "currentColor", + "stroke-linecap": "round", + "stroke-linejoin": "round", + "stroke-width": "2", + d: "m1 1 4 4 4-4" +}, null, -1), zu = [ + Fu +], Au = { class: "py-2 space-y-2 z-0 overflow-hidden" }, Iu = { key: 0 }, Mp = /* @__PURE__ */ C({ + __name: "FwbSidebarDropdownItem", + setup(e) { + const t = R(!1); + function r() { + t.value = !t.value; + } + return (s, o) => (u(), g("div", Su, [ + f("button", { + type: "button", + class: "flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 z-10", + "aria-controls": "dropdown-content", + onClick: r + }, [ + w(s.$slots, "icon", {}, () => [ + Tu + ]), + f("span", Pu, [ + w(s.$slots, "trigger") + ]), + w(s.$slots, "arrow-icon", { toggleDropdown: r }, () => [ + (u(), g("svg", { + class: x(["w-3 h-3 transition-all duration-300", t.value && "rotate-180"]), + "aria-hidden": "true", + xmlns: "http://www.w3.org/2000/svg", + fill: "none", + viewBox: "0 0 10 6" + }, zu, 2)) + ]) + ]), + f("div", Au, [ + ze(ds, { + duration: 150, + "enter-from-class": "-translate-y-full", + "enter-to-class": "translate-y-0", + "enter-active-class": "transition duration-400 ease-out", + "leave-active-class": "transition duration-400 ease-in", + "leave-from-class": "translate-y-0", + "leave-to-class": "-translate-y-full" + }, { + default: j(() => [ + t.value ? (u(), g("div", Iu, [ + w(s.$slots, "default") + ])) : P("", !0) + ]), + _: 3 + }) + ]) + ])); + } +}), Op = /* @__PURE__ */ C({ + __name: "FwbSidebarItem", + props: { + link: { default: "/" }, + tag: { default: "router-link" } + }, + setup(e) { + const t = e, r = t.tag === "a" ? "a" : be(t.tag), s = t.tag === "a" ? "href" : "to"; + return (o, n) => (u(), H(X(y(r)), Se({ + [y(s) || ""]: o.link, + class: "flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group" + }), { + default: j(() => [ + w(o.$slots, "icon"), + f("span", { + class: x(["flex-1 whitespace-nowrap", o.$slots.icon && "ml-3"]) + }, [ + w(o.$slots, "default") + ], 2), + w(o.$slots, "suffix") + ]), + _: 3 + }, 16)); + } +}), Mu = "pt-4 mt-4 space-y-2 font-medium border-t border-gray-200 dark:border-gray-700", Bp = /* @__PURE__ */ C({ + __name: "FwbSidebarItemGroup", + props: { + border: { type: Boolean, default: !1 } + }, + setup(e) { + return (t, r) => (u(), g("div", { + class: x(t.border && Mu) + }, [ + w(t.$slots, "default") + ], 2)); + } +}), Ou = ["src", "alt"], Bu = { class: "self-center text-xl font-semibold whitespace-nowrap dark:text-white" }, Lp = /* @__PURE__ */ C({ + __name: "FwbSidebarLogo", + props: { + name: { default: "" }, + link: { default: "/" }, + logo: { default: "" }, + alt: { default: "" }, + tag: { default: "router-link" } + }, + setup(e) { + const t = e, r = t.tag === "a" ? "a" : be(t.tag), s = t.tag === "a" ? "href" : "to"; + return (o, n) => (u(), H(X(y(r)), Se({ + [y(s) || ""]: o.link, + class: "flex items-center mb-5 pl-2.5" + }), { + default: j(() => [ + f("img", { + src: o.logo, + class: "h-6 mr-3 sm:h-7", + alt: o.alt ?? o.name + }, null, 8, Ou), + f("span", Bu, M(o.name), 1) + ]), + _: 1 + }, 16)); + } +}), Lu = { class: "relative overflow-x-auto shadow-md sm:rounded-lg" }, Eu = { class: "w-full text-sm text-left text-gray-500 dark:text-gray-400" }, Ep = /* @__PURE__ */ C({ + __name: "FwbTable", + props: { + striped: { + type: Boolean, + default: !1 + }, + stripedColumns: { + type: Boolean, + default: !1 + }, + hoverable: { + type: Boolean, + default: !1 + } + }, + setup(e) { + const t = e; + return de("hoverable", t.hoverable), de("striped", t.striped), de("stripedColumns", t.stripedColumns), (r, s) => (u(), g("div", Lu, [ + f("table", Eu, [ + w(r.$slots, "default") + ]) + ])); + } +}), Nu = {}; +function Ru(e, t) { + return u(), g("tbody", null, [ + w(e.$slots, "default") + ]); +} +const Np = /* @__PURE__ */ he(Nu, [["render", Ru]]), Vu = "px-6 py-4 first:font-medium first:text-gray-900 first:dark:text-white first:whitespace-nowrap last:text-right", ju = "even:bg-gray-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50"; +function Hu() { + const e = Q("stripedColumns"); + return { tableCellClasses: c(() => W( + Vu, + { [ju]: e } + )) }; +} +const Rp = /* @__PURE__ */ C({ + __name: "FwbTableCell", + setup(e) { + const { tableCellClasses: t } = Hu(); + return (r, s) => (u(), g("td", { + class: x(y(t)) + }, [ + w(r.$slots, "default") + ], 2)); + } +}), Du = {}, Wu = { class: "text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400" }; +function Gu(e, t) { + return u(), g("thead", Wu, [ + f("tr", null, [ + w(e.$slots, "default") + ]) + ]); +} +const Vp = /* @__PURE__ */ he(Du, [["render", Gu]]), Uu = "px-6 py-3 text-xs uppercase", qu = "even:bg-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50"; +function Yu() { + const e = Q("stripedColumns"); + return { tableHeadCellClasses: c(() => W( + Uu, + { [qu]: e } + )) }; +} +const jp = /* @__PURE__ */ C({ + __name: "FwbTableHeadCell", + setup(e) { + const { tableHeadCellClasses: t } = Yu(); + return (r, s) => (u(), g("th", { + scope: "col", + class: x(y(t)) + }, [ + w(r.$slots, "default") + ], 2)); + } +}), Ju = "bg-white dark:bg-gray-800 [&:not(:last-child)]:border-b [&:not(:last-child)]:dark:border-gray-700", Ku = "odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700", Qu = "hover:bg-gray-50 dark:hover:bg-gray-600"; +function Xu() { + const e = Q("striped"), t = Q("hoverable"); + return { tableRowClasses: c(() => W( + Ju, + { + [Qu]: t, + [Ku]: e + } + )) }; +} +const Hp = /* @__PURE__ */ C({ + __name: "FwbTableRow", + setup(e) { + const { tableRowClasses: t } = Xu(); + return (r, s) => (u(), g("tr", { + class: x(y(t)) + }, [ + w(r.$slots, "default") + ], 2)); + } +}), Ms = "flowbite-tab-activate-func-injection", Os = "flowbite-tab-active-name-injection", Bs = "flowbite-tab-style-injection", Ls = "flowbite-tab-visibility-directive-injection", Zu = { key: 0 }, ec = { key: 1 }, Dp = /* @__PURE__ */ C({ + __FLOWBITE_TAB__: !0, + __name: "FwbTab", + props: { + name: { + type: String, + required: !0 + }, + title: { + type: String, + default: "" + }, + disabled: { + type: Boolean, + default: !1 + } + }, + setup(e) { + const t = Q(Os, ""), r = Q(Ls, "if"); + return (s, o) => y(r) === "if" ? (u(), g(q, { key: 0 }, [ + y(t) === e.name ? (u(), g("div", Zu, [ + w(s.$slots, "default") + ])) : P("", !0) + ], 64)) : y(r) === "show" ? Te((u(), g("div", ec, [ + w(s.$slots, "default") + ], 512)), [ + [co, y(t) === e.name] + ]) : P("", !0); + } +}); +function tc(e) { + const t = c(() => B( + "flex flex-wrap font-medium text-center text-gray-500 dark:text-gray-400 text-sm", + e.variant === "underline" && "-mb-px", + e.variant === "default" && "border-b border-gray-200 dark:border-gray-700" + )); + return { + divClasses: c(() => e.variant === "underline" ? "border-b border-gray-200 dark:border-gray-700 font-medium text-center text-gray-500 dark:text-gray-400 text-sm" : ""), + ulClasses: t + }; +} +const Es = "flowbite-themable-injection-key", Ne = { + blue: { + background: "bg-blue-700 dark:bg-blue-600", + disabled: "", + hover: "hover:bg-blue-800 dark:hover:bg-blue-700", + text: "text-blue-600 dark:text-blue-500", + border: "border-blue-600 dark:border-blue-500", + focus: "focus:ring-blue-300 dark:focus:ring-blue-800" + }, + green: { + background: "bg-green-700 dark:bg-green-600", + disabled: "", + hover: "hover:bg-green-800 dark:hover:bg-green-700", + text: "text-green-600 dark:text-green-500", + border: "border-green-600 dark:border-green-500", + focus: "focus:ring-green-300 dark:focus:ring-green-800" + }, + pink: { + background: "bg-pink-700 dark:bg-pink-600", + disabled: "", + hover: "hover:bg-pink-800 dark:hover:bg-pink-700", + text: "text-pink-600 dark:text-pink-500", + border: "border-pink-600 dark:border-pink-500", + focus: "focus:ring-pink-300 dark:focus:ring-pink-900" + }, + purple: { + background: "bg-purple-700 dark:bg-purple-600", + disabled: "", + hover: "hover:bg-purple-800 dark:hover:bg-purple-700", + text: "text-purple-600 dark:text-purple-500", + border: "border-purple-600 dark:border-purple-500", + focus: "focus:ring-purple-300 dark:focus:ring-purple-900" + }, + red: { + background: "bg-red-700 dark:bg-red-600", + disabled: "", + hover: "hover:bg-red-800 dark:hover:bg-red-700", + text: "text-red-600 dark:text-red-500", + border: "border-red-600 dark:border-red-500", + focus: "focus:ring-red-300 dark:focus:ring-red-900" + } +}; +function Ns(e) { + const t = Q(Es, R(null)), r = c(() => e || t.value), s = c(() => !!t?.value), o = c( + () => r.value ? Ne[r.value].background : "" + ), n = c( + () => r.value ? Ne[r.value].border : "" + ), a = c(() => t?.value || void 0), l = c( + () => r.value ? Ne[r.value].disabled : "" + ), i = c( + () => r.value ? Ne[r.value].focus : "" + ), d = c( + () => r.value ? Ne[r.value].hover : "" + ), p = c( + () => r.value ? Ne[r.value].text : "" + ); + return { + backgroundClasses: o, + borderClasses: n, + color: a, + disabledClasses: l, + focusClasses: i, + hoverClasses: d, + isActive: s, + textClasses: p + }; +} +const rc = { + default: "cursor-pointer inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300", + active: "cursor-pointer inline-block p-4 text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500", + disabled: "inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500" +}, sc = { + default: "cursor-pointer inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300", + active: "cursor-pointer inline-block p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500", + disabled: "inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500" +}, oc = { + default: "cursor-pointer inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white", + active: "cursor-pointer inline-block py-3 px-4 text-white bg-blue-600 rounded-lg active", + disabled: "inline-block py-3 px-4 text-gray-400 cursor-not-allowed dark:text-gray-500" +}; +function nc(e) { + const t = Ns(); + return { tabClasses: c(() => { + const s = t.isActive.value, o = e.active.value ? "active" : e.disabled.value ? "disabled" : "default"; + return e.variant === "default" ? ne( + rc[o], + (s && o) === "active" ? t.textClasses.value : "" + ) : e.variant === "underline" ? ne( + sc[o], + (s && o) === "active" ? [t.borderClasses.value, t.textClasses.value] : "" + ) : e.variant === "pills" ? ne( + oc[o], + (s && o) === "active" ? [t.backgroundClasses.value, "text-white"] : "" + ) : ""; + }) }; +} +const ac = /* @__PURE__ */ C({ + __name: "FwbTabPane", + props: { + name: { + type: String, + required: !0 + }, + title: { + type: String, + default: "" + }, + disabled: { + type: Boolean, + default: !1 + }, + active: { + type: Boolean, + default: !1 + } + }, + setup(e) { + const t = e, r = Q(Bs); + r || console.warn("you can't use Tab outside of Tabs component. No tab style injection found"); + const s = Q(Ms); + s || console.warn("you can't use Tab outside of Tabs component. No tab activate injection found"); + const o = () => { + if (!t.disabled) { + if (!s) + return console.warn("no onActivate"); + s(t.name); + } + }, { tabClasses: n } = nc({ + active: nt(t, "active"), + disabled: nt(t, "disabled"), + variant: r + }); + return (a, l) => (u(), g("li", null, [ + f("div", { + class: x(y(n)), + onClick: o + }, M(e.title), 3) + ])); + } +}), Wp = /* @__PURE__ */ C({ + inheritAttrs: !1, + __name: "FwbTabs", + props: { + variant: { default: "default" }, + modelValue: { default: "" }, + directive: { default: "if" } + }, + emits: ["update:modelValue", "click:pane"], + setup(e, { emit: t }) { + const r = e, s = t, { ulClasses: o, divClasses: n } = tc(r); + de(Bs, r.variant); + const l = De().default, i = c(() => l ? St(l()).filter((v) => v.type.__FLOWBITE_TAB__) : []), d = c({ + get: () => r.modelValue, + set: (v) => s("update:modelValue", v) + }); + de(Os, d), de(Ls, nt(r, "directive")); + const p = (v) => { + d.value = v; + }, m = () => { + s("click:pane"); + }; + return de(Ms, p), (v, h) => (u(), g(q, null, [ + f("div", { + class: x(y(n)) + }, [ + f("ul", { + class: x(y(o)) + }, [ + (u(!0), g(q, null, Me(i.value, (b, k) => (u(), H(ac, { + key: k, + active: d.value === b.props?.name, + disabled: b.props?.disabled, + name: b.props?.name, + title: b.props?.title, + onClick: m + }, null, 8, ["active", "disabled", "name", "title"]))), 128)) + ], 2) + ], 2), + f("div", Se(ps(v.$attrs)), [ + w(v.$slots, "default") + ], 16) + ], 64)); + } +}), lc = "relative border-gray-200 dark:border-gray-700", ic = "border-l", dc = "flex", Gp = /* @__PURE__ */ C({ + __name: "FwbTimeline", + props: { + horizontal: { + type: Boolean, + default: !1 + } + }, + setup(e) { + const t = e; + de("horizontal", t.horizontal); + const r = c(() => W( + lc, + t.horizontal ? dc : ic + )); + return (s, o) => (u(), g("ol", re({ class: r.value }, s.$attrs), [ + w(s.$slots, "default") + ], 16)); + } +}), uc = {}, cc = { class: "font-normal mb-4 text-base text-gray-500 dark:text-gray-400" }; +function fc(e, t) { + return u(), g("p", cc, [ + w(e.$slots, "default") + ]); +} +const Up = /* @__PURE__ */ he(uc, [["render", fc]]), qp = /* @__PURE__ */ C({ + __name: "FwbTimelineContent", + setup(e) { + const t = Q("horizontal"), r = c(() => W(t ? "mt-3 sm:pr-8" : "")); + return (s, o) => (u(), g("div", { + class: x(r.value) + }, [ + w(s.$slots, "default") + ], 2)); + } +}), pc = "mb-10", gc = "mb-6 sm:mb-0 relative", hc = "ml-6", Yp = /* @__PURE__ */ C({ + __name: "FwbTimelineItem", + setup(e) { + const t = Q("horizontal"), r = c(() => W(pc, t ? gc : hc)); + return (s, o) => (u(), g("li", { + class: x(r.value) + }, [ + w(s.$slots, "default") + ], 2)); + } +}), mc = "h-0.5 w-full bg-gray-200 dark:bg-gray-700 sm:flex", Jp = /* @__PURE__ */ C({ + __name: "FwbTimelinePoint", + setup(e) { + const t = De(), r = c(() => !!t.default), s = Q("horizontal"), o = c(() => W(s ? "flex items-center" : "")), n = c(() => W(mc, { "sm:hidden hidden": !s })), a = c(() => { + const l = "absolute rounded-full -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700", i = "mt-1.5 w-3 h-3 bg-gray-200", d = "mt-1.5 w-6 h-6 -left-3 flex justify-center items-center bg-blue-200 ring-8 ring-white dark:ring-gray-900", p = "w-3 h-3 bg-gray-200", m = "w-6 h-6 -left-3 flex justify-center items-center bg-blue-200 ring-8 ring-white dark:ring-gray-900", v = !s && !r.value, h = !s && r.value, b = s && !r.value, k = s && r.value; + return W( + l, + { + [i]: v, + [d]: h, + [p]: b, + [m]: k + } + ); + }); + return (l, i) => (u(), g("div", { + class: x(o.value) + }, [ + f("div", { + class: x(a.value) + }, [ + w(l.$slots, "default") + ], 2), + f("div", { + class: x(n.value) + }, null, 2) + ], 2)); + } +}), bc = {}, vc = { class: "font-normal leading-none mb-1 text-gray-400 dark:text-gray-500 text-sm" }; +function yc(e, t) { + return u(), g("time", vc, [ + w(e.$slots, "default") + ]); +} +const Kp = /* @__PURE__ */ he(bc, [["render", yc]]), wc = {}, xc = { class: "font-semibold text-gray-900 dark:text-white text-lg" }; +function kc(e, t) { + return u(), g("h3", xc, [ + w(e.$slots, "default") + ]); +} +const Qp = /* @__PURE__ */ he(wc, [["render", kc]]), _c = { + danger: "text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200", + empty: "", + success: "text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200", + warning: "text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200" +}, Cc = { + center: "items-center", + end: "items-end", + start: "items-start" +}, Dr = "flex w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800", Wr = "text-sm font-normal"; +function $c(e) { + const t = c(() => _c[e.type.value]), r = c(() => { + const o = Cc[e.alignment.value]; + return e.divide.value ? ne(Dr, "dark:divide-gray-700 divide-x divide-gray-200", o) : ne(Dr, o); + }), s = c(() => e.type.value !== "empty" && e.divide.value ? ne(Wr, "pl-3") : Wr); + return { + typeClasses: t, + wrapperClasses: r, + contentClasses: s + }; +} +function Sc(e) { + const { + backgroundClasses: t, + borderClasses: r, + disabledClasses: s, + focusClasses: o, + hoverClasses: n, + isActive: a, + textClasses: l + } = Ns(e.theme?.value); + return { + classes: c(() => { + if (!a.value) + return ""; + const d = []; + return e.apply.value.includes("text") && d.push(l.value), e.apply.value.includes("border") && d.push(r.value), e.apply.value.includes("background") && d.push(t.value), e.apply.value.includes("hover") && d.push(n.value), e.apply.value.includes("disabled") && d.push(s.value), e.apply.value.includes("focus") && d.push(o.value), d.join(" "); + }) + }; +} +const Tc = /* @__PURE__ */ C({ + __name: "FlowbiteThemableChild", + props: { + apply: { + type: Array, + required: !0 + }, + tag: { + type: String, + default: "div" + }, + theme: { + type: String, + default: void 0 + } + }, + setup(e) { + const t = ae(), r = e, { classes: s } = Sc(Y(r)), o = c(() => t.class || ""); + return (n, a) => (u(), H(X(e.tag), { + class: x(y(ne)(o.value, y(s))) + }, { + default: j(() => [ + w(n.$slots, "default") + ]), + _: 3 + }, 8, ["class"])); + } +}), Pc = { + key: 1, + "aria-hidden": "true", + class: "w-5 h-5", + fill: "currentColor", + viewBox: "0 0 20 20", + xmlns: "http://www.w3.org/2000/svg" +}, Fc = /* @__PURE__ */ f("path", { + "clip-rule": "evenodd", + d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", + "fill-rule": "evenodd" +}, null, -1), zc = [ + Fc +], Ac = { + key: 2, + "aria-hidden": "true", + class: "w-5 h-5", + fill: "currentColor", + viewBox: "0 0 20 20", + xmlns: "http://www.w3.org/2000/svg" +}, Ic = /* @__PURE__ */ f("path", { + "clip-rule": "evenodd", + d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", + "fill-rule": "evenodd" +}, null, -1), Mc = [ + Ic +], Oc = { + key: 3, + "aria-hidden": "true", + class: "w-5 h-5", + fill: "currentColor", + viewBox: "0 0 20 20", + xmlns: "http://www.w3.org/2000/svg" +}, Bc = /* @__PURE__ */ f("path", { + "clip-rule": "evenodd", + d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", + "fill-rule": "evenodd" +}, null, -1), Lc = [ + Bc +], Ec = /* @__PURE__ */ f("span", { class: "sr-only" }, "Close", -1), Nc = /* @__PURE__ */ f("svg", { + class: "w-5 h-5", + fill: "currentColor", + viewBox: "0 0 20 20", + xmlns: "http://www.w3.org/2000/svg" +}, [ + /* @__PURE__ */ f("path", { + "clip-rule": "evenodd", + d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", + "fill-rule": "evenodd" + }) +], -1), Rc = [ + Ec, + Nc +], Gr = /* @__PURE__ */ C({ + __name: "FwbToast", + props: { + type: { + type: String, + default: "empty" + }, + alignment: { + type: String, + default: "center" + }, + closable: { + type: Boolean, + default: !1 + }, + divide: { + type: Boolean, + default: !1 + } + }, + emits: ["close"], + setup(e, { emit: t }) { + const r = e, s = R(!0), o = t, { + typeClasses: n, + wrapperClasses: a, + contentClasses: l + } = $c(Y(r)), i = () => { + o("close"), s.value = !1; + }; + return (d, p) => s.value ? (u(), g("div", { + key: 0, + id: "toast-default", + class: x(y(a)), + role: "alert" + }, [ + e.type !== "empty" || d.$slots.icon ? (u(), H(Tc, { + key: 0, + apply: ["background", "text"], + class: x(["inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg", y(n)]) + }, { + default: j(() => [ + d.$slots.icon ? w(d.$slots, "icon", { + key: 0, + class: x({ "ml-3": e.type !== "empty" }) + }) : e.type === "success" ? (u(), g("svg", Pc, zc)) : e.type === "danger" ? (u(), g("svg", Ac, Mc)) : e.type === "warning" ? (u(), g("svg", Oc, Lc)) : P("", !0) + ]), + _: 3 + }, 8, ["class"])) : P("", !0), + f("div", { + class: x([y(l), { "ml-3": d.$slots.icon || e.type !== "empty" }]) + }, [ + w(d.$slots, "default") + ], 2), + e.closable ? (u(), g("button", { + key: 1, + "aria-label": "Close", + class: "border-none ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700", + type: "button", + onClick: i + }, Rc)) : P("", !0) + ], 2)) : P("", !0); + } +}), Rs = "flowbite-toast-injection-key", Vc = C({ + components: { + FwbToast: Gr + }, + props: { + transition: { + type: String, + default: "slide-left" + } + }, + setup() { + const e = R([]), t = (n, a) => { + Ia(() => o(n), a); + }, r = (n) => { + const a = parseInt(((/* @__PURE__ */ new Date()).getTime() * Math.random()).toString()).toString(); + return e.value.push({ + id: a, + ...n + }), n.time > 0 && t(a, n.time), a; + }, s = () => { + if (e.value.length === 0) + return ""; + const n = e.value[e.value.length - 1].id; + return e.value.pop(), n; + }, o = (n) => { + const a = e.value.findIndex((l) => l.id === n); + return a >= 0 && e.value.splice(a, 1), a >= 0; + }; + return de(Rs, { + add: r, + pop: s, + remove: o + }), { + toasts: e, + removeToast: o + }; + }, + render() { + const { $props: e, $slots: t, toasts: r, removeToast: s } = this; + return pt("div", {}, [ + t.default ? t.default() : null, + // rendering default slot + pt( + fo, + { + name: e.transition, + tag: "div", + class: "xl:w-1/6 md:w-1/4 sm:w-1/4 fixed top-3 right-3 flex flex-col gap-2 z-50" + }, + { + default: () => r.map( + (o) => o.component ? pt( + o.component, + { + key: o.id, + onClose: () => s(o.id), + ...o.componentProps ? o.componentProps : {} + }, + () => o.text + ) : pt( + Gr, + { + closable: !0, + type: o.type, + key: o.id, + onClose: () => s(o.id) + }, + () => o.text + ) + ) + } + ) + ]); + } +}); +const Xp = /* @__PURE__ */ he(Vc, [["__scopeId", "data-v-aba06225"]]), jc = ["top", "right", "bottom", "left"], Ur = ["start", "end"], qr = /* @__PURE__ */ jc.reduce((e, t) => e.concat(t, t + "-" + Ur[0], t + "-" + Ur[1]), []), lt = Math.min, Fe = Math.max, Hc = { + left: "right", + right: "left", + bottom: "top", + top: "bottom" +}, Dc = { + start: "end", + end: "start" +}; +function qt(e, t, r) { + return Fe(e, lt(t, r)); +} +function Ee(e, t) { + return typeof e == "function" ? e(t) : e; +} +function ge(e) { + return e.split("-")[0]; +} +function ue(e) { + return e.split("-")[1]; +} +function Vs(e) { + return e === "x" ? "y" : "x"; +} +function ur(e) { + return e === "y" ? "height" : "width"; +} +function ct(e) { + return ["top", "bottom"].includes(ge(e)) ? "y" : "x"; +} +function cr(e) { + return Vs(ct(e)); +} +function js(e, t, r) { + r === void 0 && (r = !1); + const s = ue(e), o = cr(e), n = ur(o); + let a = o === "x" ? s === (r ? "end" : "start") ? "right" : "left" : s === "start" ? "bottom" : "top"; + return t.reference[n] > t.floating[n] && (a = Pt(a)), [a, Pt(a)]; +} +function Wc(e) { + const t = Pt(e); + return [Tt(e), t, Tt(t)]; +} +function Tt(e) { + return e.replace(/start|end/g, (t) => Dc[t]); +} +function Gc(e, t, r) { + const s = ["left", "right"], o = ["right", "left"], n = ["top", "bottom"], a = ["bottom", "top"]; + switch (e) { + case "top": + case "bottom": + return r ? t ? o : s : t ? s : o; + case "left": + case "right": + return t ? n : a; + default: + return []; + } +} +function Uc(e, t, r, s) { + const o = ue(e); + let n = Gc(ge(e), r === "start", s); + return o && (n = n.map((a) => a + "-" + o), t && (n = n.concat(n.map(Tt)))), n; +} +function Pt(e) { + return e.replace(/left|right|bottom|top/g, (t) => Hc[t]); +} +function qc(e) { + return { + top: 0, + right: 0, + bottom: 0, + left: 0, + ...e + }; +} +function Hs(e) { + return typeof e != "number" ? qc(e) : { + top: e, + right: e, + bottom: e, + left: e + }; +} +function tt(e) { + return { + ...e, + top: e.y, + left: e.x, + right: e.x + e.width, + bottom: e.y + e.height + }; +} +function Yr(e, t, r) { + let { + reference: s, + floating: o + } = e; + const n = ct(t), a = cr(t), l = ur(a), i = ge(t), d = n === "y", p = s.x + s.width / 2 - o.width / 2, m = s.y + s.height / 2 - o.height / 2, v = s[l] / 2 - o[l] / 2; + let h; + switch (i) { + case "top": + h = { + x: p, + y: s.y - o.height + }; + break; + case "bottom": + h = { + x: p, + y: s.y + s.height + }; + break; + case "right": + h = { + x: s.x + s.width, + y: m + }; + break; + case "left": + h = { + x: s.x - o.width, + y: m + }; + break; + default: + h = { + x: s.x, + y: s.y + }; + } + switch (ue(t)) { + case "start": + h[a] -= v * (r && d ? -1 : 1); + break; + case "end": + h[a] += v * (r && d ? -1 : 1); + break; + } + return h; +} +const Yc = async (e, t, r) => { + const { + placement: s = "bottom", + strategy: o = "absolute", + middleware: n = [], + platform: a + } = r, l = n.filter(Boolean), i = await (a.isRTL == null ? void 0 : a.isRTL(t)); + let d = await a.getElementRects({ + reference: e, + floating: t, + strategy: o + }), { + x: p, + y: m + } = Yr(d, s, i), v = s, h = {}, b = 0; + for (let k = 0; k < l.length; k++) { + const { + name: $, + fn: S + } = l[k], { + x: T, + y: A, + data: L, + reset: _ + } = await S({ + x: p, + y: m, + initialPlacement: s, + placement: v, + strategy: o, + middlewareData: h, + rects: d, + platform: a, + elements: { + reference: e, + floating: t + } + }); + p = T ?? p, m = A ?? m, h = { + ...h, + [$]: { + ...h[$], + ...L + } + }, _ && b <= 50 && (b++, typeof _ == "object" && (_.placement && (v = _.placement), _.rects && (d = _.rects === !0 ? await a.getElementRects({ + reference: e, + floating: t, + strategy: o + }) : _.rects), { + x: p, + y: m + } = Yr(d, v, i)), k = -1); + } + return { + x: p, + y: m, + placement: v, + strategy: o, + middlewareData: h + }; +}; +async function Bt(e, t) { + var r; + t === void 0 && (t = {}); + const { + x: s, + y: o, + platform: n, + rects: a, + elements: l, + strategy: i + } = e, { + boundary: d = "clippingAncestors", + rootBoundary: p = "viewport", + elementContext: m = "floating", + altBoundary: v = !1, + padding: h = 0 + } = Ee(t, e), b = Hs(h), $ = l[v ? m === "floating" ? "reference" : "floating" : m], S = tt(await n.getClippingRect({ + element: (r = await (n.isElement == null ? void 0 : n.isElement($))) == null || r ? $ : $.contextElement || await (n.getDocumentElement == null ? void 0 : n.getDocumentElement(l.floating)), + boundary: d, + rootBoundary: p, + strategy: i + })), T = m === "floating" ? { + ...a.floating, + x: s, + y: o + } : a.reference, A = await (n.getOffsetParent == null ? void 0 : n.getOffsetParent(l.floating)), L = await (n.isElement == null ? void 0 : n.isElement(A)) ? await (n.getScale == null ? void 0 : n.getScale(A)) || { + x: 1, + y: 1 + } : { + x: 1, + y: 1 + }, _ = tt(n.convertOffsetParentRelativeRectToViewportRelativeRect ? await n.convertOffsetParentRelativeRectToViewportRelativeRect({ + elements: l, + rect: T, + offsetParent: A, + strategy: i + }) : T); + return { + top: (S.top - _.top + b.top) / L.y, + bottom: (_.bottom - S.bottom + b.bottom) / L.y, + left: (S.left - _.left + b.left) / L.x, + right: (_.right - S.right + b.right) / L.x + }; +} +const Jc = (e) => ({ + name: "arrow", + options: e, + async fn(t) { + const { + x: r, + y: s, + placement: o, + rects: n, + platform: a, + elements: l, + middlewareData: i + } = t, { + element: d, + padding: p = 0 + } = Ee(e, t) || {}; + if (d == null) + return {}; + const m = Hs(p), v = { + x: r, + y: s + }, h = cr(o), b = ur(h), k = await a.getDimensions(d), $ = h === "y", S = $ ? "top" : "left", T = $ ? "bottom" : "right", A = $ ? "clientHeight" : "clientWidth", L = n.reference[b] + n.reference[h] - v[h] - n.floating[b], _ = v[h] - n.reference[h], E = await (a.getOffsetParent == null ? void 0 : a.getOffsetParent(d)); + let F = E ? E[A] : 0; + (!F || !await (a.isElement == null ? void 0 : a.isElement(E))) && (F = l.floating[A] || n.floating[b]); + const N = L / 2 - _ / 2, D = F / 2 - k[b] / 2 - 1, G = lt(m[S], D), J = lt(m[T], D), z = G, ce = F - k[b] - J, U = F / 2 - k[b] / 2 + N, Z = qt(z, U, ce), K = !i.arrow && ue(o) != null && U !== Z && n.reference[b] / 2 - (U < z ? G : J) - k[b] / 2 < 0, se = K ? U < z ? U - z : U - ce : 0; + return { + [h]: v[h] + se, + data: { + [h]: Z, + centerOffset: U - Z - se, + ...K && { + alignmentOffset: se + } + }, + reset: K + }; + } +}); +function Kc(e, t, r) { + return (e ? [...r.filter((o) => ue(o) === e), ...r.filter((o) => ue(o) !== e)] : r.filter((o) => ge(o) === o)).filter((o) => e ? ue(o) === e || (t ? Tt(o) !== o : !1) : !0); +} +const Qc = function(e) { + return e === void 0 && (e = {}), { + name: "autoPlacement", + options: e, + async fn(t) { + var r, s, o; + const { + rects: n, + middlewareData: a, + placement: l, + platform: i, + elements: d + } = t, { + crossAxis: p = !1, + alignment: m, + allowedPlacements: v = qr, + autoAlignment: h = !0, + ...b + } = Ee(e, t), k = m !== void 0 || v === qr ? Kc(m || null, h, v) : v, $ = await Bt(t, b), S = ((r = a.autoPlacement) == null ? void 0 : r.index) || 0, T = k[S]; + if (T == null) + return {}; + const A = js(T, n, await (i.isRTL == null ? void 0 : i.isRTL(d.floating))); + if (l !== T) + return { + reset: { + placement: k[0] + } + }; + const L = [$[ge(T)], $[A[0]], $[A[1]]], _ = [...((s = a.autoPlacement) == null ? void 0 : s.overflows) || [], { + placement: T, + overflows: L + }], E = k[S + 1]; + if (E) + return { + data: { + index: S + 1, + overflows: _ + }, + reset: { + placement: E + } + }; + const F = _.map((G) => { + const J = ue(G.placement); + return [G.placement, J && p ? ( + // Check along the mainAxis and main crossAxis side. + G.overflows.slice(0, 2).reduce((z, ce) => z + ce, 0) + ) : ( + // Check only the mainAxis. + G.overflows[0] + ), G.overflows]; + }).sort((G, J) => G[1] - J[1]), D = ((o = F.filter((G) => G[2].slice( + 0, + // Aligned placements should not check their opposite crossAxis + // side. + ue(G[0]) ? 2 : 3 + ).every((J) => J <= 0))[0]) == null ? void 0 : o[0]) || F[0][0]; + return D !== l ? { + data: { + index: S + 1, + overflows: _ + }, + reset: { + placement: D + } + } : {}; + } + }; +}, Xc = function(e) { + return e === void 0 && (e = {}), { + name: "flip", + options: e, + async fn(t) { + var r, s; + const { + placement: o, + middlewareData: n, + rects: a, + initialPlacement: l, + platform: i, + elements: d + } = t, { + mainAxis: p = !0, + crossAxis: m = !0, + fallbackPlacements: v, + fallbackStrategy: h = "bestFit", + fallbackAxisSideDirection: b = "none", + flipAlignment: k = !0, + ...$ + } = Ee(e, t); + if ((r = n.arrow) != null && r.alignmentOffset) + return {}; + const S = ge(o), T = ge(l) === l, A = await (i.isRTL == null ? void 0 : i.isRTL(d.floating)), L = v || (T || !k ? [Pt(l)] : Wc(l)); + !v && b !== "none" && L.push(...Uc(l, k, b, A)); + const _ = [l, ...L], E = await Bt(t, $), F = []; + let N = ((s = n.flip) == null ? void 0 : s.overflows) || []; + if (p && F.push(E[S]), m) { + const z = js(o, a, A); + F.push(E[z[0]], E[z[1]]); + } + if (N = [...N, { + placement: o, + overflows: F + }], !F.every((z) => z <= 0)) { + var D, G; + const z = (((D = n.flip) == null ? void 0 : D.index) || 0) + 1, ce = _[z]; + if (ce) + return { + data: { + index: z, + overflows: N + }, + reset: { + placement: ce + } + }; + let U = (G = N.filter((Z) => Z.overflows[0] <= 0).sort((Z, K) => Z.overflows[1] - K.overflows[1])[0]) == null ? void 0 : G.placement; + if (!U) + switch (h) { + case "bestFit": { + var J; + const Z = (J = N.map((K) => [K.placement, K.overflows.filter((se) => se > 0).reduce((se, Ue) => se + Ue, 0)]).sort((K, se) => K[1] - se[1])[0]) == null ? void 0 : J[0]; + Z && (U = Z); + break; + } + case "initialPlacement": + U = l; + break; + } + if (o !== U) + return { + reset: { + placement: U + } + }; + } + return {}; + } + }; +}; +async function Zc(e, t) { + const { + placement: r, + platform: s, + elements: o + } = e, n = await (s.isRTL == null ? void 0 : s.isRTL(o.floating)), a = ge(r), l = ue(r), i = ct(r) === "y", d = ["left", "top"].includes(a) ? -1 : 1, p = n && i ? -1 : 1, m = Ee(t, e); + let { + mainAxis: v, + crossAxis: h, + alignmentAxis: b + } = typeof m == "number" ? { + mainAxis: m, + crossAxis: 0, + alignmentAxis: null + } : { + mainAxis: 0, + crossAxis: 0, + alignmentAxis: null, + ...m + }; + return l && typeof b == "number" && (h = l === "end" ? b * -1 : b), i ? { + x: h * p, + y: v * d + } : { + x: v * d, + y: h * p + }; +} +const e0 = function(e) { + return e === void 0 && (e = 0), { + name: "offset", + options: e, + async fn(t) { + var r, s; + const { + x: o, + y: n, + placement: a, + middlewareData: l + } = t, i = await Zc(t, e); + return a === ((r = l.offset) == null ? void 0 : r.placement) && (s = l.arrow) != null && s.alignmentOffset ? {} : { + x: o + i.x, + y: n + i.y, + data: { + ...i, + placement: a + } + }; + } + }; +}, t0 = function(e) { + return e === void 0 && (e = {}), { + name: "shift", + options: e, + async fn(t) { + const { + x: r, + y: s, + placement: o + } = t, { + mainAxis: n = !0, + crossAxis: a = !1, + limiter: l = { + fn: ($) => { + let { + x: S, + y: T + } = $; + return { + x: S, + y: T + }; + } + }, + ...i + } = Ee(e, t), d = { + x: r, + y: s + }, p = await Bt(t, i), m = ct(ge(o)), v = Vs(m); + let h = d[v], b = d[m]; + if (n) { + const $ = v === "y" ? "top" : "left", S = v === "y" ? "bottom" : "right", T = h + p[$], A = h - p[S]; + h = qt(T, h, A); + } + if (a) { + const $ = m === "y" ? "top" : "left", S = m === "y" ? "bottom" : "right", T = b + p[$], A = b - p[S]; + b = qt(T, b, A); + } + const k = l.fn({ + ...t, + [v]: h, + [m]: b + }); + return { + ...k, + data: { + x: k.x - r, + y: k.y - s + } + }; + } + }; +}, r0 = function(e) { + return e === void 0 && (e = {}), { + name: "size", + options: e, + async fn(t) { + const { + placement: r, + rects: s, + platform: o, + elements: n + } = t, { + apply: a = () => { + }, + ...l + } = Ee(e, t), i = await Bt(t, l), d = ge(r), p = ue(r), m = ct(r) === "y", { + width: v, + height: h + } = s.floating; + let b, k; + d === "top" || d === "bottom" ? (b = d, k = p === (await (o.isRTL == null ? void 0 : o.isRTL(n.floating)) ? "start" : "end") ? "left" : "right") : (k = d, b = p === "end" ? "top" : "bottom"); + const $ = h - i[b], S = v - i[k], T = !t.middlewareData.shift; + let A = $, L = S; + if (m) { + const E = v - i.left - i.right; + L = p || T ? lt(S, E) : E; + } else { + const E = h - i.top - i.bottom; + A = p || T ? lt($, E) : E; + } + if (T && !p) { + const E = Fe(i.left, 0), F = Fe(i.right, 0), N = Fe(i.top, 0), D = Fe(i.bottom, 0); + m ? L = v - 2 * (E !== 0 || F !== 0 ? E + F : Fe(i.left, i.right)) : A = h - 2 * (N !== 0 || D !== 0 ? N + D : Fe(i.top, i.bottom)); + } + await a({ + ...t, + availableWidth: L, + availableHeight: A + }); + const _ = await o.getDimensions(n.floating); + return v !== _.width || h !== _.height ? { + reset: { + rects: !0 + } + } : {}; + } + }; +}; +function oe(e) { + var t; + return ((t = e.ownerDocument) == null ? void 0 : t.defaultView) || window; +} +function fe(e) { + return oe(e).getComputedStyle(e); +} +const Jr = Math.min, rt = Math.max, Ft = Math.round; +function Ds(e) { + const t = fe(e); + let r = parseFloat(t.width), s = parseFloat(t.height); + const o = e.offsetWidth, n = e.offsetHeight, a = Ft(r) !== o || Ft(s) !== n; + return a && (r = o, s = n), { width: r, height: s, fallback: a }; +} +function $e(e) { + return Gs(e) ? (e.nodeName || "").toLowerCase() : ""; +} +let vt; +function Ws() { + if (vt) + return vt; + const e = navigator.userAgentData; + return e && Array.isArray(e.brands) ? (vt = e.brands.map((t) => t.brand + "/" + t.version).join(" "), vt) : navigator.userAgent; +} +function pe(e) { + return e instanceof oe(e).HTMLElement; +} +function ke(e) { + return e instanceof oe(e).Element; +} +function Gs(e) { + return e instanceof oe(e).Node; +} +function Kr(e) { + return typeof ShadowRoot > "u" ? !1 : e instanceof oe(e).ShadowRoot || e instanceof ShadowRoot; +} +function Lt(e) { + const { overflow: t, overflowX: r, overflowY: s, display: o } = fe(e); + return /auto|scroll|overlay|hidden|clip/.test(t + s + r) && !["inline", "contents"].includes(o); +} +function s0(e) { + return ["table", "td", "th"].includes($e(e)); +} +function Yt(e) { + const t = /firefox/i.test(Ws()), r = fe(e), s = r.backdropFilter || r.WebkitBackdropFilter; + return r.transform !== "none" || r.perspective !== "none" || !!s && s !== "none" || t && r.willChange === "filter" || t && !!r.filter && r.filter !== "none" || ["transform", "perspective"].some((o) => r.willChange.includes(o)) || ["paint", "layout", "strict", "content"].some((o) => { + const n = r.contain; + return n != null && n.includes(o); + }); +} +function Us() { + return !/^((?!chrome|android).)*safari/i.test(Ws()); +} +function fr(e) { + return ["html", "body", "#document"].includes($e(e)); +} +function qs(e) { + return ke(e) ? e : e.contextElement; +} +const Ys = { x: 1, y: 1 }; +function Ve(e) { + const t = qs(e); + if (!pe(t)) + return Ys; + const r = t.getBoundingClientRect(), { width: s, height: o, fallback: n } = Ds(t); + let a = (n ? Ft(r.width) : r.width) / s, l = (n ? Ft(r.height) : r.height) / o; + return a && Number.isFinite(a) || (a = 1), l && Number.isFinite(l) || (l = 1), { x: a, y: l }; +} +function it(e, t, r, s) { + var o, n; + t === void 0 && (t = !1), r === void 0 && (r = !1); + const a = e.getBoundingClientRect(), l = qs(e); + let i = Ys; + t && (s ? ke(s) && (i = Ve(s)) : i = Ve(e)); + const d = l ? oe(l) : window, p = !Us() && r; + let m = (a.left + (p && ((o = d.visualViewport) == null ? void 0 : o.offsetLeft) || 0)) / i.x, v = (a.top + (p && ((n = d.visualViewport) == null ? void 0 : n.offsetTop) || 0)) / i.y, h = a.width / i.x, b = a.height / i.y; + if (l) { + const k = oe(l), $ = s && ke(s) ? oe(s) : s; + let S = k.frameElement; + for (; S && s && $ !== k; ) { + const T = Ve(S), A = S.getBoundingClientRect(), L = getComputedStyle(S); + A.x += (S.clientLeft + parseFloat(L.paddingLeft)) * T.x, A.y += (S.clientTop + parseFloat(L.paddingTop)) * T.y, m *= T.x, v *= T.y, h *= T.x, b *= T.y, m += A.x, v += A.y, S = oe(S).frameElement; + } + } + return { width: h, height: b, top: v, right: m + h, bottom: v + b, left: m, x: m, y: v }; +} +function _e(e) { + return ((Gs(e) ? e.ownerDocument : e.document) || window.document).documentElement; +} +function Et(e) { + return ke(e) ? { scrollLeft: e.scrollLeft, scrollTop: e.scrollTop } : { scrollLeft: e.pageXOffset, scrollTop: e.pageYOffset }; +} +function Js(e) { + return it(_e(e)).left + Et(e).scrollLeft; +} +function dt(e) { + if ($e(e) === "html") + return e; + const t = e.assignedSlot || e.parentNode || Kr(e) && e.host || _e(e); + return Kr(t) ? t.host : t; +} +function Ks(e) { + const t = dt(e); + return fr(t) ? t.ownerDocument.body : pe(t) && Lt(t) ? t : Ks(t); +} +function zt(e, t) { + var r; + t === void 0 && (t = []); + const s = Ks(e), o = s === ((r = e.ownerDocument) == null ? void 0 : r.body), n = oe(s); + return o ? t.concat(n, n.visualViewport || [], Lt(s) ? s : []) : t.concat(s, zt(s)); +} +function Qr(e, t, r) { + return t === "viewport" ? tt(function(s, o) { + const n = oe(s), a = _e(s), l = n.visualViewport; + let i = a.clientWidth, d = a.clientHeight, p = 0, m = 0; + if (l) { + i = l.width, d = l.height; + const v = Us(); + (v || !v && o === "fixed") && (p = l.offsetLeft, m = l.offsetTop); + } + return { width: i, height: d, x: p, y: m }; + }(e, r)) : ke(t) ? tt(function(s, o) { + const n = it(s, !0, o === "fixed"), a = n.top + s.clientTop, l = n.left + s.clientLeft, i = pe(s) ? Ve(s) : { x: 1, y: 1 }; + return { width: s.clientWidth * i.x, height: s.clientHeight * i.y, x: l * i.x, y: a * i.y }; + }(t, r)) : tt(function(s) { + const o = _e(s), n = Et(s), a = s.ownerDocument.body, l = rt(o.scrollWidth, o.clientWidth, a.scrollWidth, a.clientWidth), i = rt(o.scrollHeight, o.clientHeight, a.scrollHeight, a.clientHeight); + let d = -n.scrollLeft + Js(s); + const p = -n.scrollTop; + return fe(a).direction === "rtl" && (d += rt(o.clientWidth, a.clientWidth) - l), { width: l, height: i, x: d, y: p }; + }(_e(e))); +} +function Xr(e) { + return pe(e) && fe(e).position !== "fixed" ? e.offsetParent : null; +} +function Zr(e) { + const t = oe(e); + let r = Xr(e); + for (; r && s0(r) && fe(r).position === "static"; ) + r = Xr(r); + return r && ($e(r) === "html" || $e(r) === "body" && fe(r).position === "static" && !Yt(r)) ? t : r || function(s) { + let o = dt(s); + for (; pe(o) && !fr(o); ) { + if (Yt(o)) + return o; + o = dt(o); + } + return null; + }(e) || t; +} +function o0(e, t, r) { + const s = pe(t), o = _e(t), n = it(e, !0, r === "fixed", t); + let a = { scrollLeft: 0, scrollTop: 0 }; + const l = { x: 0, y: 0 }; + if (s || !s && r !== "fixed") + if (($e(t) !== "body" || Lt(o)) && (a = Et(t)), pe(t)) { + const i = it(t, !0); + l.x = i.x + t.clientLeft, l.y = i.y + t.clientTop; + } else + o && (l.x = Js(o)); + return { x: n.left + a.scrollLeft - l.x, y: n.top + a.scrollTop - l.y, width: n.width, height: n.height }; +} +const n0 = { getClippingRect: function(e) { + let { element: t, boundary: r, rootBoundary: s, strategy: o } = e; + const n = r === "clippingAncestors" ? function(d, p) { + const m = p.get(d); + if (m) + return m; + let v = zt(d).filter(($) => ke($) && $e($) !== "body"), h = null; + const b = fe(d).position === "fixed"; + let k = b ? dt(d) : d; + for (; ke(k) && !fr(k); ) { + const $ = fe(k), S = Yt(k); + (b ? S || h : S || $.position !== "static" || !h || !["absolute", "fixed"].includes(h.position)) ? h = $ : v = v.filter((T) => T !== k), k = dt(k); + } + return p.set(d, v), v; + }(t, this._c) : [].concat(r), a = [...n, s], l = a[0], i = a.reduce((d, p) => { + const m = Qr(t, p, o); + return d.top = rt(m.top, d.top), d.right = Jr(m.right, d.right), d.bottom = Jr(m.bottom, d.bottom), d.left = rt(m.left, d.left), d; + }, Qr(t, l, o)); + return { width: i.right - i.left, height: i.bottom - i.top, x: i.left, y: i.top }; +}, convertOffsetParentRelativeRectToViewportRelativeRect: function(e) { + let { rect: t, offsetParent: r, strategy: s } = e; + const o = pe(r), n = _e(r); + if (r === n) + return t; + let a = { scrollLeft: 0, scrollTop: 0 }, l = { x: 1, y: 1 }; + const i = { x: 0, y: 0 }; + if ((o || !o && s !== "fixed") && (($e(r) !== "body" || Lt(n)) && (a = Et(r)), pe(r))) { + const d = it(r); + l = Ve(r), i.x = d.x + r.clientLeft, i.y = d.y + r.clientTop; + } + return { width: t.width * l.x, height: t.height * l.y, x: t.x * l.x - a.scrollLeft * l.x + i.x, y: t.y * l.y - a.scrollTop * l.y + i.y }; +}, isElement: ke, getDimensions: function(e) { + return pe(e) ? Ds(e) : e.getBoundingClientRect(); +}, getOffsetParent: Zr, getDocumentElement: _e, getScale: Ve, async getElementRects(e) { + let { reference: t, floating: r, strategy: s } = e; + const o = this.getOffsetParent || Zr, n = this.getDimensions; + return { reference: o0(t, await o(r), s), floating: { x: 0, y: 0, ...await n(r) } }; +}, getClientRects: (e) => Array.from(e.getClientRects()), isRTL: (e) => fe(e).direction === "rtl" }, a0 = (e, t, r) => { + const s = /* @__PURE__ */ new Map(), o = { platform: n0, ...r }, n = { ...o.platform, _c: s }; + return Yc(e, t, { ...o, platform: n }); +}, Ie = { + // Disable popper components + disabled: !1, + // Default position offset along main axis (px) + distance: 5, + // Default position offset along cross axis (px) + skidding: 0, + // Default container where the tooltip will be appended + container: "body", + // Element used to compute position and size boundaries + boundary: void 0, + // Skip delay & CSS transitions when another popper is shown, so that the popper appear to instanly move to the new position. + instantMove: !1, + // Auto destroy tooltip DOM nodes (ms) + disposeTimeout: 5e3, + // Triggers on the popper itself + popperTriggers: [], + // Positioning strategy + strategy: "absolute", + // Prevent overflow + preventOverflow: !0, + // Flip to the opposite placement if needed + flip: !0, + // Shift on the cross axis to prevent the popper from overflowing + shift: !0, + // Overflow padding (px) + overflowPadding: 0, + // Arrow padding (px) + arrowPadding: 0, + // Compute arrow overflow (useful to hide it) + arrowOverflow: !0, + // Themes + themes: { + tooltip: { + // Default tooltip placement relative to target element + placement: "top", + // Default events that trigger the tooltip + triggers: ["hover", "focus", "touch"], + // Close tooltip on click on tooltip target + hideTriggers: (e) => [...e, "click"], + // Delay (ms) + delay: { + show: 200, + hide: 0 + }, + // Update popper on content resize + handleResize: !1, + // Enable HTML content in directive + html: !1, + // Displayed when tooltip content is loading + loadingContent: "..." + }, + dropdown: { + // Default dropdown placement relative to target element + placement: "bottom", + // Default events that trigger the dropdown + triggers: ["click"], + // Delay (ms) + delay: 0, + // Update popper on content resize + handleResize: !0, + // Hide on clock outside + autoHide: !0 + }, + menu: { + $extend: "dropdown", + triggers: ["hover", "focus"], + popperTriggers: ["hover", "focus"], + delay: { + show: 0, + hide: 400 + } + } + } +}; +function Jt(e, t) { + let r = Ie.themes[e] || {}, s; + do + s = r[t], typeof s > "u" ? r.$extend ? r = Ie.themes[r.$extend] || {} : (r = null, s = Ie[t]) : r = null; + while (r); + return s; +} +function l0(e) { + const t = [e]; + let r = Ie.themes[e] || {}; + do + r.$extend && !r.$resetCss ? (t.push(r.$extend), r = Ie.themes[r.$extend] || {}) : r = null; + while (r); + return t.map((s) => `v-popper--theme-${s}`); +} +function es(e) { + const t = [e]; + let r = Ie.themes[e] || {}; + do + r.$extend ? (t.push(r.$extend), r = Ie.themes[r.$extend] || {}) : r = null; + while (r); + return t; +} +let je = !1; +if (typeof window < "u") { + je = !1; + try { + const e = Object.defineProperty({}, "passive", { + get() { + je = !0; + } + }); + window.addEventListener("test", null, e); + } catch { + } +} +let Qs = !1; +typeof window < "u" && typeof navigator < "u" && (Qs = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream); +const i0 = ["auto", "top", "bottom", "left", "right"].reduce((e, t) => e.concat([ + t, + `${t}-start`, + `${t}-end` +]), []), ts = { + hover: "mouseenter", + focus: "focus", + click: "click", + touch: "touchstart", + pointer: "pointerdown" +}, rs = { + hover: "mouseleave", + focus: "blur", + click: "click", + touch: "touchend", + pointer: "pointerup" +}; +function ss(e, t) { + const r = e.indexOf(t); + r !== -1 && e.splice(r, 1); +} +function Dt() { + return new Promise((e) => requestAnimationFrame(() => { + requestAnimationFrame(e); + })); +} +const ie = []; +let Pe = null; +const os = {}; +function ns(e) { + let t = os[e]; + return t || (t = os[e] = []), t; +} +let Kt = function() { +}; +typeof window < "u" && (Kt = window.Element); +function O(e) { + return function(t) { + return Jt(t.theme, e); + }; +} +const Wt = "__floating-vue__popper", Xs = () => C({ + name: "VPopper", + provide() { + return { + [Wt]: { + parentPopper: this + } + }; + }, + inject: { + [Wt]: { default: null } + }, + props: { + theme: { + type: String, + required: !0 + }, + targetNodes: { + type: Function, + required: !0 + }, + referenceNode: { + type: Function, + default: null + }, + popperNode: { + type: Function, + required: !0 + }, + shown: { + type: Boolean, + default: !1 + }, + showGroup: { + type: String, + default: null + }, + // eslint-disable-next-line vue/require-prop-types + ariaId: { + default: null + }, + disabled: { + type: Boolean, + default: O("disabled") + }, + positioningDisabled: { + type: Boolean, + default: O("positioningDisabled") + }, + placement: { + type: String, + default: O("placement"), + validator: (e) => i0.includes(e) + }, + delay: { + type: [String, Number, Object], + default: O("delay") + }, + distance: { + type: [Number, String], + default: O("distance") + }, + skidding: { + type: [Number, String], + default: O("skidding") + }, + triggers: { + type: Array, + default: O("triggers") + }, + showTriggers: { + type: [Array, Function], + default: O("showTriggers") + }, + hideTriggers: { + type: [Array, Function], + default: O("hideTriggers") + }, + popperTriggers: { + type: Array, + default: O("popperTriggers") + }, + popperShowTriggers: { + type: [Array, Function], + default: O("popperShowTriggers") + }, + popperHideTriggers: { + type: [Array, Function], + default: O("popperHideTriggers") + }, + container: { + type: [String, Object, Kt, Boolean], + default: O("container") + }, + boundary: { + type: [String, Kt], + default: O("boundary") + }, + strategy: { + type: String, + validator: (e) => ["absolute", "fixed"].includes(e), + default: O("strategy") + }, + autoHide: { + type: [Boolean, Function], + default: O("autoHide") + }, + handleResize: { + type: Boolean, + default: O("handleResize") + }, + instantMove: { + type: Boolean, + default: O("instantMove") + }, + eagerMount: { + type: Boolean, + default: O("eagerMount") + }, + popperClass: { + type: [String, Array, Object], + default: O("popperClass") + }, + computeTransformOrigin: { + type: Boolean, + default: O("computeTransformOrigin") + }, + /** + * @deprecated + */ + autoMinSize: { + type: Boolean, + default: O("autoMinSize") + }, + autoSize: { + type: [Boolean, String], + default: O("autoSize") + }, + /** + * @deprecated + */ + autoMaxSize: { + type: Boolean, + default: O("autoMaxSize") + }, + autoBoundaryMaxSize: { + type: Boolean, + default: O("autoBoundaryMaxSize") + }, + preventOverflow: { + type: Boolean, + default: O("preventOverflow") + }, + overflowPadding: { + type: [Number, String], + default: O("overflowPadding") + }, + arrowPadding: { + type: [Number, String], + default: O("arrowPadding") + }, + arrowOverflow: { + type: Boolean, + default: O("arrowOverflow") + }, + flip: { + type: Boolean, + default: O("flip") + }, + shift: { + type: Boolean, + default: O("shift") + }, + shiftCrossAxis: { + type: Boolean, + default: O("shiftCrossAxis") + }, + noAutoFocus: { + type: Boolean, + default: O("noAutoFocus") + }, + disposeTimeout: { + type: Number, + default: O("disposeTimeout") + } + }, + emits: [ + "show", + "hide", + "update:shown", + "apply-show", + "apply-hide", + "close-group", + "close-directive", + "auto-hide", + "resize", + "dispose" + ], + data() { + return { + isShown: !1, + isMounted: !1, + skipTransition: !1, + classes: { + showFrom: !1, + showTo: !1, + hideFrom: !1, + hideTo: !0 + }, + result: { + x: 0, + y: 0, + placement: "", + strategy: this.strategy, + arrow: { + x: 0, + y: 0, + centerOffset: 0 + }, + transformOrigin: null + }, + shownChildren: /* @__PURE__ */ new Set(), + lastAutoHide: !0 + }; + }, + computed: { + popperId() { + return this.ariaId != null ? this.ariaId : this.randomId; + }, + shouldMountContent() { + return this.eagerMount || this.isMounted; + }, + slotData() { + return { + popperId: this.popperId, + isShown: this.isShown, + shouldMountContent: this.shouldMountContent, + skipTransition: this.skipTransition, + autoHide: typeof this.autoHide == "function" ? this.lastAutoHide : this.autoHide, + show: this.show, + hide: this.hide, + handleResize: this.handleResize, + onResize: this.onResize, + classes: { + ...this.classes, + popperClass: this.popperClass + }, + result: this.positioningDisabled ? null : this.result, + attrs: this.$attrs + }; + }, + parentPopper() { + var e; + return (e = this[Wt]) == null ? void 0 : e.parentPopper; + }, + hasPopperShowTriggerHover() { + var e, t; + return ((e = this.popperTriggers) == null ? void 0 : e.includes("hover")) || ((t = this.popperShowTriggers) == null ? void 0 : t.includes("hover")); + } + }, + watch: { + shown: "$_autoShowHide", + disabled(e) { + e ? this.dispose() : this.init(); + }, + async container() { + this.isShown && (this.$_ensureTeleport(), await this.$_computePosition()); + }, + ...[ + "triggers", + "positioningDisabled" + ].reduce((e, t) => (e[t] = "$_refreshListeners", e), {}), + ...[ + "placement", + "distance", + "skidding", + "boundary", + "strategy", + "overflowPadding", + "arrowPadding", + "preventOverflow", + "shift", + "shiftCrossAxis", + "flip" + ].reduce((e, t) => (e[t] = "$_computePosition", e), {}) + }, + created() { + this.$_isDisposed = !0, this.randomId = `popper_${[Math.random(), Date.now()].map((e) => e.toString(36).substring(2, 10)).join("_")}`, this.autoMinSize && console.warn('[floating-vue] `autoMinSize` option is deprecated. Use `autoSize="min"` instead.'), this.autoMaxSize && console.warn("[floating-vue] `autoMaxSize` option is deprecated. Use `autoBoundaryMaxSize` instead."); + }, + mounted() { + this.init(), this.$_detachPopperNode(); + }, + activated() { + this.$_autoShowHide(); + }, + deactivated() { + this.hide(); + }, + beforeUnmount() { + this.dispose(); + }, + methods: { + show({ event: e = null, skipDelay: t = !1, force: r = !1 } = {}) { + var s, o; + (s = this.parentPopper) != null && s.lockedChild && this.parentPopper.lockedChild !== this || (this.$_pendingHide = !1, (r || !this.disabled) && (((o = this.parentPopper) == null ? void 0 : o.lockedChild) === this && (this.parentPopper.lockedChild = null), this.$_scheduleShow(e, t), this.$emit("show"), this.$_showFrameLocked = !0, requestAnimationFrame(() => { + this.$_showFrameLocked = !1; + })), this.$emit("update:shown", !0)); + }, + hide({ event: e = null, skipDelay: t = !1 } = {}) { + var r; + if (!this.$_hideInProgress) { + if (this.shownChildren.size > 0) { + this.$_pendingHide = !0; + return; + } + if (this.hasPopperShowTriggerHover && this.$_isAimingPopper()) { + this.parentPopper && (this.parentPopper.lockedChild = this, clearTimeout(this.parentPopper.lockedChildTimer), this.parentPopper.lockedChildTimer = setTimeout(() => { + this.parentPopper.lockedChild === this && (this.parentPopper.lockedChild.hide({ skipDelay: t }), this.parentPopper.lockedChild = null); + }, 1e3)); + return; + } + ((r = this.parentPopper) == null ? void 0 : r.lockedChild) === this && (this.parentPopper.lockedChild = null), this.$_pendingHide = !1, this.$_scheduleHide(e, t), this.$emit("hide"), this.$emit("update:shown", !1); + } + }, + init() { + var e; + this.$_isDisposed && (this.$_isDisposed = !1, this.isMounted = !1, this.$_events = [], this.$_preventShow = !1, this.$_referenceNode = ((e = this.referenceNode) == null ? void 0 : e.call(this)) ?? this.$el, this.$_targetNodes = this.targetNodes().filter((t) => t.nodeType === t.ELEMENT_NODE), this.$_popperNode = this.popperNode(), this.$_innerNode = this.$_popperNode.querySelector(".v-popper__inner"), this.$_arrowNode = this.$_popperNode.querySelector(".v-popper__arrow-container"), this.$_swapTargetAttrs("title", "data-original-title"), this.$_detachPopperNode(), this.triggers.length && this.$_addEventListeners(), this.shown && this.show()); + }, + dispose() { + this.$_isDisposed || (this.$_isDisposed = !0, this.$_removeEventListeners(), this.hide({ skipDelay: !0 }), this.$_detachPopperNode(), this.isMounted = !1, this.isShown = !1, this.$_updateParentShownChildren(!1), this.$_swapTargetAttrs("data-original-title", "title"), this.$emit("dispose")); + }, + async onResize() { + this.isShown && (await this.$_computePosition(), this.$emit("resize")); + }, + async $_computePosition() { + if (this.$_isDisposed || this.positioningDisabled) + return; + const e = { + strategy: this.strategy, + middleware: [] + }; + (this.distance || this.skidding) && e.middleware.push(e0({ + mainAxis: this.distance, + crossAxis: this.skidding + })); + const t = this.placement.startsWith("auto"); + if (t ? e.middleware.push(Qc({ + alignment: this.placement.split("-")[1] ?? "" + })) : e.placement = this.placement, this.preventOverflow && (this.shift && e.middleware.push(t0({ + padding: this.overflowPadding, + boundary: this.boundary, + crossAxis: this.shiftCrossAxis + })), !t && this.flip && e.middleware.push(Xc({ + padding: this.overflowPadding, + boundary: this.boundary + }))), e.middleware.push(Jc({ + element: this.$_arrowNode, + padding: this.arrowPadding + })), this.arrowOverflow && e.middleware.push({ + name: "arrowOverflow", + fn: ({ placement: s, rects: o, middlewareData: n }) => { + let a; + const { centerOffset: l } = n.arrow; + return s.startsWith("top") || s.startsWith("bottom") ? a = Math.abs(l) > o.reference.width / 2 : a = Math.abs(l) > o.reference.height / 2, { + data: { + overflow: a + } + }; + } + }), this.autoMinSize || this.autoSize) { + const s = this.autoSize ? this.autoSize : this.autoMinSize ? "min" : null; + e.middleware.push({ + name: "autoSize", + fn: ({ rects: o, placement: n, middlewareData: a }) => { + var l; + if ((l = a.autoSize) != null && l.skip) + return {}; + let i, d; + return n.startsWith("top") || n.startsWith("bottom") ? i = o.reference.width : d = o.reference.height, this.$_innerNode.style[s === "min" ? "minWidth" : s === "max" ? "maxWidth" : "width"] = i != null ? `${i}px` : null, this.$_innerNode.style[s === "min" ? "minHeight" : s === "max" ? "maxHeight" : "height"] = d != null ? `${d}px` : null, { + data: { + skip: !0 + }, + reset: { + rects: !0 + } + }; + } + }); + } + (this.autoMaxSize || this.autoBoundaryMaxSize) && (this.$_innerNode.style.maxWidth = null, this.$_innerNode.style.maxHeight = null, e.middleware.push(r0({ + boundary: this.boundary, + padding: this.overflowPadding, + apply: ({ availableWidth: s, availableHeight: o }) => { + this.$_innerNode.style.maxWidth = s != null ? `${s}px` : null, this.$_innerNode.style.maxHeight = o != null ? `${o}px` : null; + } + }))); + const r = await a0(this.$_referenceNode, this.$_popperNode, e); + Object.assign(this.result, { + x: r.x, + y: r.y, + placement: r.placement, + strategy: r.strategy, + arrow: { + ...r.middlewareData.arrow, + ...r.middlewareData.arrowOverflow + } + }); + }, + $_scheduleShow(e = null, t = !1) { + if (this.$_updateParentShownChildren(!0), this.$_hideInProgress = !1, clearTimeout(this.$_scheduleTimer), Pe && this.instantMove && Pe.instantMove && Pe !== this.parentPopper) { + Pe.$_applyHide(!0), this.$_applyShow(!0); + return; + } + t ? this.$_applyShow() : this.$_scheduleTimer = setTimeout(this.$_applyShow.bind(this), this.$_computeDelay("show")); + }, + $_scheduleHide(e = null, t = !1) { + if (this.shownChildren.size > 0) { + this.$_pendingHide = !0; + return; + } + this.$_updateParentShownChildren(!1), this.$_hideInProgress = !0, clearTimeout(this.$_scheduleTimer), this.isShown && (Pe = this), t ? this.$_applyHide() : this.$_scheduleTimer = setTimeout(this.$_applyHide.bind(this), this.$_computeDelay("hide")); + }, + $_computeDelay(e) { + const t = this.delay; + return parseInt(t && t[e] || t || 0); + }, + async $_applyShow(e = !1) { + clearTimeout(this.$_disposeTimer), clearTimeout(this.$_scheduleTimer), this.skipTransition = e, !this.isShown && (this.$_ensureTeleport(), await Dt(), await this.$_computePosition(), await this.$_applyShowEffect(), this.positioningDisabled || this.$_registerEventListeners([ + ...zt(this.$_referenceNode), + ...zt(this.$_popperNode) + ], "scroll", () => { + this.$_computePosition(); + })); + }, + async $_applyShowEffect() { + if (this.$_hideInProgress) + return; + if (this.computeTransformOrigin) { + const t = this.$_referenceNode.getBoundingClientRect(), r = this.$_popperNode.querySelector(".v-popper__wrapper"), s = r.parentNode.getBoundingClientRect(), o = t.x + t.width / 2 - (s.left + r.offsetLeft), n = t.y + t.height / 2 - (s.top + r.offsetTop); + this.result.transformOrigin = `${o}px ${n}px`; + } + this.isShown = !0, this.$_applyAttrsToTarget({ + "aria-describedby": this.popperId, + "data-popper-shown": "" + }); + const e = this.showGroup; + if (e) { + let t; + for (let r = 0; r < ie.length; r++) + t = ie[r], t.showGroup !== e && (t.hide(), t.$emit("close-group")); + } + ie.push(this), document.body.classList.add("v-popper--some-open"); + for (const t of es(this.theme)) + ns(t).push(this), document.body.classList.add(`v-popper--some-open--${t}`); + this.$emit("apply-show"), this.classes.showFrom = !0, this.classes.showTo = !1, this.classes.hideFrom = !1, this.classes.hideTo = !1, await Dt(), this.classes.showFrom = !1, this.classes.showTo = !0, this.noAutoFocus || this.$_popperNode.focus(); + }, + async $_applyHide(e = !1) { + if (this.shownChildren.size > 0) { + this.$_pendingHide = !0, this.$_hideInProgress = !1; + return; + } + if (clearTimeout(this.$_scheduleTimer), !this.isShown) + return; + this.skipTransition = e, ss(ie, this), ie.length === 0 && document.body.classList.remove("v-popper--some-open"); + for (const r of es(this.theme)) { + const s = ns(r); + ss(s, this), s.length === 0 && document.body.classList.remove(`v-popper--some-open--${r}`); + } + Pe === this && (Pe = null), this.isShown = !1, this.$_applyAttrsToTarget({ + "aria-describedby": void 0, + "data-popper-shown": void 0 + }), clearTimeout(this.$_disposeTimer); + const t = this.disposeTimeout; + t !== null && (this.$_disposeTimer = setTimeout(() => { + this.$_popperNode && (this.$_detachPopperNode(), this.isMounted = !1); + }, t)), this.$_removeEventListeners("scroll"), this.$emit("apply-hide"), this.classes.showFrom = !1, this.classes.showTo = !1, this.classes.hideFrom = !0, this.classes.hideTo = !1, await Dt(), this.classes.hideFrom = !1, this.classes.hideTo = !0; + }, + $_autoShowHide() { + this.shown ? this.show() : this.hide(); + }, + $_ensureTeleport() { + if (this.$_isDisposed) + return; + let e = this.container; + if (typeof e == "string" ? e = window.document.querySelector(e) : e === !1 && (e = this.$_targetNodes[0].parentNode), !e) + throw new Error("No container for popover: " + this.container); + e.appendChild(this.$_popperNode), this.isMounted = !0; + }, + $_addEventListeners() { + const e = (r) => { + this.isShown && !this.$_hideInProgress || (r.usedByTooltip = !0, !this.$_preventShow && this.show({ event: r })); + }; + this.$_registerTriggerListeners(this.$_targetNodes, ts, this.triggers, this.showTriggers, e), this.$_registerTriggerListeners([this.$_popperNode], ts, this.popperTriggers, this.popperShowTriggers, e); + const t = (r) => { + r.usedByTooltip || this.hide({ event: r }); + }; + this.$_registerTriggerListeners(this.$_targetNodes, rs, this.triggers, this.hideTriggers, t), this.$_registerTriggerListeners([this.$_popperNode], rs, this.popperTriggers, this.popperHideTriggers, t); + }, + $_registerEventListeners(e, t, r) { + this.$_events.push({ targetNodes: e, eventType: t, handler: r }), e.forEach((s) => s.addEventListener(t, r, je ? { + passive: !0 + } : void 0)); + }, + $_registerTriggerListeners(e, t, r, s, o) { + let n = r; + s != null && (n = typeof s == "function" ? s(n) : s), n.forEach((a) => { + const l = t[a]; + l && this.$_registerEventListeners(e, l, o); + }); + }, + $_removeEventListeners(e) { + const t = []; + this.$_events.forEach((r) => { + const { targetNodes: s, eventType: o, handler: n } = r; + !e || e === o ? s.forEach((a) => a.removeEventListener(o, n)) : t.push(r); + }), this.$_events = t; + }, + $_refreshListeners() { + this.$_isDisposed || (this.$_removeEventListeners(), this.$_addEventListeners()); + }, + $_handleGlobalClose(e, t = !1) { + this.$_showFrameLocked || (this.hide({ event: e }), e.closePopover ? this.$emit("close-directive") : this.$emit("auto-hide"), t && (this.$_preventShow = !0, setTimeout(() => { + this.$_preventShow = !1; + }, 300))); + }, + $_detachPopperNode() { + this.$_popperNode.parentNode && this.$_popperNode.parentNode.removeChild(this.$_popperNode); + }, + $_swapTargetAttrs(e, t) { + for (const r of this.$_targetNodes) { + const s = r.getAttribute(e); + s && (r.removeAttribute(e), r.setAttribute(t, s)); + } + }, + $_applyAttrsToTarget(e) { + for (const t of this.$_targetNodes) + for (const r in e) { + const s = e[r]; + s == null ? t.removeAttribute(r) : t.setAttribute(r, s); + } + }, + $_updateParentShownChildren(e) { + let t = this.parentPopper; + for (; t; ) + e ? t.shownChildren.add(this.randomId) : (t.shownChildren.delete(this.randomId), t.$_pendingHide && t.hide()), t = t.parentPopper; + }, + $_isAimingPopper() { + const e = this.$_referenceNode.getBoundingClientRect(); + if (st >= e.left && st <= e.right && ot >= e.top && ot <= e.bottom) { + const t = this.$_popperNode.getBoundingClientRect(), r = st - ye, s = ot - we, o = t.left + t.width / 2 - ye + (t.top + t.height / 2) - we + t.width + t.height, n = ye + r * o, a = we + s * o; + return yt(ye, we, n, a, t.left, t.top, t.left, t.bottom) || // Left edge + yt(ye, we, n, a, t.left, t.top, t.right, t.top) || // Top edge + yt(ye, we, n, a, t.right, t.top, t.right, t.bottom) || // Right edge + yt(ye, we, n, a, t.left, t.bottom, t.right, t.bottom); + } + return !1; + } + }, + render() { + return this.$slots.default(this.slotData); + } +}); +typeof document < "u" && typeof window < "u" && (Qs ? (document.addEventListener("touchstart", as, je ? { + passive: !0, + capture: !0 +} : !0), document.addEventListener("touchend", u0, je ? { + passive: !0, + capture: !0 +} : !0)) : (window.addEventListener("mousedown", as, !0), window.addEventListener("click", d0, !0)), window.addEventListener("resize", p0)); +function as(e) { + for (let t = 0; t < ie.length; t++) { + const r = ie[t]; + try { + const s = r.popperNode(); + r.$_mouseDownContains = s.contains(e.target); + } catch { + } + } +} +function d0(e) { + Zs(e); +} +function u0(e) { + Zs(e, !0); +} +function Zs(e, t = !1) { + const r = {}; + for (let s = ie.length - 1; s >= 0; s--) { + const o = ie[s]; + try { + const n = o.$_containsGlobalTarget = c0(o, e); + o.$_pendingHide = !1, requestAnimationFrame(() => { + if (o.$_pendingHide = !1, !r[o.randomId] && ls(o, n, e)) { + if (o.$_handleGlobalClose(e, t), !e.closeAllPopover && e.closePopover && n) { + let l = o.parentPopper; + for (; l; ) + r[l.randomId] = !0, l = l.parentPopper; + return; + } + let a = o.parentPopper; + for (; a && ls(a, a.$_containsGlobalTarget, e); ) + a.$_handleGlobalClose(e, t), a = a.parentPopper; + } + }); + } catch { + } + } +} +function c0(e, t) { + const r = e.popperNode(); + return e.$_mouseDownContains || r.contains(t.target); +} +function ls(e, t, r) { + return r.closeAllPopover || r.closePopover && t || f0(e, r) && !t; +} +function f0(e, t) { + if (typeof e.autoHide == "function") { + const r = e.autoHide(t); + return e.lastAutoHide = r, r; + } + return e.autoHide; +} +function p0(e) { + for (let t = 0; t < ie.length; t++) + ie[t].$_computePosition(e); +} +let ye = 0, we = 0, st = 0, ot = 0; +typeof window < "u" && window.addEventListener("mousemove", (e) => { + ye = st, we = ot, st = e.clientX, ot = e.clientY; +}, je ? { + passive: !0 +} : void 0); +function yt(e, t, r, s, o, n, a, l) { + const i = ((a - o) * (t - n) - (l - n) * (e - o)) / ((l - n) * (r - e) - (a - o) * (s - t)), d = ((r - e) * (t - n) - (s - t) * (e - o)) / ((l - n) * (r - e) - (a - o) * (s - t)); + return i >= 0 && i <= 1 && d >= 0 && d <= 1; +} +const g0 = { + extends: Xs() +}, pr = (e, t) => { + const r = e.__vccOpts || e; + for (const [s, o] of t) + r[s] = o; + return r; +}; +function h0(e, t, r, s, o, n) { + return u(), g("div", { + ref: "reference", + class: x(["v-popper", { + "v-popper--shown": e.slotData.isShown + }]) + }, [ + w(e.$slots, "default", Se(ps(e.slotData))) + ], 2); +} +const m0 = /* @__PURE__ */ pr(g0, [["render", h0]]); +function b0() { + var e = window.navigator.userAgent, t = e.indexOf("MSIE "); + if (t > 0) + return parseInt(e.substring(t + 5, e.indexOf(".", t)), 10); + var r = e.indexOf("Trident/"); + if (r > 0) { + var s = e.indexOf("rv:"); + return parseInt(e.substring(s + 3, e.indexOf(".", s)), 10); + } + var o = e.indexOf("Edge/"); + return o > 0 ? parseInt(e.substring(o + 5, e.indexOf(".", o)), 10) : -1; +} +let xt; +function Qt() { + Qt.init || (Qt.init = !0, xt = b0() !== -1); +} +var Nt = { + name: "ResizeObserver", + props: { + emitOnMount: { + type: Boolean, + default: !1 + }, + ignoreWidth: { + type: Boolean, + default: !1 + }, + ignoreHeight: { + type: Boolean, + default: !1 + } + }, + emits: [ + "notify" + ], + mounted() { + Qt(), Zt(() => { + this._w = this.$el.offsetWidth, this._h = this.$el.offsetHeight, this.emitOnMount && this.emitSize(); + }); + const e = document.createElement("object"); + this._resizeObject = e, e.setAttribute("aria-hidden", "true"), e.setAttribute("tabindex", -1), e.onload = this.addResizeHandlers, e.type = "text/html", xt && this.$el.appendChild(e), e.data = "about:blank", xt || this.$el.appendChild(e); + }, + beforeUnmount() { + this.removeResizeHandlers(); + }, + methods: { + compareAndNotify() { + (!this.ignoreWidth && this._w !== this.$el.offsetWidth || !this.ignoreHeight && this._h !== this.$el.offsetHeight) && (this._w = this.$el.offsetWidth, this._h = this.$el.offsetHeight, this.emitSize()); + }, + emitSize() { + this.$emit("notify", { + width: this._w, + height: this._h + }); + }, + addResizeHandlers() { + this._resizeObject.contentDocument.defaultView.addEventListener("resize", this.compareAndNotify), this.compareAndNotify(); + }, + removeResizeHandlers() { + this._resizeObject && this._resizeObject.onload && (!xt && this._resizeObject.contentDocument && this._resizeObject.contentDocument.defaultView.removeEventListener("resize", this.compareAndNotify), this.$el.removeChild(this._resizeObject), this._resizeObject.onload = null, this._resizeObject = null); + } + } +}; +const v0 = /* @__PURE__ */ po("data-v-b329ee4c"); +us("data-v-b329ee4c"); +const y0 = { + class: "resize-observer", + tabindex: "-1" +}; +cs(); +const w0 = /* @__PURE__ */ v0((e, t, r, s, o, n) => (u(), H("div", y0))); +Nt.render = w0; +Nt.__scopeId = "data-v-b329ee4c"; +Nt.__file = "src/components/ResizeObserver.vue"; +const eo = (e = "theme") => ({ + computed: { + themeClass() { + return l0(this[e]); + } + } +}), x0 = C({ + name: "VPopperContent", + components: { + ResizeObserver: Nt + }, + mixins: [ + eo() + ], + props: { + popperId: String, + theme: String, + shown: Boolean, + mounted: Boolean, + skipTransition: Boolean, + autoHide: Boolean, + handleResize: Boolean, + classes: Object, + result: Object + }, + emits: [ + "hide", + "resize" + ], + methods: { + toPx(e) { + return e != null && !isNaN(e) ? `${e}px` : null; + } + } +}), k0 = ["id", "aria-hidden", "tabindex", "data-popper-placement"], _0 = { + ref: "inner", + class: "v-popper__inner" +}, C0 = /* @__PURE__ */ f("div", { class: "v-popper__arrow-outer" }, null, -1), $0 = /* @__PURE__ */ f("div", { class: "v-popper__arrow-inner" }, null, -1), S0 = [ + C0, + $0 +]; +function T0(e, t, r, s, o, n) { + const a = be("ResizeObserver"); + return u(), g("div", { + id: e.popperId, + ref: "popover", + class: x(["v-popper__popper", [ + e.themeClass, + e.classes.popperClass, + { + "v-popper__popper--shown": e.shown, + "v-popper__popper--hidden": !e.shown, + "v-popper__popper--show-from": e.classes.showFrom, + "v-popper__popper--show-to": e.classes.showTo, + "v-popper__popper--hide-from": e.classes.hideFrom, + "v-popper__popper--hide-to": e.classes.hideTo, + "v-popper__popper--skip-transition": e.skipTransition, + "v-popper__popper--arrow-overflow": e.result && e.result.arrow.overflow, + "v-popper__popper--no-positioning": !e.result + } + ]]), + style: et(e.result ? { + position: e.result.strategy, + transform: `translate3d(${Math.round(e.result.x)}px,${Math.round(e.result.y)}px,0)` + } : void 0), + "aria-hidden": e.shown ? "false" : "true", + tabindex: e.autoHide ? 0 : void 0, + "data-popper-placement": e.result ? e.result.placement : void 0, + onKeyup: t[2] || (t[2] = fs((l) => e.autoHide && e.$emit("hide"), ["esc"])) + }, [ + f("div", { + class: "v-popper__backdrop", + onClick: t[0] || (t[0] = (l) => e.autoHide && e.$emit("hide")) + }), + f("div", { + class: "v-popper__wrapper", + style: et(e.result ? { + transformOrigin: e.result.transformOrigin + } : void 0) + }, [ + f("div", _0, [ + e.mounted ? (u(), g(q, { key: 0 }, [ + f("div", null, [ + w(e.$slots, "default") + ]), + e.handleResize ? (u(), H(a, { + key: 0, + onNotify: t[1] || (t[1] = (l) => e.$emit("resize", l)) + })) : P("", !0) + ], 64)) : P("", !0) + ], 512), + f("div", { + ref: "arrow", + class: "v-popper__arrow-container", + style: et(e.result ? { + left: e.toPx(e.result.arrow.x), + top: e.toPx(e.result.arrow.y) + } : void 0) + }, S0, 4) + ], 4) + ], 46, k0); +} +const to = /* @__PURE__ */ pr(x0, [["render", T0]]), ro = { + methods: { + show(...e) { + return this.$refs.popper.show(...e); + }, + hide(...e) { + return this.$refs.popper.hide(...e); + }, + dispose(...e) { + return this.$refs.popper.dispose(...e); + }, + onResize(...e) { + return this.$refs.popper.onResize(...e); + } + } +}, P0 = C({ + name: "VPopperWrapper", + components: { + Popper: m0, + PopperContent: to + }, + mixins: [ + ro, + eo("finalTheme") + ], + props: { + theme: { + type: String, + default: null + } + }, + computed: { + finalTheme() { + return this.theme ?? this.$options.vPopperTheme; + } + }, + methods: { + getTargetNodes() { + return Array.from(this.$el.children).filter((e) => e !== this.$refs.popperContent.$el); + } + } +}); +function F0(e, t, r, s, o, n) { + const a = be("PopperContent"), l = be("Popper"); + return u(), H(l, { + ref: "popper", + theme: e.finalTheme, + "target-nodes": e.getTargetNodes, + "popper-node": () => e.$refs.popperContent.$el, + class: x([ + e.themeClass + ]) + }, { + default: j(({ + popperId: i, + isShown: d, + shouldMountContent: p, + skipTransition: m, + autoHide: v, + show: h, + hide: b, + handleResize: k, + onResize: $, + classes: S, + result: T + }) => [ + w(e.$slots, "default", { + shown: d, + show: h, + hide: b + }), + ze(a, { + ref: "popperContent", + "popper-id": i, + theme: e.finalTheme, + shown: d, + mounted: p, + "skip-transition": m, + "auto-hide": v, + "handle-resize": k, + classes: S, + result: T, + onHide: b, + onResize: $ + }, { + default: j(() => [ + w(e.$slots, "popper", { + shown: d, + hide: b + }) + ]), + _: 2 + }, 1032, ["popper-id", "theme", "shown", "mounted", "skip-transition", "auto-hide", "handle-resize", "classes", "result", "onHide", "onResize"]) + ]), + _: 3 + }, 8, ["theme", "target-nodes", "popper-node", "class"]); +} +const gr = /* @__PURE__ */ pr(P0, [["render", F0]]); +({ + ...gr +}); +({ + ...gr +}); +const z0 = { + ...gr, + name: "VTooltip", + vPopperTheme: "tooltip" +}; +C({ + name: "VTooltipDirective", + components: { + Popper: Xs(), + PopperContent: to + }, + mixins: [ + ro + ], + inheritAttrs: !1, + props: { + theme: { + type: String, + default: "tooltip" + }, + html: { + type: Boolean, + default: (e) => Jt(e.theme, "html") + }, + content: { + type: [String, Number, Function], + default: null + }, + loadingContent: { + type: String, + default: (e) => Jt(e.theme, "loadingContent") + }, + targetNodes: { + type: Function, + required: !0 + } + }, + data() { + return { + asyncContent: null + }; + }, + computed: { + isContentAsync() { + return typeof this.content == "function"; + }, + loading() { + return this.isContentAsync && this.asyncContent == null; + }, + finalContent() { + return this.isContentAsync ? this.loading ? this.loadingContent : this.asyncContent : this.content; + } + }, + watch: { + content: { + handler() { + this.fetchContent(!0); + }, + immediate: !0 + }, + async finalContent() { + await this.$nextTick(), this.$refs.popper.onResize(); + } + }, + created() { + this.$_fetchId = 0; + }, + methods: { + fetchContent(e) { + if (typeof this.content == "function" && this.$_isShown && (e || !this.$_loading && this.asyncContent == null)) { + this.asyncContent = null, this.$_loading = !0; + const t = ++this.$_fetchId, r = this.content(this); + r.then ? r.then((s) => this.onResult(t, s)) : this.onResult(t, r); + } + }, + onResult(e, t) { + e === this.$_fetchId && (this.$_loading = !1, this.asyncContent = t); + }, + onShow() { + this.$_isShown = !0, this.fetchContent(); + }, + onHide() { + this.$_isShown = !1; + } + } +}); +const A0 = z0; +const I0 = { class: "flex items-start" }, Zp = /* @__PURE__ */ C({ + __name: "FwbTooltip", + props: { + placement: { default: "top" }, + theme: { default: "dark" }, + trigger: { default: "hover" } + }, + setup(e) { + const t = e, r = c(() => ({ + light: "tooltip-light", + dark: "tooltip-dark" + })[t.theme]); + return (s, o) => (u(), g("div", I0, [ + ze(y(A0), { + placement: s.placement, + triggers: [s.trigger], + theme: r.value, + "auto-hide": "" + }, { + popper: j(() => [ + w(s.$slots, "content") + ]), + default: j(() => [ + w(s.$slots, "trigger") + ]), + _: 3 + }, 8, ["placement", "triggers", "theme"]) + ])); + } +}); +const M0 = "block text-sm font-medium text-gray-900 dark:text-gray-300", O0 = "w-4 h-4 rounded bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"; +function B0() { + const e = c(() => ne(O0)), t = c(() => M0); + return { + checkboxClasses: e, + labelClasses: t + }; +} +const L0 = { class: "flex gap-3 items-center justify-start" }, E0 = ["disabled"], eg = /* @__PURE__ */ C({ + __name: "FwbCheckbox", + props: { + disabled: { type: Boolean, default: !1 }, + label: { default: "" }, + modelValue: { type: Boolean, default: !1 } + }, + emits: ["update:modelValue"], + setup(e, { emit: t }) { + const r = e, s = t, o = c({ + get() { + return r.modelValue; + }, + set(l) { + s("update:modelValue", l); + } + }), { + checkboxClasses: n, + labelClasses: a + } = B0(); + return (l, i) => (u(), g("label", L0, [ + Te(f("input", { + "onUpdate:modelValue": i[0] || (i[0] = (d) => o.value = d), + class: x(y(n)), + disabled: l.disabled, + type: "checkbox" + }, null, 10, E0), [ + [gs, o.value] + ]), + l.label ? (u(), g("span", { + key: 0, + class: x(y(a)) + }, M(l.label), 3)) : P("", !0), + w(l.$slots, "default") + ])); + } +}), N0 = "block w-full text-sm text-gray-900 border-[1px] border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400", R0 = "block mb-2 text-sm font-medium text-gray-900 dark:text-white", V0 = "flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600", j0 = "flex flex-col items-center justify-center pt-5 pb-6", H0 = "!-mb-2 text-sm text-gray-500 dark:text-gray-400"; +function D0(e) { + const t = c(() => ne( + N0, + "text-" + e + )), r = c(() => R0), s = c(() => V0), o = c(() => j0), n = c(() => H0); + return { + fileInpClasses: t, + labelClasses: r, + dropzoneLabelClasses: s, + dropzoneWrapClasses: o, + dropzoneTextClasses: n + }; +} +const W0 = { key: 0 }, G0 = ["multiple"], U0 = /* @__PURE__ */ f("svg", { + "aria-hidden": "true", + class: "w-8 h-8 text-gray-500 dark:text-gray-400", + fill: "none", + viewBox: "0 0 20 16", + xmlns: "http://www.w3.org/2000/svg" +}, [ + /* @__PURE__ */ f("path", { + d: "M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2", + "stroke-linecap": "round", + "stroke-linejoin": "round", + "stroke-width": "2", + stroke: "currentColor" + }) +], -1), q0 = { key: 0 }, Y0 = /* @__PURE__ */ f("span", { class: "font-semibold" }, "Click to upload", -1), J0 = { key: 1 }, K0 = ["multiple"], tg = /* @__PURE__ */ C({ + __name: "FwbFileInput", + props: { + dropzone: { type: Boolean, default: !1 }, + label: { default: "" }, + modelValue: { default: null }, + multiple: { type: Boolean, default: !1 }, + size: { default: "sm" } + }, + emits: ["update:modelValue"], + setup(e, { emit: t }) { + const r = e, s = c(() => We(r.modelValue) ? r.modelValue.map((b) => b.name).join(", ") : r.modelValue instanceof FileList ? Array.from(r.modelValue).map((b) => b.name).join(",") : r.modelValue instanceof File && r.modelValue.name || ""), o = t, n = c({ + get() { + return r.modelValue; + }, + set(b) { + o("update:modelValue", b); + } + }), a = (b) => { + const k = b.target; + r.multiple ? n.value = Array.from(k.files ?? []) : n.value = k.files?.[0] ?? null; + }, l = (b) => { + b.preventDefault(); + const k = []; + b.dataTransfer?.items ? (Object.values(b.dataTransfer.items).forEach(($) => { + $.kind === "file" && k.push($.getAsFile()); + }), r.multiple ? n.value = k : n.value = k[0]) : b.dataTransfer?.files && Object.values(b.dataTransfer.files).forEach(($) => { + n.value = $; + }); + }, i = (b) => { + b.preventDefault(); + }, { + fileInpClasses: d, + labelClasses: p, + dropzoneLabelClasses: m, + dropzoneWrapClasses: v, + dropzoneTextClasses: h + } = D0(r.size); + return (b, k) => (u(), g("div", null, [ + b.dropzone ? (u(), g("div", { + key: 1, + class: "flex items-center justify-center", + onChange: a, + onDragover: i, + onDrop: l + }, [ + f("label", { + class: x(y(m)) + }, [ + f("div", { + class: x(y(v)) + }, [ + U0, + n.value ? (u(), g("p", J0, "File: " + M(s.value), 1)) : (u(), g("div", q0, [ + f("p", { + class: x(y(h)) + }, [ + Y0, + te(" or drag and drop ") + ], 2), + w(b.$slots, "default") + ])) + ], 2), + f("input", { + multiple: b.multiple, + type: "file", + class: "hidden" + }, null, 8, K0) + ], 2) + ], 32)) : (u(), g("div", W0, [ + f("label", null, [ + f("span", { + class: x(y(p)) + }, M(b.label), 3), + f("input", { + class: x(y(d)), + multiple: b.multiple, + type: "file", + onChange: a + }, null, 42, G0) + ]), + w(b.$slots, "default") + ])) + ])); + } +}), Re = { + Success: "success", + Error: "error" +}, Q0 = "block mb-2 text-sm font-medium", X0 = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500", Z0 = "cursor-not-allowed bg-gray-100", ef = { + lg: "p-4", + md: "p-2.5 text-sm", + sm: "p-2 text-sm" +}, tf = "bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 focus:ring-green-500 focus:border-green-500", rf = "bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500"; +function sf(e) { + const t = c(() => { + const s = e.validationStatus.value, o = s === Re.Success ? tf : s === Re.Error ? rf : ""; + return B( + X0, + o, + ef[e.size.value], + e.disabled.value ? Z0 : "" + ); + }), r = c(() => { + const s = e.validationStatus.value, o = s === Re.Success ? "text-green-700 dark:text-green-500" : s === Re.Error ? "text-red-700 dark:text-red-500" : "text-gray-900 dark:text-white"; + return B(Q0, o); + }); + return { + inputClasses: t, + labelClasses: r + }; +} +const of = { class: "flex relative" }, nf = { + key: 0, + class: "w-10 flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none overflow-hidden" +}, af = ["disabled", "type", "required"], lf = { + key: 1, + class: "absolute right-2.5 bottom-2.5" +}, df = { + key: 2, + class: "mt-2 text-sm text-gray-500 dark:text-gray-400" +}, rg = /* @__PURE__ */ C({ + __name: "FwbInput", + props: { + disabled: { type: Boolean, default: !1 }, + label: { default: "" }, + modelValue: { default: "" }, + required: { type: Boolean, default: !1 }, + size: { default: "md" }, + type: { default: "text" }, + validationStatus: { default: void 0 } + }, + setup(e) { + const t = e, r = $s(t, "modelValue"), { inputClasses: s, labelClasses: o } = sf(Y(t)), n = c(() => B( + "mt-2 text-sm", + t.validationStatus === Re.Success ? "text-green-600 dark:text-green-500" : "", + t.validationStatus === Re.Error ? "text-red-600 dark:text-red-500" : "" + )); + return (a, l) => (u(), g("div", null, [ + a.label ? (u(), g("label", { + key: 0, + class: x(y(o)) + }, M(a.label), 3)) : P("", !0), + f("div", of, [ + a.$slots.prefix ? (u(), g("div", nf, [ + w(a.$slots, "prefix") + ])) : P("", !0), + Te(f("input", re(a.$attrs, { + "onUpdate:modelValue": l[0] || (l[0] = (i) => Xt(r) ? r.value = i : null), + disabled: a.disabled, + type: a.type, + required: a.required, + class: [y(s), a.$slots.prefix ? "pl-10" : ""] + }), null, 16, af), [ + [go, y(r)] + ]), + a.$slots.suffix ? (u(), g("div", lf, [ + w(a.$slots, "suffix") + ])) : P("", !0) + ]), + a.$slots.validationMessage ? (u(), g("p", { + key: 1, + class: x(n.value) + }, [ + w(a.$slots, "validationMessage") + ], 2)) : P("", !0), + a.$slots.helper ? (u(), g("p", df, [ + w(a.$slots, "helper") + ])) : P("", !0) + ])); + } +}), uf = { class: "flex w-[100%] items-center" }, cf = ["disabled", "name", "value"], ff = "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600", pf = "m-2 mr-0 text-sm font-medium text-gray-900 dark:text-gray-300", sg = /* @__PURE__ */ C({ + __name: "FwbRadio", + props: { + modelValue: { default: "" }, + name: { default: "" }, + value: { default: "" }, + label: { default: "" }, + disabled: { type: Boolean, default: !1 } + }, + emits: ["update:modelValue"], + setup(e, { emit: t }) { + const r = e, s = t, o = c({ + get() { + return r.modelValue; + }, + set(l) { + s("update:modelValue", l); + } + }), n = c(() => ff), a = c(() => B(pf, r.disabled && "text-gray-400 dark:text-gray-500")); + return (l, i) => (u(), g("label", uf, [ + Te(f("input", { + "onUpdate:modelValue": i[0] || (i[0] = (d) => o.value = d), + type: "radio", + disabled: l.disabled, + name: l.name, + value: l.value, + class: x(n.value) + }, null, 10, cf), [ + [ho, o.value] + ]), + f("span", { + class: x(a.value) + }, M(l.label), 3), + w(l.$slots, "default") + ])); + } +}), gf = "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700", hf = "block mb-2 text-sm font-medium text-gray-900 dark:text-white", mf = { + lg: "h-3 range-lg", + md: "h-2 range-md", + sm: "h-1 range-sm" +}; +function bf(e) { + const t = c(() => ne( + gf, + mf[e.size.value] + )), r = c(() => hf); + return { + rangeClasses: t, + labelClasses: r + }; +} +const vf = { class: "flex flex-col" }, yf = ["step", "min", "max", "disabled"], wf = /* @__PURE__ */ C({ + __name: "FwbRange", + props: { + disabled: { type: Boolean, default: !1 }, + label: { default: "Range slider" }, + max: { default: 100 }, + min: { default: 0 }, + modelValue: { default: 50 }, + size: { default: "md" }, + steps: { default: 1 } + }, + emits: ["update:modelValue"], + setup(e, { emit: t }) { + const r = e, s = t, o = c({ + get() { + return r.modelValue; + }, + set(l) { + s("update:modelValue", l); + } + }), { rangeClasses: n, labelClasses: a } = bf(Y(r)); + return (l, i) => (u(), g("label", vf, [ + f("span", { + class: x(y(a)) + }, M(l.label), 3), + Te(f("input", { + "onUpdate:modelValue": i[0] || (i[0] = (d) => o.value = d), + step: l.steps, + min: l.min, + max: l.max, + disabled: l.disabled, + type: "range", + class: x(y(n)) + }, null, 10, yf), [ + [hs, o.value] + ]) + ])); + } +}); +const og = /* @__PURE__ */ he(wf, [["__scopeId", "data-v-c4cfe3d4"]]), xe = { + Success: "success", + Error: "error" +}, xf = "block mb-2 text-sm font-medium", kf = "w-full text-gray-900 bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500", _f = "cursor-not-allowed bg-gray-100", Cf = "bg-transparent dark:bg-transparent border-b-2 border-gray-200 appearance-none dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer", $f = { + lg: "p-4", + md: "p-2.5 text-sm", + sm: "p-2 text-sm" +}, Sf = "bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 focus:ring-green-500 focus:border-green-500", Tf = "bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500"; +function Pf(e) { + const t = c(() => { + const s = e.validationStatus.value, o = s === xe.Success ? Sf : s === xe.Error ? Tf : "", n = s === xe.Success ? "focus:border-green-500" : s === xe.Error ? "focus:border-red-500" : ""; + return B( + kf, + o, + $f[e.size.value], + e.disabled.value && _f, + e.underline.value ? Cf : "border border-gray-300 rounded-lg", + e.underline.value && n + ); + }), r = c(() => { + const s = e.validationStatus.value, o = s === xe.Success ? "text-green-700 dark:text-green-500" : s === xe.Error ? "text-red-700 dark:text-red-500" : "text-gray-900 dark:text-white"; + return B(xf, o); + }); + return { + selectClasses: t, + labelClasses: r + }; +} +const Ff = ["disabled"], zf = { + disabled: "", + selected: "", + value: "" +}, Af = ["value"], If = { + key: 1, + class: "mt-2 text-sm text-gray-500 dark:text-gray-400" +}, ng = /* @__PURE__ */ C({ + __name: "FwbSelect", + props: { + modelValue: { default: "" }, + label: { default: "" }, + options: { default: () => [] }, + placeholder: { default: "Please select one" }, + disabled: { type: Boolean, default: !1 }, + underline: { type: Boolean, default: !1 }, + size: { default: "md" }, + validationStatus: { default: void 0 } + }, + emits: ["update:modelValue"], + setup(e, { emit: t }) { + const r = e, o = $s(r, "modelValue", t), { selectClasses: n, labelClasses: a } = Pf(Y(r)), l = c(() => B( + "mt-2 text-sm", + r.validationStatus === xe.Success ? "text-green-600 dark:text-green-500" : "", + r.validationStatus === xe.Error ? "text-red-600 dark:text-red-500" : "" + )); + return (i, d) => (u(), g("div", null, [ + f("label", null, [ + i.label ? (u(), g("span", { + key: 0, + class: x(y(a)) + }, M(i.label), 3)) : P("", !0), + Te(f("select", { + "onUpdate:modelValue": d[0] || (d[0] = (p) => Xt(o) ? o.value = p : null), + disabled: i.disabled, + class: x(y(n)) + }, [ + f("option", zf, M(i.placeholder), 1), + (u(!0), g(q, null, Me(i.options, (p, m) => (u(), g("option", { + key: m, + value: p.value + }, M(p.name), 9, Af))), 128)) + ], 10, Ff), [ + [mo, y(o)] + ]) + ]), + i.$slots.validationMessage ? (u(), g("p", { + key: 0, + class: x(l.value) + }, [ + w(i.$slots, "validationMessage") + ], 2)) : P("", !0), + i.$slots.helper ? (u(), g("p", If, [ + w(i.$slots, "helper") + ])) : P("", !0) + ])); + } +}), Mf = "block w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600", Of = "block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-200 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500", Bf = "block mb-2 text-sm font-medium text-gray-900 dark:text-white", Lf = "block py-2 px-3 border-gray-200 dark:border-gray-600"; +function Ef(e) { + const t = c(() => ne( + Of, + e ? "bg-white dark:bg-gray-800 border-none" : "border" + )), r = c(() => Bf), s = c(() => e ? Mf : ""), o = c(() => Lf); + return { + textareaClasses: t, + labelClasses: r, + wrapperClasses: s, + footerClasses: o + }; +} +const Nf = ["rows", "placeholder"], ag = /* @__PURE__ */ C({ + inheritAttrs: !1, + __name: "FwbTextarea", + props: { + modelValue: { default: "" }, + label: { default: "Your message" }, + rows: { default: 4 }, + custom: { type: Boolean, default: !1 }, + placeholder: { default: "Write your message here..." } + }, + emits: ["update:modelValue"], + setup(e, { emit: t }) { + const r = e, s = t, o = c({ + get() { + return r.modelValue; + }, + set(d) { + s("update:modelValue", d); + } + }), { textareaClasses: n, labelClasses: a, wrapperClasses: l, footerClasses: i } = Ef(r.custom); + return (d, p) => (u(), g("label", null, [ + f("span", { + class: x(y(a)) + }, M(d.label), 3), + f("span", { + class: x(y(l)) + }, [ + Te(f("textarea", re({ + "onUpdate:modelValue": p[0] || (p[0] = (m) => o.value = m) + }, d.$attrs, { + class: y(n), + rows: d.rows, + placeholder: d.placeholder + }), null, 16, Nf), [ + [hs, o.value] + ]), + d.$slots.footer ? (u(), g("span", { + key: 0, + class: x(y(i)) + }, [ + w(d.$slots, "footer") + ], 2)) : P("", !0) + ], 2) + ])); + } +}), Rf = "w-fit relative inline-flex items-center cursor-pointer", Vf = 'bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[""] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600', jf = "ml-3 text-sm font-medium text-gray-900 dark:text-gray-300", Hf = { + lg: "w-14 h-7 after:top-0.5 after:left-[4px] after:h-6 after:w-6", + md: "w-11 h-6 after:top-[2px] after:left-[2px] after:h-5 after:w-5", + sm: "w-9 h-5 after:top-[2px] after:left-[2px] after:h-4 after:w-4" +}, Df = { + red: "peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600", + green: "peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600", + purple: "peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600", + yellow: "peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-400", + teal: "peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600", + orange: "peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:bg-orange-500" +}; +function Wf(e) { + const t = c(() => Rf), r = c(() => Vf), s = c(() => Hf[e.size.value]), o = c(() => Df[e.color.value]), n = c(() => jf); + return { + labelClasses: t, + toggleSize: s, + toggleClasses: r, + toggleColor: o, + toggleBallClasses: n + }; +} +const Gf = ["disabled"], lg = /* @__PURE__ */ C({ + __name: "FwbToggle", + props: { + color: { default: "" }, + disabled: { type: Boolean, default: !1 }, + label: { default: "" }, + modelValue: { type: Boolean, default: !1 }, + size: { default: "md" } + }, + emits: ["update:modelValue"], + setup(e, { emit: t }) { + const r = e, s = t, o = c({ + get() { + return r.modelValue; + }, + set(p) { + s("update:modelValue", p); + } + }), { + labelClasses: n, + toggleSize: a, + toggleClasses: l, + toggleColor: i, + toggleBallClasses: d + } = Wf(Y(r)); + return (p, m) => (u(), g("label", { + class: x(y(n)) + }, [ + Te(f("input", { + "onUpdate:modelValue": m[0] || (m[0] = (v) => o.value = v), + disabled: p.disabled, + class: "sr-only peer", + type: "checkbox" + }, null, 8, Gf), [ + [gs, o.value] + ]), + f("span", { + class: x([y(l), y(a), y(i)]) + }, null, 2), + f("span", { + class: x(y(d)) + }, M(p.label), 3) + ], 2)); + } +}), Uf = ["href"], ig = /* @__PURE__ */ C({ + __name: "FwbA", + props: { + href: { default: "" }, + color: { default: "text-primary-600 dark:text-primary-500" } + }, + setup(e) { + return (t, r) => (u(), g("a", { + href: t.href, + class: x([t.color, "inline-flex items-center hover:underline"]) + }, [ + w(t.$slots, "default") + ], 10, Uf)); + } +}), dg = /* @__PURE__ */ C({ + inheritAttrs: !1, + __name: "FwbHeading", + props: { + tag: { default: "h1" }, + color: { default: "text-gray-900 dark:text-white" }, + customSize: { default: "" } + }, + setup(e) { + const t = e, r = { + h1: "text-5xl font-extrabold", + h2: "text-4xl font-bold", + h3: "text-3xl font-bold", + h4: "text-2xl font-bold", + h5: "text-xl font-bold", + h6: "text-lg font-bold" + }, s = ae(), o = B( + "w-full", + r[t.tag], + t.color, + t.customSize, + s.class + ), n = t.tag; + return (a, l) => (u(), H(X(y(n)), re(a.$attrs, { class: y(o) }), { + default: j(() => [ + w(a.$slots, "default") + ]), + _: 3 + }, 16, ["class"])); + } +}), qf = ["src", "alt"], Yf = ["src", "alt"], ug = /* @__PURE__ */ C({ + __name: "FwbImg", + props: { + caption: { default: "" }, + src: { default: "" }, + size: { default: "max-w-full" }, + alt: { default: "" }, + imgClass: { default: "h-auto" }, + alignment: { default: "" }, + captionClass: { default: "mt-2 text-sm text-center text-gray-500 dark:text-gray-400" } + }, + setup(e) { + return (t, r) => t.caption ? (u(), g("figure", { + key: 0, + class: x(t.size) + }, [ + f("img", { + src: t.src, + alt: t.alt, + class: x([t.size, t.alignment, t.imgClass]) + }, null, 10, qf), + f("figcaption", { + class: x(t.captionClass) + }, M(t.caption), 3) + ], 2)) : (u(), g("img", { + key: 1, + src: t.src, + alt: t.alt, + class: x([t.size, t.alignment, t.imgClass]) + }, null, 10, Yf)); + } +}), Jf = "mb-3 last:mb-0 text-gray-900 dark:text-white leading-normal", cg = /* @__PURE__ */ C({ + __name: "FwbP", + props: { + class: { default: "" } + }, + setup(e) { + const t = e, r = c(() => me([ + Jf, + t.class + ])); + return (s, o) => (u(), g("p", { + class: x(r.value) + }, [ + w(s.$slots, "default") + ], 2)); + } +}), fg = /* @__PURE__ */ C({ + __name: "FlowbiteThemable", + props: { + theme: { default: "blue" } + }, + setup(e) { + return de(Es, nt(e, "theme")), (r, s) => w(r.$slots, "default"); + } +}); +function pg() { + const e = Q(Rs, null); + return e === null && console.warn("Cannot use useToast outside component. Please wrap your component with "), { + add: (o) => e ? e?.add(o) : "", + remove: (o) => e ? e?.remove(o) : !1, + pop: () => e ? e?.pop() : "" + }; +} +export { + fg as FlowbiteThemable, + Tc as FlowbiteThemableChild, + ig as FwbA, + Qf as FwbAccordion, + Xf as FwbAccordionContent, + Zf as FwbAccordionHeader, + ep as FwbAccordionPanel, + tp as FwbAlert, + rp as FwbAvatar, + sp as FwbAvatarStack, + op as FwbAvatarStackCounter, + np as FwbBadge, + ap as FwbBreadcrumb, + lp as FwbBreadcrumbItem, + ua as FwbButton, + ip as FwbButtonGroup, + dp as FwbCard, + up as FwbCarousel, + eg as FwbCheckbox, + cp as FwbDropdown, + tg as FwbFileInput, + fp as FwbFooter, + pp as FwbFooterBrand, + gp as FwbFooterCopyright, + hp as FwbFooterIcon, + mp as FwbFooterLink, + bp as FwbFooterLinkGroup, + dg as FwbHeading, + ug as FwbImg, + rg as FwbInput, + vp as FwbJumbotron, + yp as FwbListGroup, + wp as FwbListGroupItem, + Sp as FwbMegaMenu, + Tp as FwbMegaMenuDropdown, + xp as FwbModal, + kp as FwbNavbar, + _p as FwbNavbarCollapse, + Cp as FwbNavbarLink, + $p as FwbNavbarLogo, + cg as FwbP, + Pp as FwbPagination, + Fp as FwbProgress, + sg as FwbRadio, + og as FwbRange, + zp as FwbRating, + ng as FwbSelect, + Ap as FwbSidebar, + Ip as FwbSidebarCta, + Mp as FwbSidebarDropdownItem, + Op as FwbSidebarItem, + Bp as FwbSidebarItemGroup, + Lp as FwbSidebarLogo, + jr as FwbSlotListener, + ht as FwbSpinner, + Dp as FwbTab, + Ep as FwbTable, + Np as FwbTableBody, + Rp as FwbTableCell, + Vp as FwbTableHead, + jp as FwbTableHeadCell, + Hp as FwbTableRow, + Wp as FwbTabs, + ag as FwbTextarea, + Gp as FwbTimeline, + Up as FwbTimelineBody, + qp as FwbTimelineContent, + Yp as FwbTimelineItem, + Jp as FwbTimelinePoint, + Kp as FwbTimelineTime, + Qp as FwbTimelineTitle, + Gr as FwbToast, + Xp as FwbToastProvider, + lg as FwbToggle, + Zp as FwbTooltip, + pg as useToast +}; diff --git a/dist/flowbite-vue.umd.js b/dist/flowbite-vue.umd.js new file mode 100644 index 0000000..dc3b126 --- /dev/null +++ b/dist/flowbite-vue.umd.js @@ -0,0 +1,6 @@ +(function(h,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(h=typeof globalThis<"u"?globalThis:h||self,e(h["flowbite-vue"]={},h.Vue))})(this,function(h,e){"use strict";var Ot=document.createElement("style");Ot.textContent=`@tailwind components;@layer components{.btn-group>button{@apply rounded-none;}.btn-group>button:first-child{@apply rounded-l-lg;}.btn-group>button:last-child{@apply rounded-r-lg;}}.to-bottom-enter-active[data-v-7ea3917f],.to-bottom-leave-active[data-v-7ea3917f],.to-left-enter-active[data-v-7ea3917f],.to-left-leave-active[data-v-7ea3917f],.to-right-enter-active[data-v-7ea3917f],.to-right-leave-active[data-v-7ea3917f],.to-top-enter-active[data-v-7ea3917f],.to-top-leave-active[data-v-7ea3917f]{transition:all .25s}.to-top-enter-active[data-v-7ea3917f],.to-top-leave-to[data-v-7ea3917f]{opacity:0;transform:translateY(10px)}.to-top-leave[data-v-7ea3917f],.to-top-enter-to[data-v-7ea3917f]{opacity:1;transform:translateY(0)}.to-right-enter-active[data-v-7ea3917f],.to-right-leave-to[data-v-7ea3917f]{opacity:0;transform:translate(-10px)}.to-right-leave[data-v-7ea3917f],.to-right-enter-to[data-v-7ea3917f]{opacity:1;transform:translate(0)}.to-bottom-enter-active[data-v-7ea3917f],.to-bottom-leave-to[data-v-7ea3917f]{opacity:0;transform:translateY(-10px)}.to-bottom-leave[data-v-7ea3917f],.to-bottom-enter-to[data-v-7ea3917f]{opacity:1;transform:translateY(0)}.to-left-enter-active[data-v-7ea3917f],.to-left-leave-to[data-v-7ea3917f]{opacity:0;transform:translate(10px)}.to-left-leave[data-v-7ea3917f],.to-left-enter-to[data-v-7ea3917f]{opacity:1;transform:translate(0)}.slide-left-enter-active[data-v-aba06225],.slide-left-leave-active[data-v-aba06225]{transition:all .5s ease}.slide-left-enter-from[data-v-aba06225],.slide-left-leave-to[data-v-aba06225]{opacity:0;transform:translate(30px)}.slide-right-enter-active[data-v-aba06225],.slide-right-leave-active[data-v-aba06225]{transition:all .5s ease}.slide-right-enter-from[data-v-aba06225],.slide-right-leave-to[data-v-aba06225]{opacity:0;transform:translate(-30px)}.slide-top-enter-active[data-v-aba06225],.slide-top-leave-active[data-v-aba06225]{transition:all .5s ease}.slide-top-enter-from[data-v-aba06225],.slide-top-leave-to[data-v-aba06225]{opacity:0;transform:translateY(30px)}.slide-bottom-enter-active[data-v-aba06225],.slide-bottom-leave-active[data-v-aba06225]{transition:all .5s ease}.slide-bottom-enter-from[data-v-aba06225],.slide-bottom-leave-to[data-v-aba06225]{opacity:0;transform:translateY(-30px)}.fade-enter-active[data-v-aba06225],.fade-leave-active[data-v-aba06225]{transition:all .5s ease}.fade-enter-from[data-v-aba06225],.fade-leave-to[data-v-aba06225]{opacity:0}.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-tooltip-dark .v-popper__wrapper .v-popper__inner{background:rgba(0,0,0);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip-dark .v-popper__arrow-inner{visibility:hidden}.v-popper--theme-tooltip-dark .v-popper__arrow-outer{border-color:#000c}@media (prefers-color-scheme: dark){.v-popper--theme-tooltip-dark .v-popper__wrapper .v-popper__inner{background:rgb(55 65 81)}.v-popper--theme-tooltip-dark .v-popper__arrow-outer{border-color:#374151}}.v-popper--theme-tooltip-light .v-popper__wrapper .v-popper__inner{background:#fff;color:#000;padding:7px 12px 6px;border-radius:6px;border:1px solid #eeeeee;box-shadow:0 6px 30px #00000040}.v-popper--theme-tooltip-light .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-tooltip-light .v-popper__arrow-outer{border-color:#ddd}.v-popper__popper[data-popper-placement^=bottom] .v-popper__inner{margin-top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__inner{margin-left:-1px}input[type=range].range-lg[data-v-c4cfe3d4]::-moz-range-thumb{height:1.5rem;width:1.5rem}input[type=range].range-sm[data-v-c4cfe3d4]::-moz-range-thumb{height:1rem;width:1rem} +`,document.head.appendChild(Ot);let Lt=(t=21)=>crypto.getRandomValues(new Uint8Array(t)).reduce((r,o)=>(o&=63,o<36?r+=o.toString(36):o<62?r+=(o-26).toString(36).toUpperCase():o>62?r+="-":r+="_",r),"");const it=e.reactive({});function ke(t,r){return e.onBeforeMount(()=>{t&&(it[t]={id:t,flush:r?.flush??!1,alwaysOpen:r?.alwaysOpen??!1,openFirstItem:r?.openFirstItem??!0,panels:{}})}),e.onBeforeUnmount(()=>{t&&delete it[t]}),{accordionsStates:it}}const ko=["data-accordion-id"],_o=e.defineComponent({__name:"FwbAccordion",props:{alwaysOpen:{type:Boolean,default:!1},openFirstItem:{type:Boolean,default:!0},flush:{type:Boolean,default:!1}},setup(t){const r=t,o=Lt();return ke(o,{...r}),(n,a)=>(e.openBlock(),e.createElementBlock("div",{"data-accordion-id":e.unref(o)},[e.renderSlot(n.$slots,"default")],8,ko))}});function xo(){for(var t=0,r,o,n="";tt&&(r=0,n=o,o=new Map)}return{get:function(l){var i=o.get(l);if(i!==void 0)return i;if((i=n.get(l))!==void 0)return a(l,i),i},set:function(l,i){o.has(l)?o.set(l,i):a(l,i)}}}var Gt="!";function To(t){var r=t.separator||":",o=r.length===1,n=r[0],a=r.length;return function(l){for(var i=[],d=0,c=0,p,f=0;fc?p-c:void 0;return{modifiers:i,hasImportantModifier:m,baseClassName:b,maybePostfixModifierPosition:w}}}function zo(t){if(t.length<=1)return t;var r=[],o=[];return t.forEach(function(n){var a=n[0]==="[";a?(r.push.apply(r,o.sort().concat([n])),o=[]):o.push(n)}),r.push.apply(r,o.sort()),r}function No(t){return{cache:Eo(t.cacheSize),splitModifiers:To(t),...Co(t)}}var Vo=/\s+/;function Po(t,r){var o=r.splitModifiers,n=r.getClassGroupId,a=r.getConflictingClassGroupIds,s=new Set;return t.trim().split(Vo).map(function(l){var i=o(l),d=i.modifiers,c=i.hasImportantModifier,p=i.baseClassName,f=i.maybePostfixModifierPosition,g=n(f?p.substring(0,f):p),u=!!f;if(!g){if(!f)return{isTailwindClass:!1,originalClassName:l};if(g=n(p),!g)return{isTailwindClass:!1,originalClassName:l};u=!1}var m=zo(d).join(":"),b=c?m+Gt:m;return{isTailwindClass:!0,modifierId:b,classGroupId:g,originalClassName:l,hasPostfixModifier:u}}).reverse().filter(function(l){if(!l.isTailwindClass)return!0;var i=l.modifierId,d=l.classGroupId,c=l.hasPostfixModifier,p=i+d;return s.has(p)?!1:(s.add(p),a(d,c).forEach(function(f){return s.add(i+f)}),!0)}).reverse().map(function(l){return l.originalClassName}).join(" ")}function Fo(){for(var t=arguments.length,r=new Array(t),o=0;ot.value.parentElement.parentElement.dataset.accordionId),o=e.computed(()=>t.value.parentElement.dataset.panelId),{accordionsStates:n}=ke(),a=e.computed(()=>n[r.value]),s=e.computed(()=>n[r.value].panels[o.value]),l=e.computed(()=>Object.keys(n[r.value].panels[o.value]).length);return{contentClasses:e.computed(()=>S(Jo,!s.value.isVisible&&"hidden",(s.value.order!==l.value-1||a.value.flush)&&"border-b-0",s.value.order===l.value-1&&"border-t-0",a.value.flush&&"border-x-0"))}}const Qo=e.defineComponent({__name:"FwbAccordionContent",setup(t){const r=e.ref(!1),o=e.ref();let n;return e.onMounted(()=>{n=Ko(o).contentClasses,r.value=!0}),(a,s)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"content",ref:o},[r.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(n))},[e.renderSlot(a.$slots,"default")],2)):e.createCommentVNode("",!0)],512))}}),Xo="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",Zo="w-6 h-6 shrink-0";function en(t){const r=e.computed(()=>t.value.parentElement.parentElement.dataset.accordionId),o=e.computed(()=>t.value.parentElement.dataset.panelId),{accordionsStates:n}=ke(),a=e.computed(()=>n[r.value]),s=e.computed(()=>a.value.panels[o.value]),l=e.computed(()=>Object.keys(s.value).length),i=e.computed(()=>s.value.order!==l.value-1),d=e.computed(()=>i.value||a.value.flush&&s.value.order===l.value-1&&!s.value.isVisible),c=e.computed(()=>S(Xo,s.value.isVisible&&"bg-gray-100 dark:bg-gray-800",s.value.order===0&&!a.value.flush&&"rounded-t-xl",s.value.order===0&&a.value.flush&&"border-t-0",d.value&&"border-b-0",a.value.flush&&"border-x-0")),p=e.computed(()=>S(Zo,s.value.isVisible&&"rotate-180"));return{headerClasses:c,arrowClasses:p}}const tn={class:"w-full"},rn=[e.createElementVNode("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"},null,-1)],on=e.defineComponent({__name:"FwbAccordionHeader",setup(t){const r=e.ref(!1),o=e.ref(),n=e.computed(()=>o.value.parentElement.parentElement.dataset.accordionId),a=e.computed(()=>o.value.parentElement.dataset.panelId),{accordionsStates:s}=ke(),l=e.computed(()=>s[n.value]),i=e.computed(()=>l.value.panels[a.value]);let d,c;function p(){const u=i.value.isVisible;for(const m in l.value.panels){const b=l.value.panels[m];b.id!==a.value?b.isVisible=!1:b.isVisible=!u}}function f(){i.value.isVisible=!i.value.isVisible}function g(){if(l.value.alwaysOpen)return f();p()}return e.onMounted(()=>{const u=en(o);d=u.headerClasses,c=u.arrowClasses,r.value=!0}),(u,m)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"header",ref:o},[r.value?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:e.normalizeClass(e.unref(d)),onClick:g},[e.createElementVNode("span",tn,[e.renderSlot(u.$slots,"default")]),(e.openBlock(),e.createElementBlock("svg",{"data-accordion-icon":"",class:e.normalizeClass(e.unref(c)),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},rn,2))],2)):e.createCommentVNode("",!0)],512))}}),nn=["data-panel-id"],an=e.defineComponent({__name:"FwbAccordionPanel",setup(t){const{accordionsStates:r}=ke(),o=Lt(),n=e.ref(),a=e.computed(()=>n.value?n.value.parentElement.dataset.accordionId:null),s=e.computed(()=>r[a.value]);return e.onMounted(()=>{const l=Object.keys(s?.value?.panels)?.length;s.value.panels[o]={id:o,order:l,isVisible:(s.value.openFirstItem&&l===0)??!1}}),(l,i)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"panel",ref:n,"data-panel-id":e.unref(o)},[a.value?e.renderSlot(l.$slots,"default",{key:0}):e.createCommentVNode("",!0)],8,nn))}}),sn={class:"flex items-center"},ln=e.createElementVNode("svg",{class:"flex-shrink-0 w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{"fill-rule":"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z","clip-rule":"evenodd"})],-1),dn=[e.createElementVNode("span",{class:"sr-only"},"Dismiss",-1),e.createElementVNode("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{"fill-rule":"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z","clip-rule":"evenodd"})],-1)],cn="ml-auto -mr-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex h-8 w-8 dark:bg-gray-800 dark:hover:bg-gray-700",pn=e.defineComponent({inheritAttrs:!1,__name:"FwbAlert",props:{type:{default:"info"},closable:{type:Boolean,default:!1},icon:{type:Boolean,default:!1},border:{type:Boolean,default:!1}},emits:["close"],setup(t,{emit:r}){const o=t,n=r,a=e.useAttrs(),s={danger:"text-red-800 dark:text-red-400",dark:"text-gray-800 dark:text-gray-300",info:"text-blue-800 dark:text-blue-400",success:"text-green-800 dark:text-green-400",warning:"text-yellow-800 dark:text-yellow-300"},l={danger:"bg-red-50",dark:"bg-gray-50",info:"bg-blue-50",success:"bg-green-50",warning:"bg-yellow-50"},d=S(cn,{danger:"text-red-500 dark:text-red-400 bg-red-50 hover:bg-red-200 focus:ring-red-400",dark:"text-gray-500 dark:text-gray-300 bg-gray-50 hover:bg-gray-200 focus:ring-gray-400 dark:hover:text-white",info:"text-blue-500 dark:text-blue-400 bg-blue-50 hover:bg-blue-200 focus:ring-blue-400",success:"text-green-500 dark:text-green-400 bg-green-50 hover:bg-green-200 focus:ring-green-400",warning:"text-yellow-500 dark:text-yellow-300 bg-yellow-50 hover:bg-yellow-200 focus:ring-yellow-400"}[o.type]),c={danger:"border-red-500 dark:text-red-400",dark:"border-gray-500 dark:text-gray-400",info:"border-blue-500 dark:text-blue-400",success:"border-green-500 dark:text-green-400",warning:"border-yellow-500 dark:text-yellow-400"},p={danger:[s.danger,l.danger].join(" "),dark:[s.dark,l.dark].join(" "),info:[s.info,l.info].join(" "),success:[s.success,l.success].join(" "),warning:[s.warning,l.warning].join(" ")},f=S("p-4 gap-3 text-sm dark:bg-gray-800 rounded-lg",p[o.type],(o.icon||o.closable)&&"flex items-center",c[o.type],o.border&&"border",a.class),g=e.ref(!0);function u(){n("close"),g.value=!1}return(m,b)=>g.value?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0},m.$attrs,{class:e.unref(f),role:"alert"}),[e.createElementVNode("div",sn,[m.icon||m.$slots.icon?e.renderSlot(m.$slots,"icon",{key:0},()=>[ln]):e.createCommentVNode("",!0),e.renderSlot(m.$slots,"title")]),e.renderSlot(m.$slots,"default",{onCloseClick:u}),e.renderSlot(m.$slots,"close-icon",{onCloseClick:u},()=>[m.closable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:e.normalizeClass(e.unref(d)),"aria-label":"Close",onClick:u},dn,2)):e.createCommentVNode("",!0)])],16)):e.createCommentVNode("",!0)}}),Q=t=>S(t),Yt={xs:"w-6 h-6",sm:"w-8 h-8",md:"w-10 h-10",lg:"w-20 h-20",xl:"w-36 h-36"},Jt={default:"rounded",rounded:"rounded-full"},un="ring-2 ring-gray-300 dark:ring-gray-500 p-1",fn="absolute h-3.5 w-3.5 rounded-full border-2 border-white dark:border-gray-800",mn={away:"bg-gray-400",busy:"bg-yellow-400",offline:"bg-red-400",online:"bg-green-400"},gn={"top-right-rounded":"top-0 -right-0.5","top-right-default":"-top-1.5 -right-1.5","top-left-rounded":"top-0 left-0","top-left-default":"top-0 left-0 transform -translate-y-1/2 -translate-x-1/2","bottom-right-rounded":"bottom-0 -right-0.5","bottom-right-default":"bottom-0 -right-1.5 translate-y-1/2","bottom-left-rounded":"bottom-0 left-0","bottom-left-default":"-bottom-1.5 left-0 transform -translate-x-1/2 "},hn="absolute w-auto h-auto text-gray-400",bn="flex overflow-hidden relative justify-center items-center",yn="bg-gray-100 dark:bg-gray-600",wn="font-medium text-gray-600 dark:text-gray-300",kn={xs:"bottom-0",sm:"bottom-0",md:"-bottom-1",lg:"-bottom-2",xl:"-bottom-4"};function _n(t){const r=e.computed(()=>Q([Yt[t.size.value],Jt[t.rounded.value?"rounded":"default"],t.bordered.value?un:"",t.stacked.value?"border-2 border-white dark:border-gray-800":""])),o=e.computed(()=>{const l=`${t.statusPosition.value}-${t.rounded.value?"rounded":"default"}`;return Q([fn,mn[t.status.value],gn[l]])}),n=e.computed(()=>Q([hn,kn[t.size.value]])),a=e.computed(()=>Q([bn,Yt[t.size.value],Jt[t.rounded.value?"rounded":"default"],t.img.value&&t.bordered.value?"":yn,t.bordered.value?" overflow-visible":""])),s=e.computed(()=>Q([wn]));return{avatarClasses:r,avatarDotClasses:o,avatarPlaceholderClasses:n,avatarPlaceholderInitialsClasses:s,avatarPlaceholderWrapperClasses:a}}const xn={class:"relative"},Cn=["alt","src"],$n=[e.createElementVNode("path",{"clip-rule":"evenodd",d:"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z","fill-rule":"evenodd"},null,-1)],vn=["data-pos"],Sn=e.defineComponent({__name:"FwbAvatar",props:{alt:{type:String,default:"Avatar"},bordered:{type:Boolean,default:!1},img:{type:String,default:""},rounded:{type:Boolean,default:!1},size:{type:String,default:"md"},stacked:{type:Boolean,default:!1},status:{type:String,default:null},statusPosition:{type:String,default:"top-right"},initials:{type:String,default:null}},setup(t){const r=e.ref(!1);function o(){r.value=!0}const n=e.useSlots(),a=e.computed(()=>n.placeholder),s=t,{avatarClasses:l,avatarDotClasses:i,avatarPlaceholderClasses:d,avatarPlaceholderInitialsClasses:c,avatarPlaceholderWrapperClasses:p}=_n(e.toRefs(s));return(f,g)=>(e.openBlock(),e.createElementBlock("div",xn,[e.createElementVNode("div",{class:e.normalizeClass(e.unref(p))},[t.img&&!r.value?(e.openBlock(),e.createElementBlock("img",{key:0,alt:t.alt,class:e.normalizeClass(e.unref(l)),src:t.img,onError:o},null,42,Cn)):!t.initials&&a.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(d))},[e.renderSlot(f.$slots,"placeholder")],2)):!t.img&&!t.initials?(e.openBlock(),e.createElementBlock("svg",{key:2,class:e.normalizeClass(e.unref(d)),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},$n,2)):(e.openBlock(),e.createElementBlock("div",{key:3,class:e.normalizeClass(e.unref(c))},e.toDisplayString(t.initials),3))],2),t.status?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(e.unref(i)),"data-pos":t.statusPosition},null,10,vn)):e.createCommentVNode("",!0)]))}}),q=(t,r)=>{const o=t.__vccOpts||t;for(const[n,a]of r)o[n]=a;return o},Bn={},En={class:"flex -space-x-4"};function Tn(t,r){return e.openBlock(),e.createElementBlock("div",En,[e.renderSlot(t.$slots,"default")])}const zn=q(Bn,[["render",Tn]]),Nn=["href"],Vn=e.defineComponent({__name:"FwbAvatarStackCounter",props:{total:{type:Number,default:1},href:{type:String,default:"#"}},setup(t){return(r,o)=>(e.openBlock(),e.createElementBlock("a",{class:"relative flex justify-center items-center w-10 h-10 text-xs font-medium text-white bg-gray-700 rounded-full border-2 border-white hover:bg-gray-600 dark:border-gray-800",href:t.href},"+"+e.toDisplayString(t.total),9,Nn))}}),Pn="mr-2 px-2.5 py-0.5 rounded flex items-center justify-center",Fn="bg-blue-100 hover:bg-blue-200 text-blue-800 dark:text-blue-800 dark:hover:bg-blue-300",An="p-1 rounded-full mr-2",In={default:"text-blue-800 dark:text-blue-800",dark:"text-gray-800 dark:bg-gray-700",red:"text-red-800 dark:text-red-900",green:"text-green-800 dark:text-green-900",yellow:"text-yellow-800 dark:text-yellow-900",indigo:"text-indigo-800 dark:text-indigo-900",purple:"text-purple-800 dark:text-purple-900",pink:"text-pink-800 dark:text-pink-900"},Mn={default:"bg-blue-100 dark:bg-blue-200",dark:"bg-gray-100 dark:bg-gray-700",red:"bg-red-100 dark:bg-red-200",green:"bg-green-100 dark:bg-green-200",yellow:"bg-yellow-100 dark:bg-yellow-200",indigo:"bg-indigo-100 dark:bg-indigo-200",purple:"bg-purple-100 dark:bg-purple-200",pink:"bg-pink-100 dark:bg-pink-200"},On={xs:"text-xs font-semibold",sm:"text-sm font-medium"};function Ln(t,r){const o=e.useAttrs();return{badgeClasses:e.computed(()=>S(On[t.size],t.href?"":Mn[t.type],t.href?"":In[t.type],t.href?Fn:"",r.isContentEmpty.value?An:Pn,o.class))}}const Dn=e.defineComponent({__name:"FwbBadge",props:{type:{default:"default"},size:{default:"xs"},href:{default:null}},setup(t){const r=t,o=e.useSlots(),n=e.computed(()=>!o.default),a=e.computed(()=>r.href?"a":"span"),{badgeClasses:s}=Ln(r,{isContentEmpty:n});return(l,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.value),{class:e.normalizeClass(e.unref(s)),href:l.href},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"icon"),e.renderSlot(l.$slots,"default")]),_:3},8,["class","href"]))}});function Rn(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var Kt={exports:{}};/*! + Copyright (c) 2018 Jed Watson. + Licensed under the MIT License (MIT), see + http://jedwatson.github.io/classnames +*/(function(t){(function(){var r={}.hasOwnProperty;function o(){for(var n=[],a=0;aV(Hn)),o=e.computed(()=>V(Gn[t.solid.value?"solid":"defauilt"]));return{breadcrumbClasses:r,breadcrumbWrapperClasses:o}}const qn=e.defineComponent({__name:"FwbBreadcrumb",props:{solid:{type:Boolean,default:!1}},setup(t){const r=t,{breadcrumbClasses:o,breadcrumbWrapperClasses:n}=Wn(e.toRefs(r));return(a,s)=>(e.openBlock(),e.createElementBlock("nav",{class:e.normalizeClass(e.unref(n)),"aria-label":"Breadcrumb"},[e.createElementVNode("ol",{class:e.normalizeClass(e.unref(o))},[e.renderSlot(a.$slots,"default")],2)],2))}}),Un="ml-1 inline-flex items-center text-sm font-medium dark:text-gray-400",Yn="text-gray-700 hover:text-gray-900 dark:hover:text-white",Jn="text-gray-500";function Kn(t){return{breadcrumbItemClasses:e.computed(()=>V(Un,t.href.value?Yn:Jn))}}const Qn={class:"inline-flex items-center"},Xn={key:0,class:"w-6 h-6 text-gray-400 mr-1",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},Zn=[e.createElementVNode("path",{"clip-rule":"evenodd",d:"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z","fill-rule":"evenodd"},null,-1)],ea={key:0,class:"w-4 h-4 mr-2",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},ta=[e.createElementVNode("path",{d:"M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"},null,-1)],ra=e.defineComponent({__name:"FwbBreadcrumbItem",props:{href:{type:String,default:null},home:{type:Boolean,default:!1}},setup(t){const r=t,o=e.computed(()=>r.href?"a":"span"),{breadcrumbItemClasses:n}=Kn(e.toRefs(r));return(a,s)=>(e.openBlock(),e.createElementBlock("li",Qn,[e.renderSlot(a.$slots,"arrow-icon",{},()=>[t.home?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("svg",Xn,Zn))]),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.value),{class:e.normalizeClass(e.unref(n)),href:t.href},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"home-icon",{},()=>[t.home?(e.openBlock(),e.createElementBlock("svg",ea,ta)):e.createCommentVNode("",!0)]),e.renderSlot(a.$slots,"default")]),_:3},8,["class","href"]))]))}}),oa={0:"w-0 h-0",.5:"w-0.5 h-0.5",1:"w-1 h-1",1.5:"w-1.5 h-1.5",10:"w-10 h-10",11:"w-11 h-11",12:"w-12 h-12",2:"w-2 h-2",2.5:"w-2.5 h-2.5",3:"w-3 h-3",4:"w-4 h-4",5:"w-5 h-5",6:"w-6 h-6",7:"w-7 h-7",8:"w-8 h-8",9:"w-9 h-9"},na={blue:"fill-blue-600",gray:"fill-gray-600 dark:fill-gray-300",green:"fill-green-500",pink:"fill-pink-600",purple:"fill-purple-600",red:"fill-red-600",white:"fill-white",yellow:"fill-yellow-400"};function aa(t){const r=e.computed(()=>oa[t.size.value]),o=e.computed(()=>na[t.color.value]),n=e.computed(()=>"text-gray-200 dark:text-gray-600"),a=e.computed(()=>"animate-spin");return{spinnerClasses:e.computed(()=>V(a.value,n.value,o.value,r.value))}}const sa=[e.createElementVNode("path",{d:"M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",fill:"currentColor"},null,-1),e.createElementVNode("path",{d:"M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",fill:"currentFill"},null,-1)],Ce=e.defineComponent({__name:"FwbSpinner",props:{color:{default:"blue"},size:{default:"4"}},setup(t){const r=t,{spinnerClasses:o}=aa(e.toRefs(r));return(n,a)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(e.unref(o)),fill:"none",role:"status",viewBox:"0 0 100 101",xmlns:"http://www.w3.org/2000/svg"},sa,2))}}),Qt={default:{default:"text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800",blue:"text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800",alternative:"font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600",dark:"text-white bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg dark:bg-gray-800 dark:focus:ring-gray-700 dark:border-gray-700",light:"text-gray-900 bg-white border border-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-200 font-medium rounded-lg dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:focus:ring-gray-700",green:"focus:outline-none text-white bg-green-700 focus:ring-4 focus:ring-green-300 font-medium rounded-lg dark:bg-green-600 dark:focus:ring-green-800",red:"focus:outline-none text-white bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg dark:bg-red-600 dark:focus:ring-red-900",yellow:"focus:outline-none text-white bg-yellow-400 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg dark:focus:ring-yellow-900",purple:"focus:outline-none text-white bg-purple-700 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg dark:bg-purple-600 dark:focus:ring-purple-900",pink:"focus:outline-none text-white bg-pink-700 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg dark:bg-pink-600 dark:focus:ring-pink-900"},hover:{default:"hover:bg-blue-800 dark:hover:bg-blue-700",blue:"hover:bg-blue-800 dark:hover:bg-blue-700",alternative:"hover:bg-gray-100 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700",dark:"hover:bg-gray-900 dark:hover:bg-gray-700",light:"hover:bg-gray-100 dark:hover:border-gray-600",green:"hover:bg-green-800 dark:hover:bg-green-700",red:"hover:bg-red-800 dark:hover:bg-red-700",yellow:"hover:bg-yellow-500",purple:"hover:bg-purple-800 dark:hover:bg-purple-700",pink:"hover:bg-pink-800 dark:hover:bg-pink-700"}},Xt={default:{dark:"text-gray-900 border border-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm text-center dark:border-gray-600 dark:text-gray-400 dark:focus:ring-gray-800",default:"text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800",blue:"text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800",green:"text-green-700 border border-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm text-center dark:border-green-500 dark:text-green-500 dark:focus:ring-green-800",purple:"text-purple-700 border border-purple-700 focus:ring-4 focus:outline-none focus:ring-purple-300 font-medium rounded-lg text-sm text-center dark:border-purple-400 dark:text-purple-400 dark:focus:ring-purple-900",pink:"text-pink-700 border border-pink-700 focus:ring-4 focus:outline-none focus:ring-pink-300 font-medium rounded-lg text-sm text-center dark:border-pink-400 dark:text-pink-400 dark:focus:ring-pink-900",red:"text-red-700 border border-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm text-center dark:border-red-500 dark:text-red-500 dark:focus:ring-red-900",yellow:"text-yellow-400 border border-yellow-400 focus:ring-4 focus:outline-none focus:ring-yellow-300 font-medium rounded-lg text-sm text-center dark:border-yellow-300 dark:text-yellow-300 dark:focus:ring-yellow-900"},hover:{dark:"hover:text-white hover:bg-gray-900 dark:hover:text-white dark:hover:bg-gray-600",default:"hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-600",blue:"hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-600",green:"hover:text-white hover:bg-green-800 dark:hover:text-white dark:hover:bg-green-600",purple:"hover:text-white hover:bg-purple-800 dark:hover:text-white dark:hover:bg-purple-500",pink:"hover:text-white hover:bg-pink-800 dark:hover:text-white dark:hover:bg-pink-500",red:"hover:text-white hover:bg-red-800 dark:hover:text-white dark:hover:bg-red-600",yellow:"hover:text-white hover:bg-yellow-500 dark:hover:text-white dark:hover:bg-yellow-400"}},Zt={hover:{"cyan-blue":"hover:bg-gradient-to-bl","green-blue":"hover:bg-gradient-to-bl","pink-orange":"hover:bg-gradient-to-bl","purple-blue":"hover:bg-gradient-to-bl","purple-pink":"hover:bg-gradient-to-l","red-yellow":"hover:bg-gradient-to-bl","teal-lime":"hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200",blue:"hover:bg-gradient-to-br",cyan:"hover:bg-gradient-to-br",green:"hover:bg-gradient-to-br",lime:"hover:bg-gradient-to-br",pink:"hover:bg-gradient-to-br",purple:"hover:bg-gradient-to-br",red:"hover:bg-gradient-to-br",teal:"hover:bg-gradient-to-br"},default:{"cyan-blue":"text-white bg-gradient-to-r from-cyan-500 to-blue-500 focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg","green-blue":"text-white bg-gradient-to-br from-green-400 to-blue-600 focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg","pink-orange":"text-white bg-gradient-to-br from-pink-500 to-orange-400 focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800 font-medium rounded-lg","purple-blue":"text-white bg-gradient-to-br from-purple-600 to-blue-500 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg","purple-pink":"text-white bg-gradient-to-r from-purple-500 to-pink-500 focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800 font-medium rounded-lg","red-yellow":"text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 font-medium rounded-lg","teal-lime":"text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-teal-700 font-medium rounded-lg",blue:"text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 rounded-lg",cyan:"text-white bg-gradient-to-r from-cyan-500 via-cyan-600 to-cyan-700 focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 rounded-lg",green:"text-white bg-gradient-to-r from-green-500 via-green-600 to-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 dark:focus:ring-green-800 rounded-lg",lime:"text-gray-900 bg-gradient-to-r from-lime-500 via-lime-600 to-lime-700 focus:ring-4 focus:outline-none focus:ring-lime-300 dark:focus:ring-lime-800 rounded-lg",pink:"text-white bg-gradient-to-r from-pink-500 via-pink-600 to-pink-700 focus:ring-4 focus:outline-none focus:ring-pink-300 dark:focus:ring-pink-800 rounded-lg",purple:"text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 rounded-lg",red:"text-white bg-gradient-to-r from-red-500 via-red-600 to-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 rounded-lg",teal:"text-white bg-gradient-to-r from-teal-500 via-teal-600 to-teal-700 focus:ring-4 focus:outline-none focus:ring-teal-300 dark:focus:ring-teal-800 rounded-lg"}},er={default:{"cyan-blue":"relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800","green-blue":"relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800","pink-orange":"relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-pink-500 to-orange-400 dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800","purple-blue":"relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800","purple-pink":"relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800","red-yellow":"relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 dark:text-white focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400","teal-lime":"relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-teal-300 to-lime-300 dark:text-white focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-lime-800"},hover:{"cyan-blue":"group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white","green-blue":"group-hover:from-green-400 group-hover:to-blue-600 hover:text-white","pink-orange":"group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white","purple-blue":"group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white","purple-pink":"group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white","red-yellow":"group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:hover:text-gray-900","teal-lime":"group-hover:from-teal-300 group-hover:to-lime-300 dark:hover:text-gray-900"}},la={xs:"text-xs px-2 py-1",sm:"text-sm px-3 py-1.5",md:"text-sm px-4 py-2",lg:"text-base px-5 py-2.5",xl:"text-base px-6 py-3"},ia={xs:"text-xs p-1",sm:"text-sm p-1.5",md:"text-sm p-2",lg:"text-base p-2.5",xl:"text-base p-3"},tr={blue:"shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80",cyan:"shadow-lg shadow-cyan-500/50 dark:shadow-lg dark:shadow-cyan-800/80",green:"shadow-lg shadow-green-500/50 dark:shadow-lg dark:shadow-green-800/80",lime:"shadow-lg shadow-lime-500/50 dark:shadow-lg dark:shadow-lime-800/80",pink:"shadow-lg shadow-pink-500/50 dark:shadow-lg dark:shadow-pink-800/80",purple:"shadow-lg shadow-purple-500/50 dark:shadow-lg dark:shadow-purple-800/80",red:"shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80",teal:"shadow-lg shadow-teal-500/50 dark:shadow-lg dark:shadow-teal-800/80"},ut=["blue","green","cyan","teal","lime","red","pink","purple"],da=["alternative","light"];function ca(t){const r=e.useSlots(),o=e.computed(()=>t.square.value?ia[t.size.value]:la[t.size.value]),n=e.computed(()=>{const s=!!t.gradient.value,l=!!t.color.value,i=t.outline.value;let d="",c="";if(s&&i)ut.includes(t.gradient.value)?console.warn(`cannot use outline prop with "${t.gradient.value}" gradient`):(c=er.default[t.gradient.value],t.disabled.value||(d=er.hover[t.gradient.value]));else if(s)c=Zt.default[t.gradient.value],t.disabled.value||(d=Zt.hover[t.gradient.value]);else if(l&&i)if(da.includes(t.color.value))console.warn(`cannot use outline prop with "${t.color.value}" color`);else{const f=t.color.value;c=Xt.default[f],t.disabled.value||(d=Xt.hover[f])}else{const f=t.color.value;c=Qt.default[f],t.disabled.value||(d=Qt.hover[f])}let p="";return t.shadow.value===""?t.gradient.value&&ut.includes(t.gradient.value)&&(p=tr[t.gradient.value]):typeof t.shadow.value=="string"&&ut.includes(t.shadow.value)&&(p=tr[t.shadow.value]),[c,d,p,t.pill.value&&"!rounded-full",t.disabled.value&&"cursor-not-allowed opacity-50",s&&i?"p-0.5":o.value,(r.prefix||r.suffix||t.loading.value)&&"inline-flex items-center",t.class.value].filter(f=>f).join(" ")}),a=e.computed(()=>t.gradient.value&&t.outline.value?["relative bg-white dark:bg-gray-900 rounded-md inline-flex items-center",o.value,t.disabled.value?"":"group-hover:bg-opacity-0 transition-all ease-in duration-75"].filter(s=>s).join(" "):"");return{wrapperClasses:n.value,spanClasses:a.value}}function pa(t){const r={xs:"2.5",sm:"3",md:"4",lg:"5",xl:"6"},o=e.computed(()=>r[t.size.value]);return{color:e.computed(()=>t.outline.value?t.gradient.value?t.gradient.value.includes("purple")?"purple":t.gradient.value.includes("blue")?"blue":t.gradient.value.includes("pink")?"pink":t.gradient.value.includes("red")?"red":"white":["alternative","dark","light"].includes(t.color.value)?"white":t.color.value==="default"?"blue":t.color.value:"white"),size:o}}const ua={key:0,class:"mr-2"},fa={key:0,class:"mr-2"},ma={key:1,class:"ml-2"},ga={key:1,class:"ml-2"},rr=e.defineComponent({__name:"FwbButton",props:{class:{default:""},color:{default:"default"},gradient:{default:null},size:{default:"md"},shadow:{default:null},pill:{type:Boolean,default:!1},square:{type:Boolean,default:!1},outline:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},loadingPosition:{default:"prefix"},disabled:{type:Boolean,default:!1},href:{default:""},tag:{default:"a"}},setup(t){const r=t,o=ca(e.toRefs(r)),n=e.computed(()=>Q(o.wrapperClasses)),a=e.computed(()=>Q(o.spanClasses)),s=e.computed(()=>r.outline&&r.gradient),l=e.computed(()=>r.loading&&r.loadingPosition==="prefix"),i=e.computed(()=>r.loading&&r.loadingPosition==="suffix"),{color:d,size:c}=pa(e.toRefs(r)),p=r.tag!=="a"?e.resolveComponent(r.tag):"a",f=r.href?p:"button",g=r.tag==="router-link"||r.tag==="nuxt-link"?"to":"href";return(u,m)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(f)),e.normalizeProps({class:n.value,[e.unref(g)||""]:u.href,disabled:e.unref(f)==="button"&&u.disabled}),{default:e.withCtx(()=>[!s.value&&(u.$slots.prefix||l.value)?(e.openBlock(),e.createElementBlock("div",ua,[l.value?(e.openBlock(),e.createBlock(Ce,{key:0,color:e.unref(d),size:e.unref(c)},null,8,["color","size"])):e.renderSlot(u.$slots,"prefix",{key:1})])):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass(a.value)},[s.value&&(u.$slots.prefix||l.value)?(e.openBlock(),e.createElementBlock("span",fa,[l.value?(e.openBlock(),e.createBlock(Ce,{key:0,color:e.unref(d),size:e.unref(c)},null,8,["color","size"])):e.renderSlot(u.$slots,"prefix",{key:1})])):e.createCommentVNode("",!0),e.renderSlot(u.$slots,"default"),s.value&&(u.$slots.suffix||i.value)?(e.openBlock(),e.createElementBlock("span",ma,[i.value?(e.openBlock(),e.createBlock(Ce,{key:0,color:e.unref(d),size:e.unref(c)},null,8,["color","size"])):e.renderSlot(u.$slots,"suffix",{key:1})])):e.createCommentVNode("",!0)],2),!s.value&&(u.$slots.suffix||i.value)?(e.openBlock(),e.createElementBlock("div",ga,[i.value?(e.openBlock(),e.createBlock(Ce,{key:0,color:e.unref(d),size:e.unref(c)},null,8,["color","size"])):e.renderSlot(u.$slots,"suffix",{key:1})])):e.createCommentVNode("",!0)]),_:3},16,["class","disabled"]))}}),Qu="",ha={},ba={class:"btn-group inline-flex rounded-md shadow-sm",role:"group"};function ya(t,r){return e.openBlock(),e.createElementBlock("div",ba,[e.renderSlot(t.$slots,"default")])}const wa=q(ha,[["render",ya]]);function ka(t){const r=e.computed(()=>t.variant.value==="default"?"block max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700":t.variant.value==="image"?"max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700":t.variant.value==="horizontal"?"flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700":""),o=e.computed(()=>t.variant.value==="horizontal"?"object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg":"");return{cardClasses:r,horizontalImageClasses:o}}const _a=["alt","src"],xa=e.defineComponent({__name:"FwbCard",props:{href:{type:String,default:""},imgAlt:{type:String,default:""},imgSrc:{type:String,default:""},variant:{type:String,default:"default"}},setup(t){const r=t,{cardClasses:o,horizontalImageClasses:n}=ka(e.toRefs(r)),a=e.computed(()=>r.href?"a":"div");return(s,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.value),{class:e.normalizeClass(e.unref(o)),href:t.href},{default:e.withCtx(()=>[t.imgSrc?(e.openBlock(),e.createElementBlock("img",{key:0,alt:t.imgAlt,class:e.normalizeClass([e.unref(n),"rounded-t-lg"]),src:t.imgSrc},null,10,_a)):e.createCommentVNode("",!0),e.createElementVNode("div",null,[e.renderSlot(s.$slots,"default")])]),_:3},8,["class","href"]))}}),Ca={class:"relative"},$a={class:"overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96"},va=["alt","src"],Sa={key:0,class:"flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2"},Ba=["aria-label","onClick"],Ea=[e.createElementVNode("span",{class:"inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"},[e.createElementVNode("svg",{class:"w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{d:"M15 19l-7-7 7-7","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})]),e.createElementVNode("span",{class:"hidden"},"Previous")],-1)],Ta=[e.createElementVNode("span",{class:"inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"},[e.createElementVNode("svg",{class:"w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{d:"M9 5l7 7-7 7","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})]),e.createElementVNode("span",{class:"hidden"},"Next")],-1)],za=e.defineComponent({__name:"FwbCarousel",props:{pictures:{type:Array,default(){return[]}},noIndicators:{type:Boolean,default:!1},noControls:{type:Boolean,default:!1},slide:{type:Boolean,default:!1},slideInterval:{type:Number,default:3e3},animation:{type:Boolean,default:!1}},setup(t){const r=t,o=e.ref(0),n=e.ref(""),a=e.ref(),s=()=>{a.value=setInterval(function(){d()},r.slideInterval)},l=()=>{clearInterval(a.value),s()},i=p=>{o.value=p,l()},d=()=>{o.value!==r.pictures.length-1?o.value++:o.value=0,n.value="right",l()},c=()=>{o.value!==0?o.value--:o.value=r.pictures.length-1,n.value="left",l()};return e.onMounted(()=>{r.slide&&s()}),(p,f)=>(e.openBlock(),e.createElementBlock("div",Ca,[e.createElementVNode("div",$a,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.pictures,(g,u)=>(e.openBlock(),e.createElementBlock("div",{key:u,class:e.normalizeClass([u===o.value?"z-30":"z-0","absolute inset-0 -translate-y-0"])},[e.createElementVNode("img",{alt:g.alt,src:g.src,class:"block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"},null,8,va)],2))),128))]),t.noIndicators?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Sa,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.pictures,(g,u)=>(e.openBlock(),e.createElementBlock("button",{key:u,"aria-label":"Slide "+u,class:e.normalizeClass([u===o.value?"bg-white":"bg-white/50","w-3 h-3 rounded-full bg-white"]),"aria-current":"false",type:"button",onClick:e.withModifiers(m=>i(u),["prevent"])},null,10,Ba))),128))])),t.noControls?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("button",{class:"flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none","data-carousel-prev":"",type:"button",onClick:e.withModifiers(c,["prevent"])},Ea),e.createElementVNode("button",{class:"flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none","data-carousel-next":"",type:"button",onClick:e.withModifiers(d,["prevent"])},Ta)],64))]))}});var or;const ft=typeof window<"u",Na=t=>typeof t<"u",Va=t=>typeof t=="function",Pa=t=>typeof t=="string",mt=()=>{};ft&&((or=window?.navigator)!=null&&or.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function De(t){return typeof t=="function"?t():e.unref(t)}function Fa(t){return t}function Aa(t,r){var o;if(typeof t=="number")return t+r;const n=((o=t.match(/^-?[0-9]+\.?[0-9]*/))==null?void 0:o[0])||"",a=t.slice(n.length),s=parseFloat(n)+r;return Number.isNaN(s)?t:s+a}function gt(t){return e.getCurrentScope()?(e.onScopeDispose(t),!0):!1}function Ia(t){return typeof t=="function"?e.computed(t):e.ref(t)}function Ma(t,r=!0){e.getCurrentInstance()?e.onMounted(t):r?t():e.nextTick(t)}function Oa(t,r,o={}){const{immediate:n=!0}=o,a=e.ref(!1);let s=null;function l(){s&&(clearTimeout(s),s=null)}function i(){a.value=!1,l()}function d(...c){l(),a.value=!0,s=setTimeout(()=>{a.value=!1,s=null,t(...c)},De(r))}return n&&(a.value=!0,ft&&d()),gt(i),{isPending:a,start:d,stop:i}}function La(t=!1,r={}){const{truthyValue:o=!0,falsyValue:n=!1}=r,a=e.isRef(t),s=e.ref(t);function l(i){if(arguments.length)return s.value=i,s.value;{const d=De(o);return s.value=s.value===d?De(n):d,s.value}}return a?l:[s,l]}function $e(t){var r;const o=De(t);return(r=o?.$el)!=null?r:o}const Re=ft?window:void 0;function je(...t){let r,o,n,a;if(Pa(t[0])?([o,n,a]=t,r=Re):[r,o,n,a]=t,!r)return mt;let s=mt;const l=e.watch(()=>$e(r),d=>{s(),d&&(d.addEventListener(o,n,a),s=()=>{d.removeEventListener(o,n,a),s=mt})},{immediate:!0,flush:"post"}),i=()=>{l(),s()};return gt(i),i}function Da(t,r,o={}){const{window:n=Re,ignore:a,capture:s=!0,detectIframe:l=!1}=o;if(!n)return;const i=e.ref(!0);let d;const c=u=>{n.clearTimeout(d);const m=$e(t);!m||m===u.target||u.composedPath().includes(m)||!i.value||r(u)},p=u=>a&&a.some(m=>{const b=$e(m);return b&&(u.target===b||u.composedPath().includes(b))}),f=[je(n,"click",c,{passive:!0,capture:s}),je(n,"pointerdown",u=>{const m=$e(t);i.value=!!m&&!u.composedPath().includes(m)&&!p(u)},{passive:!0}),je(n,"pointerup",u=>{if(u.button===0){const m=u.composedPath();u.composedPath=()=>m,d=n.setTimeout(()=>c(u),50)}},{passive:!0}),l&&je(n,"blur",u=>{var m;const b=$e(t);((m=document.activeElement)==null?void 0:m.tagName)==="IFRAME"&&!b?.contains(document.activeElement)&&r(u)})].filter(Boolean);return()=>f.forEach(u=>u())}function Ra(t,r=!1){const o=e.ref(),n=()=>o.value=!!t();return n(),Ma(n,r),o}function ve(t,r={}){const{window:o=Re}=r,n=Ra(()=>o&&"matchMedia"in o&&typeof o.matchMedia=="function");let a;const s=e.ref(!1),l=()=>{a&&("removeEventListener"in a?a.removeEventListener("change",i):a.removeListener(i))},i=()=>{n.value&&(l(),a=o.matchMedia(Ia(t).value),s.value=a.matches,"addEventListener"in a?a.addEventListener("change",i):a.addListener(i))};return e.watchEffect(i),gt(()=>l()),s}const nr={sm:640,md:768,lg:1024,xl:1280,"2xl":1536};var ja=Object.defineProperty,ar=Object.getOwnPropertySymbols,Ha=Object.prototype.hasOwnProperty,Ga=Object.prototype.propertyIsEnumerable,sr=(t,r,o)=>r in t?ja(t,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[r]=o,Wa=(t,r)=>{for(var o in r||(r={}))Ha.call(r,o)&&sr(t,o,r[o]);if(ar)for(var o of ar(r))Ga.call(r,o)&&sr(t,o,r[o]);return t};function lr(t,r={}){function o(i,d){let c=t[i];return d!=null&&(c=Aa(c,d)),typeof c=="number"&&(c=`${c}px`),c}const{window:n=Re}=r;function a(i){return n?n.matchMedia(i).matches:!1}const s=i=>ve(`(min-width: ${o(i)})`,r),l=Object.keys(t).reduce((i,d)=>(Object.defineProperty(i,d,{get:()=>s(d),enumerable:!0,configurable:!0}),i),{});return Wa({greater(i){return ve(`(min-width: ${o(i,.1)})`,r)},greaterOrEqual:s,smaller(i){return ve(`(max-width: ${o(i,-.1)})`,r)},smallerOrEqual(i){return ve(`(max-width: ${o(i)})`,r)},between(i,d){return ve(`(min-width: ${o(i)}) and (max-width: ${o(d,-.1)})`,r)},isGreater(i){return a(`(min-width: ${o(i,.1)})`)},isGreaterOrEqual(i){return a(`(min-width: ${o(i)})`)},isSmaller(i){return a(`(max-width: ${o(i,-.1)})`)},isSmallerOrEqual(i){return a(`(max-width: ${o(i)})`)},isInBetween(i,d){return a(`(min-width: ${o(i)}) and (max-width: ${o(d,-.1)})`)}},l)}function qa(t){return JSON.parse(JSON.stringify(t))}const ir=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},dr="__vueuse_ssr_handlers__";ir[dr]=ir[dr]||{};var cr;(function(t){t.UP="UP",t.RIGHT="RIGHT",t.DOWN="DOWN",t.LEFT="LEFT",t.NONE="NONE"})(cr||(cr={}));var Ua=Object.defineProperty,pr=Object.getOwnPropertySymbols,Ya=Object.prototype.hasOwnProperty,Ja=Object.prototype.propertyIsEnumerable,ur=(t,r,o)=>r in t?Ua(t,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[r]=o,Ka=(t,r)=>{for(var o in r||(r={}))Ya.call(r,o)&&ur(t,o,r[o]);if(pr)for(var o of pr(r))Ja.call(r,o)&&ur(t,o,r[o]);return t};Ka({linear:Fa},{easeInSine:[.12,0,.39,0],easeOutSine:[.61,1,.88,1],easeInOutSine:[.37,0,.63,1],easeInQuad:[.11,0,.5,0],easeOutQuad:[.5,1,.89,1],easeInOutQuad:[.45,0,.55,1],easeInCubic:[.32,0,.67,0],easeOutCubic:[.33,1,.68,1],easeInOutCubic:[.65,0,.35,1],easeInQuart:[.5,0,.75,0],easeOutQuart:[.25,1,.5,1],easeInOutQuart:[.76,0,.24,1],easeInQuint:[.64,0,.78,0],easeOutQuint:[.22,1,.36,1],easeInOutQuint:[.83,0,.17,1],easeInExpo:[.7,0,.84,0],easeOutExpo:[.16,1,.3,1],easeInOutExpo:[.87,0,.13,1],easeInCirc:[.55,0,1,.45],easeOutCirc:[0,.55,.45,1],easeInOutCirc:[.85,0,.15,1],easeInBack:[.36,0,.66,-.56],easeOutBack:[.34,1.56,.64,1],easeInOutBack:[.68,-.6,.32,1.6]});function fr(t,r,o,n={}){var a,s,l;const{clone:i=!1,passive:d=!1,eventName:c,deep:p=!1,defaultValue:f}=n,g=e.getCurrentInstance(),u=o||g?.emit||((a=g?.$emit)==null?void 0:a.bind(g))||((l=(s=g?.proxy)==null?void 0:s.$emit)==null?void 0:l.bind(g?.proxy));let m=c;r||(r="modelValue"),m=c||m||`update:${r.toString()}`;const b=k=>i?Va(i)?i(k):qa(k):k,w=()=>Na(t[r])?b(t[r]):f;if(d){const k=w(),_=e.ref(k);return e.watch(()=>t[r],$=>_.value=b($)),e.watch(_,$=>{($!==t[r]||p)&&u(m,$)},{deep:p}),_}else return e.computed({get(){return w()},set(k){u(m,k)}})}var Qa=typeof global=="object"&&global&&global.Object===Object&&global;const Xa=Qa;var Za=typeof self=="object"&&self&&self.Object===Object&&self,es=Xa||Za||Function("return this")();const ht=es;var ts=ht.Symbol;const Z=ts;var mr=Object.prototype,rs=mr.hasOwnProperty,os=mr.toString,Se=Z?Z.toStringTag:void 0;function ns(t){var r=rs.call(t,Se),o=t[Se];try{t[Se]=void 0;var n=!0}catch{}var a=os.call(t);return n&&(r?t[Se]=o:delete t[Se]),a}var as=Object.prototype,ss=as.toString;function ls(t){return ss.call(t)}var is="[object Null]",ds="[object Undefined]",gr=Z?Z.toStringTag:void 0;function bt(t){return t==null?t===void 0?ds:is:gr&&gr in Object(t)?ns(t):ls(t)}function yt(t){return t!=null&&typeof t=="object"}var cs="[object Symbol]";function wt(t){return typeof t=="symbol"||yt(t)&&bt(t)==cs}function ps(t,r){for(var o=-1,n=t==null?0:t.length,a=Array(n);++o0){if(++r>=As)return arguments[0]}else r=0;return t.apply(void 0,arguments)}}function Ls(t){return function(){return t}}var Ds=function(){try{var t=_t(Object,"defineProperty");return t({},"",{}),t}catch{}}();const Ge=Ds;var Rs=Ge?function(t,r){return Ge(t,"toString",{configurable:!0,enumerable:!1,value:Ls(r),writable:!0})}:ms,js=Os(Rs);const Hs=js;var Gs=9007199254740991,Ws=/^(?:0|[1-9]\d*)$/;function kr(t,r){var o=typeof t;return r=r??Gs,!!r&&(o=="number"||o!="symbol"&&Ws.test(t))&&t>-1&&t%1==0&&t-1&&t%1==0&&t<=Qs}var Zs="[object Arguments]";function Cr(t){return yt(t)&&bt(t)==Zs}var $r=Object.prototype,el=$r.hasOwnProperty,tl=$r.propertyIsEnumerable,rl=Cr(function(){return arguments}())?Cr:function(t){return yt(t)&&el.call(t,"callee")&&!tl.call(t,"callee")};const vr=rl;var ol=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,nl=/^\w*$/;function al(t,r){if(me(t))return!1;var o=typeof t;return o=="number"||o=="symbol"||o=="boolean"||t==null||wt(t)?!0:nl.test(t)||!ol.test(t)||r!=null&&t in Object(r)}var sl=_t(Object,"create");const Be=sl;function ll(){this.__data__=Be?Be(null):{},this.size=0}function il(t){var r=this.has(t)&&delete this.__data__[t];return this.size-=r?1:0,r}var dl="__lodash_hash_undefined__",cl=Object.prototype,pl=cl.hasOwnProperty;function ul(t){var r=this.__data__;if(Be){var o=r[t];return o===dl?void 0:o}return pl.call(r,t)?r[t]:void 0}var fl=Object.prototype,ml=fl.hasOwnProperty;function gl(t){var r=this.__data__;return Be?r[t]!==void 0:ml.call(r,t)}var hl="__lodash_hash_undefined__";function bl(t,r){var o=this.__data__;return this.size+=this.has(t)?0:1,o[t]=Be&&r===void 0?hl:r,this}function ie(t){var r=-1,o=t==null?0:t.length;for(this.clear();++r-1}function $l(t,r){var o=this.__data__,n=We(o,t);return n<0?(++this.size,o.push([t,r])):o[n][1]=r,this}function ge(t){var r=-1,o=t==null?0:t.length;for(this.clear();++r0&&o(i)?r>1?Br(i,r-1,o,n,a):Hl(a,i):n||(a[a.length]=i)}return a}function Wl(t){var r=t==null?0:t.length;return r?Br(t,1):[]}function ql(t){return Hs(Ks(t,void 0,Wl),t+"")}function Ul(t,r){return t!=null&&r in Object(t)}function Yl(t,r,o){r=Ue(r,t);for(var n=-1,a=r.length,s=!1;++n{if(n!==null){if(typeof n!="object"){(typeof n=="string"||typeof n=="number")&&o.push(e.createTextVNode(String(n)));return}if(Array.isArray(n)){Ye(n,r,o);return}if(n.type===e.Fragment){if(n.children===null)return;Array.isArray(n.children)&&Ye(n.children,r,o)}else n.type!==e.Comment&&o.push(n)}}),o}function ti(t,r="default",o=void 0){const n=t[r];if(!n)return console.warn("getFirstSlotVNode",`slot[${r}] is empty`),null;const a=Ye(n(o));return a.length===1?a[0]:(console.warn("getFirstSlotVNode",`slot[${r}] should have exactly one child`),null)}const ri={focus:["onFocus","onBlur"],click:["onClick"],hover:["onMouseenter","onMouseleave"]};function oi(t,r){Object.entries(ri).forEach(([,o])=>{o.forEach(n=>{t.props?t.props=Object.assign({},t.props):t.props={};const a=t.props[n],s=r[n];a?t.props[n]=(...l)=>{a(...l),s(...l)}:t.props[n]=s})})}const $t=e.defineComponent({name:"SlotListener",props:{trigger:{type:String,default:"click"}},emits:["click","focus","blur","mouseenter","mouseleave"],setup(t,{emit:r}){return{handleClick:i=>{r("click",i)},handleBlur:i=>{r("blur",i)},handleFocus:i=>{r("focus",i)},handleMouseLeave:i=>{r("mouseleave",i)},handleMouseEnter:i=>{r("mouseenter",i)}}},render(){const{$slots:t}=this,r={onClick:this.handleClick,onMouseenter:this.handleMouseEnter,onMouseleave:this.handleMouseLeave,onFocus:this.handleFocus,onBlur:this.handleBlur},o=ti(t,"default"),n=[r];return o?.props&&n.push(ei(o.props,"onClick","onMouseenter","onMouseleave","onFocus","onBlur")),o&&oi(o,{onBlur:s=>{n.forEach(l=>{l?.onBlur?.(s)})},onFocus:s=>{n.forEach(l=>{l?.onFocus?.(s)})},onClick:s=>{n.forEach(l=>{l?.onClick?.(s)})},onMouseenter:s=>{n.forEach(l=>{l?.onMouseenter?.(s)})},onMouseleave:s=>{n.forEach(l=>{l?.onMouseleave?.(s)})}}),o}}),ni="absolute z-10 bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700",Je=8,ai={bottom:"",left:"top-0",right:"top-0",top:""},si={bottom(t){return`bottom: -${t.height+Je}px;`},left(t){return`left: -${t.width+Je}px;`},right(t){return`right: -${t.width+Je}px;`},top(t){return`top: -${t.height+Je}px;`}};function li(t){e.watch(t.visible,a=>{a&&e.nextTick(()=>o())});const r=e.ref(""),o=()=>{const a=t.contentRef.value?.getBoundingClientRect();if(!a){r.value="";return}r.value=si[t.placement.value](a)};return{contentClasses:e.computed(()=>V(ni,ai[t.placement.value])),contentStyles:r}}const ii=t=>(e.pushScopeId("data-v-7ea3917f"),t=t(),e.popScopeId(),t),di={class:"inline-flex items-center"},ci=ii(()=>e.createElementVNode("svg",{class:"w-4 h-4 ml-2",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{d:"M19 9l-7 7-7-7","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1)),pi=e.defineComponent({__name:"FwbDropdown",props:{placement:{default:"bottom"},text:{default:""},transition:{default:""}},setup(t){const r=e.ref(!1),o=()=>r.value=!1,n=()=>r.value=!r.value,a=t,s={bottom:"to-bottom",left:"to-left",right:"to-right",top:"to-top"},l=e.computed(()=>a.transition===null?s[a.placement]:a.transition),i=e.ref(),d=e.ref(),{contentClasses:c,contentStyles:p}=li({placement:e.toRef(a,"placement"),visible:r,contentRef:i});return Da(d,()=>{r.value&&(r.value=!1)}),(f,g)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"wrapper",ref:d,class:"inline-flex relative"},[e.createElementVNode("div",di,[e.createVNode($t,{onClick:n},{default:e.withCtx(()=>[e.renderSlot(f.$slots,"trigger",{},()=>[e.createVNode(rr,null,{suffix:e.withCtx(()=>[ci]),default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(f.text)+" ",1)]),_:1})],!0)]),_:3})]),e.createVNode(e.Transition,{name:l.value},{default:e.withCtx(()=>[r.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"content",ref:i,class:e.normalizeClass([e.unref(c)]),style:e.normalizeStyle(e.unref(p))},[e.createVNode($t,{onClick:o},{default:e.withCtx(()=>[e.renderSlot(f.$slots,"default",{},void 0,!0)]),_:3})],6)):e.createCommentVNode("",!0)]),_:3},8,["name"])],512))}}),rf="",ui=q(pi,[["__scopeId","data-v-7ea3917f"]]),fi=e.defineComponent({inheritAttrs:!1,__name:"FwbFooter",props:{sticky:{type:Boolean,default:!1},footerType:{default:"default"}},setup(t){const r=t,o=e.useAttrs(),n=S(r.footerType==="sitemap"&&"bg-gray-800",r.footerType==="socialmedia"&&"p-4 bg-white sm:p-6 dark:bg-gray-800",r.footerType==="logo"&&"p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800",r.footerType==="default"&&"p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800",r.sticky&&"absolute bottom-0 left-0 z-20 w-full border-t border-gray-200 dark:border-gray-600",o.class);return(a,s)=>(e.openBlock(),e.createElementBlock("footer",e.mergeProps(a.$attrs,{class:e.unref(n)}),[e.renderSlot(a.$slots,"default")],16))}}),mi=["href"],gi=["alt","src"],hi=e.defineComponent({inheritAttrs:!1,__name:"FwbFooterBrand",props:{href:{default:""},src:{default:""},alt:{default:""},name:{default:""},imageClass:{default:""},nameClass:{default:""},aClass:{default:""}},setup(t){const r=e.useAttrs(),o=t,n=S("mb-6 md:mb-0",r.class),a=S("flex items-center",o.aClass),s=S("h-8 mr-3",o.imageClass),l=S("self-center text-2xl font-semibold whitespace-nowrap dark:text-white",o.nameClass);return(i,d)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({class:e.unref(n)},i.$attrs),[e.createElementVNode("a",{class:e.normalizeClass(e.unref(a)),href:i.href},[e.createElementVNode("img",{alt:i.alt,class:e.normalizeClass(e.unref(s)),src:i.src},null,10,gi),e.createElementVNode("span",{class:e.normalizeClass(e.unref(l))},e.toDisplayString(i.name),3)],10,mi)],16))}}),bi=e.defineComponent({inheritAttrs:!1,__name:"FwbFooterCopyright",props:{year:{default:new Date().getFullYear()},by:{default:""},href:{default:""},aClass:{default:""},copyrightMessage:{default:"All Rights Reserved."}},setup(t){const r=t,o=e.useAttrs(),n=S("block text-sm text-gray-500 sm:text-center dark:text-gray-400",o.class),a=S(r.href?"hover:underline":"ml-1",r.aClass),s=r.href?"a":"span";return(l,i)=>(e.openBlock(),e.createElementBlock("span",e.mergeProps(l.$attrs,{class:e.unref(n)}),[e.createTextVNode(" © "+e.toDisplayString(l.year)+" ",1),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{class:e.normalizeClass(e.unref(a)),href:l.href},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.by),1)]),_:1},8,["class","href"])),e.createTextVNode(" "+e.toDisplayString(l.copyrightMessage),1)],16))}}),yi={class:"sr-only"},wi=e.defineComponent({inheritAttrs:!1,__name:"FwbFooterIcon",props:{href:{default:""},ariaLabel:{default:""},srText:{default:""}},setup(t){const r=e.useAttrs(),n=t.href?"a":"span",a=S("text-gray-500 hover:text-gray-900 dark:hover:text-white",r.class);return(s,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(n)),e.mergeProps({"aria-label":s.ariaLabel,class:e.unref(a),href:s.href},s.$attrs),{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default"),e.createElementVNode("span",yi,e.toDisplayString(s.srText),1)]),_:3},16,["aria-label","class","href"]))}}),ki=e.defineComponent({inheritAttrs:!1,__name:"FwbFooterLink",props:{href:{default:""},aClass:{default:""},component:{default:"a"}},setup(t){const r=e.useAttrs(),o=t,n=o.component==="a"?"a":e.resolveComponent(o.component),a=o.component==="router-link"?"to":"href",s=S("hover:underline",o.aClass),l=S("mr-4 md:mr-6 last:mr-0",r.class);return(i,d)=>(e.openBlock(),e.createElementBlock("li",e.mergeProps(i.$attrs,{class:e.unref(l)}),[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(n)),e.normalizeProps({[e.unref(a)||""]:i.href,class:e.unref(s)}),{default:e.withCtx(()=>[e.renderSlot(i.$slots,"default")]),_:3},16,["class"]))],16))}}),_i=e.defineComponent({inheritAttrs:!1,__name:"FwbFooterLinkGroup",setup(t){const r=e.useAttrs(),o=S("flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0",r.class);return(n,a)=>(e.openBlock(),e.createElementBlock("ul",e.mergeProps(n.$attrs,{class:e.unref(o)}),[e.renderSlot(n.$slots,"default")],16))}}),xi=e.defineComponent({inheritAttrs:!1,__name:"FwbJumbotron",props:{headerLevel:{default:1},subText:{default:""},subTextClasses:{default:""},headerText:{default:""},headerClasses:{default:""}},setup(t){const r=t,o=e.useAttrs(),n=e.computed(()=>S("bg-white dark:bg-gray-900 py-8 lg:py-16 px-4 mx-auto max-w-screen-xl text-center ",o.class)),a=e.computed(()=>S("mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white",r.headerClasses)),s=e.computed(()=>S("mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-0 lg:px-16 dark:text-gray-400",r.subTextClasses));return(l,i)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps(l.$attrs,{class:n.value}),[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(`h${l.headerLevel}`),{class:e.normalizeClass(a.value)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.headerText),1)]),_:1},8,["class"])),e.createElementVNode("div",{class:e.normalizeClass(s.value)},e.toDisplayString(l.subText),3),e.renderSlot(l.$slots,"default")],16))}}),Ci="overflow-hidden w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white";function $i(){return{containerClasses:e.computed(()=>V(Ci))}}const vi=e.defineComponent({__name:"FwbListGroup",setup(t){const{containerClasses:r}=$i();return(o,n)=>(e.openBlock(),e.createElementBlock("ul",{class:e.normalizeClass(e.unref(r))},[e.renderSlot(o.$slots,"default")],2))}}),Si={border:t=>t.substring(0,t.lastIndexOf("-"))},Bi=(t,r=Si)=>{const n=Object.keys(r).find(a=>t.includes(a));return n?r[n](t):t.substring(0,t.indexOf("-"))};function D(...t){return t.filter(r=>r).reduce((r,o)=>{const n=Array.isArray(o)?Array.from(o).map(p=>p.split(" ")).flat():o.split(" "),a=n.map(p=>Bi(p)),s=a.filter(p=>!r.types.includes(p)),i=[...a.filter(p=>r.types.includes(p)),...s],d=[...new Set([...r.types,...i])],c=d.map(p=>{if(i.includes(p)){const g=a.indexOf(p);if(g>=0)return n[g]||""}const f=r.types.indexOf(p);return f>=0&&r.classes[f]||""}).filter(p=>!!p);return{types:d,classes:c}},{types:[],classes:[]}).classes.join(" ")}const Ei="inline-flex items-center w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600",Ti="block w-full px-4 py-2 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white",zi="bg-gray-100 cursor-not-allowed dark:bg-gray-600 dark:text-gray-400";function Ni(t){return{itemClasses:e.computed(()=>D(Ei,t.disabled.value?zi:"",!t.disabled.value&&t.hover.value?Ti:""))}}const Vi={key:0,class:"mr-2"},Pi={key:1,class:"ml-2"},Fi=e.defineComponent({__name:"FwbListGroupItem",props:{hover:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},setup(t){const r=t,{itemClasses:o}=Ni(e.toRefs(r));return(n,a)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(e.unref(o))},[n.$slots.prefix?(e.openBlock(),e.createElementBlock("div",Vi,[e.renderSlot(n.$slots,"prefix")])):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default"),n.$slots.suffix?(e.openBlock(),e.createElementBlock("div",Pi,[e.renderSlot(n.$slots,"suffix")])):e.createCommentVNode("",!0)],2))}}),Ai=e.createElementVNode("div",{class:"bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40"},null,-1),Ii={class:"relative bg-white rounded-lg shadow dark:bg-gray-700"},Mi=e.createElementVNode("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{"clip-rule":"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),Oi={key:0,class:"p-6 rounded-b border-gray-200 border-t dark:border-gray-600"},Li=e.defineComponent({__name:"FwbModal",props:{notEscapable:{type:Boolean,default:!1},persistent:{type:Boolean,default:!1},size:{default:"2xl"}},emits:["close","click:outside"],setup(t,{emit:r}){const o=t,n=r,a={xs:"max-w-xs",sm:"max-w-sm",md:"max-w-md",lg:"max-w-lg",xl:"max-w-xl","2xl":"max-w-2xl","3xl":"max-w-3xl","4xl":"max-w-4xl","5xl":"max-w-5xl","6xl":"max-w-6xl","7xl":"max-w-7xl"};function s(){n("close")}function l(){o.persistent||(n("click:outside"),s())}function i(){!o.notEscapable&&!o.persistent&&s()}const d=e.ref(null);return e.onMounted(()=>{d.value&&d.value.focus()}),(c,p)=>(e.openBlock(),e.createElementBlock("div",null,[Ai,e.createElementVNode("div",{ref_key:"modalRef",ref:d,class:"overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center flex",tabindex:"0",onClick:e.withModifiers(l,["self"]),onKeyup:e.withKeys(i,["esc"])},[e.createElementVNode("div",{class:e.normalizeClass([`${a[c.size]}`,"relative p-4 w-full h-full"])},[e.createElementVNode("div",Ii,[e.createElementVNode("div",{class:e.normalizeClass([c.$slots.header?"border-b border-gray-200 dark:border-gray-600":"","p-4 rounded-t flex justify-between items-center"])},[e.renderSlot(c.$slots,"header"),c.persistent?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,"aria-label":"close",class:"text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white",type:"button",onClick:s},[e.renderSlot(c.$slots,"close-icon",{},()=>[Mi])]))],2),e.createElementVNode("div",{class:e.normalizeClass([c.$slots.header?"":"pt-0","p-6"])},[e.renderSlot(c.$slots,"body")],2),c.$slots.footer?(e.openBlock(),e.createElementBlock("div",Oi,[e.renderSlot(c.$slots,"footer")])):e.createCommentVNode("",!0)])],2)],544)]))}}),Di={class:"container flex flex-wrap justify-between items-center mx-auto"},Ri=e.createElementVNode("span",{class:"sr-only"},"Open main menu",-1),ji=e.createElementVNode("svg",{"aria-hidden":"true",class:"w-6 h-6",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{"clip-rule":"evenodd",d:"M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z","fill-rule":"evenodd"})],-1),Hi={key:0,class:"hidden md:order-2 md:flex"},Gi=" border-gray-200",Wi="fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600",qi="rounded",Ui="p-3 bg-gray-50 dark:bg-gray-800 dark:border-gray-700",Yi="bg-white px-2 sm:px-4 py-2.5 dark:bg-gray-900",Ji=e.defineComponent({__name:"FwbNavbar",props:{class:{type:String,default:""},sticky:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},solid:{type:Boolean,default:!1}},setup(t){const r=t,o=e.ref(!1);function n(){o.value=!o.value}e.provide("megaMenuToggle",{megaMenuVisble:o,toggleMenu:n});const a=e.useSlots(),l=lr(nr).smaller("md"),i=e.ref(!1),d=La(i),c=e.computed(()=>Q([Gi,r.sticky?Wi:"",r.rounded?qi:"",r.solid?Ui:Yi,r.class].join(" "))),p=e.computed(()=>l?i.value:!0);return(f,g)=>(e.openBlock(),e.createElementBlock("nav",{class:e.normalizeClass(c.value)},[e.createElementVNode("div",Di,[e.renderSlot(f.$slots,"logo"),e.createElementVNode("button",{"aria-controls":"navbar-default","aria-expanded":"false",class:"inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",type:"button",onClick:g[0]||(g[0]=u=>e.unref(d)())},[Ri,e.renderSlot(f.$slots,"menu-icon",{},()=>[ji])]),e.renderSlot(f.$slots,"default",{isShowMenu:p.value}),e.unref(a)["right-side"]?(e.openBlock(),e.createElementBlock("div",Hi,[e.renderSlot(f.$slots,"right-side")])):e.createCommentVNode("",!0)]),e.renderSlot(f.$slots,"mega-menu-dropdown")],2))}}),Ki="w-full md:block md:w-auto",Qi="flex flex-col p-4 mt-4 rounded-lg border border-gray-100 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700",Xi="bg-gray-50",Zi=e.defineComponent({__name:"FwbNavbarCollapse",props:{isShowMenu:{type:Boolean,default:!1}},setup(t){const o=lr(nr).smaller("md"),n=t,a=e.computed(()=>V(Ki,n.isShowMenu?"":"hidden")),s=e.computed(()=>V(Qi,o.value?Xi:""));return(l,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(a.value)},[e.createElementVNode("ul",{class:e.normalizeClass(s.value)},[e.renderSlot(l.$slots,"default")],2)],2))}}),ed="bg-blue-700 md:bg-transparent text-white md:text-blue-700 dark:text-white",td="text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent",rd="block py-2 pr-4 pl-3 rounded md:p-0",od=e.defineComponent({__name:"FwbNavbarLink",props:{link:{default:"/"},isActive:{type:Boolean,default:!1},component:{default:"a"},linkAttr:{default:"href"},disabled:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:r}){const o=t,n=r,a=e.computed(()=>o.component!=="a"?e.resolveComponent(o.component):"a"),s=S(rd,o.isActive?ed:td),l=i=>{o.disabled||n("click",i)};return(i,d)=>(e.openBlock(),e.createElementBlock("li",null,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.value),e.normalizeProps({[i.linkAttr||""]:i.link,class:e.unref(s),onClick:l}),{default:e.withCtx(()=>[e.renderSlot(i.$slots,"default")]),_:3},16,["class"]))]))}}),nd=["src","alt"],ad={class:"self-center text-xl font-semibold whitespace-nowrap dark:text-white"},sd=e.defineComponent({__name:"FwbNavbarLogo",props:{link:{default:"/"},imageUrl:{default:"/assets/logo.svg"},alt:{default:"Logo"},component:{default:"a"},linkAttr:{default:"href"}},setup(t){const r=t,o=e.computed(()=>r.component!=="a"?e.resolveComponent(r.component):"a");return(n,a)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.value),e.normalizeProps({class:"flex items-center",[n.linkAttr||""]:n.link}),{default:e.withCtx(()=>[e.createElementVNode("img",{src:n.imageUrl,alt:n.alt,class:"mr-3 h-6 sm:h-10"},null,8,nd),e.createElementVNode("span",ad,[e.renderSlot(n.$slots,"default")])]),_:3},16))}}),ld=e.createElementVNode("svg",{version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",class:"dark:fill-gray-400 hover:dark:fill-white"},[e.createElementVNode("title",null,"settings"),e.createElementVNode("path",{d:"M16 12c0-1.104-0.449-2.106-1.172-2.828s-1.724-1.172-2.828-1.172-2.106 0.449-2.828 1.172-1.172 1.724-1.172 2.828 0.449 2.106 1.172 2.828 1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828zM14 12c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414zM20.315 15.404c0.046-0.105 0.112-0.191 0.192-0.257 0.112-0.092 0.251-0.146 0.403-0.147h0.090c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121-0.337-1.58-0.879-2.121-1.293-0.879-2.121-0.879h-0.159c-0.11-0.001-0.215-0.028-0.308-0.076-0.127-0.066-0.23-0.172-0.292-0.312-0.003-0.029-0.004-0.059-0.004-0.089-0.024-0.055-0.040-0.111-0.049-0.168 0.020-0.334 0.077-0.454 0.168-0.547l0.062-0.062c0.585-0.586 0.878-1.356 0.877-2.122s-0.294-1.536-0.881-2.122c-0.586-0.585-1.356-0.878-2.122-0.877s-1.536 0.294-2.12 0.879l-0.046 0.046c-0.083 0.080-0.183 0.136-0.288 0.166-0.14 0.039-0.291 0.032-0.438-0.033-0.101-0.044-0.187-0.11-0.253-0.19-0.092-0.112-0.146-0.251-0.147-0.403v-0.090c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879-1.58 0.337-2.121 0.879-0.879 1.293-0.879 2.121v0.159c-0.001 0.11-0.028 0.215-0.076 0.308-0.066 0.127-0.172 0.23-0.312 0.292-0.029 0.003-0.059 0.004-0.089 0.004-0.055 0.024-0.111 0.040-0.168 0.049-0.335-0.021-0.455-0.078-0.548-0.169l-0.062-0.062c-0.586-0.585-1.355-0.878-2.122-0.878s-1.535 0.294-2.122 0.882c-0.585 0.586-0.878 1.355-0.878 2.122s0.294 1.536 0.879 2.12l0.048 0.047c0.080 0.083 0.136 0.183 0.166 0.288 0.039 0.14 0.032 0.291-0.031 0.434-0.006 0.016-0.013 0.034-0.021 0.052-0.041 0.109-0.108 0.203-0.191 0.275-0.11 0.095-0.25 0.153-0.383 0.156h-0.090c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.294-0.879 2.122 0.337 1.58 0.879 2.121 1.293 0.879 2.121 0.879h0.159c0.11 0.001 0.215 0.028 0.308 0.076 0.128 0.067 0.233 0.174 0.296 0.321 0.024 0.055 0.040 0.111 0.049 0.168-0.020 0.334-0.077 0.454-0.168 0.547l-0.062 0.062c-0.585 0.586-0.878 1.356-0.877 2.122s0.294 1.536 0.881 2.122c0.586 0.585 1.356 0.878 2.122 0.877s1.536-0.294 2.12-0.879l0.047-0.048c0.083-0.080 0.183-0.136 0.288-0.166 0.14-0.039 0.291-0.032 0.434 0.031 0.016 0.006 0.034 0.013 0.052 0.021 0.109 0.041 0.203 0.108 0.275 0.191 0.095 0.11 0.153 0.25 0.156 0.383v0.092c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879 1.58-0.337 2.121-0.879 0.879-1.293 0.879-2.121v-0.159c0.001-0.11 0.028-0.215 0.076-0.308 0.067-0.128 0.174-0.233 0.321-0.296 0.055-0.024 0.111-0.040 0.168-0.049 0.334 0.020 0.454 0.077 0.547 0.168l0.062 0.062c0.586 0.585 1.356 0.878 2.122 0.877s1.536-0.294 2.122-0.881c0.585-0.586 0.878-1.356 0.877-2.122s-0.294-1.536-0.879-2.12l-0.048-0.047c-0.080-0.083-0.136-0.183-0.166-0.288-0.039-0.14-0.032-0.291 0.031-0.434zM18.396 9.302c-0.012-0.201-0.038-0.297-0.076-0.382v0.080c0 0.043 0.003 0.084 0.008 0.125 0.021 0.060 0.043 0.119 0.068 0.177 0.004 0.090 0.005 0.091 0.005 0.092 0.249 0.581 0.684 1.030 1.208 1.303 0.371 0.193 0.785 0.298 1.211 0.303h0.18c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707-0.111 0.525-0.293 0.707-0.431 0.293-0.707 0.293h-0.090c-0.637 0.003-1.22 0.228-1.675 0.603-0.323 0.266-0.581 0.607-0.75 0.993-0.257 0.582-0.288 1.21-0.127 1.782 0.119 0.423 0.341 0.814 0.652 1.136l0.072 0.073c0.196 0.196 0.294 0.45 0.294 0.707s-0.097 0.512-0.292 0.707c-0.197 0.197-0.451 0.295-0.709 0.295s-0.512-0.097-0.707-0.292l-0.061-0.061c-0.463-0.453-1.040-0.702-1.632-0.752-0.437-0.037-0.882 0.034-1.293 0.212-0.578 0.248-1.027 0.683-1.3 1.206-0.193 0.371-0.298 0.785-0.303 1.211v0.181c0 0.276-0.111 0.525-0.293 0.707s-0.43 0.292-0.706 0.292-0.525-0.111-0.707-0.293-0.293-0.431-0.293-0.707v-0.090c-0.015-0.66-0.255-1.242-0.644-1.692-0.284-0.328-0.646-0.585-1.058-0.744-0.575-0.247-1.193-0.274-1.756-0.116-0.423 0.119-0.814 0.341-1.136 0.652l-0.073 0.072c-0.196 0.196-0.45 0.294-0.707 0.294s-0.512-0.097-0.707-0.292c-0.197-0.197-0.295-0.451-0.295-0.709s0.097-0.512 0.292-0.707l0.061-0.061c0.453-0.463 0.702-1.040 0.752-1.632 0.037-0.437-0.034-0.882-0.212-1.293-0.248-0.578-0.683-1.027-1.206-1.3-0.371-0.193-0.785-0.298-1.211-0.303l-0.18 0.001c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707 0.111-0.525 0.293-0.707 0.431-0.293 0.707-0.293h0.090c0.66-0.015 1.242-0.255 1.692-0.644 0.328-0.284 0.585-0.646 0.744-1.058 0.247-0.575 0.274-1.193 0.116-1.756-0.119-0.423-0.341-0.814-0.652-1.136l-0.073-0.073c-0.196-0.196-0.294-0.45-0.294-0.707s0.097-0.512 0.292-0.707c0.197-0.197 0.451-0.295 0.709-0.295s0.512 0.097 0.707 0.292l0.061 0.061c0.463 0.453 1.040 0.702 1.632 0.752 0.37 0.032 0.745-0.014 1.101-0.137 0.096-0.012 0.186-0.036 0.266-0.072-0.031 0.001-0.061 0.003-0.089 0.004-0.201 0.012-0.297 0.038-0.382 0.076h0.080c0.043 0 0.084-0.003 0.125-0.008 0.060-0.021 0.119-0.043 0.177-0.068 0.090-0.004 0.091-0.005 0.092-0.005 0.581-0.249 1.030-0.684 1.303-1.208 0.193-0.37 0.298-0.785 0.303-1.21v-0.181c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293 0.525 0.111 0.707 0.293 0.293 0.431 0.293 0.707v0.090c0.003 0.637 0.228 1.22 0.603 1.675 0.266 0.323 0.607 0.581 0.996 0.751 0.578 0.255 1.206 0.286 1.778 0.125 0.423-0.119 0.814-0.341 1.136-0.652l0.073-0.072c0.196-0.196 0.45-0.294 0.707-0.294s0.512 0.097 0.707 0.292c0.197 0.197 0.295 0.451 0.295 0.709s-0.097 0.512-0.292 0.707l-0.061 0.061c-0.453 0.463-0.702 1.040-0.752 1.632-0.032 0.37 0.014 0.745 0.137 1.101 0.012 0.095 0.037 0.185 0.072 0.266-0.001-0.032-0.002-0.062-0.004-0.089z"})],-1),id=e.defineComponent({__name:"FwbMegaMenu",setup(t){const{megaMenuVisble:r,toggleMenu:o}=e.inject("megaMenuToggle");return e.ref(!1),(n,a)=>(e.openBlock(),e.createElementBlock("div",{onClick:a[0]||(a[0]=(...s)=>e.unref(o)&&e.unref(o)(...s)),id:"mega-menu-full-cta-dropdown-button",class:"flex gap-2 items-center justify-between w-full py-2 px-3 font-medium text-gray-700 border-b border-gray-100 md:w-auto hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-white md:p-0 dark:text-gray-400 md:dark:hover:white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"},[ld,e.renderSlot(n.$slots,"default")]))}}),dd={class:"grid max-w-screen-xl px-4 py-5 mx-auto text-sm text-gray-500 dark:text-gray-400 md:grid-cols-3 md:px-6"},cd=e.defineComponent({__name:"FwbMegaMenuDropdown",setup(t){const{megaMenuVisble:r,toggleMenu:o}=e.inject("megaMenuToggle");return(n,a)=>(e.openBlock(),e.createElementBlock("div",{id:"mega-menu-full-cta-dropdown",class:e.normalizeClass([e.unref(r)==!1?"hidden":"","mt-1 bg-white border-gray-200 shadow-sm border-y dark:bg-gray-800 dark:border-gray-600"])},[e.createElementVNode("div",dd,[e.renderSlot(n.$slots,"default")])],2))}}),pd={"aria-label":"Navigation"},ud={class:"font-semibold text-gray-900 dark:text-white"},fd={class:"font-semibold text-gray-900 dark:text-white"},md={class:"font-semibold text-gray-900 dark:text-white"},gd=["disabled"],hd=["disabled"],bd={key:0,stroke:"currentColor",fill:"currentColor","stroke-width":"0",viewBox:"0 0 20 20","aria-hidden":"true",class:"h-5 w-5",height:"1em",width:"1em",xmlns:"http://www.w3.org/2000/svg"},yd=[e.createElementVNode("path",{"fill-rule":"evenodd",d:"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z","clip-rule":"evenodd"},null,-1)],wd=["disabled","onClick"],kd=["disabled"],_d={key:0,stroke:"currentColor",fill:"currentColor","stroke-width":"0",viewBox:"0 0 20 20","aria-hidden":"true",class:"h-5 w-5",height:"1em",width:"1em",xmlns:"http://www.w3.org/2000/svg"},xd=[e.createElementVNode("path",{"fill-rule":"evenodd",d:"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z","clip-rule":"evenodd"},null,-1)],Cd=["disabled"],$d=e.defineComponent({__name:"FwbPagination",props:{modelValue:{default:1},totalPages:{default:void 0},perPage:{default:10},totalItems:{default:10},layout:{default:"pagination"},showIcons:{type:Boolean,default:!1},sliceLength:{default:2},previousLabel:{default:"Prev"},nextLabel:{default:"Next"},enableFirstAndLastButtons:{type:Boolean,default:!1},showLabels:{type:Boolean,default:!0},large:{type:Boolean,default:!1}},emits:["update:model-value","page-changed"],setup(t,{emit:r}){const o=r,n=t;function a(y){o("update:model-value",y),o("page-changed",y)}function s(){o("update:model-value",n.modelValue-1),o("page-changed",n.modelValue-1)}function l(){o("update:model-value",n.modelValue+1),o("page-changed",n.modelValue+1)}function i(){o("update:model-value",1),o("page-changed",1)}function d(){const y=c.value;o("update:model-value",y),o("page-changed",y)}const c=e.computed(()=>n.totalPages?n.totalPages:Math.ceil(n.totalItems/n.perPage)),p=e.computed(()=>n.modelValue<=1),f=e.computed(()=>n.modelValue>=c.value),g=y=>y===n.modelValue,u=e.computed(()=>{if(n.layout==="navigation")return[];if(n.layout==="table")return[];if(c.value<=n.sliceLength*2+1){const x=[];for(let z=1;z<=c.value;z++)x.push(z);return x}if(n.modelValue<=n.sliceLength){const x=[],z=Math.abs(n.modelValue-n.sliceLength)+n.modelValue+n.sliceLength+1;for(let P=1;P<=z;P++)x.push(P);return x}if(n.modelValue>=c.value-n.sliceLength){const x=[];for(let z=Math.abs(c.value-n.sliceLength*2);z<=c.value;z++)x.push(z);return x}const y=[],T=n.modelValue-n.sliceLength>0?n.modelValue-n.sliceLength:1;for(let x=T;x=c.value);x++)y.push(x);return y}),m=e.computed(()=>n.modelValue*n.perPage-n.perPage+1),b=e.computed(()=>{const y=n.modelValue*n.perPage;return n.totalItems&&y>n.totalItems?n.totalItems:y}),w=e.computed(()=>n.totalItems?n.totalItems:c.value*n.perPage),k=e.computed(()=>n.modelValue===1),_=e.computed(()=>n.modelValue===c.value);function $(y){const T="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",x="text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:bg-gray-700 dark:text-white",z="px-4 h-10";return S(T,y&&x,n.large&&z)}function E(y){const T="flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",x="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-white cursor-not-allowed",z="px-4 h-10",P="border-none text-white hover:text-white bg-gray-800 rounded-none first:rounded-l last:rounded-r hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white";return S(T,y===n.modelValue&&x,n.large&&z,(y>c.value||y<1)&&x,n.layout==="navigation"&&"first:mr-3",(n.layout==="navigation"||n.layout==="table")&&"rounded-lg",n.layout==="table"&&P)}return(y,T)=>(e.openBlock(),e.createElementBlock("nav",pd,[y.layout==="table"?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["text-gray-700 dark:text-gray-400 mb-2",y.large?"text-base":"text-sm"])},[e.createTextVNode(" Showing "),e.createElementVNode("span",ud,e.toDisplayString(m.value),1),e.createTextVNode(" to "),e.createElementVNode("span",fd,e.toDisplayString(b.value),1),e.createTextVNode(" of "),e.createElementVNode("span",md,e.toDisplayString(w.value),1)],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["inline-flex",y.large&&"text-base h-10"])},[e.renderSlot(y.$slots,"start"),y.enableFirstAndLastButtons?e.renderSlot(y.$slots,"first-button",{key:0},()=>[e.createElementVNode("button",{disabled:k.value,class:e.normalizeClass(E(1)),onClick:i}," First ",10,gd)]):e.createCommentVNode("",!0),e.renderSlot(y.$slots,"prev-button",{disabled:p.value,decreasePage:s},()=>[e.createElementVNode("button",{disabled:p.value,class:e.normalizeClass(E(y.modelValue-1)),onClick:s},[e.renderSlot(y.$slots,"prev-icon",{},()=>[y.showIcons||y.$slots["prev-icon"]?(e.openBlock(),e.createElementBlock("svg",bd,yd)):e.createCommentVNode("",!0)]),y.showLabels?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(y.previousLabel),1)],64)):e.createCommentVNode("",!0)],10,hd)]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,x=>e.renderSlot(y.$slots,"page-button",{key:x,page:x,setPage:a,disabled:g(x)},()=>[e.createElementVNode("button",{disabled:g(x),class:e.normalizeClass($(x===y.modelValue)),onClick:z=>a(x)},e.toDisplayString(x),11,wd)])),128)),e.renderSlot(y.$slots,"next-button",{disabled:f.value,increasePage:l},()=>[e.createElementVNode("button",{disabled:f.value,class:e.normalizeClass(E(y.modelValue+1)),onClick:l},[y.showLabels?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(y.nextLabel),1)],64)):e.createCommentVNode("",!0),e.renderSlot(y.$slots,"next-icon",{},()=>[y.showIcons||y.$slots["next-icon"]?(e.openBlock(),e.createElementBlock("svg",_d,xd)):e.createCommentVNode("",!0)])],10,kd)]),y.enableFirstAndLastButtons?e.renderSlot(y.$slots,"last-button",{key:1},()=>[e.createElementVNode("button",{disabled:_.value,class:e.normalizeClass(E(c.value)),onClick:d}," Last ",10,Cd)]):e.createCommentVNode("",!0),e.renderSlot(y.$slots,"end")],2)]))}}),vd={default:"bg-blue-600 dark:bg-blue-600",blue:"bg-blue-600 dark:bg-blue-600",dark:"bg-gray-600 dark:bg-gray-300",green:"bg-green-600 dark:bg-green-500",red:"bg-red-600 dark:bg-red-500",yellow:"bg-yellow-400",indigo:"bg-indigo-600 dark:bg-indigo-500",purple:"bg-purple-600 dark:bg-purple-500"},Sd={default:"",blue:"text-blue-700 dark:text-blue-500",dark:"dark:text-white",green:"text-green-700 dark:text-green-500",red:"text-red-700 dark:text-red-500",yellow:"text-yellow-700 dark:text-yellow-500",indigo:"text-indigo-700 dark:text-indigo-500",purple:"text-purple-700 dark:text-purple-500"},Er={sm:"h-1.5 text-xs leading-none",md:"h-2.5 text-xs leading-none",lg:"h-4 text-sm leading-none",xl:"h-6 text-base leading-tight"};function Bd(t){const r=e.computed(()=>V(vd[t.color.value],Er[t.size.value])),o=e.computed(()=>V(Er[t.size.value])),n=e.computed(()=>V(Sd[t.color.value]));return{innerClasses:r,outerClasses:o,outsideLabelClasses:n}}const Ed={key:0,class:"flex justify-between mb-1"},Td=e.defineComponent({__name:"FwbProgress",props:{color:{default:"default"},label:{default:""},labelPosition:{default:"none"},labelProgress:{type:Boolean,default:!1},progress:{default:0},size:{default:"md"}},setup(t){const r=t,{innerClasses:o,outerClasses:n,outsideLabelClasses:a}=Bd(e.toRefs(r));return(s,l)=>(e.openBlock(),e.createElementBlock("div",null,[s.label||s.labelProgress&&s.labelPosition==="outside"?(e.openBlock(),e.createElementBlock("div",Ed,[e.createElementVNode("span",{class:e.normalizeClass([e.unref(a),"text-base font-medium"])},e.toDisplayString(s.label),3),s.labelProgress&&s.labelPosition==="outside"?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass([e.unref(a),"text-sm font-medium"])},e.toDisplayString(s.progress)+"%",3)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass([e.unref(n),"w-full bg-gray-200 rounded-full dark:bg-gray-700"])},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(o),"rounded-full font-medium text-blue-100 text-center p-0.5"]),style:e.normalizeStyle({width:s.progress+"%"})},[s.labelProgress&&s.labelPosition==="inside"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(s.progress)+"% ",1)],64)):e.createCommentVNode("",!0)],6)],2)]))}}),zd={sm:"w-5 h-5",md:"w-7 h-7",lg:"w-10 h-10"};function Nd(t){return{sizeClasses:e.computed(()=>V(zd[t.size.value]??""))}}const Vd={class:"flex items-center"},Pd=[e.createElementVNode("path",{d:"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"},null,-1)],Fd=[e.createElementVNode("path",{d:"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"},null,-1)],Ad=e.createElementVNode("span",{class:"w-1 h-1 mx-1.5 bg-gray-500 rounded-full dark:bg-gray-400"},null,-1),Id=["href"],Md=e.defineComponent({__name:"FwbRating",props:{rating:{default:3},reviewLink:{default:""},reviewText:{default:""},scale:{default:5},size:{default:"md"}},setup(t){const r=t,o=e.computed(()=>Math.floor(r.rating)),n=e.computed(()=>r.scale-o.value),{sizeClasses:a}=Nd(e.toRefs(r));return(s,l)=>(e.openBlock(),e.createElementBlock("div",Vd,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,i=>(e.openBlock(),e.createElementBlock("svg",{key:i,class:e.normalizeClass([e.unref(a),"text-yellow-400"]),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},Pd,2))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,i=>(e.openBlock(),e.createElementBlock("svg",{key:i,class:e.normalizeClass([e.unref(a),"text-gray-300 dark:text-gray-500"]),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},Fd,2))),128)),e.renderSlot(s.$slots,"besideText"),s.reviewText&&s.reviewLink?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[Ad,e.createElementVNode("a",{href:s.reviewLink,class:"text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white"},e.toDisplayString(s.reviewText),9,Id)],64)):e.createCommentVNode("",!0)]))}}),Od={class:"h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800"},Ld={class:"space-y-2 font-medium"},Dd=e.defineComponent({inheritAttrs:!1,__name:"FwbSidebar",setup(t){const r=e.useAttrs(),o=S("absolute top-0 left-0 z-40 w-64 h-screen transition-transform",r.class);return(n,a)=>(e.openBlock(),e.createElementBlock("aside",e.mergeProps(n.$attrs,{class:e.unref(o),"aria-label":"Sidebar"}),[e.createElementVNode("div",Od,[e.createElementVNode("div",Ld,[e.renderSlot(n.$slots,"default")])])],16))}}),Rd={class:"p-4 mt-6 rounded-lg bg-blue-50 dark:bg-blue-900",role:"alert"},jd={class:"flex items-center mb-3"},Hd={class:"bg-orange-100 text-orange-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900"},Gd=[e.createElementVNode("span",{class:"sr-only"},"Close",-1),e.createElementVNode("svg",{class:"w-2.5 h-2.5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 14 14"},[e.createElementVNode("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"})],-1)],Wd=e.defineComponent({__name:"FwbSidebarCta",props:{label:{default:void 0}},emits:["close"],setup(t,{emit:r}){const o=r;function n(){o("close")}return(a,s)=>(e.openBlock(),e.createElementBlock("div",Rd,[e.createElementVNode("div",jd,[e.createElementVNode("span",Hd,e.toDisplayString(a.label),1),e.createElementVNode("button",{type:"button",class:"ml-auto -mx-1.5 -my-1.5 bg-blue-50 inline-flex justify-center items-center w-6 h-6 text-blue-900 rounded-lg focus:ring-2 focus:ring-blue-400 p-1 hover:bg-blue-200 h-6 w-6 dark:bg-blue-900 dark:text-blue-400 dark:hover:bg-blue-800","aria-label":"Close",onClick:n},Gd)]),e.renderSlot(a.$slots,"default")]))}}),qd={class:"overflow-hidden"},Ud=e.createElementVNode("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 21"},[e.createElementVNode("path",{d:"M15 12a1 1 0 0 0 .962-.726l2-7A1 1 0 0 0 17 3H3.77L3.175.745A1 1 0 0 0 2.208 0H1a1 1 0 0 0 0 2h.438l.6 2.255v.019l2 7 .746 2.986A3 3 0 1 0 9 17a2.966 2.966 0 0 0-.184-1h2.368c-.118.32-.18.659-.184 1a3 3 0 1 0 3-3H6.78l-.5-2H15Z"})],-1),Yd={class:"flex-1 ml-3 text-left whitespace-nowrap"},Jd=[e.createElementVNode("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m1 1 4 4 4-4"},null,-1)],Kd={class:"py-2 space-y-2 z-0 overflow-hidden"},Qd={key:0},Xd=e.defineComponent({__name:"FwbSidebarDropdownItem",setup(t){const r=e.ref(!1);function o(){r.value=!r.value}return(n,a)=>(e.openBlock(),e.createElementBlock("div",qd,[e.createElementVNode("button",{type:"button",class:"flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 z-10","aria-controls":"dropdown-content",onClick:o},[e.renderSlot(n.$slots,"icon",{},()=>[Ud]),e.createElementVNode("span",Yd,[e.renderSlot(n.$slots,"trigger")]),e.renderSlot(n.$slots,"arrow-icon",{toggleDropdown:o},()=>[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["w-3 h-3 transition-all duration-300",r.value&&"rotate-180"]),"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 10 6"},Jd,2))])]),e.createElementVNode("div",Kd,[e.createVNode(e.Transition,{duration:150,"enter-from-class":"-translate-y-full","enter-to-class":"translate-y-0","enter-active-class":"transition duration-400 ease-out","leave-active-class":"transition duration-400 ease-in","leave-from-class":"translate-y-0","leave-to-class":"-translate-y-full"},{default:e.withCtx(()=>[r.value?(e.openBlock(),e.createElementBlock("div",Qd,[e.renderSlot(n.$slots,"default")])):e.createCommentVNode("",!0)]),_:3})])]))}}),Zd=e.defineComponent({__name:"FwbSidebarItem",props:{link:{default:"/"},tag:{default:"router-link"}},setup(t){const r=t,o=r.tag==="a"?"a":e.resolveComponent(r.tag),n=r.tag==="a"?"href":"to";return(a,s)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(o)),e.normalizeProps({[e.unref(n)||""]:a.link,class:"flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"}),{default:e.withCtx(()=>[e.renderSlot(a.$slots,"icon"),e.createElementVNode("span",{class:e.normalizeClass(["flex-1 whitespace-nowrap",a.$slots.icon&&"ml-3"])},[e.renderSlot(a.$slots,"default")],2),e.renderSlot(a.$slots,"suffix")]),_:3},16))}}),ec="pt-4 mt-4 space-y-2 font-medium border-t border-gray-200 dark:border-gray-700",tc=e.defineComponent({__name:"FwbSidebarItemGroup",props:{border:{type:Boolean,default:!1}},setup(t){return(r,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(r.border&&ec)},[e.renderSlot(r.$slots,"default")],2))}}),rc=["src","alt"],oc={class:"self-center text-xl font-semibold whitespace-nowrap dark:text-white"},nc=e.defineComponent({__name:"FwbSidebarLogo",props:{name:{default:""},link:{default:"/"},logo:{default:""},alt:{default:""},tag:{default:"router-link"}},setup(t){const r=t,o=r.tag==="a"?"a":e.resolveComponent(r.tag),n=r.tag==="a"?"href":"to";return(a,s)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(o)),e.normalizeProps({[e.unref(n)||""]:a.link,class:"flex items-center mb-5 pl-2.5"}),{default:e.withCtx(()=>[e.createElementVNode("img",{src:a.logo,class:"h-6 mr-3 sm:h-7",alt:a.alt??a.name},null,8,rc),e.createElementVNode("span",oc,e.toDisplayString(a.name),1)]),_:1},16))}}),ac={class:"relative overflow-x-auto shadow-md sm:rounded-lg"},sc={class:"w-full text-sm text-left text-gray-500 dark:text-gray-400"},lc=e.defineComponent({__name:"FwbTable",props:{striped:{type:Boolean,default:!1},stripedColumns:{type:Boolean,default:!1},hoverable:{type:Boolean,default:!1}},setup(t){const r=t;return e.provide("hoverable",r.hoverable),e.provide("striped",r.striped),e.provide("stripedColumns",r.stripedColumns),(o,n)=>(e.openBlock(),e.createElementBlock("div",ac,[e.createElementVNode("table",sc,[e.renderSlot(o.$slots,"default")])]))}}),ic={};function dc(t,r){return e.openBlock(),e.createElementBlock("tbody",null,[e.renderSlot(t.$slots,"default")])}const cc=q(ic,[["render",dc]]),pc="px-6 py-4 first:font-medium first:text-gray-900 first:dark:text-white first:whitespace-nowrap last:text-right",uc="even:bg-gray-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50";function fc(){const t=e.inject("stripedColumns");return{tableCellClasses:e.computed(()=>V(pc,{[uc]:t}))}}const mc=e.defineComponent({__name:"FwbTableCell",setup(t){const{tableCellClasses:r}=fc();return(o,n)=>(e.openBlock(),e.createElementBlock("td",{class:e.normalizeClass(e.unref(r))},[e.renderSlot(o.$slots,"default")],2))}}),gc={},hc={class:"text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"};function bc(t,r){return e.openBlock(),e.createElementBlock("thead",hc,[e.createElementVNode("tr",null,[e.renderSlot(t.$slots,"default")])])}const yc=q(gc,[["render",bc]]),wc="px-6 py-3 text-xs uppercase",kc="even:bg-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50";function _c(){const t=e.inject("stripedColumns");return{tableHeadCellClasses:e.computed(()=>V(wc,{[kc]:t}))}}const xc=e.defineComponent({__name:"FwbTableHeadCell",setup(t){const{tableHeadCellClasses:r}=_c();return(o,n)=>(e.openBlock(),e.createElementBlock("th",{scope:"col",class:e.normalizeClass(e.unref(r))},[e.renderSlot(o.$slots,"default")],2))}}),Cc="bg-white dark:bg-gray-800 [&:not(:last-child)]:border-b [&:not(:last-child)]:dark:border-gray-700",$c="odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700",vc="hover:bg-gray-50 dark:hover:bg-gray-600";function Sc(){const t=e.inject("striped"),r=e.inject("hoverable");return{tableRowClasses:e.computed(()=>V(Cc,{[vc]:r,[$c]:t}))}}const Bc=e.defineComponent({__name:"FwbTableRow",setup(t){const{tableRowClasses:r}=Sc();return(o,n)=>(e.openBlock(),e.createElementBlock("tr",{class:e.normalizeClass(e.unref(r))},[e.renderSlot(o.$slots,"default")],2))}}),Tr="flowbite-tab-activate-func-injection",zr="flowbite-tab-active-name-injection",Nr="flowbite-tab-style-injection",Vr="flowbite-tab-visibility-directive-injection",Ec={key:0},Tc={key:1},zc=e.defineComponent({__FLOWBITE_TAB__:!0,__name:"FwbTab",props:{name:{type:String,required:!0},title:{type:String,default:""},disabled:{type:Boolean,default:!1}},setup(t){const r=e.inject(zr,""),o=e.inject(Vr,"if");return(n,a)=>e.unref(o)==="if"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.unref(r)===t.name?(e.openBlock(),e.createElementBlock("div",Ec,[e.renderSlot(n.$slots,"default")])):e.createCommentVNode("",!0)],64)):e.unref(o)==="show"?e.withDirectives((e.openBlock(),e.createElementBlock("div",Tc,[e.renderSlot(n.$slots,"default")],512)),[[e.vShow,e.unref(r)===t.name]]):e.createCommentVNode("",!0)}});function Nc(t){const r=e.computed(()=>S("flex flex-wrap font-medium text-center text-gray-500 dark:text-gray-400 text-sm",t.variant==="underline"&&"-mb-px",t.variant==="default"&&"border-b border-gray-200 dark:border-gray-700"));return{divClasses:e.computed(()=>t.variant==="underline"?"border-b border-gray-200 dark:border-gray-700 font-medium text-center text-gray-500 dark:text-gray-400 text-sm":""),ulClasses:r}}const Pr="flowbite-themable-injection-key",he={blue:{background:"bg-blue-700 dark:bg-blue-600",disabled:"",hover:"hover:bg-blue-800 dark:hover:bg-blue-700",text:"text-blue-600 dark:text-blue-500",border:"border-blue-600 dark:border-blue-500",focus:"focus:ring-blue-300 dark:focus:ring-blue-800"},green:{background:"bg-green-700 dark:bg-green-600",disabled:"",hover:"hover:bg-green-800 dark:hover:bg-green-700",text:"text-green-600 dark:text-green-500",border:"border-green-600 dark:border-green-500",focus:"focus:ring-green-300 dark:focus:ring-green-800"},pink:{background:"bg-pink-700 dark:bg-pink-600",disabled:"",hover:"hover:bg-pink-800 dark:hover:bg-pink-700",text:"text-pink-600 dark:text-pink-500",border:"border-pink-600 dark:border-pink-500",focus:"focus:ring-pink-300 dark:focus:ring-pink-900"},purple:{background:"bg-purple-700 dark:bg-purple-600",disabled:"",hover:"hover:bg-purple-800 dark:hover:bg-purple-700",text:"text-purple-600 dark:text-purple-500",border:"border-purple-600 dark:border-purple-500",focus:"focus:ring-purple-300 dark:focus:ring-purple-900"},red:{background:"bg-red-700 dark:bg-red-600",disabled:"",hover:"hover:bg-red-800 dark:hover:bg-red-700",text:"text-red-600 dark:text-red-500",border:"border-red-600 dark:border-red-500",focus:"focus:ring-red-300 dark:focus:ring-red-900"}};function Fr(t){const r=e.inject(Pr,e.ref(null)),o=e.computed(()=>t||r.value),n=e.computed(()=>!!r?.value),a=e.computed(()=>o.value?he[o.value].background:""),s=e.computed(()=>o.value?he[o.value].border:""),l=e.computed(()=>r?.value||void 0),i=e.computed(()=>o.value?he[o.value].disabled:""),d=e.computed(()=>o.value?he[o.value].focus:""),c=e.computed(()=>o.value?he[o.value].hover:""),p=e.computed(()=>o.value?he[o.value].text:"");return{backgroundClasses:a,borderClasses:s,color:l,disabledClasses:i,focusClasses:d,hoverClasses:c,isActive:n,textClasses:p}}const Vc={default:"cursor-pointer inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300",active:"cursor-pointer inline-block p-4 text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500",disabled:"inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500"},Pc={default:"cursor-pointer inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300",active:"cursor-pointer inline-block p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500",disabled:"inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500"},Fc={default:"cursor-pointer inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white",active:"cursor-pointer inline-block py-3 px-4 text-white bg-blue-600 rounded-lg active",disabled:"inline-block py-3 px-4 text-gray-400 cursor-not-allowed dark:text-gray-500"};function Ac(t){const r=Fr();return{tabClasses:e.computed(()=>{const n=r.isActive.value,a=t.active.value?"active":t.disabled.value?"disabled":"default";return t.variant==="default"?D(Vc[a],(n&&a)==="active"?r.textClasses.value:""):t.variant==="underline"?D(Pc[a],(n&&a)==="active"?[r.borderClasses.value,r.textClasses.value]:""):t.variant==="pills"?D(Fc[a],(n&&a)==="active"?[r.backgroundClasses.value,"text-white"]:""):""})}}const Ic=e.defineComponent({__name:"FwbTabPane",props:{name:{type:String,required:!0},title:{type:String,default:""},disabled:{type:Boolean,default:!1},active:{type:Boolean,default:!1}},setup(t){const r=t,o=e.inject(Nr);o||console.warn("you can't use Tab outside of Tabs component. No tab style injection found");const n=e.inject(Tr);n||console.warn("you can't use Tab outside of Tabs component. No tab activate injection found");const a=()=>{if(!r.disabled){if(!n)return console.warn("no onActivate");n(r.name)}},{tabClasses:s}=Ac({active:e.toRef(r,"active"),disabled:e.toRef(r,"disabled"),variant:o});return(l,i)=>(e.openBlock(),e.createElementBlock("li",null,[e.createElementVNode("div",{class:e.normalizeClass(e.unref(s)),onClick:a},e.toDisplayString(t.title),3)]))}}),Mc=e.defineComponent({inheritAttrs:!1,__name:"FwbTabs",props:{variant:{default:"default"},modelValue:{default:""},directive:{default:"if"}},emits:["update:modelValue","click:pane"],setup(t,{emit:r}){const o=t,n=r,{ulClasses:a,divClasses:s}=Nc(o);e.provide(Nr,o.variant);const i=e.useSlots().default,d=e.computed(()=>i?Ye(i()).filter(g=>g.type.__FLOWBITE_TAB__):[]),c=e.computed({get:()=>o.modelValue,set:g=>n("update:modelValue",g)});e.provide(zr,c),e.provide(Vr,e.toRef(o,"directive"));const p=g=>{c.value=g},f=()=>{n("click:pane")};return e.provide(Tr,p),(g,u)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{class:e.normalizeClass(e.unref(s))},[e.createElementVNode("ul",{class:e.normalizeClass(e.unref(a))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,(m,b)=>(e.openBlock(),e.createBlock(Ic,{key:b,active:c.value===m.props?.name,disabled:m.props?.disabled,name:m.props?.name,title:m.props?.title,onClick:f},null,8,["active","disabled","name","title"]))),128))],2)],2),e.createElementVNode("div",e.normalizeProps(e.guardReactiveProps(g.$attrs)),[e.renderSlot(g.$slots,"default")],16)],64))}}),Oc="relative border-gray-200 dark:border-gray-700",Lc="border-l",Dc="flex",Rc=e.defineComponent({__name:"FwbTimeline",props:{horizontal:{type:Boolean,default:!1}},setup(t){const r=t;e.provide("horizontal",r.horizontal);const o=e.computed(()=>V(Oc,r.horizontal?Dc:Lc));return(n,a)=>(e.openBlock(),e.createElementBlock("ol",e.mergeProps({class:o.value},n.$attrs),[e.renderSlot(n.$slots,"default")],16))}}),jc={},Hc={class:"font-normal mb-4 text-base text-gray-500 dark:text-gray-400"};function Gc(t,r){return e.openBlock(),e.createElementBlock("p",Hc,[e.renderSlot(t.$slots,"default")])}const Wc=q(jc,[["render",Gc]]),qc=e.defineComponent({__name:"FwbTimelineContent",setup(t){const r=e.inject("horizontal"),o=e.computed(()=>V(r?"mt-3 sm:pr-8":""));return(n,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(o.value)},[e.renderSlot(n.$slots,"default")],2))}}),Uc="mb-10",Yc="mb-6 sm:mb-0 relative",Jc="ml-6",Kc=e.defineComponent({__name:"FwbTimelineItem",setup(t){const r=e.inject("horizontal"),o=e.computed(()=>V(Uc,r?Yc:Jc));return(n,a)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(o.value)},[e.renderSlot(n.$slots,"default")],2))}}),Qc="h-0.5 w-full bg-gray-200 dark:bg-gray-700 sm:flex",Xc=e.defineComponent({__name:"FwbTimelinePoint",setup(t){const r=e.useSlots(),o=e.computed(()=>!!r.default),n=e.inject("horizontal"),a=e.computed(()=>V(n?"flex items-center":"")),s=e.computed(()=>V(Qc,{"sm:hidden hidden":!n})),l=e.computed(()=>{const i="absolute rounded-full -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700",d="mt-1.5 w-3 h-3 bg-gray-200",c="mt-1.5 w-6 h-6 -left-3 flex justify-center items-center bg-blue-200 ring-8 ring-white dark:ring-gray-900",p="w-3 h-3 bg-gray-200",f="w-6 h-6 -left-3 flex justify-center items-center bg-blue-200 ring-8 ring-white dark:ring-gray-900",g=!n&&!o.value,u=!n&&o.value,m=n&&!o.value,b=n&&o.value;return V(i,{[d]:g,[c]:u,[p]:m,[f]:b})});return(i,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(a.value)},[e.createElementVNode("div",{class:e.normalizeClass(l.value)},[e.renderSlot(i.$slots,"default")],2),e.createElementVNode("div",{class:e.normalizeClass(s.value)},null,2)],2))}}),Zc={},e0={class:"font-normal leading-none mb-1 text-gray-400 dark:text-gray-500 text-sm"};function t0(t,r){return e.openBlock(),e.createElementBlock("time",e0,[e.renderSlot(t.$slots,"default")])}const r0=q(Zc,[["render",t0]]),o0={},n0={class:"font-semibold text-gray-900 dark:text-white text-lg"};function a0(t,r){return e.openBlock(),e.createElementBlock("h3",n0,[e.renderSlot(t.$slots,"default")])}const s0=q(o0,[["render",a0]]),l0={danger:"text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200",empty:"",success:"text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200",warning:"text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200"},i0={center:"items-center",end:"items-end",start:"items-start"},Ar="flex w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800",Ir="text-sm font-normal";function d0(t){const r=e.computed(()=>l0[t.type.value]),o=e.computed(()=>{const a=i0[t.alignment.value];return t.divide.value?D(Ar,"dark:divide-gray-700 divide-x divide-gray-200",a):D(Ar,a)}),n=e.computed(()=>t.type.value!=="empty"&&t.divide.value?D(Ir,"pl-3"):Ir);return{typeClasses:r,wrapperClasses:o,contentClasses:n}}function c0(t){const{backgroundClasses:r,borderClasses:o,disabledClasses:n,focusClasses:a,hoverClasses:s,isActive:l,textClasses:i}=Fr(t.theme?.value);return{classes:e.computed(()=>{if(!l.value)return"";const c=[];return t.apply.value.includes("text")&&c.push(i.value),t.apply.value.includes("border")&&c.push(o.value),t.apply.value.includes("background")&&c.push(r.value),t.apply.value.includes("hover")&&c.push(s.value),t.apply.value.includes("disabled")&&c.push(n.value),t.apply.value.includes("focus")&&c.push(a.value),c.join(" ")})}}const Mr=e.defineComponent({__name:"FlowbiteThemableChild",props:{apply:{type:Array,required:!0},tag:{type:String,default:"div"},theme:{type:String,default:void 0}},setup(t){const r=e.useAttrs(),o=t,{classes:n}=c0(e.toRefs(o)),a=e.computed(()=>r.class||"");return(s,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.tag),{class:e.normalizeClass(e.unref(D)(a.value,e.unref(n)))},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},8,["class"]))}}),p0={key:1,"aria-hidden":"true",class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},u0=[e.createElementVNode("path",{"clip-rule":"evenodd",d:"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z","fill-rule":"evenodd"},null,-1)],f0={key:2,"aria-hidden":"true",class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},m0=[e.createElementVNode("path",{"clip-rule":"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z","fill-rule":"evenodd"},null,-1)],g0={key:3,"aria-hidden":"true",class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},h0=[e.createElementVNode("path",{"clip-rule":"evenodd",d:"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z","fill-rule":"evenodd"},null,-1)],b0=[e.createElementVNode("span",{class:"sr-only"},"Close",-1),e.createElementVNode("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{"clip-rule":"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1)],vt=e.defineComponent({__name:"FwbToast",props:{type:{type:String,default:"empty"},alignment:{type:String,default:"center"},closable:{type:Boolean,default:!1},divide:{type:Boolean,default:!1}},emits:["close"],setup(t,{emit:r}){const o=t,n=e.ref(!0),a=r,{typeClasses:s,wrapperClasses:l,contentClasses:i}=d0(e.toRefs(o)),d=()=>{a("close"),n.value=!1};return(c,p)=>n.value?(e.openBlock(),e.createElementBlock("div",{key:0,id:"toast-default",class:e.normalizeClass(e.unref(l)),role:"alert"},[t.type!=="empty"||c.$slots.icon?(e.openBlock(),e.createBlock(Mr,{key:0,apply:["background","text"],class:e.normalizeClass(["inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg",e.unref(s)])},{default:e.withCtx(()=>[c.$slots.icon?e.renderSlot(c.$slots,"icon",{key:0,class:e.normalizeClass({"ml-3":t.type!=="empty"})}):t.type==="success"?(e.openBlock(),e.createElementBlock("svg",p0,u0)):t.type==="danger"?(e.openBlock(),e.createElementBlock("svg",f0,m0)):t.type==="warning"?(e.openBlock(),e.createElementBlock("svg",g0,h0)):e.createCommentVNode("",!0)]),_:3},8,["class"])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass([e.unref(i),{"ml-3":c.$slots.icon||t.type!=="empty"}])},[e.renderSlot(c.$slots,"default")],2),t.closable?(e.openBlock(),e.createElementBlock("button",{key:1,"aria-label":"Close",class:"border-none ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700",type:"button",onClick:d},b0)):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0)}}),Or="flowbite-toast-injection-key",y0=e.defineComponent({components:{FwbToast:vt},props:{transition:{type:String,default:"slide-left"}},setup(){const t=e.ref([]),r=(s,l)=>{Oa(()=>a(s),l)},o=s=>{const l=parseInt((new Date().getTime()*Math.random()).toString()).toString();return t.value.push({id:l,...s}),s.time>0&&r(l,s.time),l},n=()=>{if(t.value.length===0)return"";const s=t.value[t.value.length-1].id;return t.value.pop(),s},a=s=>{const l=t.value.findIndex(i=>i.id===s);return l>=0&&t.value.splice(l,1),l>=0};return e.provide(Or,{add:o,pop:n,remove:a}),{toasts:t,removeToast:a}},render(){const{$props:t,$slots:r,toasts:o,removeToast:n}=this;return e.h("div",{},[r.default?r.default():null,e.h(e.TransitionGroup,{name:t.transition,tag:"div",class:"xl:w-1/6 md:w-1/4 sm:w-1/4 fixed top-3 right-3 flex flex-col gap-2 z-50"},{default:()=>o.map(a=>a.component?e.h(a.component,{key:a.id,onClose:()=>n(a.id),...a.componentProps?a.componentProps:{}},()=>a.text):e.h(vt,{closable:!0,type:a.type,key:a.id,onClose:()=>n(a.id)},()=>a.text))})])}}),hf="",w0=q(y0,[["__scopeId","data-v-aba06225"]]),k0=["top","right","bottom","left"],Lr=["start","end"],Dr=k0.reduce((t,r)=>t.concat(r,r+"-"+Lr[0],r+"-"+Lr[1]),[]),Ee=Math.min,ce=Math.max,_0={left:"right",right:"left",bottom:"top",top:"bottom"},x0={start:"end",end:"start"};function St(t,r,o){return ce(t,Ee(r,o))}function pe(t,r){return typeof t=="function"?t(r):t}function U(t){return t.split("-")[0]}function G(t){return t.split("-")[1]}function Rr(t){return t==="x"?"y":"x"}function Bt(t){return t==="y"?"height":"width"}function Te(t){return["top","bottom"].includes(U(t))?"y":"x"}function Et(t){return Rr(Te(t))}function jr(t,r,o){o===void 0&&(o=!1);const n=G(t),a=Et(t),s=Bt(a);let l=a==="x"?n===(o?"end":"start")?"right":"left":n==="start"?"bottom":"top";return r.reference[s]>r.floating[s]&&(l=Qe(l)),[l,Qe(l)]}function C0(t){const r=Qe(t);return[Ke(t),r,Ke(r)]}function Ke(t){return t.replace(/start|end/g,r=>x0[r])}function $0(t,r,o){const n=["left","right"],a=["right","left"],s=["top","bottom"],l=["bottom","top"];switch(t){case"top":case"bottom":return o?r?a:n:r?n:a;case"left":case"right":return r?s:l;default:return[]}}function v0(t,r,o,n){const a=G(t);let s=$0(U(t),o==="start",n);return a&&(s=s.map(l=>l+"-"+a),r&&(s=s.concat(s.map(Ke)))),s}function Qe(t){return t.replace(/left|right|bottom|top/g,r=>_0[r])}function S0(t){return{top:0,right:0,bottom:0,left:0,...t}}function Hr(t){return typeof t!="number"?S0(t):{top:t,right:t,bottom:t,left:t}}function ze(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}function Gr(t,r,o){let{reference:n,floating:a}=t;const s=Te(r),l=Et(r),i=Bt(l),d=U(r),c=s==="y",p=n.x+n.width/2-a.width/2,f=n.y+n.height/2-a.height/2,g=n[i]/2-a[i]/2;let u;switch(d){case"top":u={x:p,y:n.y-a.height};break;case"bottom":u={x:p,y:n.y+n.height};break;case"right":u={x:n.x+n.width,y:f};break;case"left":u={x:n.x-a.width,y:f};break;default:u={x:n.x,y:n.y}}switch(G(r)){case"start":u[l]-=g*(o&&c?-1:1);break;case"end":u[l]+=g*(o&&c?-1:1);break}return u}const B0=async(t,r,o)=>{const{placement:n="bottom",strategy:a="absolute",middleware:s=[],platform:l}=o,i=s.filter(Boolean),d=await(l.isRTL==null?void 0:l.isRTL(r));let c=await l.getElementRects({reference:t,floating:r,strategy:a}),{x:p,y:f}=Gr(c,n,d),g=n,u={},m=0;for(let b=0;b({name:"arrow",options:t,async fn(r){const{x:o,y:n,placement:a,rects:s,platform:l,elements:i,middlewareData:d}=r,{element:c,padding:p=0}=pe(t,r)||{};if(c==null)return{};const f=Hr(p),g={x:o,y:n},u=Et(a),m=Bt(u),b=await l.getDimensions(c),w=u==="y",k=w?"top":"left",_=w?"bottom":"right",$=w?"clientHeight":"clientWidth",E=s.reference[m]+s.reference[u]-g[u]-s.floating[m],y=g[u]-s.reference[u],T=await(l.getOffsetParent==null?void 0:l.getOffsetParent(c));let x=T?T[$]:0;(!x||!await(l.isElement==null?void 0:l.isElement(T)))&&(x=i.floating[$]||s.floating[m]);const z=E/2-y/2,P=x/2-b[m]/2-1,F=Ee(f[k],P),I=Ee(f[_],P),C=F,K=x-b[m]-I,A=x/2-b[m]/2+z,O=St(C,A,K),M=!d.arrow&&G(a)!=null&&A!==O&&s.reference[m]/2-(AG(a)===t),...o.filter(a=>G(a)!==t)]:o.filter(a=>U(a)===a)).filter(a=>t?G(a)===t||(r?Ke(a)!==a:!1):!0)}const z0=function(t){return t===void 0&&(t={}),{name:"autoPlacement",options:t,async fn(r){var o,n,a;const{rects:s,middlewareData:l,placement:i,platform:d,elements:c}=r,{crossAxis:p=!1,alignment:f,allowedPlacements:g=Dr,autoAlignment:u=!0,...m}=pe(t,r),b=f!==void 0||g===Dr?T0(f||null,u,g):g,w=await Xe(r,m),k=((o=l.autoPlacement)==null?void 0:o.index)||0,_=b[k];if(_==null)return{};const $=jr(_,s,await(d.isRTL==null?void 0:d.isRTL(c.floating)));if(i!==_)return{reset:{placement:b[0]}};const E=[w[U(_)],w[$[0]],w[$[1]]],y=[...((n=l.autoPlacement)==null?void 0:n.overflows)||[],{placement:_,overflows:E}],T=b[k+1];if(T)return{data:{index:k+1,overflows:y},reset:{placement:T}};const x=y.map(F=>{const I=G(F.placement);return[F.placement,I&&p?F.overflows.slice(0,2).reduce((C,K)=>C+K,0):F.overflows[0],F.overflows]}).sort((F,I)=>F[1]-I[1]),P=((a=x.filter(F=>F[2].slice(0,G(F[0])?2:3).every(I=>I<=0))[0])==null?void 0:a[0])||x[0][0];return P!==i?{data:{index:k+1,overflows:y},reset:{placement:P}}:{}}}},N0=function(t){return t===void 0&&(t={}),{name:"flip",options:t,async fn(r){var o,n;const{placement:a,middlewareData:s,rects:l,initialPlacement:i,platform:d,elements:c}=r,{mainAxis:p=!0,crossAxis:f=!0,fallbackPlacements:g,fallbackStrategy:u="bestFit",fallbackAxisSideDirection:m="none",flipAlignment:b=!0,...w}=pe(t,r);if((o=s.arrow)!=null&&o.alignmentOffset)return{};const k=U(a),_=U(i)===i,$=await(d.isRTL==null?void 0:d.isRTL(c.floating)),E=g||(_||!b?[Qe(i)]:C0(i));!g&&m!=="none"&&E.push(...v0(i,b,m,$));const y=[i,...E],T=await Xe(r,w),x=[];let z=((n=s.flip)==null?void 0:n.overflows)||[];if(p&&x.push(T[k]),f){const C=jr(a,l,$);x.push(T[C[0]],T[C[1]])}if(z=[...z,{placement:a,overflows:x}],!x.every(C=>C<=0)){var P,F;const C=(((P=s.flip)==null?void 0:P.index)||0)+1,K=y[C];if(K)return{data:{index:C,overflows:z},reset:{placement:K}};let A=(F=z.filter(O=>O.overflows[0]<=0).sort((O,M)=>O.overflows[1]-M.overflows[1])[0])==null?void 0:F.placement;if(!A)switch(u){case"bestFit":{var I;const O=(I=z.map(M=>[M.placement,M.overflows.filter(j=>j>0).reduce((j,Ie)=>j+Ie,0)]).sort((M,j)=>M[1]-j[1])[0])==null?void 0:I[0];O&&(A=O);break}case"initialPlacement":A=i;break}if(a!==A)return{reset:{placement:A}}}return{}}}};async function V0(t,r){const{placement:o,platform:n,elements:a}=t,s=await(n.isRTL==null?void 0:n.isRTL(a.floating)),l=U(o),i=G(o),d=Te(o)==="y",c=["left","top"].includes(l)?-1:1,p=s&&d?-1:1,f=pe(r,t);let{mainAxis:g,crossAxis:u,alignmentAxis:m}=typeof f=="number"?{mainAxis:f,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...f};return i&&typeof m=="number"&&(u=i==="end"?m*-1:m),d?{x:u*p,y:g*c}:{x:g*c,y:u*p}}const P0=function(t){return t===void 0&&(t=0),{name:"offset",options:t,async fn(r){var o,n;const{x:a,y:s,placement:l,middlewareData:i}=r,d=await V0(r,t);return l===((o=i.offset)==null?void 0:o.placement)&&(n=i.arrow)!=null&&n.alignmentOffset?{}:{x:a+d.x,y:s+d.y,data:{...d,placement:l}}}}},F0=function(t){return t===void 0&&(t={}),{name:"shift",options:t,async fn(r){const{x:o,y:n,placement:a}=r,{mainAxis:s=!0,crossAxis:l=!1,limiter:i={fn:w=>{let{x:k,y:_}=w;return{x:k,y:_}}},...d}=pe(t,r),c={x:o,y:n},p=await Xe(r,d),f=Te(U(a)),g=Rr(f);let u=c[g],m=c[f];if(s){const w=g==="y"?"top":"left",k=g==="y"?"bottom":"right",_=u+p[w],$=u-p[k];u=St(_,u,$)}if(l){const w=f==="y"?"top":"left",k=f==="y"?"bottom":"right",_=m+p[w],$=m-p[k];m=St(_,m,$)}const b=i.fn({...r,[g]:u,[f]:m});return{...b,data:{x:b.x-o,y:b.y-n}}}}},A0=function(t){return t===void 0&&(t={}),{name:"size",options:t,async fn(r){const{placement:o,rects:n,platform:a,elements:s}=r,{apply:l=()=>{},...i}=pe(t,r),d=await Xe(r,i),c=U(o),p=G(o),f=Te(o)==="y",{width:g,height:u}=n.floating;let m,b;c==="top"||c==="bottom"?(m=c,b=p===(await(a.isRTL==null?void 0:a.isRTL(s.floating))?"start":"end")?"left":"right"):(b=c,m=p==="end"?"top":"bottom");const w=u-d[m],k=g-d[b],_=!r.middlewareData.shift;let $=w,E=k;if(f){const T=g-d.left-d.right;E=p||_?Ee(k,T):T}else{const T=u-d.top-d.bottom;$=p||_?Ee(w,T):T}if(_&&!p){const T=ce(d.left,0),x=ce(d.right,0),z=ce(d.top,0),P=ce(d.bottom,0);f?E=g-2*(T!==0||x!==0?T+x:ce(d.left,d.right)):$=u-2*(z!==0||P!==0?z+P:ce(d.top,d.bottom))}await l({...r,availableWidth:E,availableHeight:$});const y=await a.getDimensions(s.floating);return g!==y.width||u!==y.height?{reset:{rects:!0}}:{}}}};function R(t){var r;return((r=t.ownerDocument)==null?void 0:r.defaultView)||window}function Y(t){return R(t).getComputedStyle(t)}const Wr=Math.min,Ne=Math.max,Ze=Math.round;function qr(t){const r=Y(t);let o=parseFloat(r.width),n=parseFloat(r.height);const a=t.offsetWidth,s=t.offsetHeight,l=Ze(o)!==a||Ze(n)!==s;return l&&(o=a,n=s),{width:o,height:n,fallback:l}}function ee(t){return Yr(t)?(t.nodeName||"").toLowerCase():""}let et;function Ur(){if(et)return et;const t=navigator.userAgentData;return t&&Array.isArray(t.brands)?(et=t.brands.map(r=>r.brand+"/"+r.version).join(" "),et):navigator.userAgent}function J(t){return t instanceof R(t).HTMLElement}function te(t){return t instanceof R(t).Element}function Yr(t){return t instanceof R(t).Node}function Jr(t){return typeof ShadowRoot>"u"?!1:t instanceof R(t).ShadowRoot||t instanceof ShadowRoot}function tt(t){const{overflow:r,overflowX:o,overflowY:n,display:a}=Y(t);return/auto|scroll|overlay|hidden|clip/.test(r+n+o)&&!["inline","contents"].includes(a)}function I0(t){return["table","td","th"].includes(ee(t))}function Tt(t){const r=/firefox/i.test(Ur()),o=Y(t),n=o.backdropFilter||o.WebkitBackdropFilter;return o.transform!=="none"||o.perspective!=="none"||!!n&&n!=="none"||r&&o.willChange==="filter"||r&&!!o.filter&&o.filter!=="none"||["transform","perspective"].some(a=>o.willChange.includes(a))||["paint","layout","strict","content"].some(a=>{const s=o.contain;return s!=null&&s.includes(a)})}function Kr(){return!/^((?!chrome|android).)*safari/i.test(Ur())}function zt(t){return["html","body","#document"].includes(ee(t))}function Qr(t){return te(t)?t:t.contextElement}const Xr={x:1,y:1};function be(t){const r=Qr(t);if(!J(r))return Xr;const o=r.getBoundingClientRect(),{width:n,height:a,fallback:s}=qr(r);let l=(s?Ze(o.width):o.width)/n,i=(s?Ze(o.height):o.height)/a;return l&&Number.isFinite(l)||(l=1),i&&Number.isFinite(i)||(i=1),{x:l,y:i}}function Ve(t,r,o,n){var a,s;r===void 0&&(r=!1),o===void 0&&(o=!1);const l=t.getBoundingClientRect(),i=Qr(t);let d=Xr;r&&(n?te(n)&&(d=be(n)):d=be(t));const c=i?R(i):window,p=!Kr()&&o;let f=(l.left+(p&&((a=c.visualViewport)==null?void 0:a.offsetLeft)||0))/d.x,g=(l.top+(p&&((s=c.visualViewport)==null?void 0:s.offsetTop)||0))/d.y,u=l.width/d.x,m=l.height/d.y;if(i){const b=R(i),w=n&&te(n)?R(n):n;let k=b.frameElement;for(;k&&n&&w!==b;){const _=be(k),$=k.getBoundingClientRect(),E=getComputedStyle(k);$.x+=(k.clientLeft+parseFloat(E.paddingLeft))*_.x,$.y+=(k.clientTop+parseFloat(E.paddingTop))*_.y,f*=_.x,g*=_.y,u*=_.x,m*=_.y,f+=$.x,g+=$.y,k=R(k).frameElement}}return{width:u,height:m,top:g,right:f+u,bottom:g+m,left:f,x:f,y:g}}function re(t){return((Yr(t)?t.ownerDocument:t.document)||window.document).documentElement}function rt(t){return te(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function Zr(t){return Ve(re(t)).left+rt(t).scrollLeft}function Pe(t){if(ee(t)==="html")return t;const r=t.assignedSlot||t.parentNode||Jr(t)&&t.host||re(t);return Jr(r)?r.host:r}function eo(t){const r=Pe(t);return zt(r)?r.ownerDocument.body:J(r)&&tt(r)?r:eo(r)}function ot(t,r){var o;r===void 0&&(r=[]);const n=eo(t),a=n===((o=t.ownerDocument)==null?void 0:o.body),s=R(n);return a?r.concat(s,s.visualViewport||[],tt(n)?n:[]):r.concat(n,ot(n))}function to(t,r,o){return r==="viewport"?ze(function(n,a){const s=R(n),l=re(n),i=s.visualViewport;let d=l.clientWidth,c=l.clientHeight,p=0,f=0;if(i){d=i.width,c=i.height;const g=Kr();(g||!g&&a==="fixed")&&(p=i.offsetLeft,f=i.offsetTop)}return{width:d,height:c,x:p,y:f}}(t,o)):te(r)?ze(function(n,a){const s=Ve(n,!0,a==="fixed"),l=s.top+n.clientTop,i=s.left+n.clientLeft,d=J(n)?be(n):{x:1,y:1};return{width:n.clientWidth*d.x,height:n.clientHeight*d.y,x:i*d.x,y:l*d.y}}(r,o)):ze(function(n){const a=re(n),s=rt(n),l=n.ownerDocument.body,i=Ne(a.scrollWidth,a.clientWidth,l.scrollWidth,l.clientWidth),d=Ne(a.scrollHeight,a.clientHeight,l.scrollHeight,l.clientHeight);let c=-s.scrollLeft+Zr(n);const p=-s.scrollTop;return Y(l).direction==="rtl"&&(c+=Ne(a.clientWidth,l.clientWidth)-i),{width:i,height:d,x:c,y:p}}(re(t)))}function ro(t){return J(t)&&Y(t).position!=="fixed"?t.offsetParent:null}function oo(t){const r=R(t);let o=ro(t);for(;o&&I0(o)&&Y(o).position==="static";)o=ro(o);return o&&(ee(o)==="html"||ee(o)==="body"&&Y(o).position==="static"&&!Tt(o))?r:o||function(n){let a=Pe(n);for(;J(a)&&!zt(a);){if(Tt(a))return a;a=Pe(a)}return null}(t)||r}function M0(t,r,o){const n=J(r),a=re(r),s=Ve(t,!0,o==="fixed",r);let l={scrollLeft:0,scrollTop:0};const i={x:0,y:0};if(n||!n&&o!=="fixed")if((ee(r)!=="body"||tt(a))&&(l=rt(r)),J(r)){const d=Ve(r,!0);i.x=d.x+r.clientLeft,i.y=d.y+r.clientTop}else a&&(i.x=Zr(a));return{x:s.left+l.scrollLeft-i.x,y:s.top+l.scrollTop-i.y,width:s.width,height:s.height}}const O0={getClippingRect:function(t){let{element:r,boundary:o,rootBoundary:n,strategy:a}=t;const s=o==="clippingAncestors"?function(c,p){const f=p.get(c);if(f)return f;let g=ot(c).filter(w=>te(w)&&ee(w)!=="body"),u=null;const m=Y(c).position==="fixed";let b=m?Pe(c):c;for(;te(b)&&!zt(b);){const w=Y(b),k=Tt(b);(m?k||u:k||w.position!=="static"||!u||!["absolute","fixed"].includes(u.position))?u=w:g=g.filter(_=>_!==b),b=Pe(b)}return p.set(c,g),g}(r,this._c):[].concat(o),l=[...s,n],i=l[0],d=l.reduce((c,p)=>{const f=to(r,p,a);return c.top=Ne(f.top,c.top),c.right=Wr(f.right,c.right),c.bottom=Wr(f.bottom,c.bottom),c.left=Ne(f.left,c.left),c},to(r,i,a));return{width:d.right-d.left,height:d.bottom-d.top,x:d.left,y:d.top}},convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{rect:r,offsetParent:o,strategy:n}=t;const a=J(o),s=re(o);if(o===s)return r;let l={scrollLeft:0,scrollTop:0},i={x:1,y:1};const d={x:0,y:0};if((a||!a&&n!=="fixed")&&((ee(o)!=="body"||tt(s))&&(l=rt(o)),J(o))){const c=Ve(o);i=be(o),d.x=c.x+o.clientLeft,d.y=c.y+o.clientTop}return{width:r.width*i.x,height:r.height*i.y,x:r.x*i.x-l.scrollLeft*i.x+d.x,y:r.y*i.y-l.scrollTop*i.y+d.y}},isElement:te,getDimensions:function(t){return J(t)?qr(t):t.getBoundingClientRect()},getOffsetParent:oo,getDocumentElement:re,getScale:be,async getElementRects(t){let{reference:r,floating:o,strategy:n}=t;const a=this.getOffsetParent||oo,s=this.getDimensions;return{reference:M0(r,await a(o),n),floating:{x:0,y:0,...await s(o)}}},getClientRects:t=>Array.from(t.getClientRects()),isRTL:t=>Y(t).direction==="rtl"},L0=(t,r,o)=>{const n=new Map,a={platform:O0,...o},s={...a.platform,_c:n};return B0(t,r,{...a,platform:s})},ue={disabled:!1,distance:5,skidding:0,container:"body",boundary:void 0,instantMove:!1,disposeTimeout:5e3,popperTriggers:[],strategy:"absolute",preventOverflow:!0,flip:!0,shift:!0,overflowPadding:0,arrowPadding:0,arrowOverflow:!0,themes:{tooltip:{placement:"top",triggers:["hover","focus","touch"],hideTriggers:t=>[...t,"click"],delay:{show:200,hide:0},handleResize:!1,html:!1,loadingContent:"..."},dropdown:{placement:"bottom",triggers:["click"],delay:0,handleResize:!0,autoHide:!0},menu:{$extend:"dropdown",triggers:["hover","focus"],popperTriggers:["hover","focus"],delay:{show:0,hide:400}}}};function Nt(t,r){let o=ue.themes[t]||{},n;do n=o[r],typeof n>"u"?o.$extend?o=ue.themes[o.$extend]||{}:(o=null,n=ue[r]):o=null;while(o);return n}function D0(t){const r=[t];let o=ue.themes[t]||{};do o.$extend&&!o.$resetCss?(r.push(o.$extend),o=ue.themes[o.$extend]||{}):o=null;while(o);return r.map(n=>`v-popper--theme-${n}`)}function no(t){const r=[t];let o=ue.themes[t]||{};do o.$extend?(r.push(o.$extend),o=ue.themes[o.$extend]||{}):o=null;while(o);return r}let ye=!1;if(typeof window<"u"){ye=!1;try{const t=Object.defineProperty({},"passive",{get(){ye=!0}});window.addEventListener("test",null,t)}catch{}}let ao=!1;typeof window<"u"&&typeof navigator<"u"&&(ao=/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream);const R0=["auto","top","bottom","left","right"].reduce((t,r)=>t.concat([r,`${r}-start`,`${r}-end`]),[]),so={hover:"mouseenter",focus:"focus",click:"click",touch:"touchstart",pointer:"pointerdown"},lo={hover:"mouseleave",focus:"blur",click:"click",touch:"touchend",pointer:"pointerup"};function io(t,r){const o=t.indexOf(r);o!==-1&&t.splice(o,1)}function Vt(){return new Promise(t=>requestAnimationFrame(()=>{requestAnimationFrame(t)}))}const W=[];let fe=null;const co={};function po(t){let r=co[t];return r||(r=co[t]=[]),r}let Pt=function(){};typeof window<"u"&&(Pt=window.Element);function B(t){return function(r){return Nt(r.theme,t)}}const Ft="__floating-vue__popper",uo=()=>e.defineComponent({name:"VPopper",provide(){return{[Ft]:{parentPopper:this}}},inject:{[Ft]:{default:null}},props:{theme:{type:String,required:!0},targetNodes:{type:Function,required:!0},referenceNode:{type:Function,default:null},popperNode:{type:Function,required:!0},shown:{type:Boolean,default:!1},showGroup:{type:String,default:null},ariaId:{default:null},disabled:{type:Boolean,default:B("disabled")},positioningDisabled:{type:Boolean,default:B("positioningDisabled")},placement:{type:String,default:B("placement"),validator:t=>R0.includes(t)},delay:{type:[String,Number,Object],default:B("delay")},distance:{type:[Number,String],default:B("distance")},skidding:{type:[Number,String],default:B("skidding")},triggers:{type:Array,default:B("triggers")},showTriggers:{type:[Array,Function],default:B("showTriggers")},hideTriggers:{type:[Array,Function],default:B("hideTriggers")},popperTriggers:{type:Array,default:B("popperTriggers")},popperShowTriggers:{type:[Array,Function],default:B("popperShowTriggers")},popperHideTriggers:{type:[Array,Function],default:B("popperHideTriggers")},container:{type:[String,Object,Pt,Boolean],default:B("container")},boundary:{type:[String,Pt],default:B("boundary")},strategy:{type:String,validator:t=>["absolute","fixed"].includes(t),default:B("strategy")},autoHide:{type:[Boolean,Function],default:B("autoHide")},handleResize:{type:Boolean,default:B("handleResize")},instantMove:{type:Boolean,default:B("instantMove")},eagerMount:{type:Boolean,default:B("eagerMount")},popperClass:{type:[String,Array,Object],default:B("popperClass")},computeTransformOrigin:{type:Boolean,default:B("computeTransformOrigin")},autoMinSize:{type:Boolean,default:B("autoMinSize")},autoSize:{type:[Boolean,String],default:B("autoSize")},autoMaxSize:{type:Boolean,default:B("autoMaxSize")},autoBoundaryMaxSize:{type:Boolean,default:B("autoBoundaryMaxSize")},preventOverflow:{type:Boolean,default:B("preventOverflow")},overflowPadding:{type:[Number,String],default:B("overflowPadding")},arrowPadding:{type:[Number,String],default:B("arrowPadding")},arrowOverflow:{type:Boolean,default:B("arrowOverflow")},flip:{type:Boolean,default:B("flip")},shift:{type:Boolean,default:B("shift")},shiftCrossAxis:{type:Boolean,default:B("shiftCrossAxis")},noAutoFocus:{type:Boolean,default:B("noAutoFocus")},disposeTimeout:{type:Number,default:B("disposeTimeout")}},emits:["show","hide","update:shown","apply-show","apply-hide","close-group","close-directive","auto-hide","resize","dispose"],data(){return{isShown:!1,isMounted:!1,skipTransition:!1,classes:{showFrom:!1,showTo:!1,hideFrom:!1,hideTo:!0},result:{x:0,y:0,placement:"",strategy:this.strategy,arrow:{x:0,y:0,centerOffset:0},transformOrigin:null},shownChildren:new Set,lastAutoHide:!0}},computed:{popperId(){return this.ariaId!=null?this.ariaId:this.randomId},shouldMountContent(){return this.eagerMount||this.isMounted},slotData(){return{popperId:this.popperId,isShown:this.isShown,shouldMountContent:this.shouldMountContent,skipTransition:this.skipTransition,autoHide:typeof this.autoHide=="function"?this.lastAutoHide:this.autoHide,show:this.show,hide:this.hide,handleResize:this.handleResize,onResize:this.onResize,classes:{...this.classes,popperClass:this.popperClass},result:this.positioningDisabled?null:this.result,attrs:this.$attrs}},parentPopper(){var t;return(t=this[Ft])==null?void 0:t.parentPopper},hasPopperShowTriggerHover(){var t,r;return((t=this.popperTriggers)==null?void 0:t.includes("hover"))||((r=this.popperShowTriggers)==null?void 0:r.includes("hover"))}},watch:{shown:"$_autoShowHide",disabled(t){t?this.dispose():this.init()},async container(){this.isShown&&(this.$_ensureTeleport(),await this.$_computePosition())},...["triggers","positioningDisabled"].reduce((t,r)=>(t[r]="$_refreshListeners",t),{}),...["placement","distance","skidding","boundary","strategy","overflowPadding","arrowPadding","preventOverflow","shift","shiftCrossAxis","flip"].reduce((t,r)=>(t[r]="$_computePosition",t),{})},created(){this.$_isDisposed=!0,this.randomId=`popper_${[Math.random(),Date.now()].map(t=>t.toString(36).substring(2,10)).join("_")}`,this.autoMinSize&&console.warn('[floating-vue] `autoMinSize` option is deprecated. Use `autoSize="min"` instead.'),this.autoMaxSize&&console.warn("[floating-vue] `autoMaxSize` option is deprecated. Use `autoBoundaryMaxSize` instead.")},mounted(){this.init(),this.$_detachPopperNode()},activated(){this.$_autoShowHide()},deactivated(){this.hide()},beforeUnmount(){this.dispose()},methods:{show({event:t=null,skipDelay:r=!1,force:o=!1}={}){var n,a;(n=this.parentPopper)!=null&&n.lockedChild&&this.parentPopper.lockedChild!==this||(this.$_pendingHide=!1,(o||!this.disabled)&&(((a=this.parentPopper)==null?void 0:a.lockedChild)===this&&(this.parentPopper.lockedChild=null),this.$_scheduleShow(t,r),this.$emit("show"),this.$_showFrameLocked=!0,requestAnimationFrame(()=>{this.$_showFrameLocked=!1})),this.$emit("update:shown",!0))},hide({event:t=null,skipDelay:r=!1}={}){var o;if(!this.$_hideInProgress){if(this.shownChildren.size>0){this.$_pendingHide=!0;return}if(this.hasPopperShowTriggerHover&&this.$_isAimingPopper()){this.parentPopper&&(this.parentPopper.lockedChild=this,clearTimeout(this.parentPopper.lockedChildTimer),this.parentPopper.lockedChildTimer=setTimeout(()=>{this.parentPopper.lockedChild===this&&(this.parentPopper.lockedChild.hide({skipDelay:r}),this.parentPopper.lockedChild=null)},1e3));return}((o=this.parentPopper)==null?void 0:o.lockedChild)===this&&(this.parentPopper.lockedChild=null),this.$_pendingHide=!1,this.$_scheduleHide(t,r),this.$emit("hide"),this.$emit("update:shown",!1)}},init(){var t;this.$_isDisposed&&(this.$_isDisposed=!1,this.isMounted=!1,this.$_events=[],this.$_preventShow=!1,this.$_referenceNode=((t=this.referenceNode)==null?void 0:t.call(this))??this.$el,this.$_targetNodes=this.targetNodes().filter(r=>r.nodeType===r.ELEMENT_NODE),this.$_popperNode=this.popperNode(),this.$_innerNode=this.$_popperNode.querySelector(".v-popper__inner"),this.$_arrowNode=this.$_popperNode.querySelector(".v-popper__arrow-container"),this.$_swapTargetAttrs("title","data-original-title"),this.$_detachPopperNode(),this.triggers.length&&this.$_addEventListeners(),this.shown&&this.show())},dispose(){this.$_isDisposed||(this.$_isDisposed=!0,this.$_removeEventListeners(),this.hide({skipDelay:!0}),this.$_detachPopperNode(),this.isMounted=!1,this.isShown=!1,this.$_updateParentShownChildren(!1),this.$_swapTargetAttrs("data-original-title","title"),this.$emit("dispose"))},async onResize(){this.isShown&&(await this.$_computePosition(),this.$emit("resize"))},async $_computePosition(){if(this.$_isDisposed||this.positioningDisabled)return;const t={strategy:this.strategy,middleware:[]};(this.distance||this.skidding)&&t.middleware.push(P0({mainAxis:this.distance,crossAxis:this.skidding}));const r=this.placement.startsWith("auto");if(r?t.middleware.push(z0({alignment:this.placement.split("-")[1]??""})):t.placement=this.placement,this.preventOverflow&&(this.shift&&t.middleware.push(F0({padding:this.overflowPadding,boundary:this.boundary,crossAxis:this.shiftCrossAxis})),!r&&this.flip&&t.middleware.push(N0({padding:this.overflowPadding,boundary:this.boundary}))),t.middleware.push(E0({element:this.$_arrowNode,padding:this.arrowPadding})),this.arrowOverflow&&t.middleware.push({name:"arrowOverflow",fn:({placement:n,rects:a,middlewareData:s})=>{let l;const{centerOffset:i}=s.arrow;return n.startsWith("top")||n.startsWith("bottom")?l=Math.abs(i)>a.reference.width/2:l=Math.abs(i)>a.reference.height/2,{data:{overflow:l}}}}),this.autoMinSize||this.autoSize){const n=this.autoSize?this.autoSize:this.autoMinSize?"min":null;t.middleware.push({name:"autoSize",fn:({rects:a,placement:s,middlewareData:l})=>{var i;if((i=l.autoSize)!=null&&i.skip)return{};let d,c;return s.startsWith("top")||s.startsWith("bottom")?d=a.reference.width:c=a.reference.height,this.$_innerNode.style[n==="min"?"minWidth":n==="max"?"maxWidth":"width"]=d!=null?`${d}px`:null,this.$_innerNode.style[n==="min"?"minHeight":n==="max"?"maxHeight":"height"]=c!=null?`${c}px`:null,{data:{skip:!0},reset:{rects:!0}}}})}(this.autoMaxSize||this.autoBoundaryMaxSize)&&(this.$_innerNode.style.maxWidth=null,this.$_innerNode.style.maxHeight=null,t.middleware.push(A0({boundary:this.boundary,padding:this.overflowPadding,apply:({availableWidth:n,availableHeight:a})=>{this.$_innerNode.style.maxWidth=n!=null?`${n}px`:null,this.$_innerNode.style.maxHeight=a!=null?`${a}px`:null}})));const o=await L0(this.$_referenceNode,this.$_popperNode,t);Object.assign(this.result,{x:o.x,y:o.y,placement:o.placement,strategy:o.strategy,arrow:{...o.middlewareData.arrow,...o.middlewareData.arrowOverflow}})},$_scheduleShow(t=null,r=!1){if(this.$_updateParentShownChildren(!0),this.$_hideInProgress=!1,clearTimeout(this.$_scheduleTimer),fe&&this.instantMove&&fe.instantMove&&fe!==this.parentPopper){fe.$_applyHide(!0),this.$_applyShow(!0);return}r?this.$_applyShow():this.$_scheduleTimer=setTimeout(this.$_applyShow.bind(this),this.$_computeDelay("show"))},$_scheduleHide(t=null,r=!1){if(this.shownChildren.size>0){this.$_pendingHide=!0;return}this.$_updateParentShownChildren(!1),this.$_hideInProgress=!0,clearTimeout(this.$_scheduleTimer),this.isShown&&(fe=this),r?this.$_applyHide():this.$_scheduleTimer=setTimeout(this.$_applyHide.bind(this),this.$_computeDelay("hide"))},$_computeDelay(t){const r=this.delay;return parseInt(r&&r[t]||r||0)},async $_applyShow(t=!1){clearTimeout(this.$_disposeTimer),clearTimeout(this.$_scheduleTimer),this.skipTransition=t,!this.isShown&&(this.$_ensureTeleport(),await Vt(),await this.$_computePosition(),await this.$_applyShowEffect(),this.positioningDisabled||this.$_registerEventListeners([...ot(this.$_referenceNode),...ot(this.$_popperNode)],"scroll",()=>{this.$_computePosition()}))},async $_applyShowEffect(){if(this.$_hideInProgress)return;if(this.computeTransformOrigin){const r=this.$_referenceNode.getBoundingClientRect(),o=this.$_popperNode.querySelector(".v-popper__wrapper"),n=o.parentNode.getBoundingClientRect(),a=r.x+r.width/2-(n.left+o.offsetLeft),s=r.y+r.height/2-(n.top+o.offsetTop);this.result.transformOrigin=`${a}px ${s}px`}this.isShown=!0,this.$_applyAttrsToTarget({"aria-describedby":this.popperId,"data-popper-shown":""});const t=this.showGroup;if(t){let r;for(let o=0;o0){this.$_pendingHide=!0,this.$_hideInProgress=!1;return}if(clearTimeout(this.$_scheduleTimer),!this.isShown)return;this.skipTransition=t,io(W,this),W.length===0&&document.body.classList.remove("v-popper--some-open");for(const o of no(this.theme)){const n=po(o);io(n,this),n.length===0&&document.body.classList.remove(`v-popper--some-open--${o}`)}fe===this&&(fe=null),this.isShown=!1,this.$_applyAttrsToTarget({"aria-describedby":void 0,"data-popper-shown":void 0}),clearTimeout(this.$_disposeTimer);const r=this.disposeTimeout;r!==null&&(this.$_disposeTimer=setTimeout(()=>{this.$_popperNode&&(this.$_detachPopperNode(),this.isMounted=!1)},r)),this.$_removeEventListeners("scroll"),this.$emit("apply-hide"),this.classes.showFrom=!1,this.classes.showTo=!1,this.classes.hideFrom=!0,this.classes.hideTo=!1,await Vt(),this.classes.hideFrom=!1,this.classes.hideTo=!0},$_autoShowHide(){this.shown?this.show():this.hide()},$_ensureTeleport(){if(this.$_isDisposed)return;let t=this.container;if(typeof t=="string"?t=window.document.querySelector(t):t===!1&&(t=this.$_targetNodes[0].parentNode),!t)throw new Error("No container for popover: "+this.container);t.appendChild(this.$_popperNode),this.isMounted=!0},$_addEventListeners(){const t=o=>{this.isShown&&!this.$_hideInProgress||(o.usedByTooltip=!0,!this.$_preventShow&&this.show({event:o}))};this.$_registerTriggerListeners(this.$_targetNodes,so,this.triggers,this.showTriggers,t),this.$_registerTriggerListeners([this.$_popperNode],so,this.popperTriggers,this.popperShowTriggers,t);const r=o=>{o.usedByTooltip||this.hide({event:o})};this.$_registerTriggerListeners(this.$_targetNodes,lo,this.triggers,this.hideTriggers,r),this.$_registerTriggerListeners([this.$_popperNode],lo,this.popperTriggers,this.popperHideTriggers,r)},$_registerEventListeners(t,r,o){this.$_events.push({targetNodes:t,eventType:r,handler:o}),t.forEach(n=>n.addEventListener(r,o,ye?{passive:!0}:void 0))},$_registerTriggerListeners(t,r,o,n,a){let s=o;n!=null&&(s=typeof n=="function"?n(s):n),s.forEach(l=>{const i=r[l];i&&this.$_registerEventListeners(t,i,a)})},$_removeEventListeners(t){const r=[];this.$_events.forEach(o=>{const{targetNodes:n,eventType:a,handler:s}=o;!t||t===a?n.forEach(l=>l.removeEventListener(a,s)):r.push(o)}),this.$_events=r},$_refreshListeners(){this.$_isDisposed||(this.$_removeEventListeners(),this.$_addEventListeners())},$_handleGlobalClose(t,r=!1){this.$_showFrameLocked||(this.hide({event:t}),t.closePopover?this.$emit("close-directive"):this.$emit("auto-hide"),r&&(this.$_preventShow=!0,setTimeout(()=>{this.$_preventShow=!1},300)))},$_detachPopperNode(){this.$_popperNode.parentNode&&this.$_popperNode.parentNode.removeChild(this.$_popperNode)},$_swapTargetAttrs(t,r){for(const o of this.$_targetNodes){const n=o.getAttribute(t);n&&(o.removeAttribute(t),o.setAttribute(r,n))}},$_applyAttrsToTarget(t){for(const r of this.$_targetNodes)for(const o in t){const n=t[o];n==null?r.removeAttribute(o):r.setAttribute(o,n)}},$_updateParentShownChildren(t){let r=this.parentPopper;for(;r;)t?r.shownChildren.add(this.randomId):(r.shownChildren.delete(this.randomId),r.$_pendingHide&&r.hide()),r=r.parentPopper},$_isAimingPopper(){const t=this.$_referenceNode.getBoundingClientRect();if(Fe>=t.left&&Fe<=t.right&&Ae>=t.top&&Ae<=t.bottom){const r=this.$_popperNode.getBoundingClientRect(),o=Fe-oe,n=Ae-ne,a=r.left+r.width/2-oe+(r.top+r.height/2)-ne+r.width+r.height,s=oe+o*a,l=ne+n*a;return nt(oe,ne,s,l,r.left,r.top,r.left,r.bottom)||nt(oe,ne,s,l,r.left,r.top,r.right,r.top)||nt(oe,ne,s,l,r.right,r.top,r.right,r.bottom)||nt(oe,ne,s,l,r.left,r.bottom,r.right,r.bottom)}return!1}},render(){return this.$slots.default(this.slotData)}});typeof document<"u"&&typeof window<"u"&&(ao?(document.addEventListener("touchstart",fo,ye?{passive:!0,capture:!0}:!0),document.addEventListener("touchend",H0,ye?{passive:!0,capture:!0}:!0)):(window.addEventListener("mousedown",fo,!0),window.addEventListener("click",j0,!0)),window.addEventListener("resize",q0));function fo(t){for(let r=0;r=0;n--){const a=W[n];try{const s=a.$_containsGlobalTarget=G0(a,t);a.$_pendingHide=!1,requestAnimationFrame(()=>{if(a.$_pendingHide=!1,!o[a.randomId]&&go(a,s,t)){if(a.$_handleGlobalClose(t,r),!t.closeAllPopover&&t.closePopover&&s){let i=a.parentPopper;for(;i;)o[i.randomId]=!0,i=i.parentPopper;return}let l=a.parentPopper;for(;l&&go(l,l.$_containsGlobalTarget,t);)l.$_handleGlobalClose(t,r),l=l.parentPopper}})}catch{}}}function G0(t,r){const o=t.popperNode();return t.$_mouseDownContains||o.contains(r.target)}function go(t,r,o){return o.closeAllPopover||o.closePopover&&r||W0(t,o)&&!r}function W0(t,r){if(typeof t.autoHide=="function"){const o=t.autoHide(r);return t.lastAutoHide=o,o}return t.autoHide}function q0(t){for(let r=0;r{oe=Fe,ne=Ae,Fe=t.clientX,Ae=t.clientY},ye?{passive:!0}:void 0);function nt(t,r,o,n,a,s,l,i){const d=((l-a)*(r-s)-(i-s)*(t-a))/((i-s)*(o-t)-(l-a)*(n-r)),c=((o-t)*(r-s)-(n-r)*(t-a))/((i-s)*(o-t)-(l-a)*(n-r));return d>=0&&d<=1&&c>=0&&c<=1}const U0={extends:uo()},At=(t,r)=>{const o=t.__vccOpts||t;for(const[n,a]of r)o[n]=a;return o};function Y0(t,r,o,n,a,s){return e.openBlock(),e.createElementBlock("div",{ref:"reference",class:e.normalizeClass(["v-popper",{"v-popper--shown":t.slotData.isShown}])},[e.renderSlot(t.$slots,"default",e.normalizeProps(e.guardReactiveProps(t.slotData)))],2)}const J0=At(U0,[["render",Y0]]);function K0(){var t=window.navigator.userAgent,r=t.indexOf("MSIE ");if(r>0)return parseInt(t.substring(r+5,t.indexOf(".",r)),10);var o=t.indexOf("Trident/");if(o>0){var n=t.indexOf("rv:");return parseInt(t.substring(n+3,t.indexOf(".",n)),10)}var a=t.indexOf("Edge/");return a>0?parseInt(t.substring(a+5,t.indexOf(".",a)),10):-1}let at;function It(){It.init||(It.init=!0,at=K0()!==-1)}var st={name:"ResizeObserver",props:{emitOnMount:{type:Boolean,default:!1},ignoreWidth:{type:Boolean,default:!1},ignoreHeight:{type:Boolean,default:!1}},emits:["notify"],mounted(){It(),e.nextTick(()=>{this._w=this.$el.offsetWidth,this._h=this.$el.offsetHeight,this.emitOnMount&&this.emitSize()});const t=document.createElement("object");this._resizeObject=t,t.setAttribute("aria-hidden","true"),t.setAttribute("tabindex",-1),t.onload=this.addResizeHandlers,t.type="text/html",at&&this.$el.appendChild(t),t.data="about:blank",at||this.$el.appendChild(t)},beforeUnmount(){this.removeResizeHandlers()},methods:{compareAndNotify(){(!this.ignoreWidth&&this._w!==this.$el.offsetWidth||!this.ignoreHeight&&this._h!==this.$el.offsetHeight)&&(this._w=this.$el.offsetWidth,this._h=this.$el.offsetHeight,this.emitSize())},emitSize(){this.$emit("notify",{width:this._w,height:this._h})},addResizeHandlers(){this._resizeObject.contentDocument.defaultView.addEventListener("resize",this.compareAndNotify),this.compareAndNotify()},removeResizeHandlers(){this._resizeObject&&this._resizeObject.onload&&(!at&&this._resizeObject.contentDocument&&this._resizeObject.contentDocument.defaultView.removeEventListener("resize",this.compareAndNotify),this.$el.removeChild(this._resizeObject),this._resizeObject.onload=null,this._resizeObject=null)}}};const Q0=e.withScopeId("data-v-b329ee4c");e.pushScopeId("data-v-b329ee4c");const X0={class:"resize-observer",tabindex:"-1"};e.popScopeId();const Z0=Q0((t,r,o,n,a,s)=>(e.openBlock(),e.createBlock("div",X0)));st.render=Z0,st.__scopeId="data-v-b329ee4c",st.__file="src/components/ResizeObserver.vue";const ho=(t="theme")=>({computed:{themeClass(){return D0(this[t])}}}),ep=e.defineComponent({name:"VPopperContent",components:{ResizeObserver:st},mixins:[ho()],props:{popperId:String,theme:String,shown:Boolean,mounted:Boolean,skipTransition:Boolean,autoHide:Boolean,handleResize:Boolean,classes:Object,result:Object},emits:["hide","resize"],methods:{toPx(t){return t!=null&&!isNaN(t)?`${t}px`:null}}}),tp=["id","aria-hidden","tabindex","data-popper-placement"],rp={ref:"inner",class:"v-popper__inner"},op=e.createElementVNode("div",{class:"v-popper__arrow-outer"},null,-1),np=e.createElementVNode("div",{class:"v-popper__arrow-inner"},null,-1),ap=[op,np];function sp(t,r,o,n,a,s){const l=e.resolveComponent("ResizeObserver");return e.openBlock(),e.createElementBlock("div",{id:t.popperId,ref:"popover",class:e.normalizeClass(["v-popper__popper",[t.themeClass,t.classes.popperClass,{"v-popper__popper--shown":t.shown,"v-popper__popper--hidden":!t.shown,"v-popper__popper--show-from":t.classes.showFrom,"v-popper__popper--show-to":t.classes.showTo,"v-popper__popper--hide-from":t.classes.hideFrom,"v-popper__popper--hide-to":t.classes.hideTo,"v-popper__popper--skip-transition":t.skipTransition,"v-popper__popper--arrow-overflow":t.result&&t.result.arrow.overflow,"v-popper__popper--no-positioning":!t.result}]]),style:e.normalizeStyle(t.result?{position:t.result.strategy,transform:`translate3d(${Math.round(t.result.x)}px,${Math.round(t.result.y)}px,0)`}:void 0),"aria-hidden":t.shown?"false":"true",tabindex:t.autoHide?0:void 0,"data-popper-placement":t.result?t.result.placement:void 0,onKeyup:r[2]||(r[2]=e.withKeys(i=>t.autoHide&&t.$emit("hide"),["esc"]))},[e.createElementVNode("div",{class:"v-popper__backdrop",onClick:r[0]||(r[0]=i=>t.autoHide&&t.$emit("hide"))}),e.createElementVNode("div",{class:"v-popper__wrapper",style:e.normalizeStyle(t.result?{transformOrigin:t.result.transformOrigin}:void 0)},[e.createElementVNode("div",rp,[t.mounted?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("div",null,[e.renderSlot(t.$slots,"default")]),t.handleResize?(e.openBlock(),e.createBlock(l,{key:0,onNotify:r[1]||(r[1]=i=>t.$emit("resize",i))})):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0)],512),e.createElementVNode("div",{ref:"arrow",class:"v-popper__arrow-container",style:e.normalizeStyle(t.result?{left:t.toPx(t.result.arrow.x),top:t.toPx(t.result.arrow.y)}:void 0)},ap,4)],4)],46,tp)}const bo=At(ep,[["render",sp]]),yo={methods:{show(...t){return this.$refs.popper.show(...t)},hide(...t){return this.$refs.popper.hide(...t)},dispose(...t){return this.$refs.popper.dispose(...t)},onResize(...t){return this.$refs.popper.onResize(...t)}}},lp=e.defineComponent({name:"VPopperWrapper",components:{Popper:J0,PopperContent:bo},mixins:[yo,ho("finalTheme")],props:{theme:{type:String,default:null}},computed:{finalTheme(){return this.theme??this.$options.vPopperTheme}},methods:{getTargetNodes(){return Array.from(this.$el.children).filter(t=>t!==this.$refs.popperContent.$el)}}});function ip(t,r,o,n,a,s){const l=e.resolveComponent("PopperContent"),i=e.resolveComponent("Popper");return e.openBlock(),e.createBlock(i,{ref:"popper",theme:t.finalTheme,"target-nodes":t.getTargetNodes,"popper-node":()=>t.$refs.popperContent.$el,class:e.normalizeClass([t.themeClass])},{default:e.withCtx(({popperId:d,isShown:c,shouldMountContent:p,skipTransition:f,autoHide:g,show:u,hide:m,handleResize:b,onResize:w,classes:k,result:_})=>[e.renderSlot(t.$slots,"default",{shown:c,show:u,hide:m}),e.createVNode(l,{ref:"popperContent","popper-id":d,theme:t.finalTheme,shown:c,mounted:p,"skip-transition":f,"auto-hide":g,"handle-resize":b,classes:k,result:_,onHide:m,onResize:w},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"popper",{shown:c,hide:m})]),_:2},1032,["popper-id","theme","shown","mounted","skip-transition","auto-hide","handle-resize","classes","result","onHide","onResize"])]),_:3},8,["theme","target-nodes","popper-node","class"])}const Mt=At(lp,[["render",ip]]);({...Mt},{...Mt});const dp={...Mt,name:"VTooltip",vPopperTheme:"tooltip"};e.defineComponent({name:"VTooltipDirective",components:{Popper:uo(),PopperContent:bo},mixins:[yo],inheritAttrs:!1,props:{theme:{type:String,default:"tooltip"},html:{type:Boolean,default:t=>Nt(t.theme,"html")},content:{type:[String,Number,Function],default:null},loadingContent:{type:String,default:t=>Nt(t.theme,"loadingContent")},targetNodes:{type:Function,required:!0}},data(){return{asyncContent:null}},computed:{isContentAsync(){return typeof this.content=="function"},loading(){return this.isContentAsync&&this.asyncContent==null},finalContent(){return this.isContentAsync?this.loading?this.loadingContent:this.asyncContent:this.content}},watch:{content:{handler(){this.fetchContent(!0)},immediate:!0},async finalContent(){await this.$nextTick(),this.$refs.popper.onResize()}},created(){this.$_fetchId=0},methods:{fetchContent(t){if(typeof this.content=="function"&&this.$_isShown&&(t||!this.$_loading&&this.asyncContent==null)){this.asyncContent=null,this.$_loading=!0;const r=++this.$_fetchId,o=this.content(this);o.then?o.then(n=>this.onResult(r,n)):this.onResult(r,o)}},onResult(t,r){t===this.$_fetchId&&(this.$_loading=!1,this.asyncContent=r)},onShow(){this.$_isShown=!0,this.fetchContent()},onHide(){this.$_isShown=!1}}});const cp=dp,bf="",pp={class:"flex items-start"},up=e.defineComponent({__name:"FwbTooltip",props:{placement:{default:"top"},theme:{default:"dark"},trigger:{default:"hover"}},setup(t){const r=t,o=e.computed(()=>({light:"tooltip-light",dark:"tooltip-dark"})[r.theme]);return(n,a)=>(e.openBlock(),e.createElementBlock("div",pp,[e.createVNode(e.unref(cp),{placement:n.placement,triggers:[n.trigger],theme:o.value,"auto-hide":""},{popper:e.withCtx(()=>[e.renderSlot(n.$slots,"content")]),default:e.withCtx(()=>[e.renderSlot(n.$slots,"trigger")]),_:3},8,["placement","triggers","theme"])]))}}),yf="",fp="block text-sm font-medium text-gray-900 dark:text-gray-300",mp="w-4 h-4 rounded bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-600 dark:border-gray-500";function gp(){const t=e.computed(()=>D(mp)),r=e.computed(()=>fp);return{checkboxClasses:t,labelClasses:r}}const hp={class:"flex gap-3 items-center justify-start"},bp=["disabled"],yp=e.defineComponent({__name:"FwbCheckbox",props:{disabled:{type:Boolean,default:!1},label:{default:""},modelValue:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(t,{emit:r}){const o=t,n=r,a=e.computed({get(){return o.modelValue},set(i){n("update:modelValue",i)}}),{checkboxClasses:s,labelClasses:l}=gp();return(i,d)=>(e.openBlock(),e.createElementBlock("label",hp,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[0]||(d[0]=c=>a.value=c),class:e.normalizeClass(e.unref(s)),disabled:i.disabled,type:"checkbox"},null,10,bp),[[e.vModelCheckbox,a.value]]),i.label?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(e.unref(l))},e.toDisplayString(i.label),3)):e.createCommentVNode("",!0),e.renderSlot(i.$slots,"default")]))}}),wp="block w-full text-sm text-gray-900 border-[1px] border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400",kp="block mb-2 text-sm font-medium text-gray-900 dark:text-white",_p="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600",xp="flex flex-col items-center justify-center pt-5 pb-6",Cp="!-mb-2 text-sm text-gray-500 dark:text-gray-400";function $p(t){const r=e.computed(()=>D(wp,"text-"+t)),o=e.computed(()=>kp),n=e.computed(()=>_p),a=e.computed(()=>xp),s=e.computed(()=>Cp);return{fileInpClasses:r,labelClasses:o,dropzoneLabelClasses:n,dropzoneWrapClasses:a,dropzoneTextClasses:s}}const vp={key:0},Sp=["multiple"],Bp=e.createElementVNode("svg",{"aria-hidden":"true",class:"w-8 h-8 text-gray-500 dark:text-gray-400",fill:"none",viewBox:"0 0 20 16",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{d:"M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",stroke:"currentColor"})],-1),Ep={key:0},Tp=e.createElementVNode("span",{class:"font-semibold"},"Click to upload",-1),zp={key:1},Np=["multiple"],Vp=e.defineComponent({__name:"FwbFileInput",props:{dropzone:{type:Boolean,default:!1},label:{default:""},modelValue:{default:null},multiple:{type:Boolean,default:!1},size:{default:"sm"}},emits:["update:modelValue"],setup(t,{emit:r}){const o=t,n=e.computed(()=>me(o.modelValue)?o.modelValue.map(m=>m.name).join(", "):o.modelValue instanceof FileList?Array.from(o.modelValue).map(m=>m.name).join(","):o.modelValue instanceof File&&o.modelValue.name||""),a=r,s=e.computed({get(){return o.modelValue},set(m){a("update:modelValue",m)}}),l=m=>{const b=m.target;o.multiple?s.value=Array.from(b.files??[]):s.value=b.files?.[0]??null},i=m=>{m.preventDefault();const b=[];m.dataTransfer?.items?(Object.values(m.dataTransfer.items).forEach(w=>{w.kind==="file"&&b.push(w.getAsFile())}),o.multiple?s.value=b:s.value=b[0]):m.dataTransfer?.files&&Object.values(m.dataTransfer.files).forEach(w=>{s.value=w})},d=m=>{m.preventDefault()},{fileInpClasses:c,labelClasses:p,dropzoneLabelClasses:f,dropzoneWrapClasses:g,dropzoneTextClasses:u}=$p(o.size);return(m,b)=>(e.openBlock(),e.createElementBlock("div",null,[m.dropzone?(e.openBlock(),e.createElementBlock("div",{key:1,class:"flex items-center justify-center",onChange:l,onDragover:d,onDrop:i},[e.createElementVNode("label",{class:e.normalizeClass(e.unref(f))},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(g))},[Bp,s.value?(e.openBlock(),e.createElementBlock("p",zp,"File: "+e.toDisplayString(n.value),1)):(e.openBlock(),e.createElementBlock("div",Ep,[e.createElementVNode("p",{class:e.normalizeClass(e.unref(u))},[Tp,e.createTextVNode(" or drag and drop ")],2),e.renderSlot(m.$slots,"default")]))],2),e.createElementVNode("input",{multiple:m.multiple,type:"file",class:"hidden"},null,8,Np)],2)],32)):(e.openBlock(),e.createElementBlock("div",vp,[e.createElementVNode("label",null,[e.createElementVNode("span",{class:e.normalizeClass(e.unref(p))},e.toDisplayString(m.label),3),e.createElementVNode("input",{class:e.normalizeClass(e.unref(c)),multiple:m.multiple,type:"file",onChange:l},null,42,Sp)]),e.renderSlot(m.$slots,"default")]))]))}}),we={Success:"success",Error:"error"},Pp="block mb-2 text-sm font-medium",Fp="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",Ap="cursor-not-allowed bg-gray-100",Ip={lg:"p-4",md:"p-2.5 text-sm",sm:"p-2 text-sm"},Mp="bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 focus:ring-green-500 focus:border-green-500",Op="bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500";function Lp(t){const r=e.computed(()=>{const n=t.validationStatus.value,a=n===we.Success?Mp:n===we.Error?Op:"";return S(Fp,a,Ip[t.size.value],t.disabled.value?Ap:"")}),o=e.computed(()=>{const n=t.validationStatus.value,a=n===we.Success?"text-green-700 dark:text-green-500":n===we.Error?"text-red-700 dark:text-red-500":"text-gray-900 dark:text-white";return S(Pp,a)});return{inputClasses:r,labelClasses:o}}const Dp={class:"flex relative"},Rp={key:0,class:"w-10 flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none overflow-hidden"},jp=["disabled","type","required"],Hp={key:1,class:"absolute right-2.5 bottom-2.5"},Gp={key:2,class:"mt-2 text-sm text-gray-500 dark:text-gray-400"},Wp=e.defineComponent({__name:"FwbInput",props:{disabled:{type:Boolean,default:!1},label:{default:""},modelValue:{default:""},required:{type:Boolean,default:!1},size:{default:"md"},type:{default:"text"},validationStatus:{default:void 0}},setup(t){const r=t,o=fr(r,"modelValue"),{inputClasses:n,labelClasses:a}=Lp(e.toRefs(r)),s=e.computed(()=>S("mt-2 text-sm",r.validationStatus===we.Success?"text-green-600 dark:text-green-500":"",r.validationStatus===we.Error?"text-red-600 dark:text-red-500":""));return(l,i)=>(e.openBlock(),e.createElementBlock("div",null,[l.label?(e.openBlock(),e.createElementBlock("label",{key:0,class:e.normalizeClass(e.unref(a))},e.toDisplayString(l.label),3)):e.createCommentVNode("",!0),e.createElementVNode("div",Dp,[l.$slots.prefix?(e.openBlock(),e.createElementBlock("div",Rp,[e.renderSlot(l.$slots,"prefix")])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",e.mergeProps(l.$attrs,{"onUpdate:modelValue":i[0]||(i[0]=d=>e.isRef(o)?o.value=d:null),disabled:l.disabled,type:l.type,required:l.required,class:[e.unref(n),l.$slots.prefix?"pl-10":""]}),null,16,jp),[[e.vModelDynamic,e.unref(o)]]),l.$slots.suffix?(e.openBlock(),e.createElementBlock("div",Hp,[e.renderSlot(l.$slots,"suffix")])):e.createCommentVNode("",!0)]),l.$slots.validationMessage?(e.openBlock(),e.createElementBlock("p",{key:1,class:e.normalizeClass(s.value)},[e.renderSlot(l.$slots,"validationMessage")],2)):e.createCommentVNode("",!0),l.$slots.helper?(e.openBlock(),e.createElementBlock("p",Gp,[e.renderSlot(l.$slots,"helper")])):e.createCommentVNode("",!0)]))}}),qp={class:"flex w-[100%] items-center"},Up=["disabled","name","value"],Yp="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600",Jp="m-2 mr-0 text-sm font-medium text-gray-900 dark:text-gray-300",Kp=e.defineComponent({__name:"FwbRadio",props:{modelValue:{default:""},name:{default:""},value:{default:""},label:{default:""},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(t,{emit:r}){const o=t,n=r,a=e.computed({get(){return o.modelValue},set(i){n("update:modelValue",i)}}),s=e.computed(()=>Yp),l=e.computed(()=>S(Jp,o.disabled&&"text-gray-400 dark:text-gray-500"));return(i,d)=>(e.openBlock(),e.createElementBlock("label",qp,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[0]||(d[0]=c=>a.value=c),type:"radio",disabled:i.disabled,name:i.name,value:i.value,class:e.normalizeClass(s.value)},null,10,Up),[[e.vModelRadio,a.value]]),e.createElementVNode("span",{class:e.normalizeClass(l.value)},e.toDisplayString(i.label),3),e.renderSlot(i.$slots,"default")]))}}),Qp="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700",Xp="block mb-2 text-sm font-medium text-gray-900 dark:text-white",Zp={lg:"h-3 range-lg",md:"h-2 range-md",sm:"h-1 range-sm"};function eu(t){const r=e.computed(()=>D(Qp,Zp[t.size.value])),o=e.computed(()=>Xp);return{rangeClasses:r,labelClasses:o}}const tu={class:"flex flex-col"},ru=["step","min","max","disabled"],ou=e.defineComponent({__name:"FwbRange",props:{disabled:{type:Boolean,default:!1},label:{default:"Range slider"},max:{default:100},min:{default:0},modelValue:{default:50},size:{default:"md"},steps:{default:1}},emits:["update:modelValue"],setup(t,{emit:r}){const o=t,n=r,a=e.computed({get(){return o.modelValue},set(i){n("update:modelValue",i)}}),{rangeClasses:s,labelClasses:l}=eu(e.toRefs(o));return(i,d)=>(e.openBlock(),e.createElementBlock("label",tu,[e.createElementVNode("span",{class:e.normalizeClass(e.unref(l))},e.toDisplayString(i.label),3),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[0]||(d[0]=c=>a.value=c),step:i.steps,min:i.min,max:i.max,disabled:i.disabled,type:"range",class:e.normalizeClass(e.unref(s))},null,10,ru),[[e.vModelText,a.value]])]))}}),wf="",nu=q(ou,[["__scopeId","data-v-c4cfe3d4"]]),ae={Success:"success",Error:"error"},au="block mb-2 text-sm font-medium",su="w-full text-gray-900 bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",lu="cursor-not-allowed bg-gray-100",iu="bg-transparent dark:bg-transparent border-b-2 border-gray-200 appearance-none dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer",du={lg:"p-4",md:"p-2.5 text-sm",sm:"p-2 text-sm"},cu="bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 focus:ring-green-500 focus:border-green-500",pu="bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500";function uu(t){const r=e.computed(()=>{const n=t.validationStatus.value,a=n===ae.Success?cu:n===ae.Error?pu:"",s=n===ae.Success?"focus:border-green-500":n===ae.Error?"focus:border-red-500":"";return S(su,a,du[t.size.value],t.disabled.value&&lu,t.underline.value?iu:"border border-gray-300 rounded-lg",t.underline.value&&s)}),o=e.computed(()=>{const n=t.validationStatus.value,a=n===ae.Success?"text-green-700 dark:text-green-500":n===ae.Error?"text-red-700 dark:text-red-500":"text-gray-900 dark:text-white";return S(au,a)});return{selectClasses:r,labelClasses:o}}const fu=["disabled"],mu={disabled:"",selected:"",value:""},gu=["value"],hu={key:1,class:"mt-2 text-sm text-gray-500 dark:text-gray-400"},bu=e.defineComponent({__name:"FwbSelect",props:{modelValue:{default:""},label:{default:""},options:{default:()=>[]},placeholder:{default:"Please select one"},disabled:{type:Boolean,default:!1},underline:{type:Boolean,default:!1},size:{default:"md"},validationStatus:{default:void 0}},emits:["update:modelValue"],setup(t,{emit:r}){const o=t,a=fr(o,"modelValue",r),{selectClasses:s,labelClasses:l}=uu(e.toRefs(o)),i=e.computed(()=>S("mt-2 text-sm",o.validationStatus===ae.Success?"text-green-600 dark:text-green-500":"",o.validationStatus===ae.Error?"text-red-600 dark:text-red-500":""));return(d,c)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("label",null,[d.label?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(e.unref(l))},e.toDisplayString(d.label),3)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("select",{"onUpdate:modelValue":c[0]||(c[0]=p=>e.isRef(a)?a.value=p:null),disabled:d.disabled,class:e.normalizeClass(e.unref(s))},[e.createElementVNode("option",mu,e.toDisplayString(d.placeholder),1),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.options,(p,f)=>(e.openBlock(),e.createElementBlock("option",{key:f,value:p.value},e.toDisplayString(p.name),9,gu))),128))],10,fu),[[e.vModelSelect,e.unref(a)]])]),d.$slots.validationMessage?(e.openBlock(),e.createElementBlock("p",{key:0,class:e.normalizeClass(i.value)},[e.renderSlot(d.$slots,"validationMessage")],2)):e.createCommentVNode("",!0),d.$slots.helper?(e.openBlock(),e.createElementBlock("p",hu,[e.renderSlot(d.$slots,"helper")])):e.createCommentVNode("",!0)]))}}),yu="block w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600",wu="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-200 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",ku="block mb-2 text-sm font-medium text-gray-900 dark:text-white",_u="block py-2 px-3 border-gray-200 dark:border-gray-600";function xu(t){const r=e.computed(()=>D(wu,t?"bg-white dark:bg-gray-800 border-none":"border")),o=e.computed(()=>ku),n=e.computed(()=>t?yu:""),a=e.computed(()=>_u);return{textareaClasses:r,labelClasses:o,wrapperClasses:n,footerClasses:a}}const Cu=["rows","placeholder"],$u=e.defineComponent({inheritAttrs:!1,__name:"FwbTextarea",props:{modelValue:{default:""},label:{default:"Your message"},rows:{default:4},custom:{type:Boolean,default:!1},placeholder:{default:"Write your message here..."}},emits:["update:modelValue"],setup(t,{emit:r}){const o=t,n=r,a=e.computed({get(){return o.modelValue},set(c){n("update:modelValue",c)}}),{textareaClasses:s,labelClasses:l,wrapperClasses:i,footerClasses:d}=xu(o.custom);return(c,p)=>(e.openBlock(),e.createElementBlock("label",null,[e.createElementVNode("span",{class:e.normalizeClass(e.unref(l))},e.toDisplayString(c.label),3),e.createElementVNode("span",{class:e.normalizeClass(e.unref(i))},[e.withDirectives(e.createElementVNode("textarea",e.mergeProps({"onUpdate:modelValue":p[0]||(p[0]=f=>a.value=f)},c.$attrs,{class:e.unref(s),rows:c.rows,placeholder:c.placeholder}),null,16,Cu),[[e.vModelText,a.value]]),c.$slots.footer?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(e.unref(d))},[e.renderSlot(c.$slots,"footer")],2)):e.createCommentVNode("",!0)],2)]))}}),vu="w-fit relative inline-flex items-center cursor-pointer",Su='bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[""] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600',Bu="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300",Eu={lg:"w-14 h-7 after:top-0.5 after:left-[4px] after:h-6 after:w-6",md:"w-11 h-6 after:top-[2px] after:left-[2px] after:h-5 after:w-5",sm:"w-9 h-5 after:top-[2px] after:left-[2px] after:h-4 after:w-4"},Tu={red:"peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600",green:"peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600",purple:"peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600",yellow:"peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-400",teal:"peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600",orange:"peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:bg-orange-500"};function zu(t){const r=e.computed(()=>vu),o=e.computed(()=>Su),n=e.computed(()=>Eu[t.size.value]),a=e.computed(()=>Tu[t.color.value]),s=e.computed(()=>Bu);return{labelClasses:r,toggleSize:n,toggleClasses:o,toggleColor:a,toggleBallClasses:s}}const Nu=["disabled"],Vu=e.defineComponent({__name:"FwbToggle",props:{color:{default:""},disabled:{type:Boolean,default:!1},label:{default:""},modelValue:{type:Boolean,default:!1},size:{default:"md"}},emits:["update:modelValue"],setup(t,{emit:r}){const o=t,n=r,a=e.computed({get(){return o.modelValue},set(p){n("update:modelValue",p)}}),{labelClasses:s,toggleSize:l,toggleClasses:i,toggleColor:d,toggleBallClasses:c}=zu(e.toRefs(o));return(p,f)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(e.unref(s))},[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":f[0]||(f[0]=g=>a.value=g),disabled:p.disabled,class:"sr-only peer",type:"checkbox"},null,8,Nu),[[e.vModelCheckbox,a.value]]),e.createElementVNode("span",{class:e.normalizeClass([e.unref(i),e.unref(l),e.unref(d)])},null,2),e.createElementVNode("span",{class:e.normalizeClass(e.unref(c))},e.toDisplayString(p.label),3)],2))}}),Pu=["href"],Fu=e.defineComponent({__name:"FwbA",props:{href:{default:""},color:{default:"text-primary-600 dark:text-primary-500"}},setup(t){return(r,o)=>(e.openBlock(),e.createElementBlock("a",{href:r.href,class:e.normalizeClass([r.color,"inline-flex items-center hover:underline"])},[e.renderSlot(r.$slots,"default")],10,Pu))}}),Au=e.defineComponent({inheritAttrs:!1,__name:"FwbHeading",props:{tag:{default:"h1"},color:{default:"text-gray-900 dark:text-white"},customSize:{default:""}},setup(t){const r=t,o={h1:"text-5xl font-extrabold",h2:"text-4xl font-bold",h3:"text-3xl font-bold",h4:"text-2xl font-bold",h5:"text-xl font-bold",h6:"text-lg font-bold"},n=e.useAttrs(),a=S("w-full",o[r.tag],r.color,r.customSize,n.class),s=r.tag;return(l,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),e.mergeProps(l.$attrs,{class:e.unref(a)}),{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},16,["class"]))}}),Iu=["src","alt"],Mu=["src","alt"],Ou=e.defineComponent({__name:"FwbImg",props:{caption:{default:""},src:{default:""},size:{default:"max-w-full"},alt:{default:""},imgClass:{default:"h-auto"},alignment:{default:""},captionClass:{default:"mt-2 text-sm text-center text-gray-500 dark:text-gray-400"}},setup(t){return(r,o)=>r.caption?(e.openBlock(),e.createElementBlock("figure",{key:0,class:e.normalizeClass(r.size)},[e.createElementVNode("img",{src:r.src,alt:r.alt,class:e.normalizeClass([r.size,r.alignment,r.imgClass])},null,10,Iu),e.createElementVNode("figcaption",{class:e.normalizeClass(r.captionClass)},e.toDisplayString(r.caption),3)],2)):(e.openBlock(),e.createElementBlock("img",{key:1,src:r.src,alt:r.alt,class:e.normalizeClass([r.size,r.alignment,r.imgClass])},null,10,Mu))}}),Lu="mb-3 last:mb-0 text-gray-900 dark:text-white leading-normal",Du=e.defineComponent({__name:"FwbP",props:{class:{default:""}},setup(t){const r=t,o=e.computed(()=>Q([Lu,r.class]));return(n,a)=>(e.openBlock(),e.createElementBlock("p",{class:e.normalizeClass(o.value)},[e.renderSlot(n.$slots,"default")],2))}}),Ru=e.defineComponent({__name:"FlowbiteThemable",props:{theme:{default:"blue"}},setup(t){const r=t;return e.provide(Pr,e.toRef(r,"theme")),(o,n)=>e.renderSlot(o.$slots,"default")}});function ju(){const t=e.inject(Or,null);return t===null&&console.warn("Cannot use useToast outside component. Please wrap your component with "),{add:a=>t?t?.add(a):"",remove:a=>t?t?.remove(a):!1,pop:()=>t?t?.pop():""}}h.FlowbiteThemable=Ru,h.FlowbiteThemableChild=Mr,h.FwbA=Fu,h.FwbAccordion=_o,h.FwbAccordionContent=Qo,h.FwbAccordionHeader=on,h.FwbAccordionPanel=an,h.FwbAlert=pn,h.FwbAvatar=Sn,h.FwbAvatarStack=zn,h.FwbAvatarStackCounter=Vn,h.FwbBadge=Dn,h.FwbBreadcrumb=qn,h.FwbBreadcrumbItem=ra,h.FwbButton=rr,h.FwbButtonGroup=wa,h.FwbCard=xa,h.FwbCarousel=za,h.FwbCheckbox=yp,h.FwbDropdown=ui,h.FwbFileInput=Vp,h.FwbFooter=fi,h.FwbFooterBrand=hi,h.FwbFooterCopyright=bi,h.FwbFooterIcon=wi,h.FwbFooterLink=ki,h.FwbFooterLinkGroup=_i,h.FwbHeading=Au,h.FwbImg=Ou,h.FwbInput=Wp,h.FwbJumbotron=xi,h.FwbListGroup=vi,h.FwbListGroupItem=Fi,h.FwbMegaMenu=id,h.FwbMegaMenuDropdown=cd,h.FwbModal=Li,h.FwbNavbar=Ji,h.FwbNavbarCollapse=Zi,h.FwbNavbarLink=od,h.FwbNavbarLogo=sd,h.FwbP=Du,h.FwbPagination=$d,h.FwbProgress=Td,h.FwbRadio=Kp,h.FwbRange=nu,h.FwbRating=Md,h.FwbSelect=bu,h.FwbSidebar=Dd,h.FwbSidebarCta=Wd,h.FwbSidebarDropdownItem=Xd,h.FwbSidebarItem=Zd,h.FwbSidebarItemGroup=tc,h.FwbSidebarLogo=nc,h.FwbSlotListener=$t,h.FwbSpinner=Ce,h.FwbTab=zc,h.FwbTable=lc,h.FwbTableBody=cc,h.FwbTableCell=mc,h.FwbTableHead=yc,h.FwbTableHeadCell=xc,h.FwbTableRow=Bc,h.FwbTabs=Mc,h.FwbTextarea=$u,h.FwbTimeline=Rc,h.FwbTimelineBody=Wc,h.FwbTimelineContent=qc,h.FwbTimelineItem=Kc,h.FwbTimelinePoint=Xc,h.FwbTimelineTime=r0,h.FwbTimelineTitle=s0,h.FwbToast=vt,h.FwbToastProvider=w0,h.FwbToggle=Vu,h.FwbTooltip=up,h.useToast=ju,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})}); diff --git a/dist/index.css b/dist/index.css new file mode 100644 index 0000000..ff5eb71 --- /dev/null +++ b/dist/index.css @@ -0,0 +1 @@ +@tailwind components;@layer components{.btn-group>button{@apply rounded-none;}.btn-group>button:first-child{@apply rounded-l-lg;}.btn-group>button:last-child{@apply rounded-r-lg;}}.to-bottom-enter-active[data-v-7ea3917f],.to-bottom-leave-active[data-v-7ea3917f],.to-left-enter-active[data-v-7ea3917f],.to-left-leave-active[data-v-7ea3917f],.to-right-enter-active[data-v-7ea3917f],.to-right-leave-active[data-v-7ea3917f],.to-top-enter-active[data-v-7ea3917f],.to-top-leave-active[data-v-7ea3917f]{transition:all .25s}.to-top-enter-active[data-v-7ea3917f],.to-top-leave-to[data-v-7ea3917f]{opacity:0;transform:translateY(10px)}.to-top-leave[data-v-7ea3917f],.to-top-enter-to[data-v-7ea3917f]{opacity:1;transform:translateY(0)}.to-right-enter-active[data-v-7ea3917f],.to-right-leave-to[data-v-7ea3917f]{opacity:0;transform:translate(-10px)}.to-right-leave[data-v-7ea3917f],.to-right-enter-to[data-v-7ea3917f]{opacity:1;transform:translate(0)}.to-bottom-enter-active[data-v-7ea3917f],.to-bottom-leave-to[data-v-7ea3917f]{opacity:0;transform:translateY(-10px)}.to-bottom-leave[data-v-7ea3917f],.to-bottom-enter-to[data-v-7ea3917f]{opacity:1;transform:translateY(0)}.to-left-enter-active[data-v-7ea3917f],.to-left-leave-to[data-v-7ea3917f]{opacity:0;transform:translate(10px)}.to-left-leave[data-v-7ea3917f],.to-left-enter-to[data-v-7ea3917f]{opacity:1;transform:translate(0)}.slide-left-enter-active[data-v-aba06225],.slide-left-leave-active[data-v-aba06225]{transition:all .5s ease}.slide-left-enter-from[data-v-aba06225],.slide-left-leave-to[data-v-aba06225]{opacity:0;transform:translate(30px)}.slide-right-enter-active[data-v-aba06225],.slide-right-leave-active[data-v-aba06225]{transition:all .5s ease}.slide-right-enter-from[data-v-aba06225],.slide-right-leave-to[data-v-aba06225]{opacity:0;transform:translate(-30px)}.slide-top-enter-active[data-v-aba06225],.slide-top-leave-active[data-v-aba06225]{transition:all .5s ease}.slide-top-enter-from[data-v-aba06225],.slide-top-leave-to[data-v-aba06225]{opacity:0;transform:translateY(30px)}.slide-bottom-enter-active[data-v-aba06225],.slide-bottom-leave-active[data-v-aba06225]{transition:all .5s ease}.slide-bottom-enter-from[data-v-aba06225],.slide-bottom-leave-to[data-v-aba06225]{opacity:0;transform:translateY(-30px)}.fade-enter-active[data-v-aba06225],.fade-leave-active[data-v-aba06225]{transition:all .5s ease}.fade-enter-from[data-v-aba06225],.fade-leave-to[data-v-aba06225]{opacity:0}.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-tooltip-dark .v-popper__wrapper .v-popper__inner{background:rgba(0,0,0);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip-dark .v-popper__arrow-inner{visibility:hidden}.v-popper--theme-tooltip-dark .v-popper__arrow-outer{border-color:#000c}@media (prefers-color-scheme: dark){.v-popper--theme-tooltip-dark .v-popper__wrapper .v-popper__inner{background:rgb(55 65 81)}.v-popper--theme-tooltip-dark .v-popper__arrow-outer{border-color:#374151}}.v-popper--theme-tooltip-light .v-popper__wrapper .v-popper__inner{background:#fff;color:#000;padding:7px 12px 6px;border-radius:6px;border:1px solid #eeeeee;box-shadow:0 6px 30px #00000040}.v-popper--theme-tooltip-light .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-tooltip-light .v-popper__arrow-outer{border-color:#ddd}.v-popper__popper[data-popper-placement^=bottom] .v-popper__inner{margin-top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__inner{margin-left:-1px}input[type=range].range-lg[data-v-c4cfe3d4]::-moz-range-thumb{height:1.5rem;width:1.5rem}input[type=range].range-sm[data-v-c4cfe3d4]::-moz-range-thumb{height:1rem;width:1rem} diff --git a/dist/index.d.ts b/dist/index.d.ts new file mode 100644 index 0000000..f95faa4 --- /dev/null +++ b/dist/index.d.ts @@ -0,0 +1,76 @@ +export { default as FwbAccordion } from './components/FwbAccordion/FwbAccordion.vue'; +export { default as FwbAccordionContent } from './components/FwbAccordion/FwbAccordionContent.vue'; +export { default as FwbAccordionHeader } from './components/FwbAccordion/FwbAccordionHeader.vue'; +export { default as FwbAccordionPanel } from './components/FwbAccordion/FwbAccordionPanel.vue'; +export { default as FwbAlert } from './components/FwbAlert/FwbAlert.vue'; +export { default as FwbAvatar } from './components/FwbAvatar/FwbAvatar.vue'; +export { default as FwbAvatarStack } from './components/FwbAvatar/FwbAvatarStack.vue'; +export { default as FwbAvatarStackCounter } from './components/FwbAvatar/FwbAvatarStackCounter.vue'; +export { default as FwbBadge } from './components/FwbBadge/FwbBadge.vue'; +export { default as FwbBreadcrumb } from './components/FwbBreadcrumb/FwbBreadcrumb.vue'; +export { default as FwbBreadcrumbItem } from './components/FwbBreadcrumb/FwbBreadcrumbItem.vue'; +export { default as FwbButton } from './components/FwbButton/FwbButton.vue'; +export { default as FwbButtonGroup } from './components/FwbButtonGroup/FwbButtonGroup.vue'; +export { default as FwbCard } from './components/FwbCard/FwbCard.vue'; +export { default as FwbCarousel } from './components/FwbCarousel/FwbCarousel.vue'; +export { default as FwbDropdown } from './components/FwbDropdown/FwbDropdown.vue'; +export { default as FwbFooter } from './components/FwbFooter/FwbFooter.vue'; +export { default as FwbFooterBrand } from './components/FwbFooter/FwbFooterBrand.vue'; +export { default as FwbFooterCopyright } from './components/FwbFooter/FwbFooterCopyright.vue'; +export { default as FwbFooterIcon } from './components/FwbFooter/FwbFooterIcon.vue'; +export { default as FwbFooterLink } from './components/FwbFooter/FwbFooterLink.vue'; +export { default as FwbFooterLinkGroup } from './components/FwbFooter/FwbFooterLinkGroup.vue'; +export { default as FwbJumbotron } from './components/FwbJumbotron/FwbJumbotron.vue'; +export { default as FwbListGroup } from './components/FwbListGroup/FwbListGroup.vue'; +export { default as FwbListGroupItem } from './components/FwbListGroup/FwbListGroupItem.vue'; +export { default as FwbModal } from './components/FwbModal/FwbModal.vue'; +export { default as FwbNavbar } from './components/FwbNavbar/FwbNavbar.vue'; +export { default as FwbNavbarCollapse } from './components/FwbNavbar/FwbNavbarCollapse.vue'; +export { default as FwbNavbarLink } from './components/FwbNavbar/FwbNavbarLink.vue'; +export { default as FwbNavbarLogo } from './components/FwbNavbar/FwbNavbarLogo.vue'; +export { default as FwbMegaMenu } from './components/FwbNavbar/FwbMegaMenu.vue'; +export { default as FwbMegaMenuDropdown } from './components/FwbNavbar/FwbMegaMenuDropdown.vue'; +export { default as FwbPagination } from './components/FwbPagination/FwbPagination.vue'; +export { default as FwbProgress } from './components/FwbProgress/FwbProgress.vue'; +export { default as FwbRating } from './components/FwbRating/FwbRating.vue'; +export { default as FwbSidebar } from '@/components/FwbSidebar/FwbSidebar.vue'; +export { default as FwbSidebarCta } from '@/components/FwbSidebar/FwbSidebarCta.vue'; +export { default as FwbSidebarDropdownItem } from '@/components/FwbSidebar/FwbSidebarDropdownItem.vue'; +export { default as FwbSidebarItem } from '@/components/FwbSidebar/FwbSidebarItem.vue'; +export { default as FwbSidebarItemGroup } from '@/components/FwbSidebar/FwbSidebarItemGroup.vue'; +export { default as FwbSidebarLogo } from '@/components/FwbSidebar/FwbSidebarLogo.vue'; +export { default as FwbSpinner } from './components/FwbSpinner/FwbSpinner.vue'; +export { default as FwbTable } from './components/FwbTable/FwbTable.vue'; +export { default as FwbTableBody } from './components/FwbTable/FwbTableBody.vue'; +export { default as FwbTableCell } from './components/FwbTable/FwbTableCell.vue'; +export { default as FwbTableHead } from './components/FwbTable/FwbTableHead.vue'; +export { default as FwbTableHeadCell } from './components/FwbTable/FwbTableHeadCell.vue'; +export { default as FwbTableRow } from './components/FwbTable/FwbTableRow.vue'; +export { default as FwbTab } from './components/FwbTabs/FwbTab.vue'; +export { default as FwbTabs } from './components/FwbTabs/FwbTabs.vue'; +export { default as FwbTimeline } from './components/FwbTimeline/FwbTimeline.vue'; +export { default as FwbTimelineBody } from './components/FwbTimeline/FwbTimelineBody.vue'; +export { default as FwbTimelineContent } from './components/FwbTimeline/FwbTimelineContent.vue'; +export { default as FwbTimelineItem } from './components/FwbTimeline/FwbTimelineItem.vue'; +export { default as FwbTimelinePoint } from './components/FwbTimeline/FwbTimelinePoint.vue'; +export { default as FwbTimelineTime } from './components/FwbTimeline/FwbTimelineTime.vue'; +export { default as FwbTimelineTitle } from './components/FwbTimeline/FwbTimelineTitle.vue'; +export { default as FwbToast } from './components/FwbToast/FwbToast.vue'; +export { default as FwbToastProvider } from './components/FwbToast/FwbToastProvider.vue'; +export { default as FwbTooltip } from './components/FwbTooltip/FwbTooltip.vue'; +export { default as FwbCheckbox } from './components/FwbCheckbox/FwbCheckbox.vue'; +export { default as FwbFileInput } from './components/FwbFileInput/FwbFileInput.vue'; +export { default as FwbInput } from './components/FwbInput/FwbInput.vue'; +export { default as FwbRadio } from './components/FwbRadio/FwbRadio.vue'; +export { default as FwbRange } from './components/FwbRange/FwbRange.vue'; +export { default as FwbSelect } from './components/FwbSelect/FwbSelect.vue'; +export { default as FwbTextarea } from './components/FwbTextarea/FwbTextarea.vue'; +export { default as FwbToggle } from './components/FwbToggle/FwbToggle.vue'; +export { default as FwbA } from './components/Typography/FwbA.vue'; +export { default as FwbHeading } from './components/Typography/FwbHeading.vue'; +export { default as FwbImg } from './components/Typography/FwbImg.vue'; +export { default as FwbP } from './components/Typography/FwbP.vue'; +export { default as FlowbiteThemable } from './components/utils/FlowbiteThemable/FlowbiteThemable.vue'; +export { default as FlowbiteThemableChild } from './components/utils/FlowbiteThemable/FlowbiteThemableChild.vue'; +export { default as FwbSlotListener } from './components/utils/FwbSlotListener/FwbSlotListener.vue'; +export * from './composables'; diff --git a/dist/utils/flatten.d.ts b/dist/utils/flatten.d.ts new file mode 100644 index 0000000..a92e842 --- /dev/null +++ b/dist/utils/flatten.d.ts @@ -0,0 +1,2 @@ +import { type VNode, type VNodeChild } from 'vue'; +export declare function flatten(vNodes: VNodeChild[], filterCommentNode?: boolean, result?: VNode[]): VNode[]; diff --git a/dist/utils/getFirstSlotNode.d.ts b/dist/utils/getFirstSlotNode.d.ts new file mode 100644 index 0000000..515fd45 --- /dev/null +++ b/dist/utils/getFirstSlotNode.d.ts @@ -0,0 +1,2 @@ +import type { Slots, VNode } from 'vue'; +export declare function getFirstSlotVNode(slots: Slots, slotName?: string, props?: unknown): VNode | null; diff --git a/dist/utils/simplifyTailwindClasses.d.ts b/dist/utils/simplifyTailwindClasses.d.ts new file mode 100644 index 0000000..b788f65 --- /dev/null +++ b/dist/utils/simplifyTailwindClasses.d.ts @@ -0,0 +1,2 @@ +export type TailwindClassMatcherMap = Record string>; +export declare function simplifyTailwindClasses(...classes: (string | string[])[]): string; diff --git a/docs/.vitepress/dist/404.html b/docs/.vitepress/dist/404.html new file mode 100644 index 0000000..f63aa8b --- /dev/null +++ b/docs/.vitepress/dist/404.html @@ -0,0 +1,22 @@ + + + + + + 404 | Flowbite Vue 3 + + + + + + + + + + + +
Flowbite Vue 3

Appearance

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
Take me home

Released under the MIT License.

Copyright © 2023 Flowbite™

+ + + + \ No newline at end of file diff --git a/docs/.vitepress/dist/assets/app.8d65fb2d.js b/docs/.vitepress/dist/assets/app.8d65fb2d.js new file mode 100644 index 0000000..8f72dcb --- /dev/null +++ b/docs/.vitepress/dist/assets/app.8d65fb2d.js @@ -0,0 +1 @@ +import{aj as i,s,al as u,am as c,an as l,ao as d,ap as f,aq as m,ar as h,as as A,at as y,au as g,av as v,d as w,u as P,j as C,y as R,aw as _,ax as E,ay as b}from"./chunks/framework.3f630664.js";import{t as r}from"./chunks/theme.3359535a.js";const j={extends:r,Layout:()=>i(r.Layout,null,{})};function p(e){if(e.extends){const t=p(e.extends);return{...t,...e,async enhanceApp(a){t.enhanceApp&&await t.enhanceApp(a),e.enhanceApp&&await e.enhanceApp(a)}}}return e}const o=p(j),x=w({name:"VitePressApp",setup(){const{site:e}=P();return C(()=>{R(()=>{document.documentElement.lang=e.value.lang,document.documentElement.dir=e.value.dir})}),_(),E(),b(),o.setup&&o.setup(),()=>i(o.Layout)}});async function D(){const e=T(),t=L();t.provide(c,e);const a=l(e.route);return t.provide(d,a),t.component("Content",f),t.component("ClientOnly",m),Object.defineProperties(t.config.globalProperties,{$frontmatter:{get(){return a.frontmatter.value}},$params:{get(){return a.page.value.params}}}),o.enhanceApp&&await o.enhanceApp({app:t,router:e,siteData:h}),{app:t,router:e,data:a}}function L(){return A(x)}function T(){let e=s,t;return y(a=>{let n=g(a);return n?(e&&(t=n),(e||t===n)&&(n=n.replace(/\.js$/,".lean.js")),s&&(e=!1),v(()=>import(n),[])):null},o.NotFound)}s&&D().then(({app:e,router:t,data:a})=>{t.go().then(()=>{u(t.route,a.site),e.mount("#app")})});export{D as createApp}; diff --git a/docs/.vitepress/dist/assets/chunks/FlowbiteThemable.vue_vue_type_script_setup_true_lang.e3bec3bf.js b/docs/.vitepress/dist/assets/chunks/FlowbiteThemable.vue_vue_type_script_setup_true_lang.e3bec3bf.js new file mode 100644 index 0000000..3c8bcd7 --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/FlowbiteThemable.vue_vue_type_script_setup_true_lang.e3bec3bf.js @@ -0,0 +1 @@ +import{F as t}from"./useFlowbiteThemable.013ea29e.js";import{d as r,U as s,a2 as a,r as p}from"./framework.3f630664.js";const l=r({__name:"FlowbiteThemable",props:{theme:{default:"blue"}},setup(e){return s(t,a(e,"theme")),(o,n)=>p(o.$slots,"default")}});export{l as _}; diff --git a/docs/.vitepress/dist/assets/chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js b/docs/.vitepress/dist/assets/chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js new file mode 100644 index 0000000..8ed219e --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js @@ -0,0 +1 @@ +import{d as r,o,c as a,r as s,n as t}from"./framework.3f630664.js";const n=["href"],i=r({__name:"FwbA",props:{href:{default:""},color:{default:"text-primary-600 dark:text-primary-500"}},setup(l){return(e,c)=>(o(),a("a",{href:e.href,class:t([e.color,"inline-flex items-center hover:underline"])},[s(e.$slots,"default")],10,n))}});export{i as _}; diff --git a/docs/.vitepress/dist/assets/chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js b/docs/.vitepress/dist/assets/chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js new file mode 100644 index 0000000..f35bf24 --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js @@ -0,0 +1 @@ +import{u as y}from"./useMergeClasses.5cec3a4e.js";import{_ as k}from"./FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import{Y as G,g as a,d as P,$ as C,C as O,o as d,b,w as q,c as m,l as t,r as h,e as p,k as M,n as N,a3 as V,I as A}from"./framework.3f630664.js";const z={default:{default:"text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800",blue:"text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800",alternative:"font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600",dark:"text-white bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg dark:bg-gray-800 dark:focus:ring-gray-700 dark:border-gray-700",light:"text-gray-900 bg-white border border-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-200 font-medium rounded-lg dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:focus:ring-gray-700",green:"focus:outline-none text-white bg-green-700 focus:ring-4 focus:ring-green-300 font-medium rounded-lg dark:bg-green-600 dark:focus:ring-green-800",red:"focus:outline-none text-white bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg dark:bg-red-600 dark:focus:ring-red-900",yellow:"focus:outline-none text-white bg-yellow-400 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg dark:focus:ring-yellow-900",purple:"focus:outline-none text-white bg-purple-700 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg dark:bg-purple-600 dark:focus:ring-purple-900",pink:"focus:outline-none text-white bg-pink-700 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg dark:bg-pink-600 dark:focus:ring-pink-900"},hover:{default:"hover:bg-blue-800 dark:hover:bg-blue-700",blue:"hover:bg-blue-800 dark:hover:bg-blue-700",alternative:"hover:bg-gray-100 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700",dark:"hover:bg-gray-900 dark:hover:bg-gray-700",light:"hover:bg-gray-100 dark:hover:border-gray-600",green:"hover:bg-green-800 dark:hover:bg-green-700",red:"hover:bg-red-800 dark:hover:bg-red-700",yellow:"hover:bg-yellow-500",purple:"hover:bg-purple-800 dark:hover:bg-purple-700",pink:"hover:bg-pink-800 dark:hover:bg-pink-700"}},$={default:{dark:"text-gray-900 border border-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm text-center dark:border-gray-600 dark:text-gray-400 dark:focus:ring-gray-800",default:"text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800",blue:"text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800",green:"text-green-700 border border-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm text-center dark:border-green-500 dark:text-green-500 dark:focus:ring-green-800",purple:"text-purple-700 border border-purple-700 focus:ring-4 focus:outline-none focus:ring-purple-300 font-medium rounded-lg text-sm text-center dark:border-purple-400 dark:text-purple-400 dark:focus:ring-purple-900",pink:"text-pink-700 border border-pink-700 focus:ring-4 focus:outline-none focus:ring-pink-300 font-medium rounded-lg text-sm text-center dark:border-pink-400 dark:text-pink-400 dark:focus:ring-pink-900",red:"text-red-700 border border-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm text-center dark:border-red-500 dark:text-red-500 dark:focus:ring-red-900",yellow:"text-yellow-400 border border-yellow-400 focus:ring-4 focus:outline-none focus:ring-yellow-300 font-medium rounded-lg text-sm text-center dark:border-yellow-300 dark:text-yellow-300 dark:focus:ring-yellow-900"},hover:{dark:"hover:text-white hover:bg-gray-900 dark:hover:text-white dark:hover:bg-gray-600",default:"hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-600",blue:"hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-600",green:"hover:text-white hover:bg-green-800 dark:hover:text-white dark:hover:bg-green-600",purple:"hover:text-white hover:bg-purple-800 dark:hover:text-white dark:hover:bg-purple-500",pink:"hover:text-white hover:bg-pink-800 dark:hover:text-white dark:hover:bg-pink-500",red:"hover:text-white hover:bg-red-800 dark:hover:text-white dark:hover:bg-red-600",yellow:"hover:text-white hover:bg-yellow-500 dark:hover:text-white dark:hover:bg-yellow-400"}},B={hover:{"cyan-blue":"hover:bg-gradient-to-bl","green-blue":"hover:bg-gradient-to-bl","pink-orange":"hover:bg-gradient-to-bl","purple-blue":"hover:bg-gradient-to-bl","purple-pink":"hover:bg-gradient-to-l","red-yellow":"hover:bg-gradient-to-bl","teal-lime":"hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200",blue:"hover:bg-gradient-to-br",cyan:"hover:bg-gradient-to-br",green:"hover:bg-gradient-to-br",lime:"hover:bg-gradient-to-br",pink:"hover:bg-gradient-to-br",purple:"hover:bg-gradient-to-br",red:"hover:bg-gradient-to-br",teal:"hover:bg-gradient-to-br"},default:{"cyan-blue":"text-white bg-gradient-to-r from-cyan-500 to-blue-500 focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg","green-blue":"text-white bg-gradient-to-br from-green-400 to-blue-600 focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg","pink-orange":"text-white bg-gradient-to-br from-pink-500 to-orange-400 focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800 font-medium rounded-lg","purple-blue":"text-white bg-gradient-to-br from-purple-600 to-blue-500 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg","purple-pink":"text-white bg-gradient-to-r from-purple-500 to-pink-500 focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800 font-medium rounded-lg","red-yellow":"text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 font-medium rounded-lg","teal-lime":"text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-teal-700 font-medium rounded-lg",blue:"text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 rounded-lg",cyan:"text-white bg-gradient-to-r from-cyan-500 via-cyan-600 to-cyan-700 focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 rounded-lg",green:"text-white bg-gradient-to-r from-green-500 via-green-600 to-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 dark:focus:ring-green-800 rounded-lg",lime:"text-gray-900 bg-gradient-to-r from-lime-500 via-lime-600 to-lime-700 focus:ring-4 focus:outline-none focus:ring-lime-300 dark:focus:ring-lime-800 rounded-lg",pink:"text-white bg-gradient-to-r from-pink-500 via-pink-600 to-pink-700 focus:ring-4 focus:outline-none focus:ring-pink-300 dark:focus:ring-pink-800 rounded-lg",purple:"text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 rounded-lg",red:"text-white bg-gradient-to-r from-red-500 via-red-600 to-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 rounded-lg",teal:"text-white bg-gradient-to-r from-teal-500 via-teal-600 to-teal-700 focus:ring-4 focus:outline-none focus:ring-teal-300 dark:focus:ring-teal-800 rounded-lg"}},S={default:{"cyan-blue":"relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800","green-blue":"relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800","pink-orange":"relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-pink-500 to-orange-400 dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800","purple-blue":"relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800","purple-pink":"relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800","red-yellow":"relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 dark:text-white focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400","teal-lime":"relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-teal-300 to-lime-300 dark:text-white focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-lime-800"},hover:{"cyan-blue":"group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white","green-blue":"group-hover:from-green-400 group-hover:to-blue-600 hover:text-white","pink-orange":"group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white","purple-blue":"group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white","purple-pink":"group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white","red-yellow":"group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:hover:text-gray-900","teal-lime":"group-hover:from-teal-300 group-hover:to-lime-300 dark:hover:text-gray-900"}},D={xs:"text-xs px-2 py-1",sm:"text-sm px-3 py-1.5",md:"text-sm px-4 py-2",lg:"text-base px-5 py-2.5",xl:"text-base px-6 py-3"},E={xs:"text-xs p-1",sm:"text-sm p-1.5",md:"text-sm p-2",lg:"text-base p-2.5",xl:"text-base p-3"},j={blue:"shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80",cyan:"shadow-lg shadow-cyan-500/50 dark:shadow-lg dark:shadow-cyan-800/80",green:"shadow-lg shadow-green-500/50 dark:shadow-lg dark:shadow-green-800/80",lime:"shadow-lg shadow-lime-500/50 dark:shadow-lg dark:shadow-lime-800/80",pink:"shadow-lg shadow-pink-500/50 dark:shadow-lg dark:shadow-pink-800/80",purple:"shadow-lg shadow-purple-500/50 dark:shadow-lg dark:shadow-purple-800/80",red:"shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80",teal:"shadow-lg shadow-teal-500/50 dark:shadow-lg dark:shadow-teal-800/80"},w=["blue","green","cyan","teal","lime","red","pink","purple"],F=["alternative","light"];function I(e){const r=G(),s=a(()=>e.square.value?E[e.size.value]:D[e.size.value]),v=a(()=>{const n=!!e.gradient.value,f=!!e.color.value,g=e.outline.value;let l="",u="";if(n&&g)w.includes(e.gradient.value)?console.warn(`cannot use outline prop with "${e.gradient.value}" gradient`):(u=S.default[e.gradient.value],e.disabled.value||(l=S.hover[e.gradient.value]));else if(n)u=B.default[e.gradient.value],e.disabled.value||(l=B.hover[e.gradient.value]);else if(f&&g)if(F.includes(e.color.value))console.warn(`cannot use outline prop with "${e.color.value}" color`);else{const i=e.color.value;u=$.default[i],e.disabled.value||(l=$.hover[i])}else{const i=e.color.value;u=z.default[i],e.disabled.value||(l=z.hover[i])}let c="";return e.shadow.value===""?e.gradient.value&&w.includes(e.gradient.value)&&(c=j[e.gradient.value]):typeof e.shadow.value=="string"&&w.includes(e.shadow.value)&&(c=j[e.shadow.value]),[u,l,c,e.pill.value&&"!rounded-full",e.disabled.value&&"cursor-not-allowed opacity-50",n&&g?"p-0.5":s.value,(r.prefix||r.suffix||e.loading.value)&&"inline-flex items-center",e.class.value].filter(i=>i).join(" ")}),x=a(()=>e.gradient.value&&e.outline.value?["relative bg-white dark:bg-gray-900 rounded-md inline-flex items-center",s.value,e.disabled.value?"":"group-hover:bg-opacity-0 transition-all ease-in duration-75"].filter(n=>n).join(" "):"");return{wrapperClasses:v.value,spanClasses:x.value}}function R(e){const r={xs:"2.5",sm:"3",md:"4",lg:"5",xl:"6"},s=a(()=>r[e.size.value]);return{color:a(()=>e.outline.value?e.gradient.value?e.gradient.value.includes("purple")?"purple":e.gradient.value.includes("blue")?"blue":e.gradient.value.includes("pink")?"pink":e.gradient.value.includes("red")?"red":"white":["alternative","dark","light"].includes(e.color.value)?"white":e.color.value==="default"?"blue":e.color.value:"white"),size:s}}const Y={key:0,class:"mr-2"},H={key:0,class:"mr-2"},J={key:1,class:"ml-2"},K={key:1,class:"ml-2"},W=P({__name:"FwbButton",props:{class:{default:""},color:{default:"default"},gradient:{default:null},size:{default:"md"},shadow:{default:null},pill:{type:Boolean,default:!1},square:{type:Boolean,default:!1},outline:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},loadingPosition:{default:"prefix"},disabled:{type:Boolean,default:!1},href:{default:""},tag:{default:"a"}},setup(e){const r=e,s=I(C(r)),v=a(()=>y(s.wrapperClasses)),x=a(()=>y(s.spanClasses)),n=a(()=>r.outline&&r.gradient),f=a(()=>r.loading&&r.loadingPosition==="prefix"),g=a(()=>r.loading&&r.loadingPosition==="suffix"),{color:l,size:u}=R(C(r)),c=r.tag!=="a"?O(r.tag):"a",i=r.href?c:"button",_=r.tag==="router-link"||r.tag==="nuxt-link"?"to":"href";return(o,L)=>(d(),b(A(t(i)),V({class:v.value,[t(_)||""]:o.href,disabled:t(i)==="button"&&o.disabled}),{default:q(()=>[!n.value&&(o.$slots.prefix||f.value)?(d(),m("div",Y,[f.value?(d(),b(k,{key:0,color:t(l),size:t(u)},null,8,["color","size"])):h(o.$slots,"prefix",{key:1})])):p("",!0),M("span",{class:N(x.value)},[n.value&&(o.$slots.prefix||f.value)?(d(),m("span",H,[f.value?(d(),b(k,{key:0,color:t(l),size:t(u)},null,8,["color","size"])):h(o.$slots,"prefix",{key:1})])):p("",!0),h(o.$slots,"default"),n.value&&(o.$slots.suffix||g.value)?(d(),m("span",J,[g.value?(d(),b(k,{key:0,color:t(l),size:t(u)},null,8,["color","size"])):h(o.$slots,"suffix",{key:1})])):p("",!0)],2),!n.value&&(o.$slots.suffix||g.value)?(d(),m("div",K,[g.value?(d(),b(k,{key:0,color:t(l),size:t(u)},null,8,["color","size"])):h(o.$slots,"suffix",{key:1})])):p("",!0)]),_:3},16,["class","disabled"]))}});export{W as _}; diff --git a/docs/.vitepress/dist/assets/chunks/FwbDropdown.e54fafa7.js b/docs/.vitepress/dist/assets/chunks/FwbDropdown.e54fafa7.js new file mode 100644 index 0000000..276dbd9 --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/FwbDropdown.e54fafa7.js @@ -0,0 +1 @@ +import{x as k,h as r,g,O as y,d as S,a2 as $,o as m,c as v,k as u,H as a,w as n,r as h,n as N,l as _,N as D,e as T,T as B,a as I,t as R,p as V,m as z,_ as F}from"./framework.3f630664.js";import{o as H}from"./index.b15c605d.js";import{_ as M}from"./FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as w}from"./FwbSlotListener.vue_vue_type_script_lang.85726df2.js";import{c as O}from"./FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";const P="absolute z-10 bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700",l=8,j={bottom:"",left:"top-0",right:"top-0",top:""},E={bottom(e){return`bottom: -${e.height+l}px;`},left(e){return`left: -${e.width+l}px;`},right(e){return`right: -${e.width+l}px;`},top(e){return`top: -${e.height+l}px;`}};function G(e){k(e.visible,o=>{o&&y(()=>c())});const t=r(""),c=()=>{var s;const o=(s=e.contentRef.value)==null?void 0:s.getBoundingClientRect();if(!o){t.value="";return}t.value=E[e.placement.value](o)};return{contentClasses:g(()=>O(P,j[e.placement.value])),contentStyles:t}}const q=e=>(V("data-v-e40b6242"),e=e(),z(),e),A={class:"inline-flex items-center"},J=q(()=>u("svg",{class:"w-4 h-4 ml-2",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[u("path",{d:"M19 9l-7 7-7-7","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1)),K=S({__name:"FwbDropdown",props:{placement:{default:"bottom"},text:{default:""},transition:{default:""}},setup(e){const t=r(!1),c=()=>t.value=!1,d=()=>t.value=!t.value,o=e,s={bottom:"to-bottom",left:"to-left",right:"to-right",top:"to-top"},C=g(()=>o.transition===null?s[o.placement]:o.transition),p=r(),f=r(),{contentClasses:b,contentStyles:x}=G({placement:$(o,"placement"),visible:t,contentRef:p});return H(f,()=>{t.value&&(t.value=!1)}),(i,L)=>(m(),v("div",{ref_key:"wrapper",ref:f,class:"inline-flex relative"},[u("div",A,[a(w,{onClick:d},{default:n(()=>[h(i.$slots,"trigger",{},()=>[a(M,null,{suffix:n(()=>[J]),default:n(()=>[I(R(i.text)+" ",1)]),_:1})],!0)]),_:3})]),a(B,{name:C.value},{default:n(()=>[t.value?(m(),v("div",{key:0,ref_key:"content",ref:p,class:N([_(b)]),style:D(_(x))},[a(w,{onClick:c},{default:n(()=>[h(i.$slots,"default",{},void 0,!0)]),_:3})],6)):T("",!0)]),_:3},8,["name"])],512))}}),Z=F(K,[["__scopeId","data-v-e40b6242"]]);export{Z as F}; diff --git a/docs/.vitepress/dist/assets/chunks/FwbInput.vue_vue_type_script_setup_true_lang.a210c4c5.js b/docs/.vitepress/dist/assets/chunks/FwbInput.vue_vue_type_script_setup_true_lang.a210c4c5.js new file mode 100644 index 0000000..9485928 --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/FwbInput.vue_vue_type_script_setup_true_lang.a210c4c5.js @@ -0,0 +1 @@ +import{g as p,d as y,$ as x,o as a,c as l,n as f,l as c,t as h,e as u,k as m,r as i,a0 as C,ai as S,L as $,a7 as w}from"./framework.3f630664.js";import{a as B}from"./index.b15c605d.js";import{t as b}from"./FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";const o={Success:"success",Error:"error"},I="block mb-2 text-sm font-medium",M="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",V="cursor-not-allowed bg-gray-100",E={lg:"p-4",md:"p-2.5 text-sm",sm:"p-2 text-sm"},q="bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 focus:ring-green-500 focus:border-green-500",z="bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500";function D(t){const r=p(()=>{const s=t.validationStatus.value,n=s===o.Success?q:s===o.Error?z:"";return b(M,n,E[t.size.value],t.disabled.value?V:"")}),d=p(()=>{const s=t.validationStatus.value,n=s===o.Success?"text-green-700 dark:text-green-500":s===o.Error?"text-red-700 dark:text-red-500":"text-gray-900 dark:text-white";return b(I,n)});return{inputClasses:r,labelClasses:d}}const L={class:"flex relative"},N={key:0,class:"w-10 flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none overflow-hidden"},R=["disabled","type","required"],F={key:1,class:"absolute right-2.5 bottom-2.5"},P={key:2,class:"mt-2 text-sm text-gray-500 dark:text-gray-400"},A=y({__name:"FwbInput",props:{disabled:{type:Boolean,default:!1},label:{default:""},modelValue:{default:""},required:{type:Boolean,default:!1},size:{default:"md"},type:{default:"text"},validationStatus:{default:void 0}},setup(t){const r=t,d=B(r,"modelValue"),{inputClasses:s,labelClasses:n}=D(x(r)),k=p(()=>b("mt-2 text-sm",r.validationStatus===o.Success?"text-green-600 dark:text-green-500":"",r.validationStatus===o.Error?"text-red-600 dark:text-red-500":""));return(e,g)=>(a(),l("div",null,[e.label?(a(),l("label",{key:0,class:f(c(n))},h(e.label),3)):u("",!0),m("div",L,[e.$slots.prefix?(a(),l("div",N,[i(e.$slots,"prefix")])):u("",!0),C(m("input",$(e.$attrs,{"onUpdate:modelValue":g[0]||(g[0]=v=>w(d)?d.value=v:null),disabled:e.disabled,type:e.type,required:e.required,class:[c(s),e.$slots.prefix?"pl-10":""]}),null,16,R),[[S,c(d)]]),e.$slots.suffix?(a(),l("div",F,[i(e.$slots,"suffix")])):u("",!0)]),e.$slots.validationMessage?(a(),l("p",{key:1,class:f(k.value)},[i(e.$slots,"validationMessage")],2)):u("",!0),e.$slots.helper?(a(),l("p",P,[i(e.$slots,"helper")])):u("",!0)]))}});export{A as _}; diff --git a/docs/.vitepress/dist/assets/chunks/FwbListGroupItem.vue_vue_type_script_setup_true_lang.9898f565.js b/docs/.vitepress/dist/assets/chunks/FwbListGroupItem.vue_vue_type_script_setup_true_lang.9898f565.js new file mode 100644 index 0000000..15f0380 --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/FwbListGroupItem.vue_vue_type_script_setup_true_lang.9898f565.js @@ -0,0 +1 @@ +import{c as f}from"./FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as i,d as u,o as t,c as a,r as o,n as d,l as c,$ as m,e as n}from"./framework.3f630664.js";import{s as p}from"./simplifyTailwindClasses.275301d3.js";const b="overflow-hidden w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white";function g(){return{containerClasses:i(()=>f(b))}}const B=u({__name:"FwbListGroup",setup(e){const{containerClasses:r}=g();return(l,s)=>(t(),a("ul",{class:d(c(r))},[o(l.$slots,"default")],2))}}),y="inline-flex items-center w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600",C="block w-full px-4 py-2 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white",h="bg-gray-100 cursor-not-allowed dark:bg-gray-600 dark:text-gray-400";function k(e){return{itemClasses:i(()=>p(y,e.disabled.value?h:"",!e.disabled.value&&e.hover.value?C:""))}}const v={key:0,class:"mr-2"},_={key:1,class:"ml-2"},G=u({__name:"FwbListGroupItem",props:{hover:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},setup(e){const r=e,{itemClasses:l}=k(m(r));return(s,w)=>(t(),a("li",{class:d(c(l))},[s.$slots.prefix?(t(),a("div",v,[o(s.$slots,"prefix")])):n("",!0),o(s.$slots,"default"),s.$slots.suffix?(t(),a("div",_,[o(s.$slots,"suffix")])):n("",!0)],2))}});export{B as _,G as a}; diff --git a/docs/.vitepress/dist/assets/chunks/FwbP.vue_vue_type_script_setup_true_lang.b05f1505.js b/docs/.vitepress/dist/assets/chunks/FwbP.vue_vue_type_script_setup_true_lang.b05f1505.js new file mode 100644 index 0000000..994706e --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/FwbP.vue_vue_type_script_setup_true_lang.b05f1505.js @@ -0,0 +1 @@ +import{u as o}from"./useMergeClasses.5cec3a4e.js";import{d as l,g as n,o as r,c,r as m,n as p}from"./framework.3f630664.js";const u="mb-3 last:mb-0 text-gray-900 dark:text-white leading-normal",_=l({__name:"FwbP",props:{class:{default:""}},setup(s){const e=s,a=n(()=>o([u,e.class]));return(t,d)=>(r(),c("p",{class:p(a.value)},[m(t.$slots,"default")],2))}});export{_}; diff --git a/docs/.vitepress/dist/assets/chunks/FwbRadio.vue_vue_type_script_setup_true_lang.a8d8cba7.js b/docs/.vitepress/dist/assets/chunks/FwbRadio.vue_vue_type_script_setup_true_lang.a8d8cba7.js new file mode 100644 index 0000000..a2f8181 --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/FwbRadio.vue_vue_type_script_setup_true_lang.a8d8cba7.js @@ -0,0 +1 @@ +import{d as f,g as a,o as g,c as p,a0 as b,a4 as y,k as r,n as o,t as v,r as k}from"./framework.3f630664.js";import{t as C}from"./FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";const V={class:"flex w-[100%] items-center"},w=["disabled","name","value"],x="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600",B="m-2 mr-0 text-sm font-medium text-gray-900 dark:text-gray-300",D=f({__name:"FwbRadio",props:{modelValue:{default:""},name:{default:""},value:{default:""},label:{default:""},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(d,{emit:n}){const s=d,u=n,t=a({get(){return s.modelValue},set(e){u("update:modelValue",e)}}),i=a(()=>x),m=a(()=>C(B,s.disabled&&"text-gray-400 dark:text-gray-500"));return(e,l)=>(g(),p("label",V,[b(r("input",{"onUpdate:modelValue":l[0]||(l[0]=c=>t.value=c),type:"radio",disabled:e.disabled,name:e.name,value:e.value,class:o(i.value)},null,10,w),[[y,t.value]]),r("span",{class:o(m.value)},v(e.label),3),k(e.$slots,"default")]))}});export{D as _}; diff --git a/docs/.vitepress/dist/assets/chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js b/docs/.vitepress/dist/assets/chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js new file mode 100644 index 0000000..da83035 --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js @@ -0,0 +1,5 @@ +import{a8 as Jt,a9 as Kt,aa as Qt,d as be,Z as eo,o as Y,c as Te,a as He,t as Be,b as Oe,w as Ve,n as Re,l as De,I as to,L as oo,p as ro,m as no,O as io,ab as so,C as qe,k as ee,F as ao,r as Pe,e as at,N as Fe,W as lo,H as co,a3 as po,ac as uo}from"./framework.3f630664.js";const We=Jt({});function Rr(e,t){return Kt(()=>{e&&(We[e]={id:e,flush:(t==null?void 0:t.flush)??!1,alwaysOpen:(t==null?void 0:t.alwaysOpen)??!1,openFirstItem:(t==null?void 0:t.openFirstItem)??!0,panels:{}})}),Qt(()=>{e&&delete We[e]}),{accordionsStates:We}}function ho(){for(var e=0,t,o,r="";ee&&(t=0,r=o,o=new Map)}return{get:function(s){var a=o.get(s);if(a!==void 0)return a;if((a=r.get(s))!==void 0)return n(s,a),a},set:function(s,a){o.has(s)?o.set(s,a):n(s,a)}}}var zt="!";function yo(e){var t=e.separator||":",o=t.length===1,r=t[0],n=t.length;return function(s){for(var a=[],l=0,d=0,u,c=0;cd?u-d:void 0;return{modifiers:a,hasImportantModifier:f,baseClassName:m,maybePostfixModifierPosition:g}}}function xo(e){if(e.length<=1)return e;var t=[],o=[];return e.forEach(function(r){var n=r[0]==="[";n?(t.push.apply(t,o.sort().concat([r])),o=[]):o.push(r)}),t.push.apply(t,o.sort()),t}function _o(e){return{cache:bo(e.cacheSize),splitModifiers:yo(e),...fo(e)}}var $o=/\s+/;function So(e,t){var o=t.splitModifiers,r=t.getClassGroupId,n=t.getConflictingClassGroupIds,i=new Set;return e.trim().split($o).map(function(s){var a=o(s),l=a.modifiers,d=a.hasImportantModifier,u=a.baseClassName,c=a.maybePostfixModifierPosition,h=r(c?u.substring(0,c):u),p=!!c;if(!h){if(!c)return{isTailwindClass:!1,originalClassName:s};if(h=r(u),!h)return{isTailwindClass:!1,originalClassName:s};p=!1}var f=xo(l).join(":"),m=d?f+zt:f;return{isTailwindClass:!0,modifierId:m,classGroupId:h,originalClassName:s,hasPostfixModifier:p}}).reverse().filter(function(s){if(!s.isTailwindClass)return!0;var a=s.modifierId,l=s.classGroupId,d=s.hasPostfixModifier,u=a+l;return i.has(u)?!1:(i.add(u),n(l,d).forEach(function(c){return i.add(a+c)}),!0)}).reverse().map(function(s){return s.originalClassName}).join(" ")}function Co(){for(var e=arguments.length,t=new Array(e),o=0;o(Y(),Te("span",oo(s.$attrs,{class:De(r)}),[He(" © "+Be(s.year)+" ",1),(Y(),Oe(to(De(i)),{class:Re(De(n)),href:s.href},{default:Ve(()=>[He(Be(s.by),1)]),_:1},8,["class","href"])),He(" "+Be(s.copyrightMessage),1)],16))}});const Wo=["top","right","bottom","left"],ut=["start","end"],ht=Wo.reduce((e,t)=>e.concat(t,t+"-"+ut[0],t+"-"+ut[1]),[]),ge=Math.min,Q=Math.max,Go={left:"right",right:"left",bottom:"top",top:"bottom"},jo={start:"end",end:"start"};function Xe(e,t,o){return Q(e,ge(t,o))}function ne(e,t){return typeof e=="function"?e(t):e}function j(e){return e.split("-")[0]}function D(e){return e.split("-")[1]}function Nt(e){return e==="x"?"y":"x"}function tt(e){return e==="y"?"height":"width"}function ye(e){return["top","bottom"].includes(j(e))?"y":"x"}function ot(e){return Nt(ye(e))}function Lt(e,t,o){o===void 0&&(o=!1);const r=D(e),n=ot(e),i=tt(n);let s=n==="x"?r===(o?"end":"start")?"right":"left":r==="start"?"bottom":"top";return t.reference[i]>t.floating[i]&&(s=ke(s)),[s,ke(s)]}function Vo(e){const t=ke(e);return[Ae(e),t,Ae(t)]}function Ae(e){return e.replace(/start|end/g,t=>jo[t])}function qo(e,t,o){const r=["left","right"],n=["right","left"],i=["top","bottom"],s=["bottom","top"];switch(e){case"top":case"bottom":return o?t?n:r:t?r:n;case"left":case"right":return t?i:s;default:return[]}}function Uo(e,t,o,r){const n=D(e);let i=qo(j(e),o==="start",r);return n&&(i=i.map(s=>s+"-"+n),t&&(i=i.concat(i.map(Ae)))),i}function ke(e){return e.replace(/left|right|bottom|top/g,t=>Go[t])}function Yo(e){return{top:0,right:0,bottom:0,left:0,...e}}function Et(e){return typeof e!="number"?Yo(e):{top:e,right:e,bottom:e,left:e}}function ue(e){return{...e,top:e.y,left:e.x,right:e.x+e.width,bottom:e.y+e.height}}function ft(e,t,o){let{reference:r,floating:n}=e;const i=ye(t),s=ot(t),a=tt(s),l=j(t),d=i==="y",u=r.x+r.width/2-n.width/2,c=r.y+r.height/2-n.height/2,h=r[a]/2-n[a]/2;let p;switch(l){case"top":p={x:u,y:r.y-n.height};break;case"bottom":p={x:u,y:r.y+r.height};break;case"right":p={x:r.x+r.width,y:c};break;case"left":p={x:r.x-n.width,y:c};break;default:p={x:r.x,y:r.y}}switch(D(t)){case"start":p[s]-=h*(o&&d?-1:1);break;case"end":p[s]+=h*(o&&d?-1:1);break}return p}const Xo=async(e,t,o)=>{const{placement:r="bottom",strategy:n="absolute",middleware:i=[],platform:s}=o,a=i.filter(Boolean),l=await(s.isRTL==null?void 0:s.isRTL(t));let d=await s.getElementRects({reference:e,floating:t,strategy:n}),{x:u,y:c}=ft(d,r,l),h=r,p={},f=0;for(let m=0;m({name:"arrow",options:e,async fn(t){const{x:o,y:r,placement:n,rects:i,platform:s,elements:a,middlewareData:l}=t,{element:d,padding:u=0}=ne(e,t)||{};if(d==null)return{};const c=Et(u),h={x:o,y:r},p=ot(n),f=tt(p),m=await s.getDimensions(d),g=p==="y",v=g?"top":"left",w=g?"bottom":"right",_=g?"clientHeight":"clientWidth",C=i.reference[f]+i.reference[p]-h[p]-i.floating[f],$=h[p]-i.reference[p],T=await(s.getOffsetParent==null?void 0:s.getOffsetParent(d));let A=T?T[_]:0;(!A||!await(s.isElement==null?void 0:s.isElement(T)))&&(A=a.floating[_]||i.floating[f]);const R=C/2-$/2,z=A/2-m[f]/2-1,P=ge(c[v],z),M=ge(c[w],z),b=P,F=A-m[f]-M,k=A/2-m[f]/2+R,N=Xe(b,k,F),O=!l.arrow&&D(n)!=null&&k!==N&&i.reference[f]/2-(kD(n)===e),...o.filter(n=>D(n)!==e)]:o.filter(n=>j(n)===n)).filter(n=>e?D(n)===e||(t?Ae(n)!==n:!1):!0)}const Ko=function(e){return e===void 0&&(e={}),{name:"autoPlacement",options:e,async fn(t){var o,r,n;const{rects:i,middlewareData:s,placement:a,platform:l,elements:d}=t,{crossAxis:u=!1,alignment:c,allowedPlacements:h=ht,autoAlignment:p=!0,...f}=ne(e,t),m=c!==void 0||h===ht?Jo(c||null,p,h):h,g=await Ne(t,f),v=((o=s.autoPlacement)==null?void 0:o.index)||0,w=m[v];if(w==null)return{};const _=Lt(w,i,await(l.isRTL==null?void 0:l.isRTL(d.floating)));if(a!==w)return{reset:{placement:m[0]}};const C=[g[j(w)],g[_[0]],g[_[1]]],$=[...((r=s.autoPlacement)==null?void 0:r.overflows)||[],{placement:w,overflows:C}],T=m[v+1];if(T)return{data:{index:v+1,overflows:$},reset:{placement:T}};const A=$.map(P=>{const M=D(P.placement);return[P.placement,M&&u?P.overflows.slice(0,2).reduce((b,F)=>b+F,0):P.overflows[0],P.overflows]}).sort((P,M)=>P[1]-M[1]),z=((n=A.filter(P=>P[2].slice(0,D(P[0])?2:3).every(M=>M<=0))[0])==null?void 0:n[0])||A[0][0];return z!==a?{data:{index:v+1,overflows:$},reset:{placement:z}}:{}}}},Qo=function(e){return e===void 0&&(e={}),{name:"flip",options:e,async fn(t){var o,r;const{placement:n,middlewareData:i,rects:s,initialPlacement:a,platform:l,elements:d}=t,{mainAxis:u=!0,crossAxis:c=!0,fallbackPlacements:h,fallbackStrategy:p="bestFit",fallbackAxisSideDirection:f="none",flipAlignment:m=!0,...g}=ne(e,t);if((o=i.arrow)!=null&&o.alignmentOffset)return{};const v=j(n),w=j(a)===a,_=await(l.isRTL==null?void 0:l.isRTL(d.floating)),C=h||(w||!m?[ke(a)]:Vo(a));!h&&f!=="none"&&C.push(...Uo(a,m,f,_));const $=[a,...C],T=await Ne(t,g),A=[];let R=((r=i.flip)==null?void 0:r.overflows)||[];if(u&&A.push(T[v]),c){const b=Lt(n,s,_);A.push(T[b[0]],T[b[1]])}if(R=[...R,{placement:n,overflows:A}],!A.every(b=>b<=0)){var z,P;const b=(((z=i.flip)==null?void 0:z.index)||0)+1,F=$[b];if(F)return{data:{index:b,overflows:R},reset:{placement:F}};let k=(P=R.filter(N=>N.overflows[0]<=0).sort((N,O)=>N.overflows[1]-O.overflows[1])[0])==null?void 0:P.placement;if(!k)switch(p){case"bestFit":{var M;const N=(M=R.map(O=>[O.placement,O.overflows.filter(E=>E>0).reduce((E,ae)=>E+ae,0)]).sort((O,E)=>O[1]-E[1])[0])==null?void 0:M[0];N&&(k=N);break}case"initialPlacement":k=a;break}if(n!==k)return{reset:{placement:k}}}return{}}}};async function er(e,t){const{placement:o,platform:r,elements:n}=e,i=await(r.isRTL==null?void 0:r.isRTL(n.floating)),s=j(o),a=D(o),l=ye(o)==="y",d=["left","top"].includes(s)?-1:1,u=i&&l?-1:1,c=ne(t,e);let{mainAxis:h,crossAxis:p,alignmentAxis:f}=typeof c=="number"?{mainAxis:c,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...c};return a&&typeof f=="number"&&(p=a==="end"?f*-1:f),l?{x:p*u,y:h*d}:{x:h*d,y:p*u}}const tr=function(e){return e===void 0&&(e=0),{name:"offset",options:e,async fn(t){var o,r;const{x:n,y:i,placement:s,middlewareData:a}=t,l=await er(t,e);return s===((o=a.offset)==null?void 0:o.placement)&&(r=a.arrow)!=null&&r.alignmentOffset?{}:{x:n+l.x,y:i+l.y,data:{...l,placement:s}}}}},or=function(e){return e===void 0&&(e={}),{name:"shift",options:e,async fn(t){const{x:o,y:r,placement:n}=t,{mainAxis:i=!0,crossAxis:s=!1,limiter:a={fn:g=>{let{x:v,y:w}=g;return{x:v,y:w}}},...l}=ne(e,t),d={x:o,y:r},u=await Ne(t,l),c=ye(j(n)),h=Nt(c);let p=d[h],f=d[c];if(i){const g=h==="y"?"top":"left",v=h==="y"?"bottom":"right",w=p+u[g],_=p-u[v];p=Xe(w,p,_)}if(s){const g=c==="y"?"top":"left",v=c==="y"?"bottom":"right",w=f+u[g],_=f-u[v];f=Xe(w,f,_)}const m=a.fn({...t,[h]:p,[c]:f});return{...m,data:{x:m.x-o,y:m.y-r}}}}},rr=function(e){return e===void 0&&(e={}),{name:"size",options:e,async fn(t){const{placement:o,rects:r,platform:n,elements:i}=t,{apply:s=()=>{},...a}=ne(e,t),l=await Ne(t,a),d=j(o),u=D(o),c=ye(o)==="y",{width:h,height:p}=r.floating;let f,m;d==="top"||d==="bottom"?(f=d,m=u===(await(n.isRTL==null?void 0:n.isRTL(i.floating))?"start":"end")?"left":"right"):(m=d,f=u==="end"?"top":"bottom");const g=p-l[f],v=h-l[m],w=!t.middlewareData.shift;let _=g,C=v;if(c){const T=h-l.left-l.right;C=u||w?ge(v,T):T}else{const T=p-l.top-l.bottom;_=u||w?ge(g,T):T}if(w&&!u){const T=Q(l.left,0),A=Q(l.right,0),R=Q(l.top,0),z=Q(l.bottom,0);c?C=h-2*(T!==0||A!==0?T+A:Q(l.left,l.right)):_=p-2*(R!==0||z!==0?R+z:Q(l.top,l.bottom))}await s({...t,availableWidth:C,availableHeight:_});const $=await n.getDimensions(i.floating);return h!==$.width||p!==$.height?{reset:{rects:!0}}:{}}}};function I(e){var t;return((t=e.ownerDocument)==null?void 0:t.defaultView)||window}function W(e){return I(e).getComputedStyle(e)}const mt=Math.min,he=Math.max,ze=Math.round;function It(e){const t=W(e);let o=parseFloat(t.width),r=parseFloat(t.height);const n=e.offsetWidth,i=e.offsetHeight,s=ze(o)!==n||ze(r)!==i;return s&&(o=n,r=i),{width:o,height:r,fallback:s}}function J(e){return Bt(e)?(e.nodeName||"").toLowerCase():""}let $e;function Ht(){if($e)return $e;const e=navigator.userAgentData;return e&&Array.isArray(e.brands)?($e=e.brands.map(t=>t.brand+"/"+t.version).join(" "),$e):navigator.userAgent}function G(e){return e instanceof I(e).HTMLElement}function X(e){return e instanceof I(e).Element}function Bt(e){return e instanceof I(e).Node}function gt(e){return typeof ShadowRoot>"u"?!1:e instanceof I(e).ShadowRoot||e instanceof ShadowRoot}function Le(e){const{overflow:t,overflowX:o,overflowY:r,display:n}=W(e);return/auto|scroll|overlay|hidden|clip/.test(t+r+o)&&!["inline","contents"].includes(n)}function nr(e){return["table","td","th"].includes(J(e))}function Ze(e){const t=/firefox/i.test(Ht()),o=W(e),r=o.backdropFilter||o.WebkitBackdropFilter;return o.transform!=="none"||o.perspective!=="none"||!!r&&r!=="none"||t&&o.willChange==="filter"||t&&!!o.filter&&o.filter!=="none"||["transform","perspective"].some(n=>o.willChange.includes(n))||["paint","layout","strict","content"].some(n=>{const i=o.contain;return i!=null&&i.includes(n)})}function Dt(){return!/^((?!chrome|android).)*safari/i.test(Ht())}function rt(e){return["html","body","#document"].includes(J(e))}function Ft(e){return X(e)?e:e.contextElement}const Wt={x:1,y:1};function ie(e){const t=Ft(e);if(!G(t))return Wt;const o=t.getBoundingClientRect(),{width:r,height:n,fallback:i}=It(t);let s=(i?ze(o.width):o.width)/r,a=(i?ze(o.height):o.height)/n;return s&&Number.isFinite(s)||(s=1),a&&Number.isFinite(a)||(a=1),{x:s,y:a}}function ve(e,t,o,r){var n,i;t===void 0&&(t=!1),o===void 0&&(o=!1);const s=e.getBoundingClientRect(),a=Ft(e);let l=Wt;t&&(r?X(r)&&(l=ie(r)):l=ie(e));const d=a?I(a):window,u=!Dt()&&o;let c=(s.left+(u&&((n=d.visualViewport)==null?void 0:n.offsetLeft)||0))/l.x,h=(s.top+(u&&((i=d.visualViewport)==null?void 0:i.offsetTop)||0))/l.y,p=s.width/l.x,f=s.height/l.y;if(a){const m=I(a),g=r&&X(r)?I(r):r;let v=m.frameElement;for(;v&&r&&g!==m;){const w=ie(v),_=v.getBoundingClientRect(),C=getComputedStyle(v);_.x+=(v.clientLeft+parseFloat(C.paddingLeft))*w.x,_.y+=(v.clientTop+parseFloat(C.paddingTop))*w.y,c*=w.x,h*=w.y,p*=w.x,f*=w.y,c+=_.x,h+=_.y,v=I(v).frameElement}}return{width:p,height:f,top:h,right:c+p,bottom:h+f,left:c,x:c,y:h}}function Z(e){return((Bt(e)?e.ownerDocument:e.document)||window.document).documentElement}function Ee(e){return X(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.pageXOffset,scrollTop:e.pageYOffset}}function Gt(e){return ve(Z(e)).left+Ee(e).scrollLeft}function we(e){if(J(e)==="html")return e;const t=e.assignedSlot||e.parentNode||gt(e)&&e.host||Z(e);return gt(t)?t.host:t}function jt(e){const t=we(e);return rt(t)?t.ownerDocument.body:G(t)&&Le(t)?t:jt(t)}function Me(e,t){var o;t===void 0&&(t=[]);const r=jt(e),n=r===((o=e.ownerDocument)==null?void 0:o.body),i=I(r);return n?t.concat(i,i.visualViewport||[],Le(r)?r:[]):t.concat(r,Me(r))}function vt(e,t,o){return t==="viewport"?ue(function(r,n){const i=I(r),s=Z(r),a=i.visualViewport;let l=s.clientWidth,d=s.clientHeight,u=0,c=0;if(a){l=a.width,d=a.height;const h=Dt();(h||!h&&n==="fixed")&&(u=a.offsetLeft,c=a.offsetTop)}return{width:l,height:d,x:u,y:c}}(e,o)):X(t)?ue(function(r,n){const i=ve(r,!0,n==="fixed"),s=i.top+r.clientTop,a=i.left+r.clientLeft,l=G(r)?ie(r):{x:1,y:1};return{width:r.clientWidth*l.x,height:r.clientHeight*l.y,x:a*l.x,y:s*l.y}}(t,o)):ue(function(r){const n=Z(r),i=Ee(r),s=r.ownerDocument.body,a=he(n.scrollWidth,n.clientWidth,s.scrollWidth,s.clientWidth),l=he(n.scrollHeight,n.clientHeight,s.scrollHeight,s.clientHeight);let d=-i.scrollLeft+Gt(r);const u=-i.scrollTop;return W(s).direction==="rtl"&&(d+=he(n.clientWidth,s.clientWidth)-a),{width:a,height:l,x:d,y:u}}(Z(e)))}function wt(e){return G(e)&&W(e).position!=="fixed"?e.offsetParent:null}function bt(e){const t=I(e);let o=wt(e);for(;o&&nr(o)&&W(o).position==="static";)o=wt(o);return o&&(J(o)==="html"||J(o)==="body"&&W(o).position==="static"&&!Ze(o))?t:o||function(r){let n=we(r);for(;G(n)&&!rt(n);){if(Ze(n))return n;n=we(n)}return null}(e)||t}function ir(e,t,o){const r=G(t),n=Z(t),i=ve(e,!0,o==="fixed",t);let s={scrollLeft:0,scrollTop:0};const a={x:0,y:0};if(r||!r&&o!=="fixed")if((J(t)!=="body"||Le(n))&&(s=Ee(t)),G(t)){const l=ve(t,!0);a.x=l.x+t.clientLeft,a.y=l.y+t.clientTop}else n&&(a.x=Gt(n));return{x:i.left+s.scrollLeft-a.x,y:i.top+s.scrollTop-a.y,width:i.width,height:i.height}}const sr={getClippingRect:function(e){let{element:t,boundary:o,rootBoundary:r,strategy:n}=e;const i=o==="clippingAncestors"?function(d,u){const c=u.get(d);if(c)return c;let h=Me(d).filter(g=>X(g)&&J(g)!=="body"),p=null;const f=W(d).position==="fixed";let m=f?we(d):d;for(;X(m)&&!rt(m);){const g=W(m),v=Ze(m);(f?v||p:v||g.position!=="static"||!p||!["absolute","fixed"].includes(p.position))?p=g:h=h.filter(w=>w!==m),m=we(m)}return u.set(d,h),h}(t,this._c):[].concat(o),s=[...i,r],a=s[0],l=s.reduce((d,u)=>{const c=vt(t,u,n);return d.top=he(c.top,d.top),d.right=mt(c.right,d.right),d.bottom=mt(c.bottom,d.bottom),d.left=he(c.left,d.left),d},vt(t,a,n));return{width:l.right-l.left,height:l.bottom-l.top,x:l.left,y:l.top}},convertOffsetParentRelativeRectToViewportRelativeRect:function(e){let{rect:t,offsetParent:o,strategy:r}=e;const n=G(o),i=Z(o);if(o===i)return t;let s={scrollLeft:0,scrollTop:0},a={x:1,y:1};const l={x:0,y:0};if((n||!n&&r!=="fixed")&&((J(o)!=="body"||Le(i))&&(s=Ee(o)),G(o))){const d=ve(o);a=ie(o),l.x=d.x+o.clientLeft,l.y=d.y+o.clientTop}return{width:t.width*a.x,height:t.height*a.y,x:t.x*a.x-s.scrollLeft*a.x+l.x,y:t.y*a.y-s.scrollTop*a.y+l.y}},isElement:X,getDimensions:function(e){return G(e)?It(e):e.getBoundingClientRect()},getOffsetParent:bt,getDocumentElement:Z,getScale:ie,async getElementRects(e){let{reference:t,floating:o,strategy:r}=e;const n=this.getOffsetParent||bt,i=this.getDimensions;return{reference:ir(t,await n(o),r),floating:{x:0,y:0,...await i(o)}}},getClientRects:e=>Array.from(e.getClientRects()),isRTL:e=>W(e).direction==="rtl"},ar=(e,t,o)=>{const r=new Map,n={platform:sr,...o},i={...n.platform,_c:r};return Xo(e,t,{...n,platform:i})},oe={disabled:!1,distance:5,skidding:0,container:"body",boundary:void 0,instantMove:!1,disposeTimeout:5e3,popperTriggers:[],strategy:"absolute",preventOverflow:!0,flip:!0,shift:!0,overflowPadding:0,arrowPadding:0,arrowOverflow:!0,themes:{tooltip:{placement:"top",triggers:["hover","focus","touch"],hideTriggers:e=>[...e,"click"],delay:{show:200,hide:0},handleResize:!1,html:!1,loadingContent:"..."},dropdown:{placement:"bottom",triggers:["click"],delay:0,handleResize:!0,autoHide:!0},menu:{$extend:"dropdown",triggers:["hover","focus"],popperTriggers:["hover","focus"],delay:{show:0,hide:400}}}};function Je(e,t){let o=oe.themes[e]||{},r;do r=o[t],typeof r>"u"?o.$extend?o=oe.themes[o.$extend]||{}:(o=null,r=oe[t]):o=null;while(o);return r}function lr(e){const t=[e];let o=oe.themes[e]||{};do o.$extend&&!o.$resetCss?(t.push(o.$extend),o=oe.themes[o.$extend]||{}):o=null;while(o);return t.map(r=>`v-popper--theme-${r}`)}function yt(e){const t=[e];let o=oe.themes[e]||{};do o.$extend?(t.push(o.$extend),o=oe.themes[o.$extend]||{}):o=null;while(o);return t}let se=!1;if(typeof window<"u"){se=!1;try{const e=Object.defineProperty({},"passive",{get(){se=!0}});window.addEventListener("test",null,e)}catch{}}let Vt=!1;typeof window<"u"&&typeof navigator<"u"&&(Vt=/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream);const dr=["auto","top","bottom","left","right"].reduce((e,t)=>e.concat([t,`${t}-start`,`${t}-end`]),[]),xt={hover:"mouseenter",focus:"focus",click:"click",touch:"touchstart",pointer:"pointerdown"},_t={hover:"mouseleave",focus:"blur",click:"click",touch:"touchend",pointer:"pointerup"};function $t(e,t){const o=e.indexOf(t);o!==-1&&e.splice(o,1)}function Ge(){return new Promise(e=>requestAnimationFrame(()=>{requestAnimationFrame(e)}))}const B=[];let K=null;const St={};function Ct(e){let t=St[e];return t||(t=St[e]=[]),t}let Ke=function(){};typeof window<"u"&&(Ke=window.Element);function x(e){return function(t){return Je(t.theme,e)}}const je="__floating-vue__popper",qt=()=>be({name:"VPopper",provide(){return{[je]:{parentPopper:this}}},inject:{[je]:{default:null}},props:{theme:{type:String,required:!0},targetNodes:{type:Function,required:!0},referenceNode:{type:Function,default:null},popperNode:{type:Function,required:!0},shown:{type:Boolean,default:!1},showGroup:{type:String,default:null},ariaId:{default:null},disabled:{type:Boolean,default:x("disabled")},positioningDisabled:{type:Boolean,default:x("positioningDisabled")},placement:{type:String,default:x("placement"),validator:e=>dr.includes(e)},delay:{type:[String,Number,Object],default:x("delay")},distance:{type:[Number,String],default:x("distance")},skidding:{type:[Number,String],default:x("skidding")},triggers:{type:Array,default:x("triggers")},showTriggers:{type:[Array,Function],default:x("showTriggers")},hideTriggers:{type:[Array,Function],default:x("hideTriggers")},popperTriggers:{type:Array,default:x("popperTriggers")},popperShowTriggers:{type:[Array,Function],default:x("popperShowTriggers")},popperHideTriggers:{type:[Array,Function],default:x("popperHideTriggers")},container:{type:[String,Object,Ke,Boolean],default:x("container")},boundary:{type:[String,Ke],default:x("boundary")},strategy:{type:String,validator:e=>["absolute","fixed"].includes(e),default:x("strategy")},autoHide:{type:[Boolean,Function],default:x("autoHide")},handleResize:{type:Boolean,default:x("handleResize")},instantMove:{type:Boolean,default:x("instantMove")},eagerMount:{type:Boolean,default:x("eagerMount")},popperClass:{type:[String,Array,Object],default:x("popperClass")},computeTransformOrigin:{type:Boolean,default:x("computeTransformOrigin")},autoMinSize:{type:Boolean,default:x("autoMinSize")},autoSize:{type:[Boolean,String],default:x("autoSize")},autoMaxSize:{type:Boolean,default:x("autoMaxSize")},autoBoundaryMaxSize:{type:Boolean,default:x("autoBoundaryMaxSize")},preventOverflow:{type:Boolean,default:x("preventOverflow")},overflowPadding:{type:[Number,String],default:x("overflowPadding")},arrowPadding:{type:[Number,String],default:x("arrowPadding")},arrowOverflow:{type:Boolean,default:x("arrowOverflow")},flip:{type:Boolean,default:x("flip")},shift:{type:Boolean,default:x("shift")},shiftCrossAxis:{type:Boolean,default:x("shiftCrossAxis")},noAutoFocus:{type:Boolean,default:x("noAutoFocus")},disposeTimeout:{type:Number,default:x("disposeTimeout")}},emits:["show","hide","update:shown","apply-show","apply-hide","close-group","close-directive","auto-hide","resize","dispose"],data(){return{isShown:!1,isMounted:!1,skipTransition:!1,classes:{showFrom:!1,showTo:!1,hideFrom:!1,hideTo:!0},result:{x:0,y:0,placement:"",strategy:this.strategy,arrow:{x:0,y:0,centerOffset:0},transformOrigin:null},shownChildren:new Set,lastAutoHide:!0}},computed:{popperId(){return this.ariaId!=null?this.ariaId:this.randomId},shouldMountContent(){return this.eagerMount||this.isMounted},slotData(){return{popperId:this.popperId,isShown:this.isShown,shouldMountContent:this.shouldMountContent,skipTransition:this.skipTransition,autoHide:typeof this.autoHide=="function"?this.lastAutoHide:this.autoHide,show:this.show,hide:this.hide,handleResize:this.handleResize,onResize:this.onResize,classes:{...this.classes,popperClass:this.popperClass},result:this.positioningDisabled?null:this.result,attrs:this.$attrs}},parentPopper(){var e;return(e=this[je])==null?void 0:e.parentPopper},hasPopperShowTriggerHover(){var e,t;return((e=this.popperTriggers)==null?void 0:e.includes("hover"))||((t=this.popperShowTriggers)==null?void 0:t.includes("hover"))}},watch:{shown:"$_autoShowHide",disabled(e){e?this.dispose():this.init()},async container(){this.isShown&&(this.$_ensureTeleport(),await this.$_computePosition())},...["triggers","positioningDisabled"].reduce((e,t)=>(e[t]="$_refreshListeners",e),{}),...["placement","distance","skidding","boundary","strategy","overflowPadding","arrowPadding","preventOverflow","shift","shiftCrossAxis","flip"].reduce((e,t)=>(e[t]="$_computePosition",e),{})},created(){this.$_isDisposed=!0,this.randomId=`popper_${[Math.random(),Date.now()].map(e=>e.toString(36).substring(2,10)).join("_")}`,this.autoMinSize&&console.warn('[floating-vue] `autoMinSize` option is deprecated. Use `autoSize="min"` instead.'),this.autoMaxSize&&console.warn("[floating-vue] `autoMaxSize` option is deprecated. Use `autoBoundaryMaxSize` instead.")},mounted(){this.init(),this.$_detachPopperNode()},activated(){this.$_autoShowHide()},deactivated(){this.hide()},beforeUnmount(){this.dispose()},methods:{show({event:e=null,skipDelay:t=!1,force:o=!1}={}){var r,n;(r=this.parentPopper)!=null&&r.lockedChild&&this.parentPopper.lockedChild!==this||(this.$_pendingHide=!1,(o||!this.disabled)&&(((n=this.parentPopper)==null?void 0:n.lockedChild)===this&&(this.parentPopper.lockedChild=null),this.$_scheduleShow(e,t),this.$emit("show"),this.$_showFrameLocked=!0,requestAnimationFrame(()=>{this.$_showFrameLocked=!1})),this.$emit("update:shown",!0))},hide({event:e=null,skipDelay:t=!1}={}){var o;if(!this.$_hideInProgress){if(this.shownChildren.size>0){this.$_pendingHide=!0;return}if(this.hasPopperShowTriggerHover&&this.$_isAimingPopper()){this.parentPopper&&(this.parentPopper.lockedChild=this,clearTimeout(this.parentPopper.lockedChildTimer),this.parentPopper.lockedChildTimer=setTimeout(()=>{this.parentPopper.lockedChild===this&&(this.parentPopper.lockedChild.hide({skipDelay:t}),this.parentPopper.lockedChild=null)},1e3));return}((o=this.parentPopper)==null?void 0:o.lockedChild)===this&&(this.parentPopper.lockedChild=null),this.$_pendingHide=!1,this.$_scheduleHide(e,t),this.$emit("hide"),this.$emit("update:shown",!1)}},init(){var e;this.$_isDisposed&&(this.$_isDisposed=!1,this.isMounted=!1,this.$_events=[],this.$_preventShow=!1,this.$_referenceNode=((e=this.referenceNode)==null?void 0:e.call(this))??this.$el,this.$_targetNodes=this.targetNodes().filter(t=>t.nodeType===t.ELEMENT_NODE),this.$_popperNode=this.popperNode(),this.$_innerNode=this.$_popperNode.querySelector(".v-popper__inner"),this.$_arrowNode=this.$_popperNode.querySelector(".v-popper__arrow-container"),this.$_swapTargetAttrs("title","data-original-title"),this.$_detachPopperNode(),this.triggers.length&&this.$_addEventListeners(),this.shown&&this.show())},dispose(){this.$_isDisposed||(this.$_isDisposed=!0,this.$_removeEventListeners(),this.hide({skipDelay:!0}),this.$_detachPopperNode(),this.isMounted=!1,this.isShown=!1,this.$_updateParentShownChildren(!1),this.$_swapTargetAttrs("data-original-title","title"),this.$emit("dispose"))},async onResize(){this.isShown&&(await this.$_computePosition(),this.$emit("resize"))},async $_computePosition(){if(this.$_isDisposed||this.positioningDisabled)return;const e={strategy:this.strategy,middleware:[]};(this.distance||this.skidding)&&e.middleware.push(tr({mainAxis:this.distance,crossAxis:this.skidding}));const t=this.placement.startsWith("auto");if(t?e.middleware.push(Ko({alignment:this.placement.split("-")[1]??""})):e.placement=this.placement,this.preventOverflow&&(this.shift&&e.middleware.push(or({padding:this.overflowPadding,boundary:this.boundary,crossAxis:this.shiftCrossAxis})),!t&&this.flip&&e.middleware.push(Qo({padding:this.overflowPadding,boundary:this.boundary}))),e.middleware.push(Zo({element:this.$_arrowNode,padding:this.arrowPadding})),this.arrowOverflow&&e.middleware.push({name:"arrowOverflow",fn:({placement:r,rects:n,middlewareData:i})=>{let s;const{centerOffset:a}=i.arrow;return r.startsWith("top")||r.startsWith("bottom")?s=Math.abs(a)>n.reference.width/2:s=Math.abs(a)>n.reference.height/2,{data:{overflow:s}}}}),this.autoMinSize||this.autoSize){const r=this.autoSize?this.autoSize:this.autoMinSize?"min":null;e.middleware.push({name:"autoSize",fn:({rects:n,placement:i,middlewareData:s})=>{var a;if((a=s.autoSize)!=null&&a.skip)return{};let l,d;return i.startsWith("top")||i.startsWith("bottom")?l=n.reference.width:d=n.reference.height,this.$_innerNode.style[r==="min"?"minWidth":r==="max"?"maxWidth":"width"]=l!=null?`${l}px`:null,this.$_innerNode.style[r==="min"?"minHeight":r==="max"?"maxHeight":"height"]=d!=null?`${d}px`:null,{data:{skip:!0},reset:{rects:!0}}}})}(this.autoMaxSize||this.autoBoundaryMaxSize)&&(this.$_innerNode.style.maxWidth=null,this.$_innerNode.style.maxHeight=null,e.middleware.push(rr({boundary:this.boundary,padding:this.overflowPadding,apply:({availableWidth:r,availableHeight:n})=>{this.$_innerNode.style.maxWidth=r!=null?`${r}px`:null,this.$_innerNode.style.maxHeight=n!=null?`${n}px`:null}})));const o=await ar(this.$_referenceNode,this.$_popperNode,e);Object.assign(this.result,{x:o.x,y:o.y,placement:o.placement,strategy:o.strategy,arrow:{...o.middlewareData.arrow,...o.middlewareData.arrowOverflow}})},$_scheduleShow(e=null,t=!1){if(this.$_updateParentShownChildren(!0),this.$_hideInProgress=!1,clearTimeout(this.$_scheduleTimer),K&&this.instantMove&&K.instantMove&&K!==this.parentPopper){K.$_applyHide(!0),this.$_applyShow(!0);return}t?this.$_applyShow():this.$_scheduleTimer=setTimeout(this.$_applyShow.bind(this),this.$_computeDelay("show"))},$_scheduleHide(e=null,t=!1){if(this.shownChildren.size>0){this.$_pendingHide=!0;return}this.$_updateParentShownChildren(!1),this.$_hideInProgress=!0,clearTimeout(this.$_scheduleTimer),this.isShown&&(K=this),t?this.$_applyHide():this.$_scheduleTimer=setTimeout(this.$_applyHide.bind(this),this.$_computeDelay("hide"))},$_computeDelay(e){const t=this.delay;return parseInt(t&&t[e]||t||0)},async $_applyShow(e=!1){clearTimeout(this.$_disposeTimer),clearTimeout(this.$_scheduleTimer),this.skipTransition=e,!this.isShown&&(this.$_ensureTeleport(),await Ge(),await this.$_computePosition(),await this.$_applyShowEffect(),this.positioningDisabled||this.$_registerEventListeners([...Me(this.$_referenceNode),...Me(this.$_popperNode)],"scroll",()=>{this.$_computePosition()}))},async $_applyShowEffect(){if(this.$_hideInProgress)return;if(this.computeTransformOrigin){const t=this.$_referenceNode.getBoundingClientRect(),o=this.$_popperNode.querySelector(".v-popper__wrapper"),r=o.parentNode.getBoundingClientRect(),n=t.x+t.width/2-(r.left+o.offsetLeft),i=t.y+t.height/2-(r.top+o.offsetTop);this.result.transformOrigin=`${n}px ${i}px`}this.isShown=!0,this.$_applyAttrsToTarget({"aria-describedby":this.popperId,"data-popper-shown":""});const e=this.showGroup;if(e){let t;for(let o=0;o0){this.$_pendingHide=!0,this.$_hideInProgress=!1;return}if(clearTimeout(this.$_scheduleTimer),!this.isShown)return;this.skipTransition=e,$t(B,this),B.length===0&&document.body.classList.remove("v-popper--some-open");for(const o of yt(this.theme)){const r=Ct(o);$t(r,this),r.length===0&&document.body.classList.remove(`v-popper--some-open--${o}`)}K===this&&(K=null),this.isShown=!1,this.$_applyAttrsToTarget({"aria-describedby":void 0,"data-popper-shown":void 0}),clearTimeout(this.$_disposeTimer);const t=this.disposeTimeout;t!==null&&(this.$_disposeTimer=setTimeout(()=>{this.$_popperNode&&(this.$_detachPopperNode(),this.isMounted=!1)},t)),this.$_removeEventListeners("scroll"),this.$emit("apply-hide"),this.classes.showFrom=!1,this.classes.showTo=!1,this.classes.hideFrom=!0,this.classes.hideTo=!1,await Ge(),this.classes.hideFrom=!1,this.classes.hideTo=!0},$_autoShowHide(){this.shown?this.show():this.hide()},$_ensureTeleport(){if(this.$_isDisposed)return;let e=this.container;if(typeof e=="string"?e=window.document.querySelector(e):e===!1&&(e=this.$_targetNodes[0].parentNode),!e)throw new Error("No container for popover: "+this.container);e.appendChild(this.$_popperNode),this.isMounted=!0},$_addEventListeners(){const e=o=>{this.isShown&&!this.$_hideInProgress||(o.usedByTooltip=!0,!this.$_preventShow&&this.show({event:o}))};this.$_registerTriggerListeners(this.$_targetNodes,xt,this.triggers,this.showTriggers,e),this.$_registerTriggerListeners([this.$_popperNode],xt,this.popperTriggers,this.popperShowTriggers,e);const t=o=>{o.usedByTooltip||this.hide({event:o})};this.$_registerTriggerListeners(this.$_targetNodes,_t,this.triggers,this.hideTriggers,t),this.$_registerTriggerListeners([this.$_popperNode],_t,this.popperTriggers,this.popperHideTriggers,t)},$_registerEventListeners(e,t,o){this.$_events.push({targetNodes:e,eventType:t,handler:o}),e.forEach(r=>r.addEventListener(t,o,se?{passive:!0}:void 0))},$_registerTriggerListeners(e,t,o,r,n){let i=o;r!=null&&(i=typeof r=="function"?r(i):r),i.forEach(s=>{const a=t[s];a&&this.$_registerEventListeners(e,a,n)})},$_removeEventListeners(e){const t=[];this.$_events.forEach(o=>{const{targetNodes:r,eventType:n,handler:i}=o;!e||e===n?r.forEach(s=>s.removeEventListener(n,i)):t.push(o)}),this.$_events=t},$_refreshListeners(){this.$_isDisposed||(this.$_removeEventListeners(),this.$_addEventListeners())},$_handleGlobalClose(e,t=!1){this.$_showFrameLocked||(this.hide({event:e}),e.closePopover?this.$emit("close-directive"):this.$emit("auto-hide"),t&&(this.$_preventShow=!0,setTimeout(()=>{this.$_preventShow=!1},300)))},$_detachPopperNode(){this.$_popperNode.parentNode&&this.$_popperNode.parentNode.removeChild(this.$_popperNode)},$_swapTargetAttrs(e,t){for(const o of this.$_targetNodes){const r=o.getAttribute(e);r&&(o.removeAttribute(e),o.setAttribute(t,r))}},$_applyAttrsToTarget(e){for(const t of this.$_targetNodes)for(const o in e){const r=e[o];r==null?t.removeAttribute(o):t.setAttribute(o,r)}},$_updateParentShownChildren(e){let t=this.parentPopper;for(;t;)e?t.shownChildren.add(this.randomId):(t.shownChildren.delete(this.randomId),t.$_pendingHide&&t.hide()),t=t.parentPopper},$_isAimingPopper(){const e=this.$_referenceNode.getBoundingClientRect();if(fe>=e.left&&fe<=e.right&&me>=e.top&&me<=e.bottom){const t=this.$_popperNode.getBoundingClientRect(),o=fe-q,r=me-U,n=t.left+t.width/2-q+(t.top+t.height/2)-U+t.width+t.height,i=q+o*n,s=U+r*n;return Se(q,U,i,s,t.left,t.top,t.left,t.bottom)||Se(q,U,i,s,t.left,t.top,t.right,t.top)||Se(q,U,i,s,t.right,t.top,t.right,t.bottom)||Se(q,U,i,s,t.left,t.bottom,t.right,t.bottom)}return!1}},render(){return this.$slots.default(this.slotData)}});typeof document<"u"&&typeof window<"u"&&(Vt?(document.addEventListener("touchstart",Tt,se?{passive:!0,capture:!0}:!0),document.addEventListener("touchend",pr,se?{passive:!0,capture:!0}:!0)):(window.addEventListener("mousedown",Tt,!0),window.addEventListener("click",cr,!0)),window.addEventListener("resize",fr));function Tt(e){for(let t=0;t=0;r--){const n=B[r];try{const i=n.$_containsGlobalTarget=ur(n,e);n.$_pendingHide=!1,requestAnimationFrame(()=>{if(n.$_pendingHide=!1,!o[n.randomId]&&Pt(n,i,e)){if(n.$_handleGlobalClose(e,t),!e.closeAllPopover&&e.closePopover&&i){let a=n.parentPopper;for(;a;)o[a.randomId]=!0,a=a.parentPopper;return}let s=n.parentPopper;for(;s&&Pt(s,s.$_containsGlobalTarget,e);)s.$_handleGlobalClose(e,t),s=s.parentPopper}})}catch{}}}function ur(e,t){const o=e.popperNode();return e.$_mouseDownContains||o.contains(t.target)}function Pt(e,t,o){return o.closeAllPopover||o.closePopover&&t||hr(e,o)&&!t}function hr(e,t){if(typeof e.autoHide=="function"){const o=e.autoHide(t);return e.lastAutoHide=o,o}return e.autoHide}function fr(e){for(let t=0;t{q=fe,U=me,fe=e.clientX,me=e.clientY},se?{passive:!0}:void 0);function Se(e,t,o,r,n,i,s,a){const l=((s-n)*(t-i)-(a-i)*(e-n))/((a-i)*(o-e)-(s-n)*(r-t)),d=((o-e)*(t-i)-(r-t)*(e-n))/((a-i)*(o-e)-(s-n)*(r-t));return l>=0&&l<=1&&d>=0&&d<=1}const mr={extends:qt()},nt=(e,t)=>{const o=e.__vccOpts||e;for(const[r,n]of t)o[r]=n;return o};function gr(e,t,o,r,n,i){return Y(),Te("div",{ref:"reference",class:Re(["v-popper",{"v-popper--shown":e.slotData.isShown}])},[Pe(e.$slots,"default",po(uo(e.slotData)))],2)}const vr=nt(mr,[["render",gr]]);function wr(){var e=window.navigator.userAgent,t=e.indexOf("MSIE ");if(t>0)return parseInt(e.substring(t+5,e.indexOf(".",t)),10);var o=e.indexOf("Trident/");if(o>0){var r=e.indexOf("rv:");return parseInt(e.substring(r+3,e.indexOf(".",r)),10)}var n=e.indexOf("Edge/");return n>0?parseInt(e.substring(n+5,e.indexOf(".",n)),10):-1}let Ce;function Qe(){Qe.init||(Qe.init=!0,Ce=wr()!==-1)}var Ie={name:"ResizeObserver",props:{emitOnMount:{type:Boolean,default:!1},ignoreWidth:{type:Boolean,default:!1},ignoreHeight:{type:Boolean,default:!1}},emits:["notify"],mounted(){Qe(),io(()=>{this._w=this.$el.offsetWidth,this._h=this.$el.offsetHeight,this.emitOnMount&&this.emitSize()});const e=document.createElement("object");this._resizeObject=e,e.setAttribute("aria-hidden","true"),e.setAttribute("tabindex",-1),e.onload=this.addResizeHandlers,e.type="text/html",Ce&&this.$el.appendChild(e),e.data="about:blank",Ce||this.$el.appendChild(e)},beforeUnmount(){this.removeResizeHandlers()},methods:{compareAndNotify(){(!this.ignoreWidth&&this._w!==this.$el.offsetWidth||!this.ignoreHeight&&this._h!==this.$el.offsetHeight)&&(this._w=this.$el.offsetWidth,this._h=this.$el.offsetHeight,this.emitSize())},emitSize(){this.$emit("notify",{width:this._w,height:this._h})},addResizeHandlers(){this._resizeObject.contentDocument.defaultView.addEventListener("resize",this.compareAndNotify),this.compareAndNotify()},removeResizeHandlers(){this._resizeObject&&this._resizeObject.onload&&(!Ce&&this._resizeObject.contentDocument&&this._resizeObject.contentDocument.defaultView.removeEventListener("resize",this.compareAndNotify),this.$el.removeChild(this._resizeObject),this._resizeObject.onload=null,this._resizeObject=null)}}};const br=so();ro("data-v-b329ee4c");const yr={class:"resize-observer",tabindex:"-1"};no();const xr=br((e,t,o,r,n,i)=>(Y(),Oe("div",yr)));Ie.render=xr;Ie.__scopeId="data-v-b329ee4c";Ie.__file="src/components/ResizeObserver.vue";const Yt=(e="theme")=>({computed:{themeClass(){return lr(this[e])}}}),_r=be({name:"VPopperContent",components:{ResizeObserver:Ie},mixins:[Yt()],props:{popperId:String,theme:String,shown:Boolean,mounted:Boolean,skipTransition:Boolean,autoHide:Boolean,handleResize:Boolean,classes:Object,result:Object},emits:["hide","resize"],methods:{toPx(e){return e!=null&&!isNaN(e)?`${e}px`:null}}}),$r=["id","aria-hidden","tabindex","data-popper-placement"],Sr={ref:"inner",class:"v-popper__inner"},Cr=ee("div",{class:"v-popper__arrow-outer"},null,-1),Tr=ee("div",{class:"v-popper__arrow-inner"},null,-1),Pr=[Cr,Tr];function Ar(e,t,o,r,n,i){const s=qe("ResizeObserver");return Y(),Te("div",{id:e.popperId,ref:"popover",class:Re(["v-popper__popper",[e.themeClass,e.classes.popperClass,{"v-popper__popper--shown":e.shown,"v-popper__popper--hidden":!e.shown,"v-popper__popper--show-from":e.classes.showFrom,"v-popper__popper--show-to":e.classes.showTo,"v-popper__popper--hide-from":e.classes.hideFrom,"v-popper__popper--hide-to":e.classes.hideTo,"v-popper__popper--skip-transition":e.skipTransition,"v-popper__popper--arrow-overflow":e.result&&e.result.arrow.overflow,"v-popper__popper--no-positioning":!e.result}]]),style:Fe(e.result?{position:e.result.strategy,transform:`translate3d(${Math.round(e.result.x)}px,${Math.round(e.result.y)}px,0)`}:void 0),"aria-hidden":e.shown?"false":"true",tabindex:e.autoHide?0:void 0,"data-popper-placement":e.result?e.result.placement:void 0,onKeyup:t[2]||(t[2]=lo(a=>e.autoHide&&e.$emit("hide"),["esc"]))},[ee("div",{class:"v-popper__backdrop",onClick:t[0]||(t[0]=a=>e.autoHide&&e.$emit("hide"))}),ee("div",{class:"v-popper__wrapper",style:Fe(e.result?{transformOrigin:e.result.transformOrigin}:void 0)},[ee("div",Sr,[e.mounted?(Y(),Te(ao,{key:0},[ee("div",null,[Pe(e.$slots,"default")]),e.handleResize?(Y(),Oe(s,{key:0,onNotify:t[1]||(t[1]=a=>e.$emit("resize",a))})):at("",!0)],64)):at("",!0)],512),ee("div",{ref:"arrow",class:"v-popper__arrow-container",style:Fe(e.result?{left:e.toPx(e.result.arrow.x),top:e.toPx(e.result.arrow.y)}:void 0)},Pr,4)],4)],46,$r)}const Xt=nt(_r,[["render",Ar]]),Zt={methods:{show(...e){return this.$refs.popper.show(...e)},hide(...e){return this.$refs.popper.hide(...e)},dispose(...e){return this.$refs.popper.dispose(...e)},onResize(...e){return this.$refs.popper.onResize(...e)}}},kr=be({name:"VPopperWrapper",components:{Popper:vr,PopperContent:Xt},mixins:[Zt,Yt("finalTheme")],props:{theme:{type:String,default:null}},computed:{finalTheme(){return this.theme??this.$options.vPopperTheme}},methods:{getTargetNodes(){return Array.from(this.$el.children).filter(e=>e!==this.$refs.popperContent.$el)}}});function zr(e,t,o,r,n,i){const s=qe("PopperContent"),a=qe("Popper");return Y(),Oe(a,{ref:"popper",theme:e.finalTheme,"target-nodes":e.getTargetNodes,"popper-node":()=>e.$refs.popperContent.$el,class:Re([e.themeClass])},{default:Ve(({popperId:l,isShown:d,shouldMountContent:u,skipTransition:c,autoHide:h,show:p,hide:f,handleResize:m,onResize:g,classes:v,result:w})=>[Pe(e.$slots,"default",{shown:d,show:p,hide:f}),co(s,{ref:"popperContent","popper-id":l,theme:e.finalTheme,shown:d,mounted:u,"skip-transition":c,"auto-hide":h,"handle-resize":m,classes:v,result:w,onHide:f,onResize:g},{default:Ve(()=>[Pe(e.$slots,"popper",{shown:d,hide:f})]),_:2},1032,["popper-id","theme","shown","mounted","skip-transition","auto-hide","handle-resize","classes","result","onHide","onResize"])]),_:3},8,["theme","target-nodes","popper-node","class"])}const it=nt(kr,[["render",zr]]);({...it});({...it});const Mr={...it,name:"VTooltip",vPopperTheme:"tooltip"};be({name:"VTooltipDirective",components:{Popper:qt(),PopperContent:Xt},mixins:[Zt],inheritAttrs:!1,props:{theme:{type:String,default:"tooltip"},html:{type:Boolean,default:e=>Je(e.theme,"html")},content:{type:[String,Number,Function],default:null},loadingContent:{type:String,default:e=>Je(e.theme,"loadingContent")},targetNodes:{type:Function,required:!0}},data(){return{asyncContent:null}},computed:{isContentAsync(){return typeof this.content=="function"},loading(){return this.isContentAsync&&this.asyncContent==null},finalContent(){return this.isContentAsync?this.loading?this.loadingContent:this.asyncContent:this.content}},watch:{content:{handler(){this.fetchContent(!0)},immediate:!0},async finalContent(){await this.$nextTick(),this.$refs.popper.onResize()}},created(){this.$_fetchId=0},methods:{fetchContent(e){if(typeof this.content=="function"&&this.$_isShown&&(e||!this.$_loading&&this.asyncContent==null)){this.asyncContent=null,this.$_loading=!0;const t=++this.$_fetchId,o=this.content(this);o.then?o.then(r=>this.onResult(t,r)):this.onResult(t,o)}},onResult(e,t){e===this.$_fetchId&&(this.$_loading=!1,this.asyncContent=t)},onShow(){this.$_isShown=!0,this.fetchContent()},onHide(){this.$_isShown=!1}}});const Er=Mr;export{Er as V,Lr as _,Nr as c,pt as t,Rr as u}; diff --git a/docs/.vitepress/dist/assets/chunks/FwbSlotListener.vue_vue_type_script_lang.85726df2.js b/docs/.vitepress/dist/assets/chunks/FwbSlotListener.vue_vue_type_script_lang.85726df2.js new file mode 100644 index 0000000..ba671b7 --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/FwbSlotListener.vue_vue_type_script_lang.85726df2.js @@ -0,0 +1 @@ +import{f as X}from"./flatten.a0535777.js";import{i as d}from"./isArray.513c67aa.js";import{d as J}from"./framework.3f630664.js";var Y=typeof global=="object"&&global&&global.Object===Object&&global;const Z=Y;var q=typeof self=="object"&&self&&self.Object===Object&&self,V=Z||q||Function("return this")();const P=V;var Q=P.Symbol;const u=Q;var R=Object.prototype,W=R.hasOwnProperty,k=R.toString,h=u?u.toStringTag:void 0;function tt(t){var n=W.call(t,h),e=t[h];try{t[h]=void 0;var r=!0}catch{}var o=k.call(t);return r&&(n?t[h]=e:delete t[h]),o}var nt=Object.prototype,et=nt.toString;function rt(t){return et.call(t)}var ot="[object Null]",it="[object Undefined]",I=u?u.toStringTag:void 0;function C(t){return t==null?t===void 0?it:ot:I&&I in Object(t)?tt(t):rt(t)}function T(t){return t!=null&&typeof t=="object"}var at="[object Symbol]";function w(t){return typeof t=="symbol"||T(t)&&C(t)==at}function st(t,n){for(var e=-1,r=t==null?0:t.length,o=Array(r);++e0){if(++n>=xt)return arguments[0]}else n=0;return t.apply(void 0,arguments)}}function Ht(t){return function(){return t}}var jt=function(){try{var t=E(Object,"defineProperty");return t({},"",{}),t}catch{}}();const b=jt;var zt=b?function(t,n){return b(t,"toString",{configurable:!0,enumerable:!1,value:Ht(n),writable:!0})}:ct;const Dt=zt;var Rt=At(Dt);const Gt=Rt;var Nt=9007199254740991,Bt=/^(?:0|[1-9]\d*)$/;function N(t,n){var e=typeof t;return n=n??Nt,!!n&&(e=="number"||e!="symbol"&&Bt.test(t))&&t>-1&&t%1==0&&t-1&&t%1==0&&t<=Yt}var qt="[object Arguments]";function z(t){return T(t)&&C(t)==qt}var L=Object.prototype,Vt=L.hasOwnProperty,Qt=L.propertyIsEnumerable,Wt=z(function(){return arguments}())?z:function(t){return T(t)&&Vt.call(t,"callee")&&!Qt.call(t,"callee")};const U=Wt;var kt=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,tn=/^\w*$/;function nn(t,n){if(d(t))return!1;var e=typeof t;return e=="number"||e=="symbol"||e=="boolean"||t==null||w(t)?!0:tn.test(t)||!kt.test(t)||n!=null&&t in Object(n)}var en=E(Object,"create");const g=en;function rn(){this.__data__=g?g(null):{},this.size=0}function on(t){var n=this.has(t)&&delete this.__data__[t];return this.size-=n?1:0,n}var an="__lodash_hash_undefined__",sn=Object.prototype,un=sn.hasOwnProperty;function cn(t){var n=this.__data__;if(g){var e=n[t];return e===an?void 0:e}return un.call(n,t)?n[t]:void 0}var ln=Object.prototype,fn=ln.hasOwnProperty;function pn(t){var n=this.__data__;return g?n[t]!==void 0:fn.call(n,t)}var hn="__lodash_hash_undefined__";function gn(t,n){var e=this.__data__;return this.size+=this.has(t)?0:1,e[t]=g&&n===void 0?hn:n,this}function l(t){var n=-1,e=t==null?0:t.length;for(this.clear();++n-1}function Sn(t,n){var e=this.__data__,r=m(e,t);return r<0?(++this.size,e.push([t,n])):e[r][1]=n,this}function p(t){var n=-1,e=t==null?0:t.length;for(this.clear();++n0&&e(a)?n>1?K(a,n-1,e,r,o):Nn(o,a):r||(o[o.length]=a)}return o}function Ln(t){var n=t==null?0:t.length;return n?K(t,1):[]}function Un(t){return Gt(Jt(t,void 0,Ln),t+"")}function Kn(t,n){return t!=null&&n in Object(t)}function Xn(t,n,e){n=S(n,t);for(var r=-1,o=n.length,s=!1;++r{e.forEach(r=>{t.props?t.props=Object.assign({},t.props):t.props={};const o=t.props[r],s=n[r];o?t.props[r]=(...i)=>{o(...i),s(...i)}:t.props[r]=s})})}const oe=J({name:"SlotListener",props:{trigger:{type:String,default:"click"}},emits:["click","focus","blur","mouseenter","mouseleave"],setup(t,{emit:n}){return{handleClick:a=>{n("click",a)},handleBlur:a=>{n("blur",a)},handleFocus:a=>{n("focus",a)},handleMouseLeave:a=>{n("mouseleave",a)},handleMouseEnter:a=>{n("mouseenter",a)}}},render(){const{$slots:t}=this,n={onClick:this.handleClick,onMouseenter:this.handleMouseEnter,onMouseleave:this.handleMouseLeave,onFocus:this.handleFocus,onBlur:this.handleBlur},e=Wn(t,"default"),r=[n];return e!=null&&e.props&&r.push(Qn(e.props,"onClick","onMouseenter","onMouseleave","onFocus","onBlur")),e&&te(e,{onBlur:s=>{r.forEach(i=>{var a;(a=i==null?void 0:i.onBlur)==null||a.call(i,s)})},onFocus:s=>{r.forEach(i=>{var a;(a=i==null?void 0:i.onFocus)==null||a.call(i,s)})},onClick:s=>{r.forEach(i=>{var a;(a=i==null?void 0:i.onClick)==null||a.call(i,s)})},onMouseenter:s=>{r.forEach(i=>{var a;(a=i==null?void 0:i.onMouseenter)==null||a.call(i,s)})},onMouseleave:s=>{r.forEach(i=>{var a;(a=i==null?void 0:i.onMouseleave)==null||a.call(i,s)})}}),e}});export{oe as _}; diff --git a/docs/.vitepress/dist/assets/chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js b/docs/.vitepress/dist/assets/chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js new file mode 100644 index 0000000..edf1e10 --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js @@ -0,0 +1 @@ +import{c as r}from"./FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as s,d as i,$ as c,o as C,c as u,n as w,l as h,k as t}from"./framework.3f630664.js";const p={0:"w-0 h-0",.5:"w-0.5 h-0.5",1:"w-1 h-1",1.5:"w-1.5 h-1.5",10:"w-10 h-10",11:"w-11 h-11",12:"w-12 h-12",2:"w-2 h-2",2.5:"w-2.5 h-2.5",3:"w-3 h-3",4:"w-4 h-4",5:"w-5 h-5",6:"w-6 h-6",7:"w-7 h-7",8:"w-8 h-8",9:"w-9 h-9"},f={blue:"fill-blue-600",gray:"fill-gray-600 dark:fill-gray-300",green:"fill-green-500",pink:"fill-pink-600",purple:"fill-purple-600",red:"fill-red-600",white:"fill-white",yellow:"fill-yellow-400"};function d(e){const l=s(()=>p[e.size.value]),n=s(()=>f[e.color.value]),a=s(()=>"text-gray-200 dark:text-gray-600"),o=s(()=>"animate-spin");return{spinnerClasses:s(()=>r(o.value,a.value,n.value,l.value))}}const m=t("path",{d:"M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",fill:"currentColor"},null,-1),_=t("path",{d:"M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",fill:"currentFill"},null,-1),g=[m,_],x=i({__name:"FwbSpinner",props:{color:{default:"blue"},size:{default:"4"}},setup(e){const l=e,{spinnerClasses:n}=d(c(l));return(a,o)=>(C(),u("svg",{class:w(h(n)),fill:"none",role:"status",viewBox:"0 0 100 101",xmlns:"http://www.w3.org/2000/svg"},g,2))}});export{x as _}; diff --git a/docs/.vitepress/dist/assets/chunks/FwbTabs.vue_vue_type_script_setup_true_lang.ebf7e19d.js b/docs/.vitepress/dist/assets/chunks/FwbTabs.vue_vue_type_script_setup_true_lang.ebf7e19d.js new file mode 100644 index 0000000..523b397 --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/FwbTabs.vue_vue_type_script_setup_true_lang.ebf7e19d.js @@ -0,0 +1 @@ +import{d as C,l,o,c as i,r as y,e as A,F as k,a0 as $,ah as L,M as v,g as d,a2 as _,k as b,t as D,n as T,U as u,Y as J,D as K,a3 as R,ac as M,b as P}from"./framework.3f630664.js";import{f as q}from"./flatten.a0535777.js";import{t as z}from"./FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{s as g}from"./simplifyTailwindClasses.275301d3.js";import{u as W}from"./useFlowbiteThemable.013ea29e.js";const E="flowbite-tab-activate-func-injection",B="flowbite-tab-active-name-injection",N="flowbite-tab-style-injection",S="flowbite-tab-visibility-directive-injection",U={key:0},G={key:1},ie=C({__FLOWBITE_TAB__:!0,__name:"FwbTab",props:{name:{type:String,required:!0},title:{type:String,default:""},disabled:{type:Boolean,default:!1}},setup(e){const t=v(B,""),r=v(S,"if");return(a,s)=>l(r)==="if"?(o(),i(k,{key:0},[l(t)===e.name?(o(),i("div",U,[y(a.$slots,"default")])):A("",!0)],64)):l(r)==="show"?$((o(),i("div",G,[y(a.$slots,"default")],512)),[[L,l(t)===e.name]]):A("",!0)}});function H(e){const t=d(()=>z("flex flex-wrap font-medium text-center text-gray-500 dark:text-gray-400 text-sm",e.variant==="underline"&&"-mb-px",e.variant==="default"&&"border-b border-gray-200 dark:border-gray-700"));return{divClasses:d(()=>e.variant==="underline"?"border-b border-gray-200 dark:border-gray-700 font-medium text-center text-gray-500 dark:text-gray-400 text-sm":""),ulClasses:t}}const Q={default:"cursor-pointer inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300",active:"cursor-pointer inline-block p-4 text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500",disabled:"inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500"},X={default:"cursor-pointer inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300",active:"cursor-pointer inline-block p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500",disabled:"inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500"},Z={default:"cursor-pointer inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white",active:"cursor-pointer inline-block py-3 px-4 text-white bg-blue-600 rounded-lg active",disabled:"inline-block py-3 px-4 text-gray-400 cursor-not-allowed dark:text-gray-500"};function ee(e){const t=W();return{tabClasses:d(()=>{const a=t.isActive.value,s=e.active.value?"active":e.disabled.value?"disabled":"default";return e.variant==="default"?g(Q[s],(a&&s)==="active"?t.textClasses.value:""):e.variant==="underline"?g(X[s],(a&&s)==="active"?[t.borderClasses.value,t.textClasses.value]:""):e.variant==="pills"?g(Z[s],(a&&s)==="active"?[t.backgroundClasses.value,"text-white"]:""):""})}}const te=C({__name:"FwbTabPane",props:{name:{type:String,required:!0},title:{type:String,default:""},disabled:{type:Boolean,default:!1},active:{type:Boolean,default:!1}},setup(e){const t=e,r=v(N);r||console.warn("you can't use Tab outside of Tabs component. No tab style injection found");const a=v(E);a||console.warn("you can't use Tab outside of Tabs component. No tab activate injection found");const s=()=>{if(!t.disabled){if(!a)return console.warn("no onActivate");a(t.name)}},{tabClasses:f}=ee({active:_(t,"active"),disabled:_(t,"disabled"),variant:r});return(V,p)=>(o(),i("li",null,[b("div",{class:T(l(f)),onClick:s},D(e.title),3)]))}}),de=C({inheritAttrs:!1,__name:"FwbTabs",props:{variant:{default:"default"},modelValue:{default:""},directive:{default:"if"}},emits:["update:modelValue","click:pane"],setup(e,{emit:t}){const r=e,a=t,{ulClasses:s,divClasses:f}=H(r);u(N,r.variant);const p=J().default,F=d(()=>p?q(p()).filter(n=>n.type.__FLOWBITE_TAB__):[]),m=d({get:()=>r.modelValue,set:n=>a("update:modelValue",n)});u(B,m),u(S,_(r,"directive"));const j=n=>{m.value=n},Y=()=>{a("click:pane")};return u(E,j),(n,ae)=>(o(),i(k,null,[b("div",{class:T(l(f))},[b("ul",{class:T(l(s))},[(o(!0),i(k,null,K(F.value,(c,O)=>{var x,h,w,I;return o(),P(te,{key:O,active:m.value===((x=c.props)==null?void 0:x.name),disabled:(h=c.props)==null?void 0:h.disabled,name:(w=c.props)==null?void 0:w.name,title:(I=c.props)==null?void 0:I.title,onClick:Y},null,8,["active","disabled","name","title"])}),128))],2)],2),b("div",R(M(n.$attrs)),[y(n.$slots,"default")],16)],64))}});export{de as _,ie as a}; diff --git a/docs/.vitepress/dist/assets/chunks/FwbToast.vue_vue_type_script_setup_true_lang.8ed93404.js b/docs/.vitepress/dist/assets/chunks/FwbToast.vue_vue_type_script_setup_true_lang.8ed93404.js new file mode 100644 index 0000000..fe503cd --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/FwbToast.vue_vue_type_script_setup_true_lang.8ed93404.js @@ -0,0 +1 @@ +import{s as f}from"./simplifyTailwindClasses.275301d3.js";import{g,d as x,Z as L,$ as k,o,b as _,w as B,r as m,n as u,l as v,I as $,h as z,c,e as h,k as i}from"./framework.3f630664.js";import{u as M}from"./useFlowbiteThemable.013ea29e.js";const T={danger:"text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200",empty:"",success:"text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200",warning:"text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200"},A={center:"items-center",end:"items-end",start:"items-start"},C="flex w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800",b="text-sm font-normal";function S(e){const n=g(()=>T[e.type.value]),r=g(()=>{const t=A[e.alignment.value];return e.divide.value?f(C,"dark:divide-gray-700 divide-x divide-gray-200",t):f(C,t)}),s=g(()=>e.type.value!=="empty"&&e.divide.value?f(b,"pl-3"):b);return{typeClasses:n,wrapperClasses:r,contentClasses:s}}function F(e){var a;const{backgroundClasses:n,borderClasses:r,disabledClasses:s,focusClasses:t,hoverClasses:d,isActive:y,textClasses:p}=M((a=e.theme)==null?void 0:a.value);return{classes:g(()=>{if(!y.value)return"";const l=[];return e.apply.value.includes("text")&&l.push(p.value),e.apply.value.includes("border")&&l.push(r.value),e.apply.value.includes("background")&&l.push(n.value),e.apply.value.includes("hover")&&l.push(d.value),e.apply.value.includes("disabled")&&l.push(s.value),e.apply.value.includes("focus")&&l.push(t.value),l.join(" ")})}}const V=x({__name:"FlowbiteThemableChild",props:{apply:{type:Array,required:!0},tag:{type:String,default:"div"},theme:{type:String,default:void 0}},setup(e){const n=L(),r=e,{classes:s}=F(k(r)),t=g(()=>n.class||"");return(d,y)=>(o(),_($(e.tag),{class:u(v(f)(t.value,v(s)))},{default:B(()=>[m(d.$slots,"default")]),_:3},8,["class"]))}}),j={key:1,"aria-hidden":"true",class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},N=i("path",{"clip-rule":"evenodd",d:"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z","fill-rule":"evenodd"},null,-1),q=[N],D={key:2,"aria-hidden":"true",class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},E=i("path",{"clip-rule":"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z","fill-rule":"evenodd"},null,-1),H=[E],I={key:3,"aria-hidden":"true",class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},R=i("path",{"clip-rule":"evenodd",d:"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z","fill-rule":"evenodd"},null,-1),W=[R],Z=i("span",{class:"sr-only"},"Close",-1),G=i("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[i("path",{"clip-rule":"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),J=[Z,G],Q=x({__name:"FwbToast",props:{type:{type:String,default:"empty"},alignment:{type:String,default:"center"},closable:{type:Boolean,default:!1},divide:{type:Boolean,default:!1}},emits:["close"],setup(e,{emit:n}){const r=e,s=z(!0),t=n,{typeClasses:d,wrapperClasses:y,contentClasses:p}=S(k(r)),w=()=>{t("close"),s.value=!1};return(a,l)=>s.value?(o(),c("div",{key:0,id:"toast-default",class:u(v(y)),role:"alert"},[e.type!=="empty"||a.$slots.icon?(o(),_(V,{key:0,apply:["background","text"],class:u(["inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg",v(d)])},{default:B(()=>[a.$slots.icon?m(a.$slots,"icon",{key:0,class:u({"ml-3":e.type!=="empty"})}):e.type==="success"?(o(),c("svg",j,q)):e.type==="danger"?(o(),c("svg",D,H)):e.type==="warning"?(o(),c("svg",I,W)):h("",!0)]),_:3},8,["class"])):h("",!0),i("div",{class:u([v(p),{"ml-3":a.$slots.icon||e.type!=="empty"}])},[m(a.$slots,"default")],2),e.closable?(o(),c("button",{key:1,"aria-label":"Close",class:"border-none ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700",type:"button",onClick:w},J)):h("",!0)],2)):h("",!0)}});export{Q as _}; diff --git a/docs/.vitepress/dist/assets/chunks/flatten.a0535777.js b/docs/.vitepress/dist/assets/chunks/flatten.a0535777.js new file mode 100644 index 0000000..024b038 --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/flatten.a0535777.js @@ -0,0 +1 @@ +import{a,F as p,ad as y}from"./framework.3f630664.js";function i(f,t=!0,n=[]){return f.forEach(r=>{if(r!==null){if(typeof r!="object"){(typeof r=="string"||typeof r=="number")&&n.push(a(String(r)));return}if(Array.isArray(r)){i(r,t,n);return}if(r.type===p){if(r.children===null)return;Array.isArray(r.children)&&i(r.children,t,n)}else r.type!==y&&n.push(r)}}),n}export{i as f}; diff --git a/docs/.vitepress/dist/assets/chunks/framework.3f630664.js b/docs/.vitepress/dist/assets/chunks/framework.3f630664.js new file mode 100644 index 0000000..1dce218 --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/framework.3f630664.js @@ -0,0 +1,29 @@ +/** +* @vue/shared v3.4.19 +* (c) 2018-present Yuxi (Evan) You and Vue contributors +* @license MIT +**/function Es(e,t){const n=new Set(e.split(","));return t?s=>n.has(s.toLowerCase()):s=>n.has(s)}const ee={},wt=[],be=()=>{},Hi=()=>!1,en=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&(e.charCodeAt(2)>122||e.charCodeAt(2)<97),Ts=e=>e.startsWith("onUpdate:"),oe=Object.assign,xs=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},$i=Object.prototype.hasOwnProperty,J=(e,t)=>$i.call(e,t),H=Array.isArray,Ct=e=>tn(e)==="[object Map]",Lt=e=>tn(e)==="[object Set]",Js=e=>tn(e)==="[object Date]",B=e=>typeof e=="function",se=e=>typeof e=="string",Qe=e=>typeof e=="symbol",Z=e=>e!==null&&typeof e=="object",Xr=e=>(Z(e)||B(e))&&B(e.then)&&B(e.catch),Qr=Object.prototype.toString,tn=e=>Qr.call(e),Di=e=>tn(e).slice(8,-1),Zr=e=>tn(e)==="[object Object]",Ss=e=>se(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,Et=Es(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),Fn=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},Vi=/-(\w)/g,Fe=Fn(e=>e.replace(Vi,(t,n)=>n?n.toUpperCase():"")),ki=/\B([A-Z])/g,_t=Fn(e=>e.replace(ki,"-$1").toLowerCase()),Hn=Fn(e=>e.charAt(0).toUpperCase()+e.slice(1)),vn=Fn(e=>e?`on${Hn(e)}`:""),Ze=(e,t)=>!Object.is(e,t),wn=(e,t)=>{for(let n=0;n{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},qt=e=>{const t=parseFloat(e);return isNaN(t)?e:t},Ui=e=>{const t=se(e)?Number(e):NaN;return isNaN(t)?e:t};let Xs;const As=()=>Xs||(Xs=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});function $n(e){if(H(e)){const t={};for(let n=0;n{if(n){const s=n.split(Bi);s.length>1&&(t[s[0].trim()]=s[1].trim())}}),t}function Dn(e){let t="";if(se(e))t=e;else if(H(e))for(let n=0;ngt(n,t))}const pu=e=>se(e)?e:e==null?"":H(e)||Z(e)&&(e.toString===Qr||!B(e.toString))?JSON.stringify(e,to,2):String(e),to=(e,t)=>t&&t.__v_isRef?to(e,t.value):Ct(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[s,r],o)=>(n[ts(s,o)+" =>"]=r,n),{})}:Lt(t)?{[`Set(${t.size})`]:[...t.values()].map(n=>ts(n))}:Qe(t)?ts(t):Z(t)&&!H(t)&&!Zr(t)?String(t):t,ts=(e,t="")=>{var n;return Qe(e)?`Symbol(${(n=e.description)!=null?n:t})`:e};/** +* @vue/reactivity v3.4.19 +* (c) 2018-present Yuxi (Evan) You and Vue contributors +* @license MIT +**/let ye;class zi{constructor(t=!1){this.detached=t,this._active=!0,this.effects=[],this.cleanups=[],this.parent=ye,!t&&ye&&(this.index=(ye.scopes||(ye.scopes=[])).push(this)-1)}get active(){return this._active}run(t){if(this._active){const n=ye;try{return ye=this,t()}finally{ye=n}}}on(){ye=this}off(){ye=this.parent}stop(t){if(this._active){let n,s;for(n=0,s=this.effects.length;n=4))break}this._dirtyLevel===1&&(this._dirtyLevel=0),st()}return this._dirtyLevel>=4}set dirty(t){this._dirtyLevel=t?4:0}run(){if(this._dirtyLevel=0,!this.active)return this.fn();let t=Je,n=dt;try{return Je=!0,dt=this,this._runnings++,Qs(this),this.fn()}finally{Zs(this),this._runnings--,dt=n,Je=t}}stop(){var t;this.active&&(Qs(this),Zs(this),(t=this.onStop)==null||t.call(this),this.active=!1)}}function Qi(e){return e.value}function Qs(e){e._trackId++,e._depsLength=0}function Zs(e){if(e.deps.length>e._depsLength){for(let t=e._depsLength;t{const n=new Map;return n.cleanup=e,n.computed=t,n},xn=new WeakMap,ht=Symbol(""),ps=Symbol("");function me(e,t,n){if(Je&&dt){let s=xn.get(e);s||xn.set(e,s=new Map);let r=s.get(n);r||s.set(n,r=lo(()=>s.delete(n))),oo(dt,r)}}function Ve(e,t,n,s,r,o){const i=xn.get(e);if(!i)return;let l=[];if(t==="clear")l=[...i.values()];else if(n==="length"&&H(e)){const c=Number(s);i.forEach((a,f)=>{(f==="length"||!Qe(f)&&f>=c)&&l.push(a)})}else switch(n!==void 0&&l.push(i.get(n)),t){case"add":H(e)?Ss(n)&&l.push(i.get("length")):(l.push(i.get(ht)),Ct(e)&&l.push(i.get(ps)));break;case"delete":H(e)||(l.push(i.get(ht)),Ct(e)&&l.push(i.get(ps)));break;case"set":Ct(e)&&l.push(i.get(ht));break}Ms();for(const c of l)c&&io(c,4);Os()}function Zi(e,t){var n;return(n=xn.get(e))==null?void 0:n.get(t)}const el=Es("__proto__,__v_isRef,__isVue"),co=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(Qe)),er=tl();function tl(){const e={};return["includes","indexOf","lastIndexOf"].forEach(t=>{e[t]=function(...n){const s=Y(this);for(let o=0,i=this.length;o{e[t]=function(...n){nt(),Ms();const s=Y(this)[t].apply(this,n);return Os(),st(),s}}),e}function nl(e){const t=Y(this);return me(t,"has",e),t.hasOwnProperty(e)}class ao{constructor(t=!1,n=!1){this._isReadonly=t,this._shallow=n}get(t,n,s){const r=this._isReadonly,o=this._shallow;if(n==="__v_isReactive")return!r;if(n==="__v_isReadonly")return r;if(n==="__v_isShallow")return o;if(n==="__v_raw")return s===(r?o?gl:po:o?ho:fo).get(t)||Object.getPrototypeOf(t)===Object.getPrototypeOf(s)?t:void 0;const i=H(t);if(!r){if(i&&J(er,n))return Reflect.get(er,n,s);if(n==="hasOwnProperty")return nl}const l=Reflect.get(t,n,s);return(Qe(n)?co.has(n):el(n))||(r||me(t,"get",n),o)?l:fe(l)?i&&Ss(n)?l:l.value:Z(l)?r?Un(l):kn(l):l}}class uo extends ao{constructor(t=!1){super(!1,t)}set(t,n,s,r){let o=t[n];if(!this._shallow){const c=Rt(o);if(!Sn(s)&&!Rt(s)&&(o=Y(o),s=Y(s)),!H(t)&&fe(o)&&!fe(s))return c?!1:(o.value=s,!0)}const i=H(t)&&Ss(n)?Number(n)e,Vn=e=>Reflect.getPrototypeOf(e);function ln(e,t,n=!1,s=!1){e=e.__v_raw;const r=Y(e),o=Y(t);n||(Ze(t,o)&&me(r,"get",t),me(r,"get",o));const{has:i}=Vn(r),l=s?Ls:n?Fs:Gt;if(i.call(r,t))return l(e.get(t));if(i.call(r,o))return l(e.get(o));e!==r&&e.get(t)}function cn(e,t=!1){const n=this.__v_raw,s=Y(n),r=Y(e);return t||(Ze(e,r)&&me(s,"has",e),me(s,"has",r)),e===r?n.has(e):n.has(e)||n.has(r)}function an(e,t=!1){return e=e.__v_raw,!t&&me(Y(e),"iterate",ht),Reflect.get(e,"size",e)}function tr(e){e=Y(e);const t=Y(this);return Vn(t).has.call(t,e)||(t.add(e),Ve(t,"add",e,e)),this}function nr(e,t){t=Y(t);const n=Y(this),{has:s,get:r}=Vn(n);let o=s.call(n,e);o||(e=Y(e),o=s.call(n,e));const i=r.call(n,e);return n.set(e,t),o?Ze(t,i)&&Ve(n,"set",e,t):Ve(n,"add",e,t),this}function sr(e){const t=Y(this),{has:n,get:s}=Vn(t);let r=n.call(t,e);r||(e=Y(e),r=n.call(t,e)),s&&s.call(t,e);const o=t.delete(e);return r&&Ve(t,"delete",e,void 0),o}function rr(){const e=Y(this),t=e.size!==0,n=e.clear();return t&&Ve(e,"clear",void 0,void 0),n}function un(e,t){return function(s,r){const o=this,i=o.__v_raw,l=Y(i),c=t?Ls:e?Fs:Gt;return!e&&me(l,"iterate",ht),i.forEach((a,f)=>s.call(r,c(a),c(f),o))}}function fn(e,t,n){return function(...s){const r=this.__v_raw,o=Y(r),i=Ct(o),l=e==="entries"||e===Symbol.iterator&&i,c=e==="keys"&&i,a=r[e](...s),f=n?Ls:t?Fs:Gt;return!t&&me(o,"iterate",c?ps:ht),{next(){const{value:h,done:_}=a.next();return _?{value:h,done:_}:{value:l?[f(h[0]),f(h[1])]:f(h),done:_}},[Symbol.iterator](){return this}}}}function je(e){return function(...t){return e==="delete"?!1:e==="clear"?void 0:this}}function ll(){const e={get(o){return ln(this,o)},get size(){return an(this)},has:cn,add:tr,set:nr,delete:sr,clear:rr,forEach:un(!1,!1)},t={get(o){return ln(this,o,!1,!0)},get size(){return an(this)},has:cn,add:tr,set:nr,delete:sr,clear:rr,forEach:un(!1,!0)},n={get(o){return ln(this,o,!0)},get size(){return an(this,!0)},has(o){return cn.call(this,o,!0)},add:je("add"),set:je("set"),delete:je("delete"),clear:je("clear"),forEach:un(!0,!1)},s={get(o){return ln(this,o,!0,!0)},get size(){return an(this,!0)},has(o){return cn.call(this,o,!0)},add:je("add"),set:je("set"),delete:je("delete"),clear:je("clear"),forEach:un(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach(o=>{e[o]=fn(o,!1,!1),n[o]=fn(o,!0,!1),t[o]=fn(o,!1,!0),s[o]=fn(o,!0,!0)}),[e,n,t,s]}const[cl,al,ul,fl]=ll();function Ps(e,t){const n=t?e?fl:ul:e?al:cl;return(s,r,o)=>r==="__v_isReactive"?!e:r==="__v_isReadonly"?e:r==="__v_raw"?s:Reflect.get(J(n,r)&&r in s?n:s,r,o)}const dl={get:Ps(!1,!1)},hl={get:Ps(!1,!0)},pl={get:Ps(!0,!1)},fo=new WeakMap,ho=new WeakMap,po=new WeakMap,gl=new WeakMap;function ml(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function _l(e){return e.__v_skip||!Object.isExtensible(e)?0:ml(Di(e))}function kn(e){return Rt(e)?e:Ns(e,!1,rl,dl,fo)}function yl(e){return Ns(e,!1,il,hl,ho)}function Un(e){return Ns(e,!0,ol,pl,po)}function Ns(e,t,n,s,r){if(!Z(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;const o=r.get(e);if(o)return o;const i=_l(e);if(i===0)return e;const l=new Proxy(e,i===2?s:n);return r.set(e,l),l}function Tt(e){return Rt(e)?Tt(e.__v_raw):!!(e&&e.__v_isReactive)}function Rt(e){return!!(e&&e.__v_isReadonly)}function Sn(e){return!!(e&&e.__v_isShallow)}function go(e){return Tt(e)||Rt(e)}function Y(e){const t=e&&e.__v_raw;return t?Y(t):e}function Vt(e){return Object.isExtensible(e)&&Tn(e,"__v_skip",!0),e}const Gt=e=>Z(e)?kn(e):e,Fs=e=>Z(e)?Un(e):e;class mo{constructor(t,n,s,r){this._setter=n,this.dep=void 0,this.__v_isRef=!0,this.__v_isReadonly=!1,this.effect=new Is(()=>t(this._value),()=>kt(this,this.effect._dirtyLevel===2?2:3)),this.effect.computed=this,this.effect.active=this._cacheable=!r,this.__v_isReadonly=s}get value(){const t=Y(this);return(!t._cacheable||t.effect.dirty)&&Ze(t._value,t._value=t.effect.run())&&kt(t,4),Hs(t),t.effect._dirtyLevel>=2&&kt(t,2),t._value}set value(t){this._setter(t)}get _dirty(){return this.effect.dirty}set _dirty(t){this.effect.dirty=t}}function bl(e,t,n=!1){let s,r;const o=B(e);return o?(s=e,r=be):(s=e.get,r=e.set),new mo(s,r,o||!r,n)}function Hs(e){var t;Je&&dt&&(e=Y(e),oo(dt,(t=e.dep)!=null?t:e.dep=lo(()=>e.dep=void 0,e instanceof mo?e:void 0)))}function kt(e,t=4,n){e=Y(e);const s=e.dep;s&&io(s,t)}function fe(e){return!!(e&&e.__v_isRef===!0)}function ve(e){return yo(e,!1)}function _o(e){return yo(e,!0)}function yo(e,t){return fe(e)?e:new vl(e,t)}class vl{constructor(t,n){this.__v_isShallow=n,this.dep=void 0,this.__v_isRef=!0,this._rawValue=n?t:Y(t),this._value=n?t:Gt(t)}get value(){return Hs(this),this._value}set value(t){const n=this.__v_isShallow||Sn(t)||Rt(t);t=n?t:Y(t),Ze(t,this._rawValue)&&(this._rawValue=t,this._value=n?t:Gt(t),kt(this,4))}}function bo(e){return fe(e)?e.value:e}const wl={get:(e,t,n)=>bo(Reflect.get(e,t,n)),set:(e,t,n,s)=>{const r=e[t];return fe(r)&&!fe(n)?(r.value=n,!0):Reflect.set(e,t,n,s)}};function vo(e){return Tt(e)?e:new Proxy(e,wl)}class Cl{constructor(t){this.dep=void 0,this.__v_isRef=!0;const{get:n,set:s}=t(()=>Hs(this),()=>kt(this));this._get=n,this._set=s}get value(){return this._get()}set value(t){this._set(t)}}function El(e){return new Cl(e)}function gu(e){const t=H(e)?new Array(e.length):{};for(const n in e)t[n]=wo(e,n);return t}class Tl{constructor(t,n,s){this._object=t,this._key=n,this._defaultValue=s,this.__v_isRef=!0}get value(){const t=this._object[this._key];return t===void 0?this._defaultValue:t}set value(t){this._object[this._key]=t}get dep(){return Zi(Y(this._object),this._key)}}class xl{constructor(t){this._getter=t,this.__v_isRef=!0,this.__v_isReadonly=!0}get value(){return this._getter()}}function Sl(e,t,n){return fe(e)?e:B(e)?new xl(e):Z(e)&&arguments.length>1?wo(e,t,n):ve(e)}function wo(e,t,n){const s=e[t];return fe(s)?s:new Tl(e,t,n)}/** +* @vue/runtime-core v3.4.19 +* (c) 2018-present Yuxi (Evan) You and Vue contributors +* @license MIT +**/const Ut=[];function ot(e,...t){nt();const n=Ut.length?Ut[Ut.length-1].component:null,s=n&&n.appContext.config.warnHandler,r=Al();if(s)ke(s,n,11,[e+t.join(""),n&&n.proxy,r.map(({vnode:o})=>`at <${ci(n,o.type)}>`).join(` +`),r]);else{const o=[`[Vue warn]: ${e}`,...t];r.length&&o.push(` +`,...Rl(r)),console.warn(...o)}st()}function Al(){let e=Ut[Ut.length-1];if(!e)return[];const t=[];for(;e;){const n=t[0];n&&n.vnode===e?n.recurseCount++:t.push({vnode:e,recurseCount:0});const s=e.component&&e.component.parent;e=s&&s.vnode}return t}function Rl(e){const t=[];return e.forEach((n,s)=>{t.push(...s===0?[]:[` +`],...Il(n))}),t}function Il({vnode:e,recurseCount:t}){const n=t>0?`... (${t} recursive calls)`:"",s=e.component?e.component.parent==null:!1,r=` at <${ci(e.component,e.type,s)}`,o=">"+n;return e.props?[r,...Ml(e.props),o]:[r+o]}function Ml(e){const t=[],n=Object.keys(e);return n.slice(0,3).forEach(s=>{t.push(...Co(s,e[s]))}),n.length>3&&t.push(" ..."),t}function Co(e,t,n){return se(t)?(t=JSON.stringify(t),n?t:[`${e}=${t}`]):typeof t=="number"||typeof t=="boolean"||t==null?n?t:[`${e}=${t}`]:fe(t)?(t=Co(e,Y(t.value),!0),n?t:[`${e}=Ref<`,t,">"]):B(t)?[`${e}=fn${t.name?`<${t.name}>`:""}`]:(t=Y(t),n?t:[`${e}=`,t])}function ke(e,t,n,s){try{return s?e(...s):e()}catch(r){jn(r,t,n)}}function xe(e,t,n,s){if(B(e)){const o=ke(e,t,n,s);return o&&Xr(o)&&o.catch(i=>{jn(i,t,n)}),o}const r=[];for(let o=0;o>>1,r=de[s],o=zt(r);oNe&&de.splice(t,1)}function Nl(e){H(e)?xt.push(...e):(!qe||!qe.includes(e,e.allowRecurse?ct+1:ct))&&xt.push(e),To()}function or(e,t,n=Yt?Ne+1:0){for(;nzt(n)-zt(s));if(xt.length=0,qe){qe.push(...t);return}for(qe=t,ct=0;cte.id==null?1/0:e.id,Fl=(e,t)=>{const n=zt(e)-zt(t);if(n===0){if(e.pre&&!t.pre)return-1;if(t.pre&&!e.pre)return 1}return n};function xo(e){gs=!1,Yt=!0,de.sort(Fl);const t=be;try{for(Ne=0;Nese(E)?E.trim():E)),h&&(r=n.map(qt))}let l,c=s[l=vn(t)]||s[l=vn(Fe(t))];!c&&o&&(c=s[l=vn(_t(t))]),c&&xe(c,e,6,r);const a=s[l+"Once"];if(a){if(!e.emitted)e.emitted={};else if(e.emitted[l])return;e.emitted[l]=!0,xe(a,e,6,r)}}function So(e,t,n=!1){const s=t.emitsCache,r=s.get(e);if(r!==void 0)return r;const o=e.emits;let i={},l=!1;if(!B(e)){const c=a=>{const f=So(a,t,!0);f&&(l=!0,oe(i,f))};!n&&t.mixins.length&&t.mixins.forEach(c),e.extends&&c(e.extends),e.mixins&&e.mixins.forEach(c)}return!o&&!l?(Z(e)&&s.set(e,null),null):(H(o)?o.forEach(c=>i[c]=null):oe(i,o),Z(e)&&s.set(e,i),i)}function Bn(e,t){return!e||!en(t)?!1:(t=t.slice(2).replace(/Once$/,""),J(e,t[0].toLowerCase()+t.slice(1))||J(e,_t(t))||J(e,t))}let ie=null,Kn=null;function Rn(e){const t=ie;return ie=e,Kn=e&&e.type.__scopeId||null,t}function mu(e){Kn=e}function _u(){Kn=null}const yu=e=>Ao;function Ao(e,t=ie,n){if(!t||e._n)return e;const s=(...r)=>{s._d&&_r(-1);const o=Rn(t);let i;try{i=e(...r)}finally{Rn(o),s._d&&_r(1)}return i};return s._n=!0,s._c=!0,s._d=!0,s}function ns(e){const{type:t,vnode:n,proxy:s,withProxy:r,props:o,propsOptions:[i],slots:l,attrs:c,emit:a,render:f,renderCache:h,data:_,setupState:E,ctx:N,inheritAttrs:L}=e;let k,K;const X=Rn(e);try{if(n.shapeFlag&4){const m=r||s,P=m;k=Re(f.call(P,m,h,o,E,_,N)),K=c}else{const m=t;k=Re(m.length>1?m(o,{attrs:c,slots:l,emit:a}):m(o,null)),K=t.props?c:$l(c)}}catch(m){Wt.length=0,jn(m,e,1),k=ce(we)}let p=k;if(K&&L!==!1){const m=Object.keys(K),{shapeFlag:P}=p;m.length&&P&7&&(i&&m.some(Ts)&&(K=Dl(K,i)),p=et(p,K))}return n.dirs&&(p=et(p),p.dirs=p.dirs?p.dirs.concat(n.dirs):n.dirs),n.transition&&(p.transition=n.transition),k=p,Rn(X),k}const $l=e=>{let t;for(const n in e)(n==="class"||n==="style"||en(n))&&((t||(t={}))[n]=e[n]);return t},Dl=(e,t)=>{const n={};for(const s in e)(!Ts(s)||!(s.slice(9)in t))&&(n[s]=e[s]);return n};function Vl(e,t,n){const{props:s,children:r,component:o}=e,{props:i,children:l,patchFlag:c}=t,a=o.emitsOptions;if(t.dirs||t.transition)return!0;if(n&&c>=0){if(c&1024)return!0;if(c&16)return s?ir(s,i,a):!!i;if(c&8){const f=t.dynamicProps;for(let h=0;he.__isSuspense;function Mo(e,t){t&&t.pendingBranch?H(e)?t.effects.push(...e):t.effects.push(e):Nl(e)}const jl=Symbol.for("v-scx"),Bl=()=>At(jl);function Oo(e,t){return Wn(e,null,t)}function wu(e,t){return Wn(e,null,{flush:"post"})}const dn={};function Xe(e,t,n){return Wn(e,t,n)}function Wn(e,t,{immediate:n,deep:s,flush:r,once:o,onTrack:i,onTrigger:l}=ee){if(t&&o){const I=t;t=(...U)=>{I(...U),P()}}const c=ue,a=I=>s===!0?I:ut(I,s===!1?1:void 0);let f,h=!1,_=!1;if(fe(e)?(f=()=>e.value,h=Sn(e)):Tt(e)?(f=()=>a(e),h=!0):H(e)?(_=!0,h=e.some(I=>Tt(I)||Sn(I)),f=()=>e.map(I=>{if(fe(I))return I.value;if(Tt(I))return a(I);if(B(I))return ke(I,c,2)})):B(e)?t?f=()=>ke(e,c,2):f=()=>(E&&E(),xe(e,c,3,[N])):f=be,t&&s){const I=f;f=()=>ut(I())}let E,N=I=>{E=p.onStop=()=>{ke(I,c,4),E=p.onStop=void 0}},L;if(Jn)if(N=be,t?n&&xe(t,c,3,[f(),_?[]:void 0,N]):f(),r==="sync"){const I=Bl();L=I.__watcherHandles||(I.__watcherHandles=[])}else return be;let k=_?new Array(e.length).fill(dn):dn;const K=()=>{if(!(!p.active||!p.dirty))if(t){const I=p.run();(s||h||(_?I.some((U,R)=>Ze(U,k[R])):Ze(I,k)))&&(E&&E(),xe(t,c,3,[I,k===dn?void 0:_&&k[0]===dn?[]:k,N]),k=I)}else p.run()};K.allowRecurse=!!t;let X;r==="sync"?X=K:r==="post"?X=()=>ge(K,c&&c.suspense):(K.pre=!0,c&&(K.id=c.uid),X=()=>Ds(K));const p=new Is(f,be,X),m=no(),P=()=>{p.stop(),m&&xs(m.effects,p)};return t?n?K():k=p.run():r==="post"?ge(p.run.bind(p),c&&c.suspense):p.run(),L&&L.push(P),P}function Kl(e,t,n){const s=this.proxy,r=se(e)?e.includes(".")?Lo(s,e):()=>s[e]:e.bind(s,s);let o;B(t)?o=t:(o=t.handler,n=t);const i=rn(this),l=Wn(r,o.bind(s),n);return i(),l}function Lo(e,t){const n=t.split(".");return()=>{let s=e;for(let r=0;r0){if(n>=t)return e;n++}if(s=s||new Set,s.has(e))return e;if(s.add(e),fe(e))ut(e.value,t,n,s);else if(H(e))for(let r=0;r{ut(r,t,n,s)});else if(Zr(e))for(const r in e)ut(e[r],t,n,s);return e}function Cu(e,t){if(ie===null)return e;const n=Xn(ie)||ie.proxy,s=e.dirs||(e.dirs=[]);for(let r=0;r{e.isMounted=!0}),Vo(()=>{e.isUnmounting=!0}),e}const Ce=[Function,Array],No={mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:Ce,onEnter:Ce,onAfterEnter:Ce,onEnterCancelled:Ce,onBeforeLeave:Ce,onLeave:Ce,onAfterLeave:Ce,onLeaveCancelled:Ce,onBeforeAppear:Ce,onAppear:Ce,onAfterAppear:Ce,onAppearCancelled:Ce},Wl={name:"BaseTransition",props:No,setup(e,{slots:t}){const n=sn(),s=Po();let r;return()=>{const o=t.default&&ks(t.default(),!0);if(!o||!o.length)return;let i=o[0];if(o.length>1){for(const L of o)if(L.type!==we){i=L;break}}const l=Y(e),{mode:c}=l;if(s.isLeaving)return ss(i);const a=cr(i);if(!a)return ss(i);const f=Jt(a,l,s,n);Xt(a,f);const h=n.subTree,_=h&&cr(h);let E=!1;const{getTransitionKey:N}=a.type;if(N){const L=N();r===void 0?r=L:L!==r&&(r=L,E=!0)}if(_&&_.type!==we&&(!at(a,_)||E)){const L=Jt(_,l,s,n);if(Xt(_,L),c==="out-in")return s.isLeaving=!0,L.afterLeave=()=>{s.isLeaving=!1,n.update.active!==!1&&(n.effect.dirty=!0,n.update())},ss(i);c==="in-out"&&a.type!==we&&(L.delayLeave=(k,K,X)=>{const p=Fo(s,_);p[String(_.key)]=_,k[Ge]=()=>{K(),k[Ge]=void 0,delete f.delayedLeave},f.delayedLeave=X})}return i}}},ql=Wl;function Fo(e,t){const{leavingVNodes:n}=e;let s=n.get(t.type);return s||(s=Object.create(null),n.set(t.type,s)),s}function Jt(e,t,n,s){const{appear:r,mode:o,persisted:i=!1,onBeforeEnter:l,onEnter:c,onAfterEnter:a,onEnterCancelled:f,onBeforeLeave:h,onLeave:_,onAfterLeave:E,onLeaveCancelled:N,onBeforeAppear:L,onAppear:k,onAfterAppear:K,onAppearCancelled:X}=t,p=String(e.key),m=Fo(n,e),P=(R,x)=>{R&&xe(R,s,9,x)},I=(R,x)=>{const S=x[1];P(R,x),H(R)?R.every(W=>W.length<=1)&&S():R.length<=1&&S()},U={mode:o,persisted:i,beforeEnter(R){let x=l;if(!n.isMounted)if(r)x=L||l;else return;R[Ge]&&R[Ge](!0);const S=m[p];S&&at(e,S)&&S.el[Ge]&&S.el[Ge](),P(x,[R])},enter(R){let x=c,S=a,W=f;if(!n.isMounted)if(r)x=k||c,S=K||a,W=X||f;else return;let M=!1;const q=R[hn]=te=>{M||(M=!0,te?P(W,[R]):P(S,[R]),U.delayedLeave&&U.delayedLeave(),R[hn]=void 0)};x?I(x,[R,q]):q()},leave(R,x){const S=String(e.key);if(R[hn]&&R[hn](!0),n.isUnmounting)return x();P(h,[R]);let W=!1;const M=R[Ge]=q=>{W||(W=!0,x(),q?P(N,[R]):P(E,[R]),R[Ge]=void 0,m[S]===e&&delete m[S])};m[S]=e,_?I(_,[R,M]):M()},clone(R){return Jt(R,t,n,s)}};return U}function ss(e){if(qn(e))return e=et(e),e.children=null,e}function cr(e){return qn(e)?e.children?e.children[0]:void 0:e}function Xt(e,t){e.shapeFlag&6&&e.component?Xt(e.component.subTree,t):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function ks(e,t=!1,n){let s=[],r=0;for(let o=0;o1)for(let o=0;ooe({name:e.name},t,{setup:e}))():e}const St=e=>!!e.type.__asyncLoader,qn=e=>e.type.__isKeepAlive;function Gl(e,t){$o(e,"a",t)}function Yl(e,t){$o(e,"da",t)}function $o(e,t,n=ue){const s=e.__wdc||(e.__wdc=()=>{let r=n;for(;r;){if(r.isDeactivated)return;r=r.parent}return e()});if(Gn(t,s,n),n){let r=n.parent;for(;r&&r.parent;)qn(r.parent.vnode)&&zl(s,t,n,r),r=r.parent}}function zl(e,t,n,s){const r=Gn(t,e,s,!0);Yn(()=>{xs(s[t],r)},n)}function Gn(e,t,n=ue,s=!1){if(n){const r=n[e]||(n[e]=[]),o=t.__weh||(t.__weh=(...i)=>{if(n.isUnmounted)return;nt();const l=rn(n),c=xe(t,n,e,i);return l(),st(),c});return s?r.unshift(o):r.push(o),o}}const Ue=e=>(t,n=ue)=>(!Jn||e==="sp")&&Gn(e,(...s)=>t(...s),n),Jl=Ue("bm"),Pt=Ue("m"),Xl=Ue("bu"),Do=Ue("u"),Vo=Ue("bum"),Yn=Ue("um"),Ql=Ue("sp"),Zl=Ue("rtg"),ec=Ue("rtc");function tc(e,t=ue){Gn("ec",e,t)}function Eu(e,t,n,s){let r;const o=n&&n[s];if(H(e)||se(e)){r=new Array(e.length);for(let i=0,l=e.length;it(i,l,void 0,o&&o[l]));else{const i=Object.keys(e);r=new Array(i.length);for(let l=0,c=i.length;lOn(t)?!(t.type===we||t.type===pe&&!ko(t.children)):!0)?e:null}function xu(e,t){const n={};for(const s in e)n[t&&/[A-Z]/.test(s)?`on:${s}`:vn(s)]=e[s];return n}const ms=e=>e?ri(e)?Xn(e)||e.proxy:ms(e.parent):null,jt=oe(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>ms(e.parent),$root:e=>ms(e.root),$emit:e=>e.emit,$options:e=>Us(e),$forceUpdate:e=>e.f||(e.f=()=>{e.effect.dirty=!0,Ds(e.update)}),$nextTick:e=>e.n||(e.n=nn.bind(e.proxy)),$watch:e=>Kl.bind(e)}),rs=(e,t)=>e!==ee&&!e.__isScriptSetup&&J(e,t),nc={get({_:e},t){const{ctx:n,setupState:s,data:r,props:o,accessCache:i,type:l,appContext:c}=e;let a;if(t[0]!=="$"){const E=i[t];if(E!==void 0)switch(E){case 1:return s[t];case 2:return r[t];case 4:return n[t];case 3:return o[t]}else{if(rs(s,t))return i[t]=1,s[t];if(r!==ee&&J(r,t))return i[t]=2,r[t];if((a=e.propsOptions[0])&&J(a,t))return i[t]=3,o[t];if(n!==ee&&J(n,t))return i[t]=4,n[t];_s&&(i[t]=0)}}const f=jt[t];let h,_;if(f)return t==="$attrs"&&me(e,"get",t),f(e);if((h=l.__cssModules)&&(h=h[t]))return h;if(n!==ee&&J(n,t))return i[t]=4,n[t];if(_=c.config.globalProperties,J(_,t))return _[t]},set({_:e},t,n){const{data:s,setupState:r,ctx:o}=e;return rs(r,t)?(r[t]=n,!0):s!==ee&&J(s,t)?(s[t]=n,!0):J(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(o[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:s,appContext:r,propsOptions:o}},i){let l;return!!n[i]||e!==ee&&J(e,i)||rs(t,i)||(l=o[0])&&J(l,i)||J(s,i)||J(jt,i)||J(r.config.globalProperties,i)},defineProperty(e,t,n){return n.get!=null?e._.accessCache[t]=0:J(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}};function Su(){return Uo().slots}function Au(){return Uo().attrs}function Uo(){const e=sn();return e.setupContext||(e.setupContext=ii(e))}function ar(e){return H(e)?e.reduce((t,n)=>(t[n]=null,t),{}):e}let _s=!0;function sc(e){const t=Us(e),n=e.proxy,s=e.ctx;_s=!1,t.beforeCreate&&ur(t.beforeCreate,e,"bc");const{data:r,computed:o,methods:i,watch:l,provide:c,inject:a,created:f,beforeMount:h,mounted:_,beforeUpdate:E,updated:N,activated:L,deactivated:k,beforeDestroy:K,beforeUnmount:X,destroyed:p,unmounted:m,render:P,renderTracked:I,renderTriggered:U,errorCaptured:R,serverPrefetch:x,expose:S,inheritAttrs:W,components:M,directives:q,filters:te}=t;if(a&&rc(a,s,null),i)for(const z in i){const $=i[z];B($)&&(s[z]=$.bind(n))}if(r){const z=r.call(n,n);Z(z)&&(e.data=kn(z))}if(_s=!0,o)for(const z in o){const $=o[z],Me=B($)?$.bind(n,n):B($.get)?$.get.bind(n,n):be,yt=!B($)&&B($.set)?$.set.bind(n):be,rt=re({get:Me,set:yt});Object.defineProperty(s,z,{enumerable:!0,configurable:!0,get:()=>rt.value,set:Oe=>rt.value=Oe})}if(l)for(const z in l)jo(l[z],s,n,z);if(c){const z=B(c)?c.call(n):c;Reflect.ownKeys(z).forEach($=>{uc($,z[$])})}f&&ur(f,e,"c");function D(z,$){H($)?$.forEach(Me=>z(Me.bind(n))):$&&z($.bind(n))}if(D(Jl,h),D(Pt,_),D(Xl,E),D(Do,N),D(Gl,L),D(Yl,k),D(tc,R),D(ec,I),D(Zl,U),D(Vo,X),D(Yn,m),D(Ql,x),H(S))if(S.length){const z=e.exposed||(e.exposed={});S.forEach($=>{Object.defineProperty(z,$,{get:()=>n[$],set:Me=>n[$]=Me})})}else e.exposed||(e.exposed={});P&&e.render===be&&(e.render=P),W!=null&&(e.inheritAttrs=W),M&&(e.components=M),q&&(e.directives=q)}function rc(e,t,n=be){H(e)&&(e=ys(e));for(const s in e){const r=e[s];let o;Z(r)?"default"in r?o=At(r.from||s,r.default,!0):o=At(r.from||s):o=At(r),fe(o)?Object.defineProperty(t,s,{enumerable:!0,configurable:!0,get:()=>o.value,set:i=>o.value=i}):t[s]=o}}function ur(e,t,n){xe(H(e)?e.map(s=>s.bind(t.proxy)):e.bind(t.proxy),t,n)}function jo(e,t,n,s){const r=s.includes(".")?Lo(n,s):()=>n[s];if(se(e)){const o=t[e];B(o)&&Xe(r,o)}else if(B(e))Xe(r,e.bind(n));else if(Z(e))if(H(e))e.forEach(o=>jo(o,t,n,s));else{const o=B(e.handler)?e.handler.bind(n):t[e.handler];B(o)&&Xe(r,o,e)}}function Us(e){const t=e.type,{mixins:n,extends:s}=t,{mixins:r,optionsCache:o,config:{optionMergeStrategies:i}}=e.appContext,l=o.get(t);let c;return l?c=l:!r.length&&!n&&!s?c=t:(c={},r.length&&r.forEach(a=>In(c,a,i,!0)),In(c,t,i)),Z(t)&&o.set(t,c),c}function In(e,t,n,s=!1){const{mixins:r,extends:o}=t;o&&In(e,o,n,!0),r&&r.forEach(i=>In(e,i,n,!0));for(const i in t)if(!(s&&i==="expose")){const l=oc[i]||n&&n[i];e[i]=l?l(e[i],t[i]):t[i]}return e}const oc={data:fr,props:dr,emits:dr,methods:Dt,computed:Dt,beforeCreate:he,created:he,beforeMount:he,mounted:he,beforeUpdate:he,updated:he,beforeDestroy:he,beforeUnmount:he,destroyed:he,unmounted:he,activated:he,deactivated:he,errorCaptured:he,serverPrefetch:he,components:Dt,directives:Dt,watch:lc,provide:fr,inject:ic};function fr(e,t){return t?e?function(){return oe(B(e)?e.call(this,this):e,B(t)?t.call(this,this):t)}:t:e}function ic(e,t){return Dt(ys(e),ys(t))}function ys(e){if(H(e)){const t={};for(let n=0;n1)return n&&B(t)?t.call(s&&s.proxy):t}}function fc(e,t,n,s=!1){const r={},o={};Tn(o,zn,1),e.propsDefaults=Object.create(null),Ko(e,t,r,o);for(const i in e.propsOptions[0])i in r||(r[i]=void 0);n?e.props=s?r:yl(r):e.type.props?e.props=r:e.props=o,e.attrs=o}function dc(e,t,n,s){const{props:r,attrs:o,vnode:{patchFlag:i}}=e,l=Y(r),[c]=e.propsOptions;let a=!1;if((s||i>0)&&!(i&16)){if(i&8){const f=e.vnode.dynamicProps;for(let h=0;h{c=!0;const[_,E]=Wo(h,t,!0);oe(i,_),E&&l.push(...E)};!n&&t.mixins.length&&t.mixins.forEach(f),e.extends&&f(e.extends),e.mixins&&e.mixins.forEach(f)}if(!o&&!c)return Z(e)&&s.set(e,wt),wt;if(H(o))for(let f=0;f-1,E[1]=L<0||N-1||J(E,"default"))&&l.push(h)}}}const a=[i,l];return Z(e)&&s.set(e,a),a}function hr(e){return e[0]!=="$"&&!Et(e)}function pr(e){return e===null?"null":typeof e=="function"?e.name||"":typeof e=="object"&&e.constructor&&e.constructor.name||""}function gr(e,t){return pr(e)===pr(t)}function mr(e,t){return H(t)?t.findIndex(n=>gr(n,e)):B(t)&&gr(t,e)?0:-1}const qo=e=>e[0]==="_"||e==="$stable",js=e=>H(e)?e.map(Re):[Re(e)],hc=(e,t,n)=>{if(t._n)return t;const s=Ao((...r)=>js(t(...r)),n);return s._c=!1,s},Go=(e,t,n)=>{const s=e._ctx;for(const r in e){if(qo(r))continue;const o=e[r];if(B(o))t[r]=hc(r,o,s);else if(o!=null){const i=js(o);t[r]=()=>i}}},Yo=(e,t)=>{const n=js(t);e.slots.default=()=>n},pc=(e,t)=>{if(e.vnode.shapeFlag&32){const n=t._;n?(e.slots=Y(t),Tn(t,"_",n)):Go(t,e.slots={})}else e.slots={},t&&Yo(e,t);Tn(e.slots,zn,1)},gc=(e,t,n)=>{const{vnode:s,slots:r}=e;let o=!0,i=ee;if(s.shapeFlag&32){const l=t._;l?n&&l===1?o=!1:(oe(r,t),!n&&l===1&&delete r._):(o=!t.$stable,Go(t,r)),i=t}else t&&(Yo(e,t),i={default:1});if(o)for(const l in r)!qo(l)&&i[l]==null&&delete r[l]};function Mn(e,t,n,s,r=!1){if(H(e)){e.forEach((_,E)=>Mn(_,t&&(H(t)?t[E]:t),n,s,r));return}if(St(s)&&!r)return;const o=s.shapeFlag&4?Xn(s.component)||s.component.proxy:s.el,i=r?null:o,{i:l,r:c}=e,a=t&&t.r,f=l.refs===ee?l.refs={}:l.refs,h=l.setupState;if(a!=null&&a!==c&&(se(a)?(f[a]=null,J(h,a)&&(h[a]=null)):fe(a)&&(a.value=null)),B(c))ke(c,l,12,[i,f]);else{const _=se(c),E=fe(c);if(_||E){const N=()=>{if(e.f){const L=_?J(h,c)?h[c]:f[c]:c.value;r?H(L)&&xs(L,o):H(L)?L.includes(o)||L.push(o):_?(f[c]=[o],J(h,c)&&(h[c]=f[c])):(c.value=[o],e.k&&(f[e.k]=c.value))}else _?(f[c]=i,J(h,c)&&(h[c]=i)):E&&(c.value=i,e.k&&(f[e.k]=i))};i?(N.id=-1,ge(N,n)):N()}}}let Be=!1;const mc=e=>e.namespaceURI.includes("svg")&&e.tagName!=="foreignObject",_c=e=>e.namespaceURI.includes("MathML"),pn=e=>{if(mc(e))return"svg";if(_c(e))return"mathml"},Ft=e=>e.nodeType===8;function yc(e){const{mt:t,p:n,o:{patchProp:s,createText:r,nextSibling:o,parentNode:i,remove:l,insert:c,createComment:a}}=e,f=(p,m)=>{if(!m.hasChildNodes()){__VUE_PROD_HYDRATION_MISMATCH_DETAILS__&&ot("Attempting to hydrate existing markup but container is empty. Performing full mount instead."),n(null,p,m),An(),m._vnode=p;return}Be=!1,h(m.firstChild,p,null,null,null),An(),m._vnode=p,Be&&console.error("Hydration completed but contains mismatches.")},h=(p,m,P,I,U,R=!1)=>{const x=Ft(p)&&p.data==="[",S=()=>L(p,m,P,I,U,x),{type:W,ref:M,shapeFlag:q,patchFlag:te}=m;let ae=p.nodeType;m.el=p,te===-2&&(R=!1,m.dynamicChildren=null);let D=null;switch(W){case It:ae!==3?m.children===""?(c(m.el=r(""),i(p),p),D=p):D=S():(p.data!==m.children&&(Be=!0,__VUE_PROD_HYDRATION_MISMATCH_DETAILS__&&ot("Hydration text mismatch in",p.parentNode,` + - rendered on server: ${JSON.stringify(p.data)} + - expected on client: ${JSON.stringify(m.children)}`),p.data=m.children),D=o(p));break;case we:X(p)?(D=o(p),K(m.el=p.content.firstChild,p,P)):ae!==8||x?D=S():D=o(p);break;case Kt:if(x&&(p=o(p),ae=p.nodeType),ae===1||ae===3){D=p;const z=!m.children.length;for(let $=0;${R=R||!!m.dynamicChildren;const{type:x,props:S,patchFlag:W,shapeFlag:M,dirs:q,transition:te}=m,ae=x==="input"||x==="option";if(ae||W!==-1){q&&Pe(m,null,P,"created");let D=!1;if(X(p)){D=zo(I,te)&&P&&P.vnode.props&&P.vnode.props.appear;const $=p.content.firstChild;D&&te.beforeEnter($),K($,p,P),m.el=p=$}if(M&16&&!(S&&(S.innerHTML||S.textContent))){let $=E(p.firstChild,m,p,P,I,U,R),Me=!1;for(;$;){Be=!0,__VUE_PROD_HYDRATION_MISMATCH_DETAILS__&&!Me&&(ot("Hydration children mismatch on",p,` +Server rendered element contains more child nodes than client vdom.`),Me=!0);const yt=$;$=$.nextSibling,l(yt)}}else M&8&&p.textContent!==m.children&&(Be=!0,__VUE_PROD_HYDRATION_MISMATCH_DETAILS__&&ot("Hydration text content mismatch on",p,` + - rendered on server: ${p.textContent} + - expected on client: ${m.children}`),p.textContent=m.children);if(S)if(ae||!R||W&48)for(const $ in S)(ae&&($.endsWith("value")||$==="indeterminate")||en($)&&!Et($)||$[0]===".")&&s(p,$,null,S[$],void 0,void 0,P);else S.onClick&&s(p,"onClick",null,S.onClick,void 0,void 0,P);let z;(z=S&&S.onVnodeBeforeMount)&&Ee(z,P,m),q&&Pe(m,null,P,"beforeMount"),((z=S&&S.onVnodeMounted)||q||D)&&Mo(()=>{z&&Ee(z,P,m),D&&te.enter(p),q&&Pe(m,null,P,"mounted")},I)}return p.nextSibling},E=(p,m,P,I,U,R,x)=>{x=x||!!m.dynamicChildren;const S=m.children,W=S.length;let M=!1;for(let q=0;q{const{slotScopeIds:x}=m;x&&(U=U?U.concat(x):x);const S=i(p),W=E(o(p),m,S,P,I,U,R);return W&&Ft(W)&&W.data==="]"?o(m.anchor=W):(Be=!0,c(m.anchor=a("]"),S,W),W)},L=(p,m,P,I,U,R)=>{if(Be=!0,__VUE_PROD_HYDRATION_MISMATCH_DETAILS__&&ot(`Hydration node mismatch: +- rendered on server:`,p,p.nodeType===3?"(text)":Ft(p)&&p.data==="["?"(start of fragment)":"",` +- expected on client:`,m.type),m.el=null,R){const W=k(p);for(;;){const M=o(p);if(M&&M!==W)l(M);else break}}const x=o(p),S=i(p);return l(p),n(null,m,S,x,P,I,pn(S),U),x},k=(p,m="[",P="]")=>{let I=0;for(;p;)if(p=o(p),p&&Ft(p)&&(p.data===m&&I++,p.data===P)){if(I===0)return o(p);I--}return p},K=(p,m,P)=>{const I=m.parentNode;I&&I.replaceChild(p,m);let U=P;for(;U;)U.vnode.el===m&&(U.vnode.el=U.subTree.el=p),U=U.parent},X=p=>p.nodeType===1&&p.tagName.toLowerCase()==="template";return[f,h]}function bc(){typeof __VUE_PROD_HYDRATION_MISMATCH_DETAILS__!="boolean"&&(As().__VUE_PROD_HYDRATION_MISMATCH_DETAILS__=!1)}const ge=Mo;function vc(e){return wc(e,yc)}function wc(e,t){bc();const n=As();n.__VUE__=!0;const{insert:s,remove:r,patchProp:o,createElement:i,createText:l,createComment:c,setText:a,setElementText:f,parentNode:h,nextSibling:_,setScopeId:E=be,insertStaticContent:N}=e,L=(u,d,g,y=null,b=null,C=null,A=void 0,w=null,T=!!d.dynamicChildren)=>{if(u===d)return;u&&!at(u,d)&&(y=on(u),Oe(u,b,C,!0),u=null),d.patchFlag===-2&&(T=!1,d.dynamicChildren=null);const{type:v,ref:O,shapeFlag:V}=d;switch(v){case It:k(u,d,g,y);break;case we:K(u,d,g,y);break;case Kt:u==null&&X(d,g,y,A);break;case pe:M(u,d,g,y,b,C,A,w,T);break;default:V&1?P(u,d,g,y,b,C,A,w,T):V&6?q(u,d,g,y,b,C,A,w,T):(V&64||V&128)&&v.process(u,d,g,y,b,C,A,w,T,bt)}O!=null&&b&&Mn(O,u&&u.ref,C,d||u,!d)},k=(u,d,g,y)=>{if(u==null)s(d.el=l(d.children),g,y);else{const b=d.el=u.el;d.children!==u.children&&a(b,d.children)}},K=(u,d,g,y)=>{u==null?s(d.el=c(d.children||""),g,y):d.el=u.el},X=(u,d,g,y)=>{[u.el,u.anchor]=N(u.children,d,g,y,u.el,u.anchor)},p=({el:u,anchor:d},g,y)=>{let b;for(;u&&u!==d;)b=_(u),s(u,g,y),u=b;s(d,g,y)},m=({el:u,anchor:d})=>{let g;for(;u&&u!==d;)g=_(u),r(u),u=g;r(d)},P=(u,d,g,y,b,C,A,w,T)=>{d.type==="svg"?A="svg":d.type==="math"&&(A="mathml"),u==null?I(d,g,y,b,C,A,w,T):x(u,d,b,C,A,w,T)},I=(u,d,g,y,b,C,A,w)=>{let T,v;const{props:O,shapeFlag:V,transition:F,dirs:j}=u;if(T=u.el=i(u.type,C,O&&O.is,O),V&8?f(T,u.children):V&16&&R(u.children,T,null,y,b,os(u,C),A,w),j&&Pe(u,null,y,"created"),U(T,u,u.scopeId,A,y),O){for(const Q in O)Q!=="value"&&!Et(Q)&&o(T,Q,null,O[Q],C,u.children,y,b,He);"value"in O&&o(T,"value",null,O.value,C),(v=O.onVnodeBeforeMount)&&Ee(v,y,u)}j&&Pe(u,null,y,"beforeMount");const G=zo(b,F);G&&F.beforeEnter(T),s(T,d,g),((v=O&&O.onVnodeMounted)||G||j)&&ge(()=>{v&&Ee(v,y,u),G&&F.enter(T),j&&Pe(u,null,y,"mounted")},b)},U=(u,d,g,y,b)=>{if(g&&E(u,g),y)for(let C=0;C{for(let v=T;v{const w=d.el=u.el;let{patchFlag:T,dynamicChildren:v,dirs:O}=d;T|=u.patchFlag&16;const V=u.props||ee,F=d.props||ee;let j;if(g&&it(g,!1),(j=F.onVnodeBeforeUpdate)&&Ee(j,g,d,u),O&&Pe(d,u,g,"beforeUpdate"),g&&it(g,!0),v?S(u.dynamicChildren,v,w,g,y,os(d,b),C):A||$(u,d,w,null,g,y,os(d,b),C,!1),T>0){if(T&16)W(w,d,V,F,g,y,b);else if(T&2&&V.class!==F.class&&o(w,"class",null,F.class,b),T&4&&o(w,"style",V.style,F.style,b),T&8){const G=d.dynamicProps;for(let Q=0;Q{j&&Ee(j,g,d,u),O&&Pe(d,u,g,"updated")},y)},S=(u,d,g,y,b,C,A)=>{for(let w=0;w{if(g!==y){if(g!==ee)for(const w in g)!Et(w)&&!(w in y)&&o(u,w,g[w],null,A,d.children,b,C,He);for(const w in y){if(Et(w))continue;const T=y[w],v=g[w];T!==v&&w!=="value"&&o(u,w,v,T,A,d.children,b,C,He)}"value"in y&&o(u,"value",g.value,y.value,A)}},M=(u,d,g,y,b,C,A,w,T)=>{const v=d.el=u?u.el:l(""),O=d.anchor=u?u.anchor:l("");let{patchFlag:V,dynamicChildren:F,slotScopeIds:j}=d;j&&(w=w?w.concat(j):j),u==null?(s(v,g,y),s(O,g,y),R(d.children||[],g,O,b,C,A,w,T)):V>0&&V&64&&F&&u.dynamicChildren?(S(u.dynamicChildren,F,g,b,C,A,w),(d.key!=null||b&&d===b.subTree)&&Jo(u,d,!0)):$(u,d,g,O,b,C,A,w,T)},q=(u,d,g,y,b,C,A,w,T)=>{d.slotScopeIds=w,u==null?d.shapeFlag&512?b.ctx.activate(d,g,y,A,T):te(d,g,y,b,C,A,T):ae(u,d,T)},te=(u,d,g,y,b,C,A)=>{const w=u.component=Mc(u,y,b);if(qn(u)&&(w.ctx.renderer=bt),Oc(w),w.asyncDep){if(b&&b.registerDep(w,D),!u.el){const T=w.subTree=ce(we);K(null,T,d,g)}}else D(w,u,d,g,b,C,A)},ae=(u,d,g)=>{const y=d.component=u.component;if(Vl(u,d,g))if(y.asyncDep&&!y.asyncResolved){z(y,d,g);return}else y.next=d,Pl(y.update),y.effect.dirty=!0,y.update();else d.el=u.el,y.vnode=d},D=(u,d,g,y,b,C,A)=>{const w=()=>{if(u.isMounted){let{next:O,bu:V,u:F,parent:j,vnode:G}=u;{const vt=Xo(u);if(vt){O&&(O.el=G.el,z(u,O,A)),vt.asyncDep.then(()=>{u.isUnmounted||w()});return}}let Q=O,ne;it(u,!1),O?(O.el=G.el,z(u,O,A)):O=G,V&&wn(V),(ne=O.props&&O.props.onVnodeBeforeUpdate)&&Ee(ne,j,O,G),it(u,!0);const le=ns(u),Ae=u.subTree;u.subTree=le,L(Ae,le,h(Ae.el),on(Ae),u,b,C),O.el=le.el,Q===null&&kl(u,le.el),F&&ge(F,b),(ne=O.props&&O.props.onVnodeUpdated)&&ge(()=>Ee(ne,j,O,G),b)}else{let O;const{el:V,props:F}=d,{bm:j,m:G,parent:Q}=u,ne=St(d);if(it(u,!1),j&&wn(j),!ne&&(O=F&&F.onVnodeBeforeMount)&&Ee(O,Q,d),it(u,!0),V&&es){const le=()=>{u.subTree=ns(u),es(V,u.subTree,u,b,null)};ne?d.type.__asyncLoader().then(()=>!u.isUnmounted&&le()):le()}else{const le=u.subTree=ns(u);L(null,le,g,y,u,b,C),d.el=le.el}if(G&&ge(G,b),!ne&&(O=F&&F.onVnodeMounted)){const le=d;ge(()=>Ee(O,Q,le),b)}(d.shapeFlag&256||Q&&St(Q.vnode)&&Q.vnode.shapeFlag&256)&&u.a&&ge(u.a,b),u.isMounted=!0,d=g=y=null}},T=u.effect=new Is(w,be,()=>Ds(v),u.scope),v=u.update=()=>{T.dirty&&T.run()};v.id=u.uid,it(u,!0),v()},z=(u,d,g)=>{d.component=u;const y=u.vnode.props;u.vnode=d,u.next=null,dc(u,d.props,y,g),gc(u,d.children,g),nt(),or(u),st()},$=(u,d,g,y,b,C,A,w,T=!1)=>{const v=u&&u.children,O=u?u.shapeFlag:0,V=d.children,{patchFlag:F,shapeFlag:j}=d;if(F>0){if(F&128){yt(v,V,g,y,b,C,A,w,T);return}else if(F&256){Me(v,V,g,y,b,C,A,w,T);return}}j&8?(O&16&&He(v,b,C),V!==v&&f(g,V)):O&16?j&16?yt(v,V,g,y,b,C,A,w,T):He(v,b,C,!0):(O&8&&f(g,""),j&16&&R(V,g,y,b,C,A,w,T))},Me=(u,d,g,y,b,C,A,w,T)=>{u=u||wt,d=d||wt;const v=u.length,O=d.length,V=Math.min(v,O);let F;for(F=0;FO?He(u,b,C,!0,!1,V):R(d,g,y,b,C,A,w,T,V)},yt=(u,d,g,y,b,C,A,w,T)=>{let v=0;const O=d.length;let V=u.length-1,F=O-1;for(;v<=V&&v<=F;){const j=u[v],G=d[v]=T?Ye(d[v]):Re(d[v]);if(at(j,G))L(j,G,g,null,b,C,A,w,T);else break;v++}for(;v<=V&&v<=F;){const j=u[V],G=d[F]=T?Ye(d[F]):Re(d[F]);if(at(j,G))L(j,G,g,null,b,C,A,w,T);else break;V--,F--}if(v>V){if(v<=F){const j=F+1,G=jF)for(;v<=V;)Oe(u[v],b,C,!0),v++;else{const j=v,G=v,Q=new Map;for(v=G;v<=F;v++){const _e=d[v]=T?Ye(d[v]):Re(d[v]);_e.key!=null&&Q.set(_e.key,v)}let ne,le=0;const Ae=F-G+1;let vt=!1,Gs=0;const Nt=new Array(Ae);for(v=0;v=Ae){Oe(_e,b,C,!0);continue}let Le;if(_e.key!=null)Le=Q.get(_e.key);else for(ne=G;ne<=F;ne++)if(Nt[ne-G]===0&&at(_e,d[ne])){Le=ne;break}Le===void 0?Oe(_e,b,C,!0):(Nt[Le-G]=v+1,Le>=Gs?Gs=Le:vt=!0,L(_e,d[Le],g,null,b,C,A,w,T),le++)}const Ys=vt?Cc(Nt):wt;for(ne=Ys.length-1,v=Ae-1;v>=0;v--){const _e=G+v,Le=d[_e],zs=_e+1{const{el:C,type:A,transition:w,children:T,shapeFlag:v}=u;if(v&6){rt(u.component.subTree,d,g,y);return}if(v&128){u.suspense.move(d,g,y);return}if(v&64){A.move(u,d,g,bt);return}if(A===pe){s(C,d,g);for(let V=0;Vw.enter(C),b);else{const{leave:V,delayLeave:F,afterLeave:j}=w,G=()=>s(C,d,g),Q=()=>{V(C,()=>{G(),j&&j()})};F?F(C,G,Q):Q()}else s(C,d,g)},Oe=(u,d,g,y=!1,b=!1)=>{const{type:C,props:A,ref:w,children:T,dynamicChildren:v,shapeFlag:O,patchFlag:V,dirs:F}=u;if(w!=null&&Mn(w,null,g,u,!0),O&256){d.ctx.deactivate(u);return}const j=O&1&&F,G=!St(u);let Q;if(G&&(Q=A&&A.onVnodeBeforeUnmount)&&Ee(Q,d,u),O&6)Fi(u.component,g,y);else{if(O&128){u.suspense.unmount(g,y);return}j&&Pe(u,null,d,"beforeUnmount"),O&64?u.type.remove(u,d,g,b,bt,y):v&&(C!==pe||V>0&&V&64)?He(v,d,g,!1,!0):(C===pe&&V&384||!b&&O&16)&&He(T,d,g),y&&Ws(u)}(G&&(Q=A&&A.onVnodeUnmounted)||j)&&ge(()=>{Q&&Ee(Q,d,u),j&&Pe(u,null,d,"unmounted")},g)},Ws=u=>{const{type:d,el:g,anchor:y,transition:b}=u;if(d===pe){Ni(g,y);return}if(d===Kt){m(u);return}const C=()=>{r(g),b&&!b.persisted&&b.afterLeave&&b.afterLeave()};if(u.shapeFlag&1&&b&&!b.persisted){const{leave:A,delayLeave:w}=b,T=()=>A(g,C);w?w(u.el,C,T):T()}else C()},Ni=(u,d)=>{let g;for(;u!==d;)g=_(u),r(u),u=g;r(d)},Fi=(u,d,g)=>{const{bum:y,scope:b,update:C,subTree:A,um:w}=u;y&&wn(y),b.stop(),C&&(C.active=!1,Oe(A,u,d,g)),w&&ge(w,d),ge(()=>{u.isUnmounted=!0},d),d&&d.pendingBranch&&!d.isUnmounted&&u.asyncDep&&!u.asyncResolved&&u.suspenseId===d.pendingId&&(d.deps--,d.deps===0&&d.resolve())},He=(u,d,g,y=!1,b=!1,C=0)=>{for(let A=C;Au.shapeFlag&6?on(u.component.subTree):u.shapeFlag&128?u.suspense.next():_(u.anchor||u.el);let Qn=!1;const qs=(u,d,g)=>{u==null?d._vnode&&Oe(d._vnode,null,null,!0):L(d._vnode||null,u,d,null,null,null,g),Qn||(Qn=!0,or(),An(),Qn=!1),d._vnode=u},bt={p:L,um:Oe,m:rt,r:Ws,mt:te,mc:R,pc:$,pbc:S,n:on,o:e};let Zn,es;return t&&([Zn,es]=t(bt)),{render:qs,hydrate:Zn,createApp:ac(qs,Zn)}}function os({type:e,props:t},n){return n==="svg"&&e==="foreignObject"||n==="mathml"&&e==="annotation-xml"&&t&&t.encoding&&t.encoding.includes("html")?void 0:n}function it({effect:e,update:t},n){e.allowRecurse=t.allowRecurse=n}function zo(e,t){return(!e||e&&!e.pendingBranch)&&t&&!t.persisted}function Jo(e,t,n=!1){const s=e.children,r=t.children;if(H(s)&&H(r))for(let o=0;o>1,e[n[l]]0&&(t[s]=n[o-1]),n[o]=s)}}for(o=n.length,i=n[o-1];o-- >0;)n[o]=i,i=t[i];return n}function Xo(e){const t=e.subTree.component;if(t)return t.asyncDep&&!t.asyncResolved?t:Xo(t)}const Ec=e=>e.__isTeleport,pe=Symbol.for("v-fgt"),It=Symbol.for("v-txt"),we=Symbol.for("v-cmt"),Kt=Symbol.for("v-stc"),Wt=[];let Ie=null;function Qo(e=!1){Wt.push(Ie=e?null:[])}function Tc(){Wt.pop(),Ie=Wt[Wt.length-1]||null}let Qt=1;function _r(e){Qt+=e}function Zo(e){return e.dynamicChildren=Qt>0?Ie||wt:null,Tc(),Qt>0&&Ie&&Ie.push(e),e}function Ru(e,t,n,s,r,o){return Zo(ni(e,t,n,s,r,o,!0))}function ei(e,t,n,s,r){return Zo(ce(e,t,n,s,r,!0))}function On(e){return e?e.__v_isVNode===!0:!1}function at(e,t){return e.type===t.type&&e.key===t.key}const zn="__vInternal",ti=({key:e})=>e??null,Cn=({ref:e,ref_key:t,ref_for:n})=>(typeof e=="number"&&(e=""+e),e!=null?se(e)||fe(e)||B(e)?{i:ie,r:e,k:t,f:!!n}:e:null);function ni(e,t=null,n=null,s=0,r=null,o=e===pe?0:1,i=!1,l=!1){const c={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&ti(t),ref:t&&Cn(t),scopeId:Kn,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:o,patchFlag:s,dynamicProps:r,dynamicChildren:null,appContext:null,ctx:ie};return l?(Bs(c,n),o&128&&e.normalize(c)):n&&(c.shapeFlag|=se(n)?8:16),Qt>0&&!i&&Ie&&(c.patchFlag>0||o&6)&&c.patchFlag!==32&&Ie.push(c),c}const ce=xc;function xc(e,t=null,n=null,s=0,r=null,o=!1){if((!e||e===Ro)&&(e=we),On(e)){const l=et(e,t,!0);return n&&Bs(l,n),Qt>0&&!o&&Ie&&(l.shapeFlag&6?Ie[Ie.indexOf(e)]=l:Ie.push(l)),l.patchFlag|=-2,l}if(Hc(e)&&(e=e.__vccOpts),t){t=Sc(t);let{class:l,style:c}=t;l&&!se(l)&&(t.class=Dn(l)),Z(c)&&(go(c)&&!H(c)&&(c=oe({},c)),t.style=$n(c))}const i=se(e)?1:Ul(e)?128:Ec(e)?64:Z(e)?4:B(e)?2:0;return ni(e,t,n,s,r,i,o,!0)}function Sc(e){return e?go(e)||zn in e?oe({},e):e:null}function et(e,t,n=!1){const{props:s,ref:r,patchFlag:o,children:i}=e,l=t?Ac(s||{},t):s;return{__v_isVNode:!0,__v_skip:!0,type:e.type,props:l,key:l&&ti(l),ref:t&&t.ref?n&&r?H(r)?r.concat(Cn(t)):[r,Cn(t)]:Cn(t):r,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:i,target:e.target,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==pe?o===-1?16:o|16:o,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:e.transition,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&et(e.ssContent),ssFallback:e.ssFallback&&et(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce}}function si(e=" ",t=0){return ce(It,null,e,t)}function Iu(e,t){const n=ce(Kt,null,e);return n.staticCount=t,n}function Mu(e="",t=!1){return t?(Qo(),ei(we,null,e)):ce(we,null,e)}function Re(e){return e==null||typeof e=="boolean"?ce(we):H(e)?ce(pe,null,e.slice()):typeof e=="object"?Ye(e):ce(It,null,String(e))}function Ye(e){return e.el===null&&e.patchFlag!==-1||e.memo?e:et(e)}function Bs(e,t){let n=0;const{shapeFlag:s}=e;if(t==null)t=null;else if(H(t))n=16;else if(typeof t=="object")if(s&65){const r=t.default;r&&(r._c&&(r._d=!1),Bs(e,r()),r._c&&(r._d=!0));return}else{n=32;const r=t._;!r&&!(zn in t)?t._ctx=ie:r===3&&ie&&(ie.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else B(t)?(t={default:t,_ctx:ie},n=32):(t=String(t),s&64?(n=16,t=[si(t)]):n=8);e.children=t,e.shapeFlag|=n}function Ac(...e){const t={};for(let n=0;nue||ie;let Ln,vs;{const e=As(),t=(n,s)=>{let r;return(r=e[n])||(r=e[n]=[]),r.push(s),o=>{r.length>1?r.forEach(i=>i(o)):r[0](o)}};Ln=t("__VUE_INSTANCE_SETTERS__",n=>ue=n),vs=t("__VUE_SSR_SETTERS__",n=>Jn=n)}const rn=e=>{const t=ue;return Ln(e),e.scope.on(),()=>{e.scope.off(),Ln(t)}},yr=()=>{ue&&ue.scope.off(),Ln(null)};function ri(e){return e.vnode.shapeFlag&4}let Jn=!1;function Oc(e,t=!1){t&&vs(t);const{props:n,children:s}=e.vnode,r=ri(e);fc(e,n,r,t),pc(e,s);const o=r?Lc(e,t):void 0;return t&&vs(!1),o}function Lc(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=Vt(new Proxy(e.ctx,nc));const{setup:s}=n;if(s){const r=e.setupContext=s.length>1?ii(e):null,o=rn(e);nt();const i=ke(s,e,0,[e.props,r]);if(st(),o(),Xr(i)){if(i.then(yr,yr),t)return i.then(l=>{br(e,l,t)}).catch(l=>{jn(l,e,0)});e.asyncDep=i}else br(e,i,t)}else oi(e,t)}function br(e,t,n){B(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:Z(t)&&(e.setupState=vo(t)),oi(e,n)}let vr;function oi(e,t,n){const s=e.type;if(!e.render){if(!t&&vr&&!s.render){const r=s.template||Us(e).template;if(r){const{isCustomElement:o,compilerOptions:i}=e.appContext.config,{delimiters:l,compilerOptions:c}=s,a=oe(oe({isCustomElement:o,delimiters:l},i),c);s.render=vr(r,a)}}e.render=s.render||be}{const r=rn(e);nt();try{sc(e)}finally{st(),r()}}}function Pc(e){return e.attrsProxy||(e.attrsProxy=new Proxy(e.attrs,{get(t,n){return me(e,"get","$attrs"),t[n]}}))}function ii(e){const t=n=>{e.exposed=n||{}};return{get attrs(){return Pc(e)},slots:e.slots,emit:e.emit,expose:t}}function Xn(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy(vo(Vt(e.exposed)),{get(t,n){if(n in t)return t[n];if(n in jt)return jt[n](e)},has(t,n){return n in t||n in jt}}))}const Nc=/(?:^|[-_])(\w)/g,Fc=e=>e.replace(Nc,t=>t.toUpperCase()).replace(/[-_]/g,"");function li(e,t=!0){return B(e)?e.displayName||e.name:e.name||t&&e.__name}function ci(e,t,n=!1){let s=li(t);if(!s&&t.__file){const r=t.__file.match(/([^/\\]+)\.\w+$/);r&&(s=r[1])}if(!s&&e&&e.parent){const r=o=>{for(const i in o)if(o[i]===t)return i};s=r(e.components||e.parent.type.components)||r(e.appContext.components)}return s?Fc(s):n?"App":"Anonymous"}function Hc(e){return B(e)&&"__vccOpts"in e}const re=(e,t)=>bl(e,t,Jn);function ws(e,t,n){const s=arguments.length;return s===2?Z(t)&&!H(t)?On(t)?ce(e,null,[t]):ce(e,t):ce(e,null,t):(s>3?n=Array.prototype.slice.call(arguments,2):s===3&&On(n)&&(n=[n]),ce(e,t,n))}const $c="3.4.19";/** +* @vue/runtime-dom v3.4.19 +* (c) 2018-present Yuxi (Evan) You and Vue contributors +* @license MIT +**/const Dc="http://www.w3.org/2000/svg",Vc="http://www.w3.org/1998/Math/MathML",ze=typeof document<"u"?document:null,wr=ze&&ze.createElement("template"),kc={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,s)=>{const r=t==="svg"?ze.createElementNS(Dc,e):t==="mathml"?ze.createElementNS(Vc,e):ze.createElement(e,n?{is:n}:void 0);return e==="select"&&s&&s.multiple!=null&&r.setAttribute("multiple",s.multiple),r},createText:e=>ze.createTextNode(e),createComment:e=>ze.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>ze.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,s,r,o){const i=n?n.previousSibling:t.lastChild;if(r&&(r===o||r.nextSibling))for(;t.insertBefore(r.cloneNode(!0),n),!(r===o||!(r=r.nextSibling)););else{wr.innerHTML=s==="svg"?`${e}`:s==="mathml"?`${e}`:e;const l=wr.content;if(s==="svg"||s==="mathml"){const c=l.firstChild;for(;c.firstChild;)l.appendChild(c.firstChild);l.removeChild(c)}t.insertBefore(l,n)}return[i?i.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}},Ke="transition",Ht="animation",Mt=Symbol("_vtc"),ai=(e,{slots:t})=>ws(ql,fi(e),t);ai.displayName="Transition";const ui={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String},Uc=ai.props=oe({},No,ui),lt=(e,t=[])=>{H(e)?e.forEach(n=>n(...t)):e&&e(...t)},Cr=e=>e?H(e)?e.some(t=>t.length>1):e.length>1:!1;function fi(e){const t={};for(const M in e)M in ui||(t[M]=e[M]);if(e.css===!1)return t;const{name:n="v",type:s,duration:r,enterFromClass:o=`${n}-enter-from`,enterActiveClass:i=`${n}-enter-active`,enterToClass:l=`${n}-enter-to`,appearFromClass:c=o,appearActiveClass:a=i,appearToClass:f=l,leaveFromClass:h=`${n}-leave-from`,leaveActiveClass:_=`${n}-leave-active`,leaveToClass:E=`${n}-leave-to`}=e,N=jc(r),L=N&&N[0],k=N&&N[1],{onBeforeEnter:K,onEnter:X,onEnterCancelled:p,onLeave:m,onLeaveCancelled:P,onBeforeAppear:I=K,onAppear:U=X,onAppearCancelled:R=p}=t,x=(M,q,te)=>{We(M,q?f:l),We(M,q?a:i),te&&te()},S=(M,q)=>{M._isLeaving=!1,We(M,h),We(M,E),We(M,_),q&&q()},W=M=>(q,te)=>{const ae=M?U:X,D=()=>x(q,M,te);lt(ae,[q,D]),Er(()=>{We(q,M?c:o),$e(q,M?f:l),Cr(ae)||Tr(q,s,L,D)})};return oe(t,{onBeforeEnter(M){lt(K,[M]),$e(M,o),$e(M,i)},onBeforeAppear(M){lt(I,[M]),$e(M,c),$e(M,a)},onEnter:W(!1),onAppear:W(!0),onLeave(M,q){M._isLeaving=!0;const te=()=>S(M,q);$e(M,h),hi(),$e(M,_),Er(()=>{M._isLeaving&&(We(M,h),$e(M,E),Cr(m)||Tr(M,s,k,te))}),lt(m,[M,te])},onEnterCancelled(M){x(M,!1),lt(p,[M])},onAppearCancelled(M){x(M,!0),lt(R,[M])},onLeaveCancelled(M){S(M),lt(P,[M])}})}function jc(e){if(e==null)return null;if(Z(e))return[is(e.enter),is(e.leave)];{const t=is(e);return[t,t]}}function is(e){return Ui(e)}function $e(e,t){t.split(/\s+/).forEach(n=>n&&e.classList.add(n)),(e[Mt]||(e[Mt]=new Set)).add(t)}function We(e,t){t.split(/\s+/).forEach(s=>s&&e.classList.remove(s));const n=e[Mt];n&&(n.delete(t),n.size||(e[Mt]=void 0))}function Er(e){requestAnimationFrame(()=>{requestAnimationFrame(e)})}let Bc=0;function Tr(e,t,n,s){const r=e._endId=++Bc,o=()=>{r===e._endId&&s()};if(n)return setTimeout(o,n);const{type:i,timeout:l,propCount:c}=di(e,t);if(!i)return s();const a=i+"end";let f=0;const h=()=>{e.removeEventListener(a,_),o()},_=E=>{E.target===e&&++f>=c&&h()};setTimeout(()=>{f(n[N]||"").split(", "),r=s(`${Ke}Delay`),o=s(`${Ke}Duration`),i=xr(r,o),l=s(`${Ht}Delay`),c=s(`${Ht}Duration`),a=xr(l,c);let f=null,h=0,_=0;t===Ke?i>0&&(f=Ke,h=i,_=o.length):t===Ht?a>0&&(f=Ht,h=a,_=c.length):(h=Math.max(i,a),f=h>0?i>a?Ke:Ht:null,_=f?f===Ke?o.length:c.length:0);const E=f===Ke&&/\b(transform|all)(,|$)/.test(s(`${Ke}Property`).toString());return{type:f,timeout:h,propCount:_,hasTransform:E}}function xr(e,t){for(;e.lengthSr(n)+Sr(e[s])))}function Sr(e){return e==="auto"?0:Number(e.slice(0,-1).replace(",","."))*1e3}function hi(){return document.body.offsetHeight}function Kc(e,t,n){const s=e[Mt];s&&(t=(t?[t,...s]:[...s]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}const Zt=Symbol("_vod"),Ou={beforeMount(e,{value:t},{transition:n}){e[Zt]=e.style.display==="none"?"":e.style.display,n&&t?n.beforeEnter(e):$t(e,t)},mounted(e,{value:t},{transition:n}){n&&t&&n.enter(e)},updated(e,{value:t,oldValue:n},{transition:s}){!t==!n&&(e.style.display===e[Zt]||!t)||(s?t?(s.beforeEnter(e),$t(e,!0),s.enter(e)):s.leave(e,()=>{$t(e,!1)}):$t(e,t))},beforeUnmount(e,{value:t}){$t(e,t)}};function $t(e,t){e.style.display=t?e[Zt]:"none"}const Wc=Symbol(""),qc=/(^|;)\s*display\s*:/;function Gc(e,t,n){const s=e.style,r=se(n),o=s.display;let i=!1;if(n&&!r){if(t&&!se(t))for(const l in t)n[l]==null&&Cs(s,l,"");for(const l in n)l==="display"&&(i=!0),Cs(s,l,n[l])}else if(r){if(t!==n){const l=s[Wc];l&&(n+=";"+l),s.cssText=n,i=qc.test(n)}}else t&&e.removeAttribute("style");Zt in e&&(e[Zt]=i?s.display:"",s.display=o)}const Ar=/\s*!important$/;function Cs(e,t,n){if(H(n))n.forEach(s=>Cs(e,t,s));else if(n==null&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const s=Yc(e,t);Ar.test(n)?e.setProperty(_t(s),n.replace(Ar,""),"important"):e[s]=n}}const Rr=["Webkit","Moz","ms"],ls={};function Yc(e,t){const n=ls[t];if(n)return n;let s=Fe(t);if(s!=="filter"&&s in e)return ls[t]=s;s=Hn(s);for(let r=0;rcs||(ea.then(()=>cs=0),cs=Date.now());function na(e,t){const n=s=>{if(!s._vts)s._vts=Date.now();else if(s._vts<=n.attached)return;xe(sa(s,n.value),t,5,[s])};return n.value=e,n.attached=ta(),n}function sa(e,t){if(H(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(s=>r=>!r._stopped&&s&&s(r))}else return t}const Lr=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&e.charCodeAt(2)>96&&e.charCodeAt(2)<123,ra=(e,t,n,s,r,o,i,l,c)=>{const a=r==="svg";t==="class"?Kc(e,s,a):t==="style"?Gc(e,n,s):en(t)?Ts(t)||Qc(e,t,n,s,i):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):oa(e,t,s,a))?Jc(e,t,s,o,i,l,c):(t==="true-value"?e._trueValue=s:t==="false-value"&&(e._falseValue=s),zc(e,t,s,a))};function oa(e,t,n,s){if(s)return!!(t==="innerHTML"||t==="textContent"||t in e&&Lr(t)&&B(n));if(t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA")return!1;if(t==="width"||t==="height"){const r=e.tagName;if(r==="IMG"||r==="VIDEO"||r==="CANVAS"||r==="SOURCE")return!1}return Lr(t)&&se(n)?!1:t in e}const pi=new WeakMap,gi=new WeakMap,Pn=Symbol("_moveCb"),Pr=Symbol("_enterCb"),mi={name:"TransitionGroup",props:oe({},Uc,{tag:String,moveClass:String}),setup(e,{slots:t}){const n=sn(),s=Po();let r,o;return Do(()=>{if(!r.length)return;const i=e.moveClass||`${e.name||"v"}-move`;if(!ua(r[0].el,n.vnode.el,i))return;r.forEach(la),r.forEach(ca);const l=r.filter(aa);hi(),l.forEach(c=>{const a=c.el,f=a.style;$e(a,i),f.transform=f.webkitTransform=f.transitionDuration="";const h=a[Pn]=_=>{_&&_.target!==a||(!_||/transform$/.test(_.propertyName))&&(a.removeEventListener("transitionend",h),a[Pn]=null,We(a,i))};a.addEventListener("transitionend",h)})}),()=>{const i=Y(e),l=fi(i);let c=i.tag||pe;r=o,o=t.default?ks(t.default()):[];for(let a=0;adelete e.mode;mi.props;const Lu=mi;function la(e){const t=e.el;t[Pn]&&t[Pn](),t[Pr]&&t[Pr]()}function ca(e){gi.set(e,e.el.getBoundingClientRect())}function aa(e){const t=pi.get(e),n=gi.get(e),s=t.left-n.left,r=t.top-n.top;if(s||r){const o=e.el.style;return o.transform=o.webkitTransform=`translate(${s}px,${r}px)`,o.transitionDuration="0s",e}}function ua(e,t,n){const s=e.cloneNode(),r=e[Mt];r&&r.forEach(l=>{l.split(/\s+/).forEach(c=>c&&s.classList.remove(c))}),n.split(/\s+/).forEach(l=>l&&s.classList.add(l)),s.style.display="none";const o=t.nodeType===1?t:t.parentNode;o.appendChild(s);const{hasTransform:i}=di(s);return o.removeChild(s),i}const tt=e=>{const t=e.props["onUpdate:modelValue"]||!1;return H(t)?n=>wn(t,n):t};function fa(e){e.target.composing=!0}function Nr(e){const t=e.target;t.composing&&(t.composing=!1,t.dispatchEvent(new Event("input")))}const Se=Symbol("_assign"),Fr={created(e,{modifiers:{lazy:t,trim:n,number:s}},r){e[Se]=tt(r);const o=s||r.props&&r.props.type==="number";De(e,t?"change":"input",i=>{if(i.target.composing)return;let l=e.value;n&&(l=l.trim()),o&&(l=qt(l)),e[Se](l)}),n&&De(e,"change",()=>{e.value=e.value.trim()}),t||(De(e,"compositionstart",fa),De(e,"compositionend",Nr),De(e,"change",Nr))},mounted(e,{value:t}){e.value=t??""},beforeUpdate(e,{value:t,modifiers:{lazy:n,trim:s,number:r}},o){if(e[Se]=tt(o),e.composing)return;const i=r||e.type==="number"?qt(e.value):e.value,l=t??"";i!==l&&(document.activeElement===e&&e.type!=="range"&&(n||s&&e.value.trim()===l)||(e.value=l))}},da={deep:!0,created(e,t,n){e[Se]=tt(n),De(e,"change",()=>{const s=e._modelValue,r=Ot(e),o=e.checked,i=e[Se];if(H(s)){const l=Rs(s,r),c=l!==-1;if(o&&!c)i(s.concat(r));else if(!o&&c){const a=[...s];a.splice(l,1),i(a)}}else if(Lt(s)){const l=new Set(s);o?l.add(r):l.delete(r),i(l)}else i(_i(e,o))})},mounted:Hr,beforeUpdate(e,t,n){e[Se]=tt(n),Hr(e,t,n)}};function Hr(e,{value:t,oldValue:n},s){e._modelValue=t,H(t)?e.checked=Rs(t,s.props.value)>-1:Lt(t)?e.checked=t.has(s.props.value):t!==n&&(e.checked=gt(t,_i(e,!0)))}const ha={created(e,{value:t},n){e.checked=gt(t,n.props.value),e[Se]=tt(n),De(e,"change",()=>{e[Se](Ot(e))})},beforeUpdate(e,{value:t,oldValue:n},s){e[Se]=tt(s),t!==n&&(e.checked=gt(t,s.props.value))}},pa={deep:!0,created(e,{value:t,modifiers:{number:n}},s){const r=Lt(t);De(e,"change",()=>{const o=Array.prototype.filter.call(e.options,i=>i.selected).map(i=>n?qt(Ot(i)):Ot(i));e[Se](e.multiple?r?new Set(o):o:o[0]),e._assigning=!0,nn(()=>{e._assigning=!1})}),e[Se]=tt(s)},mounted(e,{value:t,oldValue:n,modifiers:{number:s}}){$r(e,t,n,s)},beforeUpdate(e,t,n){e[Se]=tt(n)},updated(e,{value:t,oldValue:n,modifiers:{number:s}}){e._assigning||$r(e,t,n,s)}};function $r(e,t,n,s){const r=e.multiple,o=H(t);if(!(r&&!o&&!Lt(t))){for(let i=0,l=e.options.length;i-1}else c.selected=t.has(a);else if(gt(Ot(c),t)){e.selectedIndex!==i&&(e.selectedIndex=i);return}}!r&&e.selectedIndex!==-1&&(e.selectedIndex=-1)}}function Ot(e){return"_value"in e?e._value:e.value}function _i(e,t){const n=t?"_trueValue":"_falseValue";return n in e?e[n]:t}const Pu={created(e,t,n){gn(e,t,n,null,"created")},mounted(e,t,n){gn(e,t,n,null,"mounted")},beforeUpdate(e,t,n,s){gn(e,t,n,s,"beforeUpdate")},updated(e,t,n,s){gn(e,t,n,s,"updated")}};function ga(e,t){switch(e){case"SELECT":return pa;case"TEXTAREA":return Fr;default:switch(t){case"checkbox":return da;case"radio":return ha;default:return Fr}}}function gn(e,t,n,s,r){const i=ga(e.tagName,n.props&&n.props.type)[r];i&&i(e,t,n,s)}const ma=["ctrl","shift","alt","meta"],_a={stop:e=>e.stopPropagation(),prevent:e=>e.preventDefault(),self:e=>e.target!==e.currentTarget,ctrl:e=>!e.ctrlKey,shift:e=>!e.shiftKey,alt:e=>!e.altKey,meta:e=>!e.metaKey,left:e=>"button"in e&&e.button!==0,middle:e=>"button"in e&&e.button!==1,right:e=>"button"in e&&e.button!==2,exact:(e,t)=>ma.some(n=>e[`${n}Key`]&&!t.includes(n))},Nu=(e,t)=>{const n=e._withMods||(e._withMods={}),s=t.join(".");return n[s]||(n[s]=(r,...o)=>{for(let i=0;i{const n=e._withKeys||(e._withKeys={}),s=t.join(".");return n[s]||(n[s]=r=>{if(!("key"in r))return;const o=_t(r.key);if(t.some(i=>i===o||ya[i]===o))return e(r)})},ba=oe({patchProp:ra},kc);let as,Dr=!1;function va(){return as=Dr?as:vc(ba),Dr=!0,as}const Hu=(...e)=>{const t=va().createApp(...e),{mount:n}=t;return t.mount=s=>{const r=Ca(s);if(r)return n(r,!0,wa(r))},t};function wa(e){if(e instanceof SVGElement)return"svg";if(typeof MathMLElement=="function"&&e instanceof MathMLElement)return"mathml"}function Ca(e){return se(e)?document.querySelector(e):e}const $u=(e,t)=>{const n=e.__vccOpts||e;for(const[s,r]of t)n[s]=r;return n},Ea="modulepreload",Ta=function(e){return"/"+e},Vr={},Du=function(t,n,s){if(!n||n.length===0)return t();const r=document.getElementsByTagName("link");return Promise.all(n.map(o=>{if(o=Ta(o),o in Vr)return;Vr[o]=!0;const i=o.endsWith(".css"),l=i?'[rel="stylesheet"]':"";if(!!s)for(let f=r.length-1;f>=0;f--){const h=r[f];if(h.href===o&&(!i||h.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${o}"]${l}`))return;const a=document.createElement("link");if(a.rel=i?"stylesheet":Ea,i||(a.as="script",a.crossOrigin=""),a.href=o,document.head.appendChild(a),i)return new Promise((f,h)=>{a.addEventListener("load",f),a.addEventListener("error",()=>h(new Error(`Unable to preload CSS for ${o}`)))})})).then(()=>t()).catch(o=>{const i=new Event("vite:preloadError",{cancelable:!0});if(i.payload=o,window.dispatchEvent(i),!i.defaultPrevented)throw o})},xa=window.__VP_SITE_DATA__;function Ks(e){return no()?(Xi(e),!0):!1}function pt(e){return typeof e=="function"?e():bo(e)}const yi=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const Sa=Object.prototype.toString,Aa=e=>Sa.call(e)==="[object Object]",bi=()=>{},kr=Ra();function Ra(){var e,t;return yi&&((e=window==null?void 0:window.navigator)==null?void 0:e.userAgent)&&(/iP(ad|hone|od)/.test(window.navigator.userAgent)||((t=window==null?void 0:window.navigator)==null?void 0:t.maxTouchPoints)>2&&/iPad|Macintosh/.test(window==null?void 0:window.navigator.userAgent))}function Ia(e,t){function n(...s){return new Promise((r,o)=>{Promise.resolve(e(()=>t.apply(this,s),{fn:t,thisArg:this,args:s})).then(r).catch(o)})}return n}const vi=e=>e();function Ma(e=vi){const t=ve(!0);function n(){t.value=!1}function s(){t.value=!0}const r=(...o)=>{t.value&&e(...o)};return{isActive:Un(t),pause:n,resume:s,eventFilter:r}}function Oa(e){return e||sn()}function wi(...e){if(e.length!==1)return Sl(...e);const t=e[0];return typeof t=="function"?Un(El(()=>({get:t,set:bi}))):ve(t)}function La(e,t,n={}){const{eventFilter:s=vi,...r}=n;return Xe(e,Ia(s,t),r)}function Pa(e,t,n={}){const{eventFilter:s,...r}=n,{eventFilter:o,pause:i,resume:l,isActive:c}=Ma(s);return{stop:La(e,t,{...r,eventFilter:o}),pause:i,resume:l,isActive:c}}function Ci(e,t=!0,n){Oa()?Pt(e,n):t?e():nn(e)}function Ei(e){var t;const n=pt(e);return(t=n==null?void 0:n.$el)!=null?t:n}const mt=yi?window:void 0;function Nn(...e){let t,n,s,r;if(typeof e[0]=="string"||Array.isArray(e[0])?([n,s,r]=e,t=mt):[t,n,s,r]=e,!t)return bi;Array.isArray(n)||(n=[n]),Array.isArray(s)||(s=[s]);const o=[],i=()=>{o.forEach(f=>f()),o.length=0},l=(f,h,_,E)=>(f.addEventListener(h,_,E),()=>f.removeEventListener(h,_,E)),c=Xe(()=>[Ei(t),pt(r)],([f,h])=>{if(i(),!f)return;const _=Aa(h)?{...h}:h;o.push(...n.flatMap(E=>s.map(N=>l(f,E,N,_))))},{immediate:!0,flush:"post"}),a=()=>{c(),i()};return Ks(a),a}function Na(){const e=ve(!1);return sn()&&Pt(()=>{e.value=!0}),e}function Fa(e){const t=Na();return re(()=>(t.value,!!e()))}function Ha(e,t={}){const{window:n=mt}=t,s=Fa(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let r;const o=ve(!1),i=a=>{o.value=a.matches},l=()=>{r&&("removeEventListener"in r?r.removeEventListener("change",i):r.removeListener(i))},c=Oo(()=>{s.value&&(l(),r=n.matchMedia(pt(e)),"addEventListener"in r?r.addEventListener("change",i):r.addListener(i),o.value=r.matches)});return Ks(()=>{c(),l(),r=void 0}),o}const mn=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},_n="__vueuse_ssr_handlers__",$a=Da();function Da(){return _n in mn||(mn[_n]=mn[_n]||{}),mn[_n]}function Ti(e,t){return $a[e]||t}function Va(e){return e==null?"any":e instanceof Set?"set":e instanceof Map?"map":e instanceof Date?"date":typeof e=="boolean"?"boolean":typeof e=="string"?"string":typeof e=="object"?"object":Number.isNaN(e)?"any":"number"}const ka={boolean:{read:e=>e==="true",write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e))},date:{read:e=>new Date(e),write:e=>e.toISOString()}},Ur="vueuse-storage";function Ua(e,t,n,s={}){var r;const{flush:o="pre",deep:i=!0,listenToStorageChanges:l=!0,writeDefaults:c=!0,mergeDefaults:a=!1,shallow:f,window:h=mt,eventFilter:_,onError:E=x=>{console.error(x)},initOnMounted:N}=s,L=(f?_o:ve)(typeof t=="function"?t():t);if(!n)try{n=Ti("getDefaultStorage",()=>{var x;return(x=mt)==null?void 0:x.localStorage})()}catch(x){E(x)}if(!n)return L;const k=pt(t),K=Va(k),X=(r=s.serializer)!=null?r:ka[K],{pause:p,resume:m}=Pa(L,()=>P(L.value),{flush:o,deep:i,eventFilter:_});return h&&l&&Ci(()=>{Nn(h,"storage",R),Nn(h,Ur,U),N&&R()}),N||R(),L;function P(x){try{if(x==null)n.removeItem(e);else{const S=X.write(x),W=n.getItem(e);W!==S&&(n.setItem(e,S),h&&h.dispatchEvent(new CustomEvent(Ur,{detail:{key:e,oldValue:W,newValue:S,storageArea:n}})))}}catch(S){E(S)}}function I(x){const S=x?x.newValue:n.getItem(e);if(S==null)return c&&k!=null&&n.setItem(e,X.write(k)),k;if(!x&&a){const W=X.read(S);return typeof a=="function"?a(W,k):K==="object"&&!Array.isArray(W)?{...k,...W}:W}else return typeof S!="string"?S:X.read(S)}function U(x){R(x.detail)}function R(x){if(!(x&&x.storageArea!==n)){if(x&&x.key==null){L.value=k;return}if(!(x&&x.key!==e)){p();try{(x==null?void 0:x.newValue)!==X.write(L.value)&&(L.value=I(x))}catch(S){E(S)}finally{x?nn(m):m()}}}}}function xi(e){return Ha("(prefers-color-scheme: dark)",e)}function ja(e={}){const{selector:t="html",attribute:n="class",initialValue:s="auto",window:r=mt,storage:o,storageKey:i="vueuse-color-scheme",listenToStorageChanges:l=!0,storageRef:c,emitAuto:a,disableTransition:f=!0}=e,h={auto:"",light:"light",dark:"dark",...e.modes||{}},_=xi({window:r}),E=re(()=>_.value?"dark":"light"),N=c||(i==null?wi(s):Ua(i,s,o,{window:r,listenToStorageChanges:l})),L=re(()=>N.value==="auto"?E.value:N.value),k=Ti("updateHTMLAttrs",(m,P,I)=>{const U=typeof m=="string"?r==null?void 0:r.document.querySelector(m):Ei(m);if(!U)return;let R;if(f){R=r.document.createElement("style");const x="*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";R.appendChild(document.createTextNode(x)),r.document.head.appendChild(R)}if(P==="class"){const x=I.split(/\s/g);Object.values(h).flatMap(S=>(S||"").split(/\s/g)).filter(Boolean).forEach(S=>{x.includes(S)?U.classList.add(S):U.classList.remove(S)})}else U.setAttribute(P,I);f&&(r.getComputedStyle(R).opacity,document.head.removeChild(R))});function K(m){var P;k(t,n,(P=h[m])!=null?P:m)}function X(m){e.onChanged?e.onChanged(m,K):K(m)}Xe(L,X,{flush:"post",immediate:!0}),Ci(()=>X(L.value));const p=re({get(){return a?N.value:L.value},set(m){N.value=m}});try{return Object.assign(p,{store:N,system:E,state:L})}catch{return p}}function Ba(e={}){const{valueDark:t="dark",valueLight:n="",window:s=mt}=e,r=ja({...e,onChanged:(l,c)=>{var a;e.onChanged?(a=e.onChanged)==null||a.call(e,l==="dark",c,l):c(l)},modes:{dark:t,light:n}}),o=re(()=>r.system?r.system.value:xi({window:s}).value?"dark":"light");return re({get(){return r.value==="dark"},set(l){const c=l?"dark":"light";o.value===c?r.value="auto":r.value=c}})}function us(e){return typeof Window<"u"&&e instanceof Window?e.document.documentElement:typeof Document<"u"&&e instanceof Document?e.documentElement:e}function Si(e){const t=window.getComputedStyle(e);if(t.overflowX==="scroll"||t.overflowY==="scroll"||t.overflowX==="auto"&&e.clientWidth1?!0:(t.preventDefault&&t.preventDefault(),!1)}const yn=new WeakMap;function Vu(e,t=!1){const n=ve(t);let s=null,r;Xe(wi(e),l=>{const c=us(pt(l));if(c){const a=c;yn.get(a)||yn.set(a,r),n.value&&(a.style.overflow="hidden")}},{immediate:!0});const o=()=>{const l=us(pt(e));!l||n.value||(kr&&(s=Nn(l,"touchmove",c=>{Ka(c)},{passive:!1})),l.style.overflow="hidden",n.value=!0)},i=()=>{var l;const c=us(pt(e));!c||!n.value||(kr&&(s==null||s()),c.style.overflow=(l=yn.get(c))!=null?l:"",yn.delete(c),n.value=!1)};return Ks(i),re({get(){return n.value},set(l){l?o():i()}})}function ku(e={}){const{window:t=mt,behavior:n="auto"}=e;if(!t)return{x:ve(0),y:ve(0)};const s=ve(t.scrollX),r=ve(t.scrollY),o=re({get(){return s.value},set(l){scrollTo({left:l,behavior:n})}}),i=re({get(){return r.value},set(l){scrollTo({top:l,behavior:n})}});return Nn(t,"scroll",()=>{s.value=t.scrollX,r.value=t.scrollY},{capture:!1,passive:!0}),{x:o,y:i}}const Ai=/^[a-z]+:/i,Wa="vitepress-theme-appearance",Ri=/#.*$/,qa=/(index)?\.(md|html)$/,Te=typeof document<"u",Ii={relativePath:"",filePath:"",title:"404",description:"Not Found",headers:[],frontmatter:{sidebar:!1,layout:"page"},lastUpdated:0,isNotFound:!0};function Ga(e,t,n=!1){if(t===void 0)return!1;if(e=jr(`/${e}`),n)return new RegExp(t).test(e);if(jr(t)!==e)return!1;const s=t.match(Ri);return s?(Te?location.hash:"")===s[0]:!0}function jr(e){return decodeURI(e).replace(Ri,"").replace(qa,"")}function Ya(e){return Ai.test(e)}function za(e,t){var s,r,o,i,l,c,a;const n=Object.keys(e.locales).find(f=>f!=="root"&&!Ya(f)&&Ga(t,`/${f}/`,!0))||"root";return Object.assign({},e,{localeIndex:n,lang:((s=e.locales[n])==null?void 0:s.lang)??e.lang,dir:((r=e.locales[n])==null?void 0:r.dir)??e.dir,title:((o=e.locales[n])==null?void 0:o.title)??e.title,titleTemplate:((i=e.locales[n])==null?void 0:i.titleTemplate)??e.titleTemplate,description:((l=e.locales[n])==null?void 0:l.description)??e.description,head:Oi(e.head,((c=e.locales[n])==null?void 0:c.head)??[]),themeConfig:{...e.themeConfig,...(a=e.locales[n])==null?void 0:a.themeConfig}})}function Mi(e,t){const n=t.title||e.title,s=t.titleTemplate??e.titleTemplate;if(typeof s=="string"&&s.includes(":title"))return s.replace(/:title/g,n);const r=Ja(e.title,s);return`${n}${r}`}function Ja(e,t){return t===!1?"":t===!0||t===void 0?` | ${e}`:e===t?"":` | ${t}`}function Xa(e,t){const[n,s]=t;if(n!=="meta")return!1;const r=Object.entries(s)[0];return r==null?!1:e.some(([o,i])=>o===n&&i[r[0]]===r[1])}function Oi(e,t){return[...e.filter(n=>!Xa(t,n)),...t]}const Qa=/[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g,Za=/^[a-z]:/i;function Br(e){const t=Za.exec(e),n=t?t[0]:"";return n+e.slice(n.length).replace(Qa,"_").replace(/(^|\/)_+(?=[^/]*$)/,"$1")}const eu=Symbol(),ft=_o(xa);function Uu(e){const t=re(()=>za(ft.value,e.data.relativePath)),n=t.value.appearance?Ba({storageKey:Wa,initialValue:()=>typeof t.value.appearance=="string"?t.value.appearance:"auto",...typeof t.value.appearance=="object"?t.value.appearance:{}}):ve(!1);return{site:t,theme:re(()=>t.value.themeConfig),page:re(()=>e.data),frontmatter:re(()=>e.data.frontmatter),params:re(()=>e.data.params),lang:re(()=>t.value.lang),dir:re(()=>t.value.dir),localeIndex:re(()=>t.value.localeIndex||"root"),title:re(()=>Mi(t.value,e.data)),description:re(()=>e.data.description||t.value.description),isDark:n}}function tu(){const e=At(eu);if(!e)throw new Error("vitepress data not properly injected in app");return e}function nu(e,t){return`${e}${t}`.replace(/\/+/g,"/")}function Kr(e){return Ai.test(e)||!e.startsWith("/")?e:nu(ft.value.base,e)}function su(e){let t=e.replace(/\.html$/,"");if(t=decodeURIComponent(t),t=t.replace(/\/$/,"/index"),Te){const n="/";t=Br(t.slice(n.length).replace(/\//g,"_")||"index")+".md";let s=__VP_HASH_MAP__[t.toLowerCase()];if(s||(t=t.endsWith("_index.md")?t.slice(0,-9)+".md":t.slice(0,-3)+"_index.md",s=__VP_HASH_MAP__[t.toLowerCase()]),!s)return null;t=`${n}assets/${t}.${s}.js`}else t=`./${Br(t.slice(1).replace(/\//g,"_"))}.md.js`;return t}let En=[];function ju(e){En.push(e),Yn(()=>{En=En.filter(t=>t!==e)})}const ru=Symbol(),Wr="http://a.com",ou=()=>({path:"/",component:null,data:Ii});function Bu(e,t){const n=kn(ou()),s={route:n,go:r};async function r(l=Te?location.href:"/"){var a,f;if(await((a=s.onBeforeRouteChange)==null?void 0:a.call(s,l))===!1)return;const c=new URL(l,Wr);ft.value.cleanUrls||!c.pathname.endsWith("/")&&!c.pathname.endsWith(".html")&&(c.pathname+=".html",l=c.pathname+c.search+c.hash),Yr(l),await i(l),await((f=s.onAfterRouteChanged)==null?void 0:f.call(s,l))}let o=null;async function i(l,c=0,a=!1){var _;if(await((_=s.onBeforePageLoad)==null?void 0:_.call(s,l))===!1)return;const f=new URL(l,Wr),h=o=f.pathname;try{let E=await e(h);if(!E)throw new Error(`Page not found: ${h}`);if(o===h){o=null;const{default:N,__pageData:L}=E;if(!N)throw new Error(`Invalid route component: ${N}`);n.path=Te?h:Kr(h),n.component=Vt(N),n.data=Vt(L),Te&&nn(()=>{let k=ft.value.base+L.relativePath.replace(/(?:(^|\/)index)?\.md$/,"$1");if(!ft.value.cleanUrls&&!k.endsWith("/")&&(k+=".html"),k!==f.pathname&&(f.pathname=k,l=k+f.search+f.hash,history.replaceState(null,"",l)),f.hash&&!c){let K=null;try{K=document.getElementById(decodeURIComponent(f.hash).slice(1))}catch(X){console.warn(X)}if(K){qr(K,f.hash);return}}window.scrollTo(0,c)})}}catch(E){if(!/fetch|Page not found/.test(E.message)&&!/^\/404(\.html|\/)?$/.test(l)&&console.error(E),!a)try{const N=await fetch(ft.value.base+"hashmap.json");window.__VP_HASH_MAP__=await N.json(),await i(l,c,!0);return}catch{}o===h&&(o=null,n.path=Te?h:Kr(h),n.component=t?Vt(t):null,n.data=Ii)}}return Te&&(window.addEventListener("click",l=>{if(l.target.closest("button"))return;const a=l.target.closest("a");if(a&&!a.closest(".vp-raw")&&(a instanceof SVGElement||!a.download)){const{target:f}=a,{href:h,origin:_,pathname:E,hash:N,search:L}=new URL(a.href instanceof SVGAnimatedString?a.href.animVal:a.href,a.baseURI),k=window.location,K=E.match(/\.\w+$/);!l.ctrlKey&&!l.shiftKey&&!l.altKey&&!l.metaKey&&!f&&_===k.origin&&!(K&&K[0]!==".html")&&(l.preventDefault(),E===k.pathname&&L===k.search?(N!==k.hash&&(history.pushState(null,"",N),window.dispatchEvent(new Event("hashchange"))),N?qr(a,N,a.classList.contains("header-anchor")):(Yr(h),window.scrollTo(0,0))):r(h))}},{capture:!0}),window.addEventListener("popstate",l=>{i(location.href,l.state&&l.state.scrollPosition||0)}),window.addEventListener("hashchange",l=>{l.preventDefault()})),s}function iu(){const e=At(ru);if(!e)throw new Error("useRouter() is called without provider.");return e}function Li(){return iu().route}function qr(e,t,n=!1){let s=null;try{s=e.classList.contains("header-anchor")?e:document.getElementById(decodeURIComponent(t).slice(1))}catch(r){console.warn(r)}if(s){let a=function(){!n||Math.abs(c-window.scrollY)>window.innerHeight?window.scrollTo(0,c):window.scrollTo({left:0,top:c,behavior:"smooth"})},r=ft.value.scrollOffset,o=0,i=24;if(typeof r=="object"&&"padding"in r&&(i=r.padding,r=r.selector),typeof r=="number")o=r;else if(typeof r=="string")o=Gr(r,i);else if(Array.isArray(r))for(const f of r){const h=Gr(f,i);if(h){o=h;break}}const l=parseInt(window.getComputedStyle(s).paddingTop,10),c=window.scrollY+s.getBoundingClientRect().top-o+l;requestAnimationFrame(a)}}function Gr(e,t){const n=document.querySelector(e);if(!n)return 0;const s=n.getBoundingClientRect().bottom;return s<0?0:s+t}function Yr(e){Te&&e!==location.href&&(history.replaceState({scrollPosition:window.scrollY},document.title),history.pushState(null,"",e))}const zr=()=>En.forEach(e=>e()),Ku=Ho({name:"VitePressContent",props:{as:{type:[Object,String],default:"div"}},setup(e){const t=Li(),{site:n}=tu();return()=>ws(e.as,n.value.contentProps??{style:{position:"relative"}},[t.component?ws(t.component,{onVnodeMounted:zr,onVnodeUpdated:zr}):"404 Page Not Found"])}}),Wu=Ho({setup(e,{slots:t}){const n=ve(!1);return Pt(()=>{n.value=!0}),()=>n.value&&t.default?t.default():null}});function qu(){Te&&window.addEventListener("click",e=>{var n;const t=e.target;if(t.matches(".vp-code-group input")){const s=(n=t.parentElement)==null?void 0:n.parentElement;if(!s)return;const r=Array.from(s.querySelectorAll("input")).indexOf(t);if(r<0)return;const o=s.querySelector(".blocks");if(!o)return;const i=Array.from(o.children).find(a=>a.classList.contains("active"));if(!i)return;const l=o.children[r];if(!l||i===l)return;i.classList.remove("active"),l.classList.add("active");const c=s==null?void 0:s.querySelector(`label[for="${t.id}"]`);c==null||c.scrollIntoView({block:"nearest"})}})}function Gu(){if(Te){const e=new WeakMap;window.addEventListener("click",t=>{var s;const n=t.target;if(n.matches('div[class*="language-"] > button.copy')){const r=n.parentElement,o=(s=n.nextElementSibling)==null?void 0:s.nextElementSibling;if(!r||!o)return;const i=/language-(shellscript|shell|bash|sh|zsh)/.test(r.className);let l="";o.querySelectorAll("span.line:not(.diff.remove)").forEach(c=>l+=(c.textContent||"")+` +`),l=l.slice(0,-1),i&&(l=l.replace(/^ *(\$|>) /gm,"").trim()),lu(l).then(()=>{n.classList.add("copied"),clearTimeout(e.get(n));const c=setTimeout(()=>{n.classList.remove("copied"),n.blur(),e.delete(n)},2e3);e.set(n,c)})}})}}async function lu(e){try{return navigator.clipboard.writeText(e)}catch{const t=document.createElement("textarea"),n=document.activeElement;t.value=e,t.setAttribute("readonly",""),t.style.contain="strict",t.style.position="absolute",t.style.left="-9999px",t.style.fontSize="12pt";const s=document.getSelection(),r=s?s.rangeCount>0&&s.getRangeAt(0):null;document.body.appendChild(t),t.select(),t.selectionStart=0,t.selectionEnd=e.length,document.execCommand("copy"),document.body.removeChild(t),r&&(s.removeAllRanges(),s.addRange(r)),n&&n.focus()}}function Yu(e,t){let n=[],s=!0;const r=o=>{if(s){s=!1;return}n.forEach(i=>document.head.removeChild(i)),n=[],o.forEach(i=>{const l=Jr(i);document.head.appendChild(l),n.push(l)})};Oo(()=>{const o=e.data,i=t.value,l=o&&o.description,c=o&&o.frontmatter.head||[];document.title=Mi(i,o);const a=l||i.description;let f=document.querySelector("meta[name=description]");f?f.setAttribute("content",a):Jr(["meta",{name:"description",content:a}]),r(Oi(i.head,au(c)))})}function Jr([e,t,n]){const s=document.createElement(e);for(const r in t)s.setAttribute(r,t[r]);return n&&(s.innerHTML=n),s}function cu(e){return e[0]==="meta"&&e[1]&&e[1].name==="description"}function au(e){return e.filter(t=>!cu(t))}const fs=new Set,Pi=()=>document.createElement("link"),uu=e=>{const t=Pi();t.rel="prefetch",t.href=e,document.head.appendChild(t)},fu=e=>{const t=new XMLHttpRequest;t.open("GET",e,t.withCredentials=!0),t.send()};let bn;const du=Te&&(bn=Pi())&&bn.relList&&bn.relList.supports&&bn.relList.supports("prefetch")?uu:fu;function zu(){if(!Te||!window.IntersectionObserver)return;let e;if((e=navigator.connection)&&(e.saveData||/2g/.test(e.effectiveType)))return;const t=window.requestIdleCallback||setTimeout;let n=null;const s=()=>{n&&n.disconnect(),n=new IntersectionObserver(o=>{o.forEach(i=>{if(i.isIntersecting){const l=i.target;n.unobserve(l);const{pathname:c}=l;if(!fs.has(c)){fs.add(c);const a=su(c);a&&du(a)}}})}),t(()=>{document.querySelectorAll("#app a").forEach(o=>{const{hostname:i,pathname:l}=new URL(o.href instanceof SVGAnimatedString?o.href.animVal:o.href,o.baseURI),c=l.match(/\.\w+$/);c&&c[0]!==".html"||o.target!=="_blank"&&i===location.hostname&&(l!==location.pathname?n.observe(o):fs.add(l))})})};Pt(s);const r=Li();Xe(()=>r.path,s),Yn(()=>{n&&n.disconnect()})}export{gu as $,wu as A,Do as B,bu as C,Eu as D,_o as E,pe as F,ju as G,ce as H,vu as I,Ai as J,Li as K,Ac as L,At as M,$n as N,nn as O,ku as P,Iu as Q,Un as R,Vu as S,ai as T,uc as U,xu as V,Fu as W,Nu as X,Su as Y,Au as Z,$u as _,si as a,Cu as a0,da as a1,Sl as a2,hu as a3,ha as a4,Fr as a5,pa as a6,fe as a7,kn as a8,Jl as a9,Vo as aa,yu as ab,Sc as ac,we as ad,sn as ae,no as af,Xi as ag,Ou as ah,Pu as ai,ws as aj,Lu as ak,Yu as al,ru as am,Uu as an,eu as ao,Ku as ap,Wu as aq,ft as ar,Hu as as,Bu as at,su as au,Du as av,zu as aw,Gu as ax,qu as ay,ei as b,Ru as c,Ho as d,Mu as e,Kr as f,re as g,ve as h,Ya as i,Pt as j,ni as k,bo as l,_u as m,Dn as n,Qo as o,mu as p,Ga as q,Tu as r,Te as s,pu as t,tu as u,Ha as v,Ao as w,Xe as x,Oo as y,Yn as z}; diff --git a/docs/.vitepress/dist/assets/chunks/index.6b4d4439.js b/docs/.vitepress/dist/assets/chunks/index.6b4d4439.js new file mode 100644 index 0000000..fbfa734 --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/index.6b4d4439.js @@ -0,0 +1 @@ +import{a7 as p,h as l,l as g,g as m,ae as y,j as h,O as w,af as T,ag as S}from"./framework.3f630664.js";var c;const v=typeof window<"u",D=e=>typeof e<"u",F=e=>typeof e=="function",N=e=>typeof e=="string",O=()=>{};v&&((c=window==null?void 0:window.navigator)!=null&&c.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function f(e){return typeof e=="function"?e():g(e)}function R(e){return e}function _(e,u){var s;if(typeof e=="number")return e+u;const o=((s=e.match(/^-?[0-9]+\.?[0-9]*/))==null?void 0:s[0])||"",t=e.slice(o.length),n=parseFloat(o)+u;return Number.isNaN(n)?e:n+t}function b(e){return T()?(S(e),!0):!1}function x(e){return typeof e=="function"?m(e):l(e)}function A(e,u=!0){y()?h(e):u?e():w(e)}function I(e,u,s={}){const{immediate:o=!0}=s,t=l(!1);let n=null;function i(){n&&(clearTimeout(n),n=null)}function r(){t.value=!1,i()}function a(...d){i(),t.value=!0,n=setTimeout(()=>{t.value=!1,n=null,e(...d)},f(u))}return o&&(t.value=!0,v&&a()),b(r),{isPending:t,start:a,stop:r}}function M(e=!1,u={}){const{truthyValue:s=!0,falsyValue:o=!1}=u,t=p(e),n=l(e);function i(r){if(arguments.length)return n.value=r,n.value;{const a=f(s);return n.value=n.value===a?f(o):a,n.value}}return t?i:[n,i]}export{N as a,R as b,D as c,F as d,_ as e,x as f,b as g,I as h,v as i,O as n,f as r,A as t,M as u}; diff --git a/docs/.vitepress/dist/assets/chunks/index.b15c605d.js b/docs/.vitepress/dist/assets/chunks/index.b15c605d.js new file mode 100644 index 0000000..cb98e5b --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/index.b15c605d.js @@ -0,0 +1 @@ +import{i as V,a as B,n as y,b as j,c as F,r as W,d as q,e as G,t as R,f as U,g as M}from"./index.6b4d4439.js";import{h as g,x as P,g as J,ae as H,y as A}from"./framework.3f630664.js";function O(n){var t;const e=W(n);return(t=e==null?void 0:e.$el)!=null?t:e}const E=V?window:void 0;function _(...n){let t,e,s,a;if(B(n[0])?([e,s,a]=n,t=E):[t,e,s,a]=n,!t)return y;let l=y;const d=P(()=>O(t),i=>{l(),i&&(i.addEventListener(e,s,a),l=()=>{i.removeEventListener(e,s,a),l=y})},{immediate:!0,flush:"post"}),r=()=>{d(),l()};return M(r),r}function ue(n,t,e={}){const{window:s=E,ignore:a,capture:l=!0,detectIframe:d=!1}=e;if(!s)return;const r=g(!0);let i;const c=u=>{s.clearTimeout(i);const o=O(n);!o||o===u.target||u.composedPath().includes(o)||!r.value||t(u)},h=u=>a&&a.some(o=>{const m=O(o);return m&&(u.target===m||u.composedPath().includes(m))}),b=[_(s,"click",c,{passive:!0,capture:l}),_(s,"pointerdown",u=>{const o=O(n);r.value=!!o&&!u.composedPath().includes(o)&&!h(u)},{passive:!0}),_(s,"pointerup",u=>{if(u.button===0){const o=u.composedPath();u.composedPath=()=>o,i=s.setTimeout(()=>c(u),50)}},{passive:!0}),d&&_(s,"blur",u=>{var o;const m=O(n);((o=document.activeElement)==null?void 0:o.tagName)==="IFRAME"&&!(m!=null&&m.contains(document.activeElement))&&t(u)})].filter(Boolean);return()=>b.forEach(u=>u())}function D(n,t=!1){const e=g(),s=()=>e.value=!!n();return s(),R(s,t),e}function v(n,t={}){const{window:e=E}=t,s=D(()=>e&&"matchMedia"in e&&typeof e.matchMedia=="function");let a;const l=g(!1),d=()=>{a&&("removeEventListener"in a?a.removeEventListener("change",r):a.removeListener(r))},r=()=>{s.value&&(d(),a=e.matchMedia(U(n).value),l.value=a.matches,"addEventListener"in a?a.addEventListener("change",r):a.addListener(r))};return A(r),M(()=>d()),l}const ie={sm:640,md:768,lg:1024,xl:1280,"2xl":1536};var K=Object.defineProperty,x=Object.getOwnPropertySymbols,z=Object.prototype.hasOwnProperty,X=Object.prototype.propertyIsEnumerable,S=(n,t,e)=>t in n?K(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e,Y=(n,t)=>{for(var e in t||(t={}))z.call(t,e)&&S(n,e,t[e]);if(x)for(var e of x(t))X.call(t,e)&&S(n,e,t[e]);return n};function oe(n,t={}){function e(r,i){let c=n[r];return i!=null&&(c=G(c,i)),typeof c=="number"&&(c=`${c}px`),c}const{window:s=E}=t;function a(r){return s?s.matchMedia(r).matches:!1}const l=r=>v(`(min-width: ${e(r)})`,t),d=Object.keys(n).reduce((r,i)=>(Object.defineProperty(r,i,{get:()=>l(i),enumerable:!0,configurable:!0}),r),{});return Y({greater(r){return v(`(min-width: ${e(r,.1)})`,t)},greaterOrEqual:l,smaller(r){return v(`(max-width: ${e(r,-.1)})`,t)},smallerOrEqual(r){return v(`(max-width: ${e(r)})`,t)},between(r,i){return v(`(min-width: ${e(r)}) and (max-width: ${e(i,-.1)})`,t)},isGreater(r){return a(`(min-width: ${e(r,.1)})`)},isGreaterOrEqual(r){return a(`(min-width: ${e(r)})`)},isSmaller(r){return a(`(max-width: ${e(r,-.1)})`)},isSmallerOrEqual(r){return a(`(max-width: ${e(r)})`)},isInBetween(r,i){return a(`(min-width: ${e(r)}) and (max-width: ${e(i,-.1)})`)}},d)}function Z(n){return JSON.parse(JSON.stringify(n))}const N=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},L="__vueuse_ssr_handlers__";N[L]=N[L]||{};var Q;(function(n){n.UP="UP",n.RIGHT="RIGHT",n.DOWN="DOWN",n.LEFT="LEFT",n.NONE="NONE"})(Q||(Q={}));var k=Object.defineProperty,T=Object.getOwnPropertySymbols,ee=Object.prototype.hasOwnProperty,te=Object.prototype.propertyIsEnumerable,C=(n,t,e)=>t in n?k(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e,ne=(n,t)=>{for(var e in t||(t={}))ee.call(t,e)&&C(n,e,t[e]);if(T)for(var e of T(t))te.call(t,e)&&C(n,e,t[e]);return n};const re={easeInSine:[.12,0,.39,0],easeOutSine:[.61,1,.88,1],easeInOutSine:[.37,0,.63,1],easeInQuad:[.11,0,.5,0],easeOutQuad:[.5,1,.89,1],easeInOutQuad:[.45,0,.55,1],easeInCubic:[.32,0,.67,0],easeOutCubic:[.33,1,.68,1],easeInOutCubic:[.65,0,.35,1],easeInQuart:[.5,0,.75,0],easeOutQuart:[.25,1,.5,1],easeInOutQuart:[.76,0,.24,1],easeInQuint:[.64,0,.78,0],easeOutQuint:[.22,1,.36,1],easeInOutQuint:[.83,0,.17,1],easeInExpo:[.7,0,.84,0],easeOutExpo:[.16,1,.3,1],easeInOutExpo:[.87,0,.13,1],easeInCirc:[.55,0,1,.45],easeOutCirc:[0,.55,.45,1],easeInOutCirc:[.85,0,.15,1],easeInBack:[.36,0,.66,-.56],easeOutBack:[.34,1.56,.64,1],easeInOutBack:[.68,-.6,.32,1.6]};ne({linear:j},re);function le(n,t,e,s={}){var a,l,d;const{clone:r=!1,passive:i=!1,eventName:c,deep:h=!1,defaultValue:b}=s,f=H(),u=e||(f==null?void 0:f.emit)||((a=f==null?void 0:f.$emit)==null?void 0:a.bind(f))||((d=(l=f==null?void 0:f.proxy)==null?void 0:l.$emit)==null?void 0:d.bind(f==null?void 0:f.proxy));let o=c;t||(t="modelValue"),o=c||o||`update:${t.toString()}`;const m=p=>r?q(r)?r(p):Z(p):p,$=()=>F(n[t])?m(n[t]):b;if(i){const p=$(),I=g(p);return P(()=>n[t],w=>I.value=m(w)),P(I,w=>{(w!==n[t]||h)&&u(o,w)},{deep:h}),I}else return J({get(){return $()},set(p){u(o,p)}})}export{le as a,ie as b,ue as o,oe as u}; diff --git a/docs/.vitepress/dist/assets/chunks/isArray.513c67aa.js b/docs/.vitepress/dist/assets/chunks/isArray.513c67aa.js new file mode 100644 index 0000000..a1fb8c7 --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/isArray.513c67aa.js @@ -0,0 +1 @@ +var r=Array.isArray;const a=r;export{a as i}; diff --git a/docs/.vitepress/dist/assets/chunks/simplifyTailwindClasses.275301d3.js b/docs/.vitepress/dist/assets/chunks/simplifyTailwindClasses.275301d3.js new file mode 100644 index 0000000..e255a08 --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/simplifyTailwindClasses.275301d3.js @@ -0,0 +1 @@ +const d={border:t=>t.substring(0,t.lastIndexOf("-"))},u=(t,e=d)=>{const n=Object.keys(e).find(r=>t.includes(r));return n?e[n](t):t.substring(0,t.indexOf("-"))};function T(...t){return t.filter(e=>e).reduce((e,i)=>{const n=Array.isArray(i)?Array.from(i).map(s=>s.split(" ")).flat():i.split(" "),r=n.map(s=>u(s)),a=r.filter(s=>!e.types.includes(s)),c=[...r.filter(s=>e.types.includes(s)),...a],l=[...new Set([...e.types,...c])],f=l.map(s=>{if(c.includes(s)){const p=r.indexOf(s);if(p>=0)return n[p]||""}const o=e.types.indexOf(s);return o>=0&&e.classes[o]||""}).filter(s=>!!s);return{types:l,classes:f}},{types:[],classes:[]}).classes.join(" ")}export{T as s}; diff --git a/docs/.vitepress/dist/assets/chunks/theme.3359535a.js b/docs/.vitepress/dist/assets/chunks/theme.3359535a.js new file mode 100644 index 0000000..af58743 --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/theme.3359535a.js @@ -0,0 +1 @@ +import{d as g,o as a,c as i,r as u,a as x,t as V,n as M,_ as m,b,w as _,e as f,T as ie,u as He,i as ze,f as ce,g as k,h as L,j as G,k as c,l as r,p as H,m as z,q as O,s as Y,v as ae,x as U,y as ue,z as de,A as Pe,B as De,C as R,F as S,D as A,E as _e,G as K,H as h,I as E,J as Ve,K as te,L as X,M as se,N as Fe,O as Ee,P as we,Q as Oe,R as Ge,S as Le,U as Se,V as Ue,W as Re,X as je,Y as qe}from"./framework.3f630664.js";const Ke=g({__name:"VPBadge",props:{text:{},type:{default:"tip"}},setup(s){return(e,t)=>(a(),i("span",{class:M(["VPBadge",e.type])},[u(e.$slots,"default",{},()=>[x(V(e.text),1)],!0)],2))}});const We=m(Ke,[["__scopeId","data-v-9613cc9f"]]),Ye={key:0,class:"VPBackdrop"},Je=g({__name:"VPBackdrop",props:{show:{type:Boolean}},setup(s){return(e,t)=>(a(),b(ie,{name:"fade"},{default:_(()=>[e.show?(a(),i("div",Ye)):f("",!0)]),_:1}))}});const Qe=m(Je,[["__scopeId","data-v-c79a1216"]]),y=He;function Xe(s,e){let t,n=!1;return()=>{t&&clearTimeout(t),n?t=setTimeout(s,e):(s(),(n=!0)&&setTimeout(()=>n=!1,e))}}function le(s){return/^\//.test(s)?s:`/${s}`}function W(s){if(ze(s))return s;const{site:e}=y(),{pathname:t,search:n,hash:o}=new URL(s,"http://a.com"),l=t.endsWith("/")||t.endsWith(".html")?s:s.replace(/(?:(^\.+)\/)?.*$/,`$1${t.replace(/(\.md)?$/,e.value.cleanUrls?"":".html")}${n}${o}`);return ce(l)}function J({removeCurrent:s=!0,correspondingLink:e=!1}={}){const{site:t,localeIndex:n,page:o,theme:l}=y(),d=k(()=>{var v,$;return{label:(v=t.value.locales[n.value])==null?void 0:v.label,link:(($=t.value.locales[n.value])==null?void 0:$.link)||(n.value==="root"?"/":`/${n.value}/`)}});return{localeLinks:k(()=>Object.entries(t.value.locales).flatMap(([v,$])=>s&&d.value.label===$.label?[]:{text:$.label,link:Ze($.link||(v==="root"?"/":`/${v}/`),l.value.i18nRouting!==!1&&e,o.value.relativePath.slice(d.value.link.length-1),!t.value.cleanUrls)})),currentLang:d}}function Ze(s,e,t,n){return e?s.replace(/\/$/,"")+le(t.replace(/(^|\/)index\.md$/,"$1").replace(/\.md$/,n?".html":"")):s}const et=s=>(H("data-v-dfcf8e56"),s=s(),z(),s),tt={class:"NotFound"},st={class:"code"},nt={class:"title"},ot=et(()=>c("div",{class:"divider"},null,-1)),at={class:"quote"},lt={class:"action"},rt=["href","aria-label"],it=g({__name:"NotFound",setup(s){const{site:e,theme:t}=y(),{localeLinks:n}=J({removeCurrent:!1}),o=L("/");return G(()=>{var d;const l=window.location.pathname.replace(e.value.base,"").replace(/(^.*?\/).*$/,"/$1");n.value.length&&(o.value=((d=n.value.find(({link:p})=>p.startsWith(l)))==null?void 0:d.link)||n.value[0].link)}),(l,d)=>{var p,v,$,C,T;return a(),i("div",tt,[c("p",st,V(((p=r(t).notFound)==null?void 0:p.code)??"404"),1),c("h1",nt,V(((v=r(t).notFound)==null?void 0:v.title)??"PAGE NOT FOUND"),1),ot,c("blockquote",at,V((($=r(t).notFound)==null?void 0:$.quote)??"But if you don't change your direction, and if you keep looking, you may end up where you are heading."),1),c("div",lt,[c("a",{class:"link",href:r(ce)(o.value),"aria-label":((C=r(t).notFound)==null?void 0:C.linkLabel)??"go to home",target:"_self"},V(((T=r(t).notFound)==null?void 0:T.linkText)??"Take me home"),9,rt)])])}}});const ct=m(it,[["__scopeId","data-v-dfcf8e56"]]);function Me(s,e){if(Array.isArray(s))return Z(s);if(s==null)return[];e=le(e);const t=Object.keys(s).sort((o,l)=>l.split("/").length-o.split("/").length).find(o=>e.startsWith(le(o))),n=t?s[t]:[];return Array.isArray(n)?Z(n):Z(n.items,n.base)}function ut(s){const e=[];let t=0;for(const n in s){const o=s[n];if(o.items){t=e.push(o);continue}e[t]||e.push({items:[]}),e[t].items.push(o)}return e}function dt(s){const e=[];function t(n){for(const o of n)o.text&&o.link&&e.push({text:o.text,link:o.link,docFooterText:o.docFooterText}),o.items&&t(o.items)}return t(s),e}function re(s,e){return Array.isArray(e)?e.some(t=>re(s,t)):O(s,e.link)?!0:e.items?re(s,e.items):!1}function Z(s,e){return[...s].map(t=>{const n={...t},o=n.base||e;return o&&n.link&&(n.link=o+n.link),n.items&&(n.items=Z(n.items,o)),n})}function D(){const{frontmatter:s,page:e,theme:t}=y(),n=ae("(min-width: 960px)"),o=L(!1),l=k(()=>{const I=t.value.sidebar,P=e.value.relativePath;return I?Me(I,P):[]}),d=L(l.value);U(l,(I,P)=>{JSON.stringify(I)!==JSON.stringify(P)&&(d.value=l.value)});const p=k(()=>s.value.sidebar!==!1&&d.value.length>0&&s.value.layout!=="home"),v=k(()=>$?s.value.aside==null?t.value.aside==="left":s.value.aside==="left":!1),$=k(()=>s.value.layout==="home"?!1:s.value.aside!=null?!!s.value.aside:t.value.aside!==!1),C=k(()=>p.value&&n.value),T=k(()=>p.value?ut(d.value):[]);function N(){o.value=!0}function w(){o.value=!1}function B(){o.value?w():N()}return{isOpen:o,sidebar:d,sidebarGroups:T,hasSidebar:p,hasAside:$,leftAside:v,isSidebarEnabled:C,open:N,close:w,toggle:B}}function _t(s,e){let t;ue(()=>{t=s.value?document.activeElement:void 0}),G(()=>{window.addEventListener("keyup",n)}),de(()=>{window.removeEventListener("keyup",n)});function n(o){o.key==="Escape"&&s.value&&(e(),t==null||t.focus())}}const Ne=L(Y?location.hash:"");Y&&window.addEventListener("hashchange",()=>{Ne.value=location.hash});function vt(s){const{page:e}=y(),t=L(!1),n=k(()=>s.value.collapsed!=null),o=k(()=>!!s.value.link),l=L(!1),d=()=>{l.value=O(e.value.relativePath,s.value.link)};U([e,s,Ne],d),G(d);const p=k(()=>l.value?!0:s.value.items?re(e.value.relativePath,s.value.items):!1),v=k(()=>!!(s.value.items&&s.value.items.length));ue(()=>{t.value=!!(n.value&&s.value.collapsed)}),Pe(()=>{(l.value||p.value)&&(t.value=!1)});function $(){n.value&&(t.value=!t.value)}return{collapsed:t,collapsible:n,isLink:o,isActiveLink:l,hasActiveLink:p,hasChildren:v,toggle:$}}function pt(){const{hasSidebar:s}=D(),e=ae("(min-width: 960px)"),t=ae("(min-width: 1280px)");return{isAsideEnabled:k(()=>!t.value&&!e.value?!1:s.value?t.value:e.value)}}const ht=71;function ve(s){return typeof s.outline=="object"&&!Array.isArray(s.outline)&&s.outline.label||s.outlineTitle||"On this page"}function pe(s){const e=[...document.querySelectorAll(".VPDoc :where(h1,h2,h3,h4,h5,h6)")].filter(t=>t.id&&t.hasChildNodes()).map(t=>{const n=Number(t.tagName[1]);return{title:ft(t),link:"#"+t.id,level:n}});return mt(e,s)}function ft(s){let e="";for(const t of s.childNodes)if(t.nodeType===1){if(t.classList.contains("VPBadge")||t.classList.contains("header-anchor"))continue;e+=t.textContent}else t.nodeType===3&&(e+=t.textContent);return e.trim()}function mt(s,e){if(e===!1)return[];const t=(typeof e=="object"&&!Array.isArray(e)?e.level:e)||2,[n,o]=typeof t=="number"?[t,t]:t==="deep"?[2,6]:t;s=s.filter(d=>d.level>=n&&d.level<=o);const l=[];e:for(let d=0;d=0;v--){const $=s[v];if($.level{requestAnimationFrame(l),window.addEventListener("scroll",n)}),De(()=>{d(location.hash)}),de(()=>{window.removeEventListener("scroll",n)});function l(){if(!t.value)return;const p=[].slice.call(s.value.querySelectorAll(".outline-link")),v=[].slice.call(document.querySelectorAll(".content .header-anchor")).filter(w=>p.some(B=>B.hash===w.hash&&w.offsetParent!==null)),$=window.scrollY,C=window.innerHeight,T=document.body.offsetHeight,N=Math.abs($+C-T)<1;if(v.length&&N){d(v[v.length-1].hash);return}for(let w=0;w{const o=R("VPDocOutlineItem",!0);return a(),i("ul",{class:M(t.root?"root":"nested")},[(a(!0),i(S,null,A(t.headers,({children:l,link:d,title:p})=>(a(),i("li",null,[c("a",{class:"outline-link",href:d,onClick:e,title:p},V(p),9,$t),l!=null&&l.length?(a(),b(o,{key:0,headers:l},null,8,["headers"])):f("",!0)]))),256))],2)}}});const he=m(kt,[["__scopeId","data-v-d0ee3533"]]),yt=s=>(H("data-v-d330b1bb"),s=s(),z(),s),Pt={class:"content"},Vt={class:"outline-title",role:"heading","aria-level":"2"},wt={"aria-labelledby":"doc-outline-aria-label"},Lt=yt(()=>c("span",{class:"visually-hidden",id:"doc-outline-aria-label"}," Table of Contents for current page ",-1)),St=g({__name:"VPDocAsideOutline",setup(s){const{frontmatter:e,theme:t}=y(),n=_e([]);K(()=>{n.value=pe(e.value.outline??t.value.outline)});const o=L(),l=L();return gt(o,l),(d,p)=>(a(),i("div",{class:M(["VPDocAsideOutline",{"has-outline":n.value.length>0}]),ref_key:"container",ref:o,role:"navigation"},[c("div",Pt,[c("div",{class:"outline-marker",ref_key:"marker",ref:l},null,512),c("div",Vt,V(r(ve)(r(t))),1),c("nav",wt,[Lt,h(he,{headers:n.value,root:!0},null,8,["headers"])])])],2))}});const Mt=m(St,[["__scopeId","data-v-d330b1bb"]]),Nt={class:"VPDocAsideCarbonAds"},Ct=g({__name:"VPDocAsideCarbonAds",props:{carbonAds:{}},setup(s){const e=()=>null;return(t,n)=>(a(),i("div",Nt,[h(r(e),{"carbon-ads":t.carbonAds},null,8,["carbon-ads"])]))}}),It=s=>(H("data-v-3f215769"),s=s(),z(),s),Bt={class:"VPDocAside"},Tt=It(()=>c("div",{class:"spacer"},null,-1)),At=g({__name:"VPDocAside",setup(s){const{theme:e}=y();return(t,n)=>(a(),i("div",Bt,[u(t.$slots,"aside-top",{},void 0,!0),u(t.$slots,"aside-outline-before",{},void 0,!0),h(Mt),u(t.$slots,"aside-outline-after",{},void 0,!0),Tt,u(t.$slots,"aside-ads-before",{},void 0,!0),r(e).carbonAds?(a(),b(Ct,{key:0,"carbon-ads":r(e).carbonAds},null,8,["carbon-ads"])):f("",!0),u(t.$slots,"aside-ads-after",{},void 0,!0),u(t.$slots,"aside-bottom",{},void 0,!0)]))}});const xt=m(At,[["__scopeId","data-v-3f215769"]]);function Ht(){const{theme:s,page:e}=y();return k(()=>{const{text:t="Edit this page",pattern:n=""}=s.value.editLink||{};let o;return typeof n=="function"?o=n(e.value):o=n.replace(/:path/g,e.value.filePath),{url:o,text:t}})}function zt(){const{page:s,theme:e,frontmatter:t}=y();return k(()=>{var v,$,C,T,N,w,B,I;const n=Me(e.value.sidebar,s.value.relativePath),o=dt(n),l=o.findIndex(P=>O(s.value.relativePath,P.link)),d=((v=e.value.docFooter)==null?void 0:v.prev)===!1&&!t.value.prev||t.value.prev===!1,p=(($=e.value.docFooter)==null?void 0:$.next)===!1&&!t.value.next||t.value.next===!1;return{prev:d?void 0:{text:(typeof t.value.prev=="string"?t.value.prev:typeof t.value.prev=="object"?t.value.prev.text:void 0)??((C=o[l-1])==null?void 0:C.docFooterText)??((T=o[l-1])==null?void 0:T.text),link:(typeof t.value.prev=="object"?t.value.prev.link:void 0)??((N=o[l-1])==null?void 0:N.link)},next:p?void 0:{text:(typeof t.value.next=="string"?t.value.next:typeof t.value.next=="object"?t.value.next.text:void 0)??((w=o[l+1])==null?void 0:w.docFooterText)??((B=o[l+1])==null?void 0:B.text),link:(typeof t.value.next=="object"?t.value.next.link:void 0)??((I=o[l+1])==null?void 0:I.link)}}})}const Dt={},Ft={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Et=c("path",{d:"M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"},null,-1),Ot=c("path",{d:"M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"},null,-1),Gt=[Et,Ot];function Ut(s,e){return a(),i("svg",Ft,Gt)}const Rt=m(Dt,[["render",Ut]]),F=g({__name:"VPLink",props:{tag:{},href:{},noIcon:{type:Boolean},target:{},rel:{}},setup(s){const e=s,t=k(()=>e.tag??(e.href?"a":"span")),n=k(()=>e.href&&Ve.test(e.href));return(o,l)=>(a(),b(E(t.value),{class:M(["VPLink",{link:o.href,"vp-external-link-icon":n.value,"no-icon":o.noIcon}]),href:o.href?r(W)(o.href):void 0,target:o.target??(n.value?"_blank":void 0),rel:o.rel??(n.value?"noreferrer":void 0)},{default:_(()=>[u(o.$slots,"default")]),_:3},8,["class","href","target","rel"]))}}),jt={class:"VPLastUpdated"},qt=["datetime"],Kt=g({__name:"VPDocFooterLastUpdated",setup(s){const{theme:e,page:t,frontmatter:n}=y(),o=k(()=>new Date(n.value.lastUpdated??t.value.lastUpdated)),l=k(()=>o.value.toISOString()),d=L("");return G(()=>{ue(()=>{var p;d.value=new Intl.DateTimeFormat(void 0,((p=e.value.lastUpdated)==null?void 0:p.formatOptions)??{dateStyle:"short",timeStyle:"short"}).format(o.value)})}),(p,v)=>{var $;return a(),i("p",jt,[x(V((($=r(e).lastUpdated)==null?void 0:$.text)||r(e).lastUpdatedText||"Last updated")+": ",1),c("time",{datetime:l.value},V(d.value),9,qt)])}}});const Wt=m(Kt,[["__scopeId","data-v-7de715c0"]]),Yt={key:0,class:"VPDocFooter"},Jt={key:0,class:"edit-info"},Qt={key:0,class:"edit-link"},Xt={key:1,class:"last-updated"},Zt={key:1,class:"prev-next"},es={class:"pager"},ts=["href"],ss=["innerHTML"],ns=["innerHTML"],os={class:"pager"},as=["href"],ls=["innerHTML"],rs=["innerHTML"],is=g({__name:"VPDocFooter",setup(s){const{theme:e,page:t,frontmatter:n}=y(),o=Ht(),l=zt(),d=k(()=>e.value.editLink&&n.value.editLink!==!1),p=k(()=>t.value.lastUpdated&&n.value.lastUpdated!==!1),v=k(()=>d.value||p.value||l.value.prev||l.value.next);return($,C)=>{var T,N,w,B,I,P;return v.value?(a(),i("footer",Yt,[u($.$slots,"doc-footer-before",{},void 0,!0),d.value||p.value?(a(),i("div",Jt,[d.value?(a(),i("div",Qt,[h(F,{class:"edit-link-button",href:r(o).url,"no-icon":!0},{default:_(()=>[h(Rt,{class:"edit-link-icon","aria-label":"edit icon"}),x(" "+V(r(o).text),1)]),_:1},8,["href"])])):f("",!0),p.value?(a(),i("div",Xt,[h(Wt)])):f("",!0)])):f("",!0),(T=r(l).prev)!=null&&T.link||(N=r(l).next)!=null&&N.link?(a(),i("nav",Zt,[c("div",es,[(w=r(l).prev)!=null&&w.link?(a(),i("a",{key:0,class:"pager-link prev",href:r(W)(r(l).prev.link)},[c("span",{class:"desc",innerHTML:((B=r(e).docFooter)==null?void 0:B.prev)||"Previous page"},null,8,ss),c("span",{class:"title",innerHTML:r(l).prev.text},null,8,ns)],8,ts)):f("",!0)]),c("div",os,[(I=r(l).next)!=null&&I.link?(a(),i("a",{key:0,class:"pager-link next",href:r(W)(r(l).next.link)},[c("span",{class:"desc",innerHTML:((P=r(e).docFooter)==null?void 0:P.next)||"Next page"},null,8,ls),c("span",{class:"title",innerHTML:r(l).next.text},null,8,rs)],8,as)):f("",!0)])])):f("",!0)])):f("",!0)}}});const cs=m(is,[["__scopeId","data-v-ef5dee53"]]),us={},ds={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},_s=c("path",{d:"M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"},null,-1),vs=[_s];function ps(s,e){return a(),i("svg",ds,vs)}const fe=m(us,[["render",ps]]),hs={key:0,class:"VPDocOutlineDropdown"},fs={key:0,class:"items"},ms=g({__name:"VPDocOutlineDropdown",setup(s){const{frontmatter:e,theme:t}=y(),n=L(!1);K(()=>{n.value=!1});const o=_e([]);return K(()=>{o.value=pe(e.value.outline??t.value.outline)}),(l,d)=>o.value.length>0?(a(),i("div",hs,[c("button",{onClick:d[0]||(d[0]=p=>n.value=!n.value),class:M({open:n.value})},[x(V(r(ve)(r(t)))+" ",1),h(fe,{class:"icon"})],2),n.value?(a(),i("div",fs,[h(he,{headers:o.value},null,8,["headers"])])):f("",!0)])):f("",!0)}});const gs=m(ms,[["__scopeId","data-v-eadfb36b"]]),bs=s=>(H("data-v-6b87e69f"),s=s(),z(),s),$s={class:"container"},ks=bs(()=>c("div",{class:"aside-curtain"},null,-1)),ys={class:"aside-container"},Ps={class:"aside-content"},Vs={class:"content"},ws={class:"content-container"},Ls={class:"main"},Ss=g({__name:"VPDoc",setup(s){const{theme:e}=y(),t=te(),{hasSidebar:n,hasAside:o,leftAside:l}=D(),d=k(()=>t.path.replace(/[./]+/g,"_").replace(/_html$/,""));return(p,v)=>{const $=R("Content");return a(),i("div",{class:M(["VPDoc",{"has-sidebar":r(n),"has-aside":r(o)}])},[u(p.$slots,"doc-top",{},void 0,!0),c("div",$s,[r(o)?(a(),i("div",{key:0,class:M(["aside",{"left-aside":r(l)}])},[ks,c("div",ys,[c("div",Ps,[h(xt,null,{"aside-top":_(()=>[u(p.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":_(()=>[u(p.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":_(()=>[u(p.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":_(()=>[u(p.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":_(()=>[u(p.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":_(()=>[u(p.$slots,"aside-ads-after",{},void 0,!0)]),_:3})])])],2)):f("",!0),c("div",Vs,[c("div",ws,[u(p.$slots,"doc-before",{},void 0,!0),h(gs),c("main",Ls,[h($,{class:M(["vp-doc",[d.value,r(e).externalLinkIcon&&"external-link-icon-enabled"]])},null,8,["class"])]),h(cs,null,{"doc-footer-before":_(()=>[u(p.$slots,"doc-footer-before",{},void 0,!0)]),_:3}),u(p.$slots,"doc-after",{},void 0,!0)])])]),u(p.$slots,"doc-bottom",{},void 0,!0)],2)}}});const Ms=m(Ss,[["__scopeId","data-v-6b87e69f"]]),Ns=g({__name:"VPButton",props:{tag:{},size:{default:"medium"},theme:{default:"brand"},text:{},href:{}},setup(s){const e=s,t=k(()=>e.href&&Ve.test(e.href)),n=k(()=>e.tag||e.href?"a":"button");return(o,l)=>(a(),b(E(n.value),{class:M(["VPButton",[o.size,o.theme]]),href:o.href?r(W)(o.href):void 0,target:t.value?"_blank":void 0,rel:t.value?"noreferrer":void 0},{default:_(()=>[x(V(o.text),1)]),_:1},8,["class","href","target","rel"]))}});const Cs=m(Ns,[["__scopeId","data-v-c1c5efc1"]]),Is=["src","alt"],Bs=g({inheritAttrs:!1,__name:"VPImage",props:{image:{},alt:{}},setup(s){return(e,t)=>{const n=R("VPImage",!0);return e.image?(a(),i(S,{key:0},[typeof e.image=="string"||"src"in e.image?(a(),i("img",X({key:0,class:"VPImage"},typeof e.image=="string"?e.$attrs:{...e.image,...e.$attrs},{src:r(ce)(typeof e.image=="string"?e.image:e.image.src),alt:e.alt??(typeof e.image=="string"?"":e.image.alt||"")}),null,16,Is)):(a(),i(S,{key:1},[h(n,X({class:"dark",image:e.image.dark,alt:e.image.alt},e.$attrs),null,16,["image","alt"]),h(n,X({class:"light",image:e.image.light,alt:e.image.alt},e.$attrs),null,16,["image","alt"])],64))],64)):f("",!0)}}});const ee=m(Bs,[["__scopeId","data-v-8426fc1a"]]),Ts=s=>(H("data-v-da5d1713"),s=s(),z(),s),As={class:"container"},xs={class:"main"},Hs={key:0,class:"name"},zs=["innerHTML"],Ds=["innerHTML"],Fs=["innerHTML"],Es={key:0,class:"actions"},Os={key:0,class:"image"},Gs={class:"image-container"},Us=Ts(()=>c("div",{class:"image-bg"},null,-1)),Rs=g({__name:"VPHero",props:{name:{},text:{},tagline:{},image:{},actions:{}},setup(s){const e=se("hero-image-slot-exists");return(t,n)=>(a(),i("div",{class:M(["VPHero",{"has-image":t.image||r(e)}])},[c("div",As,[c("div",xs,[u(t.$slots,"home-hero-info",{},()=>[t.name?(a(),i("h1",Hs,[c("span",{innerHTML:t.name,class:"clip"},null,8,zs)])):f("",!0),t.text?(a(),i("p",{key:1,innerHTML:t.text,class:"text"},null,8,Ds)):f("",!0),t.tagline?(a(),i("p",{key:2,innerHTML:t.tagline,class:"tagline"},null,8,Fs)):f("",!0)],!0),t.actions?(a(),i("div",Es,[(a(!0),i(S,null,A(t.actions,o=>(a(),i("div",{key:o.link,class:"action"},[h(Cs,{tag:"a",size:"medium",theme:o.theme,text:o.text,href:o.link},null,8,["theme","text","href"])]))),128))])):f("",!0)]),t.image||r(e)?(a(),i("div",Os,[c("div",Gs,[Us,u(t.$slots,"home-hero-image",{},()=>[t.image?(a(),b(ee,{key:0,class:"image-src",image:t.image},null,8,["image"])):f("",!0)],!0)])])):f("",!0)])],2))}});const js=m(Rs,[["__scopeId","data-v-da5d1713"]]),qs=g({__name:"VPHomeHero",setup(s){const{frontmatter:e}=y();return(t,n)=>r(e).hero?(a(),b(js,{key:0,class:"VPHomeHero",name:r(e).hero.name,text:r(e).hero.text,tagline:r(e).hero.tagline,image:r(e).hero.image,actions:r(e).hero.actions},{"home-hero-info":_(()=>[u(t.$slots,"home-hero-info")]),"home-hero-image":_(()=>[u(t.$slots,"home-hero-image")]),_:3},8,["name","text","tagline","image","actions"])):f("",!0)}}),Ks={},Ws={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Ys=c("path",{d:"M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"},null,-1),Js=[Ys];function Qs(s,e){return a(),i("svg",Ws,Js)}const Xs=m(Ks,[["render",Qs]]),Zs={class:"box"},en={key:0,class:"icon"},tn=["innerHTML"],sn=["innerHTML"],nn=["innerHTML"],on={key:4,class:"link-text"},an={class:"link-text-value"},ln=g({__name:"VPFeature",props:{icon:{},title:{},details:{},link:{},linkText:{},rel:{},target:{}},setup(s){return(e,t)=>(a(),b(F,{class:"VPFeature",href:e.link,rel:e.rel,target:e.target,"no-icon":!0,tag:e.link?"a":"div"},{default:_(()=>[c("article",Zs,[typeof e.icon=="object"&&e.icon.wrap?(a(),i("div",en,[h(ee,{image:e.icon,alt:e.icon.alt,height:e.icon.height||48,width:e.icon.width||48},null,8,["image","alt","height","width"])])):typeof e.icon=="object"?(a(),b(ee,{key:1,image:e.icon,alt:e.icon.alt,height:e.icon.height||48,width:e.icon.width||48},null,8,["image","alt","height","width"])):e.icon?(a(),i("div",{key:2,class:"icon",innerHTML:e.icon},null,8,tn)):f("",!0),c("h2",{class:"title",innerHTML:e.title},null,8,sn),e.details?(a(),i("p",{key:3,class:"details",innerHTML:e.details},null,8,nn)):f("",!0),e.linkText?(a(),i("div",on,[c("p",an,[x(V(e.linkText)+" ",1),h(Xs,{class:"link-text-icon"})])])):f("",!0)])]),_:1},8,["href","rel","target","tag"]))}});const rn=m(ln,[["__scopeId","data-v-33204567"]]),cn={key:0,class:"VPFeatures"},un={class:"container"},dn={class:"items"},_n=g({__name:"VPFeatures",props:{features:{}},setup(s){const e=s,t=k(()=>{const n=e.features.length;if(n){if(n===2)return"grid-2";if(n===3)return"grid-3";if(n%3===0)return"grid-6";if(n>3)return"grid-4"}else return});return(n,o)=>n.features?(a(),i("div",cn,[c("div",un,[c("div",dn,[(a(!0),i(S,null,A(n.features,l=>(a(),i("div",{key:l.title,class:M(["item",[t.value]])},[h(rn,{icon:l.icon,title:l.title,details:l.details,link:l.link,"link-text":l.linkText,rel:l.rel,target:l.target},null,8,["icon","title","details","link","link-text","rel","target"])],2))),128))])])])):f("",!0)}});const vn=m(_n,[["__scopeId","data-v-a6181336"]]),pn=g({__name:"VPHomeFeatures",setup(s){const{frontmatter:e}=y();return(t,n)=>r(e).features?(a(),b(vn,{key:0,class:"VPHomeFeatures",features:r(e).features},null,8,["features"])):f("",!0)}}),hn={class:"VPHome"},fn=g({__name:"VPHome",setup(s){return(e,t)=>{const n=R("Content");return a(),i("div",hn,[u(e.$slots,"home-hero-before",{},void 0,!0),h(qs,null,{"home-hero-info":_(()=>[u(e.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-image":_(()=>[u(e.$slots,"home-hero-image",{},void 0,!0)]),_:3}),u(e.$slots,"home-hero-after",{},void 0,!0),u(e.$slots,"home-features-before",{},void 0,!0),h(pn),u(e.$slots,"home-features-after",{},void 0,!0),h(n)])}}});const mn=m(fn,[["__scopeId","data-v-d82743a8"]]),gn={},bn={class:"VPPage"};function $n(s,e){const t=R("Content");return a(),i("div",bn,[u(s.$slots,"page-top"),h(t),u(s.$slots,"page-bottom")])}const kn=m(gn,[["render",$n]]),yn=g({__name:"VPContent",setup(s){const{page:e,frontmatter:t}=y(),{hasSidebar:n}=D();return(o,l)=>(a(),i("div",{class:M(["VPContent",{"has-sidebar":r(n),"is-home":r(t).layout==="home"}]),id:"VPContent"},[r(e).isNotFound?u(o.$slots,"not-found",{key:0},()=>[h(ct)],!0):r(t).layout==="page"?(a(),b(kn,{key:1},{"page-top":_(()=>[u(o.$slots,"page-top",{},void 0,!0)]),"page-bottom":_(()=>[u(o.$slots,"page-bottom",{},void 0,!0)]),_:3})):r(t).layout==="home"?(a(),b(mn,{key:2},{"home-hero-before":_(()=>[u(o.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info":_(()=>[u(o.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-image":_(()=>[u(o.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":_(()=>[u(o.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":_(()=>[u(o.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":_(()=>[u(o.$slots,"home-features-after",{},void 0,!0)]),_:3})):r(t).layout&&r(t).layout!=="doc"?(a(),b(E(r(t).layout),{key:3})):(a(),b(Ms,{key:4},{"doc-top":_(()=>[u(o.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":_(()=>[u(o.$slots,"doc-bottom",{},void 0,!0)]),"doc-footer-before":_(()=>[u(o.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":_(()=>[u(o.$slots,"doc-before",{},void 0,!0)]),"doc-after":_(()=>[u(o.$slots,"doc-after",{},void 0,!0)]),"aside-top":_(()=>[u(o.$slots,"aside-top",{},void 0,!0)]),"aside-outline-before":_(()=>[u(o.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":_(()=>[u(o.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":_(()=>[u(o.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":_(()=>[u(o.$slots,"aside-ads-after",{},void 0,!0)]),"aside-bottom":_(()=>[u(o.$slots,"aside-bottom",{},void 0,!0)]),_:3}))],2))}});const Pn=m(yn,[["__scopeId","data-v-669faec9"]]),Vn={class:"container"},wn=["innerHTML"],Ln=["innerHTML"],Sn=g({__name:"VPFooter",setup(s){const{theme:e,frontmatter:t}=y(),{hasSidebar:n}=D();return(o,l)=>r(e).footer&&r(t).footer!==!1?(a(),i("footer",{key:0,class:M(["VPFooter",{"has-sidebar":r(n)}])},[c("div",Vn,[r(e).footer.message?(a(),i("p",{key:0,class:"message",innerHTML:r(e).footer.message},null,8,wn)):f("",!0),r(e).footer.copyright?(a(),i("p",{key:1,class:"copyright",innerHTML:r(e).footer.copyright},null,8,Ln)):f("",!0)])],2)):f("",!0)}});const Mn=m(Sn,[["__scopeId","data-v-e03eb2e1"]]),Nn={class:"header"},Cn={class:"outline"},In=g({__name:"VPLocalNavOutlineDropdown",props:{headers:{},navHeight:{}},setup(s){const e=s,{theme:t}=y(),n=L(!1),o=L(0),l=L();K(()=>{n.value=!1});function d(){n.value=!n.value,o.value=window.innerHeight+Math.min(window.scrollY-e.navHeight,0)}function p($){$.target.classList.contains("outline-link")&&(l.value&&(l.value.style.transition="none"),Ee(()=>{n.value=!1}))}function v(){n.value=!1,window.scrollTo({top:0,left:0,behavior:"smooth"})}return($,C)=>(a(),i("div",{class:"VPLocalNavOutlineDropdown",style:Fe({"--vp-vh":o.value+"px"})},[$.headers.length>0?(a(),i("button",{key:0,onClick:d,class:M({open:n.value})},[x(V(r(ve)(r(t)))+" ",1),h(fe,{class:"icon"})],2)):(a(),i("button",{key:1,onClick:v},V(r(t).returnToTopLabel||"Return to top"),1)),h(ie,{name:"flyout"},{default:_(()=>[n.value?(a(),i("div",{key:0,ref_key:"items",ref:l,class:"items",onClick:p},[c("div",Nn,[c("a",{class:"top-link",href:"#",onClick:v},V(r(t).returnToTopLabel||"Return to top"),1)]),c("div",Cn,[h(he,{headers:$.headers},null,8,["headers"])])],512)):f("",!0)]),_:1})],4))}});const Bn=m(In,[["__scopeId","data-v-1c15a60a"]]),Tn={},An={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},xn=c("path",{d:"M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"},null,-1),Hn=c("path",{d:"M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"},null,-1),zn=c("path",{d:"M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"},null,-1),Dn=c("path",{d:"M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"},null,-1),Fn=[xn,Hn,zn,Dn];function En(s,e){return a(),i("svg",An,Fn)}const On=m(Tn,[["render",En]]),Gn=["aria-expanded"],Un={class:"menu-text"},Rn=g({__name:"VPLocalNav",props:{open:{type:Boolean}},emits:["open-menu"],setup(s){const{theme:e,frontmatter:t}=y(),{hasSidebar:n}=D(),{y:o}=we(),l=_e([]),d=L(0);G(()=>{d.value=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--vp-nav-height"))}),K(()=>{l.value=pe(t.value.outline??e.value.outline)});const p=k(()=>l.value.length===0&&!n.value),v=k(()=>({VPLocalNav:!0,fixed:p.value,"reached-top":o.value>=d.value}));return($,C)=>r(t).layout!=="home"&&(!p.value||r(o)>=d.value)?(a(),i("div",{key:0,class:M(v.value)},[r(n)?(a(),i("button",{key:0,class:"menu","aria-expanded":$.open,"aria-controls":"VPSidebarNav",onClick:C[0]||(C[0]=T=>$.$emit("open-menu"))},[h(On,{class:"menu-icon"}),c("span",Un,V(r(e).sidebarMenuLabel||"Menu"),1)],8,Gn)):f("",!0),h(Bn,{headers:l.value,navHeight:d.value},null,8,["headers","navHeight"])],2)):f("",!0)}});const jn=m(Rn,[["__scopeId","data-v-79c8c1df"]]);function qn(){const s=L(!1);function e(){s.value=!0,window.addEventListener("resize",o)}function t(){s.value=!1,window.removeEventListener("resize",o)}function n(){s.value?t():e()}function o(){window.outerWidth>=768&&t()}const l=te();return U(()=>l.path,t),{isScreenOpen:s,openScreen:e,closeScreen:t,toggleScreen:n}}const Kn={},Wn={class:"VPSwitch",type:"button",role:"switch"},Yn={class:"check"},Jn={key:0,class:"icon"};function Qn(s,e){return a(),i("button",Wn,[c("span",Yn,[s.$slots.default?(a(),i("span",Jn,[u(s.$slots,"default",{},void 0,!0)])):f("",!0)])])}const Xn=m(Kn,[["render",Qn],["__scopeId","data-v-b1685198"]]),Zn={},eo={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},to=c("path",{d:"M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"},null,-1),so=[to];function no(s,e){return a(),i("svg",eo,so)}const oo=m(Zn,[["render",no]]),ao={},lo={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},ro=Oe('',9),io=[ro];function co(s,e){return a(),i("svg",lo,io)}const uo=m(ao,[["render",co]]),_o=g({__name:"VPSwitchAppearance",setup(s){const{isDark:e}=y(),t=se("toggle-appearance",()=>{e.value=!e.value});return(n,o)=>(a(),b(Xn,{title:"toggle dark mode",class:"VPSwitchAppearance","aria-checked":r(e),onClick:r(t)},{default:_(()=>[h(uo,{class:"sun"}),h(oo,{class:"moon"})]),_:1},8,["aria-checked","onClick"]))}});const me=m(_o,[["__scopeId","data-v-ce54a7d1"]]),vo={key:0,class:"VPNavBarAppearance"},po=g({__name:"VPNavBarAppearance",setup(s){const{site:e}=y();return(t,n)=>r(e).appearance?(a(),i("div",vo,[h(me)])):f("",!0)}});const ho=m(po,[["__scopeId","data-v-f6a63727"]]),ge=L();let Ce=!1,oe=0;function fo(s){const e=L(!1);if(Y){!Ce&&mo(),oe++;const t=U(ge,n=>{var o,l,d;n===s.el.value||(o=s.el.value)!=null&&o.contains(n)?(e.value=!0,(l=s.onFocus)==null||l.call(s)):(e.value=!1,(d=s.onBlur)==null||d.call(s))});de(()=>{t(),oe--,oe||go()})}return Ge(e)}function mo(){document.addEventListener("focusin",Ie),Ce=!0,ge.value=document.activeElement}function go(){document.removeEventListener("focusin",Ie)}function Ie(){ge.value=document.activeElement}const bo={},$o={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},ko=c("path",{d:"M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"},null,-1),yo=[ko];function Po(s,e){return a(),i("svg",$o,yo)}const Be=m(bo,[["render",Po]]),Vo={},wo={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Lo=c("circle",{cx:"12",cy:"12",r:"2"},null,-1),So=c("circle",{cx:"19",cy:"12",r:"2"},null,-1),Mo=c("circle",{cx:"5",cy:"12",r:"2"},null,-1),No=[Lo,So,Mo];function Co(s,e){return a(),i("svg",wo,No)}const Io=m(Vo,[["render",Co]]),Bo={class:"VPMenuLink"},To=g({__name:"VPMenuLink",props:{item:{}},setup(s){const{page:e}=y();return(t,n)=>(a(),i("div",Bo,[h(F,{class:M({active:r(O)(r(e).relativePath,t.item.activeMatch||t.item.link,!!t.item.activeMatch)}),href:t.item.link,target:t.item.target,rel:t.item.rel},{default:_(()=>[x(V(t.item.text),1)]),_:1},8,["class","href","target","rel"])]))}});const ne=m(To,[["__scopeId","data-v-43f1e123"]]),Ao={class:"VPMenuGroup"},xo={key:0,class:"title"},Ho=g({__name:"VPMenuGroup",props:{text:{},items:{}},setup(s){return(e,t)=>(a(),i("div",Ao,[e.text?(a(),i("p",xo,V(e.text),1)):f("",!0),(a(!0),i(S,null,A(e.items,n=>(a(),i(S,null,["link"in n?(a(),b(ne,{key:0,item:n},null,8,["item"])):f("",!0)],64))),256))]))}});const zo=m(Ho,[["__scopeId","data-v-69e747b5"]]),Do={class:"VPMenu"},Fo={key:0,class:"items"},Eo=g({__name:"VPMenu",props:{items:{}},setup(s){return(e,t)=>(a(),i("div",Do,[e.items?(a(),i("div",Fo,[(a(!0),i(S,null,A(e.items,n=>(a(),i(S,{key:n.text},["link"in n?(a(),b(ne,{key:0,item:n},null,8,["item"])):(a(),b(zo,{key:1,text:n.text,items:n.items},null,8,["text","items"]))],64))),128))])):f("",!0),u(e.$slots,"default",{},void 0,!0)]))}});const Oo=m(Eo,[["__scopeId","data-v-e7ea1737"]]),Go=["aria-expanded","aria-label"],Uo={key:0,class:"text"},Ro=["innerHTML"],jo={class:"menu"},qo=g({__name:"VPFlyout",props:{icon:{},button:{},label:{},items:{}},setup(s){const e=L(!1),t=L();fo({el:t,onBlur:n});function n(){e.value=!1}return(o,l)=>(a(),i("div",{class:"VPFlyout",ref_key:"el",ref:t,onMouseenter:l[1]||(l[1]=d=>e.value=!0),onMouseleave:l[2]||(l[2]=d=>e.value=!1)},[c("button",{type:"button",class:"button","aria-haspopup":"true","aria-expanded":e.value,"aria-label":o.label,onClick:l[0]||(l[0]=d=>e.value=!e.value)},[o.button||o.icon?(a(),i("span",Uo,[o.icon?(a(),b(E(o.icon),{key:0,class:"option-icon"})):f("",!0),o.button?(a(),i("span",{key:1,innerHTML:o.button},null,8,Ro)):f("",!0),h(Be,{class:"text-icon"})])):(a(),b(Io,{key:1,class:"icon"}))],8,Go),c("div",jo,[h(Oo,{items:o.items},{default:_(()=>[u(o.$slots,"default",{},void 0,!0)]),_:3},8,["items"])])],544))}});const be=m(qo,[["__scopeId","data-v-9c007e85"]]),Ko={discord:'Discord',facebook:'Facebook',github:'GitHub',instagram:'Instagram',linkedin:'LinkedIn',mastodon:'Mastodon',slack:'Slack',twitter:'Twitter',x:'X',youtube:'YouTube'},Wo=["href","aria-label","innerHTML"],Yo=g({__name:"VPSocialLink",props:{icon:{},link:{},ariaLabel:{}},setup(s){const e=s,t=k(()=>typeof e.icon=="object"?e.icon.svg:Ko[e.icon]);return(n,o)=>(a(),i("a",{class:"VPSocialLink no-icon",href:n.link,"aria-label":n.ariaLabel??(typeof n.icon=="string"?n.icon:""),target:"_blank",rel:"noopener",innerHTML:t.value},null,8,Wo))}});const Jo=m(Yo,[["__scopeId","data-v-f80f8133"]]),Qo={class:"VPSocialLinks"},Xo=g({__name:"VPSocialLinks",props:{links:{}},setup(s){return(e,t)=>(a(),i("div",Qo,[(a(!0),i(S,null,A(e.links,({link:n,icon:o,ariaLabel:l})=>(a(),b(Jo,{key:n,icon:o,link:n,ariaLabel:l},null,8,["icon","link","ariaLabel"]))),128))]))}});const $e=m(Xo,[["__scopeId","data-v-7bc22406"]]),Zo={key:0,class:"group translations"},ea={class:"trans-title"},ta={key:1,class:"group"},sa={class:"item appearance"},na={class:"label"},oa={class:"appearance-action"},aa={key:2,class:"group"},la={class:"item social-links"},ra=g({__name:"VPNavBarExtra",setup(s){const{site:e,theme:t}=y(),{localeLinks:n,currentLang:o}=J({correspondingLink:!0}),l=k(()=>n.value.length&&o.value.label||e.value.appearance||t.value.socialLinks);return(d,p)=>l.value?(a(),b(be,{key:0,class:"VPNavBarExtra",label:"extra navigation"},{default:_(()=>[r(n).length&&r(o).label?(a(),i("div",Zo,[c("p",ea,V(r(o).label),1),(a(!0),i(S,null,A(r(n),v=>(a(),b(ne,{key:v.link,item:v},null,8,["item"]))),128))])):f("",!0),r(e).appearance?(a(),i("div",ta,[c("div",sa,[c("p",na,V(r(t).darkModeSwitchLabel||"Appearance"),1),c("div",oa,[h(me)])])])):f("",!0),r(t).socialLinks?(a(),i("div",aa,[c("div",la,[h($e,{class:"social-links-list",links:r(t).socialLinks},null,8,["links"])])])):f("",!0)]),_:1})):f("",!0)}});const ia=m(ra,[["__scopeId","data-v-40855f84"]]),ca=s=>(H("data-v-e5dd9c1c"),s=s(),z(),s),ua=["aria-expanded"],da=ca(()=>c("span",{class:"container"},[c("span",{class:"top"}),c("span",{class:"middle"}),c("span",{class:"bottom"})],-1)),_a=[da],va=g({__name:"VPNavBarHamburger",props:{active:{type:Boolean}},emits:["click"],setup(s){return(e,t)=>(a(),i("button",{type:"button",class:M(["VPNavBarHamburger",{active:e.active}]),"aria-label":"mobile navigation","aria-expanded":e.active,"aria-controls":"VPNavScreen",onClick:t[0]||(t[0]=n=>e.$emit("click"))},_a,10,ua))}});const pa=m(va,[["__scopeId","data-v-e5dd9c1c"]]),ha=["innerHTML"],fa=g({__name:"VPNavBarMenuLink",props:{item:{}},setup(s){const{page:e}=y();return(t,n)=>(a(),b(F,{class:M({VPNavBarMenuLink:!0,active:r(O)(r(e).relativePath,t.item.activeMatch||t.item.link,!!t.item.activeMatch)}),href:t.item.link,target:t.item.target,rel:t.item.rel,tabindex:"0"},{default:_(()=>[c("span",{innerHTML:t.item.text},null,8,ha)]),_:1},8,["class","href","target","rel"]))}});const ma=m(fa,[["__scopeId","data-v-42ef59de"]]),ga=g({__name:"VPNavBarMenuGroup",props:{item:{}},setup(s){const e=s,{page:t}=y(),n=l=>"link"in l?O(t.value.relativePath,l.link,!!e.item.activeMatch):l.items.some(n),o=k(()=>n(e.item));return(l,d)=>(a(),b(be,{class:M({VPNavBarMenuGroup:!0,active:r(O)(r(t).relativePath,l.item.activeMatch,!!l.item.activeMatch)||o.value}),button:l.item.text,items:l.item.items},null,8,["class","button","items"]))}}),ba=s=>(H("data-v-7f418b0f"),s=s(),z(),s),$a={key:0,"aria-labelledby":"main-nav-aria-label",class:"VPNavBarMenu"},ka=ba(()=>c("span",{id:"main-nav-aria-label",class:"visually-hidden"},"Main Navigation",-1)),ya=g({__name:"VPNavBarMenu",setup(s){const{theme:e}=y();return(t,n)=>r(e).nav?(a(),i("nav",$a,[ka,(a(!0),i(S,null,A(r(e).nav,o=>(a(),i(S,{key:o.text},["link"in o?(a(),b(ma,{key:0,item:o},null,8,["item"])):(a(),b(ga,{key:1,item:o},null,8,["item"]))],64))),128))])):f("",!0)}});const Pa=m(ya,[["__scopeId","data-v-7f418b0f"]]);const Va={type:"button",class:"DocSearch DocSearch-Button","aria-label":"Search"},wa={class:"DocSearch-Button-Container"},La=c("svg",{class:"DocSearch-Search-Icon",width:"20",height:"20",viewBox:"0 0 20 20","aria-label":"search icon"},[c("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none","fill-rule":"evenodd","stroke-linecap":"round","stroke-linejoin":"round"})],-1),Sa={class:"DocSearch-Button-Placeholder"},Ma=c("span",{class:"DocSearch-Button-Keys"},[c("kbd",{class:"DocSearch-Button-Key"}),c("kbd",{class:"DocSearch-Button-Key"},"K")],-1),ye=g({__name:"VPNavBarSearchButton",props:{placeholder:{}},setup(s){return(e,t)=>(a(),i("button",Va,[c("span",wa,[La,c("span",Sa,V(e.placeholder),1)]),Ma]))}});const Na={class:"VPNavBarSearch"},Ca={id:"local-search"},Ia={key:1,id:"docsearch"},Ba=g({__name:"VPNavBarSearch",setup(s){const e=()=>null,t=()=>null,{theme:n,localeIndex:o}=y(),l=L(!1),d=L(!1),p=k(()=>{var w,B,I,P,j,Q,q;const N=((w=n.value.search)==null?void 0:w.options)??n.value.algolia;return((j=(P=(I=(B=N==null?void 0:N.locales)==null?void 0:B[o.value])==null?void 0:I.translations)==null?void 0:P.button)==null?void 0:j.buttonText)||((q=(Q=N==null?void 0:N.translations)==null?void 0:Q.button)==null?void 0:q.buttonText)||"Search"});G(()=>{});function v(){l.value||(l.value=!0,setTimeout($,16))}function $(){const N=new Event("keydown");N.key="k",N.metaKey=!0,window.dispatchEvent(N),setTimeout(()=>{document.querySelector(".DocSearch-Modal")||$()},16)}const C=L(!1),T="";return(N,w)=>{var B;return a(),i("div",Na,[r(T)==="local"?(a(),i(S,{key:0},[C.value?(a(),b(r(e),{key:0,placeholder:p.value,onClose:w[0]||(w[0]=I=>C.value=!1)},null,8,["placeholder"])):f("",!0),c("div",Ca,[h(ye,{placeholder:p.value,onClick:w[1]||(w[1]=I=>C.value=!0)},null,8,["placeholder"])])],64)):r(T)==="algolia"?(a(),i(S,{key:1},[l.value?(a(),b(r(t),{key:0,algolia:((B=r(n).search)==null?void 0:B.options)??r(n).algolia,onVnodeBeforeMount:w[2]||(w[2]=I=>d.value=!0)},null,8,["algolia"])):f("",!0),d.value?f("",!0):(a(),i("div",Ia,[h(ye,{placeholder:p.value,onClick:v},null,8,["placeholder"])]))],64)):f("",!0)])}}});const Ta=g({__name:"VPNavBarSocialLinks",setup(s){const{theme:e}=y();return(t,n)=>r(e).socialLinks?(a(),b($e,{key:0,class:"VPNavBarSocialLinks",links:r(e).socialLinks},null,8,["links"])):f("",!0)}});const Aa=m(Ta,[["__scopeId","data-v-0394ad82"]]),xa=["href"],Ha=g({__name:"VPNavBarTitle",setup(s){const{site:e,theme:t}=y(),{hasSidebar:n}=D(),{currentLang:o}=J();return(l,d)=>(a(),i("div",{class:M(["VPNavBarTitle",{"has-sidebar":r(n)}])},[c("a",{class:"title",href:r(t).logoLink??r(W)(r(o).link)},[u(l.$slots,"nav-bar-title-before",{},void 0,!0),r(t).logo?(a(),b(ee,{key:0,class:"logo",image:r(t).logo},null,8,["image"])):f("",!0),r(t).siteTitle?(a(),i(S,{key:1},[x(V(r(t).siteTitle),1)],64)):r(t).siteTitle===void 0?(a(),i(S,{key:2},[x(V(r(e).title),1)],64)):f("",!0),u(l.$slots,"nav-bar-title-after",{},void 0,!0)],8,xa)],2))}});const za=m(Ha,[["__scopeId","data-v-86d1bed8"]]),Da={},Fa={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Ea=c("path",{d:"M0 0h24v24H0z",fill:"none"},null,-1),Oa=c("path",{d:" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z ",class:"css-c4d79v"},null,-1),Ga=[Ea,Oa];function Ua(s,e){return a(),i("svg",Fa,Ga)}const Te=m(Da,[["render",Ua]]),Ra={class:"items"},ja={class:"title"},qa=g({__name:"VPNavBarTranslations",setup(s){const{theme:e}=y(),{localeLinks:t,currentLang:n}=J({correspondingLink:!0});return(o,l)=>r(t).length&&r(n).label?(a(),b(be,{key:0,class:"VPNavBarTranslations",icon:Te,label:r(e).langMenuLabel||"Change language"},{default:_(()=>[c("div",Ra,[c("p",ja,V(r(n).label),1),(a(!0),i(S,null,A(r(t),d=>(a(),b(ne,{key:d.link,item:d},null,8,["item"]))),128))])]),_:1},8,["label"])):f("",!0)}});const Ka=m(qa,[["__scopeId","data-v-74abcbb9"]]),Wa=s=>(H("data-v-a0fd61f4"),s=s(),z(),s),Ya={class:"container"},Ja={class:"title"},Qa={class:"content"},Xa=Wa(()=>c("div",{class:"curtain"},null,-1)),Za={class:"content-body"},el=g({__name:"VPNavBar",props:{isScreenOpen:{type:Boolean}},emits:["toggle-screen"],setup(s){const{y:e}=we(),{hasSidebar:t}=D(),{frontmatter:n}=y(),o=L({});return Pe(()=>{o.value={"has-sidebar":t.value,top:n.value.layout==="home"&&e.value===0}}),(l,d)=>(a(),i("div",{class:M(["VPNavBar",o.value])},[c("div",Ya,[c("div",Ja,[h(za,null,{"nav-bar-title-before":_(()=>[u(l.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":_(()=>[u(l.$slots,"nav-bar-title-after",{},void 0,!0)]),_:3})]),c("div",Qa,[Xa,c("div",Za,[u(l.$slots,"nav-bar-content-before",{},void 0,!0),h(Ba,{class:"search"}),h(Pa,{class:"menu"}),h(Ka,{class:"translations"}),h(ho,{class:"appearance"}),h(Aa,{class:"social-links"}),h(ia,{class:"extra"}),u(l.$slots,"nav-bar-content-after",{},void 0,!0),h(pa,{class:"hamburger",active:l.isScreenOpen,onClick:d[0]||(d[0]=p=>l.$emit("toggle-screen"))},null,8,["active"])])])])],2))}});const tl=m(el,[["__scopeId","data-v-a0fd61f4"]]),sl={key:0,class:"VPNavScreenAppearance"},nl={class:"text"},ol=g({__name:"VPNavScreenAppearance",setup(s){const{site:e,theme:t}=y();return(n,o)=>r(e).appearance?(a(),i("div",sl,[c("p",nl,V(r(t).darkModeSwitchLabel||"Appearance"),1),h(me)])):f("",!0)}});const al=m(ol,[["__scopeId","data-v-add8f686"]]),ll=g({__name:"VPNavScreenMenuLink",props:{item:{}},setup(s){const e=se("close-screen");return(t,n)=>(a(),b(F,{class:"VPNavScreenMenuLink",href:t.item.link,target:t.item.target,rel:t.item.rel,onClick:r(e)},{default:_(()=>[x(V(t.item.text),1)]),_:1},8,["href","target","rel","onClick"]))}});const rl=m(ll,[["__scopeId","data-v-05f27b2a"]]),il={},cl={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},ul=c("path",{d:"M18.9,10.9h-6v-6c0-0.6-0.4-1-1-1s-1,0.4-1,1v6h-6c-0.6,0-1,0.4-1,1s0.4,1,1,1h6v6c0,0.6,0.4,1,1,1s1-0.4,1-1v-6h6c0.6,0,1-0.4,1-1S19.5,10.9,18.9,10.9z"},null,-1),dl=[ul];function _l(s,e){return a(),i("svg",cl,dl)}const vl=m(il,[["render",_l]]),pl=g({__name:"VPNavScreenMenuGroupLink",props:{item:{}},setup(s){const e=se("close-screen");return(t,n)=>(a(),b(F,{class:"VPNavScreenMenuGroupLink",href:t.item.link,target:t.item.target,rel:t.item.rel,onClick:r(e)},{default:_(()=>[x(V(t.item.text),1)]),_:1},8,["href","target","rel","onClick"]))}});const Ae=m(pl,[["__scopeId","data-v-19976ae1"]]),hl={class:"VPNavScreenMenuGroupSection"},fl={key:0,class:"title"},ml=g({__name:"VPNavScreenMenuGroupSection",props:{text:{},items:{}},setup(s){return(e,t)=>(a(),i("div",hl,[e.text?(a(),i("p",fl,V(e.text),1)):f("",!0),(a(!0),i(S,null,A(e.items,n=>(a(),b(Ae,{key:n.text,item:n},null,8,["item"]))),128))]))}});const gl=m(ml,[["__scopeId","data-v-8133b170"]]),bl=["aria-controls","aria-expanded"],$l={class:"button-text"},kl=["id"],yl={key:1,class:"group"},Pl=g({__name:"VPNavScreenMenuGroup",props:{text:{},items:{}},setup(s){const e=s,t=L(!1),n=k(()=>`NavScreenGroup-${e.text.replace(" ","-").toLowerCase()}`);function o(){t.value=!t.value}return(l,d)=>(a(),i("div",{class:M(["VPNavScreenMenuGroup",{open:t.value}])},[c("button",{class:"button","aria-controls":n.value,"aria-expanded":t.value,onClick:o},[c("span",$l,V(l.text),1),h(vl,{class:"button-icon"})],8,bl),c("div",{id:n.value,class:"items"},[(a(!0),i(S,null,A(l.items,p=>(a(),i(S,{key:p.text},["link"in p?(a(),i("div",{key:p.text,class:"item"},[h(Ae,{item:p},null,8,["item"])])):(a(),i("div",yl,[h(gl,{text:p.text,items:p.items},null,8,["text","items"])]))],64))),128))],8,kl)],2))}});const Vl=m(Pl,[["__scopeId","data-v-1ecb84e7"]]),wl={key:0,class:"VPNavScreenMenu"},Ll=g({__name:"VPNavScreenMenu",setup(s){const{theme:e}=y();return(t,n)=>r(e).nav?(a(),i("nav",wl,[(a(!0),i(S,null,A(r(e).nav,o=>(a(),i(S,{key:o.text},["link"in o?(a(),b(rl,{key:0,item:o},null,8,["item"])):(a(),b(Vl,{key:1,text:o.text||"",items:o.items},null,8,["text","items"]))],64))),128))])):f("",!0)}}),Sl=g({__name:"VPNavScreenSocialLinks",setup(s){const{theme:e}=y();return(t,n)=>r(e).socialLinks?(a(),b($e,{key:0,class:"VPNavScreenSocialLinks",links:r(e).socialLinks},null,8,["links"])):f("",!0)}}),Ml={class:"list"},Nl=g({__name:"VPNavScreenTranslations",setup(s){const{localeLinks:e,currentLang:t}=J({correspondingLink:!0}),n=L(!1);function o(){n.value=!n.value}return(l,d)=>r(e).length&&r(t).label?(a(),i("div",{key:0,class:M(["VPNavScreenTranslations",{open:n.value}])},[c("button",{class:"title",onClick:o},[h(Te,{class:"icon lang"}),x(" "+V(r(t).label)+" ",1),h(Be,{class:"icon chevron"})]),c("ul",Ml,[(a(!0),i(S,null,A(r(e),p=>(a(),i("li",{key:p.link,class:"item"},[h(F,{class:"link",href:p.link},{default:_(()=>[x(V(p.text),1)]),_:2},1032,["href"])]))),128))])],2)):f("",!0)}});const Cl=m(Nl,[["__scopeId","data-v-d72aa483"]]),Il={class:"container"},Bl=g({__name:"VPNavScreen",props:{open:{type:Boolean}},setup(s){const e=L(null),t=Le(Y?document.body:null);return(n,o)=>(a(),b(ie,{name:"fade",onEnter:o[0]||(o[0]=l=>t.value=!0),onAfterLeave:o[1]||(o[1]=l=>t.value=!1)},{default:_(()=>[n.open?(a(),i("div",{key:0,class:"VPNavScreen",ref_key:"screen",ref:e,id:"VPNavScreen"},[c("div",Il,[u(n.$slots,"nav-screen-content-before",{},void 0,!0),h(Ll,{class:"menu"}),h(Cl,{class:"translations"}),h(al,{class:"appearance"}),h(Sl,{class:"social-links"}),u(n.$slots,"nav-screen-content-after",{},void 0,!0)])],512)):f("",!0)]),_:3}))}});const Tl=m(Bl,[["__scopeId","data-v-cc5739dd"]]),Al={class:"VPNav"},xl=g({__name:"VPNav",setup(s){const{isScreenOpen:e,closeScreen:t,toggleScreen:n}=qn();return Se("close-screen",t),(o,l)=>(a(),i("header",Al,[h(tl,{"is-screen-open":r(e),onToggleScreen:r(n)},{"nav-bar-title-before":_(()=>[u(o.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":_(()=>[u(o.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":_(()=>[u(o.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":_(()=>[u(o.$slots,"nav-bar-content-after",{},void 0,!0)]),_:3},8,["is-screen-open","onToggleScreen"]),h(Tl,{open:r(e)},{"nav-screen-content-before":_(()=>[u(o.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":_(()=>[u(o.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3},8,["open"])]))}});const Hl=m(xl,[["__scopeId","data-v-7e5bc4a5"]]),zl=s=>(H("data-v-e31bd47b"),s=s(),z(),s),Dl=["role","tabindex"],Fl=zl(()=>c("div",{class:"indicator"},null,-1)),El={key:1,class:"items"},Ol=g({__name:"VPSidebarItem",props:{item:{},depth:{}},setup(s){const e=s,{collapsed:t,collapsible:n,isLink:o,isActiveLink:l,hasActiveLink:d,hasChildren:p,toggle:v}=vt(k(()=>e.item)),$=k(()=>p.value?"section":"div"),C=k(()=>o.value?"a":"div"),T=k(()=>p.value?e.depth+2===7?"p":`h${e.depth+2}`:"p"),N=k(()=>o.value?void 0:"button"),w=k(()=>[[`level-${e.depth}`],{collapsible:n.value},{collapsed:t.value},{"is-link":o.value},{"is-active":l.value},{"has-active":d.value}]);function B(P){"key"in P&&P.key!=="Enter"||!e.item.link&&v()}function I(){e.item.link&&v()}return(P,j)=>{const Q=R("VPSidebarItem",!0);return a(),b(E($.value),{class:M(["VPSidebarItem",w.value])},{default:_(()=>[P.item.text?(a(),i("div",X({key:0,class:"item",role:N.value},Ue(P.item.items?{click:B,keydown:B}:{},!0),{tabindex:P.item.items&&0}),[Fl,P.item.link?(a(),b(F,{key:0,tag:C.value,class:"link",href:P.item.link,rel:P.item.rel,target:P.item.target},{default:_(()=>[(a(),b(E(T.value),{class:"text",innerHTML:P.item.text},null,8,["innerHTML"]))]),_:1},8,["tag","href","rel","target"])):(a(),b(E(T.value),{key:1,class:"text",innerHTML:P.item.text},null,8,["innerHTML"])),P.item.collapsed!=null?(a(),i("div",{key:2,class:"caret",role:"button","aria-label":"toggle section",onClick:I,onKeydown:Re(I,["enter"]),tabindex:"0"},[h(fe,{class:"caret-icon"})],32)):f("",!0)],16,Dl)):f("",!0),P.item.items&&P.item.items.length?(a(),i("div",El,[P.depth<5?(a(!0),i(S,{key:0},A(P.item.items,q=>(a(),b(Q,{key:q.text,item:q,depth:P.depth+1},null,8,["item","depth"]))),128)):f("",!0)])):f("",!0)]),_:1},8,["class"])}}});const Gl=m(Ol,[["__scopeId","data-v-e31bd47b"]]),xe=s=>(H("data-v-b00e2fdd"),s=s(),z(),s),Ul=xe(()=>c("div",{class:"curtain"},null,-1)),Rl={class:"nav",id:"VPSidebarNav","aria-labelledby":"sidebar-aria-label",tabindex:"-1"},jl=xe(()=>c("span",{class:"visually-hidden",id:"sidebar-aria-label"}," Sidebar Navigation ",-1)),ql=g({__name:"VPSidebar",props:{open:{type:Boolean}},setup(s){const{sidebarGroups:e,hasSidebar:t}=D(),n=s,o=L(null),l=Le(Y?document.body:null);return U([n,o],()=>{var d;n.open?(l.value=!0,(d=o.value)==null||d.focus()):l.value=!1},{immediate:!0,flush:"post"}),(d,p)=>r(t)?(a(),i("aside",{key:0,class:M(["VPSidebar",{open:d.open}]),ref_key:"navEl",ref:o,onClick:p[0]||(p[0]=je(()=>{},["stop"]))},[Ul,c("nav",Rl,[jl,u(d.$slots,"sidebar-nav-before",{},void 0,!0),(a(!0),i(S,null,A(r(e),v=>(a(),i("div",{key:v.text,class:"group"},[h(Gl,{item:v,depth:0},null,8,["item"])]))),128)),u(d.$slots,"sidebar-nav-after",{},void 0,!0)])],2)):f("",!0)}});const Kl=m(ql,[["__scopeId","data-v-b00e2fdd"]]),Wl=g({__name:"VPSkipLink",setup(s){const e=te(),t=L();U(()=>e.path,()=>t.value.focus());function n({target:o}){const l=document.getElementById(decodeURIComponent(o.hash).slice(1));if(l){const d=()=>{l.removeAttribute("tabindex"),l.removeEventListener("blur",d)};l.setAttribute("tabindex","-1"),l.addEventListener("blur",d),l.focus(),window.scrollTo(0,0)}}return(o,l)=>(a(),i(S,null,[c("span",{ref_key:"backToTop",ref:t,tabindex:"-1"},null,512),c("a",{href:"#VPContent",class:"VPSkipLink visually-hidden",onClick:n}," Skip to content ")],64))}});const Yl=m(Wl,[["__scopeId","data-v-0f60ec36"]]),Jl=g({__name:"Layout",setup(s){const{isOpen:e,open:t,close:n}=D(),o=te();U(()=>o.path,n),_t(e,n);const{frontmatter:l}=y(),d=qe(),p=k(()=>!!d["home-hero-image"]);return Se("hero-image-slot-exists",p),(v,$)=>{const C=R("Content");return r(l).layout!==!1?(a(),i("div",{key:0,class:M(["Layout",r(l).pageClass])},[u(v.$slots,"layout-top",{},void 0,!0),h(Yl),h(Qe,{class:"backdrop",show:r(e),onClick:r(n)},null,8,["show","onClick"]),r(l).navbar!==!1?(a(),b(Hl,{key:0},{"nav-bar-title-before":_(()=>[u(v.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":_(()=>[u(v.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":_(()=>[u(v.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":_(()=>[u(v.$slots,"nav-bar-content-after",{},void 0,!0)]),"nav-screen-content-before":_(()=>[u(v.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":_(()=>[u(v.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3})):f("",!0),h(jn,{open:r(e),onOpenMenu:r(t)},null,8,["open","onOpenMenu"]),h(Kl,{open:r(e)},{"sidebar-nav-before":_(()=>[u(v.$slots,"sidebar-nav-before",{},void 0,!0)]),"sidebar-nav-after":_(()=>[u(v.$slots,"sidebar-nav-after",{},void 0,!0)]),_:3},8,["open"]),h(Pn,null,{"page-top":_(()=>[u(v.$slots,"page-top",{},void 0,!0)]),"page-bottom":_(()=>[u(v.$slots,"page-bottom",{},void 0,!0)]),"not-found":_(()=>[u(v.$slots,"not-found",{},void 0,!0)]),"home-hero-before":_(()=>[u(v.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info":_(()=>[u(v.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-image":_(()=>[u(v.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":_(()=>[u(v.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":_(()=>[u(v.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":_(()=>[u(v.$slots,"home-features-after",{},void 0,!0)]),"doc-footer-before":_(()=>[u(v.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":_(()=>[u(v.$slots,"doc-before",{},void 0,!0)]),"doc-after":_(()=>[u(v.$slots,"doc-after",{},void 0,!0)]),"doc-top":_(()=>[u(v.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":_(()=>[u(v.$slots,"doc-bottom",{},void 0,!0)]),"aside-top":_(()=>[u(v.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":_(()=>[u(v.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":_(()=>[u(v.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":_(()=>[u(v.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":_(()=>[u(v.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":_(()=>[u(v.$slots,"aside-ads-after",{},void 0,!0)]),_:3}),h(Mn),u(v.$slots,"layout-bottom",{},void 0,!0)],2)):(a(),b(C,{key:1}))}}});const Ql=m(Jl,[["__scopeId","data-v-1919c326"]]);const Zl={Layout:Ql,enhanceApp:({app:s})=>{s.component("Badge",We)}};export{Zl as t}; diff --git a/docs/.vitepress/dist/assets/chunks/useFlowbiteThemable.013ea29e.js b/docs/.vitepress/dist/assets/chunks/useFlowbiteThemable.013ea29e.js new file mode 100644 index 0000000..6b14b39 --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/useFlowbiteThemable.013ea29e.js @@ -0,0 +1 @@ +import{M as c,h as i,g as r}from"./framework.3f630664.js";const p="flowbite-themable-injection-key",d={blue:{background:"bg-blue-700 dark:bg-blue-600",disabled:"",hover:"hover:bg-blue-800 dark:hover:bg-blue-700",text:"text-blue-600 dark:text-blue-500",border:"border-blue-600 dark:border-blue-500",focus:"focus:ring-blue-300 dark:focus:ring-blue-800"},green:{background:"bg-green-700 dark:bg-green-600",disabled:"",hover:"hover:bg-green-800 dark:hover:bg-green-700",text:"text-green-600 dark:text-green-500",border:"border-green-600 dark:border-green-500",focus:"focus:ring-green-300 dark:focus:ring-green-800"},pink:{background:"bg-pink-700 dark:bg-pink-600",disabled:"",hover:"hover:bg-pink-800 dark:hover:bg-pink-700",text:"text-pink-600 dark:text-pink-500",border:"border-pink-600 dark:border-pink-500",focus:"focus:ring-pink-300 dark:focus:ring-pink-900"},purple:{background:"bg-purple-700 dark:bg-purple-600",disabled:"",hover:"hover:bg-purple-800 dark:hover:bg-purple-700",text:"text-purple-600 dark:text-purple-500",border:"border-purple-600 dark:border-purple-500",focus:"focus:ring-purple-300 dark:focus:ring-purple-900"},red:{background:"bg-red-700 dark:bg-red-600",disabled:"",hover:"hover:bg-red-800 dark:hover:bg-red-700",text:"text-red-600 dark:text-red-500",border:"border-red-600 dark:border-red-500",focus:"focus:ring-red-300 dark:focus:ring-red-900"}};function f(a){const o=c(p,i(null)),e=r(()=>a||o.value),u=r(()=>!!(o!=null&&o.value)),b=r(()=>e.value?d[e.value].background:""),s=r(()=>e.value?d[e.value].border:""),l=r(()=>(o==null?void 0:o.value)||void 0),n=r(()=>e.value?d[e.value].disabled:""),t=r(()=>e.value?d[e.value].focus:""),g=r(()=>e.value?d[e.value].hover:""),k=r(()=>e.value?d[e.value].text:"");return{backgroundClasses:b,borderClasses:s,color:l,disabledClasses:n,focusClasses:t,hoverClasses:g,isActive:u,textClasses:k}}export{p as F,f as u}; diff --git a/docs/.vitepress/dist/assets/chunks/useMergeClasses.5cec3a4e.js b/docs/.vitepress/dist/assets/chunks/useMergeClasses.5cec3a4e.js new file mode 100644 index 0000000..874b184 --- /dev/null +++ b/docs/.vitepress/dist/assets/chunks/useMergeClasses.5cec3a4e.js @@ -0,0 +1 @@ +import{t as s}from"./FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";const t=e=>s(e);export{t as u}; diff --git a/docs/.vitepress/dist/assets/components_PLAYGROUND_PLAYGROUND.md.69e01489.js b/docs/.vitepress/dist/assets/components_PLAYGROUND_PLAYGROUND.md.69e01489.js new file mode 100644 index 0000000..82e877b --- /dev/null +++ b/docs/.vitepress/dist/assets/components_PLAYGROUND_PLAYGROUND.md.69e01489.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as l}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as m}from"./chunks/FwbSlotListener.vue_vue_type_script_lang.85726df2.js";import{d as _,o as s,b as i,w as t,H as r,a as p,l as n,c as f}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import"./chunks/flatten.a0535777.js";import"./chunks/isArray.513c67aa.js";const u=_({__name:"SlotListenerExample",setup(a){const e=()=>{console.log("onClick from slot-listener")},o=()=>{console.log("onMouseenter from slot-listener")},c=()=>{console.log("onMouseleave from slot-listener")};return(L,N)=>(s(),i(n(m),{onClick:e,onMouseleave:c,onMouseenter:o},{default:t(()=>[r(n(l),null,{default:t(()=>[p("HELLO")]),_:1})]),_:1}))}}),U=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"components/PLAYGROUND/PLAYGROUND.md","filePath":"components/PLAYGROUND/PLAYGROUND.md"}'),d={name:"components/PLAYGROUND/PLAYGROUND.md"},Y=Object.assign(d,{setup(a){return(e,o)=>(s(),f("div",null,[r(u)]))}});export{U as __pageData,Y as default}; diff --git a/docs/.vitepress/dist/assets/components_PLAYGROUND_PLAYGROUND.md.69e01489.lean.js b/docs/.vitepress/dist/assets/components_PLAYGROUND_PLAYGROUND.md.69e01489.lean.js new file mode 100644 index 0000000..82e877b --- /dev/null +++ b/docs/.vitepress/dist/assets/components_PLAYGROUND_PLAYGROUND.md.69e01489.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as l}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as m}from"./chunks/FwbSlotListener.vue_vue_type_script_lang.85726df2.js";import{d as _,o as s,b as i,w as t,H as r,a as p,l as n,c as f}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import"./chunks/flatten.a0535777.js";import"./chunks/isArray.513c67aa.js";const u=_({__name:"SlotListenerExample",setup(a){const e=()=>{console.log("onClick from slot-listener")},o=()=>{console.log("onMouseenter from slot-listener")},c=()=>{console.log("onMouseleave from slot-listener")};return(L,N)=>(s(),i(n(m),{onClick:e,onMouseleave:c,onMouseenter:o},{default:t(()=>[r(n(l),null,{default:t(()=>[p("HELLO")]),_:1})]),_:1}))}}),U=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"components/PLAYGROUND/PLAYGROUND.md","filePath":"components/PLAYGROUND/PLAYGROUND.md"}'),d={name:"components/PLAYGROUND/PLAYGROUND.md"},Y=Object.assign(d,{setup(a){return(e,o)=>(s(),f("div",null,[r(u)]))}});export{U as __pageData,Y as default}; diff --git a/docs/.vitepress/dist/assets/components_accordion.md.3f1ef99a.js b/docs/.vitepress/dist/assets/components_accordion.md.3f1ef99a.js new file mode 100644 index 0000000..bb1a8bb --- /dev/null +++ b/docs/.vitepress/dist/assets/components_accordion.md.3f1ef99a.js @@ -0,0 +1,515 @@ +import{u as A,t as S}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as q,o as b,c as f,r as _,l as n,g as c,h as v,j as T,n as B,e as I,k as s,H as a,w as l,a as o,Q as m}from"./chunks/framework.3f630664.js";let P=(r=21)=>crypto.getRandomValues(new Uint8Array(r)).reduce((t,p)=>(p&=63,p<36?t+=p.toString(36):p<62?t+=(p-26).toString(36).toUpperCase():p>62?t+="-":t+="_",t),"");const H=["data-accordion-id"],x=q({__name:"FwbAccordion",props:{alwaysOpen:{type:Boolean,default:!1},openFirstItem:{type:Boolean,default:!0},flush:{type:Boolean,default:!1}},setup(r){const t=r,p=P();return A(p,{...t}),(y,E)=>(b(),f("div",{"data-accordion-id":n(p)},[_(y.$slots,"default")],8,H))}}),N="p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900";function O(r){const t=c(()=>r.value.parentElement.parentElement.dataset.accordionId),p=c(()=>r.value.parentElement.dataset.panelId),{accordionsStates:y}=A(),E=c(()=>y[t.value]),e=c(()=>y[t.value].panels[p.value]),i=c(()=>Object.keys(y[t.value].panels[p.value]).length);return{contentClasses:c(()=>S(N,!e.value.isVisible&&"hidden",(e.value.order!==i.value-1||E.value.flush)&&"border-b-0",e.value.order===i.value-1&&"border-t-0",E.value.flush&&"border-x-0"))}}const d=q({__name:"FwbAccordionContent",setup(r){const t=v(!1),p=v();let y;return T(()=>{y=O(p).contentClasses,t.value=!0}),(E,e)=>(b(),f("div",{ref_key:"content",ref:p},[t.value?(b(),f("div",{key:0,class:B(n(y))},[_(E.$slots,"default")],2)):I("",!0)],512))}}),j="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",R="w-6 h-6 shrink-0";function U(r){const t=c(()=>r.value.parentElement.parentElement.dataset.accordionId),p=c(()=>r.value.parentElement.dataset.panelId),{accordionsStates:y}=A(),E=c(()=>y[t.value]),e=c(()=>E.value.panels[p.value]),i=c(()=>Object.keys(e.value).length),h=c(()=>e.value.order!==i.value-1),F=c(()=>h.value||E.value.flush&&e.value.order===i.value-1&&!e.value.isVisible),C=c(()=>S(j,e.value.isVisible&&"bg-gray-100 dark:bg-gray-800",e.value.order===0&&!E.value.flush&&"rounded-t-xl",e.value.order===0&&E.value.flush&&"border-t-0",F.value&&"border-b-0",E.value.flush&&"border-x-0")),D=c(()=>S(R,e.value.isVisible&&"rotate-180"));return{headerClasses:C,arrowClasses:D}}const L={class:"w-full"},M=s("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"},null,-1),J=[M],g=q({__name:"FwbAccordionHeader",setup(r){const t=v(!1),p=v(),y=c(()=>p.value.parentElement.parentElement.dataset.accordionId),E=c(()=>p.value.parentElement.dataset.panelId),{accordionsStates:e}=A(),i=c(()=>e[y.value]),h=c(()=>i.value.panels[E.value]);let F,C;function D(){const w=h.value.isVisible;for(const $ in i.value.panels){const k=i.value.panels[$];k.id!==E.value?k.isVisible=!1:k.isVisible=!w}}function V(){h.value.isVisible=!h.value.isVisible}function z(){if(i.value.alwaysOpen)return V();D()}return T(()=>{const w=U(p);F=w.headerClasses,C=w.arrowClasses,t.value=!0}),(w,$)=>(b(),f("div",{ref_key:"header",ref:p},[t.value?(b(),f("button",{key:0,type:"button",class:B(n(F)),onClick:z},[s("span",L,[_(w.$slots,"default")]),(b(),f("svg",{"data-accordion-icon":"",class:B(n(C)),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},J,2))],2)):I("",!0)],512))}}),Q=["data-panel-id"],u=q({__name:"FwbAccordionPanel",setup(r){const{accordionsStates:t}=A(),p=P(),y=v(),E=c(()=>y.value?y.value.parentElement.dataset.accordionId:null),e=c(()=>t[E.value]);return T(()=>{var h,F;const i=(F=Object.keys((h=e==null?void 0:e.value)==null?void 0:h.panels))==null?void 0:F.length;e.value.panels[p]={id:p,order:i,isVisible:(e.value.openFirstItem&&i===0)??!1}}),(i,h)=>(b(),f("div",{ref_key:"panel",ref:y,"data-panel-id":n(p)},[E.value?_(i.$slots,"default",{key:0}):I("",!0)],8,Q))}}),Y={class:"vp-raw"},G=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"/docs/getting-started/introduction/"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),K=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),W=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),X={__name:"FwbAccordionExample",setup(r){return(t,p)=>(b(),f("div",Y,[a(n(x),null,{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[G]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("another header")]),_:1}),a(n(d),null,{default:l(()=>[K]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[W]),_:1})]),_:1})]),_:1})]))}},Z={class:"vp-raw"},ss=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"/docs/getting-started/introduction/"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),ns=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),as=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),ls={__name:"FwbAccordionExampleAlwaysOpen",setup(r){return(t,p)=>(b(),f("div",Z,[a(n(x),{"always-open":""},{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[ss]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("another header")]),_:1}),a(n(d),null,{default:l(()=>[ns]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[as]),_:1})]),_:1})]),_:1})]))}},os={class:"vp-raw"},ps=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"/docs/getting-started/introduction/"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),ts=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),es=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),cs={__name:"FwbAccordionExampleFlush",setup(r){return(t,p)=>(b(),f("div",os,[a(n(x),{flush:""},{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[ps]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("another header")]),_:1}),a(n(d),null,{default:l(()=>[ts]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[es]),_:1})]),_:1})]),_:1})]))}},rs={class:"vp-raw"},Es=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"/docs/getting-started/introduction/"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),ys=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),is=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),ds={__name:"FwbAccordionExampleStyledHeaders",setup(r){return(t,p)=>(b(),f("div",rs,[a(n(x),null,{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[Es]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),{class:"bg-pink-200 dark:bg-pink-900 dark:text-gray-50"},{default:l(()=>[o(" another header ")]),_:1}),a(n(d),null,{default:l(()=>[ys]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[is]),_:1})]),_:1})]),_:1})]))}},gs={class:"vp-raw"},us=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{href:"/docs/getting-started/introduction/",class:"text-blue-600 dark:text-blue-500 hover:underline"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),bs=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{href:"https://flowbite.com/figma/",class:"text-blue-600 dark:text-blue-500 hover:underline"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),fs=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{href:"https://flowbite.com/figma/",class:"text-blue-600 dark:text-blue-500 hover:underline"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),hs={__name:"FwbAccordionExampleFirstItemClosed",setup(r){return(t,p)=>(b(),f("div",gs,[a(n(x),{"open-first-item":!1},{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[us]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("another header")]),_:1}),a(n(d),null,{default:l(()=>[bs]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[fs]),_:1})]),_:1})]),_:1})]))}},Fs=m('

Vue Accordion - Flowbite ​

Use Tailwind CSS accordion component to show expanding content ​

TIP

Original reference: https://flowbite.com/docs/components/accordion/

Default accordion ​

Use this example to basic accordion.

',6),ws=m(`
vue
<template>
+  <fwb-accordion>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-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>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>another header</fwb-accordion-header>
+      <fwb-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>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-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>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-accordion>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-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>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>another header</fwb-accordion-header>
+      <fwb-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>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-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>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>

Always open accordion ​

Always open prop to makes accordion able to open multiple elements.

`,3),ms=m(`
vue
<template>
+  <fwb-accordion always-open>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="/docs/getting-started/introduction/">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>another header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-accordion always-open>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="/docs/getting-started/introduction/">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>another header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>

Flush accordion ​

Flush prop removes side borders, and rounded corners

`,3),vs=m(`
vue
<template>
+  <fwb-accordion flush>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="/docs/getting-started/introduction/">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>another header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-accordion flush>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="/docs/getting-started/introduction/">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>another header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>

Styling accordion ​

You can style accordion content and headers by passing tailwind classes into them.

`,3),As=m(`
vue
<template>
+  <fwb-accordion>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="/docs/getting-started/introduction/">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">
+        another header
+      </fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-accordion>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="/docs/getting-started/introduction/">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">
+        another header
+      </fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>

Closed first item ​

`,2),xs=m(`
vue
<template>
+    <fwb-accordion :open-first-item="false">
+      <fwb-accordion-panel>
+        <fwb-accordion-header>header</fwb-accordion-header>
+        <fwb-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>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>another header</fwb-accordion-header>
+        <fwb-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>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>and one more header</fwb-accordion-header>
+        <fwb-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>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+    </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>
<template>
+    <fwb-accordion :open-first-item="false">
+      <fwb-accordion-panel>
+        <fwb-accordion-header>header</fwb-accordion-header>
+        <fwb-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>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>another header</fwb-accordion-header>
+        <fwb-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>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>and one more header</fwb-accordion-header>
+        <fwb-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>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+    </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>
`,1),Ds=JSON.parse('{"title":"Vue Accordion - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/accordion.md","filePath":"components/accordion.md"}'),Cs={name:"components/accordion.md"},ks=Object.assign(Cs,{setup(r){return(t,p)=>(b(),f("div",null,[Fs,a(X),ws,a(ls),ms,a(cs),vs,a(ds),As,a(hs),xs]))}});export{Ds as __pageData,ks as default}; diff --git a/docs/.vitepress/dist/assets/components_accordion.md.3f1ef99a.lean.js b/docs/.vitepress/dist/assets/components_accordion.md.3f1ef99a.lean.js new file mode 100644 index 0000000..fcc1d78 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_accordion.md.3f1ef99a.lean.js @@ -0,0 +1 @@ +import{u as A,t as S}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as q,o as b,c as f,r as _,l as n,g as c,h as v,j as T,n as B,e as I,k as s,H as a,w as l,a as o,Q as m}from"./chunks/framework.3f630664.js";let P=(r=21)=>crypto.getRandomValues(new Uint8Array(r)).reduce((t,p)=>(p&=63,p<36?t+=p.toString(36):p<62?t+=(p-26).toString(36).toUpperCase():p>62?t+="-":t+="_",t),"");const H=["data-accordion-id"],x=q({__name:"FwbAccordion",props:{alwaysOpen:{type:Boolean,default:!1},openFirstItem:{type:Boolean,default:!0},flush:{type:Boolean,default:!1}},setup(r){const t=r,p=P();return A(p,{...t}),(y,E)=>(b(),f("div",{"data-accordion-id":n(p)},[_(y.$slots,"default")],8,H))}}),N="p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900";function O(r){const t=c(()=>r.value.parentElement.parentElement.dataset.accordionId),p=c(()=>r.value.parentElement.dataset.panelId),{accordionsStates:y}=A(),E=c(()=>y[t.value]),e=c(()=>y[t.value].panels[p.value]),i=c(()=>Object.keys(y[t.value].panels[p.value]).length);return{contentClasses:c(()=>S(N,!e.value.isVisible&&"hidden",(e.value.order!==i.value-1||E.value.flush)&&"border-b-0",e.value.order===i.value-1&&"border-t-0",E.value.flush&&"border-x-0"))}}const d=q({__name:"FwbAccordionContent",setup(r){const t=v(!1),p=v();let y;return T(()=>{y=O(p).contentClasses,t.value=!0}),(E,e)=>(b(),f("div",{ref_key:"content",ref:p},[t.value?(b(),f("div",{key:0,class:B(n(y))},[_(E.$slots,"default")],2)):I("",!0)],512))}}),j="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",R="w-6 h-6 shrink-0";function U(r){const t=c(()=>r.value.parentElement.parentElement.dataset.accordionId),p=c(()=>r.value.parentElement.dataset.panelId),{accordionsStates:y}=A(),E=c(()=>y[t.value]),e=c(()=>E.value.panels[p.value]),i=c(()=>Object.keys(e.value).length),h=c(()=>e.value.order!==i.value-1),F=c(()=>h.value||E.value.flush&&e.value.order===i.value-1&&!e.value.isVisible),C=c(()=>S(j,e.value.isVisible&&"bg-gray-100 dark:bg-gray-800",e.value.order===0&&!E.value.flush&&"rounded-t-xl",e.value.order===0&&E.value.flush&&"border-t-0",F.value&&"border-b-0",E.value.flush&&"border-x-0")),D=c(()=>S(R,e.value.isVisible&&"rotate-180"));return{headerClasses:C,arrowClasses:D}}const L={class:"w-full"},M=s("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"},null,-1),J=[M],g=q({__name:"FwbAccordionHeader",setup(r){const t=v(!1),p=v(),y=c(()=>p.value.parentElement.parentElement.dataset.accordionId),E=c(()=>p.value.parentElement.dataset.panelId),{accordionsStates:e}=A(),i=c(()=>e[y.value]),h=c(()=>i.value.panels[E.value]);let F,C;function D(){const w=h.value.isVisible;for(const $ in i.value.panels){const k=i.value.panels[$];k.id!==E.value?k.isVisible=!1:k.isVisible=!w}}function V(){h.value.isVisible=!h.value.isVisible}function z(){if(i.value.alwaysOpen)return V();D()}return T(()=>{const w=U(p);F=w.headerClasses,C=w.arrowClasses,t.value=!0}),(w,$)=>(b(),f("div",{ref_key:"header",ref:p},[t.value?(b(),f("button",{key:0,type:"button",class:B(n(F)),onClick:z},[s("span",L,[_(w.$slots,"default")]),(b(),f("svg",{"data-accordion-icon":"",class:B(n(C)),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},J,2))],2)):I("",!0)],512))}}),Q=["data-panel-id"],u=q({__name:"FwbAccordionPanel",setup(r){const{accordionsStates:t}=A(),p=P(),y=v(),E=c(()=>y.value?y.value.parentElement.dataset.accordionId:null),e=c(()=>t[E.value]);return T(()=>{var h,F;const i=(F=Object.keys((h=e==null?void 0:e.value)==null?void 0:h.panels))==null?void 0:F.length;e.value.panels[p]={id:p,order:i,isVisible:(e.value.openFirstItem&&i===0)??!1}}),(i,h)=>(b(),f("div",{ref_key:"panel",ref:y,"data-panel-id":n(p)},[E.value?_(i.$slots,"default",{key:0}):I("",!0)],8,Q))}}),Y={class:"vp-raw"},G=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"/docs/getting-started/introduction/"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),K=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),W=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),X={__name:"FwbAccordionExample",setup(r){return(t,p)=>(b(),f("div",Y,[a(n(x),null,{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[G]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("another header")]),_:1}),a(n(d),null,{default:l(()=>[K]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[W]),_:1})]),_:1})]),_:1})]))}},Z={class:"vp-raw"},ss=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"/docs/getting-started/introduction/"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),ns=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),as=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),ls={__name:"FwbAccordionExampleAlwaysOpen",setup(r){return(t,p)=>(b(),f("div",Z,[a(n(x),{"always-open":""},{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[ss]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("another header")]),_:1}),a(n(d),null,{default:l(()=>[ns]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[as]),_:1})]),_:1})]),_:1})]))}},os={class:"vp-raw"},ps=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"/docs/getting-started/introduction/"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),ts=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),es=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),cs={__name:"FwbAccordionExampleFlush",setup(r){return(t,p)=>(b(),f("div",os,[a(n(x),{flush:""},{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[ps]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("another header")]),_:1}),a(n(d),null,{default:l(()=>[ts]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[es]),_:1})]),_:1})]),_:1})]))}},rs={class:"vp-raw"},Es=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"/docs/getting-started/introduction/"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),ys=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),is=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),ds={__name:"FwbAccordionExampleStyledHeaders",setup(r){return(t,p)=>(b(),f("div",rs,[a(n(x),null,{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[Es]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),{class:"bg-pink-200 dark:bg-pink-900 dark:text-gray-50"},{default:l(()=>[o(" another header ")]),_:1}),a(n(d),null,{default:l(()=>[ys]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[is]),_:1})]),_:1})]),_:1})]))}},gs={class:"vp-raw"},us=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{href:"/docs/getting-started/introduction/",class:"text-blue-600 dark:text-blue-500 hover:underline"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),bs=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{href:"https://flowbite.com/figma/",class:"text-blue-600 dark:text-blue-500 hover:underline"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),fs=s("div",null,[s("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. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{href:"https://flowbite.com/figma/",class:"text-blue-600 dark:text-blue-500 hover:underline"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),hs={__name:"FwbAccordionExampleFirstItemClosed",setup(r){return(t,p)=>(b(),f("div",gs,[a(n(x),{"open-first-item":!1},{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[us]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("another header")]),_:1}),a(n(d),null,{default:l(()=>[bs]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[fs]),_:1})]),_:1})]),_:1})]))}},Fs=m("",6),ws=m("",3),ms=m("",3),vs=m("",3),As=m("",2),xs=m("",1),Ds=JSON.parse('{"title":"Vue Accordion - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/accordion.md","filePath":"components/accordion.md"}'),Cs={name:"components/accordion.md"},ks=Object.assign(Cs,{setup(r){return(t,p)=>(b(),f("div",null,[Fs,a(X),ws,a(ls),ms,a(cs),vs,a(ds),As,a(hs),xs]))}});export{Ds as __pageData,ks as default}; diff --git a/docs/.vitepress/dist/assets/components_alert.md.255adf89.js b/docs/.vitepress/dist/assets/components_alert.md.255adf89.js new file mode 100644 index 0000000..6bfebd0 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_alert.md.255adf89.js @@ -0,0 +1,383 @@ +import{t as w}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as D,Z as v,h as B,o as e,c as r,k as o,r as d,e as F,n as k,l as n,L as x,H as s,w as a,a as p,Q as i}from"./chunks/framework.3f630664.js";const T={class:"flex items-center"},I=o("svg",{class:"flex-shrink-0 w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{"fill-rule":"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z","clip-rule":"evenodd"})],-1),S=o("span",{class:"sr-only"},"Dismiss",-1),P=o("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{"fill-rule":"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z","clip-rule":"evenodd"})],-1),$=[S,P],V="ml-auto -mr-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex h-8 w-8 dark:bg-gray-800 dark:hover:bg-gray-700",l=D({inheritAttrs:!1,__name:"FwbAlert",props:{type:{default:"info"},closable:{type:Boolean,default:!1},icon:{type:Boolean,default:!1},border:{type:Boolean,default:!1}},emits:["close"],setup(c,{emit:E}){const t=c,b=E,m=v(),u={danger:"text-red-800 dark:text-red-400",dark:"text-gray-800 dark:text-gray-300",info:"text-blue-800 dark:text-blue-400",success:"text-green-800 dark:text-green-400",warning:"text-yellow-800 dark:text-yellow-300"},g={danger:"bg-red-50",dark:"bg-gray-50",info:"bg-blue-50",success:"bg-green-50",warning:"bg-yellow-50"},C=w(V,{danger:"text-red-500 dark:text-red-400 bg-red-50 hover:bg-red-200 focus:ring-red-400",dark:"text-gray-500 dark:text-gray-300 bg-gray-50 hover:bg-gray-200 focus:ring-gray-400 dark:hover:text-white",info:"text-blue-500 dark:text-blue-400 bg-blue-50 hover:bg-blue-200 focus:ring-blue-400",success:"text-green-500 dark:text-green-400 bg-green-50 hover:bg-green-200 focus:ring-green-400",warning:"text-yellow-500 dark:text-yellow-300 bg-yellow-50 hover:bg-yellow-200 focus:ring-yellow-400"}[t.type]),q={danger:"border-red-500 dark:text-red-400",dark:"border-gray-500 dark:text-gray-400",info:"border-blue-500 dark:text-blue-400",success:"border-green-500 dark:text-green-400",warning:"border-yellow-500 dark:text-yellow-400"},_={danger:[u.danger,g.danger].join(" "),dark:[u.dark,g.dark].join(" "),info:[u.info,g.info].join(" "),success:[u.success,g.success].join(" "),warning:[u.warning,g.warning].join(" ")},A=w("p-4 gap-3 text-sm dark:bg-gray-800 rounded-lg",_[t.type],(t.icon||t.closable)&&"flex items-center",q[t.type],t.border&&"border",m.class),f=B(!0);function h(){b("close"),f.value=!1}return(y,Fs)=>f.value?(e(),r("div",x({key:0},y.$attrs,{class:n(A),role:"alert"}),[o("div",T,[y.icon||y.$slots.icon?d(y.$slots,"icon",{key:0},()=>[I]):F("",!0),d(y.$slots,"title")]),d(y.$slots,"default",{onCloseClick:h}),d(y.$slots,"close-icon",{onCloseClick:h},()=>[y.closable?(e(),r("button",{key:0,type:"button",class:k(n(C)),"aria-label":"Close",onClick:h},$,2)):F("",!0)])],16)):F("",!0)}}),M={class:"vp-raw grid gap-2"},N={__name:"FwbAlertExampleBorder",setup(c){return(E,t)=>(e(),r("div",M,[s(n(l),{border:"",type:"info"},{default:a(()=>[p(" Info alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{border:"",type:"warning"},{default:a(()=>[p(" Warning alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{border:"",type:"danger"},{default:a(()=>[p(" Info Danger alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{border:"",type:"dark"},{default:a(()=>[p(" Info Dark alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{border:"",type:"success"},{default:a(()=>[p(" Success alert! Change a few things up and try submitting again. ")]),_:1})]))}},Z={class:"vp-raw grid gap-2"},W={__name:"FwbAlertExampleBorderAccent",setup(c){return(E,t)=>(e(),r("div",Z,[s(n(l),{class:"border-t-4 rounded-none",icon:"",type:"info"},{default:a(()=>[p(" Info alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{class:"border-t-4 rounded-none",icon:"",type:"warning"},{default:a(()=>[p(" Warning alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{class:"border-t-4 rounded-none",icon:"",type:"danger"},{default:a(()=>[p(" Info Danger alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{class:"border-t-4 rounded-none",icon:"",type:"dark"},{default:a(()=>[p(" Info Dark alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{class:"border-t-4 rounded-none",icon:"",type:"success"},{default:a(()=>[p(" Success alert! Change a few things up and try submitting again. ")]),_:1})]))}},H={class:"vp-raw"},R=o("svg",{class:"flex-shrink-0 w-4 h-4 mr-2","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20"},[o("path",{d:"M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"})],-1),j=o("span",{class:"sr-only"},"Info",-1),L=o("h3",{class:"text-lg font-medium"}," This is a info alert ",-1),z=o("div",{class:"mt-2 mb-4 text-sm"}," More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content. ",-1),U={class:"flex"},O=o("button",{type:"button",class:"text-white bg-blue-800 hover:bg-blue-900 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"},[o("svg",{class:"-ml-0.5 mr-2 h-3 w-3","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 14"},[o("path",{d:"M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"})]),p(" View more ")],-1),J=["onClick"],Q={__name:"FwbAlertExampleCustomContent",setup(c){return(E,t)=>(e(),r("div",H,[s(n(l),{type:"info"},{icon:a(()=>[R,j]),title:a(()=>[L]),default:a(({onCloseClick:b})=>[z,o("div",U,[O,o("button",{type:"button",class:"text-blue-800 bg-transparent border border-blue-800 hover:bg-blue-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:hover:bg-blue-600 dark:border-blue-600 dark:text-blue-400 dark:hover:text-white dark:focus:ring-blue-800","data-dismiss-target":"#alert-additional-content-1","aria-label":"Close",onClick:b}," Dismiss ",8,J)])]),_:1})]))}},Y={class:"vp-raw grid gap-2"},G={__name:"FwbAlertExampleDismissable",setup(c){return(E,t)=>(e(),r("div",Y,[s(n(l),{closable:"",icon:"",type:"info"},{default:a(()=>[p(" Info ")]),_:1}),s(n(l),{closable:"",icon:"",type:"warning"},{default:a(()=>[p(" Warning ")]),_:1}),s(n(l),{closable:"",icon:"",type:"danger"},{default:a(()=>[p(" Danger ")]),_:1}),s(n(l),{closable:"",icon:"",type:"dark"},{default:a(()=>[p(" Dark ")]),_:1}),s(n(l),{closable:"",icon:"",type:"success"},{default:a(()=>[p(" Success ")]),_:1})]))}},K={class:"vp-raw grid gap-2"},X={__name:"FwbAlertExampleIcon",setup(c){return(E,t)=>(e(),r("div",K,[s(n(l),{icon:"",type:"info"},{default:a(()=>[p(" Info alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{icon:"",type:"warning"},{default:a(()=>[p(" Warning alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{icon:"",type:"danger"},{default:a(()=>[p(" Danger alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{icon:"",type:"dark"},{default:a(()=>[p(" Dark alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{icon:"",type:"success"},{default:a(()=>[p(" Success alert! Change a few things up and try submitting again. ")]),_:1})]))}},ss={class:"vp-raw grid gap-2"},ns=o("span",{class:"font-medium"},"Ensure that these requirements are met:",-1),as=o("ul",{class:"mt-1.5 ml-4 list-disc list-inside"},[o("li",null,"At least 10 characters (and up to 100 characters)"),o("li",null,"At least one lowercase character"),o("li",null,"Inclusion of at least one special character, e.g., ! @ # ?")],-1),ls=o("span",{class:"font-medium"},"Ensure that these requirements are met:",-1),ps=o("ul",{class:"mt-1.5 ml-4 list-disc list-inside"},[o("li",null,"At least 10 characters (and up to 100 characters)"),o("li",null,"At least one lowercase character"),o("li",null,"Inclusion of at least one special character, e.g., ! @ # ?")],-1),os={__name:"FwbAlertExampleList",setup(c){return(E,t)=>(e(),r("div",ss,[s(n(l),{type:"info"},{default:a(()=>[ns,as]),_:1}),s(n(l),{type:"danger"},{default:a(()=>[ls,ps]),_:1})]))}},ts={class:"vp-raw grid gap-2"},es={__name:"FwbAlertExampleType",setup(c){return(E,t)=>(e(),r("div",ts,[s(n(l),{type:"info"},{default:a(()=>[p(" Info alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{type:"warning"},{default:a(()=>[p(" Warning alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{type:"danger"},{default:a(()=>[p(" Danger alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{type:"dark"},{default:a(()=>[p(" Dark alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{type:"success"},{default:a(()=>[p(" Success alert! Change a few things up and try submitting again. ")]),_:1})]))}},rs=i('

Vue Alert - Flowbite ​

Show contextual information to your users using alert elements based on Tailwind CSS ​

The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.

Default alert ​

Use the following examples of alert components to show messages as feedback to your users.

',5),cs=i(`
vue
<template>
+  <div class="grid gap-2">
+    <fwb-alert type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="danger">
+      Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="dark">
+      Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
<template>
+  <div class="grid gap-2">
+    <fwb-alert type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="danger">
+      Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="dark">
+      Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>

Alerts with icon ​

You can also include a descriptive icon to complement the message inside the alert component with the following example.

`,3),Es=i(`
vue
<template>
+  <div class="grid gap-2">
+    <fwb-alert icon type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="danger">
+      Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="dark">
+      Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
<template>
+  <div class="grid gap-2">
+    <fwb-alert icon type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="danger">
+      Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="dark">
+      Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>

Bordered alerts ​

Use this example to add a border accent to the alert component instead of just a plain background.

`,3),ys=i(`
vue
<template>
+  <div class="grid gap-2">
+    <fwb-alert border type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="danger">
+      Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="dark">
+      Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
<template>
+  <div class="grid gap-2">
+    <fwb-alert border type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="danger">
+      Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="dark">
+      Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>

Border accent ​

Use this example to add a border accent on top of the alert component for further visual distinction.

`,3),is=i(`
vue
<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-alert class="border-t-4 rounded-none" icon type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="danger">
+      Info Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="dark">
+      Info Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-alert class="border-t-4 rounded-none" icon type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="danger">
+      Info Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="dark">
+      Info Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>

Alerts with list ​

Use this example to show a list and a description inside an alert component.

`,3),us=i(`
vue
<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-alert type="info">
+      <span class="font-medium">Ensure that these requirements are met:</span>
+      <ul class="mt-1.5 ml-4 list-disc list-inside">
+        <li>At least 10 characters (and up to 100 characters)</li>
+        <li>At least one lowercase character</li>
+        <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
+      </ul>
+    </fwb-alert>
+    <fwb-alert type="danger">
+      <span class="font-medium">Ensure that these requirements are met:</span>
+      <ul class="mt-1.5 ml-4 list-disc list-inside">
+        <li>At least 10 characters (and up to 100 characters)</li>
+        <li>At least one lowercase character</li>
+        <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
+      </ul>
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-alert type="info">
+      <span class="font-medium">Ensure that these requirements are met:</span>
+      <ul class="mt-1.5 ml-4 list-disc list-inside">
+        <li>At least 10 characters (and up to 100 characters)</li>
+        <li>At least one lowercase character</li>
+        <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
+      </ul>
+    </fwb-alert>
+    <fwb-alert type="danger">
+      <span class="font-medium">Ensure that these requirements are met:</span>
+      <ul class="mt-1.5 ml-4 list-disc list-inside">
+        <li>At least 10 characters (and up to 100 characters)</li>
+        <li>At least one lowercase character</li>
+        <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
+      </ul>
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>

Dismissing ​

Use the following alert elements that are also dismissable.

`,3),gs=i(`
vue
<script setup>
+import { Alert } from 'flowbite-vue'
+</script>
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-alert closable icon type="info">
+      Info
+    </fwb-alert>
+    <fwb-alert closable icon type="warning">
+      Warning
+    </fwb-alert>
+    <fwb-alert closable icon type="danger">
+      Danger
+    </fwb-alert>
+    <fwb-alert closable icon type="dark">
+      Dark
+    </fwb-alert>
+    <fwb-alert closable icon type="success">
+      Success
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
<script setup>
+import { Alert } from 'flowbite-vue'
+</script>
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-alert closable icon type="info">
+      Info
+    </fwb-alert>
+    <fwb-alert closable icon type="warning">
+      Warning
+    </fwb-alert>
+    <fwb-alert closable icon type="danger">
+      Danger
+    </fwb-alert>
+    <fwb-alert closable icon type="dark">
+      Dark
+    </fwb-alert>
+    <fwb-alert closable icon type="success">
+      Success
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>

Additional content ​

The following alert components can be used if you wish to disclose more information inside the element.

`,3),ds=i(`
vue
<template>
+  <fwb-alert type="info">
+    <template #icon>
+      <svg
+        class="flex-shrink-0 w-4 h-4 mr-2"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
+        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+      </svg>
+      <span class="sr-only">Info</span>
+    </template>
+    <template #title>
+      <h3 class="text-lg font-medium">
+        This is a info alert
+      </h3>
+    </template>
+    <template #default="{ onCloseClick }">
+      <div class="mt-2 mb-4 text-sm">
+        More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
+      </div>
+      <div class="flex">
+        <button
+          type="button"
+          class="text-white bg-blue-800 hover:bg-blue-900 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        >
+          <svg
+            class="-ml-0.5 mr-2 h-3 w-3"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 14"
+          >
+            <path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
+          </svg>
+          View more
+        </button>
+        <button
+          type="button"
+          class="text-blue-800 bg-transparent border border-blue-800 hover:bg-blue-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:hover:bg-blue-600 dark:border-blue-600 dark:text-blue-400 dark:hover:text-white dark:focus:ring-blue-800"
+          data-dismiss-target="#alert-additional-content-1"
+          aria-label="Close"
+          @click="onCloseClick"
+        >
+          Dismiss
+        </button>
+      </div>
+    </template>
+  </fwb-alert>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
<template>
+  <fwb-alert type="info">
+    <template #icon>
+      <svg
+        class="flex-shrink-0 w-4 h-4 mr-2"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
+        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+      </svg>
+      <span class="sr-only">Info</span>
+    </template>
+    <template #title>
+      <h3 class="text-lg font-medium">
+        This is a info alert
+      </h3>
+    </template>
+    <template #default="{ onCloseClick }">
+      <div class="mt-2 mb-4 text-sm">
+        More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
+      </div>
+      <div class="flex">
+        <button
+          type="button"
+          class="text-white bg-blue-800 hover:bg-blue-900 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        >
+          <svg
+            class="-ml-0.5 mr-2 h-3 w-3"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 14"
+          >
+            <path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
+          </svg>
+          View more
+        </button>
+        <button
+          type="button"
+          class="text-blue-800 bg-transparent border border-blue-800 hover:bg-blue-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:hover:bg-blue-600 dark:border-blue-600 dark:text-blue-400 dark:hover:text-white dark:focus:ring-blue-800"
+          data-dismiss-target="#alert-additional-content-1"
+          aria-label="Close"
+          @click="onCloseClick"
+        >
+          Dismiss
+        </button>
+      </div>
+    </template>
+  </fwb-alert>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>

API ​

Props ​

NameValuesDefault
typeinfo, danger, success,warning, darkinfo
closablebooleanfalse
iconbooleanfalse
borderbooleanfalse

Events ​

NameDescription
closeClose button pressed

Slots ​

NameDescription
defaultalert content
close-iconcustom close icon
iconcustom icon
titletitle content
`,8),ms=JSON.parse('{"title":"Vue Alert - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/alert.md","filePath":"components/alert.md"}'),bs={name:"components/alert.md"},Cs=Object.assign(bs,{setup(c){return(E,t)=>(e(),r("div",null,[rs,s(es),cs,s(X),Es,s(N),ys,s(W),is,s(os),us,s(G),gs,s(Q),ds]))}});export{ms as __pageData,Cs as default}; diff --git a/docs/.vitepress/dist/assets/components_alert.md.255adf89.lean.js b/docs/.vitepress/dist/assets/components_alert.md.255adf89.lean.js new file mode 100644 index 0000000..61564fc --- /dev/null +++ b/docs/.vitepress/dist/assets/components_alert.md.255adf89.lean.js @@ -0,0 +1 @@ +import{t as w}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as D,Z as v,h as B,o as e,c as r,k as o,r as d,e as F,n as k,l as n,L as x,H as s,w as a,a as p,Q as i}from"./chunks/framework.3f630664.js";const T={class:"flex items-center"},I=o("svg",{class:"flex-shrink-0 w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{"fill-rule":"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z","clip-rule":"evenodd"})],-1),S=o("span",{class:"sr-only"},"Dismiss",-1),P=o("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{"fill-rule":"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z","clip-rule":"evenodd"})],-1),$=[S,P],V="ml-auto -mr-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex h-8 w-8 dark:bg-gray-800 dark:hover:bg-gray-700",l=D({inheritAttrs:!1,__name:"FwbAlert",props:{type:{default:"info"},closable:{type:Boolean,default:!1},icon:{type:Boolean,default:!1},border:{type:Boolean,default:!1}},emits:["close"],setup(c,{emit:E}){const t=c,b=E,m=v(),u={danger:"text-red-800 dark:text-red-400",dark:"text-gray-800 dark:text-gray-300",info:"text-blue-800 dark:text-blue-400",success:"text-green-800 dark:text-green-400",warning:"text-yellow-800 dark:text-yellow-300"},g={danger:"bg-red-50",dark:"bg-gray-50",info:"bg-blue-50",success:"bg-green-50",warning:"bg-yellow-50"},C=w(V,{danger:"text-red-500 dark:text-red-400 bg-red-50 hover:bg-red-200 focus:ring-red-400",dark:"text-gray-500 dark:text-gray-300 bg-gray-50 hover:bg-gray-200 focus:ring-gray-400 dark:hover:text-white",info:"text-blue-500 dark:text-blue-400 bg-blue-50 hover:bg-blue-200 focus:ring-blue-400",success:"text-green-500 dark:text-green-400 bg-green-50 hover:bg-green-200 focus:ring-green-400",warning:"text-yellow-500 dark:text-yellow-300 bg-yellow-50 hover:bg-yellow-200 focus:ring-yellow-400"}[t.type]),q={danger:"border-red-500 dark:text-red-400",dark:"border-gray-500 dark:text-gray-400",info:"border-blue-500 dark:text-blue-400",success:"border-green-500 dark:text-green-400",warning:"border-yellow-500 dark:text-yellow-400"},_={danger:[u.danger,g.danger].join(" "),dark:[u.dark,g.dark].join(" "),info:[u.info,g.info].join(" "),success:[u.success,g.success].join(" "),warning:[u.warning,g.warning].join(" ")},A=w("p-4 gap-3 text-sm dark:bg-gray-800 rounded-lg",_[t.type],(t.icon||t.closable)&&"flex items-center",q[t.type],t.border&&"border",m.class),f=B(!0);function h(){b("close"),f.value=!1}return(y,Fs)=>f.value?(e(),r("div",x({key:0},y.$attrs,{class:n(A),role:"alert"}),[o("div",T,[y.icon||y.$slots.icon?d(y.$slots,"icon",{key:0},()=>[I]):F("",!0),d(y.$slots,"title")]),d(y.$slots,"default",{onCloseClick:h}),d(y.$slots,"close-icon",{onCloseClick:h},()=>[y.closable?(e(),r("button",{key:0,type:"button",class:k(n(C)),"aria-label":"Close",onClick:h},$,2)):F("",!0)])],16)):F("",!0)}}),M={class:"vp-raw grid gap-2"},N={__name:"FwbAlertExampleBorder",setup(c){return(E,t)=>(e(),r("div",M,[s(n(l),{border:"",type:"info"},{default:a(()=>[p(" Info alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{border:"",type:"warning"},{default:a(()=>[p(" Warning alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{border:"",type:"danger"},{default:a(()=>[p(" Info Danger alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{border:"",type:"dark"},{default:a(()=>[p(" Info Dark alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{border:"",type:"success"},{default:a(()=>[p(" Success alert! Change a few things up and try submitting again. ")]),_:1})]))}},Z={class:"vp-raw grid gap-2"},W={__name:"FwbAlertExampleBorderAccent",setup(c){return(E,t)=>(e(),r("div",Z,[s(n(l),{class:"border-t-4 rounded-none",icon:"",type:"info"},{default:a(()=>[p(" Info alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{class:"border-t-4 rounded-none",icon:"",type:"warning"},{default:a(()=>[p(" Warning alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{class:"border-t-4 rounded-none",icon:"",type:"danger"},{default:a(()=>[p(" Info Danger alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{class:"border-t-4 rounded-none",icon:"",type:"dark"},{default:a(()=>[p(" Info Dark alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{class:"border-t-4 rounded-none",icon:"",type:"success"},{default:a(()=>[p(" Success alert! Change a few things up and try submitting again. ")]),_:1})]))}},H={class:"vp-raw"},R=o("svg",{class:"flex-shrink-0 w-4 h-4 mr-2","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20"},[o("path",{d:"M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"})],-1),j=o("span",{class:"sr-only"},"Info",-1),L=o("h3",{class:"text-lg font-medium"}," This is a info alert ",-1),z=o("div",{class:"mt-2 mb-4 text-sm"}," More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content. ",-1),U={class:"flex"},O=o("button",{type:"button",class:"text-white bg-blue-800 hover:bg-blue-900 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"},[o("svg",{class:"-ml-0.5 mr-2 h-3 w-3","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 14"},[o("path",{d:"M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"})]),p(" View more ")],-1),J=["onClick"],Q={__name:"FwbAlertExampleCustomContent",setup(c){return(E,t)=>(e(),r("div",H,[s(n(l),{type:"info"},{icon:a(()=>[R,j]),title:a(()=>[L]),default:a(({onCloseClick:b})=>[z,o("div",U,[O,o("button",{type:"button",class:"text-blue-800 bg-transparent border border-blue-800 hover:bg-blue-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:hover:bg-blue-600 dark:border-blue-600 dark:text-blue-400 dark:hover:text-white dark:focus:ring-blue-800","data-dismiss-target":"#alert-additional-content-1","aria-label":"Close",onClick:b}," Dismiss ",8,J)])]),_:1})]))}},Y={class:"vp-raw grid gap-2"},G={__name:"FwbAlertExampleDismissable",setup(c){return(E,t)=>(e(),r("div",Y,[s(n(l),{closable:"",icon:"",type:"info"},{default:a(()=>[p(" Info ")]),_:1}),s(n(l),{closable:"",icon:"",type:"warning"},{default:a(()=>[p(" Warning ")]),_:1}),s(n(l),{closable:"",icon:"",type:"danger"},{default:a(()=>[p(" Danger ")]),_:1}),s(n(l),{closable:"",icon:"",type:"dark"},{default:a(()=>[p(" Dark ")]),_:1}),s(n(l),{closable:"",icon:"",type:"success"},{default:a(()=>[p(" Success ")]),_:1})]))}},K={class:"vp-raw grid gap-2"},X={__name:"FwbAlertExampleIcon",setup(c){return(E,t)=>(e(),r("div",K,[s(n(l),{icon:"",type:"info"},{default:a(()=>[p(" Info alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{icon:"",type:"warning"},{default:a(()=>[p(" Warning alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{icon:"",type:"danger"},{default:a(()=>[p(" Danger alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{icon:"",type:"dark"},{default:a(()=>[p(" Dark alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{icon:"",type:"success"},{default:a(()=>[p(" Success alert! Change a few things up and try submitting again. ")]),_:1})]))}},ss={class:"vp-raw grid gap-2"},ns=o("span",{class:"font-medium"},"Ensure that these requirements are met:",-1),as=o("ul",{class:"mt-1.5 ml-4 list-disc list-inside"},[o("li",null,"At least 10 characters (and up to 100 characters)"),o("li",null,"At least one lowercase character"),o("li",null,"Inclusion of at least one special character, e.g., ! @ # ?")],-1),ls=o("span",{class:"font-medium"},"Ensure that these requirements are met:",-1),ps=o("ul",{class:"mt-1.5 ml-4 list-disc list-inside"},[o("li",null,"At least 10 characters (and up to 100 characters)"),o("li",null,"At least one lowercase character"),o("li",null,"Inclusion of at least one special character, e.g., ! @ # ?")],-1),os={__name:"FwbAlertExampleList",setup(c){return(E,t)=>(e(),r("div",ss,[s(n(l),{type:"info"},{default:a(()=>[ns,as]),_:1}),s(n(l),{type:"danger"},{default:a(()=>[ls,ps]),_:1})]))}},ts={class:"vp-raw grid gap-2"},es={__name:"FwbAlertExampleType",setup(c){return(E,t)=>(e(),r("div",ts,[s(n(l),{type:"info"},{default:a(()=>[p(" Info alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{type:"warning"},{default:a(()=>[p(" Warning alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{type:"danger"},{default:a(()=>[p(" Danger alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{type:"dark"},{default:a(()=>[p(" Dark alert! Change a few things up and try submitting again. ")]),_:1}),s(n(l),{type:"success"},{default:a(()=>[p(" Success alert! Change a few things up and try submitting again. ")]),_:1})]))}},rs=i("",5),cs=i("",3),Es=i("",3),ys=i("",3),is=i("",3),us=i("",3),gs=i("",3),ds=i("",8),ms=JSON.parse('{"title":"Vue Alert - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/alert.md","filePath":"components/alert.md"}'),bs={name:"components/alert.md"},Cs=Object.assign(bs,{setup(c){return(E,t)=>(e(),r("div",null,[rs,s(es),cs,s(X),Es,s(N),ys,s(W),is,s(os),us,s(G),gs,s(Q),ds]))}});export{ms as __pageData,Cs as default}; diff --git a/docs/.vitepress/dist/assets/components_avatar.md.8db14583.js b/docs/.vitepress/dist/assets/components_avatar.md.8db14583.js new file mode 100644 index 0000000..bcd0a29 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_avatar.md.8db14583.js @@ -0,0 +1,319 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{u as i}from"./chunks/useMergeClasses.5cec3a4e.js";import{g as y,d as C,h as x,Y as j,$ as T,o as p,c as o,k as c,n as E,l as a,r as b,t as _,e as S,_ as P,H as s,w as u,a as w,Q as r}from"./chunks/framework.3f630664.js";const f={xs:"w-6 h-6",sm:"w-8 h-8",md:"w-10 h-10",lg:"w-20 h-20",xl:"w-36 h-36"},q={default:"rounded",rounded:"rounded-full"},z="ring-2 ring-gray-300 dark:ring-gray-500 p-1",$="absolute h-3.5 w-3.5 rounded-full border-2 border-white dark:border-gray-800",V={away:"bg-gray-400",busy:"bg-yellow-400",offline:"bg-red-400",online:"bg-green-400"},I={"top-right-rounded":"top-0 -right-0.5","top-right-default":"-top-1.5 -right-1.5","top-left-rounded":"top-0 left-0","top-left-default":"top-0 left-0 transform -translate-y-1/2 -translate-x-1/2","bottom-right-rounded":"bottom-0 -right-0.5","bottom-right-default":"bottom-0 -right-1.5 translate-y-1/2","bottom-left-rounded":"bottom-0 left-0","bottom-left-default":"-bottom-1.5 left-0 transform -translate-x-1/2 "},N="absolute w-auto h-auto text-gray-400",M="flex overflow-hidden relative justify-center items-center",R="bg-gray-100 dark:bg-gray-600",J="font-medium text-gray-600 dark:text-gray-300",U={xs:"bottom-0",sm:"bottom-0",md:"-bottom-1",lg:"-bottom-2",xl:"-bottom-4"};function W(n){const t=y(()=>i([f[n.size.value],q[n.rounded.value?"rounded":"default"],n.bordered.value?z:"",n.stacked.value?"border-2 border-white dark:border-gray-800":""])),e=y(()=>{const m=`${n.statusPosition.value}-${n.rounded.value?"rounded":"default"}`;return i([$,V[n.status.value],I[m]])}),g=y(()=>i([N,U[n.size.value]])),d=y(()=>i([M,f[n.size.value],q[n.rounded.value?"rounded":"default"],n.img.value&&n.bordered.value?"":R,n.bordered.value?" overflow-visible":""])),F=y(()=>i([J]));return{avatarClasses:t,avatarDotClasses:e,avatarPlaceholderClasses:g,avatarPlaceholderInitialsClasses:F,avatarPlaceholderWrapperClasses:d}}const H={class:"relative"},O=["alt","src"],G=c("path",{"clip-rule":"evenodd",d:"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z","fill-rule":"evenodd"},null,-1),Q=[G],Y=["data-pos"],l=C({__name:"FwbAvatar",props:{alt:{type:String,default:"Avatar"},bordered:{type:Boolean,default:!1},img:{type:String,default:""},rounded:{type:Boolean,default:!1},size:{type:String,default:"md"},stacked:{type:Boolean,default:!1},status:{type:String,default:null},statusPosition:{type:String,default:"top-right"},initials:{type:String,default:null}},setup(n){const t=x(!1);function e(){t.value=!0}const g=j(),d=y(()=>g.placeholder),F=n,{avatarClasses:m,avatarDotClasses:B,avatarPlaceholderClasses:v,avatarPlaceholderInitialsClasses:A,avatarPlaceholderWrapperClasses:D}=W(T(F));return(k,Is)=>(p(),o("div",H,[c("div",{class:E(a(D))},[n.img&&!t.value?(p(),o("img",{key:0,alt:n.alt,class:E(a(m)),src:n.img,onError:e},null,42,O)):!n.initials&&d.value?(p(),o("div",{key:1,class:E(a(v))},[b(k.$slots,"placeholder")],2)):!n.img&&!n.initials?(p(),o("svg",{key:2,class:E(a(v)),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},Q,2)):(p(),o("div",{key:3,class:E(a(A))},_(n.initials),3))],2),n.status?(p(),o("span",{key:0,class:E(a(B)),"data-pos":n.statusPosition},null,10,Y)):S("",!0)]))}}),K={},L={class:"flex -space-x-4"};function X(n,t){return p(),o("div",L,[b(n.$slots,"default")])}const h=P(K,[["render",X]]),Z=["href"],ss=C({__name:"FwbAvatarStackCounter",props:{total:{type:Number,default:1},href:{type:String,default:"#"}},setup(n){return(t,e)=>(p(),o("a",{class:"relative flex justify-center items-center w-10 h-10 text-xs font-medium text-white bg-gray-700 rounded-full border-2 border-white hover:bg-gray-600 dark:border-gray-800",href:n.href},"+"+_(n.total),9,Z))}}),as={class:"vp-raw flex justify-center space-x-4"},ns={__name:"FwbAvatarExample",setup(n){return(t,e)=>(p(),o("div",as,[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:""})]))}},ls={class:"vp-raw flex justify-center"},ps={__name:"FwbAvatarExampleAlt",setup(n){return(t,e)=>(p(),o("div",ls,[s(a(l),{alt:"Alternative text",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"})]))}},os={class:"vp-raw flex justify-center space-x-4"},ts={__name:"FwbAvatarExampleBordered",setup(n){return(t,e)=>(p(),o("div",os,[s(a(l),{bordered:"",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{bordered:"",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:""})]))}},es={class:"vp-raw flex justify-center space-x-4"},cs=c("svg",{class:"w-12 h-12",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[c("path",{d:"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z","stroke-linecap":"round","stroke-linejoin":"round"})],-1),rs=c("svg",{class:"w-12 h-12",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[c("path",{d:"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z","stroke-linecap":"round","stroke-linejoin":"round"})],-1),Es={__name:"FwbAvatarExampleIcon",setup(n){return(t,e)=>(p(),o("div",es,[s(a(l),null,{placeholder:u(()=>[cs]),_:1}),s(a(l),{rounded:""},{placeholder:u(()=>[rs]),_:1})]))}},ys={class:"vp-raw flex justify-center space-x-4"},is={__name:"FwbAvatarExampleInitials",setup(n){return(t,e)=>(p(),o("div",ys,[s(a(l),{initials:"JD"}),s(a(l),{initials:"JD",rounded:""})]))}},us={class:"vp-raw flex justify-center space-x-4"},gs={__name:"FwbAvatarExamplePlaceholder",setup(n){return(t,e)=>(p(),o("div",us,[s(a(l)),s(a(l),{rounded:""})]))}},ds={class:"vp-raw flex justify-center items-center space-x-4"},Fs={__name:"FwbAvatarExampleSize",setup(n){return(t,e)=>(p(),o("div",ds,[s(a(l),{size:"xs",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"sm",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"md",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"lg",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"xl",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"})]))}},ms={class:"vp-raw grid gap-2"},vs={__name:"FwbAvatarExampleStack",setup(n){return(t,e)=>(p(),o("div",ms,[s(a(h),null,{default:u(()=>[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-1.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-2.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-3.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-4.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"",stacked:""})]),_:1}),s(a(h),null,{default:u(()=>[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-1.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-2.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-3.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-4.jpg",rounded:"",stacked:""}),s(a(ss),{href:"#",total:99})]),_:1})]))}},fs={class:"vp-raw flex justify-center space-x-4"},qs={__name:"FwbAvatarExampleStatus",setup(n){return(t,e)=>(p(),o("div",fs,[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"busy"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"away"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"offline"})]))}},hs={class:"vp-raw flex justify-center space-x-4"},Cs={__name:"FwbAvatarExampleStatusPosition",setup(n){return(t,e)=>(p(),o("div",hs,[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"top-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"top-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"top-right",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"top-right",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"bottom-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"bottom-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"bottom-right",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"bottom-right",status:"online"})]))}},bs=c("h1",{id:"vue-avatar-flowbite",tabindex:"-1"},[w("Vue Avatar - Flowbite "),c("a",{class:"header-anchor",href:"#vue-avatar-flowbite","aria-label":'Permalink to "Vue Avatar - Flowbite"'},"​")],-1),_s=c("p",null,"Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes",-1),ws=c("h2",{id:"default-avatar",tabindex:"-1"},[w("Default avatar "),c("a",{class:"header-anchor",href:"#default-avatar","aria-label":'Permalink to "Default avatar"'},"​")],-1),Bs=c("p",null,"Use this example to create a circle and rounded avatar on an image element.",-1),As=r(`
vue
<template>
+  <div class="flex justify-center space-x-4">
+    <fwb-avatar img="/images/avatar-1.jpg" />
+    <fwb-avatar img="/images/avatar-1.jpg" rounded />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>
<template>
+  <div class="flex justify-center space-x-4">
+    <fwb-avatar img="/images/avatar-1.jpg" />
+    <fwb-avatar img="/images/avatar-1.jpg" rounded />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>

Bordered ​

Use this example to create a circle and rounded avatar on an image element.

`,3),Ds=r(`
vue
<template>
+  <div class="flex justify-center space-x-4">
+    <fwb-avatar bordered img="/images/avatar-1.jpg" />
+    <fwb-avatar bordered img="/images/avatar-1.jpg" rounded />
+  </div></template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>
<template>
+  <div class="flex justify-center space-x-4">
+    <fwb-avatar bordered img="/images/avatar-1.jpg" />
+    <fwb-avatar bordered img="/images/avatar-1.jpg" rounded />
+  </div></template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>

Dot indicator ​

Use a dot element relative to the avatar component as an indicator for the user (eg. online or offline status).

`,3),ks=r(`
vue
<template>
+  <div class="flex justify-center space-x-4">
+    <fwb-avatar img="/images/avatar-1.jpg" status="online" />
+    <fwb-avatar img="/images/avatar-1.jpg" status="busy" />
+    <fwb-avatar img="/images/avatar-1.jpg" status="away" />
+    <fwb-avatar img="/images/avatar-1.jpg" status="offline" />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>
<template>
+  <div class="flex justify-center space-x-4">
+    <fwb-avatar img="/images/avatar-1.jpg" status="online" />
+    <fwb-avatar img="/images/avatar-1.jpg" status="busy" />
+    <fwb-avatar img="/images/avatar-1.jpg" status="away" />
+    <fwb-avatar img="/images/avatar-1.jpg" status="offline" />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>

Dot indicator position ​

`,2),xs=r(`
vue
<template>
+  <div class="flex justify-center space-x-4">
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      status-position="top-left"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      rounded
+      status-position="top-left"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      status-position="top-right"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      rounded
+      status-position="top-right"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      status-position="bottom-left"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      rounded
+      status-position="bottom-left"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      status-position="bottom-right"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      rounded
+      status-position="bottom-right"
+      status="online"
+    />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>
<template>
+  <div class="flex justify-center space-x-4">
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      status-position="top-left"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      rounded
+      status-position="top-left"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      status-position="top-right"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      rounded
+      status-position="top-right"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      status-position="bottom-left"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      rounded
+      status-position="bottom-left"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      status-position="bottom-right"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      rounded
+      status-position="bottom-right"
+      status="online"
+    />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>

Sizes ​

Choose from multiple sizing options for the avatar component from this example.

`,3),js=r(`
vue
<template>
+  <div class="flex justify-center items-center space-x-4">
+    <fwb-avatar size="xs" img="/images/avatar-1.jpg" />
+    <fwb-avatar size="sm" img="/images/avatar-1.jpg" />
+    <fwb-avatar size="md" img="/images/avatar-1.jpg" />
+    <fwb-avatar size="lg" img="/images/avatar-1.jpg" />
+    <fwb-avatar size="xl" img="/images/avatar-1.jpg" />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>
<template>
+  <div class="flex justify-center items-center space-x-4">
+    <fwb-avatar size="xs" img="/images/avatar-1.jpg" />
+    <fwb-avatar size="sm" img="/images/avatar-1.jpg" />
+    <fwb-avatar size="md" img="/images/avatar-1.jpg" />
+    <fwb-avatar size="lg" img="/images/avatar-1.jpg" />
+    <fwb-avatar size="xl" img="/images/avatar-1.jpg" />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>

Alternative text ​

`,2),Ts=r(`
vue
<template>
+  <div class="flex justify-center">
+    <fwb-avatar alt="Alternative text" img="/images/avatar-1.jpg" />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>
<template>
+  <div class="flex justify-center">
+    <fwb-avatar alt="Alternative text" img="/images/avatar-1.jpg" />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>

Stacked avatars ​

Use this example if you want to stack a group of users by overlapping the avatar components.

`,3),Ss=r(`
vue
<template>
+  <div class="grid gap-2">
+    <stacked-avatars>
+      <fwb-avatar img="/images/avatar-1.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-2.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-3.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-4.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-5.jpg" rounded stacked />
+    </stacked-avatars>
+    <stacked-avatars>
+      <fwb-avatar img="/images/avatar-1.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-2.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-3.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-4.jpg" rounded stacked />
+      <stacked-avatars-counter href="#" total="99" />
+    </stacked-avatars>
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>
<template>
+  <div class="grid gap-2">
+    <stacked-avatars>
+      <fwb-avatar img="/images/avatar-1.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-2.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-3.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-4.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-5.jpg" rounded stacked />
+    </stacked-avatars>
+    <stacked-avatars>
+      <fwb-avatar img="/images/avatar-1.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-2.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-3.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-4.jpg" rounded stacked />
+      <stacked-avatars-counter href="#" total="99" />
+    </stacked-avatars>
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>

Placeholder icon ​

`,2),Ps=r(`
vue
<template>
+  <div class="flex justify-center space-x-4">
+    <fwb-avatar />
+    <fwb-avatar rounded />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>
<template>
+  <div class="flex justify-center space-x-4">
+    <fwb-avatar />
+    <fwb-avatar rounded />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>

Placeholder initials ​

`,2),zs=r(`
vue
<template>
+  <div class="flex justify-center space-x-4">
+    <fwb-avatar initials="JD" />
+    <fwb-avatar initials="JD" rounded />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>
<template>
+  <div class="flex justify-center space-x-4">
+    <fwb-avatar initials="JD" />
+    <fwb-avatar initials="JD" rounded />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>

Alternative Placeholder Icon ​

Use this example if you'd like to specify a different placeholder icon. Specify a #placeholder template slot to override the default placeholder icon. This has no effect if using initials.

`,3),$s=r(`
vue
<template>
+  <div class="vp-raw flex justify-center space-x-4">
+    <fwb-avatar>
+      <template #placeholder>
+        <svg class="w-12 h-12" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </template>
+    </fwb-avatar>
+    <fwb-avatar rounded>
+      <template #placeholder>
+        <svg class="w-12 h-12" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </template>
+    </fwb-avatar>
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>
<template>
+  <div class="vp-raw flex justify-center space-x-4">
+    <fwb-avatar>
+      <template #placeholder>
+        <svg class="w-12 h-12" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </template>
+    </fwb-avatar>
+    <fwb-avatar rounded>
+      <template #placeholder>
+        <svg class="w-12 h-12" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </template>
+    </fwb-avatar>
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>
`,1),Js=JSON.parse('{"title":"Vue Avatar - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/avatar.md","filePath":"components/avatar.md"}'),Vs={name:"components/avatar.md"},Us=Object.assign(Vs,{setup(n){return(t,e)=>(p(),o("div",null,[bs,_s,ws,Bs,s(ns),As,s(ts),Ds,s(qs),ks,s(Cs),xs,s(Fs),js,s(ps),Ts,s(vs),Ss,s(gs),Ps,s(is),zs,s(Es),$s]))}});export{Js as __pageData,Us as default}; diff --git a/docs/.vitepress/dist/assets/components_avatar.md.8db14583.lean.js b/docs/.vitepress/dist/assets/components_avatar.md.8db14583.lean.js new file mode 100644 index 0000000..d9c24ab --- /dev/null +++ b/docs/.vitepress/dist/assets/components_avatar.md.8db14583.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{u as i}from"./chunks/useMergeClasses.5cec3a4e.js";import{g as y,d as C,h as x,Y as j,$ as T,o as p,c as o,k as c,n as E,l as a,r as b,t as _,e as S,_ as P,H as s,w as u,a as w,Q as r}from"./chunks/framework.3f630664.js";const f={xs:"w-6 h-6",sm:"w-8 h-8",md:"w-10 h-10",lg:"w-20 h-20",xl:"w-36 h-36"},q={default:"rounded",rounded:"rounded-full"},z="ring-2 ring-gray-300 dark:ring-gray-500 p-1",$="absolute h-3.5 w-3.5 rounded-full border-2 border-white dark:border-gray-800",V={away:"bg-gray-400",busy:"bg-yellow-400",offline:"bg-red-400",online:"bg-green-400"},I={"top-right-rounded":"top-0 -right-0.5","top-right-default":"-top-1.5 -right-1.5","top-left-rounded":"top-0 left-0","top-left-default":"top-0 left-0 transform -translate-y-1/2 -translate-x-1/2","bottom-right-rounded":"bottom-0 -right-0.5","bottom-right-default":"bottom-0 -right-1.5 translate-y-1/2","bottom-left-rounded":"bottom-0 left-0","bottom-left-default":"-bottom-1.5 left-0 transform -translate-x-1/2 "},N="absolute w-auto h-auto text-gray-400",M="flex overflow-hidden relative justify-center items-center",R="bg-gray-100 dark:bg-gray-600",J="font-medium text-gray-600 dark:text-gray-300",U={xs:"bottom-0",sm:"bottom-0",md:"-bottom-1",lg:"-bottom-2",xl:"-bottom-4"};function W(n){const t=y(()=>i([f[n.size.value],q[n.rounded.value?"rounded":"default"],n.bordered.value?z:"",n.stacked.value?"border-2 border-white dark:border-gray-800":""])),e=y(()=>{const m=`${n.statusPosition.value}-${n.rounded.value?"rounded":"default"}`;return i([$,V[n.status.value],I[m]])}),g=y(()=>i([N,U[n.size.value]])),d=y(()=>i([M,f[n.size.value],q[n.rounded.value?"rounded":"default"],n.img.value&&n.bordered.value?"":R,n.bordered.value?" overflow-visible":""])),F=y(()=>i([J]));return{avatarClasses:t,avatarDotClasses:e,avatarPlaceholderClasses:g,avatarPlaceholderInitialsClasses:F,avatarPlaceholderWrapperClasses:d}}const H={class:"relative"},O=["alt","src"],G=c("path",{"clip-rule":"evenodd",d:"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z","fill-rule":"evenodd"},null,-1),Q=[G],Y=["data-pos"],l=C({__name:"FwbAvatar",props:{alt:{type:String,default:"Avatar"},bordered:{type:Boolean,default:!1},img:{type:String,default:""},rounded:{type:Boolean,default:!1},size:{type:String,default:"md"},stacked:{type:Boolean,default:!1},status:{type:String,default:null},statusPosition:{type:String,default:"top-right"},initials:{type:String,default:null}},setup(n){const t=x(!1);function e(){t.value=!0}const g=j(),d=y(()=>g.placeholder),F=n,{avatarClasses:m,avatarDotClasses:B,avatarPlaceholderClasses:v,avatarPlaceholderInitialsClasses:A,avatarPlaceholderWrapperClasses:D}=W(T(F));return(k,Is)=>(p(),o("div",H,[c("div",{class:E(a(D))},[n.img&&!t.value?(p(),o("img",{key:0,alt:n.alt,class:E(a(m)),src:n.img,onError:e},null,42,O)):!n.initials&&d.value?(p(),o("div",{key:1,class:E(a(v))},[b(k.$slots,"placeholder")],2)):!n.img&&!n.initials?(p(),o("svg",{key:2,class:E(a(v)),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},Q,2)):(p(),o("div",{key:3,class:E(a(A))},_(n.initials),3))],2),n.status?(p(),o("span",{key:0,class:E(a(B)),"data-pos":n.statusPosition},null,10,Y)):S("",!0)]))}}),K={},L={class:"flex -space-x-4"};function X(n,t){return p(),o("div",L,[b(n.$slots,"default")])}const h=P(K,[["render",X]]),Z=["href"],ss=C({__name:"FwbAvatarStackCounter",props:{total:{type:Number,default:1},href:{type:String,default:"#"}},setup(n){return(t,e)=>(p(),o("a",{class:"relative flex justify-center items-center w-10 h-10 text-xs font-medium text-white bg-gray-700 rounded-full border-2 border-white hover:bg-gray-600 dark:border-gray-800",href:n.href},"+"+_(n.total),9,Z))}}),as={class:"vp-raw flex justify-center space-x-4"},ns={__name:"FwbAvatarExample",setup(n){return(t,e)=>(p(),o("div",as,[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:""})]))}},ls={class:"vp-raw flex justify-center"},ps={__name:"FwbAvatarExampleAlt",setup(n){return(t,e)=>(p(),o("div",ls,[s(a(l),{alt:"Alternative text",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"})]))}},os={class:"vp-raw flex justify-center space-x-4"},ts={__name:"FwbAvatarExampleBordered",setup(n){return(t,e)=>(p(),o("div",os,[s(a(l),{bordered:"",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{bordered:"",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:""})]))}},es={class:"vp-raw flex justify-center space-x-4"},cs=c("svg",{class:"w-12 h-12",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[c("path",{d:"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z","stroke-linecap":"round","stroke-linejoin":"round"})],-1),rs=c("svg",{class:"w-12 h-12",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[c("path",{d:"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z","stroke-linecap":"round","stroke-linejoin":"round"})],-1),Es={__name:"FwbAvatarExampleIcon",setup(n){return(t,e)=>(p(),o("div",es,[s(a(l),null,{placeholder:u(()=>[cs]),_:1}),s(a(l),{rounded:""},{placeholder:u(()=>[rs]),_:1})]))}},ys={class:"vp-raw flex justify-center space-x-4"},is={__name:"FwbAvatarExampleInitials",setup(n){return(t,e)=>(p(),o("div",ys,[s(a(l),{initials:"JD"}),s(a(l),{initials:"JD",rounded:""})]))}},us={class:"vp-raw flex justify-center space-x-4"},gs={__name:"FwbAvatarExamplePlaceholder",setup(n){return(t,e)=>(p(),o("div",us,[s(a(l)),s(a(l),{rounded:""})]))}},ds={class:"vp-raw flex justify-center items-center space-x-4"},Fs={__name:"FwbAvatarExampleSize",setup(n){return(t,e)=>(p(),o("div",ds,[s(a(l),{size:"xs",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"sm",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"md",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"lg",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"xl",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"})]))}},ms={class:"vp-raw grid gap-2"},vs={__name:"FwbAvatarExampleStack",setup(n){return(t,e)=>(p(),o("div",ms,[s(a(h),null,{default:u(()=>[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-1.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-2.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-3.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-4.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"",stacked:""})]),_:1}),s(a(h),null,{default:u(()=>[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-1.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-2.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-3.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-4.jpg",rounded:"",stacked:""}),s(a(ss),{href:"#",total:99})]),_:1})]))}},fs={class:"vp-raw flex justify-center space-x-4"},qs={__name:"FwbAvatarExampleStatus",setup(n){return(t,e)=>(p(),o("div",fs,[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"busy"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"away"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"offline"})]))}},hs={class:"vp-raw flex justify-center space-x-4"},Cs={__name:"FwbAvatarExampleStatusPosition",setup(n){return(t,e)=>(p(),o("div",hs,[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"top-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"top-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"top-right",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"top-right",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"bottom-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"bottom-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"bottom-right",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"bottom-right",status:"online"})]))}},bs=c("h1",{id:"vue-avatar-flowbite",tabindex:"-1"},[w("Vue Avatar - Flowbite "),c("a",{class:"header-anchor",href:"#vue-avatar-flowbite","aria-label":'Permalink to "Vue Avatar - Flowbite"'},"​")],-1),_s=c("p",null,"Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes",-1),ws=c("h2",{id:"default-avatar",tabindex:"-1"},[w("Default avatar "),c("a",{class:"header-anchor",href:"#default-avatar","aria-label":'Permalink to "Default avatar"'},"​")],-1),Bs=c("p",null,"Use this example to create a circle and rounded avatar on an image element.",-1),As=r("",3),Ds=r("",3),ks=r("",2),xs=r("",3),js=r("",2),Ts=r("",3),Ss=r("",2),Ps=r("",2),zs=r("",3),$s=r("",1),Js=JSON.parse('{"title":"Vue Avatar - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/avatar.md","filePath":"components/avatar.md"}'),Vs={name:"components/avatar.md"},Us=Object.assign(Vs,{setup(n){return(t,e)=>(p(),o("div",null,[bs,_s,ws,Bs,s(ns),As,s(ts),Ds,s(qs),ks,s(Cs),xs,s(Fs),js,s(ps),Ts,s(vs),Ss,s(gs),Ps,s(is),zs,s(Es),$s]))}});export{Js as __pageData,Us as default}; diff --git a/docs/.vitepress/dist/assets/components_badge.md.ffb613ab.js b/docs/.vitepress/dist/assets/components_badge.md.ffb613ab.js new file mode 100644 index 0000000..a10cd79 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_badge.md.ffb613ab.js @@ -0,0 +1,169 @@ +import{t as q}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{Z as w,g as u,d as f,Y as m,o as r,b as h,w as a,r as g,n as C,l as n,I as B,c as E,H as s,a as o,k as e,Q as y}from"./chunks/framework.3f630664.js";const _="mr-2 px-2.5 py-0.5 rounded flex items-center justify-center",v="bg-blue-100 hover:bg-blue-200 text-blue-800 dark:text-blue-800 dark:hover:bg-blue-300",D="p-1 rounded-full mr-2",A={default:"text-blue-800 dark:text-blue-800",dark:"text-gray-800 dark:bg-gray-700",red:"text-red-800 dark:text-red-900",green:"text-green-800 dark:text-green-900",yellow:"text-yellow-800 dark:text-yellow-900",indigo:"text-indigo-800 dark:text-indigo-900",purple:"text-purple-800 dark:text-purple-900",pink:"text-pink-800 dark:text-pink-900"},k={default:"bg-blue-100 dark:bg-blue-200",dark:"bg-gray-100 dark:bg-gray-700",red:"bg-red-100 dark:bg-red-200",green:"bg-green-100 dark:bg-green-200",yellow:"bg-yellow-100 dark:bg-yellow-200",indigo:"bg-indigo-100 dark:bg-indigo-200",purple:"bg-purple-100 dark:bg-purple-200",pink:"bg-pink-100 dark:bg-pink-200"},x={xs:"text-xs font-semibold",sm:"text-sm font-medium"};function z(p,t){const c=w();return{badgeClasses:u(()=>q(x[p.size],p.href?"":k[p.type],p.href?"":A[p.type],p.href?v:"",t.isContentEmpty.value?D:_,c.class))}}const l=f({__name:"FwbBadge",props:{type:{default:"default"},size:{default:"xs"},href:{default:null}},setup(p){const t=p,c=m(),d=u(()=>!c.default),F=u(()=>t.href?"a":"span"),{badgeClasses:b}=z(t,{isContentEmpty:d});return(i,ss)=>(r(),h(B(F.value),{class:C(n(b)),href:i.href},{default:a(()=>[g(i.$slots,"icon"),g(i.$slots,"default")]),_:3},8,["class","href"]))}}),T={class:"vp-raw flex"},P={__name:"FwbBadgeExample",setup(p){return(t,c)=>(r(),E("div",T,[s(n(l),null,{default:a(()=>[o(" Default ")]),_:1}),s(n(l),{type:"dark"},{default:a(()=>[o(" Dark ")]),_:1}),s(n(l),{type:"red"},{default:a(()=>[o(" Red ")]),_:1}),s(n(l),{type:"green"},{default:a(()=>[o(" Green ")]),_:1}),s(n(l),{type:"yellow"},{default:a(()=>[o(" Yellow ")]),_:1}),s(n(l),{type:"indigo"},{default:a(()=>[o(" Indigo ")]),_:1}),s(n(l),{type:"purple"},{default:a(()=>[o(" Purple ")]),_:1}),s(n(l),{type:"pink"},{default:a(()=>[o(" Pink ")]),_:1})]))}},V={class:"vp-raw flex items-end"},S={__name:"FwbBadgeExampleSize",setup(p){return(t,c)=>(r(),E("div",V,[s(n(l),{size:"xs"},{default:a(()=>[o(" Default ")]),_:1}),s(n(l),{size:"xs",type:"dark"},{default:a(()=>[o(" Dark ")]),_:1}),s(n(l),{size:"xs",type:"red"},{default:a(()=>[o(" Red ")]),_:1}),s(n(l),{size:"xs",type:"green"},{default:a(()=>[o(" Green ")]),_:1}),s(n(l),{size:"sm",type:"yellow"},{default:a(()=>[o(" Yellow ")]),_:1}),s(n(l),{size:"sm",type:"indigo"},{default:a(()=>[o(" Indigo ")]),_:1}),s(n(l),{size:"sm",type:"purple"},{default:a(()=>[o(" Purple ")]),_:1}),s(n(l),{size:"sm",type:"pink"},{default:a(()=>[o(" Pink ")]),_:1})]))}},L={class:"vp-raw flex items-end"},I={__name:"FwbBadgeExampleLink",setup(p){return(t,c)=>(r(),E("div",L,[s(n(l),{href:"#"},{default:a(()=>[o(" Link ")]),_:1}),s(n(l),{href:"#",size:"sm"},{default:a(()=>[o(" Link small ")]),_:1})]))}},M={class:"vp-raw flex items-end"},$=e("svg",{"aria-hidden":"true",class:"mr-1 w-3 h-3",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"clip-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z","fill-rule":"evenodd"})],-1),R=e("svg",{"aria-hidden":"true",class:"mr-1 w-3 h-3",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"clip-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z","fill-rule":"evenodd"})],-1),N={__name:"FwbBadgeExampleIcon",setup(p){return(t,c)=>(r(),E("div",M,[s(n(l),null,{icon:a(()=>[$]),default:a(()=>[o(" Default ")]),_:1}),s(n(l),{size:"sm",type:"dark"},{icon:a(()=>[R]),default:a(()=>[o(" Dark ")]),_:1})]))}},Y={class:"vp-raw flex items-end"},G=e("svg",{"aria-hidden":"true",class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"clip-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z","fill-rule":"evenodd"})],-1),O=e("svg",{"aria-hidden":"true",class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"clip-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z","fill-rule":"evenodd"})],-1),j=e("svg",{"aria-hidden":"true",class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"clip-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z","fill-rule":"evenodd"})],-1),U={__name:"FwbBadgeExampleIconOnly",setup(p){return(t,c)=>(r(),E("div",Y,[s(n(l),null,{icon:a(()=>[G]),_:1}),s(n(l),{type:"dark"},{icon:a(()=>[O]),_:1}),s(n(l),{size:"sm",type:"green"},{icon:a(()=>[j]),_:1})]))}},H=y('

Vue Badge - Flowbite ​

Use Tailwind CSS badges as elements to show counts or labels separately or inside other components ​

TIP

Original reference: https://flowbite.com/docs/components/badge/

The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made. Alternatively, badges can also be used as standalone elements that link to a certain page by using the anchor tag instead of a span element.

Default badge ​

Prop – type

',7),J=y(`
vue
<template>
+  <fwb-badge>Default</fwb-badge>
+  <fwb-badge type="dark">Dark</fwb-badge>
+  <fwb-badge type="red">Red</fwb-badge>
+  <fwb-badge type="green">Green</fwb-badge>
+  <fwb-badge type="yellow">Yellow</fwb-badge>
+  <fwb-badge type="indigo">Indigo</fwb-badge>
+  <fwb-badge type="purple">Purple</fwb-badge>
+  <fwb-badge type="pink">Pink</fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>
<template>
+  <fwb-badge>Default</fwb-badge>
+  <fwb-badge type="dark">Dark</fwb-badge>
+  <fwb-badge type="red">Red</fwb-badge>
+  <fwb-badge type="green">Green</fwb-badge>
+  <fwb-badge type="yellow">Yellow</fwb-badge>
+  <fwb-badge type="indigo">Indigo</fwb-badge>
+  <fwb-badge type="purple">Purple</fwb-badge>
+  <fwb-badge type="pink">Pink</fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>

Large badges ​

Prop – size

`,3),Q=y(`
vue
<template>
+  <fwb-badge size="xs">Default</fwb-badge>
+  <fwb-badge size="xs" type="dark">Dark</fwb-badge>
+  <fwb-badge size="xs" type="red">Red</fwb-badge>
+  <fwb-badge size="xs" type="green">Green</fwb-badge>
+  <fwb-badge size="sm" type="yellow">Yellow</fwb-badge>
+  <fwb-badge size="sm" type="indigo">Indigo</fwb-badge>
+  <fwb-badge size="sm" type="purple">Purple</fwb-badge>
+  <fwb-badge size="sm" type="pink">Pink</fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>
<template>
+  <fwb-badge size="xs">Default</fwb-badge>
+  <fwb-badge size="xs" type="dark">Dark</fwb-badge>
+  <fwb-badge size="xs" type="red">Red</fwb-badge>
+  <fwb-badge size="xs" type="green">Green</fwb-badge>
+  <fwb-badge size="sm" type="yellow">Yellow</fwb-badge>
+  <fwb-badge size="sm" type="indigo">Indigo</fwb-badge>
+  <fwb-badge size="sm" type="purple">Purple</fwb-badge>
+  <fwb-badge size="sm" type="pink">Pink</fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>

You can also use badges as anchor elements to link to another page. Prop – href

`,3),Z=y(`
vue
<template>
+  <fwb-badge href="#">
+    Link
+  </fwb-badge>
+  <fwb-badge href="#" size="sm">
+    Link small
+  </fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>
<template>
+  <fwb-badge href="#">
+    Link
+  </fwb-badge>
+  <fwb-badge href="#" size="sm">
+    Link small
+  </fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>

Badges with icon ​

You can also use SVG icons inside the badge elements. slot icon

`,3),K=y(`
vue
<template>
+  <fwb-badge>
+    <template #icon>
+      <svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+    Default
+  </fwb-badge>
+  <fwb-badge size="sm" type="dark">
+    <template #icon>
+      <svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+    Dark
+  </fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>
<template>
+  <fwb-badge>
+    <template #icon>
+      <svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+    Default
+  </fwb-badge>
+  <fwb-badge size="sm" type="dark">
+    <template #icon>
+      <svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+    Dark
+  </fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>

Badge with icon only ​

`,2),W=y(`
vue
<template>
+  <fwb-badge>
+    <template #icon>
+      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-badge>
+  <fwb-badge type="dark">
+    <template #icon>
+      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-badge>
+  <fwb-badge size="sm" type="green">
+    <template #icon>
+      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>
<template>
+  <fwb-badge>
+    <template #icon>
+      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-badge>
+  <fwb-badge type="dark">
+    <template #icon>
+      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-badge>
+  <fwb-badge size="sm" type="green">
+    <template #icon>
+      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>
`,1),ls=JSON.parse('{"title":"Vue Badge - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/badge.md","filePath":"components/badge.md"}'),X={name:"components/badge.md"},os=Object.assign(X,{setup(p){return(t,c)=>(r(),E("div",null,[H,s(P),J,s(S),Q,s(I),Z,s(N),K,s(U),W]))}});export{ls as __pageData,os as default}; diff --git a/docs/.vitepress/dist/assets/components_badge.md.ffb613ab.lean.js b/docs/.vitepress/dist/assets/components_badge.md.ffb613ab.lean.js new file mode 100644 index 0000000..63e7e89 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_badge.md.ffb613ab.lean.js @@ -0,0 +1 @@ +import{t as q}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{Z as w,g as u,d as f,Y as m,o as r,b as h,w as a,r as g,n as C,l as n,I as B,c as E,H as s,a as o,k as e,Q as y}from"./chunks/framework.3f630664.js";const _="mr-2 px-2.5 py-0.5 rounded flex items-center justify-center",v="bg-blue-100 hover:bg-blue-200 text-blue-800 dark:text-blue-800 dark:hover:bg-blue-300",D="p-1 rounded-full mr-2",A={default:"text-blue-800 dark:text-blue-800",dark:"text-gray-800 dark:bg-gray-700",red:"text-red-800 dark:text-red-900",green:"text-green-800 dark:text-green-900",yellow:"text-yellow-800 dark:text-yellow-900",indigo:"text-indigo-800 dark:text-indigo-900",purple:"text-purple-800 dark:text-purple-900",pink:"text-pink-800 dark:text-pink-900"},k={default:"bg-blue-100 dark:bg-blue-200",dark:"bg-gray-100 dark:bg-gray-700",red:"bg-red-100 dark:bg-red-200",green:"bg-green-100 dark:bg-green-200",yellow:"bg-yellow-100 dark:bg-yellow-200",indigo:"bg-indigo-100 dark:bg-indigo-200",purple:"bg-purple-100 dark:bg-purple-200",pink:"bg-pink-100 dark:bg-pink-200"},x={xs:"text-xs font-semibold",sm:"text-sm font-medium"};function z(p,t){const c=w();return{badgeClasses:u(()=>q(x[p.size],p.href?"":k[p.type],p.href?"":A[p.type],p.href?v:"",t.isContentEmpty.value?D:_,c.class))}}const l=f({__name:"FwbBadge",props:{type:{default:"default"},size:{default:"xs"},href:{default:null}},setup(p){const t=p,c=m(),d=u(()=>!c.default),F=u(()=>t.href?"a":"span"),{badgeClasses:b}=z(t,{isContentEmpty:d});return(i,ss)=>(r(),h(B(F.value),{class:C(n(b)),href:i.href},{default:a(()=>[g(i.$slots,"icon"),g(i.$slots,"default")]),_:3},8,["class","href"]))}}),T={class:"vp-raw flex"},P={__name:"FwbBadgeExample",setup(p){return(t,c)=>(r(),E("div",T,[s(n(l),null,{default:a(()=>[o(" Default ")]),_:1}),s(n(l),{type:"dark"},{default:a(()=>[o(" Dark ")]),_:1}),s(n(l),{type:"red"},{default:a(()=>[o(" Red ")]),_:1}),s(n(l),{type:"green"},{default:a(()=>[o(" Green ")]),_:1}),s(n(l),{type:"yellow"},{default:a(()=>[o(" Yellow ")]),_:1}),s(n(l),{type:"indigo"},{default:a(()=>[o(" Indigo ")]),_:1}),s(n(l),{type:"purple"},{default:a(()=>[o(" Purple ")]),_:1}),s(n(l),{type:"pink"},{default:a(()=>[o(" Pink ")]),_:1})]))}},V={class:"vp-raw flex items-end"},S={__name:"FwbBadgeExampleSize",setup(p){return(t,c)=>(r(),E("div",V,[s(n(l),{size:"xs"},{default:a(()=>[o(" Default ")]),_:1}),s(n(l),{size:"xs",type:"dark"},{default:a(()=>[o(" Dark ")]),_:1}),s(n(l),{size:"xs",type:"red"},{default:a(()=>[o(" Red ")]),_:1}),s(n(l),{size:"xs",type:"green"},{default:a(()=>[o(" Green ")]),_:1}),s(n(l),{size:"sm",type:"yellow"},{default:a(()=>[o(" Yellow ")]),_:1}),s(n(l),{size:"sm",type:"indigo"},{default:a(()=>[o(" Indigo ")]),_:1}),s(n(l),{size:"sm",type:"purple"},{default:a(()=>[o(" Purple ")]),_:1}),s(n(l),{size:"sm",type:"pink"},{default:a(()=>[o(" Pink ")]),_:1})]))}},L={class:"vp-raw flex items-end"},I={__name:"FwbBadgeExampleLink",setup(p){return(t,c)=>(r(),E("div",L,[s(n(l),{href:"#"},{default:a(()=>[o(" Link ")]),_:1}),s(n(l),{href:"#",size:"sm"},{default:a(()=>[o(" Link small ")]),_:1})]))}},M={class:"vp-raw flex items-end"},$=e("svg",{"aria-hidden":"true",class:"mr-1 w-3 h-3",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"clip-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z","fill-rule":"evenodd"})],-1),R=e("svg",{"aria-hidden":"true",class:"mr-1 w-3 h-3",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"clip-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z","fill-rule":"evenodd"})],-1),N={__name:"FwbBadgeExampleIcon",setup(p){return(t,c)=>(r(),E("div",M,[s(n(l),null,{icon:a(()=>[$]),default:a(()=>[o(" Default ")]),_:1}),s(n(l),{size:"sm",type:"dark"},{icon:a(()=>[R]),default:a(()=>[o(" Dark ")]),_:1})]))}},Y={class:"vp-raw flex items-end"},G=e("svg",{"aria-hidden":"true",class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"clip-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z","fill-rule":"evenodd"})],-1),O=e("svg",{"aria-hidden":"true",class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"clip-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z","fill-rule":"evenodd"})],-1),j=e("svg",{"aria-hidden":"true",class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"clip-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z","fill-rule":"evenodd"})],-1),U={__name:"FwbBadgeExampleIconOnly",setup(p){return(t,c)=>(r(),E("div",Y,[s(n(l),null,{icon:a(()=>[G]),_:1}),s(n(l),{type:"dark"},{icon:a(()=>[O]),_:1}),s(n(l),{size:"sm",type:"green"},{icon:a(()=>[j]),_:1})]))}},H=y("",7),J=y("",3),Q=y("",3),Z=y("",3),K=y("",2),W=y("",1),ls=JSON.parse('{"title":"Vue Badge - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/badge.md","filePath":"components/badge.md"}'),X={name:"components/badge.md"},os=Object.assign(X,{setup(p){return(t,c)=>(r(),E("div",null,[H,s(P),J,s(S),Q,s(I),Z,s(N),K,s(U),W]))}});export{ls as __pageData,os as default}; diff --git a/docs/.vitepress/dist/assets/components_breadcrumb.md.e0d619ba.js b/docs/.vitepress/dist/assets/components_breadcrumb.md.e0d619ba.js new file mode 100644 index 0000000..3841048 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_breadcrumb.md.e0d619ba.js @@ -0,0 +1,127 @@ +import{c as b}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as u,d as h,$ as f,o as r,c as E,k as l,r as i,n as d,l as a,e as w,b as _,w as s,I as C,H as n,a as t,Q as F}from"./chunks/framework.3f630664.js";const B="inline-flex items-center space-x-1 md:space-x-3",v={default:"flex",solid:"flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700"};function A(o){const p=u(()=>b(B)),e=u(()=>b(v[o.solid.value?"solid":"defauilt"]));return{breadcrumbClasses:p,breadcrumbWrapperClasses:e}}const g=h({__name:"FwbBreadcrumb",props:{solid:{type:Boolean,default:!1}},setup(o){const p=o,{breadcrumbClasses:e,breadcrumbWrapperClasses:m}=A(f(p));return(y,q)=>(r(),E("nav",{class:d(a(m)),"aria-label":"Breadcrumb"},[l("ol",{class:d(a(e))},[i(y.$slots,"default")],2)],2))}}),D="ml-1 inline-flex items-center text-sm font-medium dark:text-gray-400",k="text-gray-700 hover:text-gray-900 dark:hover:text-white",x="text-gray-500";function I(o){return{breadcrumbItemClasses:u(()=>b(D,o.href.value?k:x))}}const $={class:"inline-flex items-center"},P={key:0,class:"w-6 h-6 text-gray-400 mr-1",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},T=l("path",{"clip-rule":"evenodd",d:"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z","fill-rule":"evenodd"},null,-1),j=[T],H={key:0,class:"w-4 h-4 mr-2",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},V=l("path",{d:"M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"},null,-1),S=[V],c=h({__name:"FwbBreadcrumbItem",props:{href:{type:String,default:null},home:{type:Boolean,default:!1}},setup(o){const p=o,e=u(()=>p.href?"a":"span"),{breadcrumbItemClasses:m}=I(f(p));return(y,q)=>(r(),E("li",$,[i(y.$slots,"arrow-icon",{},()=>[o.home?w("",!0):(r(),E("svg",P,j))]),(r(),_(C(e.value),{class:d(a(m)),href:o.href},{default:s(()=>[i(y.$slots,"home-icon",{},()=>[o.home?(r(),E("svg",H,S)):w("",!0)]),i(y.$slots,"default")]),_:3},8,["class","href"]))]))}}),M={class:"vp-raw"},N={__name:"FwbBreadcrumbExample",setup(o){return(p,e)=>(r(),E("div",M,[n(a(g),null,{default:s(()=>[n(a(c),{home:"",href:"#"},{default:s(()=>[t(" Home ")]),_:1}),n(a(c),{href:"#"},{default:s(()=>[t(" Projects ")]),_:1}),n(a(c),null,{default:s(()=>[t(" Flowbite ")]),_:1})]),_:1})]))}},z={class:"vp-raw"},R={__name:"FwbBreadcrumbExampleSolid",setup(o){return(p,e)=>(r(),E("div",z,[n(a(g),{solid:""},{default:s(()=>[n(a(c),{home:"",href:"#"},{default:s(()=>[t(" Home ")]),_:1}),n(a(c),{href:"#"},{default:s(()=>[t(" Projects ")]),_:1}),n(a(c),null,{default:s(()=>[t(" Flowbite ")]),_:1})]),_:1})]))}},L={class:"vp-raw"},W=l("svg",{class:"w-4 h-4 mr-2",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[l("path",{d:"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1),O=l("svg",{class:"w-4 h-4 text-gray-400 mr-2",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[l("path",{d:"M14 5l7 7m0 0l-7 7m7-7H3","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1),J=l("svg",{class:"w-4 h-4 text-gray-400 mr-2",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[l("path",{d:"M14 5l7 7m0 0l-7 7m7-7H3","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1),Q={__name:"FwbBreadcrumbExampleCustomIcons",setup(o){return(p,e)=>(r(),E("div",L,[n(a(g),null,{default:s(()=>[n(a(c),{home:"",href:"#"},{"home-icon":s(()=>[W]),default:s(()=>[t(" Home ")]),_:1}),n(a(c),{href:"#"},{"arrow-icon":s(()=>[O]),default:s(()=>[t(" Projects ")]),_:1}),n(a(c),null,{"arrow-icon":s(()=>[J]),default:s(()=>[t(" Flowbite ")]),_:1})]),_:1})]))}},G=l("h1",{id:"vue-breadcrumb-flowbite",tabindex:"-1"},[t("Vue Breadcrumb - Flowbite "),l("a",{class:"header-anchor",href:"#vue-breadcrumb-flowbite","aria-label":'Permalink to "Vue Breadcrumb - Flowbite"'},"​")],-1),K=l("p",null,"The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages.",-1),U=l("p",null,"Flowbite includes two styles of breadcrumb elements, one that has a transparent background and a few more that come with a background in different colors.",-1),X=l("h2",{id:"default-breadcrumb",tabindex:"-1"},[t("Default breadcrumb "),l("a",{class:"header-anchor",href:"#default-breadcrumb","aria-label":'Permalink to "Default breadcrumb"'},"​")],-1),Y=F(`
vue
<template>
+  <fwb-breadcrumb>
+    <fwb-breadcrumb-item home href="#">
+      Home
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item href="#">
+      Projects
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item>
+      Flowbite
+    </fwb-breadcrumb-item>
+  </fwb-breadcrumb>
+</template>
+
+<script setup>
+import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
+</script>
<template>
+  <fwb-breadcrumb>
+    <fwb-breadcrumb-item home href="#">
+      Home
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item href="#">
+      Projects
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item>
+      Flowbite
+    </fwb-breadcrumb-item>
+  </fwb-breadcrumb>
+</template>
+
+<script setup>
+import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
+</script>

Solid Breadcrumb ​

`,2),Z=F(`
vue
<template>
+  <fwb-breadcrumb solid>
+    <fwb-breadcrumb-item home href="#">
+      Home
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item href="#">
+      Projects
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item>
+      Flowbite
+    </fwb-breadcrumb-item>
+  </fwb-breadcrumb>
+</template>
+
+<script setup>
+import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
+</script>
<template>
+  <fwb-breadcrumb solid>
+    <fwb-breadcrumb-item home href="#">
+      Home
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item href="#">
+      Projects
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item>
+      Flowbite
+    </fwb-breadcrumb-item>
+  </fwb-breadcrumb>
+</template>
+
+<script setup>
+import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
+</script>

Custom Icons ​

`,2),ss=F(`
vue
<template>
+  <fwb-breadcrumb>
+    <fwb-breadcrumb-item home href="#">
+      <template #home-icon>
+        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+        </svg>
+      </template>
+      Home
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item href="#">
+      <template #arrow-icon>
+        <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M14 5l7 7m0 0l-7 7m7-7H3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+        </svg>
+      </template>
+      Projects
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item>
+      <template #arrow-icon>
+        <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M14 5l7 7m0 0l-7 7m7-7H3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+        </svg>
+      </template>
+      Flowbite
+    </fwb-breadcrumb-item>
+  </fwb-breadcrumb>
+</template>
+
+<script setup>
+import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
+</script>
<template>
+  <fwb-breadcrumb>
+    <fwb-breadcrumb-item home href="#">
+      <template #home-icon>
+        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+        </svg>
+      </template>
+      Home
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item href="#">
+      <template #arrow-icon>
+        <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M14 5l7 7m0 0l-7 7m7-7H3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+        </svg>
+      </template>
+      Projects
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item>
+      <template #arrow-icon>
+        <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M14 5l7 7m0 0l-7 7m7-7H3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+        </svg>
+      </template>
+      Flowbite
+    </fwb-breadcrumb-item>
+  </fwb-breadcrumb>
+</template>
+
+<script setup>
+import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
+</script>
`,1),os=JSON.parse('{"title":"Vue Breadcrumb - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/breadcrumb.md","filePath":"components/breadcrumb.md"}'),as={name:"components/breadcrumb.md"},ps=Object.assign(as,{setup(o){return(p,e)=>(r(),E("div",null,[G,K,U,X,n(N),Y,n(R),Z,n(Q),ss]))}});export{os as __pageData,ps as default}; diff --git a/docs/.vitepress/dist/assets/components_breadcrumb.md.e0d619ba.lean.js b/docs/.vitepress/dist/assets/components_breadcrumb.md.e0d619ba.lean.js new file mode 100644 index 0000000..2a3f0b4 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_breadcrumb.md.e0d619ba.lean.js @@ -0,0 +1 @@ +import{c as b}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as u,d as h,$ as f,o as r,c as E,k as l,r as i,n as d,l as a,e as w,b as _,w as s,I as C,H as n,a as t,Q as F}from"./chunks/framework.3f630664.js";const B="inline-flex items-center space-x-1 md:space-x-3",v={default:"flex",solid:"flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700"};function A(o){const p=u(()=>b(B)),e=u(()=>b(v[o.solid.value?"solid":"defauilt"]));return{breadcrumbClasses:p,breadcrumbWrapperClasses:e}}const g=h({__name:"FwbBreadcrumb",props:{solid:{type:Boolean,default:!1}},setup(o){const p=o,{breadcrumbClasses:e,breadcrumbWrapperClasses:m}=A(f(p));return(y,q)=>(r(),E("nav",{class:d(a(m)),"aria-label":"Breadcrumb"},[l("ol",{class:d(a(e))},[i(y.$slots,"default")],2)],2))}}),D="ml-1 inline-flex items-center text-sm font-medium dark:text-gray-400",k="text-gray-700 hover:text-gray-900 dark:hover:text-white",x="text-gray-500";function I(o){return{breadcrumbItemClasses:u(()=>b(D,o.href.value?k:x))}}const $={class:"inline-flex items-center"},P={key:0,class:"w-6 h-6 text-gray-400 mr-1",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},T=l("path",{"clip-rule":"evenodd",d:"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z","fill-rule":"evenodd"},null,-1),j=[T],H={key:0,class:"w-4 h-4 mr-2",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},V=l("path",{d:"M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"},null,-1),S=[V],c=h({__name:"FwbBreadcrumbItem",props:{href:{type:String,default:null},home:{type:Boolean,default:!1}},setup(o){const p=o,e=u(()=>p.href?"a":"span"),{breadcrumbItemClasses:m}=I(f(p));return(y,q)=>(r(),E("li",$,[i(y.$slots,"arrow-icon",{},()=>[o.home?w("",!0):(r(),E("svg",P,j))]),(r(),_(C(e.value),{class:d(a(m)),href:o.href},{default:s(()=>[i(y.$slots,"home-icon",{},()=>[o.home?(r(),E("svg",H,S)):w("",!0)]),i(y.$slots,"default")]),_:3},8,["class","href"]))]))}}),M={class:"vp-raw"},N={__name:"FwbBreadcrumbExample",setup(o){return(p,e)=>(r(),E("div",M,[n(a(g),null,{default:s(()=>[n(a(c),{home:"",href:"#"},{default:s(()=>[t(" Home ")]),_:1}),n(a(c),{href:"#"},{default:s(()=>[t(" Projects ")]),_:1}),n(a(c),null,{default:s(()=>[t(" Flowbite ")]),_:1})]),_:1})]))}},z={class:"vp-raw"},R={__name:"FwbBreadcrumbExampleSolid",setup(o){return(p,e)=>(r(),E("div",z,[n(a(g),{solid:""},{default:s(()=>[n(a(c),{home:"",href:"#"},{default:s(()=>[t(" Home ")]),_:1}),n(a(c),{href:"#"},{default:s(()=>[t(" Projects ")]),_:1}),n(a(c),null,{default:s(()=>[t(" Flowbite ")]),_:1})]),_:1})]))}},L={class:"vp-raw"},W=l("svg",{class:"w-4 h-4 mr-2",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[l("path",{d:"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1),O=l("svg",{class:"w-4 h-4 text-gray-400 mr-2",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[l("path",{d:"M14 5l7 7m0 0l-7 7m7-7H3","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1),J=l("svg",{class:"w-4 h-4 text-gray-400 mr-2",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[l("path",{d:"M14 5l7 7m0 0l-7 7m7-7H3","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1),Q={__name:"FwbBreadcrumbExampleCustomIcons",setup(o){return(p,e)=>(r(),E("div",L,[n(a(g),null,{default:s(()=>[n(a(c),{home:"",href:"#"},{"home-icon":s(()=>[W]),default:s(()=>[t(" Home ")]),_:1}),n(a(c),{href:"#"},{"arrow-icon":s(()=>[O]),default:s(()=>[t(" Projects ")]),_:1}),n(a(c),null,{"arrow-icon":s(()=>[J]),default:s(()=>[t(" Flowbite ")]),_:1})]),_:1})]))}},G=l("h1",{id:"vue-breadcrumb-flowbite",tabindex:"-1"},[t("Vue Breadcrumb - Flowbite "),l("a",{class:"header-anchor",href:"#vue-breadcrumb-flowbite","aria-label":'Permalink to "Vue Breadcrumb - Flowbite"'},"​")],-1),K=l("p",null,"The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages.",-1),U=l("p",null,"Flowbite includes two styles of breadcrumb elements, one that has a transparent background and a few more that come with a background in different colors.",-1),X=l("h2",{id:"default-breadcrumb",tabindex:"-1"},[t("Default breadcrumb "),l("a",{class:"header-anchor",href:"#default-breadcrumb","aria-label":'Permalink to "Default breadcrumb"'},"​")],-1),Y=F("",2),Z=F("",2),ss=F("",1),os=JSON.parse('{"title":"Vue Breadcrumb - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/breadcrumb.md","filePath":"components/breadcrumb.md"}'),as={name:"components/breadcrumb.md"},ps=Object.assign(as,{setup(o){return(p,e)=>(r(),E("div",null,[G,K,U,X,n(N),Y,n(R),Z,n(Q),ss]))}});export{os as __pageData,ps as default}; diff --git a/docs/.vitepress/dist/assets/components_button-group.md.39681d07.js b/docs/.vitepress/dist/assets/components_button-group.md.39681d07.js new file mode 100644 index 0000000..85624f1 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_button-group.md.39681d07.js @@ -0,0 +1,59 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as l}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as i,o as p,c as e,r as b,H as s,w as n,l as a,a as o,k as y,Q as r}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const g={},d={class:"btn-group inline-flex rounded-md shadow-sm",role:"group"};function f(t,c){return p(),e("div",d,[b(t.$slots,"default")])}const u=i(g,[["render",f]]),_={class:"vp-raw"},w={__name:"FwbButtonGroupExample",setup(t){return(c,E)=>(p(),e("div",_,[s(a(u),null,{default:n(()=>[s(a(l),null,{default:n(()=>[o("Button Default")]),_:1}),s(a(l),{color:"purple"},{default:n(()=>[o(" Button Purple ")]),_:1}),s(a(l),{color:"alternative"},{default:n(()=>[o(" Button Alternative ")]),_:1}),s(a(l),{color:"red"},{default:n(()=>[o(" Button Red ")]),_:1})]),_:1})]))}},F={class:"vp-raw"},h=y("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[y("path",{"fill-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","clip-rule":"evenodd"})],-1),B={__name:"FwbButtonGroupExampleIcon",setup(t){return(c,E)=>(p(),e("div",F,[s(a(u),null,{default:n(()=>[s(a(l),{outline:""},{default:n(()=>[o(" Button 1 ")]),_:1}),s(a(l),{outline:""},{default:n(()=>[o(" Button 2 ")]),_:1}),s(a(l),{outline:""},{default:n(()=>[o(" Button 3 ")]),_:1}),s(a(l),{outline:""},{suffix:n(()=>[h]),default:n(()=>[o(" Button 4 ")]),_:1})]),_:1})]))}},m=r('

Vue Button Group - Flowbite ​

Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line ​

TIP

Original reference: https://flowbite.com/docs/components/button-group/

The button group component from Flowbite can be used to stack together multiple buttons and links inside a single element.

Basic example ​

',6),v=r(`
vue
<template>
+  <fwb-button-group>
+    <fwb-button>Button Default</fwb-button>
+    <fwb-button color="purple">Button Purple</fwb-button>
+    <fwb-button color="alternative">Button Alternative</fwb-button>
+    <fwb-button color="red">Button Red</fwb-button>
+  </fwb-button-group>
+</template>
+
+<script setup>
+import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button-group>
+    <fwb-button>Button Default</fwb-button>
+    <fwb-button color="purple">Button Purple</fwb-button>
+    <fwb-button color="alternative">Button Alternative</fwb-button>
+    <fwb-button color="red">Button Red</fwb-button>
+  </fwb-button-group>
+</template>
+
+<script setup>
+import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
+</script>

Buttons with icons ​

`,2),A=r(`
vue
<template>
+  <fwb-button-group>
+    <fwb-button outline>Button 1</fwb-button>
+    <fwb-button outline>Button 2</fwb-button>
+    <fwb-button outline>Button 3</fwb-button>
+    <fwb-button outline>
+      Button 4
+      <template #suffix>
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+        </svg>
+      </template>
+    </fwb-button>
+  </fwb-button-group>
+</template>
+
+<script setup>
+import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button-group>
+    <fwb-button outline>Button 1</fwb-button>
+    <fwb-button outline>Button 2</fwb-button>
+    <fwb-button outline>Button 3</fwb-button>
+    <fwb-button outline>
+      Button 4
+      <template #suffix>
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+        </svg>
+      </template>
+    </fwb-button>
+  </fwb-button-group>
+</template>
+
+<script setup>
+import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
+</script>
`,1),P=JSON.parse('{"title":"Vue Button Group - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/button-group.md","filePath":"components/button-group.md"}'),q={name:"components/button-group.md"},S=Object.assign(q,{setup(t){return(c,E)=>(p(),e("div",null,[m,s(w),v,s(B),A]))}});export{P as __pageData,S as default}; diff --git a/docs/.vitepress/dist/assets/components_button-group.md.39681d07.lean.js b/docs/.vitepress/dist/assets/components_button-group.md.39681d07.lean.js new file mode 100644 index 0000000..bd2160f --- /dev/null +++ b/docs/.vitepress/dist/assets/components_button-group.md.39681d07.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as l}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as i,o as p,c as e,r as b,H as s,w as n,l as a,a as o,k as y,Q as r}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const g={},d={class:"btn-group inline-flex rounded-md shadow-sm",role:"group"};function f(t,c){return p(),e("div",d,[b(t.$slots,"default")])}const u=i(g,[["render",f]]),_={class:"vp-raw"},w={__name:"FwbButtonGroupExample",setup(t){return(c,E)=>(p(),e("div",_,[s(a(u),null,{default:n(()=>[s(a(l),null,{default:n(()=>[o("Button Default")]),_:1}),s(a(l),{color:"purple"},{default:n(()=>[o(" Button Purple ")]),_:1}),s(a(l),{color:"alternative"},{default:n(()=>[o(" Button Alternative ")]),_:1}),s(a(l),{color:"red"},{default:n(()=>[o(" Button Red ")]),_:1})]),_:1})]))}},F={class:"vp-raw"},h=y("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[y("path",{"fill-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","clip-rule":"evenodd"})],-1),B={__name:"FwbButtonGroupExampleIcon",setup(t){return(c,E)=>(p(),e("div",F,[s(a(u),null,{default:n(()=>[s(a(l),{outline:""},{default:n(()=>[o(" Button 1 ")]),_:1}),s(a(l),{outline:""},{default:n(()=>[o(" Button 2 ")]),_:1}),s(a(l),{outline:""},{default:n(()=>[o(" Button 3 ")]),_:1}),s(a(l),{outline:""},{suffix:n(()=>[h]),default:n(()=>[o(" Button 4 ")]),_:1})]),_:1})]))}},m=r("",6),v=r("",2),A=r("",1),P=JSON.parse('{"title":"Vue Button Group - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/button-group.md","filePath":"components/button-group.md"}'),q={name:"components/button-group.md"},S=Object.assign(q,{setup(t){return(c,E)=>(p(),e("div",null,[m,s(w),v,s(B),A]))}});export{P as __pageData,S as default}; diff --git a/docs/.vitepress/dist/assets/components_button.md.39f535da.js b/docs/.vitepress/dist/assets/components_button.md.39f535da.js new file mode 100644 index 0000000..76076f7 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_button.md.39f535da.js @@ -0,0 +1,447 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as l}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{o as e,c,H as s,w as n,a as o,l as a,d,h as F,k as t,Q as r}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const g={class:"vp-raw flex flex-wrap gap-2"},b={__name:"FwbButtonExampleColor",setup(E){return(p,y)=>(e(),c("div",g,[s(a(l),{color:"default"},{default:n(()=>[o(" Default ")]),_:1}),s(a(l),{color:"alternative"},{default:n(()=>[o(" Alternative ")]),_:1}),s(a(l),{color:"dark"},{default:n(()=>[o(" Dark ")]),_:1}),s(a(l),{color:"light"},{default:n(()=>[o(" Light ")]),_:1}),s(a(l),{color:"green"},{default:n(()=>[o(" Green ")]),_:1}),s(a(l),{color:"red"},{default:n(()=>[o(" Red ")]),_:1}),s(a(l),{color:"yellow"},{default:n(()=>[o(" Yellow ")]),_:1}),s(a(l),{color:"purple"},{default:n(()=>[o(" Purple ")]),_:1}),s(a(l),{color:"pink"},{default:n(()=>[o(" Pink ")]),_:1})]))}},w={class:"vp-raw flex flex-wrap gap-2"},q={__name:"FwbButtonExampleDisabled",setup(E){return(p,y)=>(e(),c("div",w,[s(a(l),{color:"default",disabled:""},{default:n(()=>[o(" Default ")]),_:1}),s(a(l),{color:"default",outline:"",disabled:""},{default:n(()=>[o(" Default outline ")]),_:1}),s(a(l),{gradient:"red",disabled:""},{default:n(()=>[o(" Red gradient ")]),_:1}),s(a(l),{gradient:"red-yellow",disabled:""},{default:n(()=>[o(" Red to yellow gradient ")]),_:1}),s(a(l),{gradient:"red-yellow",outline:"",disabled:""},{default:n(()=>[o(" Red to yellow outline ")]),_:1})]))}},f={class:"vp-raw flex flex-wrap gap-2"},C={__name:"FwbButtonExampleGradientDuotone",setup(E){return(p,y)=>(e(),c("div",f,[s(a(l),{gradient:"purple-blue"},{default:n(()=>[o(" Purple to blue ")]),_:1}),s(a(l),{gradient:"cyan-blue"},{default:n(()=>[o(" Cyan to blue ")]),_:1}),s(a(l),{gradient:"green-blue"},{default:n(()=>[o(" Green to blue ")]),_:1}),s(a(l),{gradient:"purple-pink"},{default:n(()=>[o(" Purple to pink ")]),_:1}),s(a(l),{gradient:"pink-orange"},{default:n(()=>[o(" Pink to orange ")]),_:1}),s(a(l),{gradient:"teal-lime"},{default:n(()=>[o(" Teal to lime ")]),_:1}),s(a(l),{gradient:"red-yellow"},{default:n(()=>[o(" Red to yellow ")]),_:1})]))}},B={class:"vp-raw flex flex-wrap gap-2"},h={__name:"FwbButtonExampleGradientMonochrome",setup(E){return(p,y)=>(e(),c("div",B,[s(a(l),{gradient:"blue"},{default:n(()=>[o(" Blue ")]),_:1}),s(a(l),{gradient:"cyan"},{default:n(()=>[o(" Cyan ")]),_:1}),s(a(l),{gradient:"green"},{default:n(()=>[o(" Green ")]),_:1}),s(a(l),{gradient:"lime"},{default:n(()=>[o(" Lime ")]),_:1}),s(a(l),{gradient:"pink"},{default:n(()=>[o(" Pink ")]),_:1}),s(a(l),{gradient:"purple"},{default:n(()=>[o(" Purple ")]),_:1}),s(a(l),{gradient:"red"},{default:n(()=>[o(" Red ")]),_:1}),s(a(l),{gradient:"teal"},{default:n(()=>[o(" Teal ")]),_:1})]))}},_={class:"vp-raw flex flex-wrap gap-2"},m={__name:"FwbButtonExampleLink",setup(E){return(p,y)=>(e(),c("div",_,[s(a(l),{href:"https://google.com",target:"_blank"},{default:n(()=>[o(" Google.com ")]),_:1})]))}},v={class:"vp-raw flex flex-wrap items-center gap-2"},A=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"clip-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),D=d({__name:"FwbButtonExampleLoading",setup(E){const p=F(!1);return(y,u)=>(e(),c("div",v,[s(a(l),{disabled:p.value,loading:p.value,gradient:"purple-blue",outline:"",size:"xs",onClick:u[0]||(u[0]=i=>p.value=!p.value)},{default:n(()=>[o(" Click me ")]),_:1},8,["disabled","loading"]),s(a(l),{loading:p.value,gradient:"red-yellow",size:"sm",onClick:u[1]||(u[1]=i=>p.value=!p.value)},{default:n(()=>[o(" Click me ")]),_:1},8,["loading"]),s(a(l),{loading:p.value,color:"default","loading-position":"suffix",outline:"",onClick:u[2]||(u[2]=i=>p.value=!p.value)},{suffix:n(()=>[A]),default:n(()=>[o(" Click me ")]),_:1},8,["loading"]),s(a(l),{loading:p.value,gradient:"green-blue",size:"lg",onClick:u[3]||(u[3]=i=>p.value=!p.value)},{default:n(()=>[o(" Click me ")]),_:1},8,["loading"]),s(a(l),{loading:p.value,gradient:"pink",size:"xl",onClick:u[4]||(u[4]=i=>p.value=!p.value)},{default:n(()=>[o(" Click me ")]),_:1},8,["loading"])]))}}),k={class:"vp-raw flex flex-wrap gap-2"},x={__name:"FwbButtonExampleOutline",setup(E){return(p,y)=>(e(),c("div",k,[s(a(l),{color:"default",outline:""},{default:n(()=>[o(" Default ")]),_:1}),s(a(l),{color:"dark",outline:""},{default:n(()=>[o(" Dark ")]),_:1}),s(a(l),{color:"green",outline:""},{default:n(()=>[o(" Green ")]),_:1}),s(a(l),{color:"red",outline:""},{default:n(()=>[o(" Red ")]),_:1}),s(a(l),{color:"yellow",outline:""},{default:n(()=>[o(" Yellow ")]),_:1}),s(a(l),{color:"purple",outline:""},{default:n(()=>[o(" Purple ")]),_:1})]))}},P={class:"vp-raw flex flex-wrap gap-2"},T={__name:"FwbButtonExampleOutlineGradient",setup(E){return(p,y)=>(e(),c("div",P,[s(a(l),{gradient:"purple-blue",outline:""},{default:n(()=>[o(" Purple to blue ")]),_:1}),s(a(l),{gradient:"cyan-blue",outline:""},{default:n(()=>[o(" Cyan to blue ")]),_:1}),s(a(l),{gradient:"green-blue",outline:""},{default:n(()=>[o(" Green to blue ")]),_:1}),s(a(l),{gradient:"purple-pink",outline:""},{default:n(()=>[o(" Purple to pink ")]),_:1}),s(a(l),{gradient:"pink-orange",outline:""},{default:n(()=>[o(" Pink to orange ")]),_:1}),s(a(l),{gradient:"teal-lime",outline:""},{default:n(()=>[o(" Teal to lime ")]),_:1}),s(a(l),{gradient:"red-yellow",outline:""},{default:n(()=>[o(" Red to yellow ")]),_:1})]))}},S={class:"vp-raw flex flex-wrap gap-2"},z={__name:"FwbButtonExamplePill",setup(E){return(p,y)=>(e(),c("div",S,[s(a(l),{color:"default",pill:""},{default:n(()=>[o(" Default ")]),_:1}),s(a(l),{color:"alternative",pill:""},{default:n(()=>[o(" Alternative ")]),_:1}),s(a(l),{color:"dark",pill:""},{default:n(()=>[o(" Dark ")]),_:1}),s(a(l),{color:"light",pill:""},{default:n(()=>[o(" Light ")]),_:1}),s(a(l),{color:"green",pill:""},{default:n(()=>[o(" Green ")]),_:1}),s(a(l),{color:"red",pill:""},{default:n(()=>[o(" Red ")]),_:1}),s(a(l),{color:"yellow",pill:""},{default:n(()=>[o(" Yellow ")]),_:1}),s(a(l),{color:"purple",pill:""},{default:n(()=>[o(" Purple ")]),_:1})]))}},L={class:"vp-raw flex flex-wrap gap-2"},R={__name:"FwbButtonExampleShadow",setup(E){return(p,y)=>(e(),c("div",L,[s(a(l),{gradient:"blue",shadow:""},{default:n(()=>[o(" Blue with blue ")]),_:1}),s(a(l),{gradient:"cyan",shadow:""},{default:n(()=>[o(" Cyan with cyan ")]),_:1}),s(a(l),{gradient:"green",shadow:""},{default:n(()=>[o(" Green with green ")]),_:1}),s(a(l),{gradient:"lime",shadow:""},{default:n(()=>[o(" Lime with lime ")]),_:1}),s(a(l),{gradient:"pink",shadow:""},{default:n(()=>[o(" Pink with pink ")]),_:1}),s(a(l),{gradient:"purple",shadow:""},{default:n(()=>[o(" Purple with purple ")]),_:1}),s(a(l),{gradient:"red",shadow:""},{default:n(()=>[o(" Red with red ")]),_:1}),s(a(l),{gradient:"teal",shadow:""},{default:n(()=>[o(" Teal with teal ")]),_:1}),s(a(l),{gradient:"blue",shadow:"red"},{default:n(()=>[o(" Blue with red ")]),_:1}),s(a(l),{gradient:"cyan",shadow:"teal"},{default:n(()=>[o(" Cyan with teal ")]),_:1}),s(a(l),{gradient:"teal",shadow:"purple"},{default:n(()=>[o(" Teal with purple ")]),_:1})]))}},H={class:"vp-raw flex flex-wrap gap-2 items-center"},$={__name:"FwbButtonExampleSize",setup(E){return(p,y)=>(e(),c("div",H,[s(a(l),{size:"xs"},{default:n(()=>[o(" Extra Small - xs ")]),_:1}),s(a(l),{size:"sm"},{default:n(()=>[o(" Small - sm ")]),_:1}),s(a(l),{size:"md"},{default:n(()=>[o(" Medium - md ")]),_:1}),s(a(l),{size:"lg"},{default:n(()=>[o(" Large - lg ")]),_:1}),s(a(l),{size:"xl"},{default:n(()=>[o(" Extra Large - xl ")]),_:1})]))}},M={class:"vp-raw flex flex-wrap gap-2"},V=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"clip-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),I=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"clip-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),G=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"clip-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),N={__name:"FwbButtonExampleSlot",setup(E){return(p,y)=>(e(),c("div",M,[s(a(l),{gradient:"purple-blue",square:""},{default:n(()=>[V]),_:1}),s(a(l),{color:"default",pill:"",square:""},{default:n(()=>[I]),_:1}),s(a(l),{gradient:"green-blue",square:""},{default:n(()=>[o(" Close something ")]),_:1}),s(a(l),{color:"default",outline:"",pill:"",square:""},{suffix:n(()=>[G]),default:n(()=>[o(" Open something ")]),_:1})]))}},Y={class:"vp-raw"},O=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{d:"M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"})],-1),Q={__name:"FwbButtonExampleSlotPrefix",setup(E){return(p,y)=>(e(),c("div",Y,[s(a(l),null,{prefix:n(()=>[O]),default:n(()=>[o(" Buy ")]),_:1})]))}},U={class:"vp-raw"},j=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"clip-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),J={__name:"FwbButtonExampleSlotSuffix",setup(E){return(p,y)=>(e(),c("div",U,[s(a(l),null,{suffix:n(()=>[j]),default:n(()=>[o(" Choose plan ")]),_:1})]))}},K={class:"vp-raw flex flex-wrap gap-2"},W=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"clip-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),X=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"clip-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),Z=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"clip-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),ss=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"fill-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","clip-rule":"evenodd"})],-1),ns={__name:"FwbButtonExampleSquare",setup(E){return(p,y)=>(e(),c("div",K,[s(a(l),{gradient:"red-yellow",square:""},{default:n(()=>[W]),_:1}),s(a(l),{color:"default",pill:"",square:""},{default:n(()=>[X]),_:1}),s(a(l),{color:"dark",outline:"",square:""},{default:n(()=>[Z]),_:1}),s(a(l),{color:"yellow",outline:"",pill:"",square:""},{default:n(()=>[ss]),_:1})]))}},ls=r('

Vue Button - Flowbite ​

TIP

Original reference: https://flowbite.com/docs/components/buttons/

The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages.

Flowbite provides a large variety of styles and sizes for the button component including outlined buttons, multiple colors, sizes, buttons with icons, and more.

Prop - color ​

',7),as=r(`
vue
<template>
+  <fwb-button color="default">Default</fwb-button>
+  <fwb-button color="alternative">Alternative</fwb-button>
+  <fwb-button color="dark">Dark</fwb-button>
+  <fwb-button color="light">Light</fwb-button>
+  <fwb-button color="green">Green</fwb-button>
+  <fwb-button color="red">Red</fwb-button>
+  <fwb-button color="yellow">Yellow</fwb-button>
+  <fwb-button color="purple">Purple</fwb-button>
+  <fwb-button color="pink">Pink</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button color="default">Default</fwb-button>
+  <fwb-button color="alternative">Alternative</fwb-button>
+  <fwb-button color="dark">Dark</fwb-button>
+  <fwb-button color="light">Light</fwb-button>
+  <fwb-button color="green">Green</fwb-button>
+  <fwb-button color="red">Red</fwb-button>
+  <fwb-button color="yellow">Yellow</fwb-button>
+  <fwb-button color="purple">Purple</fwb-button>
+  <fwb-button color="pink">Pink</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - size ​

`,2),os=r(`
vue
<template>
+  <fwb-button size="xs">Extra Small - xs</fwb-button>
+  <fwb-button size="sm">Small - sm</fwb-button>
+  <fwb-button size="md">Medium - md</fwb-button>
+  <fwb-button size="lg">Large - lg</fwb-button>
+  <fwb-button size="xl">Extra Large - xl</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button size="xs">Extra Small - xs</fwb-button>
+  <fwb-button size="sm">Small - sm</fwb-button>
+  <fwb-button size="md">Medium - md</fwb-button>
+  <fwb-button size="lg">Large - lg</fwb-button>
+  <fwb-button size="xl">Extra Large - xl</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - pill ​

`,2),ps=r(`
vue
<template>
+  <fwb-button color="default" pill>Default</fwb-button>
+  <fwb-button color="alternative" pill>Alternative</fwb-button>
+  <fwb-button color="dark" pill>Dark</fwb-button>
+  <fwb-button color="light" pill>Light</fwb-button>
+  <fwb-button color="green" pill>Green</fwb-button>
+  <fwb-button color="red" pill>Red</fwb-button>
+  <fwb-button color="yellow" pill>Yellow</fwb-button>
+  <fwb-button color="purple" pill>Purple</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button color="default" pill>Default</fwb-button>
+  <fwb-button color="alternative" pill>Alternative</fwb-button>
+  <fwb-button color="dark" pill>Dark</fwb-button>
+  <fwb-button color="light" pill>Light</fwb-button>
+  <fwb-button color="green" pill>Green</fwb-button>
+  <fwb-button color="red" pill>Red</fwb-button>
+  <fwb-button color="yellow" pill>Yellow</fwb-button>
+  <fwb-button color="purple" pill>Purple</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - gradient (monochrome) ​

`,2),ts=r(`
vue
<template>
+  <fwb-button gradient="blue">Blue</fwb-button>
+  <fwb-button gradient="cyan">Cyan</fwb-button>
+  <fwb-button gradient="green">Green</fwb-button>
+  <fwb-button gradient="lime">Lime</fwb-button>
+  <fwb-button gradient="pink">Pink</fwb-button>
+  <fwb-button gradient="purple">Purple</fwb-button>
+  <fwb-button gradient="red">Red</fwb-button>
+  <fwb-button gradient="teal">Teal</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button gradient="blue">Blue</fwb-button>
+  <fwb-button gradient="cyan">Cyan</fwb-button>
+  <fwb-button gradient="green">Green</fwb-button>
+  <fwb-button gradient="lime">Lime</fwb-button>
+  <fwb-button gradient="pink">Pink</fwb-button>
+  <fwb-button gradient="purple">Purple</fwb-button>
+  <fwb-button gradient="red">Red</fwb-button>
+  <fwb-button gradient="teal">Teal</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - gradient (duotone) ​

`,2),es=r(`
vue
<template>
+  <fwb-button gradient="purple-blue">Purple to blue</fwb-button>
+  <fwb-button gradient="cyan-blue">Cyan to blue</fwb-button>
+  <fwb-button gradient="green-blue">Green to blue</fwb-button>
+  <fwb-button gradient="purple-pink">Purple to pink</fwb-button>
+  <fwb-button gradient="pink-orange">Pink to orange</fwb-button>
+  <fwb-button gradient="teal-lime">Teal to lime</fwb-button>
+  <fwb-button gradient="red-yellow">Red to yellow</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button gradient="purple-blue">Purple to blue</fwb-button>
+  <fwb-button gradient="cyan-blue">Cyan to blue</fwb-button>
+  <fwb-button gradient="green-blue">Green to blue</fwb-button>
+  <fwb-button gradient="purple-pink">Purple to pink</fwb-button>
+  <fwb-button gradient="pink-orange">Pink to orange</fwb-button>
+  <fwb-button gradient="teal-lime">Teal to lime</fwb-button>
+  <fwb-button gradient="red-yellow">Red to yellow</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - outline ​

`,2),cs=r(`
vue
<template>
+  <fwb-button color="default" outline>Default</fwb-button>
+  <fwb-button color="dark" outline>Dark</fwb-button>
+  <fwb-button color="green" outline>Green</fwb-button>
+  <fwb-button color="red" outline>Red</fwb-button>
+  <fwb-button color="yellow" outline>Yellow</fwb-button>
+  <fwb-button color="purple" outline>Purple</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button color="default" outline>Default</fwb-button>
+  <fwb-button color="dark" outline>Dark</fwb-button>
+  <fwb-button color="green" outline>Green</fwb-button>
+  <fwb-button color="red" outline>Red</fwb-button>
+  <fwb-button color="yellow" outline>Yellow</fwb-button>
+  <fwb-button color="purple" outline>Purple</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - outline (gradient) ​

`,2),rs=r(`
vue
<template>
+  <fwb-button gradient="purple-blue" outline>Purple to blue</fwb-button>
+  <fwb-button gradient="cyan-blue" outline>Cyan to blue</fwb-button>
+  <fwb-button gradient="green-blue" outline>Green to blue</fwb-button>
+  <fwb-button gradient="purple-pink" outline>Purple to pink</fwb-button>
+  <fwb-button gradient="pink-orange" outline>Pink to orange</fwb-button>
+  <fwb-button gradient="teal-lime" outline>Teal to lime</fwb-button>
+  <fwb-button gradient="red-yellow" outline>Red to yellow</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button gradient="purple-blue" outline>Purple to blue</fwb-button>
+  <fwb-button gradient="cyan-blue" outline>Cyan to blue</fwb-button>
+  <fwb-button gradient="green-blue" outline>Green to blue</fwb-button>
+  <fwb-button gradient="purple-pink" outline>Purple to pink</fwb-button>
+  <fwb-button gradient="pink-orange" outline>Pink to orange</fwb-button>
+  <fwb-button gradient="teal-lime" outline>Teal to lime</fwb-button>
+  <fwb-button gradient="red-yellow" outline>Red to yellow</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - shadow ​

`,2),Es=r(`
vue
<template>
+  <fwb-button gradient="blue" shadow>Blue with blue</fwb-button>
+  <fwb-button gradient="cyan" shadow>Cyan with cyan</fwb-button>
+  <fwb-button gradient="green" shadow>Green with green</fwb-button>
+  <fwb-button gradient="lime" shadow>Lime with lime</fwb-button>
+  <fwb-button gradient="pink" shadow>Pink with pink</fwb-button>
+  <fwb-button gradient="purple" shadow>Purple with purple</fwb-button>
+  <fwb-button gradient="red" shadow>Red with red</fwb-button>
+  <fwb-button gradient="teal" shadow>Teal with teal</fwb-button>
+  <fwb-button gradient="blue" shadow="red">Blue with red</fwb-button>
+  <fwb-button gradient="cyan" shadow="teal">Cyan with teal</fwb-button>
+  <fwb-button gradient="teal" shadow="purple">Teal with purple</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button gradient="blue" shadow>Blue with blue</fwb-button>
+  <fwb-button gradient="cyan" shadow>Cyan with cyan</fwb-button>
+  <fwb-button gradient="green" shadow>Green with green</fwb-button>
+  <fwb-button gradient="lime" shadow>Lime with lime</fwb-button>
+  <fwb-button gradient="pink" shadow>Pink with pink</fwb-button>
+  <fwb-button gradient="purple" shadow>Purple with purple</fwb-button>
+  <fwb-button gradient="red" shadow>Red with red</fwb-button>
+  <fwb-button gradient="teal" shadow>Teal with teal</fwb-button>
+  <fwb-button gradient="blue" shadow="red">Blue with red</fwb-button>
+  <fwb-button gradient="cyan" shadow="teal">Cyan with teal</fwb-button>
+  <fwb-button gradient="teal" shadow="purple">Teal with purple</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - square ​

`,2),ys=r(`
vue
<template>
+  <fwb-button gradient="red-yellow" square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="default" pill square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="dark" outline square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="yellow" outline pill square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+    </svg>
+  </fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button gradient="red-yellow" square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="default" pill square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="dark" outline square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="yellow" outline pill square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+    </svg>
+  </fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - loading ​

`,2),us=r(`
vue
<template>
+  <fwb-button :disabled="loading" :loading="loading" gradient="purple-blue" outline size="xs" @click="loading = !loading">
+    Click me
+  </fwb-button>
+  <fwb-button :loading="loading" gradient="red-yellow" size="sm" @click="loading = !loading">
+    Click me
+  </fwb-button>
+  <fwb-button :loading="loading" color="default" loading-position="suffix" outline @click="loading = !loading">
+    Click me
+    <template #suffix>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-button>
+  <fwb-button :loading="loading" gradient="green-blue" size="lg" @click="loading = !loading">
+    Click me
+  </fwb-button>
+  <fwb-button :loading="loading" gradient="pink" size="xl" @click="loading = !loading">
+    Click me
+  </fwb-button>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbButton } from 'flowbite-vue'
+
+const loading = ref(false)
+</script>
<template>
+  <fwb-button :disabled="loading" :loading="loading" gradient="purple-blue" outline size="xs" @click="loading = !loading">
+    Click me
+  </fwb-button>
+  <fwb-button :loading="loading" gradient="red-yellow" size="sm" @click="loading = !loading">
+    Click me
+  </fwb-button>
+  <fwb-button :loading="loading" color="default" loading-position="suffix" outline @click="loading = !loading">
+    Click me
+    <template #suffix>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-button>
+  <fwb-button :loading="loading" gradient="green-blue" size="lg" @click="loading = !loading">
+    Click me
+  </fwb-button>
+  <fwb-button :loading="loading" gradient="pink" size="xl" @click="loading = !loading">
+    Click me
+  </fwb-button>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbButton } from 'flowbite-vue'
+
+const loading = ref(false)
+</script>

Prop - disabled ​

`,2),is=r(`
vue
<template>
+  <fwb-button color="default" disabled>Default</fwb-button>
+  <fwb-button color="default" outline disabled>Default outline</fwb-button>
+  <fwb-button gradient="red" disabled>Red gradient</fwb-button>
+  <fwb-button gradient="red-yellow" disabled>Red to yellow gradient</fwb-button>
+  <fwb-button gradient="red-yellow" outline disabled>Red to yellow outline</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button color="default" disabled>Default</fwb-button>
+  <fwb-button color="default" outline disabled>Default outline</fwb-button>
+  <fwb-button gradient="red" disabled>Red gradient</fwb-button>
+  <fwb-button gradient="red-yellow" disabled>Red to yellow gradient</fwb-button>
+  <fwb-button gradient="red-yellow" outline disabled>Red to yellow outline</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - href ​

You can add a link to a Button component. Additionally you can add tag prop to change button component to router-link

`,3),ds=r(`
vue
<template>
+  <fwb-button href="https://google.com" target="_blank">Google.com</fwb-button>
+  <fwb-button href="/pages/getting-started" tag="router-link">Quickstart</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button href="https://google.com" target="_blank">Google.com</fwb-button>
+  <fwb-button href="/pages/getting-started" tag="router-link">Quickstart</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Slot - default ​

`,2),Fs=r(`
vue
<template>
+  <fwb-button gradient="purple-blue" square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="default" pill square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button gradient="green-blue" square>
+    Close something
+  </fwb-button>
+  <fwb-button color="default" outline pill square>
+    Open something
+    <template #suffix>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button gradient="purple-blue" square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="default" pill square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button gradient="green-blue" square>
+    Close something
+  </fwb-button>
+  <fwb-button color="default" outline pill square>
+    Open something
+    <template #suffix>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Slot - prefix ​

`,2),gs=r(`
vue
<template>
+  <fwb-button>
+    <template #prefix>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
+      </svg>
+    </template>
+    Buy
+  </fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button>
+    <template #prefix>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
+      </svg>
+    </template>
+    Buy
+  </fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Slot - suffix ​

`,2),bs=r(`
vue
<template>
+  <fwb-button>
+    Choose plan
+    <template #suffix>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button>
+    Choose plan
+    <template #suffix>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Button API ​

Props ​

NameTypeValuesDefault
colorStringdefault, alternative, dark, light, green, red, yellow, purple, pink, bluedefault
disabledBooleanfalse
gradientStringmonochrome:
blue, green, cyan, teal, lime, red, pink, purple
duotone:
purple-blue, cyan-blue, green-blue, purple-pink, pink-orange, teal-lime, red-yellow		null
hrefString''
loadingBooleanfalse
loading-positionStringprefix, suffixprefix
outlineBooleanfalse
pillBooleanfalse
shadowStringblue, green, cyan, teal, lime, red, pink, purplenull
sizeStringxs, sm, md, lg, xlmd
squareBooleanfalse
tagStringa
`,5),_s=JSON.parse('{"title":"Vue Button - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/button.md","filePath":"components/button.md"}'),ws={name:"components/button.md"},ms=Object.assign(ws,{setup(E){return(p,y)=>(e(),c("div",null,[ls,s(b),as,s($),os,s(z),ps,s(h),ts,s(C),es,s(x),cs,s(T),rs,s(R),Es,s(ns),ys,s(D),us,s(q),is,s(m),ds,s(N),Fs,s(Q),gs,s(J),bs]))}});export{_s as __pageData,ms as default}; diff --git a/docs/.vitepress/dist/assets/components_button.md.39f535da.lean.js b/docs/.vitepress/dist/assets/components_button.md.39f535da.lean.js new file mode 100644 index 0000000..8ed8868 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_button.md.39f535da.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as l}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{o as e,c,H as s,w as n,a as o,l as a,d,h as F,k as t,Q as r}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const g={class:"vp-raw flex flex-wrap gap-2"},b={__name:"FwbButtonExampleColor",setup(E){return(p,y)=>(e(),c("div",g,[s(a(l),{color:"default"},{default:n(()=>[o(" Default ")]),_:1}),s(a(l),{color:"alternative"},{default:n(()=>[o(" Alternative ")]),_:1}),s(a(l),{color:"dark"},{default:n(()=>[o(" Dark ")]),_:1}),s(a(l),{color:"light"},{default:n(()=>[o(" Light ")]),_:1}),s(a(l),{color:"green"},{default:n(()=>[o(" Green ")]),_:1}),s(a(l),{color:"red"},{default:n(()=>[o(" Red ")]),_:1}),s(a(l),{color:"yellow"},{default:n(()=>[o(" Yellow ")]),_:1}),s(a(l),{color:"purple"},{default:n(()=>[o(" Purple ")]),_:1}),s(a(l),{color:"pink"},{default:n(()=>[o(" Pink ")]),_:1})]))}},w={class:"vp-raw flex flex-wrap gap-2"},q={__name:"FwbButtonExampleDisabled",setup(E){return(p,y)=>(e(),c("div",w,[s(a(l),{color:"default",disabled:""},{default:n(()=>[o(" Default ")]),_:1}),s(a(l),{color:"default",outline:"",disabled:""},{default:n(()=>[o(" Default outline ")]),_:1}),s(a(l),{gradient:"red",disabled:""},{default:n(()=>[o(" Red gradient ")]),_:1}),s(a(l),{gradient:"red-yellow",disabled:""},{default:n(()=>[o(" Red to yellow gradient ")]),_:1}),s(a(l),{gradient:"red-yellow",outline:"",disabled:""},{default:n(()=>[o(" Red to yellow outline ")]),_:1})]))}},f={class:"vp-raw flex flex-wrap gap-2"},C={__name:"FwbButtonExampleGradientDuotone",setup(E){return(p,y)=>(e(),c("div",f,[s(a(l),{gradient:"purple-blue"},{default:n(()=>[o(" Purple to blue ")]),_:1}),s(a(l),{gradient:"cyan-blue"},{default:n(()=>[o(" Cyan to blue ")]),_:1}),s(a(l),{gradient:"green-blue"},{default:n(()=>[o(" Green to blue ")]),_:1}),s(a(l),{gradient:"purple-pink"},{default:n(()=>[o(" Purple to pink ")]),_:1}),s(a(l),{gradient:"pink-orange"},{default:n(()=>[o(" Pink to orange ")]),_:1}),s(a(l),{gradient:"teal-lime"},{default:n(()=>[o(" Teal to lime ")]),_:1}),s(a(l),{gradient:"red-yellow"},{default:n(()=>[o(" Red to yellow ")]),_:1})]))}},B={class:"vp-raw flex flex-wrap gap-2"},h={__name:"FwbButtonExampleGradientMonochrome",setup(E){return(p,y)=>(e(),c("div",B,[s(a(l),{gradient:"blue"},{default:n(()=>[o(" Blue ")]),_:1}),s(a(l),{gradient:"cyan"},{default:n(()=>[o(" Cyan ")]),_:1}),s(a(l),{gradient:"green"},{default:n(()=>[o(" Green ")]),_:1}),s(a(l),{gradient:"lime"},{default:n(()=>[o(" Lime ")]),_:1}),s(a(l),{gradient:"pink"},{default:n(()=>[o(" Pink ")]),_:1}),s(a(l),{gradient:"purple"},{default:n(()=>[o(" Purple ")]),_:1}),s(a(l),{gradient:"red"},{default:n(()=>[o(" Red ")]),_:1}),s(a(l),{gradient:"teal"},{default:n(()=>[o(" Teal ")]),_:1})]))}},_={class:"vp-raw flex flex-wrap gap-2"},m={__name:"FwbButtonExampleLink",setup(E){return(p,y)=>(e(),c("div",_,[s(a(l),{href:"https://google.com",target:"_blank"},{default:n(()=>[o(" Google.com ")]),_:1})]))}},v={class:"vp-raw flex flex-wrap items-center gap-2"},A=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"clip-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),D=d({__name:"FwbButtonExampleLoading",setup(E){const p=F(!1);return(y,u)=>(e(),c("div",v,[s(a(l),{disabled:p.value,loading:p.value,gradient:"purple-blue",outline:"",size:"xs",onClick:u[0]||(u[0]=i=>p.value=!p.value)},{default:n(()=>[o(" Click me ")]),_:1},8,["disabled","loading"]),s(a(l),{loading:p.value,gradient:"red-yellow",size:"sm",onClick:u[1]||(u[1]=i=>p.value=!p.value)},{default:n(()=>[o(" Click me ")]),_:1},8,["loading"]),s(a(l),{loading:p.value,color:"default","loading-position":"suffix",outline:"",onClick:u[2]||(u[2]=i=>p.value=!p.value)},{suffix:n(()=>[A]),default:n(()=>[o(" Click me ")]),_:1},8,["loading"]),s(a(l),{loading:p.value,gradient:"green-blue",size:"lg",onClick:u[3]||(u[3]=i=>p.value=!p.value)},{default:n(()=>[o(" Click me ")]),_:1},8,["loading"]),s(a(l),{loading:p.value,gradient:"pink",size:"xl",onClick:u[4]||(u[4]=i=>p.value=!p.value)},{default:n(()=>[o(" Click me ")]),_:1},8,["loading"])]))}}),k={class:"vp-raw flex flex-wrap gap-2"},x={__name:"FwbButtonExampleOutline",setup(E){return(p,y)=>(e(),c("div",k,[s(a(l),{color:"default",outline:""},{default:n(()=>[o(" Default ")]),_:1}),s(a(l),{color:"dark",outline:""},{default:n(()=>[o(" Dark ")]),_:1}),s(a(l),{color:"green",outline:""},{default:n(()=>[o(" Green ")]),_:1}),s(a(l),{color:"red",outline:""},{default:n(()=>[o(" Red ")]),_:1}),s(a(l),{color:"yellow",outline:""},{default:n(()=>[o(" Yellow ")]),_:1}),s(a(l),{color:"purple",outline:""},{default:n(()=>[o(" Purple ")]),_:1})]))}},P={class:"vp-raw flex flex-wrap gap-2"},T={__name:"FwbButtonExampleOutlineGradient",setup(E){return(p,y)=>(e(),c("div",P,[s(a(l),{gradient:"purple-blue",outline:""},{default:n(()=>[o(" Purple to blue ")]),_:1}),s(a(l),{gradient:"cyan-blue",outline:""},{default:n(()=>[o(" Cyan to blue ")]),_:1}),s(a(l),{gradient:"green-blue",outline:""},{default:n(()=>[o(" Green to blue ")]),_:1}),s(a(l),{gradient:"purple-pink",outline:""},{default:n(()=>[o(" Purple to pink ")]),_:1}),s(a(l),{gradient:"pink-orange",outline:""},{default:n(()=>[o(" Pink to orange ")]),_:1}),s(a(l),{gradient:"teal-lime",outline:""},{default:n(()=>[o(" Teal to lime ")]),_:1}),s(a(l),{gradient:"red-yellow",outline:""},{default:n(()=>[o(" Red to yellow ")]),_:1})]))}},S={class:"vp-raw flex flex-wrap gap-2"},z={__name:"FwbButtonExamplePill",setup(E){return(p,y)=>(e(),c("div",S,[s(a(l),{color:"default",pill:""},{default:n(()=>[o(" Default ")]),_:1}),s(a(l),{color:"alternative",pill:""},{default:n(()=>[o(" Alternative ")]),_:1}),s(a(l),{color:"dark",pill:""},{default:n(()=>[o(" Dark ")]),_:1}),s(a(l),{color:"light",pill:""},{default:n(()=>[o(" Light ")]),_:1}),s(a(l),{color:"green",pill:""},{default:n(()=>[o(" Green ")]),_:1}),s(a(l),{color:"red",pill:""},{default:n(()=>[o(" Red ")]),_:1}),s(a(l),{color:"yellow",pill:""},{default:n(()=>[o(" Yellow ")]),_:1}),s(a(l),{color:"purple",pill:""},{default:n(()=>[o(" Purple ")]),_:1})]))}},L={class:"vp-raw flex flex-wrap gap-2"},R={__name:"FwbButtonExampleShadow",setup(E){return(p,y)=>(e(),c("div",L,[s(a(l),{gradient:"blue",shadow:""},{default:n(()=>[o(" Blue with blue ")]),_:1}),s(a(l),{gradient:"cyan",shadow:""},{default:n(()=>[o(" Cyan with cyan ")]),_:1}),s(a(l),{gradient:"green",shadow:""},{default:n(()=>[o(" Green with green ")]),_:1}),s(a(l),{gradient:"lime",shadow:""},{default:n(()=>[o(" Lime with lime ")]),_:1}),s(a(l),{gradient:"pink",shadow:""},{default:n(()=>[o(" Pink with pink ")]),_:1}),s(a(l),{gradient:"purple",shadow:""},{default:n(()=>[o(" Purple with purple ")]),_:1}),s(a(l),{gradient:"red",shadow:""},{default:n(()=>[o(" Red with red ")]),_:1}),s(a(l),{gradient:"teal",shadow:""},{default:n(()=>[o(" Teal with teal ")]),_:1}),s(a(l),{gradient:"blue",shadow:"red"},{default:n(()=>[o(" Blue with red ")]),_:1}),s(a(l),{gradient:"cyan",shadow:"teal"},{default:n(()=>[o(" Cyan with teal ")]),_:1}),s(a(l),{gradient:"teal",shadow:"purple"},{default:n(()=>[o(" Teal with purple ")]),_:1})]))}},H={class:"vp-raw flex flex-wrap gap-2 items-center"},$={__name:"FwbButtonExampleSize",setup(E){return(p,y)=>(e(),c("div",H,[s(a(l),{size:"xs"},{default:n(()=>[o(" Extra Small - xs ")]),_:1}),s(a(l),{size:"sm"},{default:n(()=>[o(" Small - sm ")]),_:1}),s(a(l),{size:"md"},{default:n(()=>[o(" Medium - md ")]),_:1}),s(a(l),{size:"lg"},{default:n(()=>[o(" Large - lg ")]),_:1}),s(a(l),{size:"xl"},{default:n(()=>[o(" Extra Large - xl ")]),_:1})]))}},M={class:"vp-raw flex flex-wrap gap-2"},V=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"clip-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),I=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"clip-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),G=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"clip-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),N={__name:"FwbButtonExampleSlot",setup(E){return(p,y)=>(e(),c("div",M,[s(a(l),{gradient:"purple-blue",square:""},{default:n(()=>[V]),_:1}),s(a(l),{color:"default",pill:"",square:""},{default:n(()=>[I]),_:1}),s(a(l),{gradient:"green-blue",square:""},{default:n(()=>[o(" Close something ")]),_:1}),s(a(l),{color:"default",outline:"",pill:"",square:""},{suffix:n(()=>[G]),default:n(()=>[o(" Open something ")]),_:1})]))}},Y={class:"vp-raw"},O=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{d:"M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"})],-1),Q={__name:"FwbButtonExampleSlotPrefix",setup(E){return(p,y)=>(e(),c("div",Y,[s(a(l),null,{prefix:n(()=>[O]),default:n(()=>[o(" Buy ")]),_:1})]))}},U={class:"vp-raw"},j=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"clip-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),J={__name:"FwbButtonExampleSlotSuffix",setup(E){return(p,y)=>(e(),c("div",U,[s(a(l),null,{suffix:n(()=>[j]),default:n(()=>[o(" Choose plan ")]),_:1})]))}},K={class:"vp-raw flex flex-wrap gap-2"},W=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"clip-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),X=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"clip-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),Z=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"clip-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),ss=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"fill-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","clip-rule":"evenodd"})],-1),ns={__name:"FwbButtonExampleSquare",setup(E){return(p,y)=>(e(),c("div",K,[s(a(l),{gradient:"red-yellow",square:""},{default:n(()=>[W]),_:1}),s(a(l),{color:"default",pill:"",square:""},{default:n(()=>[X]),_:1}),s(a(l),{color:"dark",outline:"",square:""},{default:n(()=>[Z]),_:1}),s(a(l),{color:"yellow",outline:"",pill:"",square:""},{default:n(()=>[ss]),_:1})]))}},ls=r("",7),as=r("",2),os=r("",2),ps=r("",2),ts=r("",2),es=r("",2),cs=r("",2),rs=r("",2),Es=r("",2),ys=r("",2),us=r("",2),is=r("",3),ds=r("",2),Fs=r("",2),gs=r("",2),bs=r("",5),_s=JSON.parse('{"title":"Vue Button - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/button.md","filePath":"components/button.md"}'),ws={name:"components/button.md"},ms=Object.assign(ws,{setup(E){return(p,y)=>(e(),c("div",null,[ls,s(b),as,s($),os,s(z),ps,s(h),ts,s(C),es,s(x),cs,s(T),rs,s(R),Es,s(ns),ys,s(D),us,s(q),is,s(m),ds,s(N),Fs,s(Q),gs,s(J),bs]))}});export{_s as __pageData,ms as default}; diff --git a/docs/.vitepress/dist/assets/components_card.md.8594cbd9.js b/docs/.vitepress/dist/assets/components_card.md.8594cbd9.js new file mode 100644 index 0000000..9bfdfc6 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_card.md.8594cbd9.js @@ -0,0 +1,107 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as E,d as h,$ as m,o as p,b as f,w as r,c as e,n as i,l as t,e as b,k as a,r as F,I as _,H as o,Q as c}from"./chunks/framework.3f630664.js";function v(s){const n=E(()=>s.variant.value==="default"?"block max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700":s.variant.value==="image"?"max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700":s.variant.value==="horizontal"?"flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700":""),l=E(()=>s.variant.value==="horizontal"?"object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg":"");return{cardClasses:n,horizontalImageClasses:l}}const w=["alt","src"],y=h({__name:"FwbCard",props:{href:{type:String,default:""},imgAlt:{type:String,default:""},imgSrc:{type:String,default:""},variant:{type:String,default:"default"}},setup(s){const n=s,{cardClasses:l,horizontalImageClasses:g}=v(m(n)),d=E(()=>n.href?"a":"div");return(u,j)=>(p(),f(_(d.value),{class:i(t(l)),href:s.href},{default:r(()=>[s.imgSrc?(p(),e("img",{key:0,alt:s.imgAlt,class:i([t(g),"rounded-t-lg"]),src:s.imgSrc},null,10,w)):b("",!0),a("div",null,[F(u.$slots,"default")])]),_:3},8,["class","href"]))}}),q={class:"vp-raw inline-flex align-center gap-2 flex-wrap"},x=a("div",{class:"p-5"},[a("h5",{class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"}," Noteworthy technology acquisitions 2021 "),a("p",{class:"font-normal text-gray-700 dark:text-gray-400"}," Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order. ")],-1),C={__name:"FwbCardExample",setup(s){return(n,l)=>(p(),e("div",q,[o(t(y),{href:"#"},{default:r(()=>[x]),_:1})]))}},k={class:"vp-raw inline-flex align-center gap-2 flex-wrap"},A=a("div",{class:"p-5"},[a("h5",{class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"}," Noteworthy technology acquisitions 2021 "),a("p",{class:"font-normal text-gray-700 dark:text-gray-400"}," Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order. ")],-1),D={__name:"FwbCardExampleImage",setup(s){return(n,l)=>(p(),e("div",k,[o(t(y),{"img-alt":"Desk","img-src":"https://flowbite.com/docs/images/blog/image-1.jpg",variant:"image"},{default:r(()=>[A]),_:1})]))}},B={class:"vp-raw inline-flex align-center gap-2 flex-wrap"},T=a("div",{class:"p-5"},[a("h5",{class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"}," Noteworthy technology acquisitions 2021 "),a("p",{class:"font-normal text-gray-700 dark:text-gray-400"}," Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order. ")],-1),S={__name:"FwbCardExampleHorizontal",setup(s){return(n,l)=>(p(),e("div",B,[o(t(y),{"img-alt":"Desk","img-src":"https://flowbite.com/docs/images/blog/image-4.jpg",variant:"horizontal"},{default:r(()=>[T]),_:1})]))}},P=c('

Vue Card - Flowbite ​

Get started with a large variety of Tailwind CSS card examples for your web project ​

TIP

Original reference: https://flowbite.com/docs/components/card/

Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more.

Prop - default ​

',6),N=c(`
vue
<template>
+    <fwb-card href="#">
+      <div class="p-5">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Noteworthy technology acquisitions 2021
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+        </p>
+      </div>
+    </fwb-card>
+</template>
+
+<script setup>
+import { FwbCard } from 'flowbite-vue'
+</script>
<template>
+    <fwb-card href="#">
+      <div class="p-5">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Noteworthy technology acquisitions 2021
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+        </p>
+      </div>
+    </fwb-card>
+</template>
+
+<script setup>
+import { FwbCard } from 'flowbite-vue'
+</script>

Prop - image ​

`,2),V=c(`
vue
<template>
+    <fwb-card
+      img-alt="Desk"
+      img-src="https://flowbite.com/docs/images/blog/image-1.jpg"
+      variant="image"
+    >
+      <div class="p-5">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Noteworthy technology acquisitions 2021
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+        </p>
+      </div>
+    </fwb-card>
+</template>
+
+<script setup>
+import { FwbCard } from 'flowbite-vue'
+</script>
<template>
+    <fwb-card
+      img-alt="Desk"
+      img-src="https://flowbite.com/docs/images/blog/image-1.jpg"
+      variant="image"
+    >
+      <div class="p-5">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Noteworthy technology acquisitions 2021
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+        </p>
+      </div>
+    </fwb-card>
+</template>
+
+<script setup>
+import { FwbCard } from 'flowbite-vue'
+</script>

Prop - horizontal ​

`,2),z=c(`
vue
<template>
+    <fwb-card
+      img-alt="Desk"
+      img-src="https://flowbite.com/docs/images/blog/image-4.jpg"
+      variant="horizontal"
+    >
+      <div class="p-5">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Noteworthy technology acquisitions 2021
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+        </p>
+      </div>
+    </fwb-card>
+</template>
+
+<script setup>
+import { FwbCard } from 'flowbite-vue'
+</script>
<template>
+    <fwb-card
+      img-alt="Desk"
+      img-src="https://flowbite.com/docs/images/blog/image-4.jpg"
+      variant="horizontal"
+    >
+      <div class="p-5">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Noteworthy technology acquisitions 2021
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+        </p>
+      </div>
+    </fwb-card>
+</template>
+
+<script setup>
+import { FwbCard } from 'flowbite-vue'
+</script>
`,1),R=JSON.parse('{"title":"Vue Card - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/card.md","filePath":"components/card.md"}'),I={name:"components/card.md"},O=Object.assign(I,{setup(s){return(n,l)=>(p(),e("div",null,[P,o(C),N,o(D),V,o(S),z]))}});export{R as __pageData,O as default}; diff --git a/docs/.vitepress/dist/assets/components_card.md.8594cbd9.lean.js b/docs/.vitepress/dist/assets/components_card.md.8594cbd9.lean.js new file mode 100644 index 0000000..2939d53 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_card.md.8594cbd9.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as E,d as h,$ as m,o as p,b as f,w as r,c as e,n as i,l as t,e as b,k as a,r as F,I as _,H as o,Q as c}from"./chunks/framework.3f630664.js";function v(s){const n=E(()=>s.variant.value==="default"?"block max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700":s.variant.value==="image"?"max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700":s.variant.value==="horizontal"?"flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700":""),l=E(()=>s.variant.value==="horizontal"?"object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg":"");return{cardClasses:n,horizontalImageClasses:l}}const w=["alt","src"],y=h({__name:"FwbCard",props:{href:{type:String,default:""},imgAlt:{type:String,default:""},imgSrc:{type:String,default:""},variant:{type:String,default:"default"}},setup(s){const n=s,{cardClasses:l,horizontalImageClasses:g}=v(m(n)),d=E(()=>n.href?"a":"div");return(u,j)=>(p(),f(_(d.value),{class:i(t(l)),href:s.href},{default:r(()=>[s.imgSrc?(p(),e("img",{key:0,alt:s.imgAlt,class:i([t(g),"rounded-t-lg"]),src:s.imgSrc},null,10,w)):b("",!0),a("div",null,[F(u.$slots,"default")])]),_:3},8,["class","href"]))}}),q={class:"vp-raw inline-flex align-center gap-2 flex-wrap"},x=a("div",{class:"p-5"},[a("h5",{class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"}," Noteworthy technology acquisitions 2021 "),a("p",{class:"font-normal text-gray-700 dark:text-gray-400"}," Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order. ")],-1),C={__name:"FwbCardExample",setup(s){return(n,l)=>(p(),e("div",q,[o(t(y),{href:"#"},{default:r(()=>[x]),_:1})]))}},k={class:"vp-raw inline-flex align-center gap-2 flex-wrap"},A=a("div",{class:"p-5"},[a("h5",{class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"}," Noteworthy technology acquisitions 2021 "),a("p",{class:"font-normal text-gray-700 dark:text-gray-400"}," Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order. ")],-1),D={__name:"FwbCardExampleImage",setup(s){return(n,l)=>(p(),e("div",k,[o(t(y),{"img-alt":"Desk","img-src":"https://flowbite.com/docs/images/blog/image-1.jpg",variant:"image"},{default:r(()=>[A]),_:1})]))}},B={class:"vp-raw inline-flex align-center gap-2 flex-wrap"},T=a("div",{class:"p-5"},[a("h5",{class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"}," Noteworthy technology acquisitions 2021 "),a("p",{class:"font-normal text-gray-700 dark:text-gray-400"}," Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order. ")],-1),S={__name:"FwbCardExampleHorizontal",setup(s){return(n,l)=>(p(),e("div",B,[o(t(y),{"img-alt":"Desk","img-src":"https://flowbite.com/docs/images/blog/image-4.jpg",variant:"horizontal"},{default:r(()=>[T]),_:1})]))}},P=c("",6),N=c("",2),V=c("",2),z=c("",1),R=JSON.parse('{"title":"Vue Card - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/card.md","filePath":"components/card.md"}'),I={name:"components/card.md"},O=Object.assign(I,{setup(s){return(n,l)=>(p(),e("div",null,[P,o(C),N,o(D),V,o(S),z]))}});export{R as __pageData,O as default}; diff --git a/docs/.vitepress/dist/assets/components_carousel.md.8090985f.js b/docs/.vitepress/dist/assets/components_carousel.md.8090985f.js new file mode 100644 index 0000000..ab61a92 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_carousel.md.8090985f.js @@ -0,0 +1,121 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as k,h as d,j as D,o as l,c as o,k as s,F as g,D as C,n as b,X as m,e as f,H as e,l as r,a as w,Q as E}from"./chunks/framework.3f630664.js";const I={class:"relative"},P={class:"overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96"},x=["alt","src"],q={key:0,class:"flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2"},T=["aria-label","onClick"],S=s("span",{class:"inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"},[s("svg",{class:"w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[s("path",{d:"M15 19l-7-7 7-7","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})]),s("span",{class:"hidden"},"Previous")],-1),V=[S],$=s("span",{class:"inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"},[s("svg",{class:"w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[s("path",{d:"M9 5l7 7-7 7","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})]),s("span",{class:"hidden"},"Next")],-1),N=[$],i=k({__name:"FwbCarousel",props:{pictures:{type:Array,default(){return[]}},noIndicators:{type:Boolean,default:!1},noControls:{type:Boolean,default:!1},slide:{type:Boolean,default:!1},slideInterval:{type:Number,default:3e3},animation:{type:Boolean,default:!1}},setup(p){const a=p,n=d(0),t=d(""),F=d(),h=()=>{F.value=setInterval(function(){v()},a.slideInterval)},y=()=>{clearInterval(F.value),h()},B=_=>{n.value=_,y()},v=()=>{n.value!==a.pictures.length-1?n.value++:n.value=0,t.value="right",y()},A=()=>{n.value!==0?n.value--:n.value=a.pictures.length-1,t.value="left",y()};return D(()=>{a.slide&&h()}),(_,ls)=>(l(),o("div",I,[s("div",P,[(l(!0),o(g,null,C(p.pictures,(u,c)=>(l(),o("div",{key:c,class:b([c===n.value?"z-30":"z-0","absolute inset-0 -translate-y-0"])},[s("img",{alt:u.alt,src:u.src,class:"block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"},null,8,x)],2))),128))]),p.noIndicators?f("",!0):(l(),o("div",q,[(l(!0),o(g,null,C(p.pictures,(u,c)=>(l(),o("button",{key:c,"aria-label":"Slide "+c,class:b([c===n.value?"bg-white":"bg-white/50","w-3 h-3 rounded-full bg-white"]),"aria-current":"false",type:"button",onClick:m(os=>B(c),["prevent"])},null,10,T))),128))])),p.noControls?f("",!0):(l(),o(g,{key:1},[s("button",{class:"flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none","data-carousel-prev":"",type:"button",onClick:m(A,["prevent"])},V),s("button",{class:"flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none","data-carousel-next":"",type:"button",onClick:m(v,["prevent"])},N)],64))]))}}),j={class:"vp-raw"},z={__name:"FwbCarouselExample",setup(p){const a=[{alt:"Picture 1",src:"https://flowbite.com/docs/images/carousel/carousel-1.svg"},{alt:"Picture 2",src:"https://flowbite.com/docs/images/carousel/carousel-2.svg"},{alt:"Picture 3",src:"https://flowbite.com/docs/images/carousel/carousel-3.svg"}];return(n,t)=>(l(),o("div",j,[e(r(i),{pictures:a})]))}},R={class:"vp-raw"},M={__name:"FwbCarouselExampleSlide",setup(p){const a=[{alt:"Picture 1",src:"https://flowbite.com/docs/images/carousel/carousel-1.svg"},{alt:"Picture 2",src:"https://flowbite.com/docs/images/carousel/carousel-2.svg"},{alt:"Picture 3",src:"https://flowbite.com/docs/images/carousel/carousel-3.svg"}];return(n,t)=>(l(),o("div",R,[e(r(i),{pictures:a,slide:""})]))}},O={class:"vp-raw"},W={__name:"FwbCarouselExampleSlideInterval",setup(p){const a=[{alt:"Picture 1",src:"https://flowbite.com/docs/images/carousel/carousel-1.svg"},{alt:"Picture 2",src:"https://flowbite.com/docs/images/carousel/carousel-2.svg"},{alt:"Picture 3",src:"https://flowbite.com/docs/images/carousel/carousel-3.svg"}];return(n,t)=>(l(),o("div",O,[e(r(i),{pictures:a,"slide-interval":1e3,slide:""})]))}},H={class:"vp-raw"},J={__name:"FwbCarouselExampleWithoutControls",setup(p){const a=[{alt:"Picture 1",src:"https://flowbite.com/docs/images/carousel/carousel-1.svg"},{alt:"Picture 2",src:"https://flowbite.com/docs/images/carousel/carousel-2.svg"},{alt:"Picture 3",src:"https://flowbite.com/docs/images/carousel/carousel-3.svg"}];return(n,t)=>(l(),o("div",H,[e(r(i),{"no-controls":"",pictures:a})]))}},L={class:"vp-raw"},Q={__name:"FwbCarouselExampleWithoutIndicators",setup(p){const a=[{alt:"Picture 1",src:"https://flowbite.com/docs/images/carousel/carousel-1.svg"},{alt:"Picture 2",src:"https://flowbite.com/docs/images/carousel/carousel-2.svg"},{alt:"Picture 3",src:"https://flowbite.com/docs/images/carousel/carousel-3.svg"}];return(n,t)=>(l(),o("div",L,[e(r(i),{"no-indicators":"",pictures:a})]))}},U=s("h1",{id:"vue-carousel-flowbite",tabindex:"-1"},[w("Vue Carousel - Flowbite "),s("a",{class:"header-anchor",href:"#vue-carousel-flowbite","aria-label":'Permalink to "Vue Carousel - Flowbite"'},"​")],-1),X=s("p",null,"Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options",-1),G=s("h2",{id:"basic-carousel",tabindex:"-1"},[w("Basic Carousel "),s("a",{class:"header-anchor",href:"#basic-carousel","aria-label":'Permalink to "Basic Carousel"'},"​")],-1),K=E(`
vue
<template>
+  <fwb-carousel :pictures="pictures" />
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
<template>
+  <fwb-carousel :pictures="pictures" />
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
`,2),Y=E(`
vue
<template>
+  <fwb-carousel no-controls :pictures="pictures" />
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
<template>
+  <fwb-carousel no-controls :pictures="pictures" />
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
`,2),Z=E(`
vue
<template>
+  <fwb-carousel no-indicators :pictures="pictures" />
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
<template>
+  <fwb-carousel no-indicators :pictures="pictures" />
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
`,2),ss=E(`
vue
<template>
+  <fwb-carousel :pictures="pictures" slide />
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
<template>
+  <fwb-carousel :pictures="pictures" slide />
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
`,2),as=E(`
vue
<template>
+  <fwb-carousel :pictures="pictures" slide :slide-interval="1000"/>
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
<template>
+  <fwb-carousel :pictures="pictures" slide :slide-interval="1000"/>
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>

Props ​

NameTypeValuesDefault
animationBooleantrue, falsefalse
noControlsBooleantrue, falsefalse
noIndicatorsBooleantrue, falsefalse
picturesArray[{source: '', alt: ''}, ...][]
slideBooleantrue, falsefalse
slideIntervalNumber3000
`,4),ts=JSON.parse('{"title":"Vue Carousel - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/carousel.md","filePath":"components/carousel.md"}'),ns={name:"components/carousel.md"},cs=Object.assign(ns,{setup(p){return(a,n)=>(l(),o("div",null,[U,X,G,e(z),K,e(J),Y,e(Q),Z,e(M),ss,e(W),as]))}});export{ts as __pageData,cs as default}; diff --git a/docs/.vitepress/dist/assets/components_carousel.md.8090985f.lean.js b/docs/.vitepress/dist/assets/components_carousel.md.8090985f.lean.js new file mode 100644 index 0000000..3e4eb31 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_carousel.md.8090985f.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as k,h as d,j as D,o as l,c as o,k as s,F as g,D as C,n as b,X as m,e as f,H as e,l as r,a as w,Q as E}from"./chunks/framework.3f630664.js";const I={class:"relative"},P={class:"overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96"},x=["alt","src"],q={key:0,class:"flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2"},T=["aria-label","onClick"],S=s("span",{class:"inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"},[s("svg",{class:"w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[s("path",{d:"M15 19l-7-7 7-7","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})]),s("span",{class:"hidden"},"Previous")],-1),V=[S],$=s("span",{class:"inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"},[s("svg",{class:"w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[s("path",{d:"M9 5l7 7-7 7","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})]),s("span",{class:"hidden"},"Next")],-1),N=[$],i=k({__name:"FwbCarousel",props:{pictures:{type:Array,default(){return[]}},noIndicators:{type:Boolean,default:!1},noControls:{type:Boolean,default:!1},slide:{type:Boolean,default:!1},slideInterval:{type:Number,default:3e3},animation:{type:Boolean,default:!1}},setup(p){const a=p,n=d(0),t=d(""),F=d(),h=()=>{F.value=setInterval(function(){v()},a.slideInterval)},y=()=>{clearInterval(F.value),h()},B=_=>{n.value=_,y()},v=()=>{n.value!==a.pictures.length-1?n.value++:n.value=0,t.value="right",y()},A=()=>{n.value!==0?n.value--:n.value=a.pictures.length-1,t.value="left",y()};return D(()=>{a.slide&&h()}),(_,ls)=>(l(),o("div",I,[s("div",P,[(l(!0),o(g,null,C(p.pictures,(u,c)=>(l(),o("div",{key:c,class:b([c===n.value?"z-30":"z-0","absolute inset-0 -translate-y-0"])},[s("img",{alt:u.alt,src:u.src,class:"block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"},null,8,x)],2))),128))]),p.noIndicators?f("",!0):(l(),o("div",q,[(l(!0),o(g,null,C(p.pictures,(u,c)=>(l(),o("button",{key:c,"aria-label":"Slide "+c,class:b([c===n.value?"bg-white":"bg-white/50","w-3 h-3 rounded-full bg-white"]),"aria-current":"false",type:"button",onClick:m(os=>B(c),["prevent"])},null,10,T))),128))])),p.noControls?f("",!0):(l(),o(g,{key:1},[s("button",{class:"flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none","data-carousel-prev":"",type:"button",onClick:m(A,["prevent"])},V),s("button",{class:"flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none","data-carousel-next":"",type:"button",onClick:m(v,["prevent"])},N)],64))]))}}),j={class:"vp-raw"},z={__name:"FwbCarouselExample",setup(p){const a=[{alt:"Picture 1",src:"https://flowbite.com/docs/images/carousel/carousel-1.svg"},{alt:"Picture 2",src:"https://flowbite.com/docs/images/carousel/carousel-2.svg"},{alt:"Picture 3",src:"https://flowbite.com/docs/images/carousel/carousel-3.svg"}];return(n,t)=>(l(),o("div",j,[e(r(i),{pictures:a})]))}},R={class:"vp-raw"},M={__name:"FwbCarouselExampleSlide",setup(p){const a=[{alt:"Picture 1",src:"https://flowbite.com/docs/images/carousel/carousel-1.svg"},{alt:"Picture 2",src:"https://flowbite.com/docs/images/carousel/carousel-2.svg"},{alt:"Picture 3",src:"https://flowbite.com/docs/images/carousel/carousel-3.svg"}];return(n,t)=>(l(),o("div",R,[e(r(i),{pictures:a,slide:""})]))}},O={class:"vp-raw"},W={__name:"FwbCarouselExampleSlideInterval",setup(p){const a=[{alt:"Picture 1",src:"https://flowbite.com/docs/images/carousel/carousel-1.svg"},{alt:"Picture 2",src:"https://flowbite.com/docs/images/carousel/carousel-2.svg"},{alt:"Picture 3",src:"https://flowbite.com/docs/images/carousel/carousel-3.svg"}];return(n,t)=>(l(),o("div",O,[e(r(i),{pictures:a,"slide-interval":1e3,slide:""})]))}},H={class:"vp-raw"},J={__name:"FwbCarouselExampleWithoutControls",setup(p){const a=[{alt:"Picture 1",src:"https://flowbite.com/docs/images/carousel/carousel-1.svg"},{alt:"Picture 2",src:"https://flowbite.com/docs/images/carousel/carousel-2.svg"},{alt:"Picture 3",src:"https://flowbite.com/docs/images/carousel/carousel-3.svg"}];return(n,t)=>(l(),o("div",H,[e(r(i),{"no-controls":"",pictures:a})]))}},L={class:"vp-raw"},Q={__name:"FwbCarouselExampleWithoutIndicators",setup(p){const a=[{alt:"Picture 1",src:"https://flowbite.com/docs/images/carousel/carousel-1.svg"},{alt:"Picture 2",src:"https://flowbite.com/docs/images/carousel/carousel-2.svg"},{alt:"Picture 3",src:"https://flowbite.com/docs/images/carousel/carousel-3.svg"}];return(n,t)=>(l(),o("div",L,[e(r(i),{"no-indicators":"",pictures:a})]))}},U=s("h1",{id:"vue-carousel-flowbite",tabindex:"-1"},[w("Vue Carousel - Flowbite "),s("a",{class:"header-anchor",href:"#vue-carousel-flowbite","aria-label":'Permalink to "Vue Carousel - Flowbite"'},"​")],-1),X=s("p",null,"Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options",-1),G=s("h2",{id:"basic-carousel",tabindex:"-1"},[w("Basic Carousel "),s("a",{class:"header-anchor",href:"#basic-carousel","aria-label":'Permalink to "Basic Carousel"'},"​")],-1),K=E("",2),Y=E("",2),Z=E("",2),ss=E("",2),as=E("",4),ts=JSON.parse('{"title":"Vue Carousel - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/carousel.md","filePath":"components/carousel.md"}'),ns={name:"components/carousel.md"},cs=Object.assign(ns,{setup(p){return(a,n)=>(l(),o("div",null,[U,X,G,e(z),K,e(J),Y,e(Q),Z,e(M),ss,e(W),as]))}});export{ts as __pageData,cs as default}; diff --git a/docs/.vitepress/dist/assets/components_checkbox.md.ed60323a.js b/docs/.vitepress/dist/assets/components_checkbox.md.ed60323a.js new file mode 100644 index 0000000..ec83a5b --- /dev/null +++ b/docs/.vitepress/dist/assets/components_checkbox.md.ed60323a.js @@ -0,0 +1,81 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as u,d as C,o as p,c as r,a0 as g,a1 as x,k as E,n as F,l as e,t as v,e as D,r as A,h as y,H as o,b as w,w as m,a as b,Q as i}from"./chunks/framework.3f630664.js";import{s as B}from"./chunks/simplifyTailwindClasses.275301d3.js";import{_ as q}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";const V="block text-sm font-medium text-gray-900 dark:text-gray-300",T="w-4 h-4 rounded bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-600 dark:border-gray-500";function S(){const l=u(()=>B(T)),s=u(()=>V);return{checkboxClasses:l,labelClasses:s}}const P={class:"flex gap-3 items-center justify-start"},$=["disabled"],d=C({__name:"FwbCheckbox",props:{disabled:{type:Boolean,default:!1},label:{default:""},modelValue:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(l,{emit:s}){const t=l,a=s,n=u({get(){return t.modelValue},set(c){a("update:modelValue",c)}}),{checkboxClasses:k,labelClasses:f}=S();return(c,h)=>(p(),r("label",P,[g(E("input",{"onUpdate:modelValue":h[0]||(h[0]=_=>n.value=_),class:F(e(k)),disabled:c.disabled,type:"checkbox"},null,10,$),[[x,n.value]]),c.label?(p(),r("span",{key:0,class:F(e(f))},v(c.label),3)):D("",!0),A(c.$slots,"default")]))}}),I={class:"vp-raw"},N={__name:"FwbCheckboxExample",setup(l){const s=y(!1);return(t,a)=>(p(),r("div",I,[o(e(d),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Default checkbox"},null,8,["modelValue"])]))}},U={class:"vp-raw"},L={__name:"FwbCheckboxExampleChecked",setup(l){const s=y(!0);return(t,a)=>(p(),r("div",U,[o(e(d),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Checked checkbox"},null,8,["modelValue"])]))}},R={class:"vp-raw"},j={__name:"FwbCheckboxExampleDisabled",setup(l){const s=y(!1);return(t,a)=>(p(),r("div",R,[o(e(d),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),disabled:"",label:"Disabled checkbox"},null,8,["modelValue"])]))}},O={__name:"FwbCheckboxExampleLink",setup(l){const s=y(!1);return(t,a)=>(p(),w(e(d),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n)},{default:m(()=>[o(e(q),{href:"#"},{default:m(()=>[b(" I agree with the terms and conditions. ")]),_:1})]),_:1},8,["modelValue"]))}},z=E("h1",{id:"vue-checkbox-flowbite",tabindex:"-1"},[b("Vue Checkbox - Flowbite "),E("a",{class:"header-anchor",href:"#vue-checkbox-flowbite","aria-label":'Permalink to "Vue Checkbox - Flowbite"'},"​")],-1),H=E("h2",{id:"default-checkbox",tabindex:"-1"},[b("Default checkbox "),E("a",{class:"header-anchor",href:"#default-checkbox","aria-label":'Permalink to "Default checkbox"'},"​")],-1),J=i(`
vue
<template>
+  <fwb-checkbox v-model="check" label="Default checkbox" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbCheckbox } from 'flowbite-vue'
+
+const check = ref(false)
+</script>
<template>
+  <fwb-checkbox v-model="check" label="Default checkbox" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbCheckbox } from 'flowbite-vue'
+
+const check = ref(false)
+</script>

Disabled checkbox ​

`,2),M=i(`
vue
<template>
+  <fwb-checkbox v-model="check" disabled label="Disabled checkbox" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbCheckbox } from 'flowbite-vue'
+
+const check = ref(false)
+</script>
<template>
+  <fwb-checkbox v-model="check" disabled label="Disabled checkbox" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbCheckbox } from 'flowbite-vue'
+
+const check = ref(false)
+</script>

Checked checkbox ​

`,2),Q=i(`
vue
<template>
+  <fwb-checkbox v-model="check" label="Checked checkbox" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbCheckbox } from 'flowbite-vue'
+
+const check = ref(true)
+</script>
<template>
+  <fwb-checkbox v-model="check" label="Checked checkbox" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbCheckbox } from 'flowbite-vue'
+
+const check = ref(true)
+</script>
`,2),G=i(`
vue
<template>
+  <fwb-checkbox v-model="check">
+    <fwb-a href="#">
+      I agree with the terms and conditions.
+    </fwb-a>
+  </fwb-checkbox>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbA, FwbCheckbox } from 'flowbite-vue'
+
+const check = ref(false)
+</script>
<template>
+  <fwb-checkbox v-model="check">
+    <fwb-a href="#">
+      I agree with the terms and conditions.
+    </fwb-a>
+  </fwb-checkbox>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbA, FwbCheckbox } from 'flowbite-vue'
+
+const check = ref(false)
+</script>
`,1),ss=JSON.parse('{"title":"Vue Checkbox - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/checkbox.md","filePath":"components/checkbox.md"}'),K={name:"components/checkbox.md"},as=Object.assign(K,{setup(l){return(s,t)=>(p(),r("div",null,[z,H,o(N),J,o(j),M,o(L),Q,o(O),G]))}});export{ss as __pageData,as as default}; diff --git a/docs/.vitepress/dist/assets/components_checkbox.md.ed60323a.lean.js b/docs/.vitepress/dist/assets/components_checkbox.md.ed60323a.lean.js new file mode 100644 index 0000000..983efd1 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_checkbox.md.ed60323a.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as u,d as C,o as p,c as r,a0 as g,a1 as x,k as E,n as F,l as e,t as v,e as D,r as A,h as y,H as o,b as w,w as m,a as b,Q as i}from"./chunks/framework.3f630664.js";import{s as B}from"./chunks/simplifyTailwindClasses.275301d3.js";import{_ as q}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";const V="block text-sm font-medium text-gray-900 dark:text-gray-300",T="w-4 h-4 rounded bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-600 dark:border-gray-500";function S(){const l=u(()=>B(T)),s=u(()=>V);return{checkboxClasses:l,labelClasses:s}}const P={class:"flex gap-3 items-center justify-start"},$=["disabled"],d=C({__name:"FwbCheckbox",props:{disabled:{type:Boolean,default:!1},label:{default:""},modelValue:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(l,{emit:s}){const t=l,a=s,n=u({get(){return t.modelValue},set(c){a("update:modelValue",c)}}),{checkboxClasses:k,labelClasses:f}=S();return(c,h)=>(p(),r("label",P,[g(E("input",{"onUpdate:modelValue":h[0]||(h[0]=_=>n.value=_),class:F(e(k)),disabled:c.disabled,type:"checkbox"},null,10,$),[[x,n.value]]),c.label?(p(),r("span",{key:0,class:F(e(f))},v(c.label),3)):D("",!0),A(c.$slots,"default")]))}}),I={class:"vp-raw"},N={__name:"FwbCheckboxExample",setup(l){const s=y(!1);return(t,a)=>(p(),r("div",I,[o(e(d),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Default checkbox"},null,8,["modelValue"])]))}},U={class:"vp-raw"},L={__name:"FwbCheckboxExampleChecked",setup(l){const s=y(!0);return(t,a)=>(p(),r("div",U,[o(e(d),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Checked checkbox"},null,8,["modelValue"])]))}},R={class:"vp-raw"},j={__name:"FwbCheckboxExampleDisabled",setup(l){const s=y(!1);return(t,a)=>(p(),r("div",R,[o(e(d),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),disabled:"",label:"Disabled checkbox"},null,8,["modelValue"])]))}},O={__name:"FwbCheckboxExampleLink",setup(l){const s=y(!1);return(t,a)=>(p(),w(e(d),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n)},{default:m(()=>[o(e(q),{href:"#"},{default:m(()=>[b(" I agree with the terms and conditions. ")]),_:1})]),_:1},8,["modelValue"]))}},z=E("h1",{id:"vue-checkbox-flowbite",tabindex:"-1"},[b("Vue Checkbox - Flowbite "),E("a",{class:"header-anchor",href:"#vue-checkbox-flowbite","aria-label":'Permalink to "Vue Checkbox - Flowbite"'},"​")],-1),H=E("h2",{id:"default-checkbox",tabindex:"-1"},[b("Default checkbox "),E("a",{class:"header-anchor",href:"#default-checkbox","aria-label":'Permalink to "Default checkbox"'},"​")],-1),J=i("",2),M=i("",2),Q=i("",2),G=i("",1),ss=JSON.parse('{"title":"Vue Checkbox - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/checkbox.md","filePath":"components/checkbox.md"}'),K={name:"components/checkbox.md"},as=Object.assign(K,{setup(l){return(s,t)=>(p(),r("div",null,[z,H,o(N),J,o(j),M,o(L),Q,o(O),G]))}});export{ss as __pageData,as as default}; diff --git a/docs/.vitepress/dist/assets/components_dropdown.md.3551a089.js b/docs/.vitepress/dist/assets/components_dropdown.md.3551a089.js new file mode 100644 index 0000000..0c8bf4f --- /dev/null +++ b/docs/.vitepress/dist/assets/components_dropdown.md.3551a089.js @@ -0,0 +1,125 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{F as o}from"./chunks/FwbDropdown.e54fafa7.js";import{o as e,c,H as s,w as n,l as a,k as t,a as l,Q as r}from"./chunks/framework.3f630664.js";import{_ as g,a as p}from"./chunks/FwbListGroupItem.vue_vue_type_script_setup_true_lang.9898f565.js";import"./chunks/index.b15c605d.js";import"./chunks/index.6b4d4439.js";import"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import"./chunks/FwbSlotListener.vue_vue_type_script_lang.85726df2.js";import"./chunks/flatten.a0535777.js";import"./chunks/isArray.513c67aa.js";import"./chunks/simplifyTailwindClasses.275301d3.js";const d={class:"vp-raw flex gap-2 flex-wrap"},u=t("p",{class:"p-2"}," Dropdown content here ",-1),m=t("p",{class:"p-2"}," Dropdown content here ",-1),w=t("p",{class:"p-2"}," Dropdown content here ",-1),_=t("p",{class:"p-2"}," Dropdown content here ",-1),h={__name:"FwbDropdownExamplePlacement",setup(E){return(y,i)=>(e(),c("div",d,[s(a(o),{placement:"top",text:"Top"},{default:n(()=>[u]),_:1}),s(a(o),{placement:"right",text:"Right"},{default:n(()=>[m]),_:1}),s(a(o),{text:"Bottom"},{default:n(()=>[w]),_:1}),s(a(o),{placement:"left",text:"Left"},{default:n(()=>[_]),_:1})]))}},D={class:"vp-raw"},F={__name:"FwbDropdownExampleListGroup",setup(E){return(y,i)=>(e(),c("div",D,[s(a(o),{text:"Menu"},{default:n(()=>[s(a(g),null,{default:n(()=>[s(a(p),null,{default:n(()=>[l(" Profile ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Settings ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Messages ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Download ")]),_:1})]),_:1})]),_:1})]))}},f={class:"vp-raw"},b=t("span",null,"Custom Trigger Element",-1),A={__name:"FwbDropdownExampleTrigger",setup(E){return(y,i)=>(e(),c("div",f,[s(a(o),null,{trigger:n(()=>[b]),default:n(()=>[s(a(g),null,{default:n(()=>[s(a(p),null,{default:n(()=>[l(" Profile ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Settings ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Messages ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Download ")]),_:1})]),_:1})]),_:1})]))}},q=r('

Vue Dropdown - Flowbite ​

Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements ​

TIP

Original reference: https://flowbite.com/docs/components/dropdowns/

The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when focusing outside of the triggering element.

',6),C=r(`
vue
<template>
+  <fwb-dropdown text="Bottom">
+    <p class="p-2">Dropdown content here</p>
+  </fwb-dropdown>
+  <fwb-dropdown placement="top" text="Top">
+    <p class="p-2">Dropdown content here</p>
+  </fwb-dropdown>
+  <fwb-dropdown placement="right" text="Right">
+    <p class="p-2">Dropdown content here</p>
+  </fwb-dropdown>
+  <fwb-dropdown placement="left" text="Left">
+    <p class="p-2">Dropdown content here</p>
+  </fwb-dropdown>
+</template>
+
+<script setup>
+import { FwbDropdown } from 'flowbite-vue'
+</script>
<template>
+  <fwb-dropdown text="Bottom">
+    <p class="p-2">Dropdown content here</p>
+  </fwb-dropdown>
+  <fwb-dropdown placement="top" text="Top">
+    <p class="p-2">Dropdown content here</p>
+  </fwb-dropdown>
+  <fwb-dropdown placement="right" text="Right">
+    <p class="p-2">Dropdown content here</p>
+  </fwb-dropdown>
+  <fwb-dropdown placement="left" text="Left">
+    <p class="p-2">Dropdown content here</p>
+  </fwb-dropdown>
+</template>
+
+<script setup>
+import { FwbDropdown } from 'flowbite-vue'
+</script>
`,2),v=r(`
vue
<template>
+  <fwb-dropdown text="Menu">
+    <list-group>
+      <list-group-item>
+        Profile
+      </list-group-item>
+      <list-group-item>
+        Settings
+      </list-group-item>
+      <list-group-item>
+        Messages
+      </list-group-item>
+      <list-group-item>
+        Download
+      </list-group-item>
+    </list-group>
+  </fwb-dropdown>
+</template>
+
+<script setup>
+import { FwbDropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
+</script>
<template>
+  <fwb-dropdown text="Menu">
+    <list-group>
+      <list-group-item>
+        Profile
+      </list-group-item>
+      <list-group-item>
+        Settings
+      </list-group-item>
+      <list-group-item>
+        Messages
+      </list-group-item>
+      <list-group-item>
+        Download
+      </list-group-item>
+    </list-group>
+  </fwb-dropdown>
+</template>
+
+<script setup>
+import { FwbDropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
+</script>
`,2),B=r(`
vue
<template>
+  <fwb-dropdown text="Bottom">
+    <template #trigger>
+      <span>Custom Trigger Element</span>
+    </template>
+    <list-group>
+      <list-group-item>
+        Profile
+      </list-group-item>
+      <list-group-item>
+        Settings
+      </list-group-item>
+      <list-group-item>
+        Messages
+      </list-group-item>
+      <list-group-item>
+        Download
+      </list-group-item>
+    </list-group>
+  </fwb-dropdown>
+</template>
+
+<script setup>
+import { FwbDropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
+</script>
<template>
+  <fwb-dropdown text="Bottom">
+    <template #trigger>
+      <span>Custom Trigger Element</span>
+    </template>
+    <list-group>
+      <list-group-item>
+        Profile
+      </list-group-item>
+      <list-group-item>
+        Settings
+      </list-group-item>
+      <list-group-item>
+        Messages
+      </list-group-item>
+      <list-group-item>
+        Download
+      </list-group-item>
+    </list-group>
+  </fwb-dropdown>
+</template>
+
+<script setup>
+import { FwbDropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
+</script>
`,1),j=JSON.parse('{"title":"Vue Dropdown - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/dropdown.md","filePath":"components/dropdown.md"}'),x={name:"components/dropdown.md"},H=Object.assign(x,{setup(E){return(y,i)=>(e(),c("div",null,[q,s(h),C,s(F),v,s(A),B]))}});export{j as __pageData,H as default}; diff --git a/docs/.vitepress/dist/assets/components_dropdown.md.3551a089.lean.js b/docs/.vitepress/dist/assets/components_dropdown.md.3551a089.lean.js new file mode 100644 index 0000000..c9edc76 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_dropdown.md.3551a089.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{F as o}from"./chunks/FwbDropdown.e54fafa7.js";import{o as e,c,H as s,w as n,l as a,k as t,a as l,Q as r}from"./chunks/framework.3f630664.js";import{_ as g,a as p}from"./chunks/FwbListGroupItem.vue_vue_type_script_setup_true_lang.9898f565.js";import"./chunks/index.b15c605d.js";import"./chunks/index.6b4d4439.js";import"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import"./chunks/FwbSlotListener.vue_vue_type_script_lang.85726df2.js";import"./chunks/flatten.a0535777.js";import"./chunks/isArray.513c67aa.js";import"./chunks/simplifyTailwindClasses.275301d3.js";const d={class:"vp-raw flex gap-2 flex-wrap"},u=t("p",{class:"p-2"}," Dropdown content here ",-1),m=t("p",{class:"p-2"}," Dropdown content here ",-1),w=t("p",{class:"p-2"}," Dropdown content here ",-1),_=t("p",{class:"p-2"}," Dropdown content here ",-1),h={__name:"FwbDropdownExamplePlacement",setup(E){return(y,i)=>(e(),c("div",d,[s(a(o),{placement:"top",text:"Top"},{default:n(()=>[u]),_:1}),s(a(o),{placement:"right",text:"Right"},{default:n(()=>[m]),_:1}),s(a(o),{text:"Bottom"},{default:n(()=>[w]),_:1}),s(a(o),{placement:"left",text:"Left"},{default:n(()=>[_]),_:1})]))}},D={class:"vp-raw"},F={__name:"FwbDropdownExampleListGroup",setup(E){return(y,i)=>(e(),c("div",D,[s(a(o),{text:"Menu"},{default:n(()=>[s(a(g),null,{default:n(()=>[s(a(p),null,{default:n(()=>[l(" Profile ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Settings ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Messages ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Download ")]),_:1})]),_:1})]),_:1})]))}},f={class:"vp-raw"},b=t("span",null,"Custom Trigger Element",-1),A={__name:"FwbDropdownExampleTrigger",setup(E){return(y,i)=>(e(),c("div",f,[s(a(o),null,{trigger:n(()=>[b]),default:n(()=>[s(a(g),null,{default:n(()=>[s(a(p),null,{default:n(()=>[l(" Profile ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Settings ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Messages ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Download ")]),_:1})]),_:1})]),_:1})]))}},q=r("",6),C=r("",2),v=r("",2),B=r("",1),j=JSON.parse('{"title":"Vue Dropdown - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/dropdown.md","filePath":"components/dropdown.md"}'),x={name:"components/dropdown.md"},H=Object.assign(x,{setup(E){return(y,i)=>(e(),c("div",null,[q,s(h),C,s(F),v,s(A),B]))}});export{j as __pageData,H as default}; diff --git a/docs/.vitepress/dist/assets/components_fileInput.md.4013b935.js b/docs/.vitepress/dist/assets/components_fileInput.md.4013b935.js new file mode 100644 index 0000000..b87858f --- /dev/null +++ b/docs/.vitepress/dist/assets/components_fileInput.md.4013b935.js @@ -0,0 +1,113 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{s as V}from"./chunks/simplifyTailwindClasses.275301d3.js";import{g as u,d as T,o,c as e,k as c,n as m,l as t,t as b,r as C,a as z,h as g,H as r,w as I,F as S,D as P,e as $,Q as F}from"./chunks/framework.3f630664.js";import{i as U}from"./chunks/isArray.513c67aa.js";const N="block w-full text-sm text-gray-900 border-[1px] border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400",G="block mb-2 text-sm font-medium text-gray-900 dark:text-white",j="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600",L="flex flex-col items-center justify-center pt-5 pb-6",M="!-mb-2 text-sm text-gray-500 dark:text-gray-400";function H(E){const s=u(()=>V(N,"text-"+E)),p=u(()=>G),l=u(()=>j),n=u(()=>L),y=u(()=>M);return{fileInpClasses:s,labelClasses:p,dropzoneLabelClasses:l,dropzoneWrapClasses:n,dropzoneTextClasses:y}}const O={key:0},R=["multiple"],J=c("svg",{"aria-hidden":"true",class:"w-8 h-8 text-gray-500 dark:text-gray-400",fill:"none",viewBox:"0 0 20 16",xmlns:"http://www.w3.org/2000/svg"},[c("path",{d:"M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",stroke:"currentColor"})],-1),W={key:0},X=c("span",{class:"font-semibold"},"Click to upload",-1),Z={key:1},Q=["multiple"],d=T({__name:"FwbFileInput",props:{dropzone:{type:Boolean,default:!1},label:{default:""},modelValue:{default:null},multiple:{type:Boolean,default:!1},size:{default:"sm"}},emits:["update:modelValue"],setup(E,{emit:s}){const p=E,l=u(()=>U(p.modelValue)?p.modelValue.map(a=>a.name).join(", "):p.modelValue instanceof FileList?Array.from(p.modelValue).map(a=>a.name).join(","):p.modelValue instanceof File&&p.modelValue.name||""),n=s,y=u({get(){return p.modelValue},set(a){n("update:modelValue",a)}}),v=a=>{var f;const i=a.target;p.multiple?y.value=Array.from(i.files??[]):y.value=((f=i.files)==null?void 0:f[0])??null},q=a=>{var f,h;a.preventDefault();const i=[];(f=a.dataTransfer)!=null&&f.items?(Object.values(a.dataTransfer.items).forEach(_=>{_.kind==="file"&&i.push(_.getAsFile())}),p.multiple?y.value=i:y.value=i[0]):(h=a.dataTransfer)!=null&&h.files&&Object.values(a.dataTransfer.files).forEach(_=>{y.value=_})},A=a=>{a.preventDefault()},{fileInpClasses:D,labelClasses:B,dropzoneLabelClasses:w,dropzoneWrapClasses:x,dropzoneTextClasses:k}=H(p.size);return(a,i)=>(o(),e("div",null,[a.dropzone?(o(),e("div",{key:1,class:"flex items-center justify-center",onChange:v,onDragover:A,onDrop:q},[c("label",{class:m(t(w))},[c("div",{class:m(t(x))},[J,y.value?(o(),e("p",Z,"File: "+b(l.value),1)):(o(),e("div",W,[c("p",{class:m(t(k))},[X,z(" or drag and drop ")],2),C(a.$slots,"default")]))],2),c("input",{multiple:a.multiple,type:"file",class:"hidden"},null,8,Q)],2)],32)):(o(),e("div",O,[c("label",null,[c("span",{class:m(t(B))},b(a.label),3),c("input",{class:m(t(D)),multiple:a.multiple,type:"file",onChange:v},null,42,R)]),C(a.$slots,"default")]))]))}}),K={class:"vp-raw"},Y={__name:"FwbFileInputExample",setup(E){const s=g(null);return(p,l)=>(o(),e("div",K,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),label:"Upload file"},null,8,["modelValue"])]))}},ss={class:"vp-raw"},ls=c("p",{class:"!mt-1 text-sm text-gray-500 dark:text-gray-300"}," SVG, PNG, JPG or GIF (MAX. 800x400px). ",-1),as={__name:"FwbFileInputExampleHelper",setup(E){const s=g(null);return(p,l)=>(o(),e("div",ss,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),label:"Upload file"},{default:I(()=>[ls]),_:1},8,["modelValue"])]))}},ns={class:"vp-raw grid gap-2"},ps={__name:"FwbFileInputExampleSize",setup(E){const s=g(null);return(p,l)=>(o(),e("div",ns,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),size:"xs",label:"Small size"},null,8,["modelValue"]),r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[1]||(l[1]=n=>s.value=n),size:"sm",label:"Default size"},null,8,["modelValue"]),r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[2]||(l[2]=n=>s.value=n),size:"lg",label:"Large size"},null,8,["modelValue"])]))}},os={class:"vp-raw"},es={__name:"FwbFileInputExampleDropZone",setup(E){const s=g(null);return(p,l)=>(o(),e("div",os,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),dropzone:""},null,8,["modelValue"])]))}},ts={class:"vp-raw"},rs={key:0,class:"mt-4 border-[1px] border-gray-300 dark:border-gray-600 p-2 rounded-md"},cs={__name:"FwbFileInputExampleMultiple",setup(E){const s=g([]);return(p,l)=>(o(),e("div",ts,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),label:"Upload file",multiple:""},null,8,["modelValue"]),s.value.length!==0?(o(),e("div",rs,[(o(!0),e(S,null,P(s.value,n=>(o(),e("div",{key:n},b(n.name),1))),128))])):$("",!0)]))}},Es=F('

Vue FileInput - Flowbite ​

Get started with the file input component to let the user to upload one or more files from their device storage based on multiple styles and sizes ​

TIP

Original reference: https://flowbite.com/docs/forms/file-input/

File upload example ​

',4),ys=F(`
vue
<template>
+  <fwb-file-input v-model="file" label="Upload file" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbFileInput } from 'flowbite-vue'
+
+const file = ref(null)
+</script>
<template>
+  <fwb-file-input v-model="file" label="Upload file" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbFileInput } from 'flowbite-vue'
+
+const file = ref(null)
+</script>

Multiple File upload ​

`,2),is=F(`
vue
<template>
+  <fwb-file-input v-model="files" label="Upload file" multiple />
+  <div v-if="files.length !== 0" class="mt-4 border-[1px] border-gray-300 dark:border-gray-600 p-2 rounded-md">
+    <div v-for="file in files" :key="file">
+      {{ file.name }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbFileInput } from 'flowbite-vue'
+
+const files = ref([])
+</script>
<template>
+  <fwb-file-input v-model="files" label="Upload file" multiple />
+  <div v-if="files.length !== 0" class="mt-4 border-[1px] border-gray-300 dark:border-gray-600 p-2 rounded-md">
+    <div v-for="file in files" :key="file">
+      {{ file.name }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbFileInput } from 'flowbite-vue'
+
+const files = ref([])
+</script>

Helper text ​

`,2),us=F(`
vue
<template>
+  <fwb-file-input v-model="file" label="Upload file">
+    <p class="!mt-1 text-sm text-gray-500 dark:text-gray-300">
+      SVG, PNG, JPG or GIF (MAX. 800x400px).
+    </p>
+  </fwb-file-input>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbFileInput } from 'flowbite-vue'
+
+const file = ref(null)
+</script>
<template>
+  <fwb-file-input v-model="file" label="Upload file">
+    <p class="!mt-1 text-sm text-gray-500 dark:text-gray-300">
+      SVG, PNG, JPG or GIF (MAX. 800x400px).
+    </p>
+  </fwb-file-input>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbFileInput } from 'flowbite-vue'
+
+const file = ref(null)
+</script>

Sizes ​

`,2),ds=F(`
vue
<template>
+  <fwb-file-input v-model="file" label="Small size" size="xs" />
+  <fwb-file-input v-model="file" label="Default size" size="sm" />
+  <fwb-file-input v-model="file" label="Large size" size="lg" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbFileInput } from 'flowbite-vue'
+
+const file = ref(null)
+</script>
<template>
+  <fwb-file-input v-model="file" label="Small size" size="xs" />
+  <fwb-file-input v-model="file" label="Default size" size="sm" />
+  <fwb-file-input v-model="file" label="Large size" size="lg" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbFileInput } from 'flowbite-vue'
+
+const file = ref(null)
+</script>

Dropone ​

`,2),Fs=F(`
vue
<template>
+  <fwb-file-input v-model="file" dropzone />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbFileInput } from 'flowbite-vue'
+
+const file = ref(null)
+</script>
<template>
+  <fwb-file-input v-model="file" dropzone />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbFileInput } from 'flowbite-vue'
+
+const file = ref(null)
+</script>
`,1),vs=JSON.parse('{"title":"Vue FileInput - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/fileInput.md","filePath":"components/fileInput.md"}'),fs={name:"components/fileInput.md"},hs=Object.assign(fs,{setup(E){return(s,p)=>(o(),e("div",null,[Es,r(Y),ys,r(cs),is,r(as),us,r(ps),ds,r(es),Fs]))}});export{vs as __pageData,hs as default}; diff --git a/docs/.vitepress/dist/assets/components_fileInput.md.4013b935.lean.js b/docs/.vitepress/dist/assets/components_fileInput.md.4013b935.lean.js new file mode 100644 index 0000000..719a1e2 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_fileInput.md.4013b935.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{s as V}from"./chunks/simplifyTailwindClasses.275301d3.js";import{g as u,d as T,o,c as e,k as c,n as m,l as t,t as b,r as C,a as z,h as g,H as r,w as I,F as S,D as P,e as $,Q as F}from"./chunks/framework.3f630664.js";import{i as U}from"./chunks/isArray.513c67aa.js";const N="block w-full text-sm text-gray-900 border-[1px] border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400",G="block mb-2 text-sm font-medium text-gray-900 dark:text-white",j="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600",L="flex flex-col items-center justify-center pt-5 pb-6",M="!-mb-2 text-sm text-gray-500 dark:text-gray-400";function H(E){const s=u(()=>V(N,"text-"+E)),p=u(()=>G),l=u(()=>j),n=u(()=>L),y=u(()=>M);return{fileInpClasses:s,labelClasses:p,dropzoneLabelClasses:l,dropzoneWrapClasses:n,dropzoneTextClasses:y}}const O={key:0},R=["multiple"],J=c("svg",{"aria-hidden":"true",class:"w-8 h-8 text-gray-500 dark:text-gray-400",fill:"none",viewBox:"0 0 20 16",xmlns:"http://www.w3.org/2000/svg"},[c("path",{d:"M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",stroke:"currentColor"})],-1),W={key:0},X=c("span",{class:"font-semibold"},"Click to upload",-1),Z={key:1},Q=["multiple"],d=T({__name:"FwbFileInput",props:{dropzone:{type:Boolean,default:!1},label:{default:""},modelValue:{default:null},multiple:{type:Boolean,default:!1},size:{default:"sm"}},emits:["update:modelValue"],setup(E,{emit:s}){const p=E,l=u(()=>U(p.modelValue)?p.modelValue.map(a=>a.name).join(", "):p.modelValue instanceof FileList?Array.from(p.modelValue).map(a=>a.name).join(","):p.modelValue instanceof File&&p.modelValue.name||""),n=s,y=u({get(){return p.modelValue},set(a){n("update:modelValue",a)}}),v=a=>{var f;const i=a.target;p.multiple?y.value=Array.from(i.files??[]):y.value=((f=i.files)==null?void 0:f[0])??null},q=a=>{var f,h;a.preventDefault();const i=[];(f=a.dataTransfer)!=null&&f.items?(Object.values(a.dataTransfer.items).forEach(_=>{_.kind==="file"&&i.push(_.getAsFile())}),p.multiple?y.value=i:y.value=i[0]):(h=a.dataTransfer)!=null&&h.files&&Object.values(a.dataTransfer.files).forEach(_=>{y.value=_})},A=a=>{a.preventDefault()},{fileInpClasses:D,labelClasses:B,dropzoneLabelClasses:w,dropzoneWrapClasses:x,dropzoneTextClasses:k}=H(p.size);return(a,i)=>(o(),e("div",null,[a.dropzone?(o(),e("div",{key:1,class:"flex items-center justify-center",onChange:v,onDragover:A,onDrop:q},[c("label",{class:m(t(w))},[c("div",{class:m(t(x))},[J,y.value?(o(),e("p",Z,"File: "+b(l.value),1)):(o(),e("div",W,[c("p",{class:m(t(k))},[X,z(" or drag and drop ")],2),C(a.$slots,"default")]))],2),c("input",{multiple:a.multiple,type:"file",class:"hidden"},null,8,Q)],2)],32)):(o(),e("div",O,[c("label",null,[c("span",{class:m(t(B))},b(a.label),3),c("input",{class:m(t(D)),multiple:a.multiple,type:"file",onChange:v},null,42,R)]),C(a.$slots,"default")]))]))}}),K={class:"vp-raw"},Y={__name:"FwbFileInputExample",setup(E){const s=g(null);return(p,l)=>(o(),e("div",K,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),label:"Upload file"},null,8,["modelValue"])]))}},ss={class:"vp-raw"},ls=c("p",{class:"!mt-1 text-sm text-gray-500 dark:text-gray-300"}," SVG, PNG, JPG or GIF (MAX. 800x400px). ",-1),as={__name:"FwbFileInputExampleHelper",setup(E){const s=g(null);return(p,l)=>(o(),e("div",ss,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),label:"Upload file"},{default:I(()=>[ls]),_:1},8,["modelValue"])]))}},ns={class:"vp-raw grid gap-2"},ps={__name:"FwbFileInputExampleSize",setup(E){const s=g(null);return(p,l)=>(o(),e("div",ns,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),size:"xs",label:"Small size"},null,8,["modelValue"]),r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[1]||(l[1]=n=>s.value=n),size:"sm",label:"Default size"},null,8,["modelValue"]),r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[2]||(l[2]=n=>s.value=n),size:"lg",label:"Large size"},null,8,["modelValue"])]))}},os={class:"vp-raw"},es={__name:"FwbFileInputExampleDropZone",setup(E){const s=g(null);return(p,l)=>(o(),e("div",os,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),dropzone:""},null,8,["modelValue"])]))}},ts={class:"vp-raw"},rs={key:0,class:"mt-4 border-[1px] border-gray-300 dark:border-gray-600 p-2 rounded-md"},cs={__name:"FwbFileInputExampleMultiple",setup(E){const s=g([]);return(p,l)=>(o(),e("div",ts,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),label:"Upload file",multiple:""},null,8,["modelValue"]),s.value.length!==0?(o(),e("div",rs,[(o(!0),e(S,null,P(s.value,n=>(o(),e("div",{key:n},b(n.name),1))),128))])):$("",!0)]))}},Es=F("",4),ys=F("",2),is=F("",2),us=F("",2),ds=F("",2),Fs=F("",1),vs=JSON.parse('{"title":"Vue FileInput - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/fileInput.md","filePath":"components/fileInput.md"}'),fs={name:"components/fileInput.md"},hs=Object.assign(fs,{setup(E){return(s,p)=>(o(),e("div",null,[Es,r(Y),ys,r(cs),is,r(as),us,r(ps),ds,r(es),Fs]))}});export{vs as __pageData,hs as default}; diff --git a/docs/.vitepress/dist/assets/components_flowbiteThemable_flowbiteThemable.md.696f24eb.js b/docs/.vitepress/dist/assets/components_flowbiteThemable_flowbiteThemable.md.696f24eb.js new file mode 100644 index 0000000..fd2e812 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_flowbiteThemable_flowbiteThemable.md.696f24eb.js @@ -0,0 +1,69 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as v,a as d}from"./chunks/FwbTabs.vue_vue_type_script_setup_true_lang.ebf7e19d.js";import{_ as i}from"./chunks/FwbRadio.vue_vue_type_script_setup_true_lang.a8d8cba7.js";import{_ as h}from"./chunks/FlowbiteThemable.vue_vue_type_script_setup_true_lang.e3bec3bf.js";import{d as f,h as _,o as E,c as y,k as t,H as a,w as l,a as e,l as n,F as g,D as F,t as w,Q as m}from"./chunks/framework.3f630664.js";import{_ as A}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{F as D}from"./chunks/FwbDropdown.e54fafa7.js";import"./chunks/flatten.a0535777.js";import"./chunks/simplifyTailwindClasses.275301d3.js";import"./chunks/useFlowbiteThemable.013ea29e.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import"./chunks/index.b15c605d.js";import"./chunks/index.6b4d4439.js";import"./chunks/FwbSlotListener.vue_vue_type_script_lang.85726df2.js";import"./chunks/isArray.513c67aa.js";const T={class:"vp-raw"},V=t("span",{class:""},"Select theme:",-1),C={class:"grid xs:grid-cols-5 md:grid-cols-7 mb-5 mt-2"},b=f({__name:"FlowbiteThemableExampleTabs",props:{tabsVariant:{type:String,default:"default"}},setup(u){const o=_("first"),p=_("blue");return(r,s)=>(E(),y("div",T,[V,t("div",C,[a(n(i),{modelValue:p.value,"onUpdate:modelValue":s[0]||(s[0]=c=>p.value=c),value:"blue"},{default:l(()=>[e(" Blue ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:p.value,"onUpdate:modelValue":s[1]||(s[1]=c=>p.value=c),value:"green"},{default:l(()=>[e(" Green ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:p.value,"onUpdate:modelValue":s[2]||(s[2]=c=>p.value=c),value:"pink"},{default:l(()=>[e(" Pink ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:p.value,"onUpdate:modelValue":s[3]||(s[3]=c=>p.value=c),value:"purple"},{default:l(()=>[e(" Purple ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:p.value,"onUpdate:modelValue":s[4]||(s[4]=c=>p.value=c),value:"red"},{default:l(()=>[e(" Red ")]),_:1},8,["modelValue"])]),a(n(h),{theme:p.value},{default:l(()=>[a(n(v),{modelValue:o.value,"onUpdate:modelValue":s[5]||(s[5]=c=>o.value=c),class:"p-5",variant:u.tabsVariant},{default:l(()=>[a(n(d),{name:"first",title:"First"},{default:l(()=>[e(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae? ")]),_:1}),a(n(d),{name:"second",title:"Second"},{default:l(()=>[e(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta. ")]),_:1}),a(n(d),{name:"third",title:"Third"},{default:l(()=>[e(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem. ")]),_:1}),a(n(d),{name:"fourth",title:"Fourth",disabled:""},{default:l(()=>[e(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem. ")]),_:1})]),_:1},8,["modelValue","variant"])]),_:1},8,["theme"])]))}}),k={class:"vp-raw"},q={class:"flex align-center gap-2 flex-wrap"},B=f({__name:"FlowbiteThemableExampleButton",props:{theme:{type:String,default:"blue"}},setup(u){const o=["blue","green","red","pink","purple"];return(p,r)=>(E(),y("div",k,[t("div",q,[(E(),y(g,null,F(o,s=>a(n(h),{key:s,theme:s},{default:l(()=>[a(n(A),null,{default:l(()=>[e(w(s),1)]),_:2},1024)]),_:2},1032,["theme"])),64))])]))}}),x={class:"vp-raw"},P=t("span",{class:""},"Select theme:",-1),S={class:"grid xs:grid-cols-5 md:grid-cols-7 mb-5 mt-2"},$={class:"inline-flex align-center gap-2 flex-wrap"},U=f({__name:"FlowbiteThemableExampleDropdown",setup(u){const o=_("blue");return(p,r)=>(E(),y("div",x,[P,t("div",S,[a(n(i),{modelValue:o.value,"onUpdate:modelValue":r[0]||(r[0]=s=>o.value=s),value:"blue"},{default:l(()=>[e(" Blue ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:o.value,"onUpdate:modelValue":r[1]||(r[1]=s=>o.value=s),value:"green"},{default:l(()=>[e(" Green ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:o.value,"onUpdate:modelValue":r[2]||(r[2]=s=>o.value=s),value:"pink"},{default:l(()=>[e(" Pink ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:o.value,"onUpdate:modelValue":r[3]||(r[3]=s=>o.value=s),value:"purple"},{default:l(()=>[e(" Purple ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:o.value,"onUpdate:modelValue":r[4]||(r[4]=s=>o.value=s),value:"red"},{default:l(()=>[e(" Red ")]),_:1},8,["modelValue"])]),t("div",$,[a(n(h),{theme:o.value},{default:l(()=>[a(n(D),{text:"Dropdown"},{default:l(()=>[e(" Dropdown content... ")]),_:1})]),_:1},8,["theme"])])]))}}),I=m('

Vue Themable Configuration - Flowbite ​

You can use this wrapper for styling components with no color prop(like tabs, dropdown etc.)

WARNING

WIP, Do not use it in production

Tabs ​

',4),N=m(`
vue
<template>
+  <flowbite-themable :theme="theme">
+      <fwb-tabs :variant="variant">
+        ...
+      </fwb-tabs>
+  </flowbite-themable>
+</template>
+
+<script setup>
+import { FwbTabs, FwbTab, FlowbiteThemable } from 'flowbite-vue'
+const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
+const variant = 'default' // see tabs docs
+</script>
<template>
+  <flowbite-themable :theme="theme">
+      <fwb-tabs :variant="variant">
+        ...
+      </fwb-tabs>
+  </flowbite-themable>
+</template>
+
+<script setup>
+import { FwbTabs, FwbTab, FlowbiteThemable } from 'flowbite-vue'
+const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
+const variant = 'default' // see tabs docs
+</script>

variant: pills ​

`,3),R=t("hr",null,null,-1),L=t("h3",{id:"variant-underline",tabindex:"-1"},[e("variant: underline "),t("a",{class:"header-anchor",href:"#variant-underline","aria-label":'Permalink to "variant: underline"'},"​")],-1),G=t("hr",null,null,-1),O=t("hr",null,null,-1),W=t("h2",{id:"dropdown",tabindex:"-1"},[e("Dropdown "),t("a",{class:"header-anchor",href:"#dropdown","aria-label":'Permalink to "Dropdown"'},"​")],-1),j=m(`
vue
<template>
+  <flowbite-themable :theme="theme">
+      <fwb-dropdown>
+        ...
+      </fwb-dropdown>
+  </flowbite-themable>
+</template>
+
+<script setup>
+import { FwbDropdown, FlowbiteThemable } from 'flowbite-vue'
+const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
+</script>
<template>
+  <flowbite-themable :theme="theme">
+      <fwb-dropdown>
+        ...
+      </fwb-dropdown>
+  </flowbite-themable>
+</template>
+
+<script setup>
+import { FwbDropdown, FlowbiteThemable } from 'flowbite-vue'
+const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
+</script>

Button ​

`,2),H=m(`
vue
<template>
+  <flowbite-themable :theme="theme">
+      <fwb-button>
+        ...
+      </fwb-button>
+  </flowbite-themable>
+</template>
+
+<script setup>
+import { FwbButton, FlowbiteThemable } from 'flowbite-vue'
+const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
+</script>
<template>
+  <flowbite-themable :theme="theme">
+      <fwb-button>
+        ...
+      </fwb-button>
+  </flowbite-themable>
+</template>
+
+<script setup>
+import { FwbButton, FlowbiteThemable } from 'flowbite-vue'
+const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
+</script>
`,1),cs=JSON.parse('{"title":"Vue Themable Configuration - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/flowbiteThemable/flowbiteThemable.md","filePath":"components/flowbiteThemable/flowbiteThemable.md"}'),J={name:"components/flowbiteThemable/flowbiteThemable.md"},is=Object.assign(J,{setup(u){return(o,p)=>(E(),y("div",null,[I,a(b),N,a(b,{"tabs-variant":"pills"}),R,L,G,a(b,{"tabs-variant":"underline"}),O,W,a(U),j,a(B),H]))}});export{cs as __pageData,is as default}; diff --git a/docs/.vitepress/dist/assets/components_flowbiteThemable_flowbiteThemable.md.696f24eb.lean.js b/docs/.vitepress/dist/assets/components_flowbiteThemable_flowbiteThemable.md.696f24eb.lean.js new file mode 100644 index 0000000..2003e4c --- /dev/null +++ b/docs/.vitepress/dist/assets/components_flowbiteThemable_flowbiteThemable.md.696f24eb.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as v,a as d}from"./chunks/FwbTabs.vue_vue_type_script_setup_true_lang.ebf7e19d.js";import{_ as i}from"./chunks/FwbRadio.vue_vue_type_script_setup_true_lang.a8d8cba7.js";import{_ as h}from"./chunks/FlowbiteThemable.vue_vue_type_script_setup_true_lang.e3bec3bf.js";import{d as f,h as _,o as E,c as y,k as t,H as a,w as l,a as e,l as n,F as g,D as F,t as w,Q as m}from"./chunks/framework.3f630664.js";import{_ as A}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{F as D}from"./chunks/FwbDropdown.e54fafa7.js";import"./chunks/flatten.a0535777.js";import"./chunks/simplifyTailwindClasses.275301d3.js";import"./chunks/useFlowbiteThemable.013ea29e.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import"./chunks/index.b15c605d.js";import"./chunks/index.6b4d4439.js";import"./chunks/FwbSlotListener.vue_vue_type_script_lang.85726df2.js";import"./chunks/isArray.513c67aa.js";const T={class:"vp-raw"},V=t("span",{class:""},"Select theme:",-1),C={class:"grid xs:grid-cols-5 md:grid-cols-7 mb-5 mt-2"},b=f({__name:"FlowbiteThemableExampleTabs",props:{tabsVariant:{type:String,default:"default"}},setup(u){const o=_("first"),p=_("blue");return(r,s)=>(E(),y("div",T,[V,t("div",C,[a(n(i),{modelValue:p.value,"onUpdate:modelValue":s[0]||(s[0]=c=>p.value=c),value:"blue"},{default:l(()=>[e(" Blue ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:p.value,"onUpdate:modelValue":s[1]||(s[1]=c=>p.value=c),value:"green"},{default:l(()=>[e(" Green ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:p.value,"onUpdate:modelValue":s[2]||(s[2]=c=>p.value=c),value:"pink"},{default:l(()=>[e(" Pink ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:p.value,"onUpdate:modelValue":s[3]||(s[3]=c=>p.value=c),value:"purple"},{default:l(()=>[e(" Purple ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:p.value,"onUpdate:modelValue":s[4]||(s[4]=c=>p.value=c),value:"red"},{default:l(()=>[e(" Red ")]),_:1},8,["modelValue"])]),a(n(h),{theme:p.value},{default:l(()=>[a(n(v),{modelValue:o.value,"onUpdate:modelValue":s[5]||(s[5]=c=>o.value=c),class:"p-5",variant:u.tabsVariant},{default:l(()=>[a(n(d),{name:"first",title:"First"},{default:l(()=>[e(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae? ")]),_:1}),a(n(d),{name:"second",title:"Second"},{default:l(()=>[e(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta. ")]),_:1}),a(n(d),{name:"third",title:"Third"},{default:l(()=>[e(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem. ")]),_:1}),a(n(d),{name:"fourth",title:"Fourth",disabled:""},{default:l(()=>[e(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem. ")]),_:1})]),_:1},8,["modelValue","variant"])]),_:1},8,["theme"])]))}}),k={class:"vp-raw"},q={class:"flex align-center gap-2 flex-wrap"},B=f({__name:"FlowbiteThemableExampleButton",props:{theme:{type:String,default:"blue"}},setup(u){const o=["blue","green","red","pink","purple"];return(p,r)=>(E(),y("div",k,[t("div",q,[(E(),y(g,null,F(o,s=>a(n(h),{key:s,theme:s},{default:l(()=>[a(n(A),null,{default:l(()=>[e(w(s),1)]),_:2},1024)]),_:2},1032,["theme"])),64))])]))}}),x={class:"vp-raw"},P=t("span",{class:""},"Select theme:",-1),S={class:"grid xs:grid-cols-5 md:grid-cols-7 mb-5 mt-2"},$={class:"inline-flex align-center gap-2 flex-wrap"},U=f({__name:"FlowbiteThemableExampleDropdown",setup(u){const o=_("blue");return(p,r)=>(E(),y("div",x,[P,t("div",S,[a(n(i),{modelValue:o.value,"onUpdate:modelValue":r[0]||(r[0]=s=>o.value=s),value:"blue"},{default:l(()=>[e(" Blue ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:o.value,"onUpdate:modelValue":r[1]||(r[1]=s=>o.value=s),value:"green"},{default:l(()=>[e(" Green ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:o.value,"onUpdate:modelValue":r[2]||(r[2]=s=>o.value=s),value:"pink"},{default:l(()=>[e(" Pink ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:o.value,"onUpdate:modelValue":r[3]||(r[3]=s=>o.value=s),value:"purple"},{default:l(()=>[e(" Purple ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:o.value,"onUpdate:modelValue":r[4]||(r[4]=s=>o.value=s),value:"red"},{default:l(()=>[e(" Red ")]),_:1},8,["modelValue"])]),t("div",$,[a(n(h),{theme:o.value},{default:l(()=>[a(n(D),{text:"Dropdown"},{default:l(()=>[e(" Dropdown content... ")]),_:1})]),_:1},8,["theme"])])]))}}),I=m("",4),N=m("",3),R=t("hr",null,null,-1),L=t("h3",{id:"variant-underline",tabindex:"-1"},[e("variant: underline "),t("a",{class:"header-anchor",href:"#variant-underline","aria-label":'Permalink to "variant: underline"'},"​")],-1),G=t("hr",null,null,-1),O=t("hr",null,null,-1),W=t("h2",{id:"dropdown",tabindex:"-1"},[e("Dropdown "),t("a",{class:"header-anchor",href:"#dropdown","aria-label":'Permalink to "Dropdown"'},"​")],-1),j=m("",2),H=m("",1),cs=JSON.parse('{"title":"Vue Themable Configuration - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/flowbiteThemable/flowbiteThemable.md","filePath":"components/flowbiteThemable/flowbiteThemable.md"}'),J={name:"components/flowbiteThemable/flowbiteThemable.md"},is=Object.assign(J,{setup(u){return(o,p)=>(E(),y("div",null,[I,a(b),N,a(b,{"tabs-variant":"pills"}),R,L,G,a(b,{"tabs-variant":"underline"}),O,W,a(U),j,a(B),H]))}});export{cs as __pageData,is as default}; diff --git a/docs/.vitepress/dist/assets/components_footer.md.0590fa94.js b/docs/.vitepress/dist/assets/components_footer.md.0590fa94.js new file mode 100644 index 0000000..e50f05e --- /dev/null +++ b/docs/.vitepress/dist/assets/components_footer.md.0590fa94.js @@ -0,0 +1,599 @@ +import{t as q,_ as h}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as w,Z as b,o as c,c as F,r as v,L as m,l as s,k as l,n as A,t as x,b as k,w as a,I as _,C as T,a3 as M,H as n,a as o,Q as d}from"./chunks/framework.3f630664.js";const C=w({inheritAttrs:!1,__name:"FwbFooter",props:{sticky:{type:Boolean,default:!1},footerType:{default:"default"}},setup(r){const t=r,e=b(),E=q(t.footerType==="sitemap"&&"bg-gray-800",t.footerType==="socialmedia"&&"p-4 bg-white sm:p-6 dark:bg-gray-800",t.footerType==="logo"&&"p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800",t.footerType==="default"&&"p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800",t.sticky&&"absolute bottom-0 left-0 z-20 w-full border-t border-gray-200 dark:border-gray-600",e.class);return(f,y)=>(c(),F("footer",m(f.$attrs,{class:s(E)}),[v(f.$slots,"default")],16))}}),P=["href"],L=["alt","src"],D=w({inheritAttrs:!1,__name:"FwbFooterBrand",props:{href:{default:""},src:{default:""},alt:{default:""},name:{default:""},imageClass:{default:""},nameClass:{default:""},aClass:{default:""}},setup(r){const t=b(),e=r,E=q("mb-6 md:mb-0",t.class),f=q("flex items-center",e.aClass),y=q("h-8 mr-3",e.imageClass),B=q("self-center text-2xl font-semibold whitespace-nowrap dark:text-white",e.nameClass);return(g,Z)=>(c(),F("div",m({class:s(E)},g.$attrs),[l("a",{class:A(s(f)),href:g.href},[l("img",{alt:g.alt,class:A(s(y)),src:g.src},null,10,L),l("span",{class:A(s(B))},x(g.name),3)],10,P)],16))}}),S={class:"sr-only"},i=w({inheritAttrs:!1,__name:"FwbFooterIcon",props:{href:{default:""},ariaLabel:{default:""},srText:{default:""}},setup(r){const t=b(),E=r.href?"a":"span",f=q("text-gray-500 hover:text-gray-900 dark:hover:text-white",t.class);return(y,B)=>(c(),k(_(s(E)),m({"aria-label":y.ariaLabel,class:s(f),href:y.href},y.$attrs),{default:a(()=>[v(y.$slots,"default"),l("span",S,x(y.srText),1)]),_:3},16,["aria-label","class","href"]))}}),p=w({inheritAttrs:!1,__name:"FwbFooterLink",props:{href:{default:""},aClass:{default:""},component:{default:"a"}},setup(r){const t=b(),e=r,E=e.component==="a"?"a":T(e.component),f=e.component==="router-link"?"to":"href",y=q("hover:underline",e.aClass),B=q("mr-4 md:mr-6 last:mr-0",t.class);return(g,Z)=>(c(),F("li",m(g.$attrs,{class:s(B)}),[(c(),k(_(s(E)),M({[s(f)||""]:g.href,class:s(y)}),{default:a(()=>[v(g.$slots,"default")]),_:3},16,["class"]))],16))}}),u=w({inheritAttrs:!1,__name:"FwbFooterLinkGroup",setup(r){const t=b(),e=q("flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0",t.class);return(E,f)=>(c(),F("ul",m(E.$attrs,{class:s(e)}),[v(E.$slots,"default")],16))}}),$={class:"vp-raw"},V={__name:"FwbFooterExample",setup(r){return(t,e)=>(c(),F("div",$,[n(s(C),null,{default:a(()=>[n(s(h),{by:"Flowbite™","copyright-message":"All Rights Reserved.",href:"https://flowbite.com/"}),n(s(u),null,{default:a(()=>[n(s(p),{href:"#"},{default:a(()=>[o(" About ")]),_:1}),n(s(p),{href:"#"},{default:a(()=>[o(" Privacy Policy ")]),_:1}),n(s(p),{href:"#"},{default:a(()=>[o(" Licensing ")]),_:1}),n(s(p),{href:"#"},{default:a(()=>[o(" Contact ")]),_:1})]),_:1})]),_:1})]))}},R={class:"vp-raw"},j={class:"grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4"},H=l("h2",{class:"mb-6 text-sm font-semibold text-gray-400 uppercase"}," Company ",-1),G=l("h2",{class:"mb-6 text-sm font-semibold uppercase text-gray-400"}," Download ",-1),I=l("h2",{class:"mb-6 text-sm font-semibold uppercase text-gray-400"}," Legal ",-1),N=l("h2",{class:"mb-6 text-sm font-semibold uppercase text-gray-400"}," Download ",-1),O={class:"py-6 px-4 bg-gray-700 md:flex md:items-center md:justify-between"},U={class:"flex mt-4 space-x-6 sm:justify-center md:mt-0"},z=l("svg",{"aria-hidden":"true",class:"w-4 h-4",fill:"currentColor",viewBox:"0 0 8 19",xmlns:"http://www.w3.org/2000/svg"},[l("path",{"clip-rule":"evenodd",d:"M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z","fill-rule":"evenodd"})],-1),W=l("svg",{"aria-hidden":"true",class:"w-4 h-4",fill:"currentColor",viewBox:"0 0 21 16",xmlns:"http://www.w3.org/2000/svg"},[l("path",{d:"M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"})],-1),J=l("svg",{"aria-hidden":"true",class:"w-4 h-4",fill:"currentColor",viewBox:"0 0 20 17",xmlns:"http://www.w3.org/2000/svg"},[l("path",{"clip-rule":"evenodd",d:"M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z","fill-rule":"evenodd"})],-1),Q=l("svg",{"aria-hidden":"true",class:"w-4 h-4",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[l("path",{"clip-rule":"evenodd",d:"M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z","fill-rule":"evenodd"})],-1),K=l("svg",{"aria-hidden":"true",class:"w-4 h-4",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[l("path",{"clip-rule":"evenodd",d:"M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z","fill-rule":"evenodd"})],-1),X={__name:"FwbFooterExampleSitemapLinks",setup(r){return(t,e)=>(c(),F("div",R,[n(s(C),{"footer-type":"sitemap"},{default:a(()=>[l("div",j,[l("div",null,[H,n(s(u),{class:"text-gray-300 flex flex-col items-start"},{default:a(()=>[n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" About ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Careers ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Brand Center ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Blog ")]),_:1})]),_:1})]),l("div",null,[G,n(s(u),{class:"text-gray-300 flex flex-col items-start"},{default:a(()=>[n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Discord Server ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Twitter ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Facebook ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Contact Us ")]),_:1})]),_:1})]),l("div",null,[I,n(s(u),{class:"text-gray-300 flex flex-col items-start"},{default:a(()=>[n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Privacy Policy ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Licensing ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Terms & Conditions ")]),_:1})]),_:1})]),l("div",null,[N,n(s(u),{class:"text-gray-300 flex flex-col items-start"},{default:a(()=>[n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" iOS ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Android ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Windows ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" MacOS ")]),_:1})]),_:1})])]),l("div",O,[n(s(h),{by:"Flowbite™",class:"text-sm text-gray-300 sm:text-center",href:"/"}),l("div",U,[n(s(i),{href:"/","sr-text":"Facebook page"},{default:a(()=>[z]),_:1}),n(s(i),{href:"/","sr-text":"Discord community"},{default:a(()=>[W]),_:1}),n(s(i),{href:"/","sr-text":"Twitter page"},{default:a(()=>[J]),_:1}),n(s(i),{href:"/","sr-text":"GitHub account"},{default:a(()=>[Q]),_:1}),n(s(i),{href:"/","sr-text":"Dribbble account"},{default:a(()=>[K]),_:1})])])]),_:1})]))}},Y={class:"vp-raw w-full"},ss={class:"md:flex md:justify-between"},ns={class:"grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3"},as=l("h2",{class:"mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white"}," Resources ",-1),ls=l("h2",{class:"mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white"}," Follow us ",-1),os=l("h2",{class:"mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white"}," Legal ",-1),ps=l("hr",{class:"my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8"},null,-1),ts={class:"sm:flex sm:items-center sm:justify-between"},es={class:"flex mt-4 space-x-6 sm:justify-center sm:mt-0"},rs=l("svg",{"aria-hidden":"true",class:"w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white",fill:"currentColor",viewBox:"0 0 24 24"},[l("path",{"clip-rule":"evenodd",d:"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z","fill-rule":"evenodd"})],-1),cs=l("svg",{"aria-hidden":"true",class:"w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white",fill:"currentColor",viewBox:"0 0 21 16",xmlns:"http://www.w3.org/2000/svg"},[l("path",{d:"M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"})],-1),Es=l("svg",{"aria-hidden":"true",class:"w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white",fill:"currentColor",viewBox:"0 0 20 17",xmlns:"http://www.w3.org/2000/svg"},[l("path",{"clip-rule":"evenodd",d:"M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z","fill-rule":"evenodd"})],-1),ys=l("svg",{"aria-hidden":"true",class:"w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[l("path",{"clip-rule":"evenodd",d:"M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z","fill-rule":"evenodd"})],-1),is=l("svg",{"aria-hidden":"true",class:"w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[l("path",{"clip-rule":"evenodd",d:"M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z","fill-rule":"evenodd"})],-1),us={__name:"FwbFooterExampleSocialMediaIcons",setup(r){return(t,e)=>(c(),F("div",Y,[n(s(C),{"footer-type":"socialmedia"},{default:a(()=>[l("div",ss,[n(s(D),{alt:"Flowbite Logo",href:"https://flowbite.com",name:"Flowbite",src:"https://flowbite.com/docs/images/logo.svg"}),l("div",ns,[l("div",null,[as,n(s(u),{class:"flex flex-col items-start"},{default:a(()=>[n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Flowbite ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Tailwind CSS ")]),_:1})]),_:1})]),l("div",null,[ls,n(s(u),{class:"flex flex-col items-start"},{default:a(()=>[n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" GitHub ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Discord ")]),_:1})]),_:1})]),l("div",null,[os,n(s(u),{class:"flex flex-col items-start"},{default:a(()=>[n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Privacy Policy ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Terms & Conditions ")]),_:1})]),_:1})])])]),ps,l("div",ts,[n(s(h),{by:"Flowbite™",href:"/"}),l("div",es,[n(s(i),{href:"/"},{default:a(()=>[rs]),_:1}),n(s(i),{href:"/"},{default:a(()=>[cs]),_:1}),n(s(i),{href:"/"},{default:a(()=>[Es]),_:1}),n(s(i),{href:"/"},{default:a(()=>[ys]),_:1}),n(s(i),{href:"/"},{default:a(()=>[is]),_:1})])])]),_:1})]))}},Fs={class:"vp-raw relative"},fs={class:"overflow-scroll bg-white dark:bg-gray-900",style:{height:"200px"}},gs=l("div",{class:"px-20 py-5",style:{height:"800px"}},[l("p",{class:"mb-5"}," Lorem ipsum dolor sit amet consectetur adipisicing elit. "),l("p",null,"Perferendis, ducimus laboriosam veritatis dolorem culpa fugiat eum voluptate fugit, enim eaque aspernatur optio saepe doloremque hic voluptates est dignissimos ex quae?")],-1),qs={__name:"FwbFooterExampleSticky",setup(r){return(t,e)=>(c(),F("div",Fs,[l("div",fs,[gs,n(s(C),{class:"rounded-none",sticky:""},{default:a(()=>[n(s(h),{by:"Flowbite™","copyright-message":"All Rights Reserved.",href:"https://flowbite.com/"}),n(s(u),null,{default:a(()=>[n(s(p),{href:"#"},{default:a(()=>[o(" About ")]),_:1}),n(s(p),{href:"#"},{default:a(()=>[o(" Privacy Policy ")]),_:1}),n(s(p),{href:"#"},{default:a(()=>[o(" Licensing ")]),_:1}),n(s(p),{href:"#"},{default:a(()=>[o(" Contact ")]),_:1})]),_:1})]),_:1})])]))}},ds={class:"vp-raw"},hs={class:"w-full max-w-screen-xl mx-auto p-4 md:py-8"},ws={class:"sm:flex sm:items-center sm:justify-between"},bs=l("hr",{class:"my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8"},null,-1),ms={__name:"FwbFooterExampleWithLogo",setup(r){return(t,e)=>(c(),F("div",ds,[n(s(C),{"footer-type":"logo"},{default:a(()=>[l("div",hs,[l("div",ws,[n(s(D),{alt:"Flowbite Logo",href:"https://flowbite.com",name:"Flowbite",src:"https://flowbite.com/docs/images/logo.svg"}),n(s(u),{class:"flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400"},{default:a(()=>[n(s(p),{href:"/"},{default:a(()=>[o(" About ")]),_:1}),n(s(p),{href:"/"},{default:a(()=>[o(" Privacy Policy ")]),_:1}),n(s(p),{href:"/"},{default:a(()=>[o(" Licensing ")]),_:1}),n(s(p),{href:"/"},{default:a(()=>[o(" Contact ")]),_:1})]),_:1})]),bs,n(s(h),{by:"Flowbite™",href:"/"})])]),_:1})]))}},Cs=d('

Vue Footer - Flowbite ​

The footer is one of the most underestimated sections of a website being located at the very bottom of every page, however, it can be used as a way to try to convince users to stay on your website if they haven’t found the information they’ve been looking for inside the main content area.

Use this footer component to show a copyright notice and some helpful website links.

',5),Bs=d(`
vue
<template>
+  <fwb-footer>
+    <fwb-footer-copyright
+      by="Flowbite™"
+      href="https://flowbite.com/"
+      copyright-message="All Rights Reserved."
+    />
+    <fwb-footer-link-group>
+      <fwb-footer-link href="#">
+        About
+      </fwb-footer-link>
+      <fwb-footer-link href="#">
+        Privacy Policy
+      </fwb-footer-link>
+      <fwb-footer-link href="#">
+        Licensing
+      </fwb-footer-link>
+      <fwb-footer-link href="#">
+        Contact
+      </fwb-footer-link>
+    </fwb-footer-link-group>
+  </fwb-footer>
+</template>
+
+<script setup>
+import {
+  FwbFooter,
+  FwbFooterCopyright,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-footer>
+    <fwb-footer-copyright
+      by="Flowbite™"
+      href="https://flowbite.com/"
+      copyright-message="All Rights Reserved."
+    />
+    <fwb-footer-link-group>
+      <fwb-footer-link href="#">
+        About
+      </fwb-footer-link>
+      <fwb-footer-link href="#">
+        Privacy Policy
+      </fwb-footer-link>
+      <fwb-footer-link href="#">
+        Licensing
+      </fwb-footer-link>
+      <fwb-footer-link href="#">
+        Contact
+      </fwb-footer-link>
+    </fwb-footer-link-group>
+  </fwb-footer>
+</template>
+
+<script setup>
+import {
+  FwbFooter,
+  FwbFooterCopyright,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from 'flowbite-vue'
+</script>

Use this component to show your brand’s logo, a few website links and the copyright notice on a second row.

`,3),vs=d(`
vue
<template>
+  <fwb-footer footer-type="logo">
+    <div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
+      <div class="sm:flex sm:items-center sm:justify-between">
+        <fwb-footer-brand href="https://flowbite.com" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo" name="Flowbite" />
+        <fwb-footer-link-group class="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
+          <fwb-footer-link href="/">
+            About
+          </fwb-footer-link>
+          <fwb-footer-link href="/">
+            Privacy Policy
+          </fwb-footer-link>
+          <fwb-footer-link href="/">
+            Licensing
+          </fwb-footer-link>
+          <fwb-footer-link href="/">
+            Contact
+          </fwb-footer-link>
+        </fwb-footer-link-group>
+      </div>
+      <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8">
+      <fwb-footer-copyright href="/" by="Flowbite™" />
+    </div>
+  </fwb-footer>
+</template>
+
+<script setup>
+import {
+  FwbFooter,
+  FwbFooterCopyright,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-footer footer-type="logo">
+    <div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
+      <div class="sm:flex sm:items-center sm:justify-between">
+        <fwb-footer-brand href="https://flowbite.com" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo" name="Flowbite" />
+        <fwb-footer-link-group class="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
+          <fwb-footer-link href="/">
+            About
+          </fwb-footer-link>
+          <fwb-footer-link href="/">
+            Privacy Policy
+          </fwb-footer-link>
+          <fwb-footer-link href="/">
+            Licensing
+          </fwb-footer-link>
+          <fwb-footer-link href="/">
+            Contact
+          </fwb-footer-link>
+        </fwb-footer-link-group>
+      </div>
+      <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8">
+      <fwb-footer-copyright href="/" by="Flowbite™" />
+    </div>
+  </fwb-footer>
+</template>
+
+<script setup>
+import {
+  FwbFooter,
+  FwbFooterCopyright,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from 'flowbite-vue'
+</script>

Social media icons ​

This footer component can be used to show your brand’s logo, multiple rows of website links, a copyright notice and social media profile icons including Twitter, Facebook, Instagram, and more.

`,3),As=d(`
vue
<template>
+  <fwb-footer footer-type="socialmedia">
+    <div class="md:flex md:justify-between">
+      <fwb-footer-brand alt="Flowbite Logo" href="https://flowbite.com" name="Flowbite" src="https://flowbite.com/docs/images/logo.svg" />
+      <div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
+        <div>
+          <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
+            Resources
+          </h2>
+          <fwb-footer-link-group class="flex flex-col items-start">
+            <fwb-footer-link class="mb-4" href="/">
+              Flowbite
+            </fwb-footer-link>
+            <fwb-footer-link class="mb-4" href="/">
+              Tailwind CSS
+            </fwb-footer-link>
+          </fwb-footer-link-group>
+        </div>
+        <div>
+          <h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">
+            Follow us
+          </h2>
+          <fwb-footer-link-group class="flex flex-col items-start">
+            <fwb-footer-link class="mb-4" href="/">
+              GitHub
+            </fwb-footer-link>
+            <fwb-footer-link class="mb-4" href="/">
+              Discord
+            </fwb-footer-link>
+          </fwb-footer-link-group>
+        </div>
+        <div>
+          <h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">
+            Legal
+          </h2>
+          <fwb-footer-link-group class="flex flex-col items-start">
+            <fwb-footer-link class="mb-4" href="/">
+              Privacy Policy
+            </fwb-footer-link>
+            <fwb-footer-link class="mb-4" href="/">
+              Terms & Conditions
+            </fwb-footer-link>
+          </fwb-footer-link-group>
+        </div>
+      </div>
+    </div>
+    <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8">
+    <div class="sm:flex sm:items-center sm:justify-between">
+      <fwb-footer-copyright by="Flowbite™" href="/" />
+      <div class="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
+        <fwb-footer-icon href="/">
+          <svg aria-hidden="true" class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 24 24">
+            <path clip-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" fill-rule="evenodd" />
+          </svg>
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/">
+          <svg aria-hidden="true" class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 21 16" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z" />
+          </svg>
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/">
+          <svg aria-hidden="true" class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 20 17" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z" fill-rule="evenodd" />
+          </svg>
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/">
+          <svg aria-hidden="true" class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" fill-rule="evenodd" />
+          </svg>
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/">
+          <svg aria-hidden="true" class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z" fill-rule="evenodd" />
+          </svg>
+        </fwb-footer-icon>
+      </div>
+    </div>
+  </fwb-footer>
+</template>
+
+<script setup>
+import {
+  FwbFooter,
+  FwbFooterCopyright,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-footer footer-type="socialmedia">
+    <div class="md:flex md:justify-between">
+      <fwb-footer-brand alt="Flowbite Logo" href="https://flowbite.com" name="Flowbite" src="https://flowbite.com/docs/images/logo.svg" />
+      <div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
+        <div>
+          <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
+            Resources
+          </h2>
+          <fwb-footer-link-group class="flex flex-col items-start">
+            <fwb-footer-link class="mb-4" href="/">
+              Flowbite
+            </fwb-footer-link>
+            <fwb-footer-link class="mb-4" href="/">
+              Tailwind CSS
+            </fwb-footer-link>
+          </fwb-footer-link-group>
+        </div>
+        <div>
+          <h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">
+            Follow us
+          </h2>
+          <fwb-footer-link-group class="flex flex-col items-start">
+            <fwb-footer-link class="mb-4" href="/">
+              GitHub
+            </fwb-footer-link>
+            <fwb-footer-link class="mb-4" href="/">
+              Discord
+            </fwb-footer-link>
+          </fwb-footer-link-group>
+        </div>
+        <div>
+          <h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">
+            Legal
+          </h2>
+          <fwb-footer-link-group class="flex flex-col items-start">
+            <fwb-footer-link class="mb-4" href="/">
+              Privacy Policy
+            </fwb-footer-link>
+            <fwb-footer-link class="mb-4" href="/">
+              Terms & Conditions
+            </fwb-footer-link>
+          </fwb-footer-link-group>
+        </div>
+      </div>
+    </div>
+    <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8">
+    <div class="sm:flex sm:items-center sm:justify-between">
+      <fwb-footer-copyright by="Flowbite™" href="/" />
+      <div class="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
+        <fwb-footer-icon href="/">
+          <svg aria-hidden="true" class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 24 24">
+            <path clip-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" fill-rule="evenodd" />
+          </svg>
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/">
+          <svg aria-hidden="true" class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 21 16" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z" />
+          </svg>
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/">
+          <svg aria-hidden="true" class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 20 17" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z" fill-rule="evenodd" />
+          </svg>
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/">
+          <svg aria-hidden="true" class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" fill-rule="evenodd" />
+          </svg>
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/">
+          <svg aria-hidden="true" class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z" fill-rule="evenodd" />
+          </svg>
+        </fwb-footer-icon>
+      </div>
+    </div>
+  </fwb-footer>
+</template>
+
+<script setup>
+import {
+  FwbFooter,
+  FwbFooterCopyright,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from 'flowbite-vue'
+</script>

If you have a website with many pages you can use this footer component to show a sitemap spanning the entire width of a row followed below by a copyright notice and social media icons.

`,3),xs=d(`
vue
<template>
+  <fwb-footer footer-type="sitemap">
+    <div class="grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4">
+      <div>
+        <h2 class="mb-6 text-sm font-semibold text-gray-400 uppercase">
+          Company
+        </h2>
+        <fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
+          <fwb-footer-link class="mb-4" href="/">
+            About
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Careers
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Brand Center
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Blog
+          </fwb-footer-link>
+        </fwb-footer-link-group>
+      </div>
+      <div>
+        <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">
+          Download
+        </h2>
+        <fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
+          <fwb-footer-link class="mb-4" href="/">
+            Discord Server
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Twitter
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Facebook
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Contact Us
+          </fwb-footer-link>
+        </fwb-footer-link-group>
+      </div>
+      <div>
+        <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">
+          Legal
+        </h2>
+        <fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
+          <fwb-footer-link class="mb-4" href="/">
+            Privacy Policy
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Licensing
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Terms & Conditions
+          </fwb-footer-link>
+        </fwb-footer-link-group>
+      </div>
+      <div>
+        <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">
+          Download
+        </h2>
+        <fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
+          <fwb-footer-link class="mb-4" href="/">
+            iOS
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Android
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Windows
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            MacOS
+          </fwb-footer-link>
+        </fwb-footer-link-group>
+      </div>
+    </div>
+    <div class="py-6 px-4 bg-gray-700 md:flex md:items-center md:justify-between">
+      <fwb-footer-copyright by="Flowbite™" class="text-sm text-gray-300 sm:text-center" href="/" />
+      <div class="flex mt-4 space-x-6 sm:justify-center md:mt-0">
+        <fwb-footer-icon href="/" sr-text="Facebook page">
+          <svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 8 19" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z" fill-rule="evenodd" />
+          </svg>
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/" sr-text="Discord community">
+          <svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 21 16" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z" />
+          </svg>
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/" sr-text="Twitter page">
+          <svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 17" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z" fill-rule="evenodd" />
+          </svg>
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/" sr-text="GitHub account">
+          <svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" fill-rule="evenodd" />
+          </svg>
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/" sr-text="Dribbble account">
+          <svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z" fill-rule="evenodd" />
+          </svg>
+        </fwb-footer-icon>
+      </div>
+    </div>
+  </fwb-footer>
+</template>
+
+<script setup>
+import {
+  FwbFooter,
+  FwbFooterCopyright,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-footer footer-type="sitemap">
+    <div class="grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4">
+      <div>
+        <h2 class="mb-6 text-sm font-semibold text-gray-400 uppercase">
+          Company
+        </h2>
+        <fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
+          <fwb-footer-link class="mb-4" href="/">
+            About
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Careers
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Brand Center
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Blog
+          </fwb-footer-link>
+        </fwb-footer-link-group>
+      </div>
+      <div>
+        <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">
+          Download
+        </h2>
+        <fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
+          <fwb-footer-link class="mb-4" href="/">
+            Discord Server
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Twitter
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Facebook
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Contact Us
+          </fwb-footer-link>
+        </fwb-footer-link-group>
+      </div>
+      <div>
+        <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">
+          Legal
+        </h2>
+        <fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
+          <fwb-footer-link class="mb-4" href="/">
+            Privacy Policy
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Licensing
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Terms & Conditions
+          </fwb-footer-link>
+        </fwb-footer-link-group>
+      </div>
+      <div>
+        <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">
+          Download
+        </h2>
+        <fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
+          <fwb-footer-link class="mb-4" href="/">
+            iOS
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Android
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Windows
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            MacOS
+          </fwb-footer-link>
+        </fwb-footer-link-group>
+      </div>
+    </div>
+    <div class="py-6 px-4 bg-gray-700 md:flex md:items-center md:justify-between">
+      <fwb-footer-copyright by="Flowbite™" class="text-sm text-gray-300 sm:text-center" href="/" />
+      <div class="flex mt-4 space-x-6 sm:justify-center md:mt-0">
+        <fwb-footer-icon href="/" sr-text="Facebook page">
+          <svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 8 19" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z" fill-rule="evenodd" />
+          </svg>
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/" sr-text="Discord community">
+          <svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 21 16" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z" />
+          </svg>
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/" sr-text="Twitter page">
+          <svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 17" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z" fill-rule="evenodd" />
+          </svg>
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/" sr-text="GitHub account">
+          <svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" fill-rule="evenodd" />
+          </svg>
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/" sr-text="Dribbble account">
+          <svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z" fill-rule="evenodd" />
+          </svg>
+        </fwb-footer-icon>
+      </div>
+    </div>
+  </fwb-footer>
+</template>
+
+<script setup>
+import {
+  FwbFooter,
+  FwbFooterCopyright,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from 'flowbite-vue'
+</script>

Use this example to set create a sticky footer by using a fixed position to the bottom of the document page as the user scrolls up or down the main content area.

`,3),ks=d(`
vue
<template>
+  <fwb-footer sticky>
+    <fwb-footer-copyright
+      by="Flowbite™"
+      href="https://flowbite.com/"
+      copyright-message="All Rights Reserved."
+    />
+    <fwb-footer-link-group>
+      <fwb-footer-link href="#">
+        About
+      </fwb-footer-link>
+      <fwb-footer-link href="#">
+        Privacy Policy
+      </fwb-footer-link>
+      <fwb-footer-link href="#">
+        Licensing
+      </fwb-footer-link>
+      <fwb-footer-link href="#">
+        Contact
+      </fwb-footer-link>
+    </fwb-footer-link-group>
+  </fwb-footer>
+</template>
+
+<script setup>
+import {
+  FwbFooter,
+  FwbFooterCopyright,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-footer sticky>
+    <fwb-footer-copyright
+      by="Flowbite™"
+      href="https://flowbite.com/"
+      copyright-message="All Rights Reserved."
+    />
+    <fwb-footer-link-group>
+      <fwb-footer-link href="#">
+        About
+      </fwb-footer-link>
+      <fwb-footer-link href="#">
+        Privacy Policy
+      </fwb-footer-link>
+      <fwb-footer-link href="#">
+        Licensing
+      </fwb-footer-link>
+      <fwb-footer-link href="#">
+        Contact
+      </fwb-footer-link>
+    </fwb-footer-link-group>
+  </fwb-footer>
+</template>
+
+<script setup>
+import {
+  FwbFooter,
+  FwbFooterCopyright,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from 'flowbite-vue'
+</script>
`,1),Ts=JSON.parse('{"title":"Vue Footer - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/footer.md","filePath":"components/footer.md"}'),_s={name:"components/footer.md"},Ms=Object.assign(_s,{setup(r){return(t,e)=>(c(),F("div",null,[Cs,n(V),Bs,n(ms),vs,n(us),As,n(X),xs,n(qs),ks]))}});export{Ts as __pageData,Ms as default}; diff --git a/docs/.vitepress/dist/assets/components_footer.md.0590fa94.lean.js b/docs/.vitepress/dist/assets/components_footer.md.0590fa94.lean.js new file mode 100644 index 0000000..35733af --- /dev/null +++ b/docs/.vitepress/dist/assets/components_footer.md.0590fa94.lean.js @@ -0,0 +1 @@ +import{t as q,_ as h}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as w,Z as b,o as c,c as F,r as v,L as m,l as s,k as l,n as A,t as x,b as k,w as a,I as _,C as T,a3 as M,H as n,a as o,Q as d}from"./chunks/framework.3f630664.js";const C=w({inheritAttrs:!1,__name:"FwbFooter",props:{sticky:{type:Boolean,default:!1},footerType:{default:"default"}},setup(r){const t=r,e=b(),E=q(t.footerType==="sitemap"&&"bg-gray-800",t.footerType==="socialmedia"&&"p-4 bg-white sm:p-6 dark:bg-gray-800",t.footerType==="logo"&&"p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800",t.footerType==="default"&&"p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800",t.sticky&&"absolute bottom-0 left-0 z-20 w-full border-t border-gray-200 dark:border-gray-600",e.class);return(f,y)=>(c(),F("footer",m(f.$attrs,{class:s(E)}),[v(f.$slots,"default")],16))}}),P=["href"],L=["alt","src"],D=w({inheritAttrs:!1,__name:"FwbFooterBrand",props:{href:{default:""},src:{default:""},alt:{default:""},name:{default:""},imageClass:{default:""},nameClass:{default:""},aClass:{default:""}},setup(r){const t=b(),e=r,E=q("mb-6 md:mb-0",t.class),f=q("flex items-center",e.aClass),y=q("h-8 mr-3",e.imageClass),B=q("self-center text-2xl font-semibold whitespace-nowrap dark:text-white",e.nameClass);return(g,Z)=>(c(),F("div",m({class:s(E)},g.$attrs),[l("a",{class:A(s(f)),href:g.href},[l("img",{alt:g.alt,class:A(s(y)),src:g.src},null,10,L),l("span",{class:A(s(B))},x(g.name),3)],10,P)],16))}}),S={class:"sr-only"},i=w({inheritAttrs:!1,__name:"FwbFooterIcon",props:{href:{default:""},ariaLabel:{default:""},srText:{default:""}},setup(r){const t=b(),E=r.href?"a":"span",f=q("text-gray-500 hover:text-gray-900 dark:hover:text-white",t.class);return(y,B)=>(c(),k(_(s(E)),m({"aria-label":y.ariaLabel,class:s(f),href:y.href},y.$attrs),{default:a(()=>[v(y.$slots,"default"),l("span",S,x(y.srText),1)]),_:3},16,["aria-label","class","href"]))}}),p=w({inheritAttrs:!1,__name:"FwbFooterLink",props:{href:{default:""},aClass:{default:""},component:{default:"a"}},setup(r){const t=b(),e=r,E=e.component==="a"?"a":T(e.component),f=e.component==="router-link"?"to":"href",y=q("hover:underline",e.aClass),B=q("mr-4 md:mr-6 last:mr-0",t.class);return(g,Z)=>(c(),F("li",m(g.$attrs,{class:s(B)}),[(c(),k(_(s(E)),M({[s(f)||""]:g.href,class:s(y)}),{default:a(()=>[v(g.$slots,"default")]),_:3},16,["class"]))],16))}}),u=w({inheritAttrs:!1,__name:"FwbFooterLinkGroup",setup(r){const t=b(),e=q("flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0",t.class);return(E,f)=>(c(),F("ul",m(E.$attrs,{class:s(e)}),[v(E.$slots,"default")],16))}}),$={class:"vp-raw"},V={__name:"FwbFooterExample",setup(r){return(t,e)=>(c(),F("div",$,[n(s(C),null,{default:a(()=>[n(s(h),{by:"Flowbite™","copyright-message":"All Rights Reserved.",href:"https://flowbite.com/"}),n(s(u),null,{default:a(()=>[n(s(p),{href:"#"},{default:a(()=>[o(" About ")]),_:1}),n(s(p),{href:"#"},{default:a(()=>[o(" Privacy Policy ")]),_:1}),n(s(p),{href:"#"},{default:a(()=>[o(" Licensing ")]),_:1}),n(s(p),{href:"#"},{default:a(()=>[o(" Contact ")]),_:1})]),_:1})]),_:1})]))}},R={class:"vp-raw"},j={class:"grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4"},H=l("h2",{class:"mb-6 text-sm font-semibold text-gray-400 uppercase"}," Company ",-1),G=l("h2",{class:"mb-6 text-sm font-semibold uppercase text-gray-400"}," Download ",-1),I=l("h2",{class:"mb-6 text-sm font-semibold uppercase text-gray-400"}," Legal ",-1),N=l("h2",{class:"mb-6 text-sm font-semibold uppercase text-gray-400"}," Download ",-1),O={class:"py-6 px-4 bg-gray-700 md:flex md:items-center md:justify-between"},U={class:"flex mt-4 space-x-6 sm:justify-center md:mt-0"},z=l("svg",{"aria-hidden":"true",class:"w-4 h-4",fill:"currentColor",viewBox:"0 0 8 19",xmlns:"http://www.w3.org/2000/svg"},[l("path",{"clip-rule":"evenodd",d:"M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z","fill-rule":"evenodd"})],-1),W=l("svg",{"aria-hidden":"true",class:"w-4 h-4",fill:"currentColor",viewBox:"0 0 21 16",xmlns:"http://www.w3.org/2000/svg"},[l("path",{d:"M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"})],-1),J=l("svg",{"aria-hidden":"true",class:"w-4 h-4",fill:"currentColor",viewBox:"0 0 20 17",xmlns:"http://www.w3.org/2000/svg"},[l("path",{"clip-rule":"evenodd",d:"M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z","fill-rule":"evenodd"})],-1),Q=l("svg",{"aria-hidden":"true",class:"w-4 h-4",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[l("path",{"clip-rule":"evenodd",d:"M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z","fill-rule":"evenodd"})],-1),K=l("svg",{"aria-hidden":"true",class:"w-4 h-4",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[l("path",{"clip-rule":"evenodd",d:"M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z","fill-rule":"evenodd"})],-1),X={__name:"FwbFooterExampleSitemapLinks",setup(r){return(t,e)=>(c(),F("div",R,[n(s(C),{"footer-type":"sitemap"},{default:a(()=>[l("div",j,[l("div",null,[H,n(s(u),{class:"text-gray-300 flex flex-col items-start"},{default:a(()=>[n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" About ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Careers ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Brand Center ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Blog ")]),_:1})]),_:1})]),l("div",null,[G,n(s(u),{class:"text-gray-300 flex flex-col items-start"},{default:a(()=>[n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Discord Server ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Twitter ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Facebook ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Contact Us ")]),_:1})]),_:1})]),l("div",null,[I,n(s(u),{class:"text-gray-300 flex flex-col items-start"},{default:a(()=>[n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Privacy Policy ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Licensing ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Terms & Conditions ")]),_:1})]),_:1})]),l("div",null,[N,n(s(u),{class:"text-gray-300 flex flex-col items-start"},{default:a(()=>[n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" iOS ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Android ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Windows ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" MacOS ")]),_:1})]),_:1})])]),l("div",O,[n(s(h),{by:"Flowbite™",class:"text-sm text-gray-300 sm:text-center",href:"/"}),l("div",U,[n(s(i),{href:"/","sr-text":"Facebook page"},{default:a(()=>[z]),_:1}),n(s(i),{href:"/","sr-text":"Discord community"},{default:a(()=>[W]),_:1}),n(s(i),{href:"/","sr-text":"Twitter page"},{default:a(()=>[J]),_:1}),n(s(i),{href:"/","sr-text":"GitHub account"},{default:a(()=>[Q]),_:1}),n(s(i),{href:"/","sr-text":"Dribbble account"},{default:a(()=>[K]),_:1})])])]),_:1})]))}},Y={class:"vp-raw w-full"},ss={class:"md:flex md:justify-between"},ns={class:"grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3"},as=l("h2",{class:"mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white"}," Resources ",-1),ls=l("h2",{class:"mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white"}," Follow us ",-1),os=l("h2",{class:"mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white"}," Legal ",-1),ps=l("hr",{class:"my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8"},null,-1),ts={class:"sm:flex sm:items-center sm:justify-between"},es={class:"flex mt-4 space-x-6 sm:justify-center sm:mt-0"},rs=l("svg",{"aria-hidden":"true",class:"w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white",fill:"currentColor",viewBox:"0 0 24 24"},[l("path",{"clip-rule":"evenodd",d:"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z","fill-rule":"evenodd"})],-1),cs=l("svg",{"aria-hidden":"true",class:"w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white",fill:"currentColor",viewBox:"0 0 21 16",xmlns:"http://www.w3.org/2000/svg"},[l("path",{d:"M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"})],-1),Es=l("svg",{"aria-hidden":"true",class:"w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white",fill:"currentColor",viewBox:"0 0 20 17",xmlns:"http://www.w3.org/2000/svg"},[l("path",{"clip-rule":"evenodd",d:"M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z","fill-rule":"evenodd"})],-1),ys=l("svg",{"aria-hidden":"true",class:"w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[l("path",{"clip-rule":"evenodd",d:"M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z","fill-rule":"evenodd"})],-1),is=l("svg",{"aria-hidden":"true",class:"w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[l("path",{"clip-rule":"evenodd",d:"M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z","fill-rule":"evenodd"})],-1),us={__name:"FwbFooterExampleSocialMediaIcons",setup(r){return(t,e)=>(c(),F("div",Y,[n(s(C),{"footer-type":"socialmedia"},{default:a(()=>[l("div",ss,[n(s(D),{alt:"Flowbite Logo",href:"https://flowbite.com",name:"Flowbite",src:"https://flowbite.com/docs/images/logo.svg"}),l("div",ns,[l("div",null,[as,n(s(u),{class:"flex flex-col items-start"},{default:a(()=>[n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Flowbite ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Tailwind CSS ")]),_:1})]),_:1})]),l("div",null,[ls,n(s(u),{class:"flex flex-col items-start"},{default:a(()=>[n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" GitHub ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Discord ")]),_:1})]),_:1})]),l("div",null,[os,n(s(u),{class:"flex flex-col items-start"},{default:a(()=>[n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Privacy Policy ")]),_:1}),n(s(p),{class:"mb-4",href:"/"},{default:a(()=>[o(" Terms & Conditions ")]),_:1})]),_:1})])])]),ps,l("div",ts,[n(s(h),{by:"Flowbite™",href:"/"}),l("div",es,[n(s(i),{href:"/"},{default:a(()=>[rs]),_:1}),n(s(i),{href:"/"},{default:a(()=>[cs]),_:1}),n(s(i),{href:"/"},{default:a(()=>[Es]),_:1}),n(s(i),{href:"/"},{default:a(()=>[ys]),_:1}),n(s(i),{href:"/"},{default:a(()=>[is]),_:1})])])]),_:1})]))}},Fs={class:"vp-raw relative"},fs={class:"overflow-scroll bg-white dark:bg-gray-900",style:{height:"200px"}},gs=l("div",{class:"px-20 py-5",style:{height:"800px"}},[l("p",{class:"mb-5"}," Lorem ipsum dolor sit amet consectetur adipisicing elit. "),l("p",null,"Perferendis, ducimus laboriosam veritatis dolorem culpa fugiat eum voluptate fugit, enim eaque aspernatur optio saepe doloremque hic voluptates est dignissimos ex quae?")],-1),qs={__name:"FwbFooterExampleSticky",setup(r){return(t,e)=>(c(),F("div",Fs,[l("div",fs,[gs,n(s(C),{class:"rounded-none",sticky:""},{default:a(()=>[n(s(h),{by:"Flowbite™","copyright-message":"All Rights Reserved.",href:"https://flowbite.com/"}),n(s(u),null,{default:a(()=>[n(s(p),{href:"#"},{default:a(()=>[o(" About ")]),_:1}),n(s(p),{href:"#"},{default:a(()=>[o(" Privacy Policy ")]),_:1}),n(s(p),{href:"#"},{default:a(()=>[o(" Licensing ")]),_:1}),n(s(p),{href:"#"},{default:a(()=>[o(" Contact ")]),_:1})]),_:1})]),_:1})])]))}},ds={class:"vp-raw"},hs={class:"w-full max-w-screen-xl mx-auto p-4 md:py-8"},ws={class:"sm:flex sm:items-center sm:justify-between"},bs=l("hr",{class:"my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8"},null,-1),ms={__name:"FwbFooterExampleWithLogo",setup(r){return(t,e)=>(c(),F("div",ds,[n(s(C),{"footer-type":"logo"},{default:a(()=>[l("div",hs,[l("div",ws,[n(s(D),{alt:"Flowbite Logo",href:"https://flowbite.com",name:"Flowbite",src:"https://flowbite.com/docs/images/logo.svg"}),n(s(u),{class:"flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400"},{default:a(()=>[n(s(p),{href:"/"},{default:a(()=>[o(" About ")]),_:1}),n(s(p),{href:"/"},{default:a(()=>[o(" Privacy Policy ")]),_:1}),n(s(p),{href:"/"},{default:a(()=>[o(" Licensing ")]),_:1}),n(s(p),{href:"/"},{default:a(()=>[o(" Contact ")]),_:1})]),_:1})]),bs,n(s(h),{by:"Flowbite™",href:"/"})])]),_:1})]))}},Cs=d("",5),Bs=d("",3),vs=d("",3),As=d("",3),xs=d("",3),ks=d("",1),Ts=JSON.parse('{"title":"Vue Footer - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/footer.md","filePath":"components/footer.md"}'),_s={name:"components/footer.md"},Ms=Object.assign(_s,{setup(r){return(t,e)=>(c(),F("div",null,[Cs,n(V),Bs,n(ms),vs,n(us),As,n(X),xs,n(qs),ks]))}});export{Ts as __pageData,Ms as default}; diff --git a/docs/.vitepress/dist/assets/components_heading.md.e8348a42.js b/docs/.vitepress/dist/assets/components_heading.md.e8348a42.js new file mode 100644 index 0000000..5113905 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_heading.md.e8348a42.js @@ -0,0 +1,97 @@ +import{t as h}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as u,Z as _,o as p,b as e,w as o,r as m,L as b,l,I as f,a as c,c as F,H as t,Q as r}from"./chunks/framework.3f630664.js";const E=u({inheritAttrs:!1,__name:"FwbHeading",props:{tag:{default:"h1"},color:{default:"text-gray-900 dark:text-white"},customSize:{default:""}},setup(a){const s=a,n={h1:"text-5xl font-extrabold",h2:"text-4xl font-bold",h3:"text-3xl font-bold",h4:"text-2xl font-bold",h5:"text-xl font-bold",h6:"text-lg font-bold"},y=_(),d=h("w-full",n[s.tag],s.color,s.customSize,y.class),g=s.tag;return(i,R)=>(p(),e(f(l(g)),b(i.$attrs,{class:l(d)}),{default:o(()=>[m(i.$slots,"default")]),_:3},16,["class"]))}}),v={__name:"FwbHExampleLevel1",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h1"},{default:o(()=>[c(" Heading 1 ")]),_:1}))}},w={__name:"FwbHExampleLevel2",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h2"},{default:o(()=>[c(" Heading 2 ")]),_:1}))}},A={__name:"FwbHExampleLevel3",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h3"},{default:o(()=>[c(" Heading 3 ")]),_:1}))}},H={__name:"FwbHExampleLevel4",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h4"},{default:o(()=>[c(" Heading 4 ")]),_:1}))}},C={__name:"FwbHExampleLevel5",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h5"},{default:o(()=>[c(" Heading 5 ")]),_:1}))}},D={__name:"FwbHExampleLevel6",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h6"},{default:o(()=>[c(" Heading 6 ")]),_:1}))}},x={__name:"FwbHExampleColor",setup(a){return(s,n)=>(p(),e(l(E),{color:"text-green-400"},{default:o(()=>[c(" Green heading ")]),_:1}))}},q={__name:"FwbHExampleCustom",setup(a){return(s,n)=>(p(),e(l(E),{class:"underline italic !text-xl"},{default:o(()=>[c(" Custom heading ")]),_:1}))}},T=r(`

Vue Heading - Flowbite ​

The heading component defines six levels of title elements from H1 to H6 that are used as titles and subtitles on a web page based on multiple styles and layouts ​

Heading one (H1) ​

Use the tag="h1" as the most important text element to indicate the title of your web page.

vue
<template>
+  <fwb-heading tag="h1">Heading 1</fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from 'flowbite-vue'
+</script>
<template>
+  <fwb-heading tag="h1">Heading 1</fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from 'flowbite-vue'
+</script>
`,5),k=r(`

Heading two (H2) ​

The H2 tag can be used as subtitles of the page’s sections.

vue
<template>
+  <fwb-heading tag="h2">Heading 2</fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from 'flowbite-vue'
+</script>
<template>
+  <fwb-heading tag="h2">Heading 2</fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from 'flowbite-vue'
+</script>
`,3),B=r(`

Heading three (H3) ​

Use the H3 tags inside sections that already have a H2 available.

vue
<template>
+  <fwb-heading tag="h3">Heading 3</fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from 'flowbite-vue'
+</script>
<template>
+  <fwb-heading tag="h3">Heading 3</fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from 'flowbite-vue'
+</script>
`,3),S=r(`

Heading four (H4) ​

The H4 can be generally used after H2 and H3 tags are already present and you need a more in-depth hierarchy.

vue
<template>
+  <fwb-heading tag="h4">Heading 4</fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from 'flowbite-vue'
+</script>
<template>
+  <fwb-heading tag="h4">Heading 4</fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from 'flowbite-vue'
+</script>
`,3),P=r(`

Heading five (H5) ​

The H5 tag is most often used in longer articles with other heading already available or in sidebars.

vue
<template>
+  <fwb-heading tag="h5">Heading 5</fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from 'flowbite-vue'
+</script>
<template>
+  <fwb-heading tag="h5">Heading 5</fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from 'flowbite-vue'
+</script>
`,3),V=r(`

Heading six (H6) ​

Using the H6 tag is quite rare because it means that you’ve already used all heading from H1 to H5, but you can still use it if you have a very complex article with lots of headings.

vue
<template>
+  <fwb-heading tag="h6">Heading 6</fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from 'flowbite-vue'
+</script>
<template>
+  <fwb-heading tag="h6">Heading 6</fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from 'flowbite-vue'
+</script>
`,3),I=r(`

Color ​

Use the color prop to set the text color.

vue
<template>
+  <fwb-heading color="text-green-400">Green eading</fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from 'flowbite-vue'
+</script>
<template>
+  <fwb-heading color="text-green-400">Green eading</fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from 'flowbite-vue'
+</script>
`,3),N=r(`

Custom classes ​

Use the class attribute to apply the tailwind classes.

vue
<template>
+  <fwb-heading class="!text-xl italic underline">Custom heading</fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from 'flowbite-vue'
+</script>
<template>
+  <fwb-heading class="!text-xl italic underline">Custom heading</fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from 'flowbite-vue'
+</script>
`,3),z=JSON.parse('{"title":"Vue Heading - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/heading.md","filePath":"components/heading.md"}'),$={name:"components/heading.md"},G=Object.assign($,{setup(a){return(s,n)=>(p(),F("div",null,[T,t(v),k,t(w),B,t(A),S,t(H),P,t(C),V,t(D),I,t(x),N,t(q)]))}});export{z as __pageData,G as default}; diff --git a/docs/.vitepress/dist/assets/components_heading.md.e8348a42.lean.js b/docs/.vitepress/dist/assets/components_heading.md.e8348a42.lean.js new file mode 100644 index 0000000..ee4c099 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_heading.md.e8348a42.lean.js @@ -0,0 +1 @@ +import{t as h}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as u,Z as _,o as p,b as e,w as o,r as m,L as b,l,I as f,a as c,c as F,H as t,Q as r}from"./chunks/framework.3f630664.js";const E=u({inheritAttrs:!1,__name:"FwbHeading",props:{tag:{default:"h1"},color:{default:"text-gray-900 dark:text-white"},customSize:{default:""}},setup(a){const s=a,n={h1:"text-5xl font-extrabold",h2:"text-4xl font-bold",h3:"text-3xl font-bold",h4:"text-2xl font-bold",h5:"text-xl font-bold",h6:"text-lg font-bold"},y=_(),d=h("w-full",n[s.tag],s.color,s.customSize,y.class),g=s.tag;return(i,R)=>(p(),e(f(l(g)),b(i.$attrs,{class:l(d)}),{default:o(()=>[m(i.$slots,"default")]),_:3},16,["class"]))}}),v={__name:"FwbHExampleLevel1",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h1"},{default:o(()=>[c(" Heading 1 ")]),_:1}))}},w={__name:"FwbHExampleLevel2",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h2"},{default:o(()=>[c(" Heading 2 ")]),_:1}))}},A={__name:"FwbHExampleLevel3",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h3"},{default:o(()=>[c(" Heading 3 ")]),_:1}))}},H={__name:"FwbHExampleLevel4",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h4"},{default:o(()=>[c(" Heading 4 ")]),_:1}))}},C={__name:"FwbHExampleLevel5",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h5"},{default:o(()=>[c(" Heading 5 ")]),_:1}))}},D={__name:"FwbHExampleLevel6",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h6"},{default:o(()=>[c(" Heading 6 ")]),_:1}))}},x={__name:"FwbHExampleColor",setup(a){return(s,n)=>(p(),e(l(E),{color:"text-green-400"},{default:o(()=>[c(" Green heading ")]),_:1}))}},q={__name:"FwbHExampleCustom",setup(a){return(s,n)=>(p(),e(l(E),{class:"underline italic !text-xl"},{default:o(()=>[c(" Custom heading ")]),_:1}))}},T=r("",5),k=r("",3),B=r("",3),S=r("",3),P=r("",3),V=r("",3),I=r("",3),N=r("",3),z=JSON.parse('{"title":"Vue Heading - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/heading.md","filePath":"components/heading.md"}'),$={name:"components/heading.md"},G=Object.assign($,{setup(a){return(s,n)=>(p(),F("div",null,[T,t(v),k,t(w),B,t(A),S,t(H),P,t(C),V,t(D),I,t(x),N,t(q)]))}});export{z as __pageData,G as default}; diff --git a/docs/.vitepress/dist/assets/components_image.md.e097f963.js b/docs/.vitepress/dist/assets/components_image.md.e097f963.js new file mode 100644 index 0000000..d481587 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_image.md.e097f963.js @@ -0,0 +1,125 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as y,o as a,c as i,k as E,n as r,t as m,b as e,l as o,H as p,Q as t}from"./chunks/framework.3f630664.js";const g=["src","alt"],u=["src","alt"],c=y({__name:"FwbImg",props:{caption:{default:""},src:{default:""},size:{default:"max-w-full"},alt:{default:""},imgClass:{default:"h-auto"},alignment:{default:""},captionClass:{default:"mt-2 text-sm text-center text-gray-500 dark:text-gray-400"}},setup(n){return(s,l)=>s.caption?(a(),i("figure",{key:0,class:r(s.size)},[E("img",{src:s.src,alt:s.alt,class:r([s.size,s.alignment,s.imgClass])},null,10,g),E("figcaption",{class:r(s.captionClass)},m(s.caption),3)],2)):(a(),i("img",{key:1,src:s.src,alt:s.alt,class:r([s.size,s.alignment,s.imgClass])},null,10,u))}}),d={__name:"FwbImgExample",setup(n){return(s,l)=>(a(),e(o(c),{alt:"flowbite-vue",src:"https://flowbite-svelte.com/images/examples/image-1.jpg"}))}},F={__name:"FwbImgExampleCaption",setup(n){return(s,l)=>(a(),e(o(c),{alt:"flowbite-vue",caption:"flowbite-vue",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},h={__name:"FwbImgExampleSize",setup(n){return(s,l)=>(a(),e(o(c),{alt:"flowbite-vue",size:"max-w-md",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},_={__name:"FwbImgExampleAlign",setup(n){return(s,l)=>(a(),e(o(c),{alignment:"mx-auto",alt:"flowbite-vue",size:"max-w-md",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},b={__name:"FwbImgExampleGrayscale",setup(n){return(s,l)=>(a(),e(o(c),{alignment:"mx-auto",alt:"flowbite-vuw","img-class":"rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0",size:"max-w-lg",src:"https://flowbite-svelte.com/images/examples/content-gallery-3.png"}))}},f={__name:"FwbImgExampleCustom",setup(n){return(s,l)=>(a(),e(o(c),{alignment:"mx-auto",alt:"flowbite-vue","img-class":"rounded-lg border-[1px]",size:"max-w-lg",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},w=t(`

Vue Images - Flowbite ​

The image component can be used to embed images inside the web page in articles and sections based on multiple styles, sizes, layouts and hover animations ​

Default image ​

Use this example to show the a responsive image that won’t grow beyond the maximum original width.

vue
<template>
+  <fwb-img
+    alt="flowbite-vue"
+    src="/images/examples/image.png"
+  />
+</template>
+
+<script setup>
+import { FwbImg } from 'flowbite-vue'
+</script>
<template>
+  <fwb-img
+    alt="flowbite-vue"
+    src="/images/examples/image.png"
+  />
+</template>
+
+<script setup>
+import { FwbImg } from 'flowbite-vue'
+</script>
`,5),v=t(`

Image caption ​

This example can be used to add a caption for the image often used inside articles. Use caption-class to override the cation.

vue
<template>
+  <fwb-img
+    alt="flowbite-vue"
+    caption="flowbite-vue"
+    src="/images/examples/image.png"
+  />
+</template>
+
+<script setup>
+import { FwbImg } from 'flowbite-vue'
+</script>
<template>
+  <fwb-img
+    alt="flowbite-vue"
+    caption="flowbite-vue"
+    src="/images/examples/image.png"
+  />
+</template>
+
+<script setup>
+import { FwbImg } from 'flowbite-vue'
+</script>
`,3),q=t(`

Sizes ​

Set the size of the image using the w-size and h-size or max-w-size utility classes from Tailwind CSS to set the width and height of the element.

vue
<template>
+  <fwb-img
+    alt="flowbite-vue"
+    size="max-w-md"
+    src="/images/examples/image.png"
+  />
+</template>
+
+<script setup>
+import { FwbImg } from 'flowbite-vue'
+</script>
<template>
+  <fwb-img
+    alt="flowbite-vue"
+    size="max-w-md"
+    src="/images/examples/image.png"
+  />
+</template>
+
+<script setup>
+import { FwbImg } from 'flowbite-vue'
+</script>
`,3),C=t(`

Alignment ​

Align the image component to the center or right side of the document page using mx-auto and ml-auto margin styles.

vue
<template>
+  <fwb-img
+    alignment="mx-auto"
+    alt="flowbite-vue"
+    size="max-w-md"
+    src="/images/examples/image.png"
+  />
+</template>
+
+<script setup>
+import { FwbImg } from 'flowbite-vue'
+</script>
<template>
+  <fwb-img
+    alignment="mx-auto"
+    alt="flowbite-vue"
+    size="max-w-md"
+    src="/images/examples/image.png"
+  />
+</template>
+
+<script setup>
+import { FwbImg } from 'flowbite-vue'
+</script>
`,3),A=t(`

Grayscale ​

Use the filter option and apply a grayscale to the image element using the grayscale class.

vue
<template>
+  <fwb-img
+    alt="flowbite-vue"
+    img-class="rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0"
+    size="max-w-lg"
+    src="/images/examples/image.png"
+  />
+</template>
+
+<script setup>
+import { FwbImg } from 'flowbite-vue'
+</script>
<template>
+  <fwb-img
+    alt="flowbite-vue"
+    img-class="rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0"
+    size="max-w-lg"
+    src="/images/examples/image.png"
+  />
+</template>
+
+<script setup>
+import { FwbImg } from 'flowbite-vue'
+</script>
`,3),x=t(`

Custom classes ​

Use the img-class prop to apply tailwind classes.

vue
<template>
+  <fwb-img
+    alt="flowbite-vue"
+    img-class="rounded-lg border-[1px]"
+    size="max-w-lg"
+    src="/images/examples/image.png"
+  />
+</template>
+
+<script setup>
+import { FwbImg } from 'flowbite-vue'
+</script>
<template>
+  <fwb-img
+    alt="flowbite-vue"
+    img-class="rounded-lg border-[1px]"
+    size="max-w-lg"
+    src="/images/examples/image.png"
+  />
+</template>
+
+<script setup>
+import { FwbImg } from 'flowbite-vue'
+</script>
`,3),k=JSON.parse('{"title":"Vue Images - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/image.md","filePath":"components/image.md"}'),B={name:"components/image.md"},I=Object.assign(B,{setup(n){return(s,l)=>(a(),i("div",null,[w,p(d),v,p(F),q,p(h),C,p(_),A,p(b),x,p(f)]))}});export{k as __pageData,I as default}; diff --git a/docs/.vitepress/dist/assets/components_image.md.e097f963.lean.js b/docs/.vitepress/dist/assets/components_image.md.e097f963.lean.js new file mode 100644 index 0000000..3ace4cb --- /dev/null +++ b/docs/.vitepress/dist/assets/components_image.md.e097f963.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as y,o as a,c as i,k as E,n as r,t as m,b as e,l as o,H as p,Q as t}from"./chunks/framework.3f630664.js";const g=["src","alt"],u=["src","alt"],c=y({__name:"FwbImg",props:{caption:{default:""},src:{default:""},size:{default:"max-w-full"},alt:{default:""},imgClass:{default:"h-auto"},alignment:{default:""},captionClass:{default:"mt-2 text-sm text-center text-gray-500 dark:text-gray-400"}},setup(n){return(s,l)=>s.caption?(a(),i("figure",{key:0,class:r(s.size)},[E("img",{src:s.src,alt:s.alt,class:r([s.size,s.alignment,s.imgClass])},null,10,g),E("figcaption",{class:r(s.captionClass)},m(s.caption),3)],2)):(a(),i("img",{key:1,src:s.src,alt:s.alt,class:r([s.size,s.alignment,s.imgClass])},null,10,u))}}),d={__name:"FwbImgExample",setup(n){return(s,l)=>(a(),e(o(c),{alt:"flowbite-vue",src:"https://flowbite-svelte.com/images/examples/image-1.jpg"}))}},F={__name:"FwbImgExampleCaption",setup(n){return(s,l)=>(a(),e(o(c),{alt:"flowbite-vue",caption:"flowbite-vue",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},h={__name:"FwbImgExampleSize",setup(n){return(s,l)=>(a(),e(o(c),{alt:"flowbite-vue",size:"max-w-md",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},_={__name:"FwbImgExampleAlign",setup(n){return(s,l)=>(a(),e(o(c),{alignment:"mx-auto",alt:"flowbite-vue",size:"max-w-md",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},b={__name:"FwbImgExampleGrayscale",setup(n){return(s,l)=>(a(),e(o(c),{alignment:"mx-auto",alt:"flowbite-vuw","img-class":"rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0",size:"max-w-lg",src:"https://flowbite-svelte.com/images/examples/content-gallery-3.png"}))}},f={__name:"FwbImgExampleCustom",setup(n){return(s,l)=>(a(),e(o(c),{alignment:"mx-auto",alt:"flowbite-vue","img-class":"rounded-lg border-[1px]",size:"max-w-lg",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},w=t("",5),v=t("",3),q=t("",3),C=t("",3),A=t("",3),x=t("",3),k=JSON.parse('{"title":"Vue Images - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/image.md","filePath":"components/image.md"}'),B={name:"components/image.md"},I=Object.assign(B,{setup(n){return(s,l)=>(a(),i("div",null,[w,p(d),v,p(F),q,p(h),C,p(_),A,p(b),x,p(f)]))}});export{k as __pageData,I as default}; diff --git a/docs/.vitepress/dist/assets/components_input.md.455fa912.js b/docs/.vitepress/dist/assets/components_input.md.455fa912.js new file mode 100644 index 0000000..bccab72 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_input.md.455fa912.js @@ -0,0 +1,275 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as o}from"./chunks/FwbInput.vue_vue_type_script_setup_true_lang.a210c4c5.js";import{d as E,h as y,o as e,c as i,H as l,l as p,b as m,w as u,a as F,k as d,Q as t}from"./chunks/framework.3f630664.js";import{_ as q}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";import{_ as g}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import"./chunks/index.b15c605d.js";import"./chunks/index.6b4d4439.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const C={class:"vp-raw"},h=E({__name:"FwbInputExample",setup(r){const s=y("");return(c,a)=>(e(),i("div",C,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"First name",placeholder:"enter your first name"},null,8,["modelValue"])]))}}),f={class:"vp-raw grid gap-2"},b=E({__name:"FwbInputExampleSize",setup(r){const s=y("");return(c,a)=>(e(),i("div",f,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Small",placeholder:"enter your name",size:"sm"},null,8,["modelValue"]),l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),label:"Medium",placeholder:"enter your name",size:"md"},null,8,["modelValue"]),l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[2]||(a[2]=n=>s.value=n),label:"Large",placeholder:"enter your name",size:"lg"},null,8,["modelValue"])]))}}),_=E({__name:"FwbInputExampleDisabled",setup(r){const s=y("");return(c,a)=>(e(),m(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),disabled:"",label:"First name",placeholder:"enter your first name"},null,8,["modelValue"]))}}),v={class:"vp-raw"},B=E({__name:"FwbInputExampleHelper",setup(r){const s=y("");return(c,a)=>(e(),i("div",v,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"First name",placeholder:"enter your first name"},{helper:u(()=>[F(" We'll never share your details. Read our "),l(p(q),{href:"#",color:"text-blue-600 dark:text-blue-500"},{default:u(()=>[F(" Privacy Policy ")]),_:1}),F(". ")]),_:1},8,["modelValue"])]))}}),w={class:"vp-raw"},A=d("svg",{"aria-hidden":"true",class:"w-5 h-5 text-gray-500 dark:text-gray-400",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[d("path",{d:"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1),D=E({__name:"FwbInputExamplePrefix",setup(r){const s=y("");return(c,a)=>(e(),i("div",w,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Search",placeholder:"enter your search query"},{prefix:u(()=>[A]),_:1},8,["modelValue"])]))}}),k={class:"vp-raw"},x=d("svg",{"aria-hidden":"true",class:"w-5 h-5 text-gray-500 dark:text-gray-400",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[d("path",{d:"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1),S=E({__name:"FwbInputExampleSuffix",setup(r){const s=y("");return(c,a)=>(e(),i("div",k,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Search",placeholder:"enter your search query",size:"lg"},{prefix:u(()=>[x]),suffix:u(()=>[l(p(g),null,{default:u(()=>[F("Search")]),_:1})]),_:1},8,["modelValue"])]))}}),V={class:"vp-raw"},T=E({__name:"FwbInputExampleRequired",setup(r){const s=y("");return(c,a)=>(e(),i("div",V,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"First name",placeholder:"enter your first name",required:""},null,8,["modelValue"])]))}}),I={class:"vp-raw"},P=d("hr",{class:"mt-4 border-0"},null,-1),z=E({__name:"FwbInputExampleValidation",setup(r){const s=y("");return(c,a)=>(e(),i("div",I,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),required:"",placeholder:"enter your email address",label:"Email","validation-status":"success"},null,8,["modelValue"]),P,l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),required:"",placeholder:"enter your email address",label:"Email","validation-status":"error"},{validationMessage:u(()=>[F(" Please enter a valid email address ")]),_:1},8,["modelValue"])]))}}),$=t('

Vue Input - Flowbite ​

Get started with a collection of input fields built with Tailwind CSS to start accepting data from the user based on multiple sizes, variants, and input types ​

TIP

Original reference: https://flowbite.com/docs/forms/input-field/

The input field is an important part of the form element that can be used to create interactive controls to accept data from the user based on multiple input types, such as text, email, number, password, URL, phone number, and more.

On this page you will find all of the input types based on multiple variants, styles, colors, and sizes built with the utility classes from Tailwind CSS and components from Flowbite.

Default ​

',7),R=t(`
vue
<template>
+  <fwb-input
+    v-model="name"
+    placeholder="enter your first name"
+    label="First name"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>
<template>
+  <fwb-input
+    v-model="name"
+    placeholder="enter your first name"
+    label="First name"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>

Size ​

`,2),N=t(`
vue
<template>
+  <fwb-input v-model="name" label="Small" placeholder="enter your name" size="sm" />
+  <fwb-input v-model="name" label="Medium" placeholder="enter your name" size="md" />
+  <fwb-input v-model="name" label="Large" placeholder="enter your name" size="lg" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>
<template>
+  <fwb-input v-model="name" label="Small" placeholder="enter your name" size="sm" />
+  <fwb-input v-model="name" label="Medium" placeholder="enter your name" size="md" />
+  <fwb-input v-model="name" label="Large" placeholder="enter your name" size="lg" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>

Disabled ​

`,2),M=t(`
vue
<template>
+  <fwb-input
+    v-model="name"
+    disabled
+    label="First name"
+    placeholder="enter your first name"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>
<template>
+  <fwb-input
+    v-model="name"
+    disabled
+    label="First name"
+    placeholder="enter your first name"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>

Required ​

`,2),U=t(`
vue
<template>
+  <fwb-input
+    v-model="name"
+    label="First name"
+    placeholder="enter your first name"
+    required
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>
<template>
+  <fwb-input
+    v-model="name"
+    label="First name"
+    placeholder="enter your first name"
+    required
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>

Slot - Helper ​

`,2),j=t(`
vue
<template>
+  <fwb-input
+    v-model="name"
+    label="First name"
+    placeholder="enter your first name"
+  >
+    <template #helper>
+      We'll never share your details. Read our
+      <fwb-a href="#" color="text-blue-600 dark:text-blue-500">
+        Privacy Policy
+      </fwb-a>.
+    </template>
+  </fwb-input>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbA, FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>
<template>
+  <fwb-input
+    v-model="name"
+    label="First name"
+    placeholder="enter your first name"
+  >
+    <template #helper>
+      We'll never share your details. Read our
+      <fwb-a href="#" color="text-blue-600 dark:text-blue-500">
+        Privacy Policy
+      </fwb-a>.
+    </template>
+  </fwb-input>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbA, FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>

Slot - Prefix ​

`,2),H=t(`
vue
<template>
+  <fwb-input v-model="name" label="Search" placeholder="enter your search query">
+    <template #prefix>
+      <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+      </svg>
+    </template>
+  </fwb-input>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>
<template>
+  <fwb-input v-model="name" label="Search" placeholder="enter your search query">
+    <template #prefix>
+      <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+      </svg>
+    </template>
+  </fwb-input>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>

Slot - Suffix ​

`,2),L=t(`
vue
<template>
+  <fwb-input
+    v-model="query"
+    label="Search"
+    placeholder="enter your search query"
+    size="lg"
+  >
+    <template #prefix>
+      <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+      </svg>
+    </template>
+    <template #suffix>
+      <fwb-button>Search</fwb-button>
+    </template>
+  </fwb-input>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbButton, FwbInput } from 'flowbite-vue'
+
+const query = ref('')
+</script>
<template>
+  <fwb-input
+    v-model="query"
+    label="Search"
+    placeholder="enter your search query"
+    size="lg"
+  >
+    <template #prefix>
+      <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+      </svg>
+    </template>
+    <template #suffix>
+      <fwb-button>Search</fwb-button>
+    </template>
+  </fwb-input>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbButton, FwbInput } from 'flowbite-vue'
+
+const query = ref('')
+</script>

Slot - Validation ​

  • Set validation status via validationStatus prop, which accepts 'success' or 'error'.
  • Add validation message via validationMessage slot.
`,3),O=t(`
vue
<template>
+  <fwb-input
+    v-model="email"
+    required
+    placeholder="enter your email address"
+    label="Email"
+    validation-status="success"
+  />
+  <hr class="mt-4 border-0">
+  <fwb-input
+    v-model="email"
+    required
+    placeholder="enter your email address"
+    label="Email"
+    validation-status="error"
+  >
+    <template #validationMessage>
+      Please enter a valid email address
+    </template>
+  </fwb-input>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const email = ref('')
+</script>
<template>
+  <fwb-input
+    v-model="email"
+    required
+    placeholder="enter your email address"
+    label="Email"
+    validation-status="success"
+  />
+  <hr class="mt-4 border-0">
+  <fwb-input
+    v-model="email"
+    required
+    placeholder="enter your email address"
+    label="Email"
+    validation-status="error"
+  >
+    <template #validationMessage>
+      Please enter a valid email address
+    </template>
+  </fwb-input>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const email = ref('')
+</script>
`,1),ns=JSON.parse('{"title":"Vue Input - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/input.md","filePath":"components/input.md"}'),W={name:"components/input.md"},ls=Object.assign(W,{setup(r){return(s,c)=>(e(),i("div",null,[$,l(h),R,l(b),N,l(_),M,l(T),U,l(B),j,l(D),H,l(S),L,l(z),O]))}});export{ns as __pageData,ls as default}; diff --git a/docs/.vitepress/dist/assets/components_input.md.455fa912.lean.js b/docs/.vitepress/dist/assets/components_input.md.455fa912.lean.js new file mode 100644 index 0000000..fd30310 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_input.md.455fa912.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as o}from"./chunks/FwbInput.vue_vue_type_script_setup_true_lang.a210c4c5.js";import{d as E,h as y,o as e,c as i,H as l,l as p,b as m,w as u,a as F,k as d,Q as t}from"./chunks/framework.3f630664.js";import{_ as q}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";import{_ as g}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import"./chunks/index.b15c605d.js";import"./chunks/index.6b4d4439.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const C={class:"vp-raw"},h=E({__name:"FwbInputExample",setup(r){const s=y("");return(c,a)=>(e(),i("div",C,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"First name",placeholder:"enter your first name"},null,8,["modelValue"])]))}}),f={class:"vp-raw grid gap-2"},b=E({__name:"FwbInputExampleSize",setup(r){const s=y("");return(c,a)=>(e(),i("div",f,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Small",placeholder:"enter your name",size:"sm"},null,8,["modelValue"]),l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),label:"Medium",placeholder:"enter your name",size:"md"},null,8,["modelValue"]),l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[2]||(a[2]=n=>s.value=n),label:"Large",placeholder:"enter your name",size:"lg"},null,8,["modelValue"])]))}}),_=E({__name:"FwbInputExampleDisabled",setup(r){const s=y("");return(c,a)=>(e(),m(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),disabled:"",label:"First name",placeholder:"enter your first name"},null,8,["modelValue"]))}}),v={class:"vp-raw"},B=E({__name:"FwbInputExampleHelper",setup(r){const s=y("");return(c,a)=>(e(),i("div",v,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"First name",placeholder:"enter your first name"},{helper:u(()=>[F(" We'll never share your details. Read our "),l(p(q),{href:"#",color:"text-blue-600 dark:text-blue-500"},{default:u(()=>[F(" Privacy Policy ")]),_:1}),F(". ")]),_:1},8,["modelValue"])]))}}),w={class:"vp-raw"},A=d("svg",{"aria-hidden":"true",class:"w-5 h-5 text-gray-500 dark:text-gray-400",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[d("path",{d:"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1),D=E({__name:"FwbInputExamplePrefix",setup(r){const s=y("");return(c,a)=>(e(),i("div",w,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Search",placeholder:"enter your search query"},{prefix:u(()=>[A]),_:1},8,["modelValue"])]))}}),k={class:"vp-raw"},x=d("svg",{"aria-hidden":"true",class:"w-5 h-5 text-gray-500 dark:text-gray-400",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[d("path",{d:"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1),S=E({__name:"FwbInputExampleSuffix",setup(r){const s=y("");return(c,a)=>(e(),i("div",k,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Search",placeholder:"enter your search query",size:"lg"},{prefix:u(()=>[x]),suffix:u(()=>[l(p(g),null,{default:u(()=>[F("Search")]),_:1})]),_:1},8,["modelValue"])]))}}),V={class:"vp-raw"},T=E({__name:"FwbInputExampleRequired",setup(r){const s=y("");return(c,a)=>(e(),i("div",V,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"First name",placeholder:"enter your first name",required:""},null,8,["modelValue"])]))}}),I={class:"vp-raw"},P=d("hr",{class:"mt-4 border-0"},null,-1),z=E({__name:"FwbInputExampleValidation",setup(r){const s=y("");return(c,a)=>(e(),i("div",I,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),required:"",placeholder:"enter your email address",label:"Email","validation-status":"success"},null,8,["modelValue"]),P,l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),required:"",placeholder:"enter your email address",label:"Email","validation-status":"error"},{validationMessage:u(()=>[F(" Please enter a valid email address ")]),_:1},8,["modelValue"])]))}}),$=t("",7),R=t("",2),N=t("",2),M=t("",2),U=t("",2),j=t("",2),H=t("",2),L=t("",3),O=t("",1),ns=JSON.parse('{"title":"Vue Input - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/input.md","filePath":"components/input.md"}'),W={name:"components/input.md"},ls=Object.assign(W,{setup(r){return(s,c)=>(e(),i("div",null,[$,l(h),R,l(b),N,l(_),M,l(T),U,l(B),j,l(D),H,l(S),L,l(z),O]))}});export{ns as __pageData,ls as default}; diff --git a/docs/.vitepress/dist/assets/components_jumbotron.md.7e83799d.js b/docs/.vitepress/dist/assets/components_jumbotron.md.7e83799d.js new file mode 100644 index 0000000..3490239 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_jumbotron.md.7e83799d.js @@ -0,0 +1,499 @@ +import{t as u}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as h,Z as f,g as d,o as l,c as e,b as x,w as c,a as t,t as g,n as F,I as w,k as s,r as C,L as v,H as n,l as y,Q as E}from"./chunks/framework.3f630664.js";const i=h({inheritAttrs:!1,__name:"FwbJumbotron",props:{headerLevel:{default:1},subText:{default:""},subTextClasses:{default:""},headerText:{default:""},headerClasses:{default:""}},setup(o){const a=o,p=f(),b=d(()=>u("bg-white dark:bg-gray-900 py-8 lg:py-16 px-4 mx-auto max-w-screen-xl text-center ",p.class)),m=d(()=>u("mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white",a.headerClasses)),q=d(()=>u("mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-0 lg:px-16 dark:text-gray-400",a.subTextClasses));return(r,Y)=>(l(),e("div",v(r.$attrs,{class:b.value}),[(l(),x(w(`h${r.headerLevel}`),{class:F(m.value)},{default:c(()=>[t(g(r.headerText),1)]),_:1},8,["class"])),s("div",{class:F(q.value)},g(r.subText),3),C(r.$slots,"default")],16))}}),k={class:"vp-raw"},B=s("div",{class:"flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0"},[s("a",{href:"#",class:"inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"},[t(" Get started "),s("svg",{class:"w-3.5 h-3.5 ml-2 rtl:rotate-180","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 14 10"},[s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M1 5h12m0 0L9 1m4 4L9 9"})])]),s("a",{href:"#",class:"inline-flex justify-center items-center py-3 px-5 sm:ml-4 text-base font-medium text-center text-gray-900 rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800"}," Learn more ")],-1),_={__name:"FwbJumbotronExample",setup(o){return(a,p)=>(l(),e("div",k,[n(y(i),{"header-text":"We invest in the world’s potential","sub-text":"Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth."},{default:c(()=>[B]),_:1})]))}},A={class:"vp-raw"},D=s("a",{href:"#",class:"text-blue-600 dark:text-blue-500 hover:underline font-medium text-lg inline-flex items-center mb-8"},[t("Read more about our app "),s("svg",{class:"w-3.5 h-3.5 ms-2 rtl:rotate-180","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 14 10"},[s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M1 5h12m0 0L9 1m4 4L9 9"})])],-1),j=s("div",null,[s("div",{class:"w-full p-6 space-y-8 sm:p-8 bg-white rounded-lg shadow-xl dark:bg-gray-800"},[s("h2",{class:"text-2xl font-bold text-gray-900 dark:text-white"}," Sign in to Flowbite "),s("form",{class:"mt-8 space-y-6",action:"#"},[s("div",null,[s("label",{for:"email",class:"block mb-2 text-sm font-medium text-gray-900 dark:text-white"},"Your email"),s("input",{id:"email",type:"email",name:"email",class:"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",placeholder:"name@company.com",required:""})]),s("div",null,[s("label",{for:"password",class:"block mb-2 text-sm font-medium text-gray-900 dark:text-white"},"Your password"),s("input",{id:"password",type:"password",name:"password",placeholder:"••••••••",class:"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",required:""})]),s("div",{class:"flex items-start"},[s("div",{class:"flex items-center h-5"},[s("input",{id:"remember","aria-describedby":"remember",name:"remember",type:"checkbox",class:"w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600",required:""})]),s("div",{class:"ms-3 text-sm"},[s("label",{for:"remember",class:"font-medium text-gray-500 dark:text-gray-400"},"Remember this device")]),s("a",{href:"#",class:"ms-auto text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"},"Lost Password?")]),s("button",{type:"submit",class:"w-full px-5 py-3 text-base font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 sm:w-auto dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"}," Login to your account "),s("div",{class:"text-sm font-medium text-gray-900 dark:text-white"},[t(" Not registered yet? "),s("a",{class:"text-blue-600 hover:underline dark:text-blue-500"},"Create account")])])])],-1),T={__name:"FwbJumbotronFormExample",setup(o){return(a,p)=>(l(),e("div",A,[n(y(i),{class:"lg:py-8 px-4 text-start","header-classes":"text-left","sub-text-classes":"lg:px-0","header-text":"We invest in the world’s potential","sub-text":"Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth."},{default:c(()=>[D,j]),_:1})]))}},L={class:"vp-raw"},J=s("div",{class:"flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0"},[s("a",{href:"#",class:"inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"},[t(" Get started "),s("svg",{class:"w-3.5 h-3.5 ml-2 rtl:rotate-180","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 14 10"},[s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M1 5h12m0 0L9 1m4 4L9 9"})])]),s("a",{href:"#",class:"inline-flex justify-center hover:text-gray-900 items-center py-3 px-5 sm:ml-4 text-base font-medium text-center text-white rounded-lg border border-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-400"}," Learn more ")],-1),P={__name:"FwbJumbotronBackgroundImageExample",setup(o){return(a,p)=>(l(),e("div",L,[n(y(i),{class:"bg-center bg-no-repeat bg-[url('https://flowbite.s3.amazonaws.com/docs/jumbotron/conference.jpg')] dark:bg-gray-700 bg-gray-700 bg-blend-multiply","header-classes":"text-white","sub-text-classes":"text-gray-300 dark:text-gray-300","header-text":"We invest in the world’s potential","sub-text":"Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth."},{default:c(()=>[J]),_:1})]))}},S={class:"vp-raw"},V=s("div",{class:"flex flex-col space-y-4 sm:flex-row sm:space-y-0 mb-8"},[s("a",{href:"#",class:"inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"},[t(" Get started "),s("svg",{class:"w-3.5 h-3.5 ml-2 rtl:rotate-180","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 14 10"},[s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M1 5h12m0 0L9 1m4 4L9 9"})])]),s("a",{href:"#",class:"inline-flex justify-center items-center py-3 px-5 sm:ml-4 text-base font-medium text-center text-gray-900 rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800"}," Learn more ")],-1),H=s("div",null,[s("iframe",{class:"mx-auto w-full h-64 rounded-lg sm:h-96 shadow-xl",src:"https://www.youtube.com/embed/KaLxCiilHns",title:"YouTube video player",frameborder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:""})],-1),I={__name:"FwbJumbotronVideoExample",setup(o){return(a,p)=>(l(),e("div",S,[n(y(i),{class:"lg:py-8 px-4","header-classes":"text-left","sub-text-classes":"lg:px-0","header-text":"We invest in the world’s potential","sub-text":"Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth."},{default:c(()=>[V,H]),_:1})]))}},$=E('

Vue Jumbotron - Flowbite ​

Use the jumbotron component to show a marketing message to your users based on a headline and image inside of a card box based on Tailwind CSS ​

TIP

Original reference: https://flowbite.com/docs/components/jumbotron/

The Jumbotron (hero) component can be used as the first section of your website with a focus on a marketing message to increase the likelihood of the user to continue browsing your website.

This UI component features a heading title, a short description, an optional CTA button, background image, gradient or solid background color and it’s generally inside of a card element.

The jumbotron component from Flowbite is responsive on all devices, natively supports dark mode and is coded with the utility classes from Tailwind CSS.

Default Jumbotron ​

Use this default example to show a title, description, and two CTA buttons for the jumbotron component.

',9),N=E(`
vue
<template>
+  <div
+  >
+    <fwb-jumbotron
+      header-text="We invest in the world’s potential"
+      sub-text="Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth."
+    >
+      <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
+        <a
+          href="#"
+          class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"
+        >
+          Get started
+          <svg
+            class="w-3.5 h-3.5 ml-2 rtl:rotate-180"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 14 10"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M1 5h12m0 0L9 1m4 4L9 9"
+            />
+          </svg>
+        </a>
+        <a
+          href="#"
+          class="inline-flex justify-center items-center py-3 px-5 sm:ml-4 text-base font-medium text-center text-gray-900 rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800"
+        >
+          Learn more
+        </a>
+      </div>
+    </fwb-jumbotron>
+  </div>
+</template>
+
+<script setup>
+import FwbJumbotron from '@/components/FwbJumbotron/FwbJumbotron.vue'
+</script>
<template>
+  <div
+  >
+    <fwb-jumbotron
+      header-text="We invest in the world’s potential"
+      sub-text="Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth."
+    >
+      <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
+        <a
+          href="#"
+          class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"
+        >
+          Get started
+          <svg
+            class="w-3.5 h-3.5 ml-2 rtl:rotate-180"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 14 10"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M1 5h12m0 0L9 1m4 4L9 9"
+            />
+          </svg>
+        </a>
+        <a
+          href="#"
+          class="inline-flex justify-center items-center py-3 px-5 sm:ml-4 text-base font-medium text-center text-gray-900 rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800"
+        >
+          Learn more
+        </a>
+      </div>
+    </fwb-jumbotron>
+  </div>
+</template>
+
+<script setup>
+import FwbJumbotron from '@/components/FwbJumbotron/FwbJumbotron.vue'
+</script>

Background image ​

Use this jumbotron to apply a background image with a darkening opacity effect to improve readability.

`,3),M=E(`
vue
<template>
+  <div
+  >
+    <fwb-jumbotron
+      class="bg-center bg-no-repeat bg-[url('https://flowbite.s3.amazonaws.com/docs/jumbotron/conference.jpg')] dark:bg-gray-700 bg-gray-700 bg-blend-multiply"
+      header-classes="text-white"
+      sub-text-classes="text-gray-300 dark:text-gray-300"
+      header-text="We invest in the world’s potential"
+      sub-text="Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth."
+    >
+      <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
+        <a
+          href="#"
+          class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"
+        >
+          Get started
+          <svg
+            class="w-3.5 h-3.5 ml-2 rtl:rotate-180"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 14 10"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M1 5h12m0 0L9 1m4 4L9 9"
+            />
+          </svg>
+        </a>
+        <a
+          href="#"
+          class="inline-flex justify-center hover:text-gray-900 items-center py-3 px-5 sm:ml-4 text-base font-medium text-center text-white rounded-lg border border-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-400"
+        >
+          Learn more
+        </a>
+      </div>
+    </fwb-jumbotron>
+  </div>
+</template>
+
+<script setup>
+import FwbJumbotron from '@/components/FwbJumbotron/FwbJumbotron.vue'
+</script>
<template>
+  <div
+  >
+    <fwb-jumbotron
+      class="bg-center bg-no-repeat bg-[url('https://flowbite.s3.amazonaws.com/docs/jumbotron/conference.jpg')] dark:bg-gray-700 bg-gray-700 bg-blend-multiply"
+      header-classes="text-white"
+      sub-text-classes="text-gray-300 dark:text-gray-300"
+      header-text="We invest in the world’s potential"
+      sub-text="Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth."
+    >
+      <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
+        <a
+          href="#"
+          class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"
+        >
+          Get started
+          <svg
+            class="w-3.5 h-3.5 ml-2 rtl:rotate-180"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 14 10"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M1 5h12m0 0L9 1m4 4L9 9"
+            />
+          </svg>
+        </a>
+        <a
+          href="#"
+          class="inline-flex justify-center hover:text-gray-900 items-center py-3 px-5 sm:ml-4 text-base font-medium text-center text-white rounded-lg border border-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-400"
+        >
+          Learn more
+        </a>
+      </div>
+    </fwb-jumbotron>
+  </div>
+</template>
+
+<script setup>
+import FwbJumbotron from '@/components/FwbJumbotron/FwbJumbotron.vue'
+</script>

This component can be used to feature a video together with a heading title, description, and CTA buttons.

`,3),W=E(`
vue
<template>
+  <div
+  >
+    <fwb-jumbotron
+      class="lg:py-8 px-4 "
+      header-classes="text-left"
+      sub-text-classes="lg:px-0"
+      header-text="We invest in the world’s potential"
+      sub-text="Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth."
+    >
+      <div class="flex flex-col space-y-4 sm:flex-row sm:space-y-0 mb-8">
+        <a
+          href="#"
+          class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"
+        >
+          Get started
+          <svg
+            class="w-3.5 h-3.5 ml-2 rtl:rotate-180"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 14 10"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M1 5h12m0 0L9 1m4 4L9 9"
+            />
+          </svg>
+        </a>
+        <a
+          href="#"
+          class="inline-flex justify-center items-center py-3 px-5 sm:ml-4 text-base font-medium text-center text-gray-900 rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800"
+        >
+          Learn more
+        </a>
+      </div>
+      <div>
+        <iframe
+          class="mx-auto w-full h-64 rounded-lg sm:h-96 shadow-xl"
+          src="https://www.youtube.com/embed/KaLxCiilHns"
+          title="YouTube video player"
+          frameborder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen
+        />
+      </div>
+    </fwb-jumbotron>
+  </div>
+</template>
+
+<script setup>
+import FwbJumbotron from '@/components/FwbJumbotron/FwbJumbotron.vue'
+</script>
<template>
+  <div
+  >
+    <fwb-jumbotron
+      class="lg:py-8 px-4 "
+      header-classes="text-left"
+      sub-text-classes="lg:px-0"
+      header-text="We invest in the world’s potential"
+      sub-text="Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth."
+    >
+      <div class="flex flex-col space-y-4 sm:flex-row sm:space-y-0 mb-8">
+        <a
+          href="#"
+          class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"
+        >
+          Get started
+          <svg
+            class="w-3.5 h-3.5 ml-2 rtl:rotate-180"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 14 10"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M1 5h12m0 0L9 1m4 4L9 9"
+            />
+          </svg>
+        </a>
+        <a
+          href="#"
+          class="inline-flex justify-center items-center py-3 px-5 sm:ml-4 text-base font-medium text-center text-gray-900 rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800"
+        >
+          Learn more
+        </a>
+      </div>
+      <div>
+        <iframe
+          class="mx-auto w-full h-64 rounded-lg sm:h-96 shadow-xl"
+          src="https://www.youtube.com/embed/KaLxCiilHns"
+          title="YouTube video player"
+          frameborder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen
+        />
+      </div>
+    </fwb-jumbotron>
+  </div>
+</template>
+
+<script setup>
+import FwbJumbotron from '@/components/FwbJumbotron/FwbJumbotron.vue'
+</script>

Authentication form ​

Use this component to show a sign in or register form as the first section of your website.

`,3),R=E(`
vue
<template>
+  <div
+  >
+    <fwb-jumbotron
+      class="lg:py-8 px-4 text-start "
+      header-classes="text-left"
+      sub-text-classes="lg:px-0"
+      header-text="We invest in the world’s potential"
+      sub-text="Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth."
+    >
+      <a
+        href="#"
+        class="text-blue-600 dark:text-blue-500 hover:underline font-medium text-lg inline-flex items-center mb-8"
+      >Read more about our app
+        <svg
+          class="w-3.5 h-3.5 ms-2 rtl:rotate-180"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 14 10"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M1 5h12m0 0L9 1m4 4L9 9"
+          />
+        </svg>
+      </a>
+      <div>
+        <div class="w-full p-6 space-y-8 sm:p-8 bg-white rounded-lg shadow-xl dark:bg-gray-800">
+          <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
+            Sign in to Flowbite
+          </h2>
+          <form
+            class="mt-8 space-y-6"
+            action="#"
+          >
+            <div>
+              <label
+                for="email"
+                class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+              >Your email</label>
+              <input
+                id="email"
+                type="email"
+                name="email"
+                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                placeholder="name@company.com"
+                required
+              >
+            </div>
+            <div>
+              <label
+                for="password"
+                class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+              >Your password</label>
+              <input
+                id="password"
+                type="password"
+                name="password"
+                placeholder="••••••••"
+                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                required
+              >
+            </div>
+            <div class="flex items-start">
+              <div class="flex items-center h-5">
+                <input
+                  id="remember"
+                  aria-describedby="remember"
+                  name="remember"
+                  type="checkbox"
+                  class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600"
+                  required
+                >
+              </div>
+              <div class="ms-3 text-sm">
+                <label
+                  for="remember"
+                  class="font-medium text-gray-500 dark:text-gray-400"
+                >Remember this device</label>
+              </div>
+              <a
+                href="#"
+                class="ms-auto text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+              >Lost Password?</a>
+            </div>
+            <button
+              type="submit"
+              class="w-full px-5 py-3 text-base font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 sm:w-auto dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            >
+              Login to your account
+            </button>
+            <div class="text-sm font-medium text-gray-900 dark:text-white">
+              Not registered yet? <a class="text-blue-600 hover:underline dark:text-blue-500">Create account</a>
+            </div>
+          </form>
+        </div>
+      </div>
+    </fwb-jumbotron>
+  </div>
+</template>
+
+<script setup>
+import FwbJumbotron from '@/components/FwbJumbotron/FwbJumbotron.vue'
+</script>
<template>
+  <div
+  >
+    <fwb-jumbotron
+      class="lg:py-8 px-4 text-start "
+      header-classes="text-left"
+      sub-text-classes="lg:px-0"
+      header-text="We invest in the world’s potential"
+      sub-text="Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth."
+    >
+      <a
+        href="#"
+        class="text-blue-600 dark:text-blue-500 hover:underline font-medium text-lg inline-flex items-center mb-8"
+      >Read more about our app
+        <svg
+          class="w-3.5 h-3.5 ms-2 rtl:rotate-180"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 14 10"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M1 5h12m0 0L9 1m4 4L9 9"
+          />
+        </svg>
+      </a>
+      <div>
+        <div class="w-full p-6 space-y-8 sm:p-8 bg-white rounded-lg shadow-xl dark:bg-gray-800">
+          <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
+            Sign in to Flowbite
+          </h2>
+          <form
+            class="mt-8 space-y-6"
+            action="#"
+          >
+            <div>
+              <label
+                for="email"
+                class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+              >Your email</label>
+              <input
+                id="email"
+                type="email"
+                name="email"
+                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                placeholder="name@company.com"
+                required
+              >
+            </div>
+            <div>
+              <label
+                for="password"
+                class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+              >Your password</label>
+              <input
+                id="password"
+                type="password"
+                name="password"
+                placeholder="••••••••"
+                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                required
+              >
+            </div>
+            <div class="flex items-start">
+              <div class="flex items-center h-5">
+                <input
+                  id="remember"
+                  aria-describedby="remember"
+                  name="remember"
+                  type="checkbox"
+                  class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600"
+                  required
+                >
+              </div>
+              <div class="ms-3 text-sm">
+                <label
+                  for="remember"
+                  class="font-medium text-gray-500 dark:text-gray-400"
+                >Remember this device</label>
+              </div>
+              <a
+                href="#"
+                class="ms-auto text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+              >Lost Password?</a>
+            </div>
+            <button
+              type="submit"
+              class="w-full px-5 py-3 text-base font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 sm:w-auto dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            >
+              Login to your account
+            </button>
+            <div class="text-sm font-medium text-gray-900 dark:text-white">
+              Not registered yet? <a class="text-blue-600 hover:underline dark:text-blue-500">Create account</a>
+            </div>
+          </form>
+        </div>
+      </div>
+    </fwb-jumbotron>
+  </div>
+</template>
+
+<script setup>
+import FwbJumbotron from '@/components/FwbJumbotron/FwbJumbotron.vue'
+</script>

API ​

Props ​

NameValuesDefault
headerLevel1, 2, 3,4, 5, 61
subTextstring\`\`
subTextClassesstring\`\`
headerTextstring\`\`
headerClassesstring\`\`

Slots ​

NameDescription
defaultjumbotron content
`,6),K=JSON.parse('{"title":"Vue Jumbotron - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/jumbotron.md","filePath":"components/jumbotron.md"}'),G={name:"components/jumbotron.md"},O=Object.assign(G,{setup(o){return(a,p)=>(l(),e("div",null,[$,n(_),N,n(P),M,n(I),W,n(T),R]))}});export{K as __pageData,O as default}; diff --git a/docs/.vitepress/dist/assets/components_jumbotron.md.7e83799d.lean.js b/docs/.vitepress/dist/assets/components_jumbotron.md.7e83799d.lean.js new file mode 100644 index 0000000..3df87b6 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_jumbotron.md.7e83799d.lean.js @@ -0,0 +1 @@ +import{t as u}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as h,Z as f,g as d,o as l,c as e,b as x,w as c,a as t,t as g,n as F,I as w,k as s,r as C,L as v,H as n,l as y,Q as E}from"./chunks/framework.3f630664.js";const i=h({inheritAttrs:!1,__name:"FwbJumbotron",props:{headerLevel:{default:1},subText:{default:""},subTextClasses:{default:""},headerText:{default:""},headerClasses:{default:""}},setup(o){const a=o,p=f(),b=d(()=>u("bg-white dark:bg-gray-900 py-8 lg:py-16 px-4 mx-auto max-w-screen-xl text-center ",p.class)),m=d(()=>u("mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white",a.headerClasses)),q=d(()=>u("mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-0 lg:px-16 dark:text-gray-400",a.subTextClasses));return(r,Y)=>(l(),e("div",v(r.$attrs,{class:b.value}),[(l(),x(w(`h${r.headerLevel}`),{class:F(m.value)},{default:c(()=>[t(g(r.headerText),1)]),_:1},8,["class"])),s("div",{class:F(q.value)},g(r.subText),3),C(r.$slots,"default")],16))}}),k={class:"vp-raw"},B=s("div",{class:"flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0"},[s("a",{href:"#",class:"inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"},[t(" Get started "),s("svg",{class:"w-3.5 h-3.5 ml-2 rtl:rotate-180","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 14 10"},[s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M1 5h12m0 0L9 1m4 4L9 9"})])]),s("a",{href:"#",class:"inline-flex justify-center items-center py-3 px-5 sm:ml-4 text-base font-medium text-center text-gray-900 rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800"}," Learn more ")],-1),_={__name:"FwbJumbotronExample",setup(o){return(a,p)=>(l(),e("div",k,[n(y(i),{"header-text":"We invest in the world’s potential","sub-text":"Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth."},{default:c(()=>[B]),_:1})]))}},A={class:"vp-raw"},D=s("a",{href:"#",class:"text-blue-600 dark:text-blue-500 hover:underline font-medium text-lg inline-flex items-center mb-8"},[t("Read more about our app "),s("svg",{class:"w-3.5 h-3.5 ms-2 rtl:rotate-180","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 14 10"},[s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M1 5h12m0 0L9 1m4 4L9 9"})])],-1),j=s("div",null,[s("div",{class:"w-full p-6 space-y-8 sm:p-8 bg-white rounded-lg shadow-xl dark:bg-gray-800"},[s("h2",{class:"text-2xl font-bold text-gray-900 dark:text-white"}," Sign in to Flowbite "),s("form",{class:"mt-8 space-y-6",action:"#"},[s("div",null,[s("label",{for:"email",class:"block mb-2 text-sm font-medium text-gray-900 dark:text-white"},"Your email"),s("input",{id:"email",type:"email",name:"email",class:"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",placeholder:"name@company.com",required:""})]),s("div",null,[s("label",{for:"password",class:"block mb-2 text-sm font-medium text-gray-900 dark:text-white"},"Your password"),s("input",{id:"password",type:"password",name:"password",placeholder:"••••••••",class:"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",required:""})]),s("div",{class:"flex items-start"},[s("div",{class:"flex items-center h-5"},[s("input",{id:"remember","aria-describedby":"remember",name:"remember",type:"checkbox",class:"w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600",required:""})]),s("div",{class:"ms-3 text-sm"},[s("label",{for:"remember",class:"font-medium text-gray-500 dark:text-gray-400"},"Remember this device")]),s("a",{href:"#",class:"ms-auto text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"},"Lost Password?")]),s("button",{type:"submit",class:"w-full px-5 py-3 text-base font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 sm:w-auto dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"}," Login to your account "),s("div",{class:"text-sm font-medium text-gray-900 dark:text-white"},[t(" Not registered yet? "),s("a",{class:"text-blue-600 hover:underline dark:text-blue-500"},"Create account")])])])],-1),T={__name:"FwbJumbotronFormExample",setup(o){return(a,p)=>(l(),e("div",A,[n(y(i),{class:"lg:py-8 px-4 text-start","header-classes":"text-left","sub-text-classes":"lg:px-0","header-text":"We invest in the world’s potential","sub-text":"Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth."},{default:c(()=>[D,j]),_:1})]))}},L={class:"vp-raw"},J=s("div",{class:"flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0"},[s("a",{href:"#",class:"inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"},[t(" Get started "),s("svg",{class:"w-3.5 h-3.5 ml-2 rtl:rotate-180","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 14 10"},[s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M1 5h12m0 0L9 1m4 4L9 9"})])]),s("a",{href:"#",class:"inline-flex justify-center hover:text-gray-900 items-center py-3 px-5 sm:ml-4 text-base font-medium text-center text-white rounded-lg border border-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-400"}," Learn more ")],-1),P={__name:"FwbJumbotronBackgroundImageExample",setup(o){return(a,p)=>(l(),e("div",L,[n(y(i),{class:"bg-center bg-no-repeat bg-[url('https://flowbite.s3.amazonaws.com/docs/jumbotron/conference.jpg')] dark:bg-gray-700 bg-gray-700 bg-blend-multiply","header-classes":"text-white","sub-text-classes":"text-gray-300 dark:text-gray-300","header-text":"We invest in the world’s potential","sub-text":"Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth."},{default:c(()=>[J]),_:1})]))}},S={class:"vp-raw"},V=s("div",{class:"flex flex-col space-y-4 sm:flex-row sm:space-y-0 mb-8"},[s("a",{href:"#",class:"inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"},[t(" Get started "),s("svg",{class:"w-3.5 h-3.5 ml-2 rtl:rotate-180","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 14 10"},[s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M1 5h12m0 0L9 1m4 4L9 9"})])]),s("a",{href:"#",class:"inline-flex justify-center items-center py-3 px-5 sm:ml-4 text-base font-medium text-center text-gray-900 rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800"}," Learn more ")],-1),H=s("div",null,[s("iframe",{class:"mx-auto w-full h-64 rounded-lg sm:h-96 shadow-xl",src:"https://www.youtube.com/embed/KaLxCiilHns",title:"YouTube video player",frameborder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:""})],-1),I={__name:"FwbJumbotronVideoExample",setup(o){return(a,p)=>(l(),e("div",S,[n(y(i),{class:"lg:py-8 px-4","header-classes":"text-left","sub-text-classes":"lg:px-0","header-text":"We invest in the world’s potential","sub-text":"Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth."},{default:c(()=>[V,H]),_:1})]))}},$=E("",9),N=E("",3),M=E("",3),W=E("",3),R=E("",6),K=JSON.parse('{"title":"Vue Jumbotron - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/jumbotron.md","filePath":"components/jumbotron.md"}'),G={name:"components/jumbotron.md"},O=Object.assign(G,{setup(o){return(a,p)=>(l(),e("div",null,[$,n(_),N,n(P),M,n(I),W,n(T),R]))}});export{K as __pageData,O as default}; diff --git a/docs/.vitepress/dist/assets/components_link.md.ae3cc9d2.js b/docs/.vitepress/dist/assets/components_link.md.ae3cc9d2.js new file mode 100644 index 0000000..6837c57 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_link.md.ae3cc9d2.js @@ -0,0 +1,47 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as r}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";import{o as p,b as i,w as n,a as s,l,H as a,c as E,Q as c}from"./chunks/framework.3f630664.js";import{_ as y}from"./chunks/FwbP.vue_vue_type_script_setup_true_lang.b05f1505.js";import"./chunks/useMergeClasses.5cec3a4e.js";const u={__name:"FwbAExample",setup(e){return(o,t)=>(p(),i(l(r),{href:"#"},{default:n(()=>[s(" Flowbite-vue ")]),_:1}))}},d={__name:"FwbAExampleParagraph",setup(e){return(o,t)=>(p(),i(l(y),null,{default:n(()=>[s(" The free updates that will be provided is based on the "),a(l(r),{href:"/",class:"underline hover:no-underline"},{default:n(()=>[s(" roadmap ")]),_:1}),s(" that we have laid out for this project. It is also possible that we will provide extra updates outside of the roadmap as well. ")]),_:1}))}},h={class:"vp-raw"},b={__name:"FwbAExampleCustom",setup(e){return(o,t)=>(p(),E("div",h,[a(l(r),{class:"text-orange-500 italic",href:"#"},{default:n(()=>[s(" Flowbite-vue ")]),_:1})]))}},_=c(`

Vue Links - Flowbite ​

The link component can be used to set hyperlinks from one page to another or to an external website when clicking on an inline text item, button, or card ​

Use this example to set default styles to an inline link element.

vue
<template>
+  <fwb-a href="#"> Flowbite-vue </fwb-a>
+</template>
+
+<script setup>
+import { FwbA } from 'flowbite-vue'
+</script>
<template>
+  <fwb-a href="#"> Flowbite-vue </fwb-a>
+</template>
+
+<script setup>
+import { FwbA } from 'flowbite-vue'
+</script>
`,5),m=c(`

Use this example to set a link inside a paragraph with an underline style.

vue
<template>
+  <fwb-p>
+    The free updates that will be provided is based on the <fwb-a href="#"
+    class="underline hover:no-underline">roadmap</fwb-a> that we have laid
+    out for this project. It is also possible that we will provide
+    extra updates outside of the roadmap as well.
+  </fwb-p>
+</template>
+
+<script setup>
+import { FwbA, FwbP } from 'flowbite-vue'
+</script>
<template>
+  <fwb-p>
+    The free updates that will be provided is based on the <fwb-a href="#"
+    class="underline hover:no-underline">roadmap</fwb-a> that we have laid
+    out for this project. It is also possible that we will provide
+    extra updates outside of the roadmap as well.
+  </fwb-p>
+</template>
+
+<script setup>
+import { FwbA, FwbP } from 'flowbite-vue'
+</script>
`,3),f=c(`

Custom classes ​

Use class attribute prop to apply the tailwind classes.

vue
<template>
+  <fwb-a class="text-orange-500 italic" href="#"> Flowbite-vue </fwb-a>
+</template>
+
+<script setup>
+import { FwbA } from 'flowbite-vue'
+</script>
<template>
+  <fwb-a class="text-orange-500 italic" href="#"> Flowbite-vue </fwb-a>
+</template>
+
+<script setup>
+import { FwbA } from 'flowbite-vue'
+</script>
`,3),C=JSON.parse('{"title":"Vue Links - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/link.md","filePath":"components/link.md"}'),g={name:"components/link.md"},D=Object.assign(g,{setup(e){return(o,t)=>(p(),E("div",null,[_,a(u),m,a(d),f,a(b)]))}});export{C as __pageData,D as default}; diff --git a/docs/.vitepress/dist/assets/components_link.md.ae3cc9d2.lean.js b/docs/.vitepress/dist/assets/components_link.md.ae3cc9d2.lean.js new file mode 100644 index 0000000..d12b783 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_link.md.ae3cc9d2.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as r}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";import{o as p,b as i,w as n,a as s,l,H as a,c as E,Q as c}from"./chunks/framework.3f630664.js";import{_ as y}from"./chunks/FwbP.vue_vue_type_script_setup_true_lang.b05f1505.js";import"./chunks/useMergeClasses.5cec3a4e.js";const u={__name:"FwbAExample",setup(e){return(o,t)=>(p(),i(l(r),{href:"#"},{default:n(()=>[s(" Flowbite-vue ")]),_:1}))}},d={__name:"FwbAExampleParagraph",setup(e){return(o,t)=>(p(),i(l(y),null,{default:n(()=>[s(" The free updates that will be provided is based on the "),a(l(r),{href:"/",class:"underline hover:no-underline"},{default:n(()=>[s(" roadmap ")]),_:1}),s(" that we have laid out for this project. It is also possible that we will provide extra updates outside of the roadmap as well. ")]),_:1}))}},h={class:"vp-raw"},b={__name:"FwbAExampleCustom",setup(e){return(o,t)=>(p(),E("div",h,[a(l(r),{class:"text-orange-500 italic",href:"#"},{default:n(()=>[s(" Flowbite-vue ")]),_:1})]))}},_=c("",5),m=c("",3),f=c("",3),C=JSON.parse('{"title":"Vue Links - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/link.md","filePath":"components/link.md"}'),g={name:"components/link.md"},D=Object.assign(g,{setup(e){return(o,t)=>(p(),E("div",null,[_,a(u),m,a(d),f,a(b)]))}});export{C as __pageData,D as default}; diff --git a/docs/.vitepress/dist/assets/components_list-group.md.e9bebe16.js b/docs/.vitepress/dist/assets/components_list-group.md.e9bebe16.js new file mode 100644 index 0000000..88f06e8 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_list-group.md.e9bebe16.js @@ -0,0 +1,205 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{a as n,_ as i}from"./chunks/FwbListGroupItem.vue_vue_type_script_setup_true_lang.9898f565.js";import{o as t,c as e,H as l,w as s,l as a,a as p,k as o,Q as r}from"./chunks/framework.3f630664.js";import"./chunks/simplifyTailwindClasses.275301d3.js";const u={class:"vp-raw"},g={__name:"FwbListGroupExample",setup(c){return(E,y)=>(t(),e("div",u,[l(a(i),null,{default:s(()=>[l(a(n),null,{default:s(()=>[p(" Item 1 ")]),_:1}),l(a(n),null,{default:s(()=>[p(" Item 2 ")]),_:1}),l(a(n),null,{default:s(()=>[p(" Item 3 ")]),_:1}),l(a(n),null,{default:s(()=>[p(" Item 4 ")]),_:1}),l(a(n),null,{default:s(()=>[p(" Item 5 ")]),_:1})]),_:1})]))}},F={class:"vp-raw"},m=o("svg",{class:"w-4 h-4 fill-current",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{"clip-rule":"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z","fill-rule":"evenodd"})],-1),w=o("svg",{class:"w-4 h-4 fill-current",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{d:"M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"})],-1),f=o("svg",{class:"w-4 h-4 fill-current",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{"clip-rule":"evenodd",d:"M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z","fill-rule":"evenodd"})],-1),d=o("svg",{class:"w-4 h-4 fill-current",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{"clip-rule":"evenodd",d:"M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z","fill-rule":"evenodd"})],-1),v={__name:"FwbListGroupExampleDisabled",setup(c){return(E,y)=>(t(),e("div",F,[l(a(i),null,{default:s(()=>[l(a(n),null,{prefix:s(()=>[m]),default:s(()=>[p(" Profile ")]),_:1}),l(a(n),null,{prefix:s(()=>[w]),default:s(()=>[p(" Settings ")]),_:1}),l(a(n),null,{prefix:s(()=>[f]),default:s(()=>[p(" Messages ")]),_:1}),l(a(n),{disabled:""},{prefix:s(()=>[d]),default:s(()=>[p(" Download ")]),_:1})]),_:1})]))}},q={class:"vp-raw flex flex-col"},h={__name:"FwbListGroupExampleHover",setup(c){return(E,y)=>(t(),e("div",q,[l(a(i),null,{default:s(()=>[l(a(n),{hover:""},{default:s(()=>[p(" Item 1 ")]),_:1}),l(a(n),{hover:""},{default:s(()=>[p(" Item 2 ")]),_:1}),l(a(n),{hover:""},{default:s(()=>[p(" Item 3 ")]),_:1}),l(a(n),{hover:""},{default:s(()=>[p(" Item 4 ")]),_:1}),l(a(n),{hover:""},{default:s(()=>[p(" Item 5 ")]),_:1})]),_:1})]))}},b={class:"vp-raw"},C=o("svg",{class:"w-4 h-4 fill-current",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{"clip-rule":"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z","fill-rule":"evenodd"})],-1),_=o("svg",{class:"w-4 h-4 fill-current",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{d:"M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"})],-1),B=o("svg",{class:"w-4 h-4 fill-current",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{"clip-rule":"evenodd",d:"M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z","fill-rule":"evenodd"})],-1),A=o("svg",{class:"w-4 h-4 fill-current",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{"clip-rule":"evenodd",d:"M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z","fill-rule":"evenodd"})],-1),D={__name:"FwbListGroupExampleIcon",setup(c){return(E,y)=>(t(),e("div",b,[l(a(i),null,{default:s(()=>[l(a(n),null,{prefix:s(()=>[C]),default:s(()=>[p(" Profile ")]),_:1}),l(a(n),null,{prefix:s(()=>[_]),default:s(()=>[p(" Settings ")]),_:1}),l(a(n),null,{prefix:s(()=>[B]),default:s(()=>[p(" Messages ")]),_:1}),l(a(n),null,{suffix:s(()=>[A]),default:s(()=>[p(" Download ")]),_:1})]),_:1})]))}},x=r('

Vue List Group - Flowbite ​

TIP

Original reference: https://flowbite.com/docs/components/list-group/

The list group component can be used to display a series of elements, buttons or links inside a single card component similar to a sidebar.

Default ​

',6),V=r(`
vue
<template>
+  <fwb-list-group>
+    <fwb-list-group-item>Item 1</fwb-list-group-item>
+    <fwb-list-group-item>Item 2</fwb-list-group-item>
+    <fwb-list-group-item>Item 3</fwb-list-group-item>
+    <fwb-list-group-item>Item 4</fwb-list-group-item>
+    <fwb-list-group-item>Item 5</fwb-list-group-item>
+  </fwb-list-group>
+</template>
+
+<script setup>
+import { FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
+</script>
<template>
+  <fwb-list-group>
+    <fwb-list-group-item>Item 1</fwb-list-group-item>
+    <fwb-list-group-item>Item 2</fwb-list-group-item>
+    <fwb-list-group-item>Item 3</fwb-list-group-item>
+    <fwb-list-group-item>Item 4</fwb-list-group-item>
+    <fwb-list-group-item>Item 5</fwb-list-group-item>
+  </fwb-list-group>
+</template>
+
+<script setup>
+import { FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
+</script>

Hover ​

`,2),z=r(`
vue
<template>
+  <fwb-list-group>
+    <fwb-list-group-item hover>Item 1</fwb-list-group-item>
+    <fwb-list-group-item hover>Item 2</fwb-list-group-item>
+    <fwb-list-group-item hover>Item 3</fwb-list-group-item>
+    <fwb-list-group-item hover>Item 4</fwb-list-group-item>
+    <fwb-list-group-item hover>Item 5</fwb-list-group-item>
+  </fwb-list-group>
+</template>
+
+<script setup>
+import { FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
+</script>
<template>
+  <fwb-list-group>
+    <fwb-list-group-item hover>Item 1</fwb-list-group-item>
+    <fwb-list-group-item hover>Item 2</fwb-list-group-item>
+    <fwb-list-group-item hover>Item 3</fwb-list-group-item>
+    <fwb-list-group-item hover>Item 4</fwb-list-group-item>
+    <fwb-list-group-item hover>Item 5</fwb-list-group-item>
+  </fwb-list-group>
+</template>
+
+<script setup>
+import { FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
+</script>

Icon ​

`,2),I=r(`
vue
<template>
+  <fwb-list-group>
+    <fwb-list-group-item>
+      <template #prefix>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" fill-rule="evenodd" />
+        </svg>
+      </template>
+      Profile
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <template #prefix>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z" />
+        </svg>
+      </template>
+      Settings
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <template #prefix>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" fill-rule="evenodd" />
+        </svg>
+      </template>
+      Messages
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <template #suffix>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" fill-rule="evenodd" />
+        </svg>
+      </template>
+      Download
+    </fwb-list-group-item>
+  </fwb-list-group>
+</template>
+
+<script setup>
+import { FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
+</script>
<template>
+  <fwb-list-group>
+    <fwb-list-group-item>
+      <template #prefix>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" fill-rule="evenodd" />
+        </svg>
+      </template>
+      Profile
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <template #prefix>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z" />
+        </svg>
+      </template>
+      Settings
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <template #prefix>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" fill-rule="evenodd" />
+        </svg>
+      </template>
+      Messages
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <template #suffix>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" fill-rule="evenodd" />
+        </svg>
+      </template>
+      Download
+    </fwb-list-group-item>
+  </fwb-list-group>
+</template>
+
+<script setup>
+import { FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
+</script>

Disabled ​

`,2),M=r(`
vue
<template>
+  <fwb-list-group>
+    <fwb-list-group-item>
+      <template #prefix>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" fill-rule="evenodd" />
+        </svg>
+      </template>
+      Profile
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <template #prefix>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z" />
+        </svg>
+      </template>
+      Settings
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <template #prefix>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" fill-rule="evenodd" />
+        </svg>
+      </template>
+      Messages
+    </fwb-list-group-item>
+    <fwb-list-group-item disabled>
+      <template #prefix>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" fill-rule="evenodd" />
+        </svg>
+      </template>
+      Download
+    </fwb-list-group-item>
+  </fwb-list-group>
+</template>
+
+<script setup>
+import { FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
+</script>
<template>
+  <fwb-list-group>
+    <fwb-list-group-item>
+      <template #prefix>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" fill-rule="evenodd" />
+        </svg>
+      </template>
+      Profile
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <template #prefix>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z" />
+        </svg>
+      </template>
+      Settings
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <template #prefix>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" fill-rule="evenodd" />
+        </svg>
+      </template>
+      Messages
+    </fwb-list-group-item>
+    <fwb-list-group-item disabled>
+      <template #prefix>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" fill-rule="evenodd" />
+        </svg>
+      </template>
+      Download
+    </fwb-list-group-item>
+  </fwb-list-group>
+</template>
+
+<script setup>
+import { FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
+</script>
`,1),G=JSON.parse('{"title":"Vue List Group - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/list-group.md","filePath":"components/list-group.md"}'),H={name:"components/list-group.md"},S=Object.assign(H,{setup(c){return(E,y)=>(t(),e("div",null,[x,l(g),V,l(h),z,l(D),I,l(v),M]))}});export{G as __pageData,S as default}; diff --git a/docs/.vitepress/dist/assets/components_list-group.md.e9bebe16.lean.js b/docs/.vitepress/dist/assets/components_list-group.md.e9bebe16.lean.js new file mode 100644 index 0000000..4b0b7da --- /dev/null +++ b/docs/.vitepress/dist/assets/components_list-group.md.e9bebe16.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{a as n,_ as i}from"./chunks/FwbListGroupItem.vue_vue_type_script_setup_true_lang.9898f565.js";import{o as t,c as e,H as l,w as s,l as a,a as p,k as o,Q as r}from"./chunks/framework.3f630664.js";import"./chunks/simplifyTailwindClasses.275301d3.js";const u={class:"vp-raw"},g={__name:"FwbListGroupExample",setup(c){return(E,y)=>(t(),e("div",u,[l(a(i),null,{default:s(()=>[l(a(n),null,{default:s(()=>[p(" Item 1 ")]),_:1}),l(a(n),null,{default:s(()=>[p(" Item 2 ")]),_:1}),l(a(n),null,{default:s(()=>[p(" Item 3 ")]),_:1}),l(a(n),null,{default:s(()=>[p(" Item 4 ")]),_:1}),l(a(n),null,{default:s(()=>[p(" Item 5 ")]),_:1})]),_:1})]))}},F={class:"vp-raw"},m=o("svg",{class:"w-4 h-4 fill-current",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{"clip-rule":"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z","fill-rule":"evenodd"})],-1),w=o("svg",{class:"w-4 h-4 fill-current",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{d:"M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"})],-1),f=o("svg",{class:"w-4 h-4 fill-current",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{"clip-rule":"evenodd",d:"M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z","fill-rule":"evenodd"})],-1),d=o("svg",{class:"w-4 h-4 fill-current",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{"clip-rule":"evenodd",d:"M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z","fill-rule":"evenodd"})],-1),v={__name:"FwbListGroupExampleDisabled",setup(c){return(E,y)=>(t(),e("div",F,[l(a(i),null,{default:s(()=>[l(a(n),null,{prefix:s(()=>[m]),default:s(()=>[p(" Profile ")]),_:1}),l(a(n),null,{prefix:s(()=>[w]),default:s(()=>[p(" Settings ")]),_:1}),l(a(n),null,{prefix:s(()=>[f]),default:s(()=>[p(" Messages ")]),_:1}),l(a(n),{disabled:""},{prefix:s(()=>[d]),default:s(()=>[p(" Download ")]),_:1})]),_:1})]))}},q={class:"vp-raw flex flex-col"},h={__name:"FwbListGroupExampleHover",setup(c){return(E,y)=>(t(),e("div",q,[l(a(i),null,{default:s(()=>[l(a(n),{hover:""},{default:s(()=>[p(" Item 1 ")]),_:1}),l(a(n),{hover:""},{default:s(()=>[p(" Item 2 ")]),_:1}),l(a(n),{hover:""},{default:s(()=>[p(" Item 3 ")]),_:1}),l(a(n),{hover:""},{default:s(()=>[p(" Item 4 ")]),_:1}),l(a(n),{hover:""},{default:s(()=>[p(" Item 5 ")]),_:1})]),_:1})]))}},b={class:"vp-raw"},C=o("svg",{class:"w-4 h-4 fill-current",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{"clip-rule":"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z","fill-rule":"evenodd"})],-1),_=o("svg",{class:"w-4 h-4 fill-current",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{d:"M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"})],-1),B=o("svg",{class:"w-4 h-4 fill-current",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{"clip-rule":"evenodd",d:"M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z","fill-rule":"evenodd"})],-1),A=o("svg",{class:"w-4 h-4 fill-current",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{"clip-rule":"evenodd",d:"M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z","fill-rule":"evenodd"})],-1),D={__name:"FwbListGroupExampleIcon",setup(c){return(E,y)=>(t(),e("div",b,[l(a(i),null,{default:s(()=>[l(a(n),null,{prefix:s(()=>[C]),default:s(()=>[p(" Profile ")]),_:1}),l(a(n),null,{prefix:s(()=>[_]),default:s(()=>[p(" Settings ")]),_:1}),l(a(n),null,{prefix:s(()=>[B]),default:s(()=>[p(" Messages ")]),_:1}),l(a(n),null,{suffix:s(()=>[A]),default:s(()=>[p(" Download ")]),_:1})]),_:1})]))}},x=r("",6),V=r("",2),z=r("",2),I=r("",2),M=r("",1),G=JSON.parse('{"title":"Vue List Group - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/list-group.md","filePath":"components/list-group.md"}'),H={name:"components/list-group.md"},S=Object.assign(H,{setup(c){return(E,y)=>(t(),e("div",null,[x,l(g),V,l(h),z,l(D),I,l(v),M]))}});export{G as __pageData,S as default}; diff --git a/docs/.vitepress/dist/assets/components_modal.md.48165202.js b/docs/.vitepress/dist/assets/components_modal.md.48165202.js new file mode 100644 index 0000000..21cd5eb --- /dev/null +++ b/docs/.vitepress/dist/assets/components_modal.md.48165202.js @@ -0,0 +1,133 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as g}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{d as w,h as _,j as C,o as e,c as t,k as s,n as f,r as u,e as F,X as q,W as D,H as a,w as E,a as b,t as A,l as m,b as k,Q as i}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const B=s("div",{class:"bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40"},null,-1),M={class:"relative bg-white rounded-lg shadow dark:bg-gray-700"},T=s("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[s("path",{"clip-rule":"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),z={key:0,class:"p-6 rounded-b border-gray-200 border-t dark:border-gray-600"},S=w({__name:"FwbModal",props:{notEscapable:{type:Boolean,default:!1},persistent:{type:Boolean,default:!1},size:{default:"2xl"}},emits:["close","click:outside"],setup(c,{emit:l}){const n=c,y=l,r={xs:"max-w-xs",sm:"max-w-sm",md:"max-w-md",lg:"max-w-lg",xl:"max-w-xl","2xl":"max-w-2xl","3xl":"max-w-3xl","4xl":"max-w-4xl","5xl":"max-w-5xl","6xl":"max-w-6xl","7xl":"max-w-7xl"};function d(){y("close")}function v(){n.persistent||(y("click:outside"),d())}function x(){!n.notEscapable&&!n.persistent&&d()}const h=_(null);return C(()=>{h.value&&h.value.focus()}),(o,Y)=>(e(),t("div",null,[B,s("div",{ref_key:"modalRef",ref:h,class:"overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center flex",tabindex:"0",onClick:q(v,["self"]),onKeyup:D(x,["esc"])},[s("div",{class:f([`${r[o.size]}`,"relative p-4 w-full h-full"])},[s("div",M,[s("div",{class:f([o.$slots.header?"border-b border-gray-200 dark:border-gray-600":"","p-4 rounded-t flex justify-between items-center"])},[u(o.$slots,"header"),o.persistent?F("",!0):(e(),t("button",{key:0,"aria-label":"close",class:"text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white",type:"button",onClick:d},[u(o.$slots,"close-icon",{},()=>[T])]))],2),s("div",{class:f([o.$slots.header?"":"pt-0","p-6"])},[u(o.$slots,"body")],2),o.$slots.footer?(e(),t("div",z,[u(o.$slots,"footer")])):F("",!0)])],2)],544)]))}}),P={class:"vp-raw flex justify-start"},$=s("div",{class:"flex items-center text-lg"}," Terms of Service ",-1),I=s("p",{class:"text-base leading-relaxed text-gray-500 dark:text-gray-400"}," With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply. ",-1),V=s("p",{class:"text-base leading-relaxed text-gray-500 dark:text-gray-400"}," The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them. ",-1),N={class:"flex justify-between"},p=w({__name:"FwbModalExample",props:{size:{default:"2xl"},notEscapable:{type:Boolean,default:!1},persistent:{type:Boolean,default:!1},triggerText:{default:"Open Modal"}},setup(c){const l=_(!1);function n(){l.value=!1}function y(){l.value=!0}return(r,d)=>(e(),t("div",P,[a(m(g),{onClick:y},{default:E(()=>[b(A(r.triggerText),1)]),_:1}),l.value?(e(),k(m(S),{key:0,"not-escapable":r.notEscapable,persistent:r.persistent,size:r.size,onClose:n},{header:E(()=>[$]),body:E(()=>[I,V]),footer:E(()=>[s("div",N,[a(m(g),{color:"alternative",onClick:n},{default:E(()=>[b(" Decline ")]),_:1}),a(m(g),{color:"green",onClick:n},{default:E(()=>[b(" I accept ")]),_:1})])]),_:1},8,["not-escapable","persistent","size"])):F("",!0)]))}}),R={class:"vp-raw flex justify-start space-x-2"},U={__name:"FwbModalExampleSize",setup(c){return(l,n)=>(e(),t("div",R,[s("span",null,[a(p,{size:"xs","trigger-text":"SM Modal"})]),s("span",null,[a(p,{size:"md","trigger-text":"MD Modal"})]),s("span",null,[a(p,{size:"xl","trigger-text":"XL Modal"})]),s("span",null,[a(p,{size:"5xl","trigger-text":"5XL Modal"})])]))}},j={class:"vp-raw flex justify-start space-x-2"},G={__name:"FwbModalExampleEscapable",setup(c){return(l,n)=>(e(),t("div",j,[a(p,{"trigger-text":"Escapable"}),a(p,{"not-escapable":"","trigger-text":"Not Escapable"})]))}},O={class:"vp-raw"},L={__name:"FwbModalExamplePersistent",setup(c){return(l,n)=>(e(),t("div",O,[a(p,{persistent:"","trigger-text":"Persistent"})]))}},W=i('

Vue Modal - Flowbite ​

Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles ​

TIP

Original reference: https://flowbite.com/docs/components/modal/

The modal component can be used as an interactive dialog on top of the main content area of the website to show notifications and gather information using form elements from your website users.

Get started with multiple sizes, colors, and styles built with the utility classes from Tailwind CSS and the components from Flowbite.

Default modal ​

',7),X=i(`
vue
<template>
+  <fwb-button @click="showModal">
+    Open modal
+  </fwb-button>
+
+  <fwb-modal v-if="isShowModal" @close="closeModal">
+    <template #header>
+      <div class="flex items-center text-lg">
+        Terms of Service
+      </div>
+    </template>
+    <template #body>
+      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+        With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
+      </p>
+      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+        The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
+      </p>
+    </template>
+    <template #footer>
+      <div class="flex justify-between">
+        <fwb-button @click="closeModal" color="alternative">
+          Decline
+        </fwb-button>
+        <fwb-button @click="closeModal" color="green">
+          I accept
+        </fwb-button>
+      </div>
+    </template>
+  </fwb-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbButton, FwbModal } from 'flowbite-vue'
+
+const isShowModal = ref(false)
+
+function closeModal () {
+  isShowModal.value = false
+}
+function showModal () {
+  isShowModal.value = true
+}
+</script>
<template>
+  <fwb-button @click="showModal">
+    Open modal
+  </fwb-button>
+
+  <fwb-modal v-if="isShowModal" @close="closeModal">
+    <template #header>
+      <div class="flex items-center text-lg">
+        Terms of Service
+      </div>
+    </template>
+    <template #body>
+      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+        With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
+      </p>
+      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+        The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
+      </p>
+    </template>
+    <template #footer>
+      <div class="flex justify-between">
+        <fwb-button @click="closeModal" color="alternative">
+          Decline
+        </fwb-button>
+        <fwb-button @click="closeModal" color="green">
+          I accept
+        </fwb-button>
+      </div>
+    </template>
+  </fwb-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbButton, FwbModal } from 'flowbite-vue'
+
+const isShowModal = ref(false)
+
+function closeModal () {
+  isShowModal.value = false
+}
+function showModal () {
+  isShowModal.value = true
+}
+</script>

Size ​

You can use four different modal sizing options starting from small to extra large, but keep in mind that the width of these modals will remain the same when browsing on smaller devices.

xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl

The default value is: 2xl

`,5),K=i(`
vue
<template>
+  <fwb-modal size="xs" />
+  <fwb-modal size="md" />
+  <fwb-modal size="xl" />
+  <fwb-modal size="5xl" />
+</template>
+
+<script setup>
+import { FwbModal } from 'flowbite-vue'
+</script>
<template>
+  <fwb-modal size="xs" />
+  <fwb-modal size="md" />
+  <fwb-modal size="xl" />
+  <fwb-modal size="5xl" />
+</template>
+
+<script setup>
+import { FwbModal } from 'flowbite-vue'
+</script>

Escapable ​

The escapable property is true by default to improve user experience and accessibility.

This means that you may close the modal by

  • Using the close button on the modal
  • Clicking outside of the modal
  • Pressing the escape key

In some situations, your user may be required to interact with the modal content. If this is the case, you can set the not-escapable property to true. The developer can then choose when they want to close the modal.

`,6),H=i(`
vue
<template>
+  <fwb-modal />
+  <fwb-modal not-escapable />
+</template>
+
+<script setup>
+import { FwbModal } from 'flowbite-vue'
+</script>
<template>
+  <fwb-modal />
+  <fwb-modal not-escapable />
+</template>
+
+<script setup>
+import { FwbModal } from 'flowbite-vue'
+</script>

Persistent ​

Clicking outside of the element or pressing esc key will not send close event.

`,3),J=i(`
vue
<template>
+  <fwb-modal persistent />
+</template>
+
+<script setup>
+import { FwbModal } from 'flowbite-vue'
+</script>
<template>
+  <fwb-modal persistent />
+</template>
+
+<script setup>
+import { FwbModal } from 'flowbite-vue'
+</script>

API ​

Props: ​

NameValuesDefault
sizemd,lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl2xl
notEscapabletrue, falsefalse
persistenttrue, falsetrue

Events: ​

NameType
closeClicked on the close button, pressed Esc, or clicked outside the modal content
click:outsideClicked outside the modal content
`,6),os=JSON.parse('{"title":"Vue Modal - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/modal.md","filePath":"components/modal.md"}'),Q={name:"components/modal.md"},es=Object.assign(Q,{setup(c){return(l,n)=>(e(),t("div",null,[W,a(p),X,a(U),K,a(G),H,a(L),J]))}});export{os as __pageData,es as default}; diff --git a/docs/.vitepress/dist/assets/components_modal.md.48165202.lean.js b/docs/.vitepress/dist/assets/components_modal.md.48165202.lean.js new file mode 100644 index 0000000..306a2d1 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_modal.md.48165202.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as g}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{d as w,h as _,j as C,o as e,c as t,k as s,n as f,r as u,e as F,X as q,W as D,H as a,w as E,a as b,t as A,l as m,b as k,Q as i}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const B=s("div",{class:"bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40"},null,-1),M={class:"relative bg-white rounded-lg shadow dark:bg-gray-700"},T=s("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[s("path",{"clip-rule":"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),z={key:0,class:"p-6 rounded-b border-gray-200 border-t dark:border-gray-600"},S=w({__name:"FwbModal",props:{notEscapable:{type:Boolean,default:!1},persistent:{type:Boolean,default:!1},size:{default:"2xl"}},emits:["close","click:outside"],setup(c,{emit:l}){const n=c,y=l,r={xs:"max-w-xs",sm:"max-w-sm",md:"max-w-md",lg:"max-w-lg",xl:"max-w-xl","2xl":"max-w-2xl","3xl":"max-w-3xl","4xl":"max-w-4xl","5xl":"max-w-5xl","6xl":"max-w-6xl","7xl":"max-w-7xl"};function d(){y("close")}function v(){n.persistent||(y("click:outside"),d())}function x(){!n.notEscapable&&!n.persistent&&d()}const h=_(null);return C(()=>{h.value&&h.value.focus()}),(o,Y)=>(e(),t("div",null,[B,s("div",{ref_key:"modalRef",ref:h,class:"overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center flex",tabindex:"0",onClick:q(v,["self"]),onKeyup:D(x,["esc"])},[s("div",{class:f([`${r[o.size]}`,"relative p-4 w-full h-full"])},[s("div",M,[s("div",{class:f([o.$slots.header?"border-b border-gray-200 dark:border-gray-600":"","p-4 rounded-t flex justify-between items-center"])},[u(o.$slots,"header"),o.persistent?F("",!0):(e(),t("button",{key:0,"aria-label":"close",class:"text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white",type:"button",onClick:d},[u(o.$slots,"close-icon",{},()=>[T])]))],2),s("div",{class:f([o.$slots.header?"":"pt-0","p-6"])},[u(o.$slots,"body")],2),o.$slots.footer?(e(),t("div",z,[u(o.$slots,"footer")])):F("",!0)])],2)],544)]))}}),P={class:"vp-raw flex justify-start"},$=s("div",{class:"flex items-center text-lg"}," Terms of Service ",-1),I=s("p",{class:"text-base leading-relaxed text-gray-500 dark:text-gray-400"}," With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply. ",-1),V=s("p",{class:"text-base leading-relaxed text-gray-500 dark:text-gray-400"}," The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them. ",-1),N={class:"flex justify-between"},p=w({__name:"FwbModalExample",props:{size:{default:"2xl"},notEscapable:{type:Boolean,default:!1},persistent:{type:Boolean,default:!1},triggerText:{default:"Open Modal"}},setup(c){const l=_(!1);function n(){l.value=!1}function y(){l.value=!0}return(r,d)=>(e(),t("div",P,[a(m(g),{onClick:y},{default:E(()=>[b(A(r.triggerText),1)]),_:1}),l.value?(e(),k(m(S),{key:0,"not-escapable":r.notEscapable,persistent:r.persistent,size:r.size,onClose:n},{header:E(()=>[$]),body:E(()=>[I,V]),footer:E(()=>[s("div",N,[a(m(g),{color:"alternative",onClick:n},{default:E(()=>[b(" Decline ")]),_:1}),a(m(g),{color:"green",onClick:n},{default:E(()=>[b(" I accept ")]),_:1})])]),_:1},8,["not-escapable","persistent","size"])):F("",!0)]))}}),R={class:"vp-raw flex justify-start space-x-2"},U={__name:"FwbModalExampleSize",setup(c){return(l,n)=>(e(),t("div",R,[s("span",null,[a(p,{size:"xs","trigger-text":"SM Modal"})]),s("span",null,[a(p,{size:"md","trigger-text":"MD Modal"})]),s("span",null,[a(p,{size:"xl","trigger-text":"XL Modal"})]),s("span",null,[a(p,{size:"5xl","trigger-text":"5XL Modal"})])]))}},j={class:"vp-raw flex justify-start space-x-2"},G={__name:"FwbModalExampleEscapable",setup(c){return(l,n)=>(e(),t("div",j,[a(p,{"trigger-text":"Escapable"}),a(p,{"not-escapable":"","trigger-text":"Not Escapable"})]))}},O={class:"vp-raw"},L={__name:"FwbModalExamplePersistent",setup(c){return(l,n)=>(e(),t("div",O,[a(p,{persistent:"","trigger-text":"Persistent"})]))}},W=i("",7),X=i("",5),K=i("",6),H=i("",3),J=i("",6),os=JSON.parse('{"title":"Vue Modal - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/modal.md","filePath":"components/modal.md"}'),Q={name:"components/modal.md"},es=Object.assign(Q,{setup(c){return(l,n)=>(e(),t("div",null,[W,a(p),X,a(U),K,a(G),H,a(L),J]))}});export{os as __pageData,es as default}; diff --git a/docs/.vitepress/dist/assets/components_navbar.md.e4dfa350.js b/docs/.vitepress/dist/assets/components_navbar.md.e4dfa350.js new file mode 100644 index 0000000..a3716b8 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_navbar.md.e4dfa350.js @@ -0,0 +1,345 @@ +import{c as D,t as $}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{u as S,b as x}from"./chunks/index.b15c605d.js";import{u as L}from"./chunks/useMergeClasses.5cec3a4e.js";import{u as H}from"./chunks/index.6b4d4439.js";import{d as k,Y as I,h as j,g as w,o as y,c as i,k as e,r as b,l as a,e as z,n as C,b as M,w as s,a3 as P,I as T,C as u,H as n,a as l,_ as R,Q as d}from"./chunks/framework.3f630664.js";import{_ as G}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const O={class:"container flex flex-wrap justify-between items-center mx-auto"},U=e("span",{class:"sr-only"},"Open main menu",-1),J=e("svg",{"aria-hidden":"true",class:"w-6 h-6",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"clip-rule":"evenodd",d:"M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z","fill-rule":"evenodd"})],-1),Q={key:0,class:"hidden md:order-2 md:flex"},W=" border-gray-200",Y="fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600",K="rounded",X="p-3 bg-gray-50 dark:bg-gray-800 dark:border-gray-700",Z="bg-white px-2 sm:px-4 py-2.5 dark:bg-gray-900",h=k({__name:"FwbNavbar",props:{class:{type:String,default:""},sticky:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},solid:{type:Boolean,default:!1}},setup(r){const p=r,t=I(),g=S(x).smaller("md"),F=j(!1),v=H(F),c=w(()=>L([W,p.sticky?Y:"",p.rounded?K:"",p.solid?X:Z,p.class].join(" "))),f=w(()=>g?F.value:!0);return(m,q)=>(y(),i("nav",{class:C(c.value)},[e("div",O,[b(m.$slots,"logo"),e("button",{"aria-controls":"navbar-default","aria-expanded":"false",class:"inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",type:"button",onClick:q[0]||(q[0]=A=>a(v)())},[U,b(m.$slots,"menu-icon",{},()=>[J])]),b(m.$slots,"default",{isShowMenu:f.value}),a(t)["right-side"]?(y(),i("div",Q,[b(m.$slots,"right-side")])):z("",!0)]),b(m.$slots,"mega-menu-dropdown")],2))}}),ss="w-full md:block md:w-auto",ns="flex flex-col p-4 mt-4 rounded-lg border border-gray-100 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700",as="bg-gray-50",_=k({__name:"FwbNavbarCollapse",props:{isShowMenu:{type:Boolean,default:!1}},setup(r){const t=S(x).smaller("md"),o=r,g=w(()=>D(ss,o.isShowMenu?"":"hidden")),F=w(()=>D(ns,t.value?as:""));return(v,c)=>(y(),i("div",{class:C(g.value)},[e("ul",{class:C(F.value)},[b(v.$slots,"default")],2)],2))}}),ls="bg-blue-700 md:bg-transparent text-white md:text-blue-700 dark:text-white",os="text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent",ps="block py-2 pr-4 pl-3 rounded md:p-0",E=k({__name:"FwbNavbarLink",props:{link:{default:"/"},isActive:{type:Boolean,default:!1},component:{default:"a"},linkAttr:{default:"href"},disabled:{type:Boolean,default:!1}},emits:["click"],setup(r,{emit:p}){const t=r,o=p,g=w(()=>t.component!=="a"?u(t.component):"a"),F=$(ps,t.isActive?ls:os),v=c=>{t.disabled||o("click",c)};return(c,f)=>(y(),i("li",null,[(y(),M(T(g.value),P({[c.linkAttr||""]:c.link,class:a(F),onClick:v}),{default:s(()=>[b(c.$slots,"default")]),_:3},16,["class"]))]))}}),ts=["src","alt"],es={class:"self-center text-xl font-semibold whitespace-nowrap dark:text-white"},B=k({__name:"FwbNavbarLogo",props:{link:{default:"/"},imageUrl:{default:"/assets/logo.svg"},alt:{default:"Logo"},component:{default:"a"},linkAttr:{default:"href"}},setup(r){const p=r,t=w(()=>p.component!=="a"?u(p.component):"a");return(o,g)=>(y(),M(T(t.value),P({class:"flex items-center",[o.linkAttr||""]:o.link}),{default:s(()=>[e("img",{src:o.imageUrl,alt:o.alt,class:"mr-3 h-6 sm:h-10"},null,8,ts),e("span",es,[b(o.$slots,"default")])]),_:3},16))}}),cs={class:"vp-raw"},rs={__name:"FwbNavbarExample",setup(r){return(p,t)=>(y(),i("div",cs,[n(a(h),null,{logo:s(()=>[n(a(B),{alt:"Flowbite logo","image-url":"https://flowbite.com/docs/images/logo.svg",link:"https://www.google.com/"},{default:s(()=>[l(" Flowbite ")]),_:1})]),default:s(({isShowMenu:o})=>[n(a(_),{"is-show-menu":o},{default:s(()=>[n(a(E),{"is-active":"",link:"#"},{default:s(()=>[l(" Home ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Services ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Pricing ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Contact ")]),_:1})]),_:2},1032,["is-show-menu"])]),_:1})]))}},Es={class:"vp-raw"},ys={__name:"FwbNavbarExampleActionButton",setup(r){return(p,t)=>(y(),i("div",Es,[n(a(h),null,{logo:s(()=>[n(a(B),{alt:"Flowbite logo","image-url":"https://flowbite.com/docs/images/logo.svg",link:"https://www.google.com/"},{default:s(()=>[l(" Flowbite ")]),_:1})]),default:s(({isShowMenu:o})=>[n(a(_),{"is-show-menu":o},{default:s(()=>[n(a(E),{"is-active":"",link:"#"},{default:s(()=>[l(" Home ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Services ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Pricing ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Contact ")]),_:1})]),_:2},1032,["is-show-menu"])]),"right-side":s(()=>[n(a(G),null,{default:s(()=>[l(" Get started ")]),_:1})]),_:1})]))}},is={class:"vp-raw"},us=e("svg",{class:"w-6 h-6",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[e("path",{d:"M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1),bs={__name:"FwbNavbarExampleCustomMobileIcon",setup(r){return(p,t)=>(y(),i("div",is,[n(a(h),null,{logo:s(()=>[n(a(B),{alt:"Flowbite logo","image-url":"https://flowbite.com/docs/images/logo.svg",link:"https://www.google.com/"},{default:s(()=>[l(" Flowbite ")]),_:1})]),default:s(({isShowMenu:o})=>[n(a(_),{"is-show-menu":o},{default:s(()=>[n(a(E),{"is-active":"",link:"#"},{default:s(()=>[l(" Home ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Services ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Pricing ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Contact ")]),_:1})]),_:2},1032,["is-show-menu"])]),"menu-icon":s(()=>[us]),_:1})]))}},gs={},Fs={class:"vp-raw"};function vs(r,p,t,o,g,F){const v=u("fwb-navbar-logo"),c=u("fwb-navbar-link"),f=u("fwb-navbar-collapse"),m=u("fwb-button"),q=u("fwb-mega-menu-dropdown"),A=u("fwb-navbar");return y(),i("div",Fs,[n(A,null,{logo:s(()=>[n(v,{alt:"Flowbite logo","image-url":"https://flowbite.com/docs/images/logo.svg",link:"https://www.google.com/"},{default:s(()=>[l(" Flowbite ")]),_:1})]),default:s(({isShowMenu:V})=>[n(f,{"is-show-menu":V},{default:s(()=>[n(c,{"is-active":"",link:"#"},{default:s(()=>[l(" Home ")]),_:1}),n(c,{link:"#"},{default:s(()=>[l(" Services ")]),_:1}),n(c,{link:"#"},{default:s(()=>[l(" Pricing ")]),_:1}),n(c,{link:"#"},{default:s(()=>[l(" Contact ")]),_:1})]),_:2},1032,["is-show-menu"])]),"right-side":s(()=>[n(m,null,{default:s(()=>[l(" Get started ")]),_:1})]),"mega-menu-dropdown":s(()=>[n(q)]),_:1})])}const N=R(gs,[["render",vs]]),ms=e("h1",{id:"vue-navbar-–-flowbite",tabindex:"-1"},[l("Vue Navbar – Flowbite "),e("a",{class:"header-anchor",href:"#vue-navbar-–-flowbite","aria-label":'Permalink to "Vue Navbar – Flowbite"'},"​")],-1),ws=e("p",null,"The navbar component can be used to show a list of navigation links positioned on the top side of your page based on multiple layouts, sizes, and dropdowns",-1),ds=e("h2",{id:"default-navbar",tabindex:"-1"},[l("Default navbar "),e("a",{class:"header-anchor",href:"#default-navbar","aria-label":'Permalink to "Default navbar"'},"​")],-1),fs=d(`
vue
<template>
+  <fwb-navbar>
+    <template #logo>
+      <fwb-navbar-logo alt="Flowbite logo" image-url="/images/logo.svg" link="#">
+        Flowbite
+      </fwb-navbar-logo>
+    </template>
+    <template #default="{isShowMenu}">
+      <fwb-navbar-collapse :is-show-menu="isShowMenu">
+        <fwb-navbar-link is-active link="#">
+          Home
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Services
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Pricing
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Contact
+        </fwb-navbar-link>
+      </fwb-navbar-collapse>
+    </template>
+  </fwb-navbar>
+</template>
+
+<script setup>
+import {
+  FwbNavbar,
+  FwbNavbarCollapse,
+  FwbNavbarLink,
+  FwbNavbarLogo,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-navbar>
+    <template #logo>
+      <fwb-navbar-logo alt="Flowbite logo" image-url="/images/logo.svg" link="#">
+        Flowbite
+      </fwb-navbar-logo>
+    </template>
+    <template #default="{isShowMenu}">
+      <fwb-navbar-collapse :is-show-menu="isShowMenu">
+        <fwb-navbar-link is-active link="#">
+          Home
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Services
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Pricing
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Contact
+        </fwb-navbar-link>
+      </fwb-navbar-collapse>
+    </template>
+  </fwb-navbar>
+</template>
+
+<script setup>
+import {
+  FwbNavbar,
+  FwbNavbarCollapse,
+  FwbNavbarLink,
+  FwbNavbarLogo,
+} from 'flowbite-vue'
+</script>

Solid navbar ​

`,2),qs=d(`
vue
<template>
+  <fwb-navbar solid>
+    <template #logo>
+      <fwb-navbar-logo alt="Flowbite logo" image-url="/images/logo.svg" link="#">
+        Flowbite
+      </fwb-navbar-logo>
+    </template>
+    <template #default="{isShowMenu}">
+      <fwb-navbar-collapse :is-show-menu="isShowMenu">
+        <fwb-navbar-link is-active link="#">
+          Home
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Services
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Pricing
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Contact
+        </fwb-navbar-link>
+      </fwb-navbar-collapse>
+    </template>
+  </fwb-navbar>
+</template>
+
+<script setup>
+import {
+  FwbNavbar,
+  FwbNavbarCollapse,
+  FwbNavbarLink,
+  FwbNavbarLogo,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-navbar solid>
+    <template #logo>
+      <fwb-navbar-logo alt="Flowbite logo" image-url="/images/logo.svg" link="#">
+        Flowbite
+      </fwb-navbar-logo>
+    </template>
+    <template #default="{isShowMenu}">
+      <fwb-navbar-collapse :is-show-menu="isShowMenu">
+        <fwb-navbar-link is-active link="#">
+          Home
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Services
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Pricing
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Contact
+        </fwb-navbar-link>
+      </fwb-navbar-collapse>
+    </template>
+  </fwb-navbar>
+</template>
+
+<script setup>
+import {
+  FwbNavbar,
+  FwbNavbarCollapse,
+  FwbNavbarLink,
+  FwbNavbarLogo,
+} from 'flowbite-vue'
+</script>
`,2),ks=d(`
vue
<template>
+  <fwb-navbar>
+    <template #logo>
+      <fwb-navbar-logo alt="Flowbite logo" image-url="/images/logo.svg" link="#">
+        Flowbite
+      </fwb-navbar-logo>
+    </template>
+    <template #default="{isShowMenu}">
+      <fwb-navbar-collapse :is-show-menu="isShowMenu">
+        <fwb-navbar-link is-active link="#">
+          Home
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Services
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Pricing
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Contact
+        </fwb-navbar-link>
+      </fwb-navbar-collapse>
+    </template>
+    <template #right-side>
+      <fwb-button>
+        Get started
+      </fwb-button>
+    </template>
+  </fwb-navbar>
+</template>
+
+<script setup>
+import {
+  FwbButton,
+  FwbNavbar,
+  FwbNavbarCollapse,
+  FwbNavbarLink,
+  FwbNavbarLogo,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-navbar>
+    <template #logo>
+      <fwb-navbar-logo alt="Flowbite logo" image-url="/images/logo.svg" link="#">
+        Flowbite
+      </fwb-navbar-logo>
+    </template>
+    <template #default="{isShowMenu}">
+      <fwb-navbar-collapse :is-show-menu="isShowMenu">
+        <fwb-navbar-link is-active link="#">
+          Home
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Services
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Pricing
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Contact
+        </fwb-navbar-link>
+      </fwb-navbar-collapse>
+    </template>
+    <template #right-side>
+      <fwb-button>
+        Get started
+      </fwb-button>
+    </template>
+  </fwb-navbar>
+</template>
+
+<script setup>
+import {
+  FwbButton,
+  FwbNavbar,
+  FwbNavbarCollapse,
+  FwbNavbarLink,
+  FwbNavbarLogo,
+} from 'flowbite-vue'
+</script>
`,2),Cs=d(`
vue
<template>
+  <fwb-navbar>
+    <template #logo>
+      <fwb-navbar-logo alt="Flowbite logo" image-url="/images/logo.svg" link="#">
+        Flowbite
+      </fwb-navbar-logo>
+    </template>
+    <template #default="{isShowMenu}">
+      <fwb-navbar-collapse :is-show-menu="isShowMenu">
+        <fwb-navbar-link is-active link="#">
+          Home
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Services
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Pricing
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Contact
+        </fwb-navbar-link>
+      </fwb-navbar-collapse>
+    </template>
+    <template #menu-icon>
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+      </svg>
+    </template>
+  </fwb-navbar>
+</template>
<template>
+  <fwb-navbar>
+    <template #logo>
+      <fwb-navbar-logo alt="Flowbite logo" image-url="/images/logo.svg" link="#">
+        Flowbite
+      </fwb-navbar-logo>
+    </template>
+    <template #default="{isShowMenu}">
+      <fwb-navbar-collapse :is-show-menu="isShowMenu">
+        <fwb-navbar-link is-active link="#">
+          Home
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Services
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Pricing
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Contact
+        </fwb-navbar-link>
+      </fwb-navbar-collapse>
+    </template>
+    <template #menu-icon>
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+      </svg>
+    </template>
+  </fwb-navbar>
+</template>
`,2),hs=d(`
vue
<template>
+  <fwb-navbar>
+    <template #logo>
+      <fwb-navbar-logo alt="Flowbite logo" image-url="/images/logo.svg" link="#">
+        Flowbite
+      </fwb-navbar-logo>
+    </template>
+    <template #default="{isShowMenu}">
+      <fwb-navbar-collapse :is-show-menu="isShowMenu">
+        <fwb-navbar-link is-active link="#">
+          Home
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Services
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Pricing
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Contact
+        </fwb-navbar-link>
+      </fwb-navbar-collapse>
+    </template>
+    <template #menu-icon>
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+      </svg>
+    </template>
+  </fwb-navbar>
+</template>
+
+<script setup>
+import {
+  FwbNavbar,
+  FwbNavbarCollapse,
+  FwbNavbarLink,
+  FwbNavbarLogo,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-navbar>
+    <template #logo>
+      <fwb-navbar-logo alt="Flowbite logo" image-url="/images/logo.svg" link="#">
+        Flowbite
+      </fwb-navbar-logo>
+    </template>
+    <template #default="{isShowMenu}">
+      <fwb-navbar-collapse :is-show-menu="isShowMenu">
+        <fwb-navbar-link is-active link="#">
+          Home
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Services
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Pricing
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Contact
+        </fwb-navbar-link>
+      </fwb-navbar-collapse>
+    </template>
+    <template #menu-icon>
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+      </svg>
+    </template>
+  </fwb-navbar>
+</template>
+
+<script setup>
+import {
+  FwbNavbar,
+  FwbNavbarCollapse,
+  FwbNavbarLink,
+  FwbNavbarLogo,
+} from 'flowbite-vue'
+</script>
`,1),Ps=JSON.parse('{"title":"Vue Navbar – Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/navbar.md","filePath":"components/navbar.md"}'),_s={name:"components/navbar.md"},Ts=Object.assign(_s,{setup(r){return(p,t)=>(y(),i("div",null,[ms,ws,ds,n(rs),fs,n(N),qs,n(ys),ks,n(bs),Cs,n(N),hs]))}});export{Ps as __pageData,Ts as default}; diff --git a/docs/.vitepress/dist/assets/components_navbar.md.e4dfa350.lean.js b/docs/.vitepress/dist/assets/components_navbar.md.e4dfa350.lean.js new file mode 100644 index 0000000..95577ad --- /dev/null +++ b/docs/.vitepress/dist/assets/components_navbar.md.e4dfa350.lean.js @@ -0,0 +1 @@ +import{c as D,t as $}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{u as S,b as x}from"./chunks/index.b15c605d.js";import{u as L}from"./chunks/useMergeClasses.5cec3a4e.js";import{u as H}from"./chunks/index.6b4d4439.js";import{d as k,Y as I,h as j,g as w,o as y,c as i,k as e,r as b,l as a,e as z,n as C,b as M,w as s,a3 as P,I as T,C as u,H as n,a as l,_ as R,Q as d}from"./chunks/framework.3f630664.js";import{_ as G}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const O={class:"container flex flex-wrap justify-between items-center mx-auto"},U=e("span",{class:"sr-only"},"Open main menu",-1),J=e("svg",{"aria-hidden":"true",class:"w-6 h-6",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"clip-rule":"evenodd",d:"M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z","fill-rule":"evenodd"})],-1),Q={key:0,class:"hidden md:order-2 md:flex"},W=" border-gray-200",Y="fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600",K="rounded",X="p-3 bg-gray-50 dark:bg-gray-800 dark:border-gray-700",Z="bg-white px-2 sm:px-4 py-2.5 dark:bg-gray-900",h=k({__name:"FwbNavbar",props:{class:{type:String,default:""},sticky:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},solid:{type:Boolean,default:!1}},setup(r){const p=r,t=I(),g=S(x).smaller("md"),F=j(!1),v=H(F),c=w(()=>L([W,p.sticky?Y:"",p.rounded?K:"",p.solid?X:Z,p.class].join(" "))),f=w(()=>g?F.value:!0);return(m,q)=>(y(),i("nav",{class:C(c.value)},[e("div",O,[b(m.$slots,"logo"),e("button",{"aria-controls":"navbar-default","aria-expanded":"false",class:"inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",type:"button",onClick:q[0]||(q[0]=A=>a(v)())},[U,b(m.$slots,"menu-icon",{},()=>[J])]),b(m.$slots,"default",{isShowMenu:f.value}),a(t)["right-side"]?(y(),i("div",Q,[b(m.$slots,"right-side")])):z("",!0)]),b(m.$slots,"mega-menu-dropdown")],2))}}),ss="w-full md:block md:w-auto",ns="flex flex-col p-4 mt-4 rounded-lg border border-gray-100 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700",as="bg-gray-50",_=k({__name:"FwbNavbarCollapse",props:{isShowMenu:{type:Boolean,default:!1}},setup(r){const t=S(x).smaller("md"),o=r,g=w(()=>D(ss,o.isShowMenu?"":"hidden")),F=w(()=>D(ns,t.value?as:""));return(v,c)=>(y(),i("div",{class:C(g.value)},[e("ul",{class:C(F.value)},[b(v.$slots,"default")],2)],2))}}),ls="bg-blue-700 md:bg-transparent text-white md:text-blue-700 dark:text-white",os="text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent",ps="block py-2 pr-4 pl-3 rounded md:p-0",E=k({__name:"FwbNavbarLink",props:{link:{default:"/"},isActive:{type:Boolean,default:!1},component:{default:"a"},linkAttr:{default:"href"},disabled:{type:Boolean,default:!1}},emits:["click"],setup(r,{emit:p}){const t=r,o=p,g=w(()=>t.component!=="a"?u(t.component):"a"),F=$(ps,t.isActive?ls:os),v=c=>{t.disabled||o("click",c)};return(c,f)=>(y(),i("li",null,[(y(),M(T(g.value),P({[c.linkAttr||""]:c.link,class:a(F),onClick:v}),{default:s(()=>[b(c.$slots,"default")]),_:3},16,["class"]))]))}}),ts=["src","alt"],es={class:"self-center text-xl font-semibold whitespace-nowrap dark:text-white"},B=k({__name:"FwbNavbarLogo",props:{link:{default:"/"},imageUrl:{default:"/assets/logo.svg"},alt:{default:"Logo"},component:{default:"a"},linkAttr:{default:"href"}},setup(r){const p=r,t=w(()=>p.component!=="a"?u(p.component):"a");return(o,g)=>(y(),M(T(t.value),P({class:"flex items-center",[o.linkAttr||""]:o.link}),{default:s(()=>[e("img",{src:o.imageUrl,alt:o.alt,class:"mr-3 h-6 sm:h-10"},null,8,ts),e("span",es,[b(o.$slots,"default")])]),_:3},16))}}),cs={class:"vp-raw"},rs={__name:"FwbNavbarExample",setup(r){return(p,t)=>(y(),i("div",cs,[n(a(h),null,{logo:s(()=>[n(a(B),{alt:"Flowbite logo","image-url":"https://flowbite.com/docs/images/logo.svg",link:"https://www.google.com/"},{default:s(()=>[l(" Flowbite ")]),_:1})]),default:s(({isShowMenu:o})=>[n(a(_),{"is-show-menu":o},{default:s(()=>[n(a(E),{"is-active":"",link:"#"},{default:s(()=>[l(" Home ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Services ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Pricing ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Contact ")]),_:1})]),_:2},1032,["is-show-menu"])]),_:1})]))}},Es={class:"vp-raw"},ys={__name:"FwbNavbarExampleActionButton",setup(r){return(p,t)=>(y(),i("div",Es,[n(a(h),null,{logo:s(()=>[n(a(B),{alt:"Flowbite logo","image-url":"https://flowbite.com/docs/images/logo.svg",link:"https://www.google.com/"},{default:s(()=>[l(" Flowbite ")]),_:1})]),default:s(({isShowMenu:o})=>[n(a(_),{"is-show-menu":o},{default:s(()=>[n(a(E),{"is-active":"",link:"#"},{default:s(()=>[l(" Home ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Services ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Pricing ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Contact ")]),_:1})]),_:2},1032,["is-show-menu"])]),"right-side":s(()=>[n(a(G),null,{default:s(()=>[l(" Get started ")]),_:1})]),_:1})]))}},is={class:"vp-raw"},us=e("svg",{class:"w-6 h-6",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[e("path",{d:"M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1),bs={__name:"FwbNavbarExampleCustomMobileIcon",setup(r){return(p,t)=>(y(),i("div",is,[n(a(h),null,{logo:s(()=>[n(a(B),{alt:"Flowbite logo","image-url":"https://flowbite.com/docs/images/logo.svg",link:"https://www.google.com/"},{default:s(()=>[l(" Flowbite ")]),_:1})]),default:s(({isShowMenu:o})=>[n(a(_),{"is-show-menu":o},{default:s(()=>[n(a(E),{"is-active":"",link:"#"},{default:s(()=>[l(" Home ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Services ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Pricing ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Contact ")]),_:1})]),_:2},1032,["is-show-menu"])]),"menu-icon":s(()=>[us]),_:1})]))}},gs={},Fs={class:"vp-raw"};function vs(r,p,t,o,g,F){const v=u("fwb-navbar-logo"),c=u("fwb-navbar-link"),f=u("fwb-navbar-collapse"),m=u("fwb-button"),q=u("fwb-mega-menu-dropdown"),A=u("fwb-navbar");return y(),i("div",Fs,[n(A,null,{logo:s(()=>[n(v,{alt:"Flowbite logo","image-url":"https://flowbite.com/docs/images/logo.svg",link:"https://www.google.com/"},{default:s(()=>[l(" Flowbite ")]),_:1})]),default:s(({isShowMenu:V})=>[n(f,{"is-show-menu":V},{default:s(()=>[n(c,{"is-active":"",link:"#"},{default:s(()=>[l(" Home ")]),_:1}),n(c,{link:"#"},{default:s(()=>[l(" Services ")]),_:1}),n(c,{link:"#"},{default:s(()=>[l(" Pricing ")]),_:1}),n(c,{link:"#"},{default:s(()=>[l(" Contact ")]),_:1})]),_:2},1032,["is-show-menu"])]),"right-side":s(()=>[n(m,null,{default:s(()=>[l(" Get started ")]),_:1})]),"mega-menu-dropdown":s(()=>[n(q)]),_:1})])}const N=R(gs,[["render",vs]]),ms=e("h1",{id:"vue-navbar-–-flowbite",tabindex:"-1"},[l("Vue Navbar – Flowbite "),e("a",{class:"header-anchor",href:"#vue-navbar-–-flowbite","aria-label":'Permalink to "Vue Navbar – Flowbite"'},"​")],-1),ws=e("p",null,"The navbar component can be used to show a list of navigation links positioned on the top side of your page based on multiple layouts, sizes, and dropdowns",-1),ds=e("h2",{id:"default-navbar",tabindex:"-1"},[l("Default navbar "),e("a",{class:"header-anchor",href:"#default-navbar","aria-label":'Permalink to "Default navbar"'},"​")],-1),fs=d("",2),qs=d("",2),ks=d("",2),Cs=d("",2),hs=d("",1),Ps=JSON.parse('{"title":"Vue Navbar – Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/navbar.md","filePath":"components/navbar.md"}'),_s={name:"components/navbar.md"},Ts=Object.assign(_s,{setup(r){return(p,t)=>(y(),i("div",null,[ms,ws,ds,n(rs),fs,n(N),qs,n(ys),ks,n(bs),Cs,n(N),hs]))}});export{Ps as __pageData,Ts as default}; diff --git a/docs/.vitepress/dist/assets/components_pagination.md.c228117a.js b/docs/.vitepress/dist/assets/components_pagination.md.c228117a.js new file mode 100644 index 0000000..11449f8 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_pagination.md.c228117a.js @@ -0,0 +1,149 @@ +import{t as $}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as f,g,o as r,c,n as C,a as h,k as t,t as b,e as w,r as F,F as x,D as W,h as v,H as p,l as i,w as _,Q as q}from"./chunks/framework.3f630664.js";const O={"aria-label":"Navigation"},Y={class:"font-semibold text-gray-900 dark:text-white"},G={class:"font-semibold text-gray-900 dark:text-white"},H={class:"font-semibold text-gray-900 dark:text-white"},J=["disabled"],Q=["disabled"],K={key:0,stroke:"currentColor",fill:"currentColor","stroke-width":"0",viewBox:"0 0 20 20","aria-hidden":"true",class:"h-5 w-5",height:"1em",width:"1em",xmlns:"http://www.w3.org/2000/svg"},X=t("path",{"fill-rule":"evenodd",d:"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z","clip-rule":"evenodd"},null,-1),Z=[X],ss=["disabled","onClick"],as=["disabled"],ns={key:0,stroke:"currentColor",fill:"currentColor","stroke-width":"0",viewBox:"0 0 20 20","aria-hidden":"true",class:"h-5 w-5",height:"1em",width:"1em",xmlns:"http://www.w3.org/2000/svg"},ls=t("path",{"fill-rule":"evenodd",d:"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z","clip-rule":"evenodd"},null,-1),os=[ls],ts=["disabled"],d=f({__name:"FwbPagination",props:{modelValue:{default:1},totalPages:{default:void 0},perPage:{default:10},totalItems:{default:10},layout:{default:"pagination"},showIcons:{type:Boolean,default:!1},sliceLength:{default:2},previousLabel:{default:"Prev"},nextLabel:{default:"Next"},enableFirstAndLastButtons:{type:Boolean,default:!1},showLabels:{type:Boolean,default:!0},large:{type:Boolean,default:!1}},emits:["update:model-value","page-changed"],setup(u,{emit:n}){const e=n,s=u;function l(a){e("update:model-value",a),e("page-changed",a)}function m(){e("update:model-value",s.modelValue-1),e("page-changed",s.modelValue-1)}function k(){e("update:model-value",s.modelValue+1),e("page-changed",s.modelValue+1)}function S(){e("update:model-value",1),e("page-changed",1)}function I(){const a=y.value;e("update:model-value",a),e("page-changed",a)}const y=g(()=>s.totalPages?s.totalPages:Math.ceil(s.totalItems/s.perPage)),D=g(()=>s.modelValue<=1),V=g(()=>s.modelValue>=y.value),T=a=>a===s.modelValue,L=g(()=>{if(s.layout==="navigation")return[];if(s.layout==="table")return[];if(y.value<=s.sliceLength*2+1){const o=[];for(let E=1;E<=y.value;E++)o.push(E);return o}if(s.modelValue<=s.sliceLength){const o=[],E=Math.abs(s.modelValue-s.sliceLength)+s.modelValue+s.sliceLength+1;for(let B=1;B<=E;B++)o.push(B);return o}if(s.modelValue>=y.value-s.sliceLength){const o=[];for(let E=Math.abs(y.value-s.sliceLength*2);E<=y.value;E++)o.push(E);return o}const a=[],P=s.modelValue-s.sliceLength>0?s.modelValue-s.sliceLength:1;for(let o=P;o=y.value);o++)a.push(o);return a}),N=g(()=>s.modelValue*s.perPage-s.perPage+1),j=g(()=>{const a=s.modelValue*s.perPage;return s.totalItems&&a>s.totalItems?s.totalItems:a}),U=g(()=>s.totalItems?s.totalItems:y.value*s.perPage),z=g(()=>s.modelValue===1),M=g(()=>s.modelValue===y.value);function R(a){const P="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",o="text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:bg-gray-700 dark:text-white",E="px-4 h-10";return $(P,a&&o,s.large&&E)}function A(a){const P="flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",o="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-white cursor-not-allowed",E="px-4 h-10",B="border-none text-white hover:text-white bg-gray-800 rounded-none first:rounded-l last:rounded-r hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white";return $(P,a===s.modelValue&&o,s.large&&E,(a>y.value||a<1)&&o,s.layout==="navigation"&&"first:mr-3",(s.layout==="navigation"||s.layout==="table")&&"rounded-lg",s.layout==="table"&&B)}return(a,P)=>(r(),c("nav",O,[a.layout==="table"?(r(),c("div",{key:0,class:C(["text-gray-700 dark:text-gray-400 mb-2",a.large?"text-base":"text-sm"])},[h(" Showing "),t("span",Y,b(N.value),1),h(" to "),t("span",G,b(j.value),1),h(" of "),t("span",H,b(U.value),1)],2)):w("",!0),t("div",{class:C(["inline-flex",a.large&&"text-base h-10"])},[F(a.$slots,"start"),a.enableFirstAndLastButtons?F(a.$slots,"first-button",{key:0},()=>[t("button",{disabled:z.value,class:C(A(1)),onClick:S}," First ",10,J)]):w("",!0),F(a.$slots,"prev-button",{disabled:D.value,decreasePage:m},()=>[t("button",{disabled:D.value,class:C(A(a.modelValue-1)),onClick:m},[F(a.$slots,"prev-icon",{},()=>[a.showIcons||a.$slots["prev-icon"]?(r(),c("svg",K,Z)):w("",!0)]),a.showLabels?(r(),c(x,{key:0},[h(b(a.previousLabel),1)],64)):w("",!0)],10,Q)]),(r(!0),c(x,null,W(L.value,o=>F(a.$slots,"page-button",{key:o,page:o,setPage:l,disabled:T(o)},()=>[t("button",{disabled:T(o),class:C(R(o===a.modelValue)),onClick:E=>l(o)},b(o),11,ss)])),128)),F(a.$slots,"next-button",{disabled:V.value,increasePage:k},()=>[t("button",{disabled:V.value,class:C(A(a.modelValue+1)),onClick:k},[a.showLabels?(r(),c(x,{key:0},[h(b(a.nextLabel),1)],64)):w("",!0),F(a.$slots,"next-icon",{},()=>[a.showIcons||a.$slots["next-icon"]?(r(),c("svg",ns,os)):w("",!0)])],10,as)]),a.enableFirstAndLastButtons?F(a.$slots,"last-button",{key:1},()=>[t("button",{disabled:M.value,class:C(A(y.value)),onClick:I}," Last ",10,ts)]):w("",!0),F(a.$slots,"end")],2)]))}}),es={class:"vp-raw flex flex-col items-center"},ps=f({__name:"FwbPaginationExample",setup(u){const n=v(1);return(e,s)=>(r(),c("div",es,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[0]||(s[0]=l=>n.value=l),"total-items":100,class:"mb-2"},null,8,["modelValue"]),p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[1]||(s[1]=l=>n.value=l),"total-items":100,large:""},null,8,["modelValue"])]))}}),rs={class:"vp-raw flex justify-center"},cs=f({__name:"FwbPaginationExampleNavigation",setup(u){const n=v(1);return(e,s)=>(r(),c("div",rs,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[0]||(s[0]=l=>n.value=l),layout:"navigation","total-pages":100},null,8,["modelValue"])]))}}),Es={class:"vp-raw flex flex-col items-center justify-center text-center"},ys=f({__name:"FwbPaginationExampleTable",setup(u){const n=v(1),e=v(1);return(s,l)=>(r(),c("div",Es,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":l[0]||(l[0]=m=>n.value=m),layout:"table","per-page":20,"total-items":998,class:"mb-2"},null,8,["modelValue"]),p(i(d),{modelValue:e.value,"onUpdate:modelValue":l[1]||(l[1]=m=>e.value=m),layout:"table","per-page":100,"total-items":750,large:""},null,8,["modelValue"])]))}}),is={class:"vp-raw flex flex-col items-center"},ds=t("span",{class:"sr-only"},"Previous",-1),us=t("svg",{class:"w-2.5 h-2.5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 6 10"},[t("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 1 1 5l4 4"})],-1),gs=t("span",{class:"sr-only"},"Next",-1),Fs=t("svg",{class:"w-2.5 h-2.5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 6 10"},[t("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m1 9 4-4-4-4"})],-1),hs=t("span",{class:"sr-only"},"Previous",-1),ms=t("svg",{class:"w-2.5 h-2.5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 6 10"},[t("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 1 1 5l4 4"})],-1),bs=t("span",{class:"sr-only"},"Next",-1),vs=t("svg",{class:"w-2.5 h-2.5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 6 10"},[t("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m1 9 4-4-4-4"})],-1),fs=f({__name:"FwbPaginationExampleWithIcons",setup(u){const n=v(1);return(e,s)=>(r(),c("div",is,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[0]||(s[0]=l=>n.value=l),"total-pages":100,"show-labels":!1,class:"mb-2"},{"prev-icon":_(()=>[ds,us]),"next-icon":_(()=>[gs,Fs]),_:1},8,["modelValue"]),p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[1]||(s[1]=l=>n.value=l),"total-pages":100,"show-labels":!1,large:""},{"prev-icon":_(()=>[hs,ms]),"next-icon":_(()=>[bs,vs]),_:1},8,["modelValue"])]))}}),Cs={class:"vp-raw flex justify-center"},ws=f({__name:"FwbPaginationExampleWithCustomText",setup(u){const n=v(1);return(e,s)=>(r(),c("div",Cs,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[0]||(s[0]=l=>n.value=l),"total-pages":100,"previous-label":"<<<","next-label":">>>"},null,8,["modelValue"])]))}}),_s={class:"vp-raw flex justify-center"},qs=f({__name:"FwbPaginationExampleWithCustomSlice",setup(u){const n=v(1);return(e,s)=>(r(),c("div",_s,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[0]||(s[0]=l=>n.value=l),"slice-length":4,"total-pages":100},null,8,["modelValue"])]))}}),Ps={class:"vp-raw flex flex-col items-center"},Bs=["onClick"],As=f({__name:"FwbPaginationExampleSlots",setup(u){const n=v(1);return(e,s)=>(r(),c("div",Ps,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[0]||(s[0]=l=>n.value=l),"total-items":100,"show-labels":!1},{"prev-icon":_(()=>[h(" ⬅️ ")]),"next-icon":_(()=>[h(" ➡️ ")]),"page-button":_(({page:l,setPage:m})=>[t("button",{class:"flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-purple-200 border border-purple-300 hover:bg-purple-300 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",onClick:k=>m(l)},b(l),9,Bs)]),_:1},8,["modelValue"]),h(" Current page: "+b(n.value),1)]))}}),ks=q('

Vue Pagination - Flowbite ​

Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes ​

The pagination component can be used to navigate across a series of content and data sets for various pages such as blog posts, products, and more. You can use multiple variants of this component with or without icons and even for paginating table data entries.

Default pagination ​

Use the following list of pagination items based on two sizes powered by Tailwind CSS utility classes to indicate a series of content for your website.

',5),xs=q(`
vue
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-items="100"></fwb-pagination>
+  <fwb-pagination v-model="currentPage" :total-items="100" large></fwb-pagination>
+</template>
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-items="100"></fwb-pagination>
+  <fwb-pagination v-model="currentPage" :total-items="100" large></fwb-pagination>
+</template>

Pagination with icons ​

The following pagination component example shows how you can use SVG icons instead of text to show the previous and next pages.

`,3),Ds=q(`
vue
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-pages="100" show-icons></fwb-pagination>
+</template>
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-pages="100" show-icons></fwb-pagination>
+</template>

Default with custom length ​

You can use your own pages count in the row by passing props: slice-length This prop means left side and right side pages row slicing. In the example it has value 4. So row length will be 4 + 1 + 4 pages - 9 pages.

vue
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-pages="100" :slice-length="4"></fwb-pagination>
+</template>
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-pages="100" :slice-length="4"></fwb-pagination>
+</template>
`,4),Vs=q(`

Previous and next ​

vue
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <div class="flex items-center justify-center text-center">
+    <fwb-pagination v-model="currentPage" :total-pages="10" :layout="'navigation'"></fwb-pagination>
+  </div>
+</template>
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <div class="flex items-center justify-center text-center">
+    <fwb-pagination v-model="currentPage" :total-pages="10" :layout="'navigation'"></fwb-pagination>
+  </div>
+</template>
`,2),Ts=q(`

Pagination with table layout ​

To use that layout you have to pass required props:

  • per-page: it's items count displayed on each page.
  • total-items: it's the total items count.

And there you don't need to use total-pages prop.

vue
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <div class="flex items-center justify-center text-center">
+    <fwb-pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" class="mb-2" />
+    <fwb-pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" large />
+  </div>
+</template>
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <div class="flex items-center justify-center text-center">
+    <fwb-pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" class="mb-2" />
+    <fwb-pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" large />
+  </div>
+</template>
`,5),$s=q(`

Pagination with custom labels ​

vue
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-pages="100" previous-label="<<<" next-label=">>>"></fwb-pagination>
+</template>
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-pages="100" previous-label="<<<" next-label=">>>"></fwb-pagination>
+</template>
`,2),Ss=t("h2",{id:"slots-example",tabindex:"-1"},[h("Slots example "),t("a",{class:"header-anchor",href:"#slots-example","aria-label":'Permalink to "Slots example"'},"​")],-1),Is=q(`
vue
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-items="100" :show-labels="false">
+    <template #prev-icon>⬅️</template>
+    <template #next-icon>➡️</template>
+    <template v-slot:page-button="{ page, setPage }">
+      <button
+          @click="setPage(page)"
+          class="flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-purple-200 border border-purple-300 hover:bg-purple-300 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+      >
+        {{ page }}
+      </button>
+    </template>
+  </fwb-pagination>
+  Current page: {{ currentPage }}
+</template>
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-items="100" :show-labels="false">
+    <template #prev-icon>⬅️</template>
+    <template #next-icon>➡️</template>
+    <template v-slot:page-button="{ page, setPage }">
+      <button
+          @click="setPage(page)"
+          class="flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-purple-200 border border-purple-300 hover:bg-purple-300 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+      >
+        {{ page }}
+      </button>
+    </template>
+  </fwb-pagination>
+  Current page: {{ currentPage }}
+</template>

API ​

Props ​

NameValuesDefault
modelValuenumber1
totalPagesnumber10
perPagenumber10
totalItemsnumber10
layoutpagination, table, navigationpagination
showIconsbooleanfalse
sliceLengthnumber2
previousLabelstringPrevious
nextLabelstringNext
enableFirstAndLastButtonsbooleanfalse
showLabelsbooleantrue
largebooleanfalse

Events ​

NameDescription
update:model-valueCurrent page changed
page-changedCurrent page changed

Slots ​

NameDescription
startcontent before buttons
endcontent after buttons
first-buttonfirst button content
last-buttonlast button content
prev-buttonprevious button content
next-buttonnext button content
prev-iconprevious icon slot
next-iconnext icon slot
page-buttonpage button slot
`,8),Us=JSON.parse('{"title":"Vue Pagination - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/pagination.md","filePath":"components/pagination.md"}'),Ls={name:"components/pagination.md"},zs=Object.assign(Ls,{setup(u){return(n,e)=>(r(),c("div",null,[ks,p(ps),xs,p(fs),Ds,p(qs),Vs,p(cs),Ts,p(ys),$s,p(ws),Ss,p(As),Is]))}});export{Us as __pageData,zs as default}; diff --git a/docs/.vitepress/dist/assets/components_pagination.md.c228117a.lean.js b/docs/.vitepress/dist/assets/components_pagination.md.c228117a.lean.js new file mode 100644 index 0000000..18e259b --- /dev/null +++ b/docs/.vitepress/dist/assets/components_pagination.md.c228117a.lean.js @@ -0,0 +1 @@ +import{t as $}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as f,g,o as r,c,n as C,a as h,k as t,t as b,e as w,r as F,F as x,D as W,h as v,H as p,l as i,w as _,Q as q}from"./chunks/framework.3f630664.js";const O={"aria-label":"Navigation"},Y={class:"font-semibold text-gray-900 dark:text-white"},G={class:"font-semibold text-gray-900 dark:text-white"},H={class:"font-semibold text-gray-900 dark:text-white"},J=["disabled"],Q=["disabled"],K={key:0,stroke:"currentColor",fill:"currentColor","stroke-width":"0",viewBox:"0 0 20 20","aria-hidden":"true",class:"h-5 w-5",height:"1em",width:"1em",xmlns:"http://www.w3.org/2000/svg"},X=t("path",{"fill-rule":"evenodd",d:"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z","clip-rule":"evenodd"},null,-1),Z=[X],ss=["disabled","onClick"],as=["disabled"],ns={key:0,stroke:"currentColor",fill:"currentColor","stroke-width":"0",viewBox:"0 0 20 20","aria-hidden":"true",class:"h-5 w-5",height:"1em",width:"1em",xmlns:"http://www.w3.org/2000/svg"},ls=t("path",{"fill-rule":"evenodd",d:"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z","clip-rule":"evenodd"},null,-1),os=[ls],ts=["disabled"],d=f({__name:"FwbPagination",props:{modelValue:{default:1},totalPages:{default:void 0},perPage:{default:10},totalItems:{default:10},layout:{default:"pagination"},showIcons:{type:Boolean,default:!1},sliceLength:{default:2},previousLabel:{default:"Prev"},nextLabel:{default:"Next"},enableFirstAndLastButtons:{type:Boolean,default:!1},showLabels:{type:Boolean,default:!0},large:{type:Boolean,default:!1}},emits:["update:model-value","page-changed"],setup(u,{emit:n}){const e=n,s=u;function l(a){e("update:model-value",a),e("page-changed",a)}function m(){e("update:model-value",s.modelValue-1),e("page-changed",s.modelValue-1)}function k(){e("update:model-value",s.modelValue+1),e("page-changed",s.modelValue+1)}function S(){e("update:model-value",1),e("page-changed",1)}function I(){const a=y.value;e("update:model-value",a),e("page-changed",a)}const y=g(()=>s.totalPages?s.totalPages:Math.ceil(s.totalItems/s.perPage)),D=g(()=>s.modelValue<=1),V=g(()=>s.modelValue>=y.value),T=a=>a===s.modelValue,L=g(()=>{if(s.layout==="navigation")return[];if(s.layout==="table")return[];if(y.value<=s.sliceLength*2+1){const o=[];for(let E=1;E<=y.value;E++)o.push(E);return o}if(s.modelValue<=s.sliceLength){const o=[],E=Math.abs(s.modelValue-s.sliceLength)+s.modelValue+s.sliceLength+1;for(let B=1;B<=E;B++)o.push(B);return o}if(s.modelValue>=y.value-s.sliceLength){const o=[];for(let E=Math.abs(y.value-s.sliceLength*2);E<=y.value;E++)o.push(E);return o}const a=[],P=s.modelValue-s.sliceLength>0?s.modelValue-s.sliceLength:1;for(let o=P;o=y.value);o++)a.push(o);return a}),N=g(()=>s.modelValue*s.perPage-s.perPage+1),j=g(()=>{const a=s.modelValue*s.perPage;return s.totalItems&&a>s.totalItems?s.totalItems:a}),U=g(()=>s.totalItems?s.totalItems:y.value*s.perPage),z=g(()=>s.modelValue===1),M=g(()=>s.modelValue===y.value);function R(a){const P="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",o="text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:bg-gray-700 dark:text-white",E="px-4 h-10";return $(P,a&&o,s.large&&E)}function A(a){const P="flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",o="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-white cursor-not-allowed",E="px-4 h-10",B="border-none text-white hover:text-white bg-gray-800 rounded-none first:rounded-l last:rounded-r hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white";return $(P,a===s.modelValue&&o,s.large&&E,(a>y.value||a<1)&&o,s.layout==="navigation"&&"first:mr-3",(s.layout==="navigation"||s.layout==="table")&&"rounded-lg",s.layout==="table"&&B)}return(a,P)=>(r(),c("nav",O,[a.layout==="table"?(r(),c("div",{key:0,class:C(["text-gray-700 dark:text-gray-400 mb-2",a.large?"text-base":"text-sm"])},[h(" Showing "),t("span",Y,b(N.value),1),h(" to "),t("span",G,b(j.value),1),h(" of "),t("span",H,b(U.value),1)],2)):w("",!0),t("div",{class:C(["inline-flex",a.large&&"text-base h-10"])},[F(a.$slots,"start"),a.enableFirstAndLastButtons?F(a.$slots,"first-button",{key:0},()=>[t("button",{disabled:z.value,class:C(A(1)),onClick:S}," First ",10,J)]):w("",!0),F(a.$slots,"prev-button",{disabled:D.value,decreasePage:m},()=>[t("button",{disabled:D.value,class:C(A(a.modelValue-1)),onClick:m},[F(a.$slots,"prev-icon",{},()=>[a.showIcons||a.$slots["prev-icon"]?(r(),c("svg",K,Z)):w("",!0)]),a.showLabels?(r(),c(x,{key:0},[h(b(a.previousLabel),1)],64)):w("",!0)],10,Q)]),(r(!0),c(x,null,W(L.value,o=>F(a.$slots,"page-button",{key:o,page:o,setPage:l,disabled:T(o)},()=>[t("button",{disabled:T(o),class:C(R(o===a.modelValue)),onClick:E=>l(o)},b(o),11,ss)])),128)),F(a.$slots,"next-button",{disabled:V.value,increasePage:k},()=>[t("button",{disabled:V.value,class:C(A(a.modelValue+1)),onClick:k},[a.showLabels?(r(),c(x,{key:0},[h(b(a.nextLabel),1)],64)):w("",!0),F(a.$slots,"next-icon",{},()=>[a.showIcons||a.$slots["next-icon"]?(r(),c("svg",ns,os)):w("",!0)])],10,as)]),a.enableFirstAndLastButtons?F(a.$slots,"last-button",{key:1},()=>[t("button",{disabled:M.value,class:C(A(y.value)),onClick:I}," Last ",10,ts)]):w("",!0),F(a.$slots,"end")],2)]))}}),es={class:"vp-raw flex flex-col items-center"},ps=f({__name:"FwbPaginationExample",setup(u){const n=v(1);return(e,s)=>(r(),c("div",es,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[0]||(s[0]=l=>n.value=l),"total-items":100,class:"mb-2"},null,8,["modelValue"]),p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[1]||(s[1]=l=>n.value=l),"total-items":100,large:""},null,8,["modelValue"])]))}}),rs={class:"vp-raw flex justify-center"},cs=f({__name:"FwbPaginationExampleNavigation",setup(u){const n=v(1);return(e,s)=>(r(),c("div",rs,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[0]||(s[0]=l=>n.value=l),layout:"navigation","total-pages":100},null,8,["modelValue"])]))}}),Es={class:"vp-raw flex flex-col items-center justify-center text-center"},ys=f({__name:"FwbPaginationExampleTable",setup(u){const n=v(1),e=v(1);return(s,l)=>(r(),c("div",Es,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":l[0]||(l[0]=m=>n.value=m),layout:"table","per-page":20,"total-items":998,class:"mb-2"},null,8,["modelValue"]),p(i(d),{modelValue:e.value,"onUpdate:modelValue":l[1]||(l[1]=m=>e.value=m),layout:"table","per-page":100,"total-items":750,large:""},null,8,["modelValue"])]))}}),is={class:"vp-raw flex flex-col items-center"},ds=t("span",{class:"sr-only"},"Previous",-1),us=t("svg",{class:"w-2.5 h-2.5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 6 10"},[t("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 1 1 5l4 4"})],-1),gs=t("span",{class:"sr-only"},"Next",-1),Fs=t("svg",{class:"w-2.5 h-2.5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 6 10"},[t("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m1 9 4-4-4-4"})],-1),hs=t("span",{class:"sr-only"},"Previous",-1),ms=t("svg",{class:"w-2.5 h-2.5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 6 10"},[t("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 1 1 5l4 4"})],-1),bs=t("span",{class:"sr-only"},"Next",-1),vs=t("svg",{class:"w-2.5 h-2.5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 6 10"},[t("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m1 9 4-4-4-4"})],-1),fs=f({__name:"FwbPaginationExampleWithIcons",setup(u){const n=v(1);return(e,s)=>(r(),c("div",is,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[0]||(s[0]=l=>n.value=l),"total-pages":100,"show-labels":!1,class:"mb-2"},{"prev-icon":_(()=>[ds,us]),"next-icon":_(()=>[gs,Fs]),_:1},8,["modelValue"]),p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[1]||(s[1]=l=>n.value=l),"total-pages":100,"show-labels":!1,large:""},{"prev-icon":_(()=>[hs,ms]),"next-icon":_(()=>[bs,vs]),_:1},8,["modelValue"])]))}}),Cs={class:"vp-raw flex justify-center"},ws=f({__name:"FwbPaginationExampleWithCustomText",setup(u){const n=v(1);return(e,s)=>(r(),c("div",Cs,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[0]||(s[0]=l=>n.value=l),"total-pages":100,"previous-label":"<<<","next-label":">>>"},null,8,["modelValue"])]))}}),_s={class:"vp-raw flex justify-center"},qs=f({__name:"FwbPaginationExampleWithCustomSlice",setup(u){const n=v(1);return(e,s)=>(r(),c("div",_s,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[0]||(s[0]=l=>n.value=l),"slice-length":4,"total-pages":100},null,8,["modelValue"])]))}}),Ps={class:"vp-raw flex flex-col items-center"},Bs=["onClick"],As=f({__name:"FwbPaginationExampleSlots",setup(u){const n=v(1);return(e,s)=>(r(),c("div",Ps,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[0]||(s[0]=l=>n.value=l),"total-items":100,"show-labels":!1},{"prev-icon":_(()=>[h(" ⬅️ ")]),"next-icon":_(()=>[h(" ➡️ ")]),"page-button":_(({page:l,setPage:m})=>[t("button",{class:"flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-purple-200 border border-purple-300 hover:bg-purple-300 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",onClick:k=>m(l)},b(l),9,Bs)]),_:1},8,["modelValue"]),h(" Current page: "+b(n.value),1)]))}}),ks=q("",5),xs=q("",3),Ds=q("",4),Vs=q("",2),Ts=q("",5),$s=q("",2),Ss=t("h2",{id:"slots-example",tabindex:"-1"},[h("Slots example "),t("a",{class:"header-anchor",href:"#slots-example","aria-label":'Permalink to "Slots example"'},"​")],-1),Is=q("",8),Us=JSON.parse('{"title":"Vue Pagination - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/pagination.md","filePath":"components/pagination.md"}'),Ls={name:"components/pagination.md"},zs=Object.assign(Ls,{setup(u){return(n,e)=>(r(),c("div",null,[ks,p(ps),xs,p(fs),Ds,p(qs),Vs,p(cs),Ts,p(ys),$s,p(ws),Ss,p(As),Is]))}});export{Us as __pageData,zs as default}; diff --git a/docs/.vitepress/dist/assets/components_paragraph.md.28aca1b3.js b/docs/.vitepress/dist/assets/components_paragraph.md.28aca1b3.js new file mode 100644 index 0000000..31e7e18 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_paragraph.md.28aca1b3.js @@ -0,0 +1,117 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as a}from"./chunks/FwbP.vue_vue_type_script_setup_true_lang.b05f1505.js";import{o as t,c as p,H as s,w as n,a as e,l,Q as i}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";const E={class:"vp-raw"},y={__name:"FwbPExample",setup(o){return(c,r)=>(t(),p("div",E,[s(l(a),null,{default:n(()=>[e(" Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes. ")]),_:1}),s(l(a),null,{default:n(()=>[e(" Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1})]))}},d={class:"vp-raw"},h={__name:"FwbPExampleCustom",setup(o){return(c,r)=>(t(),p("div",d,[s(l(a),{class:"font-light"},{default:n(()=>[e(" Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes. ")]),_:1}),s(l(a),{class:"font-bold"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1}),s(l(a),{class:"text-left"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1}),s(l(a),{class:"text-center"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1}),s(l(a),{class:"text-right"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1}),s(l(a),{class:"text-green-600 dark:text-green-400 italic"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1})]))}},u=i(`

Vue Paragraph - Flowbite ​

Use the paragraph component to create multiple blocks of text separated by blank lines and write content based on multiple layouts and styles ​

Default paragraph ​

Use this example of a paragraph element to use inside article content or a landing page.

vue
<template>
+  <fwb-p>
+    Track work across the enterprise through an open, collaborative platform.
+    Link issues across Jira and ingest data from other software development
+    tools, so your IT support and operations teams have richer contextual
+    information to rapidly respond to requests, incidents, and changes.
+  </fwb-p>
+  <fwb-p>
+    Deliver great service experiences fast - without the complexityof
+    traditional ITSM solutions. Accelerate critical development work,
+    eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </fwb-p>
+</template>
+
+<script setup>
+import { FwbP } from 'flowbite-vue'
+</script>
<template>
+  <fwb-p>
+    Track work across the enterprise through an open, collaborative platform.
+    Link issues across Jira and ingest data from other software development
+    tools, so your IT support and operations teams have richer contextual
+    information to rapidly respond to requests, incidents, and changes.
+  </fwb-p>
+  <fwb-p>
+    Deliver great service experiences fast - without the complexityof
+    traditional ITSM solutions. Accelerate critical development work,
+    eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </fwb-p>
+</template>
+
+<script setup>
+import { FwbP } from 'flowbite-vue'
+</script>
`,5),g=i(`

Custom classes ​

Use class attribute to apply the tailwind classes.

vue
<template>
+  <fwb-p class="font-light">
+    Track work across the enterprise through an open, collaborative platform.
+    Link issues across Jira and ingest data from other software development
+    tools, so your IT support and operations teams have richer contextual
+    information to rapidly respond to requests, incidents, and changes.
+  </fwb-p>
+  <fwb-p class="font-bold">
+    Deliver great service experiences fast - without the complexityof
+    traditional ITSM solutions. Accelerate critical development work,
+    eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </fwb-p>
+  <fwb-p  class="test-left">
+    Deliver great service experiences fast - without the complexityof
+    traditional ITSM solutions. Accelerate critical development work,
+    eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </fwb-p>
+  <fwb-p class="test-center">
+    Deliver great service experiences fast - without the complexityof
+    traditional ITSM solutions. Accelerate critical development work,
+    eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </fwb-p>
+  <fwb-p class="text-right">
+    Deliver great service experiences fast - without the complexityof
+    traditional ITSM solutions. Accelerate critical development work,
+    eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </fwb-p>
+  <fwb-p class="text-green-600 dark:text-green-400 italic">
+    Deliver great service experiences fast - without the complexityof
+    traditional ITSM solutions. Accelerate critical development work,
+    eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </fwb-p>
+</template>
+
+<script setup>
+import { FwbP } from 'flowbite-vue'
+</script>
<template>
+  <fwb-p class="font-light">
+    Track work across the enterprise through an open, collaborative platform.
+    Link issues across Jira and ingest data from other software development
+    tools, so your IT support and operations teams have richer contextual
+    information to rapidly respond to requests, incidents, and changes.
+  </fwb-p>
+  <fwb-p class="font-bold">
+    Deliver great service experiences fast - without the complexityof
+    traditional ITSM solutions. Accelerate critical development work,
+    eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </fwb-p>
+  <fwb-p  class="test-left">
+    Deliver great service experiences fast - without the complexityof
+    traditional ITSM solutions. Accelerate critical development work,
+    eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </fwb-p>
+  <fwb-p class="test-center">
+    Deliver great service experiences fast - without the complexityof
+    traditional ITSM solutions. Accelerate critical development work,
+    eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </fwb-p>
+  <fwb-p class="text-right">
+    Deliver great service experiences fast - without the complexityof
+    traditional ITSM solutions. Accelerate critical development work,
+    eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </fwb-p>
+  <fwb-p class="text-green-600 dark:text-green-400 italic">
+    Deliver great service experiences fast - without the complexityof
+    traditional ITSM solutions. Accelerate critical development work,
+    eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </fwb-p>
+</template>
+
+<script setup>
+import { FwbP } from 'flowbite-vue'
+</script>
`,3),_=JSON.parse('{"title":"Vue Paragraph - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/paragraph.md","filePath":"components/paragraph.md"}'),m={name:"components/paragraph.md"},x=Object.assign(m,{setup(o){return(c,r)=>(t(),p("div",null,[u,s(y),g,s(h)]))}});export{_ as __pageData,x as default}; diff --git a/docs/.vitepress/dist/assets/components_paragraph.md.28aca1b3.lean.js b/docs/.vitepress/dist/assets/components_paragraph.md.28aca1b3.lean.js new file mode 100644 index 0000000..fd2bb02 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_paragraph.md.28aca1b3.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as a}from"./chunks/FwbP.vue_vue_type_script_setup_true_lang.b05f1505.js";import{o as t,c as p,H as s,w as n,a as e,l,Q as i}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";const E={class:"vp-raw"},y={__name:"FwbPExample",setup(o){return(c,r)=>(t(),p("div",E,[s(l(a),null,{default:n(()=>[e(" Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes. ")]),_:1}),s(l(a),null,{default:n(()=>[e(" Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1})]))}},d={class:"vp-raw"},h={__name:"FwbPExampleCustom",setup(o){return(c,r)=>(t(),p("div",d,[s(l(a),{class:"font-light"},{default:n(()=>[e(" Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes. ")]),_:1}),s(l(a),{class:"font-bold"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1}),s(l(a),{class:"text-left"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1}),s(l(a),{class:"text-center"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1}),s(l(a),{class:"text-right"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1}),s(l(a),{class:"text-green-600 dark:text-green-400 italic"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1})]))}},u=i("",5),g=i("",3),_=JSON.parse('{"title":"Vue Paragraph - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/paragraph.md","filePath":"components/paragraph.md"}'),m={name:"components/paragraph.md"},x=Object.assign(m,{setup(o){return(c,r)=>(t(),p("div",null,[u,s(y),g,s(h)]))}});export{_ as __pageData,x as default}; diff --git a/docs/.vitepress/dist/assets/components_progress.md.af9b4180.js b/docs/.vitepress/dist/assets/components_progress.md.af9b4180.js new file mode 100644 index 0000000..7357a42 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_progress.md.af9b4180.js @@ -0,0 +1,109 @@ +import{c as u}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g,d as m,$ as B,o as p,c as r,k as c,t as F,n as y,l as s,e as d,N as f,F as h,a as b,H as a,b as _,Q as E}from"./chunks/framework.3f630664.js";const w={default:"bg-blue-600 dark:bg-blue-600",blue:"bg-blue-600 dark:bg-blue-600",dark:"bg-gray-600 dark:bg-gray-300",green:"bg-green-600 dark:bg-green-500",red:"bg-red-600 dark:bg-red-500",yellow:"bg-yellow-400",indigo:"bg-indigo-600 dark:bg-indigo-500",purple:"bg-purple-600 dark:bg-purple-500"},v={default:"",blue:"text-blue-700 dark:text-blue-500",dark:"dark:text-white",green:"text-green-700 dark:text-green-500",red:"text-red-700 dark:text-red-500",yellow:"text-yellow-700 dark:text-yellow-500",indigo:"text-indigo-700 dark:text-indigo-500",purple:"text-purple-700 dark:text-purple-500"},C={sm:"h-1.5 text-xs leading-none",md:"h-2.5 text-xs leading-none",lg:"h-4 text-sm leading-none",xl:"h-6 text-base leading-tight"};function A(n){const e=g(()=>u(w[n.color.value],C[n.size.value])),t=g(()=>u(C[n.size.value])),i=g(()=>u(v[n.color.value]));return{innerClasses:e,outerClasses:t,outsideLabelClasses:i}}const D={key:0,class:"flex justify-between mb-1"},l=m({__name:"FwbProgress",props:{color:{default:"default"},label:{default:""},labelPosition:{default:"none"},labelProgress:{type:Boolean,default:!1},progress:{default:0},size:{default:"md"}},setup(n){const e=n,{innerClasses:t,outerClasses:i,outsideLabelClasses:q}=A(B(e));return(o,O)=>(p(),r("div",null,[o.label||o.labelProgress&&o.labelPosition==="outside"?(p(),r("div",D,[c("span",{class:y([s(q),"text-base font-medium"])},F(o.label),3),o.labelProgress&&o.labelPosition==="outside"?(p(),r("span",{key:0,class:y([s(q),"text-sm font-medium"])},F(o.progress)+"%",3)):d("",!0)])):d("",!0),c("div",{class:y([s(i),"w-full bg-gray-200 rounded-full dark:bg-gray-700"])},[c("div",{class:y([s(t),"rounded-full font-medium text-blue-100 text-center p-0.5"]),style:f({width:o.progress+"%"})},[o.labelProgress&&o.labelPosition==="inside"?(p(),r(h,{key:0},[b(F(o.progress)+"% ",1)],64)):d("",!0)],6)],2)]))}}),k={class:"vp-raw"},P={__name:"FwbProgressExample",setup(n){return(e,t)=>(p(),r("div",k,[a(s(l),{progress:45})]))}},x={class:"vp-raw grid gap-2"},T={__name:"FwbProgressExampleColor",setup(n){return(e,t)=>(p(),r("div",x,[a(s(l),{label:"Default",progress:12.5}),a(s(l),{color:"dark",label:"Dark",progress:25}),a(s(l),{color:"blue",label:"Blue",progress:37.5}),a(s(l),{color:"red",label:"Red",progress:50}),a(s(l),{color:"green",label:"Green",progress:62.5}),a(s(l),{color:"yellow",label:"Yellow",progress:75}),a(s(l),{color:"indigo",label:"Indigo",progress:87.5}),a(s(l),{color:"purple",label:"Purple",progress:100})]))}},z={__name:"FwbProgressExampleLabelInside",setup(n){return(e,t)=>(p(),_(s(l),{progress:50,"label-position":"inside","label-progress":"",size:"lg"}))}},S={__name:"FwbProgressExampleLabelOutside",setup(n){return(e,t)=>(p(),_(s(l),{progress:42,"label-position":"outside","label-progress":"",label:"Flowbite Vue 3"}))}},V={class:"vp-raw grid gap-2"},I={__name:"FwbProgressExampleSize",setup(n){return(e,t)=>(p(),r("div",V,[a(s(l),{progress:25,label:"Small",size:"sm"}),a(s(l),{progress:50,label:"Medium",size:"md"}),a(s(l),{progress:75,label:"Large",size:"lg"}),a(s(l),{progress:100,label:"Extra Large",size:"xl"})]))}},N=c("h1",{id:"vue-progress-bar-flowbite",tabindex:"-1"},[b("Vue Progress Bar - Flowbite "),c("a",{class:"header-anchor",href:"#vue-progress-bar-flowbite","aria-label":'Permalink to "Vue Progress Bar - Flowbite"'},"​")],-1),$=c("h2",{id:"default",tabindex:"-1"},[b("Default "),c("a",{class:"header-anchor",href:"#default","aria-label":'Permalink to "Default"'},"​")],-1),L=E(`
vue
<template>
+  <fwb-progress :progress="45" />
+</template>
+
+<script setup>
+import { FwbProgress } from 'flowbite-vue'
+</script>
<template>
+  <fwb-progress :progress="45" />
+</template>
+
+<script setup>
+import { FwbProgress } from 'flowbite-vue'
+</script>

Sizes ​

You can also use different sizes by using various sizing.

`,3),R=E(`
vue
<template>
+  <div class="grid gap-2">
+    <fwb-progress :progress="25" size="sm" label="Small" />
+    <fwb-progress :progress="50" size="md" label="Medium" />
+    <fwb-progress :progress="75" size="lg" label="Large" />
+    <fwb-progress :progress="100" size="xl" label="Extra Large" />
+  </div>
+</template>
+
+<script setup>
+import { FwbProgress } from 'flowbite-vue'
+</script>
<template>
+  <div class="grid gap-2">
+    <fwb-progress :progress="25" size="sm" label="Small" />
+    <fwb-progress :progress="50" size="md" label="Medium" />
+    <fwb-progress :progress="75" size="lg" label="Large" />
+    <fwb-progress :progress="100" size="xl" label="Extra Large" />
+  </div>
+</template>
+
+<script setup>
+import { FwbProgress } from 'flowbite-vue'
+</script>

With label inside ​

Here is an example of using a progress bar with the label inside the bar.

`,3),Y=E(`
vue
<template>
+  <fwb-progress
+    :progress="50"
+    label-position="inside"
+    label-progress
+    size="lg"
+  />
+</template>
+
+<script setup>
+import { FwbProgress } from 'flowbite-vue'
+</script>
<template>
+  <fwb-progress
+    :progress="50"
+    label-position="inside"
+    label-progress
+    size="lg"
+  />
+</template>
+
+<script setup>
+import { FwbProgress } from 'flowbite-vue'
+</script>

With label outside ​

And this is an example of using a progress bar outside the bar.

`,3),W=E(`
vue
<template>
+  <fwb-progress
+    :progress="42"
+    label-position="outside"
+    label-progress
+    label="Flowbite Vue 3"
+  />
+</template>
+
+<script setup>
+import { FwbProgress } from 'flowbite-vue'
+</script>
<template>
+  <fwb-progress
+    :progress="42"
+    label-position="outside"
+    label-progress
+    label="Flowbite Vue 3"
+  />
+</template>
+
+<script setup>
+import { FwbProgress } from 'flowbite-vue'
+</script>

Colors ​

You can also apply color.

`,3),G=E(`
vue
<template>
+  <div class="grid gap-2">
+    <fwb-progress :progress="12.5" label="Default"  />
+    <fwb-progress :progress="25" color="dark" label="Dark"  />
+    <fwb-progress :progress="37.5" color="blue" label="Blue"  />
+    <fwb-progress :progress="50" color="red" label="Red"  />
+    <fwb-progress :progress="62.5" color="green" label="Green"  />
+    <fwb-progress :progress="75" color="yellow" label="Yellow"  />
+    <fwb-progress :progress="87.5" color="indigo" label="Indigo"  />
+    <fwb-progress :progress="100" color="purple" label="Purple"  />
+  </div>
+</template>
+
+<script setup>
+import { FwbProgress } from 'flowbite-vue'
+</script>
<template>
+  <div class="grid gap-2">
+    <fwb-progress :progress="12.5" label="Default"  />
+    <fwb-progress :progress="25" color="dark" label="Dark"  />
+    <fwb-progress :progress="37.5" color="blue" label="Blue"  />
+    <fwb-progress :progress="50" color="red" label="Red"  />
+    <fwb-progress :progress="62.5" color="green" label="Green"  />
+    <fwb-progress :progress="75" color="yellow" label="Yellow"  />
+    <fwb-progress :progress="87.5" color="indigo" label="Indigo"  />
+    <fwb-progress :progress="100" color="purple" label="Purple"  />
+  </div>
+</template>
+
+<script setup>
+import { FwbProgress } from 'flowbite-vue'
+</script>
`,1),J=JSON.parse('{"title":"Vue Progress Bar - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/progress.md","filePath":"components/progress.md"}'),M={name:"components/progress.md"},Q=Object.assign(M,{setup(n){return(e,t)=>(p(),r("div",null,[N,$,a(P),L,a(I),R,a(z),Y,a(S),W,a(T),G]))}});export{J as __pageData,Q as default}; diff --git a/docs/.vitepress/dist/assets/components_progress.md.af9b4180.lean.js b/docs/.vitepress/dist/assets/components_progress.md.af9b4180.lean.js new file mode 100644 index 0000000..0f6d0e9 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_progress.md.af9b4180.lean.js @@ -0,0 +1 @@ +import{c as u}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g,d as m,$ as B,o as p,c as r,k as c,t as F,n as y,l as s,e as d,N as f,F as h,a as b,H as a,b as _,Q as E}from"./chunks/framework.3f630664.js";const w={default:"bg-blue-600 dark:bg-blue-600",blue:"bg-blue-600 dark:bg-blue-600",dark:"bg-gray-600 dark:bg-gray-300",green:"bg-green-600 dark:bg-green-500",red:"bg-red-600 dark:bg-red-500",yellow:"bg-yellow-400",indigo:"bg-indigo-600 dark:bg-indigo-500",purple:"bg-purple-600 dark:bg-purple-500"},v={default:"",blue:"text-blue-700 dark:text-blue-500",dark:"dark:text-white",green:"text-green-700 dark:text-green-500",red:"text-red-700 dark:text-red-500",yellow:"text-yellow-700 dark:text-yellow-500",indigo:"text-indigo-700 dark:text-indigo-500",purple:"text-purple-700 dark:text-purple-500"},C={sm:"h-1.5 text-xs leading-none",md:"h-2.5 text-xs leading-none",lg:"h-4 text-sm leading-none",xl:"h-6 text-base leading-tight"};function A(n){const e=g(()=>u(w[n.color.value],C[n.size.value])),t=g(()=>u(C[n.size.value])),i=g(()=>u(v[n.color.value]));return{innerClasses:e,outerClasses:t,outsideLabelClasses:i}}const D={key:0,class:"flex justify-between mb-1"},l=m({__name:"FwbProgress",props:{color:{default:"default"},label:{default:""},labelPosition:{default:"none"},labelProgress:{type:Boolean,default:!1},progress:{default:0},size:{default:"md"}},setup(n){const e=n,{innerClasses:t,outerClasses:i,outsideLabelClasses:q}=A(B(e));return(o,O)=>(p(),r("div",null,[o.label||o.labelProgress&&o.labelPosition==="outside"?(p(),r("div",D,[c("span",{class:y([s(q),"text-base font-medium"])},F(o.label),3),o.labelProgress&&o.labelPosition==="outside"?(p(),r("span",{key:0,class:y([s(q),"text-sm font-medium"])},F(o.progress)+"%",3)):d("",!0)])):d("",!0),c("div",{class:y([s(i),"w-full bg-gray-200 rounded-full dark:bg-gray-700"])},[c("div",{class:y([s(t),"rounded-full font-medium text-blue-100 text-center p-0.5"]),style:f({width:o.progress+"%"})},[o.labelProgress&&o.labelPosition==="inside"?(p(),r(h,{key:0},[b(F(o.progress)+"% ",1)],64)):d("",!0)],6)],2)]))}}),k={class:"vp-raw"},P={__name:"FwbProgressExample",setup(n){return(e,t)=>(p(),r("div",k,[a(s(l),{progress:45})]))}},x={class:"vp-raw grid gap-2"},T={__name:"FwbProgressExampleColor",setup(n){return(e,t)=>(p(),r("div",x,[a(s(l),{label:"Default",progress:12.5}),a(s(l),{color:"dark",label:"Dark",progress:25}),a(s(l),{color:"blue",label:"Blue",progress:37.5}),a(s(l),{color:"red",label:"Red",progress:50}),a(s(l),{color:"green",label:"Green",progress:62.5}),a(s(l),{color:"yellow",label:"Yellow",progress:75}),a(s(l),{color:"indigo",label:"Indigo",progress:87.5}),a(s(l),{color:"purple",label:"Purple",progress:100})]))}},z={__name:"FwbProgressExampleLabelInside",setup(n){return(e,t)=>(p(),_(s(l),{progress:50,"label-position":"inside","label-progress":"",size:"lg"}))}},S={__name:"FwbProgressExampleLabelOutside",setup(n){return(e,t)=>(p(),_(s(l),{progress:42,"label-position":"outside","label-progress":"",label:"Flowbite Vue 3"}))}},V={class:"vp-raw grid gap-2"},I={__name:"FwbProgressExampleSize",setup(n){return(e,t)=>(p(),r("div",V,[a(s(l),{progress:25,label:"Small",size:"sm"}),a(s(l),{progress:50,label:"Medium",size:"md"}),a(s(l),{progress:75,label:"Large",size:"lg"}),a(s(l),{progress:100,label:"Extra Large",size:"xl"})]))}},N=c("h1",{id:"vue-progress-bar-flowbite",tabindex:"-1"},[b("Vue Progress Bar - Flowbite "),c("a",{class:"header-anchor",href:"#vue-progress-bar-flowbite","aria-label":'Permalink to "Vue Progress Bar - Flowbite"'},"​")],-1),$=c("h2",{id:"default",tabindex:"-1"},[b("Default "),c("a",{class:"header-anchor",href:"#default","aria-label":'Permalink to "Default"'},"​")],-1),L=E("",3),R=E("",3),Y=E("",3),W=E("",3),G=E("",1),J=JSON.parse('{"title":"Vue Progress Bar - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/progress.md","filePath":"components/progress.md"}'),M={name:"components/progress.md"},Q=Object.assign(M,{setup(n){return(e,t)=>(p(),r("div",null,[N,$,a(P),L,a(I),R,a(z),Y,a(S),W,a(T),G]))}});export{J as __pageData,Q as default}; diff --git a/docs/.vitepress/dist/assets/components_radio.md.b618a9a7.js b/docs/.vitepress/dist/assets/components_radio.md.b618a9a7.js new file mode 100644 index 0000000..b9eefd0 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_radio.md.b618a9a7.js @@ -0,0 +1,335 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as p}from"./chunks/FwbRadio.vue_vue_type_script_setup_true_lang.a8d8cba7.js";import{h as i,o as t,c as u,H as l,l as o,k as y,b as q,w as e,a as d,t as m,Q as r}from"./chunks/framework.3f630664.js";import{_ as b}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";import{a as F,_ as v}from"./chunks/FwbListGroupItem.vue_vue_type_script_setup_true_lang.9898f565.js";import{_ as g}from"./chunks/FwbP.vue_vue_type_script_setup_true_lang.b05f1505.js";import"./chunks/simplifyTailwindClasses.275301d3.js";import"./chunks/useMergeClasses.5cec3a4e.js";const f={class:"vp-raw"},C={__name:"FwbRadioExample",setup(c){const s=i();return(E,a)=>(t(),u("div",f,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Radio 1",name:"radio",value:"one"},null,8,["modelValue"]),l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),label:"Radio 2",name:"radio",value:"two"},null,8,["modelValue"])]))}},B={class:"vp-raw grid grid-cols-2 gap-6"},_={class:"flex items-center p-2 border border-gray-200 rounded dark:border-gray-700"},w={class:"flex items-center p-2 border border-gray-200 rounded dark:border-gray-700"},h={__name:"FwbRadioExampleBordered",setup(c){const s=i("one");return(E,a)=>(t(),u("div",B,[y("div",_,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Radio 1",name:"radio-bordered",value:"one"},null,8,["modelValue"])]),y("div",w,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),label:"Radio 2",name:"radio-bordered",value:"two"},null,8,["modelValue"])])]))}},A={class:"vp-raw"},k={__name:"FwbRadioExampleDisabled",setup(c){const s=i("two");return(E,a)=>(t(),u("div",A,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),disabled:"",label:"Disabled radio",name:"radio-disabled",value:"one"},null,8,["modelValue"]),l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),disabled:"",label:"Disabled checked",name:"radio-disabled",value:"two"},null,8,["modelValue"])]))}},D={class:"vp-raw flex w-96"},V={__name:"FwbRadioExampleInline",setup(c){const s=i("first");return(E,a)=>(t(),u("div",D,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Inline 1",value:"first"},null,8,["modelValue"]),l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),label:"Inline 2",value:"second"},null,8,["modelValue"]),l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[2]||(a[2]=n=>s.value=n),label:"Inline 3",value:"third"},null,8,["modelValue"]),l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[3]||(a[3]=n=>s.value=n),label:"Inline 4",value:"fourth"},null,8,["modelValue"])]))}},R={__name:"FwbRadioExampleLink",setup(c){const s=i();return(E,a)=>(t(),q(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),name:"with-link",value:"first"},{default:e(()=>[d(" I agree with the "),l(o(b),{class:"ml-1",href:"#"},{default:e(()=>[d(" terms and conditions ")]),_:1}),d(". ")]),_:1},8,["modelValue"]))}},x={class:"vp-raw"},T={__name:"FwbRadioExampleList",setup(c){const s=i("Vue JS");return(E,a)=>(t(),u("div",x,[l(o(g),{class:"mb-2"},{default:e(()=>[d(" Technology "+m(s.value),1)]),_:1}),l(o(v),null,{default:e(()=>[l(o(F),null,{default:e(()=>[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Svelte",name:"list-radio",value:"Svelte"},null,8,["modelValue"])]),_:1}),l(o(F),null,{default:e(()=>[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),label:"Vue JS",name:"list-radio",value:"Vue JS"},null,8,["modelValue"])]),_:1}),l(o(F),null,{default:e(()=>[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[2]||(a[2]=n=>s.value=n),label:"React",name:"list-radio",value:"React"},null,8,["modelValue"])]),_:1}),l(o(F),null,{default:e(()=>[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[3]||(a[3]=n=>s.value=n),label:"Angular",name:"list-radio",value:"Angular"},null,8,["modelValue"])]),_:1})]),_:1})]))}},S={class:"vp-raw"},I={class:"items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white"},P={class:"w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"},$={class:"w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"},U={class:"w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"},z={class:"w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"},J={__name:"FwbRadioExampleListHorizontal",setup(c){const s=i("svelte");return(E,a)=>(t(),u("div",S,[l(o(g),{class:"mb-2"},{default:e(()=>[d(" Technology "+m(s.value),1)]),_:1}),y("ul",I,[y("li",P,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Svelte",name:"radio-horizontal",value:"Svelte"},null,8,["modelValue"])]),y("li",$,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),label:"Vue JS",name:"radio-horizontal",value:"Vue JS"},null,8,["modelValue"])]),y("li",U,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[2]||(a[2]=n=>s.value=n),label:"React",name:"radio-horizontal",value:"React"},null,8,["modelValue"])]),y("li",z,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[3]||(a[3]=n=>s.value=n),label:"Angular",name:"radio-horizontal",value:"Angular"},null,8,["modelValue"])])])]))}},N=r('

Vue Toggle Radio - Flowbite ​

Get started with the radio component to let the user choose a single option from multiple options in the form of a circle based on multiple styles and colors ​

TIP

Original reference: https://flowbite.com/docs/forms/range/

Radio examples ​

',5),L=r(`
vue
<template>
+  <fwb-radio v-model="picked" name="radio" label="Radio 1" value="one" />
+  <fwb-radio v-model="picked" name="radio" label="Radio 2" value="two" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbRadio } from 'flowbite-vue'
+
+const picked = ref()
+</script>
<template>
+  <fwb-radio v-model="picked" name="radio" label="Radio 1" value="one" />
+  <fwb-radio v-model="picked" name="radio" label="Radio 2" value="two" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbRadio } from 'flowbite-vue'
+
+const picked = ref()
+</script>

Disabled Radio ​

`,2),G=r(`
vue
<template>
+  <fwb-radio
+    v-model="picked"
+    disabled
+    label="Disabled radio"
+    name="radio-disabled"
+    value="one"
+  />
+  <fwb-radio
+    v-model="picked"
+    disabled
+    label="Disabled checked"
+    name="radio-disabled"
+    value="two"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbRadio } from 'flowbite-vue'
+
+const picked = ref('two')
+</script>
<template>
+  <fwb-radio
+    v-model="picked"
+    disabled
+    label="Disabled radio"
+    name="radio-disabled"
+    value="one"
+  />
+  <fwb-radio
+    v-model="picked"
+    disabled
+    label="Disabled checked"
+    name="radio-disabled"
+    value="two"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbRadio } from 'flowbite-vue'
+
+const picked = ref('two')
+</script>

Radio list group ​

`,2),H=r(`
vue
<template>
+  <fwb-p class="mb-2">
+    Technology {{ picked }}
+  </fwb-p>
+
+  <fwb-list-group>
+    <fwb-list-group-item>
+      <fwb-radio
+        v-model="picked"
+        label="Svelte"
+        name="list-radio"
+        value="Svelte"
+      />
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <fwb-radio
+        v-model="picked"
+        label="Vue JS"
+        name="list-radio"
+        value="Vue JS"
+      />
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <fwb-radio
+        v-model="picked"
+        label="React"
+        name="list-radio"
+        value="React"
+      />
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <fwb-radio
+        v-model="picked"
+        label="Angular"
+        name="list-radio"
+        value="Angular"
+      />
+    </fwb-list-group-item>
+  </fwb-list-group>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbListGroup, FwbListGroupItem, FwbP, FwbRadio } from 'flowbite-vue'
+
+const picked = ref('Vue JS')
+</script>
<template>
+  <fwb-p class="mb-2">
+    Technology {{ picked }}
+  </fwb-p>
+
+  <fwb-list-group>
+    <fwb-list-group-item>
+      <fwb-radio
+        v-model="picked"
+        label="Svelte"
+        name="list-radio"
+        value="Svelte"
+      />
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <fwb-radio
+        v-model="picked"
+        label="Vue JS"
+        name="list-radio"
+        value="Vue JS"
+      />
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <fwb-radio
+        v-model="picked"
+        label="React"
+        name="list-radio"
+        value="React"
+      />
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <fwb-radio
+        v-model="picked"
+        label="Angular"
+        name="list-radio"
+        value="Angular"
+      />
+    </fwb-list-group-item>
+  </fwb-list-group>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbListGroup, FwbListGroupItem, FwbP, FwbRadio } from 'flowbite-vue'
+
+const picked = ref('Vue JS')
+</script>

Horizontal list group ​

`,2),O=r(`
vue
<template>
+  <fwb-p class="mb-2">
+    Technology {{ picked }}
+  </fwb-p>
+  <ul class="items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+      <fwb-radio
+        v-model="picked"
+        label="Svelte"
+        name="radio-horizontal"
+        value="Svelte"
+      />
+    </li>
+    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+      <fwb-radio
+        v-model="picked"
+        label="Vue JS"
+        name="radio-horizontal"
+        value="Vue JS"
+      />
+    </li>
+    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+      <fwb-radio
+        v-model="picked"
+        label="React"
+        name="radio-horizontal"
+        value="React"
+      />
+    </li>
+    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+      <fwb-radio
+        v-model="picked"
+        label="Angular"
+        name="radio-horizontal"
+        value="Angular"
+      />
+    </li>
+  </ul>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbP, FwbRadio } from 'flowbite-vue'
+
+const picked = ref('svelte')
+</script>
<template>
+  <fwb-p class="mb-2">
+    Technology {{ picked }}
+  </fwb-p>
+  <ul class="items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+      <fwb-radio
+        v-model="picked"
+        label="Svelte"
+        name="radio-horizontal"
+        value="Svelte"
+      />
+    </li>
+    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+      <fwb-radio
+        v-model="picked"
+        label="Vue JS"
+        name="radio-horizontal"
+        value="Vue JS"
+      />
+    </li>
+    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+      <fwb-radio
+        v-model="picked"
+        label="React"
+        name="radio-horizontal"
+        value="React"
+      />
+    </li>
+    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+      <fwb-radio
+        v-model="picked"
+        label="Angular"
+        name="radio-horizontal"
+        value="Angular"
+      />
+    </li>
+  </ul>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbP, FwbRadio } from 'flowbite-vue'
+
+const picked = ref('svelte')
+</script>

Inline Radio ​

`,2),j=r(`
vue
<template>
+  <div class="flex w-96">
+    <fwb-radio v-model="picked" label="Inline 1" value="first" />
+    <fwb-radio v-model="picked" label="Inline 2" value="second" />
+    <fwb-radio v-model="picked" label="Inline 3" value="third" />
+    <fwb-radio v-model="picked" label="Inline 4" value="fourth" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbRadio } from 'flowbite-vue'
+
+const picked = ref('first')
+</script>
<template>
+  <div class="flex w-96">
+    <fwb-radio v-model="picked" label="Inline 1" value="first" />
+    <fwb-radio v-model="picked" label="Inline 2" value="second" />
+    <fwb-radio v-model="picked" label="Inline 3" value="third" />
+    <fwb-radio v-model="picked" label="Inline 4" value="fourth" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbRadio } from 'flowbite-vue'
+
+const picked = ref('first')
+</script>
`,2),Q=r(`
vue
<template>
+  <fwb-radio v-model="picked" name="with-link" value="first">
+    I agree with the
+    <fwb-a class="ml-1" href="#">
+      terms and conditions
+    </fwb-a>.
+  </fwb-radio>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbA, FwbRadio } from 'flowbite-vue'
+
+const picked = ref()
+</script>
<template>
+  <fwb-radio v-model="picked" name="with-link" value="first">
+    I agree with the
+    <fwb-a class="ml-1" href="#">
+      terms and conditions
+    </fwb-a>.
+  </fwb-radio>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbA, FwbRadio } from 'flowbite-vue'
+
+const picked = ref()
+</script>

Bordered Radio ​

`,2),K=r(`
vue
<template>
+  <div class="grid grid-cols-2 gap-6">
+    <div class="flex items-center p-2 border border-gray-200 rounded dark:border-gray-700">
+      <fwb-radio v-model="picked" label="Radio 1" name="radio-bordered" value="one" />
+    </div>
+    <div class="flex items-center p-2 border border-gray-200 rounded dark:border-gray-700">
+      <fwb-radio v-model="picked" label="Radio 2" name="radio-bordered" value="two" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbRadio } from 'flowbite-vue'
+
+const picked = ref('one')
+</script>
<template>
+  <div class="grid grid-cols-2 gap-6">
+    <div class="flex items-center p-2 border border-gray-200 rounded dark:border-gray-700">
+      <fwb-radio v-model="picked" label="Radio 1" name="radio-bordered" value="one" />
+    </div>
+    <div class="flex items-center p-2 border border-gray-200 rounded dark:border-gray-700">
+      <fwb-radio v-model="picked" label="Radio 2" name="radio-bordered" value="two" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbRadio } from 'flowbite-vue'
+
+const picked = ref('one')
+</script>
`,1),os=JSON.parse('{"title":"Vue Toggle Radio - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/radio.md","filePath":"components/radio.md"}'),M={name:"components/radio.md"},ps=Object.assign(M,{setup(c){return(s,E)=>(t(),u("div",null,[N,l(C),L,l(k),G,l(T),H,l(J),O,l(V),j,l(R),Q,l(h),K]))}});export{os as __pageData,ps as default}; diff --git a/docs/.vitepress/dist/assets/components_radio.md.b618a9a7.lean.js b/docs/.vitepress/dist/assets/components_radio.md.b618a9a7.lean.js new file mode 100644 index 0000000..ce79294 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_radio.md.b618a9a7.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as p}from"./chunks/FwbRadio.vue_vue_type_script_setup_true_lang.a8d8cba7.js";import{h as i,o as t,c as u,H as l,l as o,k as y,b as q,w as e,a as d,t as m,Q as r}from"./chunks/framework.3f630664.js";import{_ as b}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";import{a as F,_ as v}from"./chunks/FwbListGroupItem.vue_vue_type_script_setup_true_lang.9898f565.js";import{_ as g}from"./chunks/FwbP.vue_vue_type_script_setup_true_lang.b05f1505.js";import"./chunks/simplifyTailwindClasses.275301d3.js";import"./chunks/useMergeClasses.5cec3a4e.js";const f={class:"vp-raw"},C={__name:"FwbRadioExample",setup(c){const s=i();return(E,a)=>(t(),u("div",f,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Radio 1",name:"radio",value:"one"},null,8,["modelValue"]),l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),label:"Radio 2",name:"radio",value:"two"},null,8,["modelValue"])]))}},B={class:"vp-raw grid grid-cols-2 gap-6"},_={class:"flex items-center p-2 border border-gray-200 rounded dark:border-gray-700"},w={class:"flex items-center p-2 border border-gray-200 rounded dark:border-gray-700"},h={__name:"FwbRadioExampleBordered",setup(c){const s=i("one");return(E,a)=>(t(),u("div",B,[y("div",_,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Radio 1",name:"radio-bordered",value:"one"},null,8,["modelValue"])]),y("div",w,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),label:"Radio 2",name:"radio-bordered",value:"two"},null,8,["modelValue"])])]))}},A={class:"vp-raw"},k={__name:"FwbRadioExampleDisabled",setup(c){const s=i("two");return(E,a)=>(t(),u("div",A,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),disabled:"",label:"Disabled radio",name:"radio-disabled",value:"one"},null,8,["modelValue"]),l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),disabled:"",label:"Disabled checked",name:"radio-disabled",value:"two"},null,8,["modelValue"])]))}},D={class:"vp-raw flex w-96"},V={__name:"FwbRadioExampleInline",setup(c){const s=i("first");return(E,a)=>(t(),u("div",D,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Inline 1",value:"first"},null,8,["modelValue"]),l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),label:"Inline 2",value:"second"},null,8,["modelValue"]),l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[2]||(a[2]=n=>s.value=n),label:"Inline 3",value:"third"},null,8,["modelValue"]),l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[3]||(a[3]=n=>s.value=n),label:"Inline 4",value:"fourth"},null,8,["modelValue"])]))}},R={__name:"FwbRadioExampleLink",setup(c){const s=i();return(E,a)=>(t(),q(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),name:"with-link",value:"first"},{default:e(()=>[d(" I agree with the "),l(o(b),{class:"ml-1",href:"#"},{default:e(()=>[d(" terms and conditions ")]),_:1}),d(". ")]),_:1},8,["modelValue"]))}},x={class:"vp-raw"},T={__name:"FwbRadioExampleList",setup(c){const s=i("Vue JS");return(E,a)=>(t(),u("div",x,[l(o(g),{class:"mb-2"},{default:e(()=>[d(" Technology "+m(s.value),1)]),_:1}),l(o(v),null,{default:e(()=>[l(o(F),null,{default:e(()=>[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Svelte",name:"list-radio",value:"Svelte"},null,8,["modelValue"])]),_:1}),l(o(F),null,{default:e(()=>[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),label:"Vue JS",name:"list-radio",value:"Vue JS"},null,8,["modelValue"])]),_:1}),l(o(F),null,{default:e(()=>[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[2]||(a[2]=n=>s.value=n),label:"React",name:"list-radio",value:"React"},null,8,["modelValue"])]),_:1}),l(o(F),null,{default:e(()=>[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[3]||(a[3]=n=>s.value=n),label:"Angular",name:"list-radio",value:"Angular"},null,8,["modelValue"])]),_:1})]),_:1})]))}},S={class:"vp-raw"},I={class:"items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white"},P={class:"w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"},$={class:"w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"},U={class:"w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"},z={class:"w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"},J={__name:"FwbRadioExampleListHorizontal",setup(c){const s=i("svelte");return(E,a)=>(t(),u("div",S,[l(o(g),{class:"mb-2"},{default:e(()=>[d(" Technology "+m(s.value),1)]),_:1}),y("ul",I,[y("li",P,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Svelte",name:"radio-horizontal",value:"Svelte"},null,8,["modelValue"])]),y("li",$,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),label:"Vue JS",name:"radio-horizontal",value:"Vue JS"},null,8,["modelValue"])]),y("li",U,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[2]||(a[2]=n=>s.value=n),label:"React",name:"radio-horizontal",value:"React"},null,8,["modelValue"])]),y("li",z,[l(o(p),{modelValue:s.value,"onUpdate:modelValue":a[3]||(a[3]=n=>s.value=n),label:"Angular",name:"radio-horizontal",value:"Angular"},null,8,["modelValue"])])])]))}},N=r("",5),L=r("",2),G=r("",2),H=r("",2),O=r("",2),j=r("",2),Q=r("",2),K=r("",1),os=JSON.parse('{"title":"Vue Toggle Radio - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/radio.md","filePath":"components/radio.md"}'),M={name:"components/radio.md"},ps=Object.assign(M,{setup(c){return(s,E)=>(t(),u("div",null,[N,l(C),L,l(k),G,l(T),H,l(J),O,l(V),j,l(R),Q,l(h),K]))}});export{os as __pageData,ps as default}; diff --git a/docs/.vitepress/dist/assets/components_range.md.9320c947.js b/docs/.vitepress/dist/assets/components_range.md.9320c947.js new file mode 100644 index 0000000..53974f6 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_range.md.9320c947.js @@ -0,0 +1,41 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as _,d as h,$ as f,o as i,c as u,k as m,t as g,n as v,l as p,a0 as q,a5 as C,_ as w,h as E,H as n,Q as d}from"./chunks/framework.3f630664.js";import{s as B}from"./chunks/simplifyTailwindClasses.275301d3.js";const A="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700",D="block mb-2 text-sm font-medium text-gray-900 dark:text-white",V={lg:"h-3 range-lg",md:"h-2 range-md",sm:"h-1 range-sm"};function T(o){const s=_(()=>B(A,V[o.size.value])),l=_(()=>D);return{rangeClasses:s,labelClasses:l}}const x={class:"flex flex-col"},S=["step","min","max","disabled"],k=h({__name:"FwbRange",props:{disabled:{type:Boolean,default:!1},label:{default:"Range slider"},max:{default:100},min:{default:0},modelValue:{default:50},size:{default:"md"},steps:{default:1}},emits:["update:modelValue"],setup(o,{emit:s}){const l=o,a=s,e=_({get(){return l.modelValue},set(c){a("update:modelValue",c)}}),{rangeClasses:t,labelClasses:r}=T(f(l));return(c,b)=>(i(),u("label",x,[m("span",{class:v(p(r))},g(c.label),3),q(m("input",{"onUpdate:modelValue":b[0]||(b[0]=F=>e.value=F),step:c.steps,min:c.min,max:c.max,disabled:c.disabled,type:"range",class:v(p(t))},null,10,S),[[C,e.value]])]))}}),y=w(k,[["__scopeId","data-v-fadec9c5"]]),z={class:"vp-raw"},P={__name:"FwbRangeExample",setup(o){const s=E(10);return(l,a)=>(i(),u("div",z,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=e=>s.value=e),modelModifiers:{number:!0}},null,8,["modelValue"]),m("pre",null,"Selected value: "+g(s.value),1)]))}},R={class:"vp-raw"},M={__name:"FwbRangeExampleDisabled",setup(o){const s=E(10);return(l,a)=>(i(),u("div",R,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=e=>s.value=e),modelModifiers:{number:!0},disabled:"",label:"Disabled range"},null,8,["modelValue"])]))}},I={class:"vp-raw"},$={__name:"FwbRangeExampleMinMax",setup(o){const s=E(10);return(l,a)=>(i(),u("div",I,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=e=>s.value=e),modelModifiers:{number:!0},max:15,min:5,label:"Min-max range"},null,8,["modelValue"]),m("pre",null,"Selected value: "+g(s.value),1)]))}},N={class:"vp-raw grid gap-3"},U={__name:"FwbRangeExampleSize",setup(o){const s=E(10),l=E(10),a=E(10);return(e,t)=>(i(),u("div",N,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":t[0]||(t[0]=r=>s.value=r),modelModifiers:{number:!0},label:"Small range",size:"sm"},null,8,["modelValue"]),n(p(y),{modelValue:l.value,"onUpdate:modelValue":t[1]||(t[1]=r=>l.value=r),modelModifiers:{number:!0},label:"Medium range",size:"md"},null,8,["modelValue"]),n(p(y),{modelValue:a.value,"onUpdate:modelValue":t[2]||(t[2]=r=>a.value=r),modelModifiers:{number:!0},label:"Large range",size:"lg"},null,8,["modelValue"])]))}},L={class:"vp-raw"},O={__name:"FwbRangeExampleSteps",setup(o){const s=E(10);return(l,a)=>(i(),u("div",L,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=e=>s.value=e),modelModifiers:{number:!0},steps:5,label:"Steps range"},null,8,["modelValue"]),m("pre",null,"Selected value: "+g(s.value),1)]))}},G=d('

Vue Toggle Range - Flowbite ​

Get started with the range component to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options ​

TIP

Original reference: https://flowbite.com/docs/forms/range/

Default ​

',5),j=d(`
vue
<template>
+  <fwb-range v-model="value" />
+  <pre>Current value: {{ value }}</pre>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbRange } from 'flowbite-vue'
+
+const value = ref(10)
+</script>
<template>
+  <fwb-range v-model="value" />
+  <pre>Current value: {{ value }}</pre>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbRange } from 'flowbite-vue'
+
+const value = ref(10)
+</script>

Disabled state ​

`,2),H=d(`
vue
<template>
+  <fwb-range v-model="value" disabled label="Disabled range" />
+</template>
<template>
+  <fwb-range v-model="value" disabled label="Disabled range" />
+</template>

Min and Max ​

`,2),J=d(`
vue
<template>
+  <fwb-range v-model="value" :max="15" :min="5" label="Min-max range" />
+</template>
<template>
+  <fwb-range v-model="value" :max="15" :min="5" label="Min-max range" />
+</template>

Steps ​

`,2),Q=d(`
vue
<template>
+  <fwb-range v-model="value" :steps="5" label="Steps range" />
+</template>
<template>
+  <fwb-range v-model="value" :steps="5" label="Steps range" />
+</template>

Sizes ​

`,2),K=d(`
vue
<template>
+  <fwb-range v-model="value1" label="Small range" size="sm" />
+  <fwb-range v-model="value2" label="Medium range" size="md" />
+  <fwb-range v-model="value3" label="Large range" size="lg" />
+</template>
<template>
+  <fwb-range v-model="value1" label="Small range" size="sm" />
+  <fwb-range v-model="value2" label="Medium range" size="md" />
+  <fwb-range v-model="value3" label="Large range" size="lg" />
+</template>
`,1),ss=JSON.parse('{"title":"Vue Toggle Range - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/range.md","filePath":"components/range.md"}'),W={name:"components/range.md"},as=Object.assign(W,{setup(o){return(s,l)=>(i(),u("div",null,[G,n(P),j,n(M),H,n($),J,n(O),Q,n(U),K]))}});export{ss as __pageData,as as default}; diff --git a/docs/.vitepress/dist/assets/components_range.md.9320c947.lean.js b/docs/.vitepress/dist/assets/components_range.md.9320c947.lean.js new file mode 100644 index 0000000..a76ce0e --- /dev/null +++ b/docs/.vitepress/dist/assets/components_range.md.9320c947.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as _,d as h,$ as f,o as i,c as u,k as m,t as g,n as v,l as p,a0 as q,a5 as C,_ as w,h as E,H as n,Q as d}from"./chunks/framework.3f630664.js";import{s as B}from"./chunks/simplifyTailwindClasses.275301d3.js";const A="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700",D="block mb-2 text-sm font-medium text-gray-900 dark:text-white",V={lg:"h-3 range-lg",md:"h-2 range-md",sm:"h-1 range-sm"};function T(o){const s=_(()=>B(A,V[o.size.value])),l=_(()=>D);return{rangeClasses:s,labelClasses:l}}const x={class:"flex flex-col"},S=["step","min","max","disabled"],k=h({__name:"FwbRange",props:{disabled:{type:Boolean,default:!1},label:{default:"Range slider"},max:{default:100},min:{default:0},modelValue:{default:50},size:{default:"md"},steps:{default:1}},emits:["update:modelValue"],setup(o,{emit:s}){const l=o,a=s,e=_({get(){return l.modelValue},set(c){a("update:modelValue",c)}}),{rangeClasses:t,labelClasses:r}=T(f(l));return(c,b)=>(i(),u("label",x,[m("span",{class:v(p(r))},g(c.label),3),q(m("input",{"onUpdate:modelValue":b[0]||(b[0]=F=>e.value=F),step:c.steps,min:c.min,max:c.max,disabled:c.disabled,type:"range",class:v(p(t))},null,10,S),[[C,e.value]])]))}}),y=w(k,[["__scopeId","data-v-fadec9c5"]]),z={class:"vp-raw"},P={__name:"FwbRangeExample",setup(o){const s=E(10);return(l,a)=>(i(),u("div",z,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=e=>s.value=e),modelModifiers:{number:!0}},null,8,["modelValue"]),m("pre",null,"Selected value: "+g(s.value),1)]))}},R={class:"vp-raw"},M={__name:"FwbRangeExampleDisabled",setup(o){const s=E(10);return(l,a)=>(i(),u("div",R,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=e=>s.value=e),modelModifiers:{number:!0},disabled:"",label:"Disabled range"},null,8,["modelValue"])]))}},I={class:"vp-raw"},$={__name:"FwbRangeExampleMinMax",setup(o){const s=E(10);return(l,a)=>(i(),u("div",I,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=e=>s.value=e),modelModifiers:{number:!0},max:15,min:5,label:"Min-max range"},null,8,["modelValue"]),m("pre",null,"Selected value: "+g(s.value),1)]))}},N={class:"vp-raw grid gap-3"},U={__name:"FwbRangeExampleSize",setup(o){const s=E(10),l=E(10),a=E(10);return(e,t)=>(i(),u("div",N,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":t[0]||(t[0]=r=>s.value=r),modelModifiers:{number:!0},label:"Small range",size:"sm"},null,8,["modelValue"]),n(p(y),{modelValue:l.value,"onUpdate:modelValue":t[1]||(t[1]=r=>l.value=r),modelModifiers:{number:!0},label:"Medium range",size:"md"},null,8,["modelValue"]),n(p(y),{modelValue:a.value,"onUpdate:modelValue":t[2]||(t[2]=r=>a.value=r),modelModifiers:{number:!0},label:"Large range",size:"lg"},null,8,["modelValue"])]))}},L={class:"vp-raw"},O={__name:"FwbRangeExampleSteps",setup(o){const s=E(10);return(l,a)=>(i(),u("div",L,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=e=>s.value=e),modelModifiers:{number:!0},steps:5,label:"Steps range"},null,8,["modelValue"]),m("pre",null,"Selected value: "+g(s.value),1)]))}},G=d("",5),j=d("",2),H=d("",2),J=d("",2),Q=d("",2),K=d("",1),ss=JSON.parse('{"title":"Vue Toggle Range - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/range.md","filePath":"components/range.md"}'),W={name:"components/range.md"},as=Object.assign(W,{setup(o){return(s,l)=>(i(),u("div",null,[G,n(P),j,n(M),H,n($),J,n(O),Q,n(U),K]))}});export{ss as __pageData,as as default}; diff --git a/docs/.vitepress/dist/assets/components_rating.md.1bf1f257.js b/docs/.vitepress/dist/assets/components_rating.md.1bf1f257.js new file mode 100644 index 0000000..585c7d9 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_rating.md.1bf1f257.js @@ -0,0 +1,87 @@ +import{c as w}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g,d as f,$ as v,o as s,c as a,F as y,D as d,n as _,l as o,r as b,k as n,t as C,e as x,H as l,w as m,a as F,Q as E}from"./chunks/framework.3f630664.js";const q={sm:"w-5 h-5",md:"w-7 h-7",lg:"w-10 h-10"};function A(t){return{sizeClasses:g(()=>w(q[t.size.value]??""))}}const D={class:"flex items-center"},k=n("path",{d:"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"},null,-1),B=[k],T=n("path",{d:"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"},null,-1),R=[T],z=n("span",{class:"w-1 h-1 mx-1.5 bg-gray-500 rounded-full dark:bg-gray-400"},null,-1),S=["href"],r=f({__name:"FwbRating",props:{rating:{default:3},reviewLink:{default:""},reviewText:{default:""},scale:{default:5},size:{default:"md"}},setup(t){const p=t,e=g(()=>Math.floor(p.rating)),h=g(()=>p.scale-e.value),{sizeClasses:u}=A(v(p));return(c,Z)=>(s(),a("div",D,[(s(!0),a(y,null,d(e.value,i=>(s(),a("svg",{key:i,class:_([o(u),"text-yellow-400"]),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},B,2))),128)),(s(!0),a(y,null,d(h.value,i=>(s(),a("svg",{key:i,class:_([o(u),"text-gray-300 dark:text-gray-500"]),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},R,2))),128)),b(c.$slots,"besideText"),c.reviewText&&c.reviewLink?(s(),a(y,{key:0},[z,n("a",{href:c.reviewLink,class:"text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white"},C(c.reviewText),9,S)],64)):x("",!0)]))}}),$={class:"vp-raw"},V={__name:"FwbRatingExample",setup(t){return(p,e)=>(s(),a("div",$,[l(o(r),{rating:4})]))}},P={class:"vp-raw"},N=n("p",{class:"ml-2 text-sm font-medium text-gray-500 dark:text-gray-400"}," 4.75 out of 5 ",-1),I={__name:"FwbRatingExampleWithText",setup(t){return(p,e)=>(s(),a("div",P,[l(o(r),{rating:4.75},{besideText:m(()=>[N]),_:1})]))}},L={class:"vp-raw"},M=n("p",{class:"ml-2 text-sm font-bold text-gray-900 dark:text-white"}," 4.95 ",-1),O={__name:"FwbRatingExampleCount",setup(t){return(p,e)=>(s(),a("div",L,[l(o(r),{rating:1,scale:1,"review-link":"#","review-text":"73 reviews"},{besideText:m(()=>[M]),_:1})]))}},j={class:"vp-raw grid gap-2"},H={__name:"FwbRatingExampleStarSizes",setup(t){return(p,e)=>(s(),a("div",j,[l(o(r),{rating:4,size:"sm"}),l(o(r),{rating:4,size:"md"}),l(o(r),{rating:4,size:"lg"})]))}},J=n("h1",{id:"vue-rating-flowbite",tabindex:"-1"},[F("Vue Rating - Flowbite "),n("a",{class:"header-anchor",href:"#vue-rating-flowbite","aria-label":'Permalink to "Vue Rating - Flowbite"'},"​")],-1),Q=n("h2",{id:"default-rating",tabindex:"-1"},[F("Default rating "),n("a",{class:"header-anchor",href:"#default-rating","aria-label":'Permalink to "Default rating"'},"​")],-1),U=n("p",null,"Use this simple example of a star rating component for showing review results.",-1),W=E(`
vue
<template>
+  <fwb-rating :rating="4" />
+</template>
+
+<script setup>
+import { FwbRating } from 'flowbite-vue'
+</script>
<template>
+  <fwb-rating :rating="4" />
+</template>
+
+<script setup>
+import { FwbRating } from 'flowbite-vue'
+</script>

Rating with text ​

If you also want to show a text near the stars you can use this example as a reference.

`,3),G=E(`
vue
<template>
+  <fwb-rating :rating="4.75">
+    <template #besideText>
+      <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+        4.75 out of 5
+      </p>
+    </template>
+  </fwb-rating>
+</template>
+
+<script setup>
+import { FwbRating } from 'flowbite-vue'
+</script>
<template>
+  <fwb-rating :rating="4.75">
+    <template #besideText>
+      <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+        4.75 out of 5
+      </p>
+    </template>
+  </fwb-rating>
+</template>
+
+<script setup>
+import { FwbRating } from 'flowbite-vue'
+</script>

Rating count ​

Aggregate more results by using this example to show the amount of reviews and the average score.

`,3),K=E(`
vue
<template>
+  <fwb-rating
+    :rating="1"
+    :scale="1"
+    review-link="#"
+    review-text="73 reviews"
+  >
+    <template #besideText>
+      <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">
+        4.95
+      </p>
+    </template>
+  </fwb-rating>
+</template>
+
+<script setup>
+import { FwbRating } from 'flowbite-vue'
+</script>
<template>
+  <fwb-rating
+    :rating="1"
+    :scale="1"
+    review-link="#"
+    review-text="73 reviews"
+  >
+    <template #besideText>
+      <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">
+        4.95
+      </p>
+    </template>
+  </fwb-rating>
+</template>
+
+<script setup>
+import { FwbRating } from 'flowbite-vue'
+</script>

Star sizes ​

Check out the different sizing options for the star review component from small, medium, and large.

`,3),X=E(`
vue
<template>
+    <fwb-rating size="sm" :rating="4" />
+    <fwb-rating size="md" :rating="4" />
+    <fwb-rating size="lg" :rating="4" />
+</template>
+
+<script setup>
+import { FwbRating } from 'flowbite-vue'
+</script>
<template>
+    <fwb-rating size="sm" :rating="4" />
+    <fwb-rating size="md" :rating="4" />
+    <fwb-rating size="lg" :rating="4" />
+</template>
+
+<script setup>
+import { FwbRating } from 'flowbite-vue'
+</script>
`,1),ns=JSON.parse('{"title":"Vue Rating - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/rating.md","filePath":"components/rating.md"}'),Y={name:"components/rating.md"},ls=Object.assign(Y,{setup(t){return(p,e)=>(s(),a("div",null,[J,Q,U,l(V),W,l(I),G,l(O),K,l(H),X]))}});export{ns as __pageData,ls as default}; diff --git a/docs/.vitepress/dist/assets/components_rating.md.1bf1f257.lean.js b/docs/.vitepress/dist/assets/components_rating.md.1bf1f257.lean.js new file mode 100644 index 0000000..3441677 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_rating.md.1bf1f257.lean.js @@ -0,0 +1 @@ +import{c as w}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g,d as f,$ as v,o as s,c as a,F as y,D as d,n as _,l as o,r as b,k as n,t as C,e as x,H as l,w as m,a as F,Q as E}from"./chunks/framework.3f630664.js";const q={sm:"w-5 h-5",md:"w-7 h-7",lg:"w-10 h-10"};function A(t){return{sizeClasses:g(()=>w(q[t.size.value]??""))}}const D={class:"flex items-center"},k=n("path",{d:"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"},null,-1),B=[k],T=n("path",{d:"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"},null,-1),R=[T],z=n("span",{class:"w-1 h-1 mx-1.5 bg-gray-500 rounded-full dark:bg-gray-400"},null,-1),S=["href"],r=f({__name:"FwbRating",props:{rating:{default:3},reviewLink:{default:""},reviewText:{default:""},scale:{default:5},size:{default:"md"}},setup(t){const p=t,e=g(()=>Math.floor(p.rating)),h=g(()=>p.scale-e.value),{sizeClasses:u}=A(v(p));return(c,Z)=>(s(),a("div",D,[(s(!0),a(y,null,d(e.value,i=>(s(),a("svg",{key:i,class:_([o(u),"text-yellow-400"]),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},B,2))),128)),(s(!0),a(y,null,d(h.value,i=>(s(),a("svg",{key:i,class:_([o(u),"text-gray-300 dark:text-gray-500"]),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},R,2))),128)),b(c.$slots,"besideText"),c.reviewText&&c.reviewLink?(s(),a(y,{key:0},[z,n("a",{href:c.reviewLink,class:"text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white"},C(c.reviewText),9,S)],64)):x("",!0)]))}}),$={class:"vp-raw"},V={__name:"FwbRatingExample",setup(t){return(p,e)=>(s(),a("div",$,[l(o(r),{rating:4})]))}},P={class:"vp-raw"},N=n("p",{class:"ml-2 text-sm font-medium text-gray-500 dark:text-gray-400"}," 4.75 out of 5 ",-1),I={__name:"FwbRatingExampleWithText",setup(t){return(p,e)=>(s(),a("div",P,[l(o(r),{rating:4.75},{besideText:m(()=>[N]),_:1})]))}},L={class:"vp-raw"},M=n("p",{class:"ml-2 text-sm font-bold text-gray-900 dark:text-white"}," 4.95 ",-1),O={__name:"FwbRatingExampleCount",setup(t){return(p,e)=>(s(),a("div",L,[l(o(r),{rating:1,scale:1,"review-link":"#","review-text":"73 reviews"},{besideText:m(()=>[M]),_:1})]))}},j={class:"vp-raw grid gap-2"},H={__name:"FwbRatingExampleStarSizes",setup(t){return(p,e)=>(s(),a("div",j,[l(o(r),{rating:4,size:"sm"}),l(o(r),{rating:4,size:"md"}),l(o(r),{rating:4,size:"lg"})]))}},J=n("h1",{id:"vue-rating-flowbite",tabindex:"-1"},[F("Vue Rating - Flowbite "),n("a",{class:"header-anchor",href:"#vue-rating-flowbite","aria-label":'Permalink to "Vue Rating - Flowbite"'},"​")],-1),Q=n("h2",{id:"default-rating",tabindex:"-1"},[F("Default rating "),n("a",{class:"header-anchor",href:"#default-rating","aria-label":'Permalink to "Default rating"'},"​")],-1),U=n("p",null,"Use this simple example of a star rating component for showing review results.",-1),W=E("",3),G=E("",3),K=E("",3),X=E("",1),ns=JSON.parse('{"title":"Vue Rating - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/rating.md","filePath":"components/rating.md"}'),Y={name:"components/rating.md"},ls=Object.assign(Y,{setup(t){return(p,e)=>(s(),a("div",null,[J,Q,U,l(V),W,l(I),G,l(O),K,l(H),X]))}});export{ns as __pageData,ls as default}; diff --git a/docs/.vitepress/dist/assets/components_select.md.654d7864.js b/docs/.vitepress/dist/assets/components_select.md.654d7864.js new file mode 100644 index 0000000..c71533f --- /dev/null +++ b/docs/.vitepress/dist/assets/components_select.md.654d7864.js @@ -0,0 +1,287 @@ +import{t as f}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as q,d as _,$ as k,o as t,c,k as m,n as C,l as r,t as b,e as g,a0 as V,a6 as T,a7 as x,F as P,D as U,r as S,h as F,H as p,w as B,a as v,Q as u}from"./chunks/framework.3f630664.js";import{a as z}from"./chunks/index.b15c605d.js";import{_ as $}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";import"./chunks/index.6b4d4439.js";const i={Success:"success",Error:"error"},I="block mb-2 text-sm font-medium",N="w-full text-gray-900 bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",R="cursor-not-allowed bg-gray-100",M="bg-transparent dark:bg-transparent border-b-2 border-gray-200 appearance-none dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer",H={lg:"p-4",md:"p-2.5 text-sm",sm:"p-2 text-sm"},W="bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 focus:ring-green-500 focus:border-green-500",O="bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500";function Y(o){const a=q(()=>{const e=o.validationStatus.value,s=e===i.Success?W:e===i.Error?O:"",l=e===i.Success?"focus:border-green-500":e===i.Error?"focus:border-red-500":"";return f(N,s,H[o.size.value],o.disabled.value&&R,o.underline.value?M:"border border-gray-300 rounded-lg",o.underline.value&&l)}),n=q(()=>{const e=o.validationStatus.value,s=e===i.Success?"text-green-700 dark:text-green-500":e===i.Error?"text-red-700 dark:text-red-500":"text-gray-900 dark:text-white";return f(I,s)});return{selectClasses:a,labelClasses:n}}const G=["disabled"],L={disabled:"",selected:"",value:""},j=["value"],J={key:1,class:"mt-2 text-sm text-gray-500 dark:text-gray-400"},y=_({__name:"FwbSelect",props:{modelValue:{default:""},label:{default:""},options:{default:()=>[]},placeholder:{default:"Please select one"},disabled:{type:Boolean,default:!1},underline:{type:Boolean,default:!1},size:{default:"md"},validationStatus:{default:void 0}},emits:["update:modelValue"],setup(o,{emit:a}){const n=o,s=z(n,"modelValue",a),{selectClasses:l,labelClasses:A}=Y(k(n)),D=q(()=>f("mt-2 text-sm",n.validationStatus===i.Success?"text-green-600 dark:text-green-500":"",n.validationStatus===i.Error?"text-red-600 dark:text-red-500":""));return(E,h)=>(t(),c("div",null,[m("label",null,[E.label?(t(),c("span",{key:0,class:C(r(A))},b(E.label),3)):g("",!0),V(m("select",{"onUpdate:modelValue":h[0]||(h[0]=d=>x(s)?s.value=d:null),disabled:E.disabled,class:C(r(l))},[m("option",L,b(E.placeholder),1),(t(!0),c(P,null,U(E.options,(d,w)=>(t(),c("option",{key:w,value:d.value},b(d.name),9,j))),128))],10,G),[[T,r(s)]])]),E.$slots.validationMessage?(t(),c("p",{key:0,class:C(D.value)},[S(E.$slots,"validationMessage")],2)):g("",!0),E.$slots.helper?(t(),c("p",J,[S(E.$slots,"helper")])):g("",!0)]))}}),Q={class:"vp-raw"},K={__name:"FwbSelectExample",setup(o){const a=F(""),n=[{value:"us",name:"United States"},{value:"ca",name:"Canada"},{value:"fr",name:"France"}];return(e,s)=>(t(),c("div",Q,[p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=l=>a.value=l),options:n,label:"Select a country"},null,8,["modelValue"])]))}},X={__name:"FwbSelectExampleDisabled",setup(o){const a=F(""),n=[{value:"us",name:"United States"},{value:"ca",name:"Canada"},{value:"fr",name:"France"}];return(e,s)=>(t(),c("div",null,[p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=l=>a.value=l),options:n,disabled:"",label:"Select a country",placeholder:"You can't select"},null,8,["modelValue"])]))}},Z={class:"vp-raw"},ss=_({__name:"FwbSelectExampleHelper",setup(o){const a=F(""),n=[{value:"us",name:"United States"},{value:"ca",name:"Canada"},{value:"fr",name:"France"}];return(e,s)=>(t(),c("div",Z,[p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=l=>a.value=l),options:n,label:"Select a country"},{helper:B(()=>[v(" We'll never share your details. Read our "),p(r($),{href:"#",color:"text-blue-600 dark:text-blue-500"},{default:B(()=>[v(" Privacy Policy ")]),_:1}),v(". ")]),_:1},8,["modelValue"])]))}}),as={class:"vp-raw grid gap-2"},ns={__name:"FwbSelectExampleSize",setup(o){const a=F(""),n=[{value:"us",name:"United States"},{value:"ca",name:"Canada"},{value:"fr",name:"France"}];return(e,s)=>(t(),c("div",as,[p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=l=>a.value=l),options:n,label:"Select a country",size:"sm"},null,8,["modelValue"]),p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[1]||(s[1]=l=>a.value=l),options:n,label:"Select a country",size:"md"},null,8,["modelValue"]),p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[2]||(s[2]=l=>a.value=l),options:n,label:"Select a country",size:"lg"},null,8,["modelValue"])]))}},ls={class:"vp-raw"},ps={__name:"FwbSelectExampleUnderlined",setup(o){const a=F(""),n=[{value:"us",name:"United States"},{value:"ca",name:"Canada"},{value:"fr",name:"France"}];return(e,s)=>(t(),c("div",ls,[p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=l=>a.value=l),options:n,label:"Select a country",underline:""},null,8,["modelValue"])]))}},os={class:"vp-raw"},es=m("hr",{class:"mt-4 border-0"},null,-1),ts=_({__name:"FwbSelectExampleValidation",setup(o){const a=F(""),n=[{value:"us",name:"United States"},{value:"ca",name:"Canada"},{value:"fr",name:"France"}];return(e,s)=>(t(),c("div",os,[p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=l=>a.value=l),options:n,label:"Select a country","validation-status":"success"},null,8,["modelValue"]),es,p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[1]||(s[1]=l=>a.value=l),options:n,label:"Select a country","validation-status":"error"},{validationMessage:B(()=>[v(" Please select a country ")]),_:1},8,["modelValue"])]))}}),cs=u('

Vue Select - Flowbite ​

Get started with the select component to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variants ​

TIP

Original reference: https://flowbite.com/docs/forms/select/

The select input component can be used to gather information from users based on multiple options in the form of a dropdown list and by browsing this page you will find multiple options, styles, sizes, and variants built with the utility classes from Tailwind CSS also available in dark mode.

Default ​

',6),rs=u(`
vue
<template>
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbSelect } from 'flowbite-vue'
+
+const selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>
<template>
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbSelect } from 'flowbite-vue'
+
+const selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>

Disabled ​

`,2),Es=u(`
vue
<template>
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    disabled
+    label="Select a country"
+    placeholder="You can't select"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbSelect } from 'flowbite-vue'
+
+const selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>
<template>
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    disabled
+    label="Select a country"
+    placeholder="You can't select"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbSelect } from 'flowbite-vue'
+
+const selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>

Underlined ​

`,2),ys=u(`
vue
<template>
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+    underline
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbSelect } from 'flowbite-vue'
+
+const selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>
<template>
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+    underline
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbSelect } from 'flowbite-vue'
+
+const selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>

Size ​

`,2),is=u(`
vue
<template>
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+    size="sm"
+  />
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+    size="md"
+  />
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+    size="lg"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbSelect } from 'flowbite-vue'
+
+const selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>
<template>
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+    size="sm"
+  />
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+    size="md"
+  />
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+    size="lg"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbSelect } from 'flowbite-vue'
+
+const selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>

Slot - Helper ​

`,2),us=u(`
vue
<template>
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+  >
+    <template #helper>
+      We'll never share your details. Read our
+      <fwb-a href="#" color="text-blue-600 dark:text-blue-500">
+        Privacy Policy
+      </fwb-a>.
+    </template>
+  </fwb-input>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbA, FwbSelect } from 'flowbite-vue'
+
+const selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>
<template>
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+  >
+    <template #helper>
+      We'll never share your details. Read our
+      <fwb-a href="#" color="text-blue-600 dark:text-blue-500">
+        Privacy Policy
+      </fwb-a>.
+    </template>
+  </fwb-input>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbA, FwbSelect } from 'flowbite-vue'
+
+const selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>

Slot - Validation ​

  • Set validation status via validationStatus prop, which accepts 'success' or 'error'.
  • Add validation message via validationMessage slot.
`,3),Fs=u(`
vue
<template>
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+    validation-status="success"
+  />
+  <hr class="mt-4 border-0">
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+    validation-status="error"
+  >
+    <template #validationMessage>
+      Please select a country
+    </template>
+  </fwb-select>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbSelect } from 'flowbite-vue'
+
+const selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>
<template>
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+    validation-status="success"
+  />
+  <hr class="mt-4 border-0">
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+    validation-status="error"
+  >
+    <template #validationMessage>
+      Please select a country
+    </template>
+  </fwb-select>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbSelect } from 'flowbite-vue'
+
+const selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>
`,1),fs=JSON.parse('{"title":"Vue Select - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/select.md","filePath":"components/select.md"}'),ds={name:"components/select.md"},qs=Object.assign(ds,{setup(o){return(a,n)=>(t(),c("div",null,[cs,p(K),rs,p(X),Es,p(ps),ys,p(ns),is,p(ss),us,p(ts),Fs]))}});export{fs as __pageData,qs as default}; diff --git a/docs/.vitepress/dist/assets/components_select.md.654d7864.lean.js b/docs/.vitepress/dist/assets/components_select.md.654d7864.lean.js new file mode 100644 index 0000000..cbc8547 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_select.md.654d7864.lean.js @@ -0,0 +1 @@ +import{t as f}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as q,d as _,$ as k,o as t,c,k as m,n as C,l as r,t as b,e as g,a0 as V,a6 as T,a7 as x,F as P,D as U,r as S,h as F,H as p,w as B,a as v,Q as u}from"./chunks/framework.3f630664.js";import{a as z}from"./chunks/index.b15c605d.js";import{_ as $}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";import"./chunks/index.6b4d4439.js";const i={Success:"success",Error:"error"},I="block mb-2 text-sm font-medium",N="w-full text-gray-900 bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",R="cursor-not-allowed bg-gray-100",M="bg-transparent dark:bg-transparent border-b-2 border-gray-200 appearance-none dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer",H={lg:"p-4",md:"p-2.5 text-sm",sm:"p-2 text-sm"},W="bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 focus:ring-green-500 focus:border-green-500",O="bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500";function Y(o){const a=q(()=>{const e=o.validationStatus.value,s=e===i.Success?W:e===i.Error?O:"",l=e===i.Success?"focus:border-green-500":e===i.Error?"focus:border-red-500":"";return f(N,s,H[o.size.value],o.disabled.value&&R,o.underline.value?M:"border border-gray-300 rounded-lg",o.underline.value&&l)}),n=q(()=>{const e=o.validationStatus.value,s=e===i.Success?"text-green-700 dark:text-green-500":e===i.Error?"text-red-700 dark:text-red-500":"text-gray-900 dark:text-white";return f(I,s)});return{selectClasses:a,labelClasses:n}}const G=["disabled"],L={disabled:"",selected:"",value:""},j=["value"],J={key:1,class:"mt-2 text-sm text-gray-500 dark:text-gray-400"},y=_({__name:"FwbSelect",props:{modelValue:{default:""},label:{default:""},options:{default:()=>[]},placeholder:{default:"Please select one"},disabled:{type:Boolean,default:!1},underline:{type:Boolean,default:!1},size:{default:"md"},validationStatus:{default:void 0}},emits:["update:modelValue"],setup(o,{emit:a}){const n=o,s=z(n,"modelValue",a),{selectClasses:l,labelClasses:A}=Y(k(n)),D=q(()=>f("mt-2 text-sm",n.validationStatus===i.Success?"text-green-600 dark:text-green-500":"",n.validationStatus===i.Error?"text-red-600 dark:text-red-500":""));return(E,h)=>(t(),c("div",null,[m("label",null,[E.label?(t(),c("span",{key:0,class:C(r(A))},b(E.label),3)):g("",!0),V(m("select",{"onUpdate:modelValue":h[0]||(h[0]=d=>x(s)?s.value=d:null),disabled:E.disabled,class:C(r(l))},[m("option",L,b(E.placeholder),1),(t(!0),c(P,null,U(E.options,(d,w)=>(t(),c("option",{key:w,value:d.value},b(d.name),9,j))),128))],10,G),[[T,r(s)]])]),E.$slots.validationMessage?(t(),c("p",{key:0,class:C(D.value)},[S(E.$slots,"validationMessage")],2)):g("",!0),E.$slots.helper?(t(),c("p",J,[S(E.$slots,"helper")])):g("",!0)]))}}),Q={class:"vp-raw"},K={__name:"FwbSelectExample",setup(o){const a=F(""),n=[{value:"us",name:"United States"},{value:"ca",name:"Canada"},{value:"fr",name:"France"}];return(e,s)=>(t(),c("div",Q,[p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=l=>a.value=l),options:n,label:"Select a country"},null,8,["modelValue"])]))}},X={__name:"FwbSelectExampleDisabled",setup(o){const a=F(""),n=[{value:"us",name:"United States"},{value:"ca",name:"Canada"},{value:"fr",name:"France"}];return(e,s)=>(t(),c("div",null,[p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=l=>a.value=l),options:n,disabled:"",label:"Select a country",placeholder:"You can't select"},null,8,["modelValue"])]))}},Z={class:"vp-raw"},ss=_({__name:"FwbSelectExampleHelper",setup(o){const a=F(""),n=[{value:"us",name:"United States"},{value:"ca",name:"Canada"},{value:"fr",name:"France"}];return(e,s)=>(t(),c("div",Z,[p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=l=>a.value=l),options:n,label:"Select a country"},{helper:B(()=>[v(" We'll never share your details. Read our "),p(r($),{href:"#",color:"text-blue-600 dark:text-blue-500"},{default:B(()=>[v(" Privacy Policy ")]),_:1}),v(". ")]),_:1},8,["modelValue"])]))}}),as={class:"vp-raw grid gap-2"},ns={__name:"FwbSelectExampleSize",setup(o){const a=F(""),n=[{value:"us",name:"United States"},{value:"ca",name:"Canada"},{value:"fr",name:"France"}];return(e,s)=>(t(),c("div",as,[p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=l=>a.value=l),options:n,label:"Select a country",size:"sm"},null,8,["modelValue"]),p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[1]||(s[1]=l=>a.value=l),options:n,label:"Select a country",size:"md"},null,8,["modelValue"]),p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[2]||(s[2]=l=>a.value=l),options:n,label:"Select a country",size:"lg"},null,8,["modelValue"])]))}},ls={class:"vp-raw"},ps={__name:"FwbSelectExampleUnderlined",setup(o){const a=F(""),n=[{value:"us",name:"United States"},{value:"ca",name:"Canada"},{value:"fr",name:"France"}];return(e,s)=>(t(),c("div",ls,[p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=l=>a.value=l),options:n,label:"Select a country",underline:""},null,8,["modelValue"])]))}},os={class:"vp-raw"},es=m("hr",{class:"mt-4 border-0"},null,-1),ts=_({__name:"FwbSelectExampleValidation",setup(o){const a=F(""),n=[{value:"us",name:"United States"},{value:"ca",name:"Canada"},{value:"fr",name:"France"}];return(e,s)=>(t(),c("div",os,[p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=l=>a.value=l),options:n,label:"Select a country","validation-status":"success"},null,8,["modelValue"]),es,p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[1]||(s[1]=l=>a.value=l),options:n,label:"Select a country","validation-status":"error"},{validationMessage:B(()=>[v(" Please select a country ")]),_:1},8,["modelValue"])]))}}),cs=u("",6),rs=u("",2),Es=u("",2),ys=u("",2),is=u("",2),us=u("",3),Fs=u("",1),fs=JSON.parse('{"title":"Vue Select - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/select.md","filePath":"components/select.md"}'),ds={name:"components/select.md"},qs=Object.assign(ds,{setup(o){return(a,n)=>(t(),c("div",null,[cs,p(K),rs,p(X),Es,p(ps),ys,p(ns),is,p(ss),us,p(ts),Fs]))}});export{fs as __pageData,qs as default}; diff --git a/docs/.vitepress/dist/assets/components_sidebar.md.8fae9f09.js b/docs/.vitepress/dist/assets/components_sidebar.md.8fae9f09.js new file mode 100644 index 0000000..ac676ac --- /dev/null +++ b/docs/.vitepress/dist/assets/components_sidebar.md.8fae9f09.js @@ -0,0 +1,1259 @@ +import{t as A}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as g,Z as B,o as c,c as i,k as s,r as u,L as k,l as n,t as q,h as v,n as F,H as l,w as a,e as x,T as D,C as b,b as m,a3 as f,I as C,a as p,Q as d}from"./chunks/framework.3f630664.js";const _={class:"h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800"},Z={class:"space-y-2 font-medium"},h=g({inheritAttrs:!1,__name:"FwbSidebar",setup(y){const t=B(),e=A("absolute top-0 left-0 z-40 w-64 h-screen transition-transform",t.class);return(E,r)=>(c(),i("aside",k(E.$attrs,{class:n(e),"aria-label":"Sidebar"}),[s("div",_,[s("div",Z,[u(E.$slots,"default")])])],16))}}),V={class:"p-4 mt-6 rounded-lg bg-blue-50 dark:bg-blue-900",role:"alert"},M={class:"flex items-center mb-3"},H={class:"bg-orange-100 text-orange-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900"},S=s("span",{class:"sr-only"},"Close",-1),P=s("svg",{class:"w-2.5 h-2.5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 14 14"},[s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"})],-1),$=[S,P],L=g({__name:"FwbSidebarCta",props:{label:{default:void 0}},emits:["close"],setup(y,{emit:t}){const e=t;function E(){e("close")}return(r,w)=>(c(),i("div",V,[s("div",M,[s("span",H,q(r.label),1),s("button",{type:"button",class:"ml-auto -mx-1.5 -my-1.5 bg-blue-50 inline-flex justify-center items-center w-6 h-6 text-blue-900 rounded-lg focus:ring-2 focus:ring-blue-400 p-1 hover:bg-blue-200 h-6 w-6 dark:bg-blue-900 dark:text-blue-400 dark:hover:bg-blue-800","aria-label":"Close",onClick:E},$)]),u(r.$slots,"default")]))}}),I={class:"overflow-hidden"},T=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 21"},[s("path",{d:"M15 12a1 1 0 0 0 .962-.726l2-7A1 1 0 0 0 17 3H3.77L3.175.745A1 1 0 0 0 2.208 0H1a1 1 0 0 0 0 2h.438l.6 2.255v.019l2 7 .746 2.986A3 3 0 1 0 9 17a2.966 2.966 0 0 0-.184-1h2.368c-.118.32-.18.659-.184 1a3 3 0 1 0 3-3H6.78l-.5-2H15Z"})],-1),j={class:"flex-1 ml-3 text-left whitespace-nowrap"},U=s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m1 1 4 4 4-4"},null,-1),N=[U],K={class:"py-2 space-y-2 z-0 overflow-hidden"},G={key:0},R=g({__name:"FwbSidebarDropdownItem",setup(y){const t=v(!1);function e(){t.value=!t.value}return(E,r)=>(c(),i("div",I,[s("button",{type:"button",class:"flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 z-10","aria-controls":"dropdown-content",onClick:e},[u(E.$slots,"icon",{},()=>[T]),s("span",j,[u(E.$slots,"trigger")]),u(E.$slots,"arrow-icon",{toggleDropdown:e},()=>[(c(),i("svg",{class:F(["w-3 h-3 transition-all duration-300",t.value&&"rotate-180"]),"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 10 6"},N,2))])]),s("div",K,[l(D,{duration:150,"enter-from-class":"-translate-y-full","enter-to-class":"translate-y-0","enter-active-class":"transition duration-400 ease-out","leave-active-class":"transition duration-400 ease-in","leave-from-class":"translate-y-0","leave-to-class":"-translate-y-full"},{default:a(()=>[t.value?(c(),i("div",G,[u(E.$slots,"default")])):x("",!0)]),_:3})])]))}}),o=g({__name:"FwbSidebarItem",props:{link:{default:"/"},tag:{default:"router-link"}},setup(y){const t=y,e=t.tag==="a"?"a":b(t.tag),E=t.tag==="a"?"href":"to";return(r,w)=>(c(),m(C(n(e)),f({[n(E)||""]:r.link,class:"flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"}),{default:a(()=>[u(r.$slots,"icon"),s("span",{class:F(["flex-1 whitespace-nowrap",r.$slots.icon&&"ml-3"])},[u(r.$slots,"default")],2),u(r.$slots,"suffix")]),_:3},16))}}),z="pt-4 mt-4 space-y-2 font-medium border-t border-gray-200 dark:border-gray-700",O=g({__name:"FwbSidebarItemGroup",props:{border:{type:Boolean,default:!1}},setup(y){return(t,e)=>(c(),i("div",{class:F(t.border&&z)},[u(t.$slots,"default")],2))}}),Y=["src","alt"],J={class:"self-center text-xl font-semibold whitespace-nowrap dark:text-white"},Q=g({__name:"FwbSidebarLogo",props:{name:{default:""},link:{default:"/"},logo:{default:""},alt:{default:""},tag:{default:"router-link"}},setup(y){const t=y,e=t.tag==="a"?"a":b(t.tag),E=t.tag==="a"?"href":"to";return(r,w)=>(c(),m(C(n(e)),f({[n(E)||""]:r.link,class:"flex items-center mb-5 pl-2.5"}),{default:a(()=>[s("img",{src:r.logo,class:"h-6 mr-3 sm:h-7",alt:r.alt??r.name},null,8,Y),s("span",J,q(r.name),1)]),_:1},16))}}),W={class:"vp-raw flex flex-col relative"},X=s("svg",{class:"w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 22 21"},[s("path",{d:"M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"}),s("path",{d:"M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"})],-1),ss=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 18"},[s("path",{d:"M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"})],-1),as=s("span",{class:"inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300"},"Pro",-1),ns=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20"},[s("path",{d:"m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"})],-1),ls=s("span",{class:"inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300"},"3",-1),ps=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 18"},[s("path",{d:"M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"})],-1),os=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 20"},[s("path",{d:"M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"})],-1),ts=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 18 16"},[s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"})],-1),es=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20"},[s("path",{d:"M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z"}),s("path",{d:"M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z"}),s("path",{d:"M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z"})],-1),rs={__name:"FwbSidebarExample",setup(y){return(t,e)=>(c(),i("div",W,[l(n(h),{class:"!h-full relative"},{default:a(()=>[l(n(o),null,{icon:a(()=>[X]),default:a(()=>[p(" Dashboard ")]),_:1}),l(n(o),null,{icon:a(()=>[ss]),default:a(()=>[p(" Kanban ")]),suffix:a(()=>[as]),_:1}),l(n(o),null,{icon:a(()=>[ns]),default:a(()=>[p(" Inbox ")]),suffix:a(()=>[ls]),_:1}),l(n(o),null,{icon:a(()=>[ps]),default:a(()=>[p(" Users ")]),_:1}),l(n(o),null,{icon:a(()=>[os]),default:a(()=>[p(" Products ")]),_:1}),l(n(o),null,{icon:a(()=>[ts]),default:a(()=>[p(" Sign In ")]),_:1}),l(n(o),null,{icon:a(()=>[es]),default:a(()=>[p(" Sign Up ")]),_:1})]),_:1})]))}},cs={class:"vp-raw flex flex-col relative"},Es=s("svg",{class:"w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 22 21"},[s("path",{d:"M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"}),s("path",{d:"M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"})],-1),ys=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 18"},[s("path",{d:"M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"})],-1),is=s("span",{class:"inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300"},"Pro",-1),us=s("svg",{class:"w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 22 21"},[s("path",{d:"M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"}),s("path",{d:"M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"})],-1),gs={__name:"FwbSidebarDropdownExample",setup(y){return(t,e)=>(c(),i("div",cs,[l(n(h),{class:"!h-full relative"},{default:a(()=>[l(n(o),null,{icon:a(()=>[Es]),default:a(()=>[p(" Dashboard ")]),_:1}),l(n(o),null,{icon:a(()=>[ys]),default:a(()=>[p(" Kanban ")]),suffix:a(()=>[is]),_:1}),l(n(R),null,{icon:a(()=>[us]),trigger:a(()=>[p(" E-commerce ")]),default:a(()=>[l(n(o),{class:"pl-11"},{default:a(()=>[p(" Products ")]),_:1}),l(n(o),{class:"pl-11"},{default:a(()=>[p(" Sign In ")]),_:1}),l(n(o),{class:"pl-11"},{default:a(()=>[p(" Sign Up ")]),_:1})]),_:1})]),_:1})]))}},ds={class:"vp-raw flex flex-col relative"},hs=s("svg",{class:"w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 22 21"},[s("path",{d:"M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"}),s("path",{d:"M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"})],-1),Fs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 18"},[s("path",{d:"M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"})],-1),ms=s("span",{class:"inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300"},"Pro",-1),ws=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20"},[s("path",{d:"m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"})],-1),qs=s("span",{class:"inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300"},"3",-1),vs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 18"},[s("path",{d:"M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"})],-1),xs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 20"},[s("path",{d:"M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"})],-1),bs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 18 16"},[s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"})],-1),fs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20"},[s("path",{d:"M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z"}),s("path",{d:"M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z"}),s("path",{d:"M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z"})],-1),Cs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 17 20"},[s("path",{d:"M7.958 19.393a7.7 7.7 0 0 1-6.715-3.439c-2.868-4.832 0-9.376.944-10.654l.091-.122a3.286 3.286 0 0 0 .765-3.288A1 1 0 0 1 4.6.8c.133.1.313.212.525.347A10.451 10.451 0 0 1 10.6 9.3c.5-1.06.772-2.213.8-3.385a1 1 0 0 1 1.592-.758c1.636 1.205 4.638 6.081 2.019 10.441a8.177 8.177 0 0 1-7.053 3.795Z"})],-1),As=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 16 20"},[s("path",{d:"M16 14V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v15a3 3 0 0 0 3 3h12a1 1 0 0 0 0-2h-1v-2a2 2 0 0 0 2-2ZM4 2h2v12H4V2Zm8 16H3a1 1 0 0 1 0-2h9v2Z"})],-1),Bs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 18"},[s("path",{d:"M18 0H6a2 2 0 0 0-2 2h14v12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Z"}),s("path",{d:"M14 4H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM2 16v-6h12v6H2Z"})],-1),ks=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 21 21"},[s("path",{d:"m5.4 2.736 3.429 3.429A5.046 5.046 0 0 1 10.134 6c.356.01.71.06 1.056.147l3.41-3.412c.136-.133.287-.248.45-.344A9.889 9.889 0 0 0 10.269 1c-1.87-.041-3.713.44-5.322 1.392a2.3 2.3 0 0 1 .454.344Zm11.45 1.54-.126-.127a.5.5 0 0 0-.706 0l-2.932 2.932c.029.023.049.054.078.077.236.194.454.41.65.645.034.038.078.067.11.107l2.927-2.927a.5.5 0 0 0 0-.707Zm-2.931 9.81c-.024.03-.057.052-.081.082a4.963 4.963 0 0 1-.633.639c-.041.036-.072.083-.115.117l2.927 2.927a.5.5 0 0 0 .707 0l.127-.127a.5.5 0 0 0 0-.707l-2.932-2.931Zm-1.442-4.763a3.036 3.036 0 0 0-1.383-1.1l-.012-.007a2.955 2.955 0 0 0-1-.213H10a2.964 2.964 0 0 0-2.122.893c-.285.29-.509.634-.657 1.013l-.01.016a2.96 2.96 0 0 0-.21 1 2.99 2.99 0 0 0 .489 1.716c.009.014.022.026.032.04a3.04 3.04 0 0 0 1.384 1.1l.012.007c.318.129.657.2 1 .213.392.015.784-.05 1.15-.192.012-.005.02-.013.033-.018a3.011 3.011 0 0 0 1.676-1.7v-.007a2.89 2.89 0 0 0 0-2.207 2.868 2.868 0 0 0-.27-.515c-.007-.012-.02-.025-.03-.039Zm6.137-3.373a2.53 2.53 0 0 1-.35.447L14.84 9.823c.112.428.166.869.16 1.311-.01.356-.06.709-.147 1.054l3.413 3.412c.132.134.249.283.347.444A9.88 9.88 0 0 0 20 11.269a9.912 9.912 0 0 0-1.386-5.319ZM14.6 19.264l-3.421-3.421c-.385.1-.781.152-1.18.157h-.134c-.356-.01-.71-.06-1.056-.147l-3.41 3.412a2.503 2.503 0 0 1-.443.347A9.884 9.884 0 0 0 9.732 21H10a9.9 9.9 0 0 0 5.044-1.388 2.519 2.519 0 0 1-.444-.348ZM1.735 15.6l3.426-3.426a4.608 4.608 0 0 1-.013-2.367L1.735 6.4a2.507 2.507 0 0 1-.35-.447 9.889 9.889 0 0 0 0 10.1c.1-.164.217-.316.35-.453Zm5.101-.758a4.957 4.957 0 0 1-.651-.645c-.033-.038-.077-.067-.11-.107L3.15 17.017a.5.5 0 0 0 0 .707l.127.127a.5.5 0 0 0 .706 0l2.932-2.933c-.03-.018-.05-.053-.078-.076ZM6.08 7.914c.03-.037.07-.063.1-.1.183-.22.384-.423.6-.609.047-.04.082-.092.129-.13L3.983 4.149a.5.5 0 0 0-.707 0l-.127.127a.5.5 0 0 0 0 .707L6.08 7.914Z"})],-1),Ds={__name:"FwbSidebarGroupExample",setup(y){return(t,e)=>(c(),i("div",ds,[l(n(h),{class:"!h-full relative"},{default:a(()=>[l(n(o),null,{icon:a(()=>[hs]),default:a(()=>[p(" Dashboard ")]),_:1}),l(n(o),null,{icon:a(()=>[Fs]),default:a(()=>[p(" Kanban ")]),suffix:a(()=>[ms]),_:1}),l(n(o),null,{icon:a(()=>[ws]),default:a(()=>[p(" Inbox ")]),suffix:a(()=>[qs]),_:1}),l(n(o),null,{icon:a(()=>[vs]),default:a(()=>[p(" Users ")]),_:1}),l(n(o),null,{icon:a(()=>[xs]),default:a(()=>[p(" Products ")]),_:1}),l(n(o),null,{icon:a(()=>[bs]),default:a(()=>[p(" Sign In ")]),_:1}),l(n(o),null,{icon:a(()=>[fs]),default:a(()=>[p(" Sign Up ")]),_:1}),l(n(O),{border:""},{default:a(()=>[l(n(o),null,{icon:a(()=>[Cs]),default:a(()=>[p(" Upgrade to Pro ")]),_:1}),l(n(o),null,{icon:a(()=>[As]),default:a(()=>[p(" Documentation ")]),_:1}),l(n(o),null,{icon:a(()=>[Bs]),default:a(()=>[p(" Components ")]),_:1}),l(n(o),null,{icon:a(()=>[ks]),default:a(()=>[p(" Help ")]),_:1})]),_:1})]),_:1})]))}},_s={class:"vp-raw flex flex-col relative"},Zs=s("svg",{class:"w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 22 21"},[s("path",{d:"M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"}),s("path",{d:"M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"})],-1),Vs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 18"},[s("path",{d:"M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"})],-1),Ms=s("span",{class:"inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300"},"Pro",-1),Hs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20"},[s("path",{d:"m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"})],-1),Ss=s("span",{class:"inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300"},"3",-1),Ps=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 18"},[s("path",{d:"M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"})],-1),$s=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 20"},[s("path",{d:"M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"})],-1),Ls=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 18 16"},[s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"})],-1),Is=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20"},[s("path",{d:"M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z"}),s("path",{d:"M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z"}),s("path",{d:"M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z"})],-1),Ts=s("p",{class:"mb-3 text-sm text-blue-800 dark:text-blue-400"}," Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your profile. ",-1),js=s("a",{class:"text-sm text-blue-800 underline font-medium hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300",href:"#"},"Turn new navigation off",-1),Us={__name:"FwbSidebarCtaExample",setup(y){const t=v(!0);function e(){t.value=!t.value}return(E,r)=>(c(),i("div",_s,[l(n(h),{class:"!h-full relative"},{default:a(()=>[l(n(o),null,{icon:a(()=>[Zs]),default:a(()=>[p(" Dashboard ")]),_:1}),l(n(o),null,{icon:a(()=>[Vs]),default:a(()=>[p(" Kanban ")]),suffix:a(()=>[Ms]),_:1}),l(n(o),null,{icon:a(()=>[Hs]),default:a(()=>[p(" Inbox ")]),suffix:a(()=>[Ss]),_:1}),l(n(o),null,{icon:a(()=>[Ps]),default:a(()=>[p(" Users ")]),_:1}),l(n(o),null,{icon:a(()=>[$s]),default:a(()=>[p(" Products ")]),_:1}),l(n(o),null,{icon:a(()=>[Ls]),default:a(()=>[p(" Sign In ")]),_:1}),l(n(o),null,{icon:a(()=>[Is]),default:a(()=>[p(" Sign Up ")]),_:1}),t.value?(c(),m(n(L),{key:0,label:"Beta",onClose:e},{default:a(()=>[Ts,js]),_:1})):x("",!0)]),_:1})]))}},Ns={class:"vp-raw flex flex-col relative"},Ks=s("svg",{class:"w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 22 21"},[s("path",{d:"M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"}),s("path",{d:"M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"})],-1),Gs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 18"},[s("path",{d:"M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"})],-1),Rs=s("span",{class:"inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300"},"Pro",-1),zs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20"},[s("path",{d:"m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"})],-1),Os=s("span",{class:"inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300"},"3",-1),Ys=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 18"},[s("path",{d:"M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"})],-1),Js=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 20"},[s("path",{d:"M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"})],-1),Qs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 18 16"},[s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"})],-1),Ws=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20"},[s("path",{d:"M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z"}),s("path",{d:"M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z"}),s("path",{d:"M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z"})],-1),Xs={__name:"FwbSidebarLogoExample",setup(y){return(t,e)=>(c(),i("div",Ns,[l(n(h),{class:"!h-full relative"},{default:a(()=>[l(n(Q),{name:"Flowbite",logo:"https://flowbite.com/docs/images/logo.svg",tag:"router-link"}),l(n(o),null,{icon:a(()=>[Ks]),default:a(()=>[p(" Dashboard ")]),_:1}),l(n(o),null,{icon:a(()=>[Gs]),default:a(()=>[p(" Kanban ")]),suffix:a(()=>[Rs]),_:1}),l(n(o),null,{icon:a(()=>[zs]),default:a(()=>[p(" Inbox ")]),suffix:a(()=>[Os]),_:1}),l(n(o),null,{icon:a(()=>[Ys]),default:a(()=>[p(" Users ")]),_:1}),l(n(o),null,{icon:a(()=>[Js]),default:a(()=>[p(" Products ")]),_:1}),l(n(o),null,{icon:a(()=>[Qs]),default:a(()=>[p(" Sign In ")]),_:1}),l(n(o),null,{icon:a(()=>[Ws]),default:a(()=>[p(" Sign Up ")]),_:1})]),_:1})]))}},sa=d('

Vue Sidebar - Flowbite ​

Use the sidebar component to show a list of menu items and multi-level menu items on either side of the page to navigate on your website ​

The sidebar component can be used as a complementary element relative to the navbar shown on either the left or right side of the page used for the navigation on your web application, including menu items, multi-level menu items, call to actions elements, and more.

Default sidebar ​

Use this example to show a responsive list of menu items inside the sidebar with icons and labels.

',5),aa=d(`
vue
<template>
+  <fwb-sidebar>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+            class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 22 21"
+          >
+            <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
+            <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
+          </svg>
+        </template>
+        <template #default>Dashboard</template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 18"
+          >
+            <path
+              d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"
+            />
+          </svg>
+        </template>
+        <template #default>Kanban</template>
+        <template #suffix>
+          <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path
+              d="m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"
+            />
+          </svg>
+        </template>
+        <template #default> Inbox </template>
+        <template #suffix>
+          <span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 18"
+          >
+            <path
+              d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"
+            />
+          </svg>
+        </template>
+        <template #default>Users</template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 20"
+          >
+            <path
+              d="M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"
+            />
+          </svg>
+        </template>
+        <template #default>Products</template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 18 16"
+          >
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
+          </svg>
+        </template>
+        <template #default>Sign In</template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z" />
+            <path
+              d="M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z"
+            />
+            <path
+              d="M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z"
+            />
+          </svg>
+        </template>
+        <template #default>Sign Up</template>
+      </fwb-sidebar-item>
+    </fwb-sidebar>
+</template>
+<script setup>
+import { FwbSidebar, FwbSidebarItem } from 'flowbite-vue'
+</script>
<template>
+  <fwb-sidebar>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+            class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 22 21"
+          >
+            <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
+            <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
+          </svg>
+        </template>
+        <template #default>Dashboard</template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 18"
+          >
+            <path
+              d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"
+            />
+          </svg>
+        </template>
+        <template #default>Kanban</template>
+        <template #suffix>
+          <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path
+              d="m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"
+            />
+          </svg>
+        </template>
+        <template #default> Inbox </template>
+        <template #suffix>
+          <span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 18"
+          >
+            <path
+              d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"
+            />
+          </svg>
+        </template>
+        <template #default>Users</template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 20"
+          >
+            <path
+              d="M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"
+            />
+          </svg>
+        </template>
+        <template #default>Products</template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 18 16"
+          >
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
+          </svg>
+        </template>
+        <template #default>Sign In</template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z" />
+            <path
+              d="M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z"
+            />
+            <path
+              d="M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z"
+            />
+          </svg>
+        </template>
+        <template #default>Sign Up</template>
+      </fwb-sidebar-item>
+    </fwb-sidebar>
+</template>
+<script setup>
+import { FwbSidebar, FwbSidebarItem } from 'flowbite-vue'
+</script>

Multi-level menu ​

Use this sidebar example to create multi-level menu items by using the FwbSidebarDropdownItem component.

`,3),na=d(`
vue
<template>
+  <fwb-sidebar>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 22 21"
+        >
+          <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
+          <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
+        </svg>
+      </template>
+      <template #default>Dashboard</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 18"
+        >
+          <path
+              d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"
+          />
+        </svg>
+      </template>
+      <template #default>Kanban</template>
+      <template #suffix>
+        <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
+      </template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-dropdown-item>
+      <template #icon>
+        <svg
+            class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 22 21"
+        >
+          <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
+          <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
+        </svg>
+      </template>
+      <template #trigger> E-commerce </template>
+      <template #default>
+        <fwb-sidebar-item class="pl-11"> Products </fwb-sidebar-item>
+        <fwb-sidebar-item class="pl-11"> Sign In </fwb-sidebar-item>
+        <fwb-sidebar-item class="pl-11"> Sign Up </fwb-sidebar-item>
+      </template>
+    </fwb-sidebar-dropdown-item>
+  </fwb-sidebar>
+</template>
+<script setup>
+  import { FwbSidebar, FwbSidebarItem, FwbSidebarDropdownItem } from 'flowbite-vue'
+</script>
<template>
+  <fwb-sidebar>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 22 21"
+        >
+          <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
+          <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
+        </svg>
+      </template>
+      <template #default>Dashboard</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 18"
+        >
+          <path
+              d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"
+          />
+        </svg>
+      </template>
+      <template #default>Kanban</template>
+      <template #suffix>
+        <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
+      </template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-dropdown-item>
+      <template #icon>
+        <svg
+            class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 22 21"
+        >
+          <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
+          <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
+        </svg>
+      </template>
+      <template #trigger> E-commerce </template>
+      <template #default>
+        <fwb-sidebar-item class="pl-11"> Products </fwb-sidebar-item>
+        <fwb-sidebar-item class="pl-11"> Sign In </fwb-sidebar-item>
+        <fwb-sidebar-item class="pl-11"> Sign Up </fwb-sidebar-item>
+      </template>
+    </fwb-sidebar-dropdown-item>
+  </fwb-sidebar>
+</template>
+<script setup>
+  import { FwbSidebar, FwbSidebarItem, FwbSidebarDropdownItem } from 'flowbite-vue'
+</script>

Content separator ​

`,2),la=d(`
vue
<template>
+  <fwb-sidebar>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 22 21"
+        >
+          <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
+          <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
+        </svg>
+      </template>
+      <template #default>Dashboard</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 18"
+        >
+          <path
+              d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"
+          />
+        </svg>
+      </template>
+      <template #default>Kanban</template>
+      <template #suffix>
+        <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
+      </template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+        >
+          <path
+              d="m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"
+          />
+        </svg>
+      </template>
+      <template #default> Inbox </template>
+      <template #suffix>
+        <span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
+      </template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 18"
+        >
+          <path
+              d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"
+          />
+        </svg>
+      </template>
+      <template #default>Users</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 20"
+        >
+          <path
+              d="M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"
+          />
+        </svg>
+      </template>
+      <template #default>Products</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 18 16"
+        >
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
+        </svg>
+      </template>
+      <template #default>Sign In</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+        >
+          <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z" />
+          <path
+              d="M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z"
+          />
+          <path
+              d="M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z"
+          />
+        </svg>
+      </template>
+      <template #default>Sign Up</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item-group border>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+              class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 17 20"
+          >
+            <path
+                d="M7.958 19.393a7.7 7.7 0 0 1-6.715-3.439c-2.868-4.832 0-9.376.944-10.654l.091-.122a3.286 3.286 0 0 0 .765-3.288A1 1 0 0 1 4.6.8c.133.1.313.212.525.347A10.451 10.451 0 0 1 10.6 9.3c.5-1.06.772-2.213.8-3.385a1 1 0 0 1 1.592-.758c1.636 1.205 4.638 6.081 2.019 10.441a8.177 8.177 0 0 1-7.053 3.795Z"
+            />
+          </svg>
+        </template>
+        <template #default>Upgrade to Pro</template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+              class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 16 20"
+          >
+            <path d="M16 14V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v15a3 3 0 0 0 3 3h12a1 1 0 0 0 0-2h-1v-2a2 2 0 0 0 2-2ZM4 2h2v12H4V2Zm8 16H3a1 1 0 0 1 0-2h9v2Z" />
+          </svg>
+        </template>
+        <template #default>Documentation</template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+              class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 20 18"
+          >
+            <path d="M18 0H6a2 2 0 0 0-2 2h14v12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Z" />
+            <path d="M14 4H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM2 16v-6h12v6H2Z" />
+          </svg>
+        </template>
+        <template #default>Components</template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+              class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 21 21"
+          >
+            <path
+                d="m5.4 2.736 3.429 3.429A5.046 5.046 0 0 1 10.134 6c.356.01.71.06 1.056.147l3.41-3.412c.136-.133.287-.248.45-.344A9.889 9.889 0 0 0 10.269 1c-1.87-.041-3.713.44-5.322 1.392a2.3 2.3 0 0 1 .454.344Zm11.45 1.54-.126-.127a.5.5 0 0 0-.706 0l-2.932 2.932c.029.023.049.054.078.077.236.194.454.41.65.645.034.038.078.067.11.107l2.927-2.927a.5.5 0 0 0 0-.707Zm-2.931 9.81c-.024.03-.057.052-.081.082a4.963 4.963 0 0 1-.633.639c-.041.036-.072.083-.115.117l2.927 2.927a.5.5 0 0 0 .707 0l.127-.127a.5.5 0 0 0 0-.707l-2.932-2.931Zm-1.442-4.763a3.036 3.036 0 0 0-1.383-1.1l-.012-.007a2.955 2.955 0 0 0-1-.213H10a2.964 2.964 0 0 0-2.122.893c-.285.29-.509.634-.657 1.013l-.01.016a2.96 2.96 0 0 0-.21 1 2.99 2.99 0 0 0 .489 1.716c.009.014.022.026.032.04a3.04 3.04 0 0 0 1.384 1.1l.012.007c.318.129.657.2 1 .213.392.015.784-.05 1.15-.192.012-.005.02-.013.033-.018a3.011 3.011 0 0 0 1.676-1.7v-.007a2.89 2.89 0 0 0 0-2.207 2.868 2.868 0 0 0-.27-.515c-.007-.012-.02-.025-.03-.039Zm6.137-3.373a2.53 2.53 0 0 1-.35.447L14.84 9.823c.112.428.166.869.16 1.311-.01.356-.06.709-.147 1.054l3.413 3.412c.132.134.249.283.347.444A9.88 9.88 0 0 0 20 11.269a9.912 9.912 0 0 0-1.386-5.319ZM14.6 19.264l-3.421-3.421c-.385.1-.781.152-1.18.157h-.134c-.356-.01-.71-.06-1.056-.147l-3.41 3.412a2.503 2.503 0 0 1-.443.347A9.884 9.884 0 0 0 9.732 21H10a9.9 9.9 0 0 0 5.044-1.388 2.519 2.519 0 0 1-.444-.348ZM1.735 15.6l3.426-3.426a4.608 4.608 0 0 1-.013-2.367L1.735 6.4a2.507 2.507 0 0 1-.35-.447 9.889 9.889 0 0 0 0 10.1c.1-.164.217-.316.35-.453Zm5.101-.758a4.957 4.957 0 0 1-.651-.645c-.033-.038-.077-.067-.11-.107L3.15 17.017a.5.5 0 0 0 0 .707l.127.127a.5.5 0 0 0 .706 0l2.932-2.933c-.03-.018-.05-.053-.078-.076ZM6.08 7.914c.03-.037.07-.063.1-.1.183-.22.384-.423.6-.609.047-.04.082-.092.129-.13L3.983 4.149a.5.5 0 0 0-.707 0l-.127.127a.5.5 0 0 0 0 .707L6.08 7.914Z"
+            />
+          </svg>
+        </template>
+        <template #default>Help</template>
+      </fwb-sidebar-item>
+    </fwb-sidebar-item-group>
+  </fwb-sidebar>
+</template>
+<script setup>
+  import { FwbSidebar, FwbSidebarItemGroup, FwbSidebarItem } from 'flowbite-vue'
+</script>
<template>
+  <fwb-sidebar>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 22 21"
+        >
+          <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
+          <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
+        </svg>
+      </template>
+      <template #default>Dashboard</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 18"
+        >
+          <path
+              d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"
+          />
+        </svg>
+      </template>
+      <template #default>Kanban</template>
+      <template #suffix>
+        <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
+      </template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+        >
+          <path
+              d="m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"
+          />
+        </svg>
+      </template>
+      <template #default> Inbox </template>
+      <template #suffix>
+        <span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
+      </template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 18"
+        >
+          <path
+              d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"
+          />
+        </svg>
+      </template>
+      <template #default>Users</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 20"
+        >
+          <path
+              d="M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"
+          />
+        </svg>
+      </template>
+      <template #default>Products</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 18 16"
+        >
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
+        </svg>
+      </template>
+      <template #default>Sign In</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+        >
+          <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z" />
+          <path
+              d="M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z"
+          />
+          <path
+              d="M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z"
+          />
+        </svg>
+      </template>
+      <template #default>Sign Up</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item-group border>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+              class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 17 20"
+          >
+            <path
+                d="M7.958 19.393a7.7 7.7 0 0 1-6.715-3.439c-2.868-4.832 0-9.376.944-10.654l.091-.122a3.286 3.286 0 0 0 .765-3.288A1 1 0 0 1 4.6.8c.133.1.313.212.525.347A10.451 10.451 0 0 1 10.6 9.3c.5-1.06.772-2.213.8-3.385a1 1 0 0 1 1.592-.758c1.636 1.205 4.638 6.081 2.019 10.441a8.177 8.177 0 0 1-7.053 3.795Z"
+            />
+          </svg>
+        </template>
+        <template #default>Upgrade to Pro</template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+              class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 16 20"
+          >
+            <path d="M16 14V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v15a3 3 0 0 0 3 3h12a1 1 0 0 0 0-2h-1v-2a2 2 0 0 0 2-2ZM4 2h2v12H4V2Zm8 16H3a1 1 0 0 1 0-2h9v2Z" />
+          </svg>
+        </template>
+        <template #default>Documentation</template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+              class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 20 18"
+          >
+            <path d="M18 0H6a2 2 0 0 0-2 2h14v12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Z" />
+            <path d="M14 4H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM2 16v-6h12v6H2Z" />
+          </svg>
+        </template>
+        <template #default>Components</template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
+        <template #icon>
+          <svg
+              class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 21 21"
+          >
+            <path
+                d="m5.4 2.736 3.429 3.429A5.046 5.046 0 0 1 10.134 6c.356.01.71.06 1.056.147l3.41-3.412c.136-.133.287-.248.45-.344A9.889 9.889 0 0 0 10.269 1c-1.87-.041-3.713.44-5.322 1.392a2.3 2.3 0 0 1 .454.344Zm11.45 1.54-.126-.127a.5.5 0 0 0-.706 0l-2.932 2.932c.029.023.049.054.078.077.236.194.454.41.65.645.034.038.078.067.11.107l2.927-2.927a.5.5 0 0 0 0-.707Zm-2.931 9.81c-.024.03-.057.052-.081.082a4.963 4.963 0 0 1-.633.639c-.041.036-.072.083-.115.117l2.927 2.927a.5.5 0 0 0 .707 0l.127-.127a.5.5 0 0 0 0-.707l-2.932-2.931Zm-1.442-4.763a3.036 3.036 0 0 0-1.383-1.1l-.012-.007a2.955 2.955 0 0 0-1-.213H10a2.964 2.964 0 0 0-2.122.893c-.285.29-.509.634-.657 1.013l-.01.016a2.96 2.96 0 0 0-.21 1 2.99 2.99 0 0 0 .489 1.716c.009.014.022.026.032.04a3.04 3.04 0 0 0 1.384 1.1l.012.007c.318.129.657.2 1 .213.392.015.784-.05 1.15-.192.012-.005.02-.013.033-.018a3.011 3.011 0 0 0 1.676-1.7v-.007a2.89 2.89 0 0 0 0-2.207 2.868 2.868 0 0 0-.27-.515c-.007-.012-.02-.025-.03-.039Zm6.137-3.373a2.53 2.53 0 0 1-.35.447L14.84 9.823c.112.428.166.869.16 1.311-.01.356-.06.709-.147 1.054l3.413 3.412c.132.134.249.283.347.444A9.88 9.88 0 0 0 20 11.269a9.912 9.912 0 0 0-1.386-5.319ZM14.6 19.264l-3.421-3.421c-.385.1-.781.152-1.18.157h-.134c-.356-.01-.71-.06-1.056-.147l-3.41 3.412a2.503 2.503 0 0 1-.443.347A9.884 9.884 0 0 0 9.732 21H10a9.9 9.9 0 0 0 5.044-1.388 2.519 2.519 0 0 1-.444-.348ZM1.735 15.6l3.426-3.426a4.608 4.608 0 0 1-.013-2.367L1.735 6.4a2.507 2.507 0 0 1-.35-.447 9.889 9.889 0 0 0 0 10.1c.1-.164.217-.316.35-.453Zm5.101-.758a4.957 4.957 0 0 1-.651-.645c-.033-.038-.077-.067-.11-.107L3.15 17.017a.5.5 0 0 0 0 .707l.127.127a.5.5 0 0 0 .706 0l2.932-2.933c-.03-.018-.05-.053-.078-.076ZM6.08 7.914c.03-.037.07-.063.1-.1.183-.22.384-.423.6-.609.047-.04.082-.092.129-.13L3.983 4.149a.5.5 0 0 0-.707 0l-.127.127a.5.5 0 0 0 0 .707L6.08 7.914Z"
+            />
+          </svg>
+        </template>
+        <template #default>Help</template>
+      </fwb-sidebar-item>
+    </fwb-sidebar-item-group>
+  </fwb-sidebar>
+</template>
+<script setup>
+  import { FwbSidebar, FwbSidebarItemGroup, FwbSidebarItem } from 'flowbite-vue'
+</script>

CTA button ​

`,2),pa=d(`
vue
<template>
+  <fwb-sidebar>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 22 21"
+        >
+          <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
+          <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
+        </svg>
+      </template>
+      <template #default>Dashboard</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 18"
+        >
+          <path
+              d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"
+          />
+        </svg>
+      </template>
+      <template #default>Kanban</template>
+      <template #suffix>
+        <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
+      </template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+        >
+          <path
+              d="m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"
+          />
+        </svg>
+      </template>
+      <template #default> Inbox </template>
+      <template #suffix>
+        <span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
+      </template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 18"
+        >
+          <path
+              d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"
+          />
+        </svg>
+      </template>
+      <template #default>Users</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 20"
+        >
+          <path
+              d="M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"
+          />
+        </svg>
+      </template>
+      <template #default>Products</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 18 16"
+        >
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
+        </svg>
+      </template>
+      <template #default>Sign In</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+        >
+          <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z" />
+          <path
+              d="M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z"
+          />
+          <path
+              d="M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z"
+          />
+        </svg>
+      </template>
+      <template #default>Sign Up</template>
+    </fwb-sidebar-item>
+
+    <fwb-sidebar-cta v-if="isShowCta" label="Beta" @close="toggleCta">
+      <p class="mb-3 text-sm text-blue-800 dark:text-blue-400">Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your profile.</p>
+      <a class="text-sm text-blue-800 underline font-medium hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300" href="#">Turn new navigation off</a>
+    </fwb-sidebar-cta>
+  </fwb-sidebar>
+</template>
+<script setup>
+  import { FwbSidebar, FwbSidebarCta, FwbSidebarItem } from 'flowbite-vue'
+</script>
<template>
+  <fwb-sidebar>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 22 21"
+        >
+          <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
+          <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
+        </svg>
+      </template>
+      <template #default>Dashboard</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 18"
+        >
+          <path
+              d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"
+          />
+        </svg>
+      </template>
+      <template #default>Kanban</template>
+      <template #suffix>
+        <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
+      </template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+        >
+          <path
+              d="m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"
+          />
+        </svg>
+      </template>
+      <template #default> Inbox </template>
+      <template #suffix>
+        <span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
+      </template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 18"
+        >
+          <path
+              d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"
+          />
+        </svg>
+      </template>
+      <template #default>Users</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 20"
+        >
+          <path
+              d="M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"
+          />
+        </svg>
+      </template>
+      <template #default>Products</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 18 16"
+        >
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
+        </svg>
+      </template>
+      <template #default>Sign In</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+        >
+          <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z" />
+          <path
+              d="M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z"
+          />
+          <path
+              d="M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z"
+          />
+        </svg>
+      </template>
+      <template #default>Sign Up</template>
+    </fwb-sidebar-item>
+
+    <fwb-sidebar-cta v-if="isShowCta" label="Beta" @close="toggleCta">
+      <p class="mb-3 text-sm text-blue-800 dark:text-blue-400">Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your profile.</p>
+      <a class="text-sm text-blue-800 underline font-medium hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300" href="#">Turn new navigation off</a>
+    </fwb-sidebar-cta>
+  </fwb-sidebar>
+</template>
+<script setup>
+  import { FwbSidebar, FwbSidebarCta, FwbSidebarItem } from 'flowbite-vue'
+</script>

Logo branding ​

`,2),oa=d(`
vue
<template>
+  <fwb-sidebar>
+    <fwb-sidebar-logo name="Flowbite" logo="https://flowbite.com/docs/images/logo.svg" tag="router-link" />
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 22 21"
+        >
+          <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
+          <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
+        </svg>
+      </template>
+      <template #default>Dashboard</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 18"
+        >
+          <path
+              d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"
+          />
+        </svg>
+      </template>
+      <template #default>Kanban</template>
+      <template #suffix>
+        <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
+      </template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+        >
+          <path
+              d="m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"
+          />
+        </svg>
+      </template>
+      <template #default> Inbox </template>
+      <template #suffix>
+        <span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
+      </template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 18"
+        >
+          <path
+              d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"
+          />
+        </svg>
+      </template>
+      <template #default>Users</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 20"
+        >
+          <path
+              d="M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"
+          />
+        </svg>
+      </template>
+      <template #default>Products</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 18 16"
+        >
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
+        </svg>
+      </template>
+      <template #default>Sign In</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+        >
+          <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z" />
+          <path
+              d="M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z"
+          />
+          <path
+              d="M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z"
+          />
+        </svg>
+      </template>
+      <template #default>Sign Up</template>
+    </fwb-sidebar-item>
+  </fwb-sidebar>
+</template>
+<script setup>
+  import { FwbSidebar, FwbSidebarItem, FwbSidebarLogo } from 'flowbite-vue'
+</script>
<template>
+  <fwb-sidebar>
+    <fwb-sidebar-logo name="Flowbite" logo="https://flowbite.com/docs/images/logo.svg" tag="router-link" />
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 22 21"
+        >
+          <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
+          <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
+        </svg>
+      </template>
+      <template #default>Dashboard</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 18"
+        >
+          <path
+              d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"
+          />
+        </svg>
+      </template>
+      <template #default>Kanban</template>
+      <template #suffix>
+        <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
+      </template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+        >
+          <path
+              d="m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"
+          />
+        </svg>
+      </template>
+      <template #default> Inbox </template>
+      <template #suffix>
+        <span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
+      </template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 18"
+        >
+          <path
+              d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"
+          />
+        </svg>
+      </template>
+      <template #default>Users</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 20"
+        >
+          <path
+              d="M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"
+          />
+        </svg>
+      </template>
+      <template #default>Products</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 18 16"
+        >
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
+        </svg>
+      </template>
+      <template #default>Sign In</template>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
+      <template #icon>
+        <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+        >
+          <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z" />
+          <path
+              d="M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z"
+          />
+          <path
+              d="M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z"
+          />
+        </svg>
+      </template>
+      <template #default>Sign Up</template>
+    </fwb-sidebar-item>
+  </fwb-sidebar>
+</template>
+<script setup>
+  import { FwbSidebar, FwbSidebarItem, FwbSidebarLogo } from 'flowbite-vue'
+</script>

API ​

Slots ​

NameDescription
defaultSidebar content

SidebarCta component ​

Slots ​

NameDescription
defaultSidebar content

Props ​

Nametype
labelstring

Events ​

NameDescription
closeclose button clicked

SidebarDropdownItem component ​

Slots ​

NameDescription
defaultDropdown content
iconDropdown item icon
triggerDropdown text
arrow-iconDropdown item arrow icon

SidebarItem ​

Slots ​

NameDescription
defaultSidebar content
iconItem icon
suffixsuffix content

Props ​

Nametypedefault
linkstring/
tagstringrouter-link

SidebarItemGroup ​

Slots ​

NameDescription
defaultGroup content

Props ​

Nametypedefault
borderbooleanfalse

Props ​

Nametypedefault
namestring
linkstring/
logostring
tagstringrouter-link
`,28),ca=JSON.parse('{"title":"Vue Sidebar - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/sidebar.md","filePath":"components/sidebar.md"}'),ta={name:"components/sidebar.md"},Ea=Object.assign(ta,{setup(y){return(t,e)=>(c(),i("div",null,[sa,l(rs),aa,l(gs),na,l(Ds),la,l(Us),pa,l(Xs),oa]))}});export{ca as __pageData,Ea as default}; diff --git a/docs/.vitepress/dist/assets/components_sidebar.md.8fae9f09.lean.js b/docs/.vitepress/dist/assets/components_sidebar.md.8fae9f09.lean.js new file mode 100644 index 0000000..fe96d95 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_sidebar.md.8fae9f09.lean.js @@ -0,0 +1 @@ +import{t as A}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as g,Z as B,o as c,c as i,k as s,r as u,L as k,l as n,t as q,h as v,n as F,H as l,w as a,e as x,T as D,C as b,b as m,a3 as f,I as C,a as p,Q as d}from"./chunks/framework.3f630664.js";const _={class:"h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800"},Z={class:"space-y-2 font-medium"},h=g({inheritAttrs:!1,__name:"FwbSidebar",setup(y){const t=B(),e=A("absolute top-0 left-0 z-40 w-64 h-screen transition-transform",t.class);return(E,r)=>(c(),i("aside",k(E.$attrs,{class:n(e),"aria-label":"Sidebar"}),[s("div",_,[s("div",Z,[u(E.$slots,"default")])])],16))}}),V={class:"p-4 mt-6 rounded-lg bg-blue-50 dark:bg-blue-900",role:"alert"},M={class:"flex items-center mb-3"},H={class:"bg-orange-100 text-orange-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900"},S=s("span",{class:"sr-only"},"Close",-1),P=s("svg",{class:"w-2.5 h-2.5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 14 14"},[s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"})],-1),$=[S,P],L=g({__name:"FwbSidebarCta",props:{label:{default:void 0}},emits:["close"],setup(y,{emit:t}){const e=t;function E(){e("close")}return(r,w)=>(c(),i("div",V,[s("div",M,[s("span",H,q(r.label),1),s("button",{type:"button",class:"ml-auto -mx-1.5 -my-1.5 bg-blue-50 inline-flex justify-center items-center w-6 h-6 text-blue-900 rounded-lg focus:ring-2 focus:ring-blue-400 p-1 hover:bg-blue-200 h-6 w-6 dark:bg-blue-900 dark:text-blue-400 dark:hover:bg-blue-800","aria-label":"Close",onClick:E},$)]),u(r.$slots,"default")]))}}),I={class:"overflow-hidden"},T=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 21"},[s("path",{d:"M15 12a1 1 0 0 0 .962-.726l2-7A1 1 0 0 0 17 3H3.77L3.175.745A1 1 0 0 0 2.208 0H1a1 1 0 0 0 0 2h.438l.6 2.255v.019l2 7 .746 2.986A3 3 0 1 0 9 17a2.966 2.966 0 0 0-.184-1h2.368c-.118.32-.18.659-.184 1a3 3 0 1 0 3-3H6.78l-.5-2H15Z"})],-1),j={class:"flex-1 ml-3 text-left whitespace-nowrap"},U=s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m1 1 4 4 4-4"},null,-1),N=[U],K={class:"py-2 space-y-2 z-0 overflow-hidden"},G={key:0},R=g({__name:"FwbSidebarDropdownItem",setup(y){const t=v(!1);function e(){t.value=!t.value}return(E,r)=>(c(),i("div",I,[s("button",{type:"button",class:"flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 z-10","aria-controls":"dropdown-content",onClick:e},[u(E.$slots,"icon",{},()=>[T]),s("span",j,[u(E.$slots,"trigger")]),u(E.$slots,"arrow-icon",{toggleDropdown:e},()=>[(c(),i("svg",{class:F(["w-3 h-3 transition-all duration-300",t.value&&"rotate-180"]),"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 10 6"},N,2))])]),s("div",K,[l(D,{duration:150,"enter-from-class":"-translate-y-full","enter-to-class":"translate-y-0","enter-active-class":"transition duration-400 ease-out","leave-active-class":"transition duration-400 ease-in","leave-from-class":"translate-y-0","leave-to-class":"-translate-y-full"},{default:a(()=>[t.value?(c(),i("div",G,[u(E.$slots,"default")])):x("",!0)]),_:3})])]))}}),o=g({__name:"FwbSidebarItem",props:{link:{default:"/"},tag:{default:"router-link"}},setup(y){const t=y,e=t.tag==="a"?"a":b(t.tag),E=t.tag==="a"?"href":"to";return(r,w)=>(c(),m(C(n(e)),f({[n(E)||""]:r.link,class:"flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"}),{default:a(()=>[u(r.$slots,"icon"),s("span",{class:F(["flex-1 whitespace-nowrap",r.$slots.icon&&"ml-3"])},[u(r.$slots,"default")],2),u(r.$slots,"suffix")]),_:3},16))}}),z="pt-4 mt-4 space-y-2 font-medium border-t border-gray-200 dark:border-gray-700",O=g({__name:"FwbSidebarItemGroup",props:{border:{type:Boolean,default:!1}},setup(y){return(t,e)=>(c(),i("div",{class:F(t.border&&z)},[u(t.$slots,"default")],2))}}),Y=["src","alt"],J={class:"self-center text-xl font-semibold whitespace-nowrap dark:text-white"},Q=g({__name:"FwbSidebarLogo",props:{name:{default:""},link:{default:"/"},logo:{default:""},alt:{default:""},tag:{default:"router-link"}},setup(y){const t=y,e=t.tag==="a"?"a":b(t.tag),E=t.tag==="a"?"href":"to";return(r,w)=>(c(),m(C(n(e)),f({[n(E)||""]:r.link,class:"flex items-center mb-5 pl-2.5"}),{default:a(()=>[s("img",{src:r.logo,class:"h-6 mr-3 sm:h-7",alt:r.alt??r.name},null,8,Y),s("span",J,q(r.name),1)]),_:1},16))}}),W={class:"vp-raw flex flex-col relative"},X=s("svg",{class:"w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 22 21"},[s("path",{d:"M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"}),s("path",{d:"M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"})],-1),ss=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 18"},[s("path",{d:"M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"})],-1),as=s("span",{class:"inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300"},"Pro",-1),ns=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20"},[s("path",{d:"m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"})],-1),ls=s("span",{class:"inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300"},"3",-1),ps=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 18"},[s("path",{d:"M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"})],-1),os=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 20"},[s("path",{d:"M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"})],-1),ts=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 18 16"},[s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"})],-1),es=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20"},[s("path",{d:"M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z"}),s("path",{d:"M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z"}),s("path",{d:"M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z"})],-1),rs={__name:"FwbSidebarExample",setup(y){return(t,e)=>(c(),i("div",W,[l(n(h),{class:"!h-full relative"},{default:a(()=>[l(n(o),null,{icon:a(()=>[X]),default:a(()=>[p(" Dashboard ")]),_:1}),l(n(o),null,{icon:a(()=>[ss]),default:a(()=>[p(" Kanban ")]),suffix:a(()=>[as]),_:1}),l(n(o),null,{icon:a(()=>[ns]),default:a(()=>[p(" Inbox ")]),suffix:a(()=>[ls]),_:1}),l(n(o),null,{icon:a(()=>[ps]),default:a(()=>[p(" Users ")]),_:1}),l(n(o),null,{icon:a(()=>[os]),default:a(()=>[p(" Products ")]),_:1}),l(n(o),null,{icon:a(()=>[ts]),default:a(()=>[p(" Sign In ")]),_:1}),l(n(o),null,{icon:a(()=>[es]),default:a(()=>[p(" Sign Up ")]),_:1})]),_:1})]))}},cs={class:"vp-raw flex flex-col relative"},Es=s("svg",{class:"w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 22 21"},[s("path",{d:"M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"}),s("path",{d:"M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"})],-1),ys=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 18"},[s("path",{d:"M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"})],-1),is=s("span",{class:"inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300"},"Pro",-1),us=s("svg",{class:"w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 22 21"},[s("path",{d:"M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"}),s("path",{d:"M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"})],-1),gs={__name:"FwbSidebarDropdownExample",setup(y){return(t,e)=>(c(),i("div",cs,[l(n(h),{class:"!h-full relative"},{default:a(()=>[l(n(o),null,{icon:a(()=>[Es]),default:a(()=>[p(" Dashboard ")]),_:1}),l(n(o),null,{icon:a(()=>[ys]),default:a(()=>[p(" Kanban ")]),suffix:a(()=>[is]),_:1}),l(n(R),null,{icon:a(()=>[us]),trigger:a(()=>[p(" E-commerce ")]),default:a(()=>[l(n(o),{class:"pl-11"},{default:a(()=>[p(" Products ")]),_:1}),l(n(o),{class:"pl-11"},{default:a(()=>[p(" Sign In ")]),_:1}),l(n(o),{class:"pl-11"},{default:a(()=>[p(" Sign Up ")]),_:1})]),_:1})]),_:1})]))}},ds={class:"vp-raw flex flex-col relative"},hs=s("svg",{class:"w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 22 21"},[s("path",{d:"M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"}),s("path",{d:"M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"})],-1),Fs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 18"},[s("path",{d:"M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"})],-1),ms=s("span",{class:"inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300"},"Pro",-1),ws=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20"},[s("path",{d:"m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"})],-1),qs=s("span",{class:"inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300"},"3",-1),vs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 18"},[s("path",{d:"M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"})],-1),xs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 20"},[s("path",{d:"M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"})],-1),bs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 18 16"},[s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"})],-1),fs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20"},[s("path",{d:"M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z"}),s("path",{d:"M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z"}),s("path",{d:"M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z"})],-1),Cs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 17 20"},[s("path",{d:"M7.958 19.393a7.7 7.7 0 0 1-6.715-3.439c-2.868-4.832 0-9.376.944-10.654l.091-.122a3.286 3.286 0 0 0 .765-3.288A1 1 0 0 1 4.6.8c.133.1.313.212.525.347A10.451 10.451 0 0 1 10.6 9.3c.5-1.06.772-2.213.8-3.385a1 1 0 0 1 1.592-.758c1.636 1.205 4.638 6.081 2.019 10.441a8.177 8.177 0 0 1-7.053 3.795Z"})],-1),As=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 16 20"},[s("path",{d:"M16 14V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v15a3 3 0 0 0 3 3h12a1 1 0 0 0 0-2h-1v-2a2 2 0 0 0 2-2ZM4 2h2v12H4V2Zm8 16H3a1 1 0 0 1 0-2h9v2Z"})],-1),Bs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 18"},[s("path",{d:"M18 0H6a2 2 0 0 0-2 2h14v12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Z"}),s("path",{d:"M14 4H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM2 16v-6h12v6H2Z"})],-1),ks=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 21 21"},[s("path",{d:"m5.4 2.736 3.429 3.429A5.046 5.046 0 0 1 10.134 6c.356.01.71.06 1.056.147l3.41-3.412c.136-.133.287-.248.45-.344A9.889 9.889 0 0 0 10.269 1c-1.87-.041-3.713.44-5.322 1.392a2.3 2.3 0 0 1 .454.344Zm11.45 1.54-.126-.127a.5.5 0 0 0-.706 0l-2.932 2.932c.029.023.049.054.078.077.236.194.454.41.65.645.034.038.078.067.11.107l2.927-2.927a.5.5 0 0 0 0-.707Zm-2.931 9.81c-.024.03-.057.052-.081.082a4.963 4.963 0 0 1-.633.639c-.041.036-.072.083-.115.117l2.927 2.927a.5.5 0 0 0 .707 0l.127-.127a.5.5 0 0 0 0-.707l-2.932-2.931Zm-1.442-4.763a3.036 3.036 0 0 0-1.383-1.1l-.012-.007a2.955 2.955 0 0 0-1-.213H10a2.964 2.964 0 0 0-2.122.893c-.285.29-.509.634-.657 1.013l-.01.016a2.96 2.96 0 0 0-.21 1 2.99 2.99 0 0 0 .489 1.716c.009.014.022.026.032.04a3.04 3.04 0 0 0 1.384 1.1l.012.007c.318.129.657.2 1 .213.392.015.784-.05 1.15-.192.012-.005.02-.013.033-.018a3.011 3.011 0 0 0 1.676-1.7v-.007a2.89 2.89 0 0 0 0-2.207 2.868 2.868 0 0 0-.27-.515c-.007-.012-.02-.025-.03-.039Zm6.137-3.373a2.53 2.53 0 0 1-.35.447L14.84 9.823c.112.428.166.869.16 1.311-.01.356-.06.709-.147 1.054l3.413 3.412c.132.134.249.283.347.444A9.88 9.88 0 0 0 20 11.269a9.912 9.912 0 0 0-1.386-5.319ZM14.6 19.264l-3.421-3.421c-.385.1-.781.152-1.18.157h-.134c-.356-.01-.71-.06-1.056-.147l-3.41 3.412a2.503 2.503 0 0 1-.443.347A9.884 9.884 0 0 0 9.732 21H10a9.9 9.9 0 0 0 5.044-1.388 2.519 2.519 0 0 1-.444-.348ZM1.735 15.6l3.426-3.426a4.608 4.608 0 0 1-.013-2.367L1.735 6.4a2.507 2.507 0 0 1-.35-.447 9.889 9.889 0 0 0 0 10.1c.1-.164.217-.316.35-.453Zm5.101-.758a4.957 4.957 0 0 1-.651-.645c-.033-.038-.077-.067-.11-.107L3.15 17.017a.5.5 0 0 0 0 .707l.127.127a.5.5 0 0 0 .706 0l2.932-2.933c-.03-.018-.05-.053-.078-.076ZM6.08 7.914c.03-.037.07-.063.1-.1.183-.22.384-.423.6-.609.047-.04.082-.092.129-.13L3.983 4.149a.5.5 0 0 0-.707 0l-.127.127a.5.5 0 0 0 0 .707L6.08 7.914Z"})],-1),Ds={__name:"FwbSidebarGroupExample",setup(y){return(t,e)=>(c(),i("div",ds,[l(n(h),{class:"!h-full relative"},{default:a(()=>[l(n(o),null,{icon:a(()=>[hs]),default:a(()=>[p(" Dashboard ")]),_:1}),l(n(o),null,{icon:a(()=>[Fs]),default:a(()=>[p(" Kanban ")]),suffix:a(()=>[ms]),_:1}),l(n(o),null,{icon:a(()=>[ws]),default:a(()=>[p(" Inbox ")]),suffix:a(()=>[qs]),_:1}),l(n(o),null,{icon:a(()=>[vs]),default:a(()=>[p(" Users ")]),_:1}),l(n(o),null,{icon:a(()=>[xs]),default:a(()=>[p(" Products ")]),_:1}),l(n(o),null,{icon:a(()=>[bs]),default:a(()=>[p(" Sign In ")]),_:1}),l(n(o),null,{icon:a(()=>[fs]),default:a(()=>[p(" Sign Up ")]),_:1}),l(n(O),{border:""},{default:a(()=>[l(n(o),null,{icon:a(()=>[Cs]),default:a(()=>[p(" Upgrade to Pro ")]),_:1}),l(n(o),null,{icon:a(()=>[As]),default:a(()=>[p(" Documentation ")]),_:1}),l(n(o),null,{icon:a(()=>[Bs]),default:a(()=>[p(" Components ")]),_:1}),l(n(o),null,{icon:a(()=>[ks]),default:a(()=>[p(" Help ")]),_:1})]),_:1})]),_:1})]))}},_s={class:"vp-raw flex flex-col relative"},Zs=s("svg",{class:"w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 22 21"},[s("path",{d:"M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"}),s("path",{d:"M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"})],-1),Vs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 18"},[s("path",{d:"M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"})],-1),Ms=s("span",{class:"inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300"},"Pro",-1),Hs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20"},[s("path",{d:"m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"})],-1),Ss=s("span",{class:"inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300"},"3",-1),Ps=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 18"},[s("path",{d:"M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"})],-1),$s=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 20"},[s("path",{d:"M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"})],-1),Ls=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 18 16"},[s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"})],-1),Is=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20"},[s("path",{d:"M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z"}),s("path",{d:"M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z"}),s("path",{d:"M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z"})],-1),Ts=s("p",{class:"mb-3 text-sm text-blue-800 dark:text-blue-400"}," Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your profile. ",-1),js=s("a",{class:"text-sm text-blue-800 underline font-medium hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300",href:"#"},"Turn new navigation off",-1),Us={__name:"FwbSidebarCtaExample",setup(y){const t=v(!0);function e(){t.value=!t.value}return(E,r)=>(c(),i("div",_s,[l(n(h),{class:"!h-full relative"},{default:a(()=>[l(n(o),null,{icon:a(()=>[Zs]),default:a(()=>[p(" Dashboard ")]),_:1}),l(n(o),null,{icon:a(()=>[Vs]),default:a(()=>[p(" Kanban ")]),suffix:a(()=>[Ms]),_:1}),l(n(o),null,{icon:a(()=>[Hs]),default:a(()=>[p(" Inbox ")]),suffix:a(()=>[Ss]),_:1}),l(n(o),null,{icon:a(()=>[Ps]),default:a(()=>[p(" Users ")]),_:1}),l(n(o),null,{icon:a(()=>[$s]),default:a(()=>[p(" Products ")]),_:1}),l(n(o),null,{icon:a(()=>[Ls]),default:a(()=>[p(" Sign In ")]),_:1}),l(n(o),null,{icon:a(()=>[Is]),default:a(()=>[p(" Sign Up ")]),_:1}),t.value?(c(),m(n(L),{key:0,label:"Beta",onClose:e},{default:a(()=>[Ts,js]),_:1})):x("",!0)]),_:1})]))}},Ns={class:"vp-raw flex flex-col relative"},Ks=s("svg",{class:"w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 22 21"},[s("path",{d:"M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"}),s("path",{d:"M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"})],-1),Gs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 18"},[s("path",{d:"M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"})],-1),Rs=s("span",{class:"inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300"},"Pro",-1),zs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20"},[s("path",{d:"m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"})],-1),Os=s("span",{class:"inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300"},"3",-1),Ys=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 18"},[s("path",{d:"M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"})],-1),Js=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 18 20"},[s("path",{d:"M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"})],-1),Qs=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 18 16"},[s("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"})],-1),Ws=s("svg",{class:"flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20"},[s("path",{d:"M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z"}),s("path",{d:"M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z"}),s("path",{d:"M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z"})],-1),Xs={__name:"FwbSidebarLogoExample",setup(y){return(t,e)=>(c(),i("div",Ns,[l(n(h),{class:"!h-full relative"},{default:a(()=>[l(n(Q),{name:"Flowbite",logo:"https://flowbite.com/docs/images/logo.svg",tag:"router-link"}),l(n(o),null,{icon:a(()=>[Ks]),default:a(()=>[p(" Dashboard ")]),_:1}),l(n(o),null,{icon:a(()=>[Gs]),default:a(()=>[p(" Kanban ")]),suffix:a(()=>[Rs]),_:1}),l(n(o),null,{icon:a(()=>[zs]),default:a(()=>[p(" Inbox ")]),suffix:a(()=>[Os]),_:1}),l(n(o),null,{icon:a(()=>[Ys]),default:a(()=>[p(" Users ")]),_:1}),l(n(o),null,{icon:a(()=>[Js]),default:a(()=>[p(" Products ")]),_:1}),l(n(o),null,{icon:a(()=>[Qs]),default:a(()=>[p(" Sign In ")]),_:1}),l(n(o),null,{icon:a(()=>[Ws]),default:a(()=>[p(" Sign Up ")]),_:1})]),_:1})]))}},sa=d("",5),aa=d("",3),na=d("",2),la=d("",2),pa=d("",2),oa=d("",28),ca=JSON.parse('{"title":"Vue Sidebar - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/sidebar.md","filePath":"components/sidebar.md"}'),ta={name:"components/sidebar.md"},Ea=Object.assign(ta,{setup(y){return(t,e)=>(c(),i("div",null,[sa,l(rs),aa,l(gs),na,l(Ds),la,l(Us),pa,l(Xs),oa]))}});export{ca as __pageData,Ea as default}; diff --git a/docs/.vitepress/dist/assets/components_spinner.md.37ac3cc2.js b/docs/.vitepress/dist/assets/components_spinner.md.37ac3cc2.js new file mode 100644 index 0000000..8678fae --- /dev/null +++ b/docs/.vitepress/dist/assets/components_spinner.md.37ac3cc2.js @@ -0,0 +1,59 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as n}from"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import{o as l,c as o,H as s,l as a,Q as p}from"./chunks/framework.3f630664.js";const r={class:"vp-raw"},E={__name:"FwbSpinnerExample",setup(e){return(t,c)=>(l(),o("div",r,[s(a(n))]))}},i={class:"vp-raw flex items-center gap-2"},y={__name:"FwbSpinnerExampleColor",setup(e){return(t,c)=>(l(),o("div",i,[s(a(n),{color:"blue"}),s(a(n),{color:"gray"}),s(a(n),{color:"green"}),s(a(n),{color:"pink"}),s(a(n),{color:"purple"}),s(a(n),{color:"red"}),s(a(n),{color:"white"}),s(a(n),{color:"yellow"})]))}},d={class:"vp-raw flex items-center gap-2"},u={__name:"FwbSpinnerExampleSize",setup(e){return(t,c)=>(l(),o("div",d,[s(a(n)),s(a(n),{size:"6"}),s(a(n),{size:"8"}),s(a(n),{size:"10"}),s(a(n),{size:"12"})]))}},h=p('

Vue Spinner - Flowbite ​

Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG using the utility classes from Tailwind CSS ​

TIP

Original reference: https://flowbite.com/docs/components/spinner/

The spinner component can be used as a loading indicator which comes in multiple colors, sizes, and styles separately or inside elements such as buttons to improve the user experience whenever data is being fetched from your server.

Basic example ​

',6),_=p(`
vue
<template>
+  <fwb-spinner />
+</template>
+
+<script setup>
+import { FwbSpinner } from 'flowbite-vue'
+</script>
<template>
+  <fwb-spinner />
+</template>
+
+<script setup>
+import { FwbSpinner } from 'flowbite-vue'
+</script>

Prop - size ​

`,2),g=p(`
vue
<template>
+  <fwb-spinner />
+  <fwb-spinner size="6" />
+  <fwb-spinner size="8" />
+  <fwb-spinner size="10" />
+  <fwb-spinner size="12" />
+</template>
+
+<script setup>
+import { FwbSpinner } from 'flowbite-vue'
+</script>
<template>
+  <fwb-spinner />
+  <fwb-spinner size="6" />
+  <fwb-spinner size="8" />
+  <fwb-spinner size="10" />
+  <fwb-spinner size="12" />
+</template>
+
+<script setup>
+import { FwbSpinner } from 'flowbite-vue'
+</script>

Prop - color ​

`,2),b=p(`
vue
<template>
+  <fwb-spinner color="blue" />
+  <fwb-spinner color="gray" />
+  <fwb-spinner color="green" />
+  <fwb-spinner color="pink" />
+  <fwb-spinner color="purple" />
+  <fwb-spinner color="red" />
+  <fwb-spinner color="white" />
+  <fwb-spinner color="yellow" />
+</template>
+
+<script setup>
+import { FwbSpinner } from 'flowbite-vue'
+</script>
<template>
+  <fwb-spinner color="blue" />
+  <fwb-spinner color="gray" />
+  <fwb-spinner color="green" />
+  <fwb-spinner color="pink" />
+  <fwb-spinner color="purple" />
+  <fwb-spinner color="red" />
+  <fwb-spinner color="white" />
+  <fwb-spinner color="yellow" />
+</template>
+
+<script setup>
+import { FwbSpinner } from 'flowbite-vue'
+</script>

API ​

Props ​

NameValuesDefault
colorblue, gray, green, pink, purple, red, white, yellowblue
size0, 0.5, 1, 1.5, 10, 11, 12, 2, 2.5, 3, 4, 5, 6, 7, 8, 94
`,4),q=JSON.parse('{"title":"Vue Spinner - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/spinner.md","filePath":"components/spinner.md"}'),F={name:"components/spinner.md"},v=Object.assign(F,{setup(e){return(t,c)=>(l(),o("div",null,[h,s(E),_,s(u),g,s(y),b]))}});export{q as __pageData,v as default}; diff --git a/docs/.vitepress/dist/assets/components_spinner.md.37ac3cc2.lean.js b/docs/.vitepress/dist/assets/components_spinner.md.37ac3cc2.lean.js new file mode 100644 index 0000000..717c3a8 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_spinner.md.37ac3cc2.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as n}from"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import{o as l,c as o,H as s,l as a,Q as p}from"./chunks/framework.3f630664.js";const r={class:"vp-raw"},E={__name:"FwbSpinnerExample",setup(e){return(t,c)=>(l(),o("div",r,[s(a(n))]))}},i={class:"vp-raw flex items-center gap-2"},y={__name:"FwbSpinnerExampleColor",setup(e){return(t,c)=>(l(),o("div",i,[s(a(n),{color:"blue"}),s(a(n),{color:"gray"}),s(a(n),{color:"green"}),s(a(n),{color:"pink"}),s(a(n),{color:"purple"}),s(a(n),{color:"red"}),s(a(n),{color:"white"}),s(a(n),{color:"yellow"})]))}},d={class:"vp-raw flex items-center gap-2"},u={__name:"FwbSpinnerExampleSize",setup(e){return(t,c)=>(l(),o("div",d,[s(a(n)),s(a(n),{size:"6"}),s(a(n),{size:"8"}),s(a(n),{size:"10"}),s(a(n),{size:"12"})]))}},h=p("",6),_=p("",2),g=p("",2),b=p("",4),q=JSON.parse('{"title":"Vue Spinner - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/spinner.md","filePath":"components/spinner.md"}'),F={name:"components/spinner.md"},v=Object.assign(F,{setup(e){return(t,c)=>(l(),o("div",null,[h,s(E),_,s(u),g,s(y),b]))}});export{q as __pageData,v as default}; diff --git a/docs/.vitepress/dist/assets/components_table.md.a270deef.js b/docs/.vitepress/dist/assets/components_table.md.a270deef.js new file mode 100644 index 0000000..5c2b9a1 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_table.md.a270deef.js @@ -0,0 +1,469 @@ +import{c as F}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d,U as h,o as y,c as b,k as i,r as f,_ as T,M as g,g as C,n as m,l,H as s,w as a,a as n,Q as w}from"./chunks/framework.3f630664.js";import{_ as E}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";const v={class:"relative overflow-x-auto shadow-md sm:rounded-lg"},B={class:"w-full text-sm text-left text-gray-500 dark:text-gray-400"},u=d({__name:"FwbTable",props:{striped:{type:Boolean,default:!1},stripedColumns:{type:Boolean,default:!1},hoverable:{type:Boolean,default:!1}},setup(t){const o=t;return h("hoverable",o.hoverable),h("striped",o.striped),h("stripedColumns",o.stripedColumns),(c,D)=>(y(),b("div",v,[i("table",B,[f(c.$slots,"default")])]))}}),q={};function P(t,o){return y(),b("tbody",null,[f(t.$slots,"default")])}const A=T(q,[["render",P]]),k="px-6 py-4 first:font-medium first:text-gray-900 first:dark:text-white first:whitespace-nowrap last:text-right",$="even:bg-gray-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50";function S(){const t=g("stripedColumns");return{tableCellClasses:C(()=>F(k,{[$]:t}))}}const p=d({__name:"FwbTableCell",setup(t){const{tableCellClasses:o}=S();return(c,D)=>(y(),b("td",{class:m(l(o))},[f(c.$slots,"default")],2))}}),x={},M={class:"text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"};function H(t,o){return y(),b("thead",M,[i("tr",null,[f(t.$slots,"default")])])}const _=T(x,[["render",H]]),L="px-6 py-3 text-xs uppercase",R="even:bg-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50";function V(){const t=g("stripedColumns");return{tableHeadCellClasses:C(()=>F(L,{[R]:t}))}}const e=d({__name:"FwbTableHeadCell",setup(t){const{tableHeadCellClasses:o}=V();return(c,D)=>(y(),b("th",{scope:"col",class:m(l(o))},[f(c.$slots,"default")],2))}}),W="bg-white dark:bg-gray-800 [&:not(:last-child)]:border-b [&:not(:last-child)]:dark:border-gray-700",I="odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700",N="hover:bg-gray-50 dark:hover:bg-gray-600";function z(){const t=g("striped"),o=g("hoverable");return{tableRowClasses:C(()=>F(W,{[N]:o,[I]:t}))}}const r=d({__name:"FwbTableRow",setup(t){const{tableRowClasses:o}=z();return(c,D)=>(y(),b("tr",{class:m(l(o))},[f(c.$slots,"default")],2))}}),O={class:"vp-raw"},j=i("span",{class:"sr-only"},"Edit",-1),J={__name:"FwbTableExample",setup(t){return(o,c)=>(y(),b("div",O,[s(l(u),null,{default:a(()=>[s(l(_),null,{default:a(()=>[s(l(e),null,{default:a(()=>[n("Product name")]),_:1}),s(l(e),null,{default:a(()=>[n("Color")]),_:1}),s(l(e),null,{default:a(()=>[n("Category")]),_:1}),s(l(e),null,{default:a(()=>[n("Price")]),_:1}),s(l(e),null,{default:a(()=>[j]),_:1})]),_:1}),s(l(A),null,{default:a(()=>[s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n('Apple MacBook Pro 17"')]),_:1}),s(l(p),null,{default:a(()=>[n("Sliver")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop")]),_:1}),s(l(p),null,{default:a(()=>[n("$2999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Microsoft Surface Pro")]),_:1}),s(l(p),null,{default:a(()=>[n("White")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop PC")]),_:1}),s(l(p),null,{default:a(()=>[n("$1999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Magic Mouse 2")]),_:1}),s(l(p),null,{default:a(()=>[n("Black")]),_:1}),s(l(p),null,{default:a(()=>[n("Accessories")]),_:1}),s(l(p),null,{default:a(()=>[n("$99")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]))}},Q={class:"vp-raw"},U=i("span",{class:"sr-only"},"Edit",-1),G={__name:"FwbTableExampleHoverable",setup(t){return(o,c)=>(y(),b("div",Q,[s(l(u),{hoverable:""},{default:a(()=>[s(l(_),null,{default:a(()=>[s(l(e),null,{default:a(()=>[n("Product name")]),_:1}),s(l(e),null,{default:a(()=>[n("Color")]),_:1}),s(l(e),null,{default:a(()=>[n("Category")]),_:1}),s(l(e),null,{default:a(()=>[n("Price")]),_:1}),s(l(e),null,{default:a(()=>[U]),_:1})]),_:1}),s(l(A),null,{default:a(()=>[s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n('Apple MacBook Pro 17"')]),_:1}),s(l(p),null,{default:a(()=>[n("Sliver")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop")]),_:1}),s(l(p),null,{default:a(()=>[n("$2999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Microsoft Surface Pro")]),_:1}),s(l(p),null,{default:a(()=>[n("White")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop PC")]),_:1}),s(l(p),null,{default:a(()=>[n("$1999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Magic Mouse 2")]),_:1}),s(l(p),null,{default:a(()=>[n("Black")]),_:1}),s(l(p),null,{default:a(()=>[n("Accessories")]),_:1}),s(l(p),null,{default:a(()=>[n("$99")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]))}},K={class:"vp-raw"},X=i("span",{class:"sr-only"},"Edit",-1),Y={__name:"FwbTableExampleStriped",setup(t){return(o,c)=>(y(),b("div",K,[s(l(u),{striped:""},{default:a(()=>[s(l(_),null,{default:a(()=>[s(l(e),null,{default:a(()=>[n("Product name")]),_:1}),s(l(e),null,{default:a(()=>[n("Color")]),_:1}),s(l(e),null,{default:a(()=>[n("Category")]),_:1}),s(l(e),null,{default:a(()=>[n("Price")]),_:1}),s(l(e),null,{default:a(()=>[X]),_:1})]),_:1}),s(l(A),null,{default:a(()=>[s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n('Apple MacBook Pro 17"')]),_:1}),s(l(p),null,{default:a(()=>[n("Sliver")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop")]),_:1}),s(l(p),null,{default:a(()=>[n("$2999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Microsoft Surface Pro")]),_:1}),s(l(p),null,{default:a(()=>[n("White")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop PC")]),_:1}),s(l(p),null,{default:a(()=>[n("$1999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Magic Mouse 2")]),_:1}),s(l(p),null,{default:a(()=>[n("Black")]),_:1}),s(l(p),null,{default:a(()=>[n("Accessories")]),_:1}),s(l(p),null,{default:a(()=>[n("$99")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]))}},Z={class:"vp-raw"},ss=i("span",{class:"sr-only"},"Edit",-1),ls={__name:"FwbTableExampleStripedColumns",setup(t){return(o,c)=>(y(),b("div",Z,[s(l(u),{"striped-columns":""},{default:a(()=>[s(l(_),null,{default:a(()=>[s(l(e),null,{default:a(()=>[n("Product name")]),_:1}),s(l(e),null,{default:a(()=>[n("Color")]),_:1}),s(l(e),null,{default:a(()=>[n("Category")]),_:1}),s(l(e),null,{default:a(()=>[n("Price")]),_:1}),s(l(e),null,{default:a(()=>[ss]),_:1})]),_:1}),s(l(A),null,{default:a(()=>[s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n('Apple MacBook Pro 17"')]),_:1}),s(l(p),null,{default:a(()=>[n("Sliver")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop")]),_:1}),s(l(p),null,{default:a(()=>[n("$2999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Microsoft Surface Pro")]),_:1}),s(l(p),null,{default:a(()=>[n("White")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop PC")]),_:1}),s(l(p),null,{default:a(()=>[n("$1999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Magic Mouse 2")]),_:1}),s(l(p),null,{default:a(()=>[n("Black")]),_:1}),s(l(p),null,{default:a(()=>[n("Accessories")]),_:1}),s(l(p),null,{default:a(()=>[n("$99")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]))}},as=w('

Vue Table - Flowbite ​

Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line ​

TIP

Original reference: https://flowbite.com/docs/components/tables/

Basic example ​

',5),ns=w(`
vue
<template>
+  <fwb-table>
+    <fwb-table-head>
+      <fwb-table-head-cell>Product name</fwb-table-head-cell>
+      <fwb-table-head-cell>Color</fwb-table-head-cell>
+      <fwb-table-head-cell>Category</fwb-table-head-cell>
+      <fwb-table-head-cell>Price</fwb-table-head-cell>
+      <fwb-table-head-cell>
+        <span class="sr-only">Edit</span>
+      </fwb-table-head-cell>
+    </fwb-table-head>
+    <fwb-table-body>
+      <fwb-table-row>
+        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
+        <fwb-table-cell>Sliver</fwb-table-cell>
+        <fwb-table-cell>Laptop</fwb-table-cell>
+        <fwb-table-cell>$2999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
+        <fwb-table-cell>White</fwb-table-cell>
+        <fwb-table-cell>Laptop PC</fwb-table-cell>
+        <fwb-table-cell>$1999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
+        <fwb-table-cell>Black</fwb-table-cell>
+        <fwb-table-cell>Accessories</fwb-table-cell>
+        <fwb-table-cell>$99</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+    </fwb-table-body>
+  </fwb-table>
+</template>
+
+<script setup>
+import {
+  FwbA,
+  FwbTable,
+  FwbTableBody,
+  FwbTableCell,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableRow,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-table>
+    <fwb-table-head>
+      <fwb-table-head-cell>Product name</fwb-table-head-cell>
+      <fwb-table-head-cell>Color</fwb-table-head-cell>
+      <fwb-table-head-cell>Category</fwb-table-head-cell>
+      <fwb-table-head-cell>Price</fwb-table-head-cell>
+      <fwb-table-head-cell>
+        <span class="sr-only">Edit</span>
+      </fwb-table-head-cell>
+    </fwb-table-head>
+    <fwb-table-body>
+      <fwb-table-row>
+        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
+        <fwb-table-cell>Sliver</fwb-table-cell>
+        <fwb-table-cell>Laptop</fwb-table-cell>
+        <fwb-table-cell>$2999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
+        <fwb-table-cell>White</fwb-table-cell>
+        <fwb-table-cell>Laptop PC</fwb-table-cell>
+        <fwb-table-cell>$1999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
+        <fwb-table-cell>Black</fwb-table-cell>
+        <fwb-table-cell>Accessories</fwb-table-cell>
+        <fwb-table-cell>$99</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+    </fwb-table-body>
+  </fwb-table>
+</template>
+
+<script setup>
+import {
+  FwbA,
+  FwbTable,
+  FwbTableBody,
+  FwbTableCell,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableRow,
+} from 'flowbite-vue'
+</script>

Striped example ​

`,2),ps=w(`
vue
<template>
+  <fwb-table striped>
+    <fwb-table-head>
+      <fwb-table-head-cell>Product name</fwb-table-head-cell>
+      <fwb-table-head-cell>Color</fwb-table-head-cell>
+      <fwb-table-head-cell>Category</fwb-table-head-cell>
+      <fwb-table-head-cell>Price</fwb-table-head-cell>
+      <fwb-table-head-cell>
+        <span class="sr-only">Edit</span>
+      </fwb-table-head-cell>
+    </fwb-table-head>
+    <fwb-table-body>
+      <fwb-table-row>
+        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
+        <fwb-table-cell>Sliver</fwb-table-cell>
+        <fwb-table-cell>Laptop</fwb-table-cell>
+        <fwb-table-cell>$2999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
+        <fwb-table-cell>White</fwb-table-cell>
+        <fwb-table-cell>Laptop PC</fwb-table-cell>
+        <fwb-table-cell>$1999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
+        <fwb-table-cell>Black</fwb-table-cell>
+        <fwb-table-cell>Accessories</fwb-table-cell>
+        <fwb-table-cell>$99</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+    </fwb-table-body>
+  </fwb-table>
+</template>
+
+<script setup>
+import {
+  FwbA,
+  FwbTable,
+  FwbTableBody,
+  FwbTableCell,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableRow,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-table striped>
+    <fwb-table-head>
+      <fwb-table-head-cell>Product name</fwb-table-head-cell>
+      <fwb-table-head-cell>Color</fwb-table-head-cell>
+      <fwb-table-head-cell>Category</fwb-table-head-cell>
+      <fwb-table-head-cell>Price</fwb-table-head-cell>
+      <fwb-table-head-cell>
+        <span class="sr-only">Edit</span>
+      </fwb-table-head-cell>
+    </fwb-table-head>
+    <fwb-table-body>
+      <fwb-table-row>
+        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
+        <fwb-table-cell>Sliver</fwb-table-cell>
+        <fwb-table-cell>Laptop</fwb-table-cell>
+        <fwb-table-cell>$2999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
+        <fwb-table-cell>White</fwb-table-cell>
+        <fwb-table-cell>Laptop PC</fwb-table-cell>
+        <fwb-table-cell>$1999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
+        <fwb-table-cell>Black</fwb-table-cell>
+        <fwb-table-cell>Accessories</fwb-table-cell>
+        <fwb-table-cell>$99</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+    </fwb-table-body>
+  </fwb-table>
+</template>
+
+<script setup>
+import {
+  FwbA,
+  FwbTable,
+  FwbTableBody,
+  FwbTableCell,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableRow,
+} from 'flowbite-vue'
+</script>

Striped columns example ​

`,2),os=w(`
vue
<template>
+  <fwb-table striped-columns>
+    <fwb-table-head>
+      <fwb-table-head-cell>Product name</fwb-table-head-cell>
+      <fwb-table-head-cell>Color</fwb-table-head-cell>
+      <fwb-table-head-cell>Category</fwb-table-head-cell>
+      <fwb-table-head-cell>Price</fwb-table-head-cell>
+      <fwb-table-head-cell><span class="sr-only">Edit</span></fwb-table-head-cell>
+    </fwb-table-head>
+    <fwb-table-body>
+      <fwb-table-row>
+        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
+        <fwb-table-cell>Sliver</fwb-table-cell>
+        <fwb-table-cell>Laptop</fwb-table-cell>
+        <fwb-table-cell>$2999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
+        <fwb-table-cell>White</fwb-table-cell>
+        <fwb-table-cell>Laptop PC</fwb-table-cell>
+        <fwb-table-cell>$1999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
+        <fwb-table-cell>Black</fwb-table-cell>
+        <fwb-table-cell>Accessories</fwb-table-cell>
+        <fwb-table-cell>$99</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+    </fwb-table-body>
+  </fwb-table>
+</template>
+
+<script setup>
+import {
+  FwbA,
+  FwbTable,
+  FwbTableBody,
+  FwbTableCell,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableRow,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-table striped-columns>
+    <fwb-table-head>
+      <fwb-table-head-cell>Product name</fwb-table-head-cell>
+      <fwb-table-head-cell>Color</fwb-table-head-cell>
+      <fwb-table-head-cell>Category</fwb-table-head-cell>
+      <fwb-table-head-cell>Price</fwb-table-head-cell>
+      <fwb-table-head-cell><span class="sr-only">Edit</span></fwb-table-head-cell>
+    </fwb-table-head>
+    <fwb-table-body>
+      <fwb-table-row>
+        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
+        <fwb-table-cell>Sliver</fwb-table-cell>
+        <fwb-table-cell>Laptop</fwb-table-cell>
+        <fwb-table-cell>$2999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
+        <fwb-table-cell>White</fwb-table-cell>
+        <fwb-table-cell>Laptop PC</fwb-table-cell>
+        <fwb-table-cell>$1999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
+        <fwb-table-cell>Black</fwb-table-cell>
+        <fwb-table-cell>Accessories</fwb-table-cell>
+        <fwb-table-cell>$99</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+    </fwb-table-body>
+  </fwb-table>
+</template>
+
+<script setup>
+import {
+  FwbA,
+  FwbTable,
+  FwbTableBody,
+  FwbTableCell,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableRow,
+} from 'flowbite-vue'
+</script>

Hoverable example ​

`,2),es=w(`
vue
<template>
+  <fwb-table hoverable>
+    <fwb-table-head>
+      <fwb-table-head-cell>Product name</fwb-table-head-cell>
+      <fwb-table-head-cell>Color</fwb-table-head-cell>
+      <fwb-table-head-cell>Category</fwb-table-head-cell>
+      <fwb-table-head-cell>Price</fwb-table-head-cell>
+      <fwb-table-head-cell>
+        <span class="sr-only">Edit</span>
+      </fwb-table-head-cell>
+    </fwb-table-head>
+    <fwb-table-body>
+      <fwb-table-row>
+        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
+        <fwb-table-cell>Sliver</fwb-table-cell>
+        <fwb-table-cell>Laptop</fwb-table-cell>
+        <fwb-table-cell>$2999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
+        <fwb-table-cell>White</fwb-table-cell>
+        <fwb-table-cell>Laptop PC</fwb-table-cell>
+        <fwb-table-cell>$1999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
+        <fwb-table-cell>Black</fwb-table-cell>
+        <fwb-table-cell>Accessories</fwb-table-cell>
+        <fwb-table-cell>$99</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+    </fwb-table-body>
+  </fwb-table>
+</template>
+
+<script setup>
+import {
+  FwbA,
+  FwbTable,
+  FwbTableBody,
+  FwbTableCell,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableRow,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-table hoverable>
+    <fwb-table-head>
+      <fwb-table-head-cell>Product name</fwb-table-head-cell>
+      <fwb-table-head-cell>Color</fwb-table-head-cell>
+      <fwb-table-head-cell>Category</fwb-table-head-cell>
+      <fwb-table-head-cell>Price</fwb-table-head-cell>
+      <fwb-table-head-cell>
+        <span class="sr-only">Edit</span>
+      </fwb-table-head-cell>
+    </fwb-table-head>
+    <fwb-table-body>
+      <fwb-table-row>
+        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
+        <fwb-table-cell>Sliver</fwb-table-cell>
+        <fwb-table-cell>Laptop</fwb-table-cell>
+        <fwb-table-cell>$2999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
+        <fwb-table-cell>White</fwb-table-cell>
+        <fwb-table-cell>Laptop PC</fwb-table-cell>
+        <fwb-table-cell>$1999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
+        <fwb-table-cell>Black</fwb-table-cell>
+        <fwb-table-cell>Accessories</fwb-table-cell>
+        <fwb-table-cell>$99</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+    </fwb-table-body>
+  </fwb-table>
+</template>
+
+<script setup>
+import {
+  FwbA,
+  FwbTable,
+  FwbTableBody,
+  FwbTableCell,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableRow,
+} from 'flowbite-vue'
+</script>
`,1),ys=JSON.parse('{"title":"Vue Table - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/table.md","filePath":"components/table.md"}'),ts={name:"components/table.md"},bs=Object.assign(ts,{setup(t){return(o,c)=>(y(),b("div",null,[as,s(J),ns,s(Y),ps,s(ls),os,s(G),es]))}});export{ys as __pageData,bs as default}; diff --git a/docs/.vitepress/dist/assets/components_table.md.a270deef.lean.js b/docs/.vitepress/dist/assets/components_table.md.a270deef.lean.js new file mode 100644 index 0000000..a0de7fc --- /dev/null +++ b/docs/.vitepress/dist/assets/components_table.md.a270deef.lean.js @@ -0,0 +1 @@ +import{c as F}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d,U as h,o as y,c as b,k as i,r as f,_ as T,M as g,g as C,n as m,l,H as s,w as a,a as n,Q as w}from"./chunks/framework.3f630664.js";import{_ as E}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";const v={class:"relative overflow-x-auto shadow-md sm:rounded-lg"},B={class:"w-full text-sm text-left text-gray-500 dark:text-gray-400"},u=d({__name:"FwbTable",props:{striped:{type:Boolean,default:!1},stripedColumns:{type:Boolean,default:!1},hoverable:{type:Boolean,default:!1}},setup(t){const o=t;return h("hoverable",o.hoverable),h("striped",o.striped),h("stripedColumns",o.stripedColumns),(c,D)=>(y(),b("div",v,[i("table",B,[f(c.$slots,"default")])]))}}),q={};function P(t,o){return y(),b("tbody",null,[f(t.$slots,"default")])}const A=T(q,[["render",P]]),k="px-6 py-4 first:font-medium first:text-gray-900 first:dark:text-white first:whitespace-nowrap last:text-right",$="even:bg-gray-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50";function S(){const t=g("stripedColumns");return{tableCellClasses:C(()=>F(k,{[$]:t}))}}const p=d({__name:"FwbTableCell",setup(t){const{tableCellClasses:o}=S();return(c,D)=>(y(),b("td",{class:m(l(o))},[f(c.$slots,"default")],2))}}),x={},M={class:"text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"};function H(t,o){return y(),b("thead",M,[i("tr",null,[f(t.$slots,"default")])])}const _=T(x,[["render",H]]),L="px-6 py-3 text-xs uppercase",R="even:bg-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50";function V(){const t=g("stripedColumns");return{tableHeadCellClasses:C(()=>F(L,{[R]:t}))}}const e=d({__name:"FwbTableHeadCell",setup(t){const{tableHeadCellClasses:o}=V();return(c,D)=>(y(),b("th",{scope:"col",class:m(l(o))},[f(c.$slots,"default")],2))}}),W="bg-white dark:bg-gray-800 [&:not(:last-child)]:border-b [&:not(:last-child)]:dark:border-gray-700",I="odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700",N="hover:bg-gray-50 dark:hover:bg-gray-600";function z(){const t=g("striped"),o=g("hoverable");return{tableRowClasses:C(()=>F(W,{[N]:o,[I]:t}))}}const r=d({__name:"FwbTableRow",setup(t){const{tableRowClasses:o}=z();return(c,D)=>(y(),b("tr",{class:m(l(o))},[f(c.$slots,"default")],2))}}),O={class:"vp-raw"},j=i("span",{class:"sr-only"},"Edit",-1),J={__name:"FwbTableExample",setup(t){return(o,c)=>(y(),b("div",O,[s(l(u),null,{default:a(()=>[s(l(_),null,{default:a(()=>[s(l(e),null,{default:a(()=>[n("Product name")]),_:1}),s(l(e),null,{default:a(()=>[n("Color")]),_:1}),s(l(e),null,{default:a(()=>[n("Category")]),_:1}),s(l(e),null,{default:a(()=>[n("Price")]),_:1}),s(l(e),null,{default:a(()=>[j]),_:1})]),_:1}),s(l(A),null,{default:a(()=>[s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n('Apple MacBook Pro 17"')]),_:1}),s(l(p),null,{default:a(()=>[n("Sliver")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop")]),_:1}),s(l(p),null,{default:a(()=>[n("$2999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Microsoft Surface Pro")]),_:1}),s(l(p),null,{default:a(()=>[n("White")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop PC")]),_:1}),s(l(p),null,{default:a(()=>[n("$1999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Magic Mouse 2")]),_:1}),s(l(p),null,{default:a(()=>[n("Black")]),_:1}),s(l(p),null,{default:a(()=>[n("Accessories")]),_:1}),s(l(p),null,{default:a(()=>[n("$99")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]))}},Q={class:"vp-raw"},U=i("span",{class:"sr-only"},"Edit",-1),G={__name:"FwbTableExampleHoverable",setup(t){return(o,c)=>(y(),b("div",Q,[s(l(u),{hoverable:""},{default:a(()=>[s(l(_),null,{default:a(()=>[s(l(e),null,{default:a(()=>[n("Product name")]),_:1}),s(l(e),null,{default:a(()=>[n("Color")]),_:1}),s(l(e),null,{default:a(()=>[n("Category")]),_:1}),s(l(e),null,{default:a(()=>[n("Price")]),_:1}),s(l(e),null,{default:a(()=>[U]),_:1})]),_:1}),s(l(A),null,{default:a(()=>[s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n('Apple MacBook Pro 17"')]),_:1}),s(l(p),null,{default:a(()=>[n("Sliver")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop")]),_:1}),s(l(p),null,{default:a(()=>[n("$2999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Microsoft Surface Pro")]),_:1}),s(l(p),null,{default:a(()=>[n("White")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop PC")]),_:1}),s(l(p),null,{default:a(()=>[n("$1999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Magic Mouse 2")]),_:1}),s(l(p),null,{default:a(()=>[n("Black")]),_:1}),s(l(p),null,{default:a(()=>[n("Accessories")]),_:1}),s(l(p),null,{default:a(()=>[n("$99")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]))}},K={class:"vp-raw"},X=i("span",{class:"sr-only"},"Edit",-1),Y={__name:"FwbTableExampleStriped",setup(t){return(o,c)=>(y(),b("div",K,[s(l(u),{striped:""},{default:a(()=>[s(l(_),null,{default:a(()=>[s(l(e),null,{default:a(()=>[n("Product name")]),_:1}),s(l(e),null,{default:a(()=>[n("Color")]),_:1}),s(l(e),null,{default:a(()=>[n("Category")]),_:1}),s(l(e),null,{default:a(()=>[n("Price")]),_:1}),s(l(e),null,{default:a(()=>[X]),_:1})]),_:1}),s(l(A),null,{default:a(()=>[s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n('Apple MacBook Pro 17"')]),_:1}),s(l(p),null,{default:a(()=>[n("Sliver")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop")]),_:1}),s(l(p),null,{default:a(()=>[n("$2999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Microsoft Surface Pro")]),_:1}),s(l(p),null,{default:a(()=>[n("White")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop PC")]),_:1}),s(l(p),null,{default:a(()=>[n("$1999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Magic Mouse 2")]),_:1}),s(l(p),null,{default:a(()=>[n("Black")]),_:1}),s(l(p),null,{default:a(()=>[n("Accessories")]),_:1}),s(l(p),null,{default:a(()=>[n("$99")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]))}},Z={class:"vp-raw"},ss=i("span",{class:"sr-only"},"Edit",-1),ls={__name:"FwbTableExampleStripedColumns",setup(t){return(o,c)=>(y(),b("div",Z,[s(l(u),{"striped-columns":""},{default:a(()=>[s(l(_),null,{default:a(()=>[s(l(e),null,{default:a(()=>[n("Product name")]),_:1}),s(l(e),null,{default:a(()=>[n("Color")]),_:1}),s(l(e),null,{default:a(()=>[n("Category")]),_:1}),s(l(e),null,{default:a(()=>[n("Price")]),_:1}),s(l(e),null,{default:a(()=>[ss]),_:1})]),_:1}),s(l(A),null,{default:a(()=>[s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n('Apple MacBook Pro 17"')]),_:1}),s(l(p),null,{default:a(()=>[n("Sliver")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop")]),_:1}),s(l(p),null,{default:a(()=>[n("$2999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Microsoft Surface Pro")]),_:1}),s(l(p),null,{default:a(()=>[n("White")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop PC")]),_:1}),s(l(p),null,{default:a(()=>[n("$1999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Magic Mouse 2")]),_:1}),s(l(p),null,{default:a(()=>[n("Black")]),_:1}),s(l(p),null,{default:a(()=>[n("Accessories")]),_:1}),s(l(p),null,{default:a(()=>[n("$99")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]))}},as=w("",5),ns=w("",2),ps=w("",2),os=w("",2),es=w("",1),ys=JSON.parse('{"title":"Vue Table - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/table.md","filePath":"components/table.md"}'),ts={name:"components/table.md"},bs=Object.assign(ts,{setup(t){return(o,c)=>(y(),b("div",null,[as,s(J),ns,s(Y),ps,s(ls),os,s(G),es]))}});export{ys as __pageData,bs as default}; diff --git a/docs/.vitepress/dist/assets/components_tabs.md.b0c6e412.js b/docs/.vitepress/dist/assets/components_tabs.md.b0c6e412.js new file mode 100644 index 0000000..729b5b4 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_tabs.md.b0c6e412.js @@ -0,0 +1,227 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{a as l,_ as u}from"./chunks/FwbTabs.vue_vue_type_script_setup_true_lang.ebf7e19d.js";import{h as d,o as c,c as E,H as s,w as a,l as n,a as o,Q as i}from"./chunks/framework.3f630664.js";import"./chunks/flatten.a0535777.js";import"./chunks/simplifyTailwindClasses.275301d3.js";import"./chunks/useFlowbiteThemable.013ea29e.js";const F={class:"vp-raw"},b={__name:"FwbTabsExample",setup(y){const p=d("first");return(r,t)=>(c(),E("div",F,[s(n(u),{modelValue:p.value,"onUpdate:modelValue":t[0]||(t[0]=e=>p.value=e),class:"p-5"},{default:a(()=>[s(n(l),{name:"first",title:"First"},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto asperiores odio minima temporibus eligendi deleniti vitae illo quo, fuga nobis saepe error totam inventore ullam accusamus, deserunt unde est. Atque. ")]),_:1}),s(n(l),{name:"second",title:"Second"},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos numquam vero debitis, ex nesciunt illum distinctio, recusandae officiis nisi optio ut alias voluptatibus sint? Delectus dolores consequatur fugit dolore tempora? ")]),_:1}),s(n(l),{name:"third",title:"Third"},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis facilis soluta consequuntur. Distinctio hic perspiciatis sunt dignissimos non nemo aspernatur eum velit sed accusantium, asperiores maiores laborum facere quibusdam placeat? ")]),_:1}),s(n(l),{name:"fourth",title:"Fourth",disabled:""},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime natus tenetur officiis aspernatur, ipsam dolorem rerum doloribus? Maxime, aliquid accusamus ad eaque odit dolore doloremque blanditiis natus magnam possimus labore! ")]),_:1})]),_:1},8,["modelValue"])]))}},f={class:"vp-raw"},q={__name:"FwbTabsExampleInteraction",setup(y){const p=d("first"),r=()=>{console.log("Click!")};return(t,e)=>(c(),E("div",f,[s(n(u),{modelValue:p.value,"onUpdate:modelValue":e[0]||(e[0]=m=>p.value=m),class:"p-5","onClick:pane":r},{default:a(()=>[s(n(l),{name:"first",title:"First"},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto asperiores odio minima temporibus eligendi deleniti vitae illo quo, fuga nobis saepe error totam inventore ullam accusamus, deserunt unde est. Atque. ")]),_:1}),s(n(l),{name:"second",title:"Second"},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos numquam vero debitis, ex nesciunt illum distinctio, recusandae officiis nisi optio ut alias voluptatibus sint? Delectus dolores consequatur fugit dolore tempora? ")]),_:1}),s(n(l),{name:"third",title:"Third"},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis facilis soluta consequuntur. Distinctio hic perspiciatis sunt dignissimos non nemo aspernatur eum velit sed accusantium, asperiores maiores laborum facere quibusdam placeat? ")]),_:1}),s(n(l),{name:"fourth",title:"Fourth",disabled:""},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime natus tenetur officiis aspernatur, ipsam dolorem rerum doloribus? Maxime, aliquid accusamus ad eaque odit dolore doloremque blanditiis natus magnam possimus labore! ")]),_:1})]),_:1},8,["modelValue"])]))}},g={class:"vp-raw"},h={__name:"FwbTabsExampleDirective",setup(y){const p=d("first");return(r,t)=>(c(),E("div",g,[s(n(u),{modelValue:p.value,"onUpdate:modelValue":t[0]||(t[0]=e=>p.value=e),class:"p-5",directive:"show"},{default:a(()=>[s(n(l),{name:"first",title:"First"},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto asperiores odio minima temporibus eligendi deleniti vitae illo quo, fuga nobis saepe error totam inventore ullam accusamus, deserunt unde est. Atque. ")]),_:1}),s(n(l),{name:"second",title:"Second"},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos numquam vero debitis, ex nesciunt illum distinctio, recusandae officiis nisi optio ut alias voluptatibus sint? Delectus dolores consequatur fugit dolore tempora? ")]),_:1}),s(n(l),{name:"third",title:"Third"},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis facilis soluta consequuntur. Distinctio hic perspiciatis sunt dignissimos non nemo aspernatur eum velit sed accusantium, asperiores maiores laborum facere quibusdam placeat? ")]),_:1}),s(n(l),{name:"fourth",title:"Fourth",disabled:""},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime natus tenetur officiis aspernatur, ipsam dolorem rerum doloribus? Maxime, aliquid accusamus ad eaque odit dolore doloremque blanditiis natus magnam possimus labore! ")]),_:1})]),_:1},8,["modelValue"])]))}},v={class:"vp-raw"},C={__name:"FwbTabsExamplePills",setup(y){const p=d("first");return(r,t)=>(c(),E("div",v,[s(n(u),{modelValue:p.value,"onUpdate:modelValue":t[0]||(t[0]=e=>p.value=e),variant:"pills",class:"p-5"},{default:a(()=>[s(n(l),{name:"first",title:"First"},{default:a(()=>[o(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae? ")]),_:1}),s(n(l),{name:"second",title:"Second"},{default:a(()=>[o(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta. ")]),_:1}),s(n(l),{name:"third",title:"Third"},{default:a(()=>[o(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem. ")]),_:1}),s(n(l),{name:"fourth",title:"Fourth",disabled:""},{default:a(()=>[o(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem. ")]),_:1})]),_:1},8,["modelValue"])]))}},_={class:"vp-raw"},w={__name:"FwbTabsExampleUnderline",setup(y){const p=d("first");return(r,t)=>(c(),E("div",_,[s(n(u),{modelValue:p.value,"onUpdate:modelValue":t[0]||(t[0]=e=>p.value=e),variant:"underline",class:"p-5"},{default:a(()=>[s(n(l),{name:"first",title:"First"},{default:a(()=>[o(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae? ")]),_:1}),s(n(l),{name:"second",title:"Second"},{default:a(()=>[o(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta. ")]),_:1}),s(n(l),{name:"third",title:"Third"},{default:a(()=>[o(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem. ")]),_:1}),s(n(l),{name:"fourth",title:"Fourth",disabled:""},{default:a(()=>[o(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem. ")]),_:1})]),_:1},8,["modelValue"])]))}},B=i('

Vue Tabs - Flowbite ​

Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container ​

TIP

Original reference: https://flowbite.com/docs/components/tabs/

The tabs component can be used either as an extra navigational hierarchy complementing the main navbar or you can also use it to change content inside a container just below the tabs using the data attributes from Flowbite.

Prop - variant (default) ​

',6),A=i(`
vue
<template>
+  <fwb-tabs v-model="activeTab" class="p-5">
+    <fwb-tab name="first" title="First">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="second" title="Second">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="third" title="Third">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="fourth" title="Fourth" disabled>
+      Lorem ipsum dolor...
+    </fwb-tab>
+  </fwb-tabs>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbTab, FwbTabs } from 'flowbite-vue'
+
+const activeTab = ref('first')
+</script>
<template>
+  <fwb-tabs v-model="activeTab" class="p-5">
+    <fwb-tab name="first" title="First">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="second" title="Second">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="third" title="Third">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="fourth" title="Fourth" disabled>
+      Lorem ipsum dolor...
+    </fwb-tab>
+  </fwb-tabs>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbTab, FwbTabs } from 'flowbite-vue'
+
+const activeTab = ref('first')
+</script>

Prop - variant (underline) ​

`,2),D=i(`
vue
<template>
+  <fwb-tabs v-model="activeTab" variant="underline" class="p-5">
+    <fwb-tab name="first" title="First">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="second" title="Second">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="third" title="Third">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="fourth" title="Fourth" disabled>
+      Lorem ipsum dolor...
+    </fwb-tab>
+  </fwb-tabs>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbTab, FwbTabs } from 'flowbite-vue'
+
+const activeTab = ref('first')
+</script>
<template>
+  <fwb-tabs v-model="activeTab" variant="underline" class="p-5">
+    <fwb-tab name="first" title="First">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="second" title="Second">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="third" title="Third">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="fourth" title="Fourth" disabled>
+      Lorem ipsum dolor...
+    </fwb-tab>
+  </fwb-tabs>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbTab, FwbTabs } from 'flowbite-vue'
+
+const activeTab = ref('first')
+</script>

Prop - variant (pills) ​

`,2),T=i(`
vue
<template>
+  <fwb-tabs v-model="activeTab" variant="pills" class="p-5">
+    <fwb-tab name="first" title="First" >
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="second" title="Second">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="third" title="Third">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="fourth" title="Fourth" disabled>
+      Lorem ipsum dolor...
+    </fwb-tab>
+  </fwb-tabs>
+ </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbTab, FwbTabs } from 'flowbite-vue'
+
+const activeTab = ref('first')
+</script>
<template>
+  <fwb-tabs v-model="activeTab" variant="pills" class="p-5">
+    <fwb-tab name="first" title="First" >
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="second" title="Second">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="third" title="Third">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="fourth" title="Fourth" disabled>
+      Lorem ipsum dolor...
+    </fwb-tab>
+  </fwb-tabs>
+ </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbTab, FwbTabs } from 'flowbite-vue'
+
+const activeTab = ref('first')
+</script>

Prop - directive ​

Use this props if you want to control which directive to use for rendering every tab content

`,3),L=i(`
vue
<template>
+  <fwb-tabs v-model="activeTab" directive="show" class="p-5">
+    <fwb-tab name="first" title="First">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="second" title="Second">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="third" title="Third">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="fourth" title="Fourth" disabled>
+      Lorem ipsum dolor...
+    </fwb-tab>
+  </fwb-tabs>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbTab, FwbTabs } from 'flowbite-vue'
+
+const activeTab = ref('first')
+</script>
<template>
+  <fwb-tabs v-model="activeTab" directive="show" class="p-5">
+    <fwb-tab name="first" title="First">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="second" title="Second">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="third" title="Third">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="fourth" title="Fourth" disabled>
+      Lorem ipsum dolor...
+    </fwb-tab>
+  </fwb-tabs>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbTab, FwbTabs } from 'flowbite-vue'
+
+const activeTab = ref('first')
+</script>

Tab pane interaction ​

You can add @click:pane to Tabs component to intercept click on tab pane.

`,3),k=i(`
vue
<template>
+  <fwb-tabs @click:pane="handlePaneClick" v-model="activeTab" class="p-5">
+    <fwb-tab name="first" title="First">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="second" title="Second">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="third" title="Third">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="fourth" title="Fourth" disabled>
+      Lorem ipsum dolor...
+    </fwb-tab>
+  </fwb-tabs>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbTab, FwbTabs } from 'flowbite-vue'
+
+const activeTab = ref('first')
+
+const handlePaneClick = () => { console.log('Click!') }
+</script>
<template>
+  <fwb-tabs @click:pane="handlePaneClick" v-model="activeTab" class="p-5">
+    <fwb-tab name="first" title="First">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="second" title="Second">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="third" title="Third">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="fourth" title="Fourth" disabled>
+      Lorem ipsum dolor...
+    </fwb-tab>
+  </fwb-tabs>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbTab, FwbTabs } from 'flowbite-vue'
+
+const activeTab = ref('first')
+
+const handlePaneClick = () => { console.log('Click!') }
+</script>

API ​

Props ​

NameValuesDefault
directiveif, showif
modelValuestring''
variantdefault, underline, pilldefault
`,4),U=JSON.parse('{"title":"Vue Tabs - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/tabs.md","filePath":"components/tabs.md"}'),P={name:"components/tabs.md"},M=Object.assign(P,{setup(y){return(p,r)=>(c(),E("div",null,[B,s(b),A,s(w),D,s(C),T,s(h),L,s(q),k]))}});export{U as __pageData,M as default}; diff --git a/docs/.vitepress/dist/assets/components_tabs.md.b0c6e412.lean.js b/docs/.vitepress/dist/assets/components_tabs.md.b0c6e412.lean.js new file mode 100644 index 0000000..5fa168c --- /dev/null +++ b/docs/.vitepress/dist/assets/components_tabs.md.b0c6e412.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{a as l,_ as u}from"./chunks/FwbTabs.vue_vue_type_script_setup_true_lang.ebf7e19d.js";import{h as d,o as c,c as E,H as s,w as a,l as n,a as o,Q as i}from"./chunks/framework.3f630664.js";import"./chunks/flatten.a0535777.js";import"./chunks/simplifyTailwindClasses.275301d3.js";import"./chunks/useFlowbiteThemable.013ea29e.js";const F={class:"vp-raw"},b={__name:"FwbTabsExample",setup(y){const p=d("first");return(r,t)=>(c(),E("div",F,[s(n(u),{modelValue:p.value,"onUpdate:modelValue":t[0]||(t[0]=e=>p.value=e),class:"p-5"},{default:a(()=>[s(n(l),{name:"first",title:"First"},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto asperiores odio minima temporibus eligendi deleniti vitae illo quo, fuga nobis saepe error totam inventore ullam accusamus, deserunt unde est. Atque. ")]),_:1}),s(n(l),{name:"second",title:"Second"},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos numquam vero debitis, ex nesciunt illum distinctio, recusandae officiis nisi optio ut alias voluptatibus sint? Delectus dolores consequatur fugit dolore tempora? ")]),_:1}),s(n(l),{name:"third",title:"Third"},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis facilis soluta consequuntur. Distinctio hic perspiciatis sunt dignissimos non nemo aspernatur eum velit sed accusantium, asperiores maiores laborum facere quibusdam placeat? ")]),_:1}),s(n(l),{name:"fourth",title:"Fourth",disabled:""},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime natus tenetur officiis aspernatur, ipsam dolorem rerum doloribus? Maxime, aliquid accusamus ad eaque odit dolore doloremque blanditiis natus magnam possimus labore! ")]),_:1})]),_:1},8,["modelValue"])]))}},f={class:"vp-raw"},q={__name:"FwbTabsExampleInteraction",setup(y){const p=d("first"),r=()=>{console.log("Click!")};return(t,e)=>(c(),E("div",f,[s(n(u),{modelValue:p.value,"onUpdate:modelValue":e[0]||(e[0]=m=>p.value=m),class:"p-5","onClick:pane":r},{default:a(()=>[s(n(l),{name:"first",title:"First"},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto asperiores odio minima temporibus eligendi deleniti vitae illo quo, fuga nobis saepe error totam inventore ullam accusamus, deserunt unde est. Atque. ")]),_:1}),s(n(l),{name:"second",title:"Second"},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos numquam vero debitis, ex nesciunt illum distinctio, recusandae officiis nisi optio ut alias voluptatibus sint? Delectus dolores consequatur fugit dolore tempora? ")]),_:1}),s(n(l),{name:"third",title:"Third"},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis facilis soluta consequuntur. Distinctio hic perspiciatis sunt dignissimos non nemo aspernatur eum velit sed accusantium, asperiores maiores laborum facere quibusdam placeat? ")]),_:1}),s(n(l),{name:"fourth",title:"Fourth",disabled:""},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime natus tenetur officiis aspernatur, ipsam dolorem rerum doloribus? Maxime, aliquid accusamus ad eaque odit dolore doloremque blanditiis natus magnam possimus labore! ")]),_:1})]),_:1},8,["modelValue"])]))}},g={class:"vp-raw"},h={__name:"FwbTabsExampleDirective",setup(y){const p=d("first");return(r,t)=>(c(),E("div",g,[s(n(u),{modelValue:p.value,"onUpdate:modelValue":t[0]||(t[0]=e=>p.value=e),class:"p-5",directive:"show"},{default:a(()=>[s(n(l),{name:"first",title:"First"},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto asperiores odio minima temporibus eligendi deleniti vitae illo quo, fuga nobis saepe error totam inventore ullam accusamus, deserunt unde est. Atque. ")]),_:1}),s(n(l),{name:"second",title:"Second"},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos numquam vero debitis, ex nesciunt illum distinctio, recusandae officiis nisi optio ut alias voluptatibus sint? Delectus dolores consequatur fugit dolore tempora? ")]),_:1}),s(n(l),{name:"third",title:"Third"},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis facilis soluta consequuntur. Distinctio hic perspiciatis sunt dignissimos non nemo aspernatur eum velit sed accusantium, asperiores maiores laborum facere quibusdam placeat? ")]),_:1}),s(n(l),{name:"fourth",title:"Fourth",disabled:""},{default:a(()=>[o(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime natus tenetur officiis aspernatur, ipsam dolorem rerum doloribus? Maxime, aliquid accusamus ad eaque odit dolore doloremque blanditiis natus magnam possimus labore! ")]),_:1})]),_:1},8,["modelValue"])]))}},v={class:"vp-raw"},C={__name:"FwbTabsExamplePills",setup(y){const p=d("first");return(r,t)=>(c(),E("div",v,[s(n(u),{modelValue:p.value,"onUpdate:modelValue":t[0]||(t[0]=e=>p.value=e),variant:"pills",class:"p-5"},{default:a(()=>[s(n(l),{name:"first",title:"First"},{default:a(()=>[o(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae? ")]),_:1}),s(n(l),{name:"second",title:"Second"},{default:a(()=>[o(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta. ")]),_:1}),s(n(l),{name:"third",title:"Third"},{default:a(()=>[o(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem. ")]),_:1}),s(n(l),{name:"fourth",title:"Fourth",disabled:""},{default:a(()=>[o(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem. ")]),_:1})]),_:1},8,["modelValue"])]))}},_={class:"vp-raw"},w={__name:"FwbTabsExampleUnderline",setup(y){const p=d("first");return(r,t)=>(c(),E("div",_,[s(n(u),{modelValue:p.value,"onUpdate:modelValue":t[0]||(t[0]=e=>p.value=e),variant:"underline",class:"p-5"},{default:a(()=>[s(n(l),{name:"first",title:"First"},{default:a(()=>[o(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae? ")]),_:1}),s(n(l),{name:"second",title:"Second"},{default:a(()=>[o(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta. ")]),_:1}),s(n(l),{name:"third",title:"Third"},{default:a(()=>[o(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem. ")]),_:1}),s(n(l),{name:"fourth",title:"Fourth",disabled:""},{default:a(()=>[o(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem. ")]),_:1})]),_:1},8,["modelValue"])]))}},B=i("",6),A=i("",2),D=i("",2),T=i("",3),L=i("",3),k=i("",4),U=JSON.parse('{"title":"Vue Tabs - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/tabs.md","filePath":"components/tabs.md"}'),P={name:"components/tabs.md"},M=Object.assign(P,{setup(y){return(p,r)=>(c(),E("div",null,[B,s(b),A,s(w),D,s(C),T,s(h),L,s(q),k]))}});export{U as __pageData,M as default}; diff --git a/docs/.vitepress/dist/assets/components_textarea.md.b787a2ff.js b/docs/.vitepress/dist/assets/components_textarea.md.b787a2ff.js new file mode 100644 index 0000000..906bf47 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_textarea.md.b787a2ff.js @@ -0,0 +1,203 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as m,d as x,o as E,c as y,k as p,t as _,n as b,l,a0 as A,a5 as k,L as D,r as T,e as V,h as g,H as o,w as c,a as i,X as h,Q as q}from"./chunks/framework.3f630664.js";import{s as S}from"./chunks/simplifyTailwindClasses.275301d3.js";import{_ as u}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as P}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";import{_ as z}from"./chunks/FwbInput.vue_vue_type_script_setup_true_lang.a210c4c5.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import"./chunks/index.b15c605d.js";import"./chunks/index.6b4d4439.js";const I="block w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600",M="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-200 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",W="block mb-2 text-sm font-medium text-gray-900 dark:text-white",j="block py-2 px-3 border-gray-200 dark:border-gray-600";function $(t){const a=m(()=>S(M,t?"bg-white dark:bg-gray-800 border-none":"border")),e=m(()=>W),n=m(()=>t?I:""),s=m(()=>j);return{textareaClasses:a,labelClasses:e,wrapperClasses:n,footerClasses:s}}const Y=["rows","placeholder"],F=x({inheritAttrs:!1,__name:"FwbTextarea",props:{modelValue:{default:""},label:{default:"Your message"},rows:{default:4},custom:{type:Boolean,default:!1},placeholder:{default:"Write your message here..."}},emits:["update:modelValue"],setup(t,{emit:a}){const e=t,n=a,s=m({get(){return e.modelValue},set(r){n("update:modelValue",r)}}),{textareaClasses:d,labelClasses:f,wrapperClasses:v,footerClasses:w}=$(e.custom);return(r,C)=>(E(),y("label",null,[p("span",{class:b(l(f))},_(r.label),3),p("span",{class:b(l(v))},[A(p("textarea",D({"onUpdate:modelValue":C[0]||(C[0]=B=>s.value=B)},r.$attrs,{class:l(d),rows:r.rows,placeholder:r.placeholder}),null,16,Y),[[k,s.value]]),r.$slots.footer?(E(),y("span",{key:0,class:b(l(w))},[T(r.$slots,"footer")],2)):V("",!0)],2)]))}}),N={class:"vp-raw"},R={__name:"FwbTextareaExample",setup(t){const a=g("");return(e,n)=>(E(),y("div",N,[o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[0]||(n[0]=s=>a.value=s),rows:4,label:"Your message",placeholder:"Write your message..."},null,8,["modelValue"])]))}},U={class:"vp-raw"},L={class:"flex items-center justify-between"},O={class:"flex"},G=p("svg",{class:"w-6 h-6",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[p("path",{d:"M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13","stroke-linecap":"round","stroke-linejoin":"round"})],-1),H=p("svg",{class:"w-6 h-6",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[p("path",{d:"M15 10.5a3 3 0 11-6 0 3 3 0 016 0z","stroke-linecap":"round","stroke-linejoin":"round"}),p("path",{d:"M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z","stroke-linecap":"round","stroke-linejoin":"round"})],-1),J=p("svg",{class:"w-6 h-6",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[p("path",{d:"M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z","stroke-linecap":"round","stroke-linejoin":"round"})],-1),Q={class:"ml-auto text-xs text-gray-500 dark:text-gray-400"},X={__name:"FwbTextareaExampleComment",setup(t){const a=g("");return(e,n)=>(E(),y("div",U,[o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[0]||(n[0]=s=>a.value=s),rows:3,custom:"",label:"Your message",placeholder:"Write your message..."},{footer:c(()=>[p("div",L,[o(l(u),{type:"submit"},{default:c(()=>[i(" Post comment ")]),_:1}),p("div",O,[o(l(u),{class:"rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600",color:"",square:""},{default:c(()=>[G]),_:1}),o(l(u),{class:"rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600",color:"",square:""},{default:c(()=>[H]),_:1}),o(l(u),{class:"rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600",color:"",square:""},{default:c(()=>[J]),_:1})])])]),_:1},8,["modelValue"]),p("p",Q,[i(" Remember, contributions to this topic should follow our "),o(l(P),{class:"underline",href:"#"},{default:c(()=>[i(" Community Guidelines ")]),_:1}),i(". ")])]))}},K={__name:"FwbTextareaExampleDisabled",setup(t){const a=g("Edit me!");return(e,n)=>(E(),y("form",{class:"vp-raw",onSubmit:n[3]||(n[3]=h(()=>{},["prevent"]))},[o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[0]||(n[0]=s=>a.value=s),label:"Textarea with minlength 10 and maxlength 20",minlength:"10",maxlength:"20",required:""},null,8,["modelValue"]),o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[1]||(n[1]=s=>a.value=s),label:"Disabled textarea",placeholder:"Cannot be edited",disabled:""},null,8,["modelValue"]),o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[2]||(n[2]=s=>a.value=s),label:"Readonly textarea",placeholder:"Cannot be edited",readonly:""},null,8,["modelValue"]),o(l(u),{type:"submit"},{default:c(()=>[i(" Validate ")]),_:1})],32))}},Z={class:"flex flex-col gap-y-4"},ss={__name:"FwbTextareaExampleFormId",setup(t){const a=g(""),e=g("");return(n,s)=>(E(),y("div",Z,[p("form",{id:"fwb-textarea-example-form-id",class:"vp-raw",onSubmit:s[1]||(s[1]=h(()=>{},["prevent"]))},[o(l(z),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=d=>a.value=d),label:"Input inside the form",placeholder:"Write your message..."},null,8,["modelValue"]),o(l(u),{class:"mt-2",type:"submit"},{default:c(()=>[i(" Validate ")]),_:1})],32),o(l(F),{modelValue:e.value,"onUpdate:modelValue":s[2]||(s[2]=d=>e.value=d),label:"Textarea outside the form",form:"fwb-textarea-example-form-id",minlength:"20",required:""},null,8,["modelValue"])]))}},as=q('

Vue Textarea - Flowbite ​

Use the textarea component as a multi-line text field input and use it inside form elements available in multiple sizes, styles, and variants ​

TIP

Original reference: https://flowbite.com/docs/forms/textarea/

Textarea example ​

Get started with the default example of a textarea component below.

',6),ns=q(`
vue
<template>
+  <fwb-textarea
+    v-model="message"
+    :rows="4"
+    label="Your message"
+    placeholder="Write your message..."
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbTextarea } from 'flowbite-vue'
+
+const message = ref('')
+</script>
<template>
+  <fwb-textarea
+    v-model="message"
+    :rows="4"
+    label="Your message"
+    placeholder="Write your message..."
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbTextarea } from 'flowbite-vue'
+
+const message = ref('')
+</script>

Comment box ​

Most often the textarea component is used as the main text field input element in comment sections. Use this example to also apply a helper text and buttons below the textarea itself.

`,3),ls=q(`
vue
<template>
+  <div>
+    <form>
+      <fwb-textarea
+        v-model="message"
+        :rows="3"
+        custom
+        label="Your message"
+        placeholder="Write your message..."
+      >
+        <template #footer>
+          <div class="flex items-center justify-between">
+            <fwb-button type="submit">
+              Post comment
+            </fwb-button>
+            <div class="flex">
+              <fwb-button class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" color square>
+                <svg class="w-6 h-6" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+              </fwb-button>
+              <fwb-button class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" color="" square >
+                <svg class="w-6 h-6" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" />
+                  <path d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+              </fwb-button>
+              <fwb-button class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" color="" square>
+                <svg class="w-6 h-6" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+              </fwb-button>
+            </div>
+          </div>
+        </template>
+      </Textarea>
+    </form>
+    <p class="ml-auto text-xs text-gray-500 dark:text-gray-400">
+      Remember, contributions to this topic should follow our
+      <fwb-a href="#">Community Guidelines</fwb-a>.
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbA, FwbButton, FwbTextarea } from 'flowbite-vue'
+
+const message = ref('')
+</script>
<template>
+  <div>
+    <form>
+      <fwb-textarea
+        v-model="message"
+        :rows="3"
+        custom
+        label="Your message"
+        placeholder="Write your message..."
+      >
+        <template #footer>
+          <div class="flex items-center justify-between">
+            <fwb-button type="submit">
+              Post comment
+            </fwb-button>
+            <div class="flex">
+              <fwb-button class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" color square>
+                <svg class="w-6 h-6" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+              </fwb-button>
+              <fwb-button class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" color="" square >
+                <svg class="w-6 h-6" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" />
+                  <path d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+              </fwb-button>
+              <fwb-button class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" color="" square>
+                <svg class="w-6 h-6" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+              </fwb-button>
+            </div>
+          </div>
+        </template>
+      </Textarea>
+    </form>
+    <p class="ml-auto text-xs text-gray-500 dark:text-gray-400">
+      Remember, contributions to this topic should follow our
+      <fwb-a href="#">Community Guidelines</fwb-a>.
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbA, FwbButton, FwbTextarea } from 'flowbite-vue'
+
+const message = ref('')
+</script>

Disabled / Readonly Textarea ​

`,2),os=q(`
vue
<template>
+  <div>
+    <fwb-textarea
+      v-model="message"
+      label="Your message"
+      placeholder="Write your message..."
+      disabled
+    />
+    <fwb-textarea
+      v-model="message"
+      label="Your message"
+      placeholder="Write your message..."
+      readonly
+    />
+  </div>
+</template>
<template>
+  <div>
+    <fwb-textarea
+      v-model="message"
+      label="Your message"
+      placeholder="Write your message..."
+      disabled
+    />
+    <fwb-textarea
+      v-model="message"
+      label="Your message"
+      placeholder="Write your message..."
+      readonly
+    />
+  </div>
+</template>

Textarea with form ID ​

`,2),ps=q(`
vue
<template>
+  <div>
+    <form id="my-form" @submit.prevent="handleSubmit">
+      <!-- Inside the form -->
+      <fwb-textarea
+        v-model="message"
+        label="Your message"
+        placeholder="Write your message..."
+      />
+      <fwb-button type="submit">
+        Submit
+      </fwb-button>
+    </form>
+
+    <!-- Outside the form -->
+    <fwb-textarea
+      v-model="message"
+      label="Your message"
+      placeholder="Write your message..."
+      form="my-form"
+      required
+    />
+  </div>
+</template>
<template>
+  <div>
+    <form id="my-form" @submit.prevent="handleSubmit">
+      <!-- Inside the form -->
+      <fwb-textarea
+        v-model="message"
+        label="Your message"
+        placeholder="Write your message..."
+      />
+      <fwb-button type="submit">
+        Submit
+      </fwb-button>
+    </form>
+
+    <!-- Outside the form -->
+    <fwb-textarea
+      v-model="message"
+      label="Your message"
+      placeholder="Write your message..."
+      form="my-form"
+      required
+    />
+  </div>
+</template>
`,1),gs=JSON.parse('{"title":"Vue Textarea - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/textarea.md","filePath":"components/textarea.md"}'),es={name:"components/textarea.md"},qs=Object.assign(es,{setup(t){return(a,e)=>(E(),y("div",null,[as,o(R),ns,o(X),ls,o(K),os,o(ss),ps]))}});export{gs as __pageData,qs as default}; diff --git a/docs/.vitepress/dist/assets/components_textarea.md.b787a2ff.lean.js b/docs/.vitepress/dist/assets/components_textarea.md.b787a2ff.lean.js new file mode 100644 index 0000000..66b7097 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_textarea.md.b787a2ff.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as m,d as x,o as E,c as y,k as p,t as _,n as b,l,a0 as A,a5 as k,L as D,r as T,e as V,h as g,H as o,w as c,a as i,X as h,Q as q}from"./chunks/framework.3f630664.js";import{s as S}from"./chunks/simplifyTailwindClasses.275301d3.js";import{_ as u}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as P}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";import{_ as z}from"./chunks/FwbInput.vue_vue_type_script_setup_true_lang.a210c4c5.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import"./chunks/index.b15c605d.js";import"./chunks/index.6b4d4439.js";const I="block w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600",M="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-200 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",W="block mb-2 text-sm font-medium text-gray-900 dark:text-white",j="block py-2 px-3 border-gray-200 dark:border-gray-600";function $(t){const a=m(()=>S(M,t?"bg-white dark:bg-gray-800 border-none":"border")),e=m(()=>W),n=m(()=>t?I:""),s=m(()=>j);return{textareaClasses:a,labelClasses:e,wrapperClasses:n,footerClasses:s}}const Y=["rows","placeholder"],F=x({inheritAttrs:!1,__name:"FwbTextarea",props:{modelValue:{default:""},label:{default:"Your message"},rows:{default:4},custom:{type:Boolean,default:!1},placeholder:{default:"Write your message here..."}},emits:["update:modelValue"],setup(t,{emit:a}){const e=t,n=a,s=m({get(){return e.modelValue},set(r){n("update:modelValue",r)}}),{textareaClasses:d,labelClasses:f,wrapperClasses:v,footerClasses:w}=$(e.custom);return(r,C)=>(E(),y("label",null,[p("span",{class:b(l(f))},_(r.label),3),p("span",{class:b(l(v))},[A(p("textarea",D({"onUpdate:modelValue":C[0]||(C[0]=B=>s.value=B)},r.$attrs,{class:l(d),rows:r.rows,placeholder:r.placeholder}),null,16,Y),[[k,s.value]]),r.$slots.footer?(E(),y("span",{key:0,class:b(l(w))},[T(r.$slots,"footer")],2)):V("",!0)],2)]))}}),N={class:"vp-raw"},R={__name:"FwbTextareaExample",setup(t){const a=g("");return(e,n)=>(E(),y("div",N,[o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[0]||(n[0]=s=>a.value=s),rows:4,label:"Your message",placeholder:"Write your message..."},null,8,["modelValue"])]))}},U={class:"vp-raw"},L={class:"flex items-center justify-between"},O={class:"flex"},G=p("svg",{class:"w-6 h-6",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[p("path",{d:"M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13","stroke-linecap":"round","stroke-linejoin":"round"})],-1),H=p("svg",{class:"w-6 h-6",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[p("path",{d:"M15 10.5a3 3 0 11-6 0 3 3 0 016 0z","stroke-linecap":"round","stroke-linejoin":"round"}),p("path",{d:"M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z","stroke-linecap":"round","stroke-linejoin":"round"})],-1),J=p("svg",{class:"w-6 h-6",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[p("path",{d:"M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z","stroke-linecap":"round","stroke-linejoin":"round"})],-1),Q={class:"ml-auto text-xs text-gray-500 dark:text-gray-400"},X={__name:"FwbTextareaExampleComment",setup(t){const a=g("");return(e,n)=>(E(),y("div",U,[o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[0]||(n[0]=s=>a.value=s),rows:3,custom:"",label:"Your message",placeholder:"Write your message..."},{footer:c(()=>[p("div",L,[o(l(u),{type:"submit"},{default:c(()=>[i(" Post comment ")]),_:1}),p("div",O,[o(l(u),{class:"rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600",color:"",square:""},{default:c(()=>[G]),_:1}),o(l(u),{class:"rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600",color:"",square:""},{default:c(()=>[H]),_:1}),o(l(u),{class:"rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600",color:"",square:""},{default:c(()=>[J]),_:1})])])]),_:1},8,["modelValue"]),p("p",Q,[i(" Remember, contributions to this topic should follow our "),o(l(P),{class:"underline",href:"#"},{default:c(()=>[i(" Community Guidelines ")]),_:1}),i(". ")])]))}},K={__name:"FwbTextareaExampleDisabled",setup(t){const a=g("Edit me!");return(e,n)=>(E(),y("form",{class:"vp-raw",onSubmit:n[3]||(n[3]=h(()=>{},["prevent"]))},[o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[0]||(n[0]=s=>a.value=s),label:"Textarea with minlength 10 and maxlength 20",minlength:"10",maxlength:"20",required:""},null,8,["modelValue"]),o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[1]||(n[1]=s=>a.value=s),label:"Disabled textarea",placeholder:"Cannot be edited",disabled:""},null,8,["modelValue"]),o(l(F),{modelValue:a.value,"onUpdate:modelValue":n[2]||(n[2]=s=>a.value=s),label:"Readonly textarea",placeholder:"Cannot be edited",readonly:""},null,8,["modelValue"]),o(l(u),{type:"submit"},{default:c(()=>[i(" Validate ")]),_:1})],32))}},Z={class:"flex flex-col gap-y-4"},ss={__name:"FwbTextareaExampleFormId",setup(t){const a=g(""),e=g("");return(n,s)=>(E(),y("div",Z,[p("form",{id:"fwb-textarea-example-form-id",class:"vp-raw",onSubmit:s[1]||(s[1]=h(()=>{},["prevent"]))},[o(l(z),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=d=>a.value=d),label:"Input inside the form",placeholder:"Write your message..."},null,8,["modelValue"]),o(l(u),{class:"mt-2",type:"submit"},{default:c(()=>[i(" Validate ")]),_:1})],32),o(l(F),{modelValue:e.value,"onUpdate:modelValue":s[2]||(s[2]=d=>e.value=d),label:"Textarea outside the form",form:"fwb-textarea-example-form-id",minlength:"20",required:""},null,8,["modelValue"])]))}},as=q("",6),ns=q("",3),ls=q("",2),os=q("",2),ps=q("",1),gs=JSON.parse('{"title":"Vue Textarea - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/textarea.md","filePath":"components/textarea.md"}'),es={name:"components/textarea.md"},qs=Object.assign(es,{setup(t){return(a,e)=>(E(),y("div",null,[as,o(R),ns,o(X),ls,o(K),os,o(ss),ps]))}});export{gs as __pageData,qs as default}; diff --git a/docs/.vitepress/dist/assets/components_timeline.md.0bc3fcd0.js b/docs/.vitepress/dist/assets/components_timeline.md.0bc3fcd0.js new file mode 100644 index 0000000..8ff1b11 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_timeline.md.0bc3fcd0.js @@ -0,0 +1,519 @@ +import{c as f}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as v,U as $,g as b,o as r,c as E,r as w,L as U,_ as q,M as C,n as F,Y as G,k as p,H as s,w as a,l as n,a as l,Q as A}from"./chunks/framework.3f630664.js";const P="relative border-gray-200 dark:border-gray-700",N="border-l",W="flex",D=v({__name:"FwbTimeline",props:{horizontal:{type:Boolean,default:!1}},setup(e){const o=e;$("horizontal",o.horizontal);const t=b(()=>f(P,o.horizontal?W:N));return(c,h)=>(r(),E("ol",U({class:t.value},c.$attrs),[w(c.$slots,"default")],16))}}),j={},R={class:"font-normal mb-4 text-base text-gray-500 dark:text-gray-400"};function O(e,o){return r(),E("p",R,[w(e.$slots,"default")])}const i=q(j,[["render",O]]),y=v({__name:"FwbTimelineContent",setup(e){const o=C("horizontal"),t=b(()=>f(o?"mt-3 sm:pr-8":""));return(c,h)=>(r(),E("div",{class:F(t.value)},[w(c.$slots,"default")],2))}}),Y="mb-10",J="mb-6 sm:mb-0 relative",L="ml-6",d=v({__name:"FwbTimelineItem",setup(e){const o=C("horizontal"),t=b(()=>f(Y,o?J:L));return(c,h)=>(r(),E("li",{class:F(t.value)},[w(c.$slots,"default")],2))}}),Q="h-0.5 w-full bg-gray-200 dark:bg-gray-700 sm:flex",u=v({__name:"FwbTimelinePoint",setup(e){const o=G(),t=b(()=>!!o.default),c=C("horizontal"),h=b(()=>f(c?"flex items-center":"")),T=b(()=>f(Q,{"sm:hidden hidden":!c})),k=b(()=>{const _="absolute rounded-full -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700",B="mt-1.5 w-3 h-3 bg-gray-200",x="mt-1.5 w-6 h-6 -left-3 flex justify-center items-center bg-blue-200 ring-8 ring-white dark:ring-gray-900",V="w-3 h-3 bg-gray-200",S="w-6 h-6 -left-3 flex justify-center items-center bg-blue-200 ring-8 ring-white dark:ring-gray-900",H=!c&&!t.value,z=!c&&t.value,I=c&&!t.value,M=c&&t.value;return f(_,{[B]:H,[x]:z,[V]:I,[S]:M})});return(_,B)=>(r(),E("div",{class:F(h.value)},[p("div",{class:F(k.value)},[w(_.$slots,"default")],2),p("div",{class:F(T.value)},null,2)],2))}}),K={},X={class:"font-normal leading-none mb-1 text-gray-400 dark:text-gray-500 text-sm"};function Z(e,o){return r(),E("time",X,[w(e.$slots,"default")])}const m=q(K,[["render",Z]]),ss={},ns={class:"font-semibold text-gray-900 dark:text-white text-lg"};function as(e,o){return r(),E("h3",ns,[w(e.$slots,"default")])}const g=q(ss,[["render",as]]),ls={class:"vp-raw"},ps={__name:"FwbTimelineExample",setup(e){return(o,t)=>(r(),E("div",ls,[s(n(D),null,{default:a(()=>[s(n(d),null,{default:a(()=>[s(n(u)),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2020 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1}),s(n(d),null,{default:a(()=>[s(n(u)),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2020 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1}),s(n(d),null,{default:a(()=>[s(n(u)),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2020 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1})]),_:1})]))}},os={class:"vp-raw"},es=p("svg",{"aria-hidden":"true",class:"w-3 h-3 text-blue-600 dark:text-blue-400",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z","fill-rule":"evenodd"})],-1),ts=p("svg",{"aria-hidden":"true",class:"w-3 h-3 text-blue-600 dark:text-blue-400",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z","fill-rule":"evenodd"})],-1),cs=p("svg",{"aria-hidden":"true",class:"w-3 h-3 text-blue-600 dark:text-blue-400",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z","fill-rule":"evenodd"})],-1),rs={__name:"FwbTimelineExampleWithIcons",setup(e){return(o,t)=>(r(),E("div",os,[s(n(D),null,{default:a(()=>[s(n(d),null,{default:a(()=>[s(n(u),null,{default:a(()=>[es]),_:1}),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2022 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1}),s(n(d),null,{default:a(()=>[s(n(u),null,{default:a(()=>[ts]),_:1}),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2022 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1}),s(n(d),null,{default:a(()=>[s(n(u),null,{default:a(()=>[cs]),_:1}),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2022 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1})]),_:1})]))}},Es={class:"vp-raw"},is=p("svg",{"aria-hidden":"true",class:"w-3 h-3 text-blue-600 dark:text-blue-400",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z","fill-rule":"evenodd"})],-1),ys=p("svg",{"aria-hidden":"true",class:"w-3 h-3 text-blue-600 dark:text-blue-400",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z","fill-rule":"evenodd"})],-1),ds=p("svg",{"aria-hidden":"true",class:"w-3 h-3 text-blue-600 dark:text-blue-400",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z","fill-rule":"evenodd"})],-1),us={__name:"FwbTimelineExampleHorizontal",setup(e){return(o,t)=>(r(),E("div",Es,[s(n(D),{horizontal:""},{default:a(()=>[s(n(d),null,{default:a(()=>[s(n(u),null,{default:a(()=>[is]),_:1}),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2022 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1}),s(n(d),null,{default:a(()=>[s(n(u),null,{default:a(()=>[ys]),_:1}),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2022 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1}),s(n(d),null,{default:a(()=>[s(n(u),null,{default:a(()=>[ds]),_:1}),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2022 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1})]),_:1})]))}},ms=p("h1",{id:"vue-timeline-flowbite",tabindex:"-1"},[l("Vue Timeline - Flowbite "),p("a",{class:"header-anchor",href:"#vue-timeline-flowbite","aria-label":'Permalink to "Vue Timeline - Flowbite"'},"​")],-1),gs=p("h2",{id:"default-timeline-usage",tabindex:"-1"},[l("Default timeline usage "),p("a",{class:"header-anchor",href:"#default-timeline-usage","aria-label":'Permalink to "Default timeline usage"'},"​")],-1),bs=A(`
vue
<template>
+  <fwb-timeline>
+    <fwb-timeline-item>
+      <fwb-timeline-point />
+      <fwb-timeline-content>
+        <fwb-timeline-time>
+          February 2020
+        </fwb-timeline-time>
+        <fwb-timeline-title>
+          Application UI code in Tailwind CSS
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+    <fwb-timeline-item>
+      <fwb-timeline-point />
+      <fwb-timeline-content>
+        <fwb-timeline-time>
+          February 2020
+        </fwb-timeline-time>
+        <fwb-timeline-title>
+          Application UI code in Tailwind CSS
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+    <fwb-timeline-item>
+      <fwb-timeline-point />
+      <fwb-timeline-content>
+        <fwb-timeline-time>
+          February 2020
+        </fwb-timeline-time>
+        <fwb-timeline-title>
+          Application UI code in Tailwind CSS
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+  </fwb-timeline>
+</template>
+
+<script setup>
+import {
+  FwbTimeline,
+  FwbTimelineBody,
+  FwbTimelineContent,
+  FwbTimelineItem,
+  FwbTimelinePoint,
+  FwbTimelineTime,
+  FwbTimelineTitle,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-timeline>
+    <fwb-timeline-item>
+      <fwb-timeline-point />
+      <fwb-timeline-content>
+        <fwb-timeline-time>
+          February 2020
+        </fwb-timeline-time>
+        <fwb-timeline-title>
+          Application UI code in Tailwind CSS
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+    <fwb-timeline-item>
+      <fwb-timeline-point />
+      <fwb-timeline-content>
+        <fwb-timeline-time>
+          February 2020
+        </fwb-timeline-time>
+        <fwb-timeline-title>
+          Application UI code in Tailwind CSS
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+    <fwb-timeline-item>
+      <fwb-timeline-point />
+      <fwb-timeline-content>
+        <fwb-timeline-time>
+          February 2020
+        </fwb-timeline-time>
+        <fwb-timeline-title>
+          Application UI code in Tailwind CSS
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+  </fwb-timeline>
+</template>
+
+<script setup>
+import {
+  FwbTimeline,
+  FwbTimelineBody,
+  FwbTimelineContent,
+  FwbTimelineItem,
+  FwbTimelinePoint,
+  FwbTimelineTime,
+  FwbTimelineTitle,
+} from 'flowbite-vue'
+</script>

Timeline with icons ​

You can add icons by passing svg icons as slot to <fwb-timeline-point> component

`,3),ws=A(`
vue
<template>
+  <fwb-timeline class="vp-raw">
+    <fwb-timeline-item>
+      <fwb-timeline-point>
+        <svg
+          aria-hidden="true"
+          class="w-3 h-3 text-blue-600 dark:text-blue-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </fwb-timeline-point>
+      <fwb-timeline-content>
+        <fwb-timeline-time>
+          February 2022
+        </fwb-timeline-time>
+        <fwb-timeline-title>
+          Application UI code in Tailwind CSS
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+    <fwb-timeline-item>
+      <fwb-timeline-point>
+        <svg
+          aria-hidden="true"
+          class="w-3 h-3 text-blue-600 dark:text-blue-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </fwb-timeline-point>
+      <fwb-timeline-content>
+        <fwb-timeline-time>
+          February 2022
+        </fwb-timeline-time>
+        <fwb-timeline-title>
+          Application UI code in Tailwind CSS
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+    <fwb-timeline-item>
+      <fwb-timeline-point>
+        <svg
+          aria-hidden="true"
+          class="w-3 h-3 text-blue-600 dark:text-blue-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </fwb-timeline-point>
+      <fwb-timeline-content>
+        <fwb-timeline-time>
+          February 2022
+        </fwb-timeline-time>
+        <fwb-timeline-title>
+          Application UI code in Tailwind CSS
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+  </fwb-timeline>
+</template>
+
+<script setup>
+import {
+  FwbTimeline,
+  FwbTimelineBody,
+  FwbTimelineContent,
+  FwbTimelineItem,
+  FwbTimelinePoint,
+  FwbTimelineTime,
+  FwbTimelineTitle,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-timeline class="vp-raw">
+    <fwb-timeline-item>
+      <fwb-timeline-point>
+        <svg
+          aria-hidden="true"
+          class="w-3 h-3 text-blue-600 dark:text-blue-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </fwb-timeline-point>
+      <fwb-timeline-content>
+        <fwb-timeline-time>
+          February 2022
+        </fwb-timeline-time>
+        <fwb-timeline-title>
+          Application UI code in Tailwind CSS
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+    <fwb-timeline-item>
+      <fwb-timeline-point>
+        <svg
+          aria-hidden="true"
+          class="w-3 h-3 text-blue-600 dark:text-blue-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </fwb-timeline-point>
+      <fwb-timeline-content>
+        <fwb-timeline-time>
+          February 2022
+        </fwb-timeline-time>
+        <fwb-timeline-title>
+          Application UI code in Tailwind CSS
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+    <fwb-timeline-item>
+      <fwb-timeline-point>
+        <svg
+          aria-hidden="true"
+          class="w-3 h-3 text-blue-600 dark:text-blue-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </fwb-timeline-point>
+      <fwb-timeline-content>
+        <fwb-timeline-time>
+          February 2022
+        </fwb-timeline-time>
+        <fwb-timeline-title>
+          Application UI code in Tailwind CSS
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+  </fwb-timeline>
+</template>
+
+<script setup>
+import {
+  FwbTimeline,
+  FwbTimelineBody,
+  FwbTimelineContent,
+  FwbTimelineItem,
+  FwbTimelinePoint,
+  FwbTimelineTime,
+  FwbTimelineTitle,
+} from 'flowbite-vue'
+</script>

Timeline with icons ​

horizontal prop makes timeline horizontal

`,3),fs=A(`
vue
<template>
+  <fwb-timeline horizontal>
+    <fwb-timeline-item>
+      <fwb-timeline-point>
+        <svg
+          aria-hidden="true"
+          class="w-3 h-3 text-blue-600 dark:text-blue-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        ><path
+          clip-rule="evenodd"
+          d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+          fill-rule="evenodd"
+        /></svg>
+      </fwb-timeline-point>
+      <fwb-timeline-content>
+        <fwb-timeline-time>
+          February 2022
+        </fwb-timeline-time>
+        <fwb-timeline-title>
+          Application UI code in Tailwind CSS
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+    <fwb-timeline-item>
+      <fwb-timeline-point>
+        <svg
+          aria-hidden="true"
+          class="w-3 h-3 text-blue-600 dark:text-blue-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        ><path
+          clip-rule="evenodd"
+          d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+          fill-rule="evenodd"
+        /></svg>
+      </fwb-timeline-point>
+      <fwb-timeline-content>
+        <fwb-timeline-time>
+          February 2022
+        </fwb-timeline-time>
+        <fwb-timeline-title>
+          Application UI code in Tailwind CSS
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+    <fwb-timeline-item>
+      <fwb-timeline-point>
+        <svg
+          aria-hidden="true"
+          class="w-3 h-3 text-blue-600 dark:text-blue-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </fwb-timeline-point>
+      <fwb-timeline-content>
+        <fwb-timeline-time>
+          February 2022
+        </fwb-timeline-time>
+        <fwb-timeline-title>
+          Application UI code in Tailwind CSS
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+  </fwb-timeline>
+</template>
+
+<script setup>
+import {
+  FwbTimeline,
+  FwbTimelineBody,
+  FwbTimelineContent,
+  FwbTimelineItem,
+  FwbTimelinePoint,
+  FwbTimelineTime,
+  FwbTimelineTitle,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-timeline horizontal>
+    <fwb-timeline-item>
+      <fwb-timeline-point>
+        <svg
+          aria-hidden="true"
+          class="w-3 h-3 text-blue-600 dark:text-blue-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        ><path
+          clip-rule="evenodd"
+          d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+          fill-rule="evenodd"
+        /></svg>
+      </fwb-timeline-point>
+      <fwb-timeline-content>
+        <fwb-timeline-time>
+          February 2022
+        </fwb-timeline-time>
+        <fwb-timeline-title>
+          Application UI code in Tailwind CSS
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+    <fwb-timeline-item>
+      <fwb-timeline-point>
+        <svg
+          aria-hidden="true"
+          class="w-3 h-3 text-blue-600 dark:text-blue-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        ><path
+          clip-rule="evenodd"
+          d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+          fill-rule="evenodd"
+        /></svg>
+      </fwb-timeline-point>
+      <fwb-timeline-content>
+        <fwb-timeline-time>
+          February 2022
+        </fwb-timeline-time>
+        <fwb-timeline-title>
+          Application UI code in Tailwind CSS
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+    <fwb-timeline-item>
+      <fwb-timeline-point>
+        <svg
+          aria-hidden="true"
+          class="w-3 h-3 text-blue-600 dark:text-blue-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </fwb-timeline-point>
+      <fwb-timeline-content>
+        <fwb-timeline-time>
+          February 2022
+        </fwb-timeline-time>
+        <fwb-timeline-title>
+          Application UI code in Tailwind CSS
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+  </fwb-timeline>
+</template>
+
+<script setup>
+import {
+  FwbTimeline,
+  FwbTimelineBody,
+  FwbTimelineContent,
+  FwbTimelineItem,
+  FwbTimelinePoint,
+  FwbTimelineTime,
+  FwbTimelineTitle,
+} from 'flowbite-vue'
+</script>
`,1),_s=JSON.parse('{"title":"Vue Timeline - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/timeline.md","filePath":"components/timeline.md"}'),Fs={name:"components/timeline.md"},qs=Object.assign(Fs,{setup(e){return(o,t)=>(r(),E("div",null,[ms,gs,s(ps),bs,s(rs),ws,s(us),fs]))}});export{_s as __pageData,qs as default}; diff --git a/docs/.vitepress/dist/assets/components_timeline.md.0bc3fcd0.lean.js b/docs/.vitepress/dist/assets/components_timeline.md.0bc3fcd0.lean.js new file mode 100644 index 0000000..916df9b --- /dev/null +++ b/docs/.vitepress/dist/assets/components_timeline.md.0bc3fcd0.lean.js @@ -0,0 +1 @@ +import{c as f}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as v,U as $,g as b,o as r,c as E,r as w,L as U,_ as q,M as C,n as F,Y as G,k as p,H as s,w as a,l as n,a as l,Q as A}from"./chunks/framework.3f630664.js";const P="relative border-gray-200 dark:border-gray-700",N="border-l",W="flex",D=v({__name:"FwbTimeline",props:{horizontal:{type:Boolean,default:!1}},setup(e){const o=e;$("horizontal",o.horizontal);const t=b(()=>f(P,o.horizontal?W:N));return(c,h)=>(r(),E("ol",U({class:t.value},c.$attrs),[w(c.$slots,"default")],16))}}),j={},R={class:"font-normal mb-4 text-base text-gray-500 dark:text-gray-400"};function O(e,o){return r(),E("p",R,[w(e.$slots,"default")])}const i=q(j,[["render",O]]),y=v({__name:"FwbTimelineContent",setup(e){const o=C("horizontal"),t=b(()=>f(o?"mt-3 sm:pr-8":""));return(c,h)=>(r(),E("div",{class:F(t.value)},[w(c.$slots,"default")],2))}}),Y="mb-10",J="mb-6 sm:mb-0 relative",L="ml-6",d=v({__name:"FwbTimelineItem",setup(e){const o=C("horizontal"),t=b(()=>f(Y,o?J:L));return(c,h)=>(r(),E("li",{class:F(t.value)},[w(c.$slots,"default")],2))}}),Q="h-0.5 w-full bg-gray-200 dark:bg-gray-700 sm:flex",u=v({__name:"FwbTimelinePoint",setup(e){const o=G(),t=b(()=>!!o.default),c=C("horizontal"),h=b(()=>f(c?"flex items-center":"")),T=b(()=>f(Q,{"sm:hidden hidden":!c})),k=b(()=>{const _="absolute rounded-full -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700",B="mt-1.5 w-3 h-3 bg-gray-200",x="mt-1.5 w-6 h-6 -left-3 flex justify-center items-center bg-blue-200 ring-8 ring-white dark:ring-gray-900",V="w-3 h-3 bg-gray-200",S="w-6 h-6 -left-3 flex justify-center items-center bg-blue-200 ring-8 ring-white dark:ring-gray-900",H=!c&&!t.value,z=!c&&t.value,I=c&&!t.value,M=c&&t.value;return f(_,{[B]:H,[x]:z,[V]:I,[S]:M})});return(_,B)=>(r(),E("div",{class:F(h.value)},[p("div",{class:F(k.value)},[w(_.$slots,"default")],2),p("div",{class:F(T.value)},null,2)],2))}}),K={},X={class:"font-normal leading-none mb-1 text-gray-400 dark:text-gray-500 text-sm"};function Z(e,o){return r(),E("time",X,[w(e.$slots,"default")])}const m=q(K,[["render",Z]]),ss={},ns={class:"font-semibold text-gray-900 dark:text-white text-lg"};function as(e,o){return r(),E("h3",ns,[w(e.$slots,"default")])}const g=q(ss,[["render",as]]),ls={class:"vp-raw"},ps={__name:"FwbTimelineExample",setup(e){return(o,t)=>(r(),E("div",ls,[s(n(D),null,{default:a(()=>[s(n(d),null,{default:a(()=>[s(n(u)),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2020 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1}),s(n(d),null,{default:a(()=>[s(n(u)),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2020 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1}),s(n(d),null,{default:a(()=>[s(n(u)),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2020 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1})]),_:1})]))}},os={class:"vp-raw"},es=p("svg",{"aria-hidden":"true",class:"w-3 h-3 text-blue-600 dark:text-blue-400",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z","fill-rule":"evenodd"})],-1),ts=p("svg",{"aria-hidden":"true",class:"w-3 h-3 text-blue-600 dark:text-blue-400",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z","fill-rule":"evenodd"})],-1),cs=p("svg",{"aria-hidden":"true",class:"w-3 h-3 text-blue-600 dark:text-blue-400",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z","fill-rule":"evenodd"})],-1),rs={__name:"FwbTimelineExampleWithIcons",setup(e){return(o,t)=>(r(),E("div",os,[s(n(D),null,{default:a(()=>[s(n(d),null,{default:a(()=>[s(n(u),null,{default:a(()=>[es]),_:1}),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2022 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1}),s(n(d),null,{default:a(()=>[s(n(u),null,{default:a(()=>[ts]),_:1}),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2022 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1}),s(n(d),null,{default:a(()=>[s(n(u),null,{default:a(()=>[cs]),_:1}),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2022 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1})]),_:1})]))}},Es={class:"vp-raw"},is=p("svg",{"aria-hidden":"true",class:"w-3 h-3 text-blue-600 dark:text-blue-400",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z","fill-rule":"evenodd"})],-1),ys=p("svg",{"aria-hidden":"true",class:"w-3 h-3 text-blue-600 dark:text-blue-400",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z","fill-rule":"evenodd"})],-1),ds=p("svg",{"aria-hidden":"true",class:"w-3 h-3 text-blue-600 dark:text-blue-400",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z","fill-rule":"evenodd"})],-1),us={__name:"FwbTimelineExampleHorizontal",setup(e){return(o,t)=>(r(),E("div",Es,[s(n(D),{horizontal:""},{default:a(()=>[s(n(d),null,{default:a(()=>[s(n(u),null,{default:a(()=>[is]),_:1}),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2022 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1}),s(n(d),null,{default:a(()=>[s(n(u),null,{default:a(()=>[ys]),_:1}),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2022 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1}),s(n(d),null,{default:a(()=>[s(n(u),null,{default:a(()=>[ds]),_:1}),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2022 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1})]),_:1})]))}},ms=p("h1",{id:"vue-timeline-flowbite",tabindex:"-1"},[l("Vue Timeline - Flowbite "),p("a",{class:"header-anchor",href:"#vue-timeline-flowbite","aria-label":'Permalink to "Vue Timeline - Flowbite"'},"​")],-1),gs=p("h2",{id:"default-timeline-usage",tabindex:"-1"},[l("Default timeline usage "),p("a",{class:"header-anchor",href:"#default-timeline-usage","aria-label":'Permalink to "Default timeline usage"'},"​")],-1),bs=A("",3),ws=A("",3),fs=A("",1),_s=JSON.parse('{"title":"Vue Timeline - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/timeline.md","filePath":"components/timeline.md"}'),Fs={name:"components/timeline.md"},qs=Object.assign(Fs,{setup(e){return(o,t)=>(r(),E("div",null,[ms,gs,s(ps),bs,s(rs),ws,s(us),fs]))}});export{_s as __pageData,qs as default}; diff --git a/docs/.vitepress/dist/assets/components_toast.md.552e0ecb.js b/docs/.vitepress/dist/assets/components_toast.md.552e0ecb.js new file mode 100644 index 0000000..235f6c4 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_toast.md.552e0ecb.js @@ -0,0 +1,251 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as o}from"./chunks/FwbToast.vue_vue_type_script_setup_true_lang.8ed93404.js";import{o as t,c as e,H as s,w as a,a as l,l as n,k as p,Q as c}from"./chunks/framework.3f630664.js";import{_ as i}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as u}from"./chunks/FlowbiteThemable.vue_vue_type_script_setup_true_lang.e3bec3bf.js";import"./chunks/simplifyTailwindClasses.275301d3.js";import"./chunks/useFlowbiteThemable.013ea29e.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const d={class:"vp-raw grid gap-2"},F={__name:"FwbToastExample",setup(r){return(E,y)=>(t(),e("div",d,[s(n(o),null,{default:a(()=>[l(" You've unlocked achievement. ")]),_:1}),s(n(o),{type:"warning"},{default:a(()=>[l(" Improve password difficulty. ")]),_:1}),s(n(o),{type:"success"},{default:a(()=>[l(" Item moved successfully. ")]),_:1}),s(n(o),{type:"danger"},{default:a(()=>[l(" Item has been deleted. ")]),_:1})]))}},g={class:"vp-raw grid gap-2"},m={__name:"FwbToastExampleClosable",setup(r){return(E,y)=>(t(),e("div",g,[s(n(o),{closable:""},{default:a(()=>[l(" You've unlocked achievement. ")]),_:1}),s(n(o),{closable:"",type:"warning"},{default:a(()=>[l(" Improve password difficulty. ")]),_:1}),s(n(o),{closable:"",type:"success"},{default:a(()=>[l(" Item moved successfully. ")]),_:1}),s(n(o),{closable:"",type:"danger"},{default:a(()=>[l(" Item has been deleted. ")]),_:1})]))}},f={class:"vp-raw grid gap-2"},b=p("svg",{class:"bi bi-mouse",fill:"#fff",height:"16",viewBox:"0 0 16 16",width:"16",xmlns:"http://www.w3.org/2000/svg"},[p("path",{d:"M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8a4 4 0 0 1-8 0V5a4 4 0 1 1 8 0v6zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5z"})],-1),h=p("svg",{class:"bi bi-person-plus",fill:"#fff",height:"16",viewBox:"0 0 16 16",width:"16",xmlns:"http://www.w3.org/2000/svg"},[p("path",{d:"M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"}),p("path",{d:"M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z","fill-rule":"evenodd"})],-1),w=p("svg",{class:"bi bi-earbuds",fill:"currentColor",height:"16",viewBox:"0 0 16 16",width:"16",xmlns:"http://www.w3.org/2000/svg"},[p("path",{d:"M6.825 4.138c.596 2.141-.36 3.593-2.389 4.117a4.432 4.432 0 0 1-2.018.054c-.048-.01.9 2.778 1.522 4.61l.41 1.205a.52.52 0 0 1-.346.659l-.593.19a.548.548 0 0 1-.69-.34L.184 6.99c-.696-2.137.662-4.309 2.564-4.8 2.029-.523 3.402 0 4.076 1.948zm-.868 2.221c.43-.112.561-.993.292-1.969-.269-.975-.836-1.675-1.266-1.563-.43.112-.561.994-.292 1.969.269.975.836 1.675 1.266 1.563zm3.218-2.221c-.596 2.141.36 3.593 2.389 4.117a4.434 4.434 0 0 0 2.018.054c.048-.01-.9 2.778-1.522 4.61l-.41 1.205a.52.52 0 0 0 .346.659l.593.19c.289.092.6-.06.69-.34l2.536-7.643c.696-2.137-.662-4.309-2.564-4.8-2.029-.523-3.402 0-4.076 1.948zm.868 2.221c-.43-.112-.561-.993-.292-1.969.269-.975.836-1.675 1.266-1.563.43.112.561.994.292 1.969-.269.975-.836 1.675-1.266 1.563z","fill-rule":"evenodd"})],-1),q={__name:"FwbToastExampleIcon",setup(r){return(E,y)=>(t(),e("div",f,[s(n(o),{closable:""},{icon:a(()=>[b]),default:a(()=>[l(" Scroll down to see more examples. ")]),_:1}),s(n(o),{closable:""},{icon:a(()=>[h]),default:a(()=>[l(" You have new friend request. ")]),_:1}),s(n(o),{closable:"",type:"success"},{icon:a(()=>[w]),default:a(()=>[l(" Your airpods are connected. ")]),_:1})]))}},v={class:"vp-raw grid gap-2"},_={__name:"FwbToastExampleDivide",setup(r){return(E,y)=>(t(),e("div",v,[s(n(o),{divide:""},{default:a(()=>[l(" You've unlocked achievement. ")]),_:1}),s(n(o),{divide:"",type:"warning"},{default:a(()=>[l(" Improve password difficulty. ")]),_:1}),s(n(o),{divide:"",type:"success"},{default:a(()=>[l(" Item moved successfully. ")]),_:1}),s(n(o),{divide:"",type:"danger"},{default:a(()=>[l(" Item has been deleted. ")]),_:1})]))}},C={class:"vp-raw"},B=p("img",{alt:"Jese Leos image",class:"w-8 h-8 rounded-full shadow-lg",src:"https://flowbite.com/docs/images/people/profile-picture-1.jpg"},null,-1),A=p("span",{class:"mb-1 text-sm font-semibold text-gray-900 dark:text-white"},"Jese Leos",-1),D=p("div",{class:"mb-2 text-sm font-normal"}," Hi Neil, thanks for sharing your thoughts regarding Flowbite. ",-1),x={__name:"FwbToastExampleMessage",setup(r){return(E,y)=>(t(),e("div",C,[s(n(o),{alignment:"start",closable:""},{icon:a(()=>[B]),default:a(()=>[A,D,s(n(i),{size:"xs",href:"#"},{default:a(()=>[l(" Reply ")]),_:1})]),_:1})]))}},T={class:"vp-raw"},k=p("svg",{"aria-hidden":"true",class:"w-5 h-5",fill:"#ffff",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z","fill-rule":"evenodd"})],-1),z=p("span",{class:"mb-1 text-sm font-semibold text-gray-900 dark:text-white"},"Update available",-1),I=p("div",{class:"mb-2 text-sm font-normal"}," A new software version is available for download. ",-1),V={class:"grid grid-cols-2 gap-2"},P={__name:"FwbToastExampleInteractive",setup(r){return(E,y)=>(t(),e("div",T,[s(n(u),{theme:"blue"},{default:a(()=>[s(n(o),{alignment:"start",closable:""},{icon:a(()=>[k]),default:a(()=>[z,I,p("div",V,[s(n(i),{size:"xs"},{default:a(()=>[l(" Update ")]),_:1}),s(n(i),{size:"xs",color:"alternative"},{default:a(()=>[l(" Not now ")]),_:1})])]),_:1})]),_:1})]))}},S=c('

Vue Toast - Flowbite ​

Push notifications to your users using the toast component and choose from multiple sizes, colors, styles, and positions ​

TIP

Original reference: https://flowbite.com/docs/components/toast/

The toast component can be used to enhance your website’s interactivity by pushing notifications to your visitors. You can choose from multiple styles, colors, sizes, and positions and even dismiss the component.

Prop - type ​

',6),H=c(`
vue
<template>
+  <fwb-toast>
+    You've unlocked achievement.
+  </fwb-toast>
+  <fwb-toast type="warning">
+    Improve password difficulty.
+  </fwb-toast>
+  <fwb-toast type="success">
+    Item moved successfully.
+  </fwb-toast>
+  <fwb-toast type="danger">
+    Item has been deleted.
+  </fwb-toast>
+</template>
+
+<script setup>
+import { FwbToast } from 'flowbite-vue'
+</script>
<template>
+  <fwb-toast>
+    You've unlocked achievement.
+  </fwb-toast>
+  <fwb-toast type="warning">
+    Improve password difficulty.
+  </fwb-toast>
+  <fwb-toast type="success">
+    Item moved successfully.
+  </fwb-toast>
+  <fwb-toast type="danger">
+    Item has been deleted.
+  </fwb-toast>
+</template>
+
+<script setup>
+import { FwbToast } from 'flowbite-vue'
+</script>

Prop - closable ​

`,2),M=c(`
vue
<template>
+  <fwb-toast closable>
+    You've unlocked achievement.
+  </fwb-toast>
+  <fwb-toast closable type="warning">
+    Improve password difficulty.
+  </fwb-toast>
+  <fwb-toast closable type="success">
+    Item moved successfully.
+  </fwb-toast>
+  <fwb-toast closable type="danger">
+    Item has been deleted.
+  </fwb-toast>
+</template>
+
+<script setup>
+import { FwbToast } from 'flowbite-vue'
+</script>
<template>
+  <fwb-toast closable>
+    You've unlocked achievement.
+  </fwb-toast>
+  <fwb-toast closable type="warning">
+    Improve password difficulty.
+  </fwb-toast>
+  <fwb-toast closable type="success">
+    Item moved successfully.
+  </fwb-toast>
+  <fwb-toast closable type="danger">
+    Item has been deleted.
+  </fwb-toast>
+</template>
+
+<script setup>
+import { FwbToast } from 'flowbite-vue'
+</script>

Prop - divide ​

`,2),$=c(`
vue
<template>
+  <fwb-toast divide>
+    You've unlocked achievement.
+  </fwb-toast>
+  <fwb-toast divide type="warning">
+    Improve password difficulty.
+  </fwb-toast>
+  <fwb-toast divide type="success">
+    Item moved successfully.
+  </fwb-toast>
+  <fwb-toast divide type="danger">
+    Item has been deleted.
+  </fwb-toast>
+</template>
+
+<script setup>
+import { FwbToast } from 'flowbite-vue'
+</script>
<template>
+  <fwb-toast divide>
+    You've unlocked achievement.
+  </fwb-toast>
+  <fwb-toast divide type="warning">
+    Improve password difficulty.
+  </fwb-toast>
+  <fwb-toast divide type="success">
+    Item moved successfully.
+  </fwb-toast>
+  <fwb-toast divide type="danger">
+    Item has been deleted.
+  </fwb-toast>
+</template>
+
+<script setup>
+import { FwbToast } from 'flowbite-vue'
+</script>

Message ​

`,2),N=c(`
vue
<template>
+  <fwb-toast alignment="start" closable>
+    <template #icon>
+      <img
+        alt="Jese Leos image" class="w-8 h-8 rounded-full shadow-lg" src="avatar.jpg">
+    </template>
+    <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>
+    <div class="mb-2 text-sm font-normal">
+      Hi Neil, thanks for sharing your thoughts regarding Flowbite.
+    </div>
+    <fwb-button size="xs" href="#">
+      Reply
+    </fwb-button>
+  </fwb-toast>
+</template>
+
+<script setup>
+import { FwbButton, FwbToast } from 'flowbite-vue'
+</script>
<template>
+  <fwb-toast alignment="start" closable>
+    <template #icon>
+      <img
+        alt="Jese Leos image" class="w-8 h-8 rounded-full shadow-lg" src="avatar.jpg">
+    </template>
+    <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>
+    <div class="mb-2 text-sm font-normal">
+      Hi Neil, thanks for sharing your thoughts regarding Flowbite.
+    </div>
+    <fwb-button size="xs" href="#">
+      Reply
+    </fwb-button>
+  </fwb-toast>
+</template>
+
+<script setup>
+import { FwbButton, FwbToast } from 'flowbite-vue'
+</script>

Interactive ​

`,2),Y=c(`
vue
<template>
+  <flowbite-themable theme="blue">
+    <fwb-toast alignment="start" closable>
+      <template #icon>
+        <svg aria-hidden="true" class="w-5 h-5" fill="#ffff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" fill-rule="evenodd" />
+        </svg>
+      </template>
+      <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Update available</span>
+      <div class="mb-2 text-sm font-normal">
+        A new software version is available for download.
+      </div>
+      <div class="grid grid-cols-2 gap-2">
+        <fwb-button size="xs">
+          Update
+        </fwb-button>
+        <fwb-button size="xs" color="alternative">
+          Not now
+        </fwb-button>
+      </div>
+    </fwb-toast>
+  </flowbite-themable>
+</template>
+
+<script setup>
+import { FlowbiteThemable, FwbButton, FwbToast } from 'flowbite-vue'
+</script>
<template>
+  <flowbite-themable theme="blue">
+    <fwb-toast alignment="start" closable>
+      <template #icon>
+        <svg aria-hidden="true" class="w-5 h-5" fill="#ffff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" fill-rule="evenodd" />
+        </svg>
+      </template>
+      <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Update available</span>
+      <div class="mb-2 text-sm font-normal">
+        A new software version is available for download.
+      </div>
+      <div class="grid grid-cols-2 gap-2">
+        <fwb-button size="xs">
+          Update
+        </fwb-button>
+        <fwb-button size="xs" color="alternative">
+          Not now
+        </fwb-button>
+      </div>
+    </fwb-toast>
+  </flowbite-themable>
+</template>
+
+<script setup>
+import { FlowbiteThemable, FwbButton, FwbToast } from 'flowbite-vue'
+</script>

Slot - icon ​

You can use icon slot for rendering your own icons. Also you can change icon background color by using FlowbiteThemable

`,3),R=c(`
vue
<template>
+  <fwb-toast closable>
+    <template #icon>
+      <svg class="bi bi-mouse" fill="#fff" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+        <path d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8a4 4 0 0 1-8 0V5a4 4 0 1 1 8 0v6zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5z" />
+      </svg>
+    </template>
+    Scroll down to see more examples.
+  </fwb-toast>
+  <fwb-toast closable>
+    <template #icon>
+      <svg class="bi bi-person-plus" fill="#fff" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z" />
+        <path d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z" fill-rule="evenodd" />
+      </svg>
+    </template>
+    You have new friend request.
+  </fwb-toast>
+  <fwb-toast closabletype="success">
+    <template #icon>
+      <svg class="bi bi-earbuds" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6.825 4.138c.596 2.141-.36 3.593-2.389 4.117a4.432 4.432 0 0 1-2.018.054c-.048-.01.9 2.778 1.522 4.61l.41 1.205a.52.52 0 0 1-.346.659l-.593.19a.548.548 0 0 1-.69-.34L.184 6.99c-.696-2.137.662-4.309 2.564-4.8 2.029-.523 3.402 0 4.076 1.948zm-.868 2.221c.43-.112.561-.993.292-1.969-.269-.975-.836-1.675-1.266-1.563-.43.112-.561.994-.292 1.969.269.975.836 1.675 1.266 1.563zm3.218-2.221c-.596 2.141.36 3.593 2.389 4.117a4.434 4.434 0 0 0 2.018.054c.048-.01-.9 2.778-1.522 4.61l-.41 1.205a.52.52 0 0 0 .346.659l.593.19c.289.092.6-.06.69-.34l2.536-7.643c.696-2.137-.662-4.309-2.564-4.8-2.029-.523-3.402 0-4.076 1.948zm.868 2.221c-.43-.112-.561-.993-.292-1.969.269-.975.836-1.675 1.266-1.563.43.112.561.994.292 1.969-.269.975-.836 1.675-1.266 1.563z" fill-rule="evenodd" />
+      </svg>
+    </template>
+    Your airpods are connected.
+  </fwb-toast>
+</template>
+
+<script setup>
+import { FwbToast } from 'flowbite-vue'
+</script>
<template>
+  <fwb-toast closable>
+    <template #icon>
+      <svg class="bi bi-mouse" fill="#fff" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+        <path d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8a4 4 0 0 1-8 0V5a4 4 0 1 1 8 0v6zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5z" />
+      </svg>
+    </template>
+    Scroll down to see more examples.
+  </fwb-toast>
+  <fwb-toast closable>
+    <template #icon>
+      <svg class="bi bi-person-plus" fill="#fff" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z" />
+        <path d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z" fill-rule="evenodd" />
+      </svg>
+    </template>
+    You have new friend request.
+  </fwb-toast>
+  <fwb-toast closabletype="success">
+    <template #icon>
+      <svg class="bi bi-earbuds" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6.825 4.138c.596 2.141-.36 3.593-2.389 4.117a4.432 4.432 0 0 1-2.018.054c-.048-.01.9 2.778 1.522 4.61l.41 1.205a.52.52 0 0 1-.346.659l-.593.19a.548.548 0 0 1-.69-.34L.184 6.99c-.696-2.137.662-4.309 2.564-4.8 2.029-.523 3.402 0 4.076 1.948zm-.868 2.221c.43-.112.561-.993.292-1.969-.269-.975-.836-1.675-1.266-1.563-.43.112-.561.994-.292 1.969.269.975.836 1.675 1.266 1.563zm3.218-2.221c-.596 2.141.36 3.593 2.389 4.117a4.434 4.434 0 0 0 2.018.054c.048-.01-.9 2.778-1.522 4.61l-.41 1.205a.52.52 0 0 0 .346.659l.593.19c.289.092.6-.06.69-.34l2.536-7.643c.696-2.137-.662-4.309-2.564-4.8-2.029-.523-3.402 0-4.076 1.948zm.868 2.221c-.43-.112-.561-.993-.292-1.969.269-.975.836-1.675 1.266-1.563.43.112.561.994.292 1.969-.269.975-.836 1.675-1.266 1.563z" fill-rule="evenodd" />
+      </svg>
+    </template>
+    Your airpods are connected.
+  </fwb-toast>
+</template>
+
+<script setup>
+import { FwbToast } from 'flowbite-vue'
+</script>
`,1),Z=JSON.parse('{"title":"Vue Toast - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/toast.md","filePath":"components/toast.md"}'),L={name:"components/toast.md"},ss=Object.assign(L,{setup(r){return(E,y)=>(t(),e("div",null,[S,s(F),H,s(m),M,s(_),$,s(x),N,s(P),Y,s(q),R]))}});export{Z as __pageData,ss as default}; diff --git a/docs/.vitepress/dist/assets/components_toast.md.552e0ecb.lean.js b/docs/.vitepress/dist/assets/components_toast.md.552e0ecb.lean.js new file mode 100644 index 0000000..1bcf3fe --- /dev/null +++ b/docs/.vitepress/dist/assets/components_toast.md.552e0ecb.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as o}from"./chunks/FwbToast.vue_vue_type_script_setup_true_lang.8ed93404.js";import{o as t,c as e,H as s,w as a,a as l,l as n,k as p,Q as c}from"./chunks/framework.3f630664.js";import{_ as i}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as u}from"./chunks/FlowbiteThemable.vue_vue_type_script_setup_true_lang.e3bec3bf.js";import"./chunks/simplifyTailwindClasses.275301d3.js";import"./chunks/useFlowbiteThemable.013ea29e.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const d={class:"vp-raw grid gap-2"},F={__name:"FwbToastExample",setup(r){return(E,y)=>(t(),e("div",d,[s(n(o),null,{default:a(()=>[l(" You've unlocked achievement. ")]),_:1}),s(n(o),{type:"warning"},{default:a(()=>[l(" Improve password difficulty. ")]),_:1}),s(n(o),{type:"success"},{default:a(()=>[l(" Item moved successfully. ")]),_:1}),s(n(o),{type:"danger"},{default:a(()=>[l(" Item has been deleted. ")]),_:1})]))}},g={class:"vp-raw grid gap-2"},m={__name:"FwbToastExampleClosable",setup(r){return(E,y)=>(t(),e("div",g,[s(n(o),{closable:""},{default:a(()=>[l(" You've unlocked achievement. ")]),_:1}),s(n(o),{closable:"",type:"warning"},{default:a(()=>[l(" Improve password difficulty. ")]),_:1}),s(n(o),{closable:"",type:"success"},{default:a(()=>[l(" Item moved successfully. ")]),_:1}),s(n(o),{closable:"",type:"danger"},{default:a(()=>[l(" Item has been deleted. ")]),_:1})]))}},f={class:"vp-raw grid gap-2"},b=p("svg",{class:"bi bi-mouse",fill:"#fff",height:"16",viewBox:"0 0 16 16",width:"16",xmlns:"http://www.w3.org/2000/svg"},[p("path",{d:"M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8a4 4 0 0 1-8 0V5a4 4 0 1 1 8 0v6zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5z"})],-1),h=p("svg",{class:"bi bi-person-plus",fill:"#fff",height:"16",viewBox:"0 0 16 16",width:"16",xmlns:"http://www.w3.org/2000/svg"},[p("path",{d:"M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"}),p("path",{d:"M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z","fill-rule":"evenodd"})],-1),w=p("svg",{class:"bi bi-earbuds",fill:"currentColor",height:"16",viewBox:"0 0 16 16",width:"16",xmlns:"http://www.w3.org/2000/svg"},[p("path",{d:"M6.825 4.138c.596 2.141-.36 3.593-2.389 4.117a4.432 4.432 0 0 1-2.018.054c-.048-.01.9 2.778 1.522 4.61l.41 1.205a.52.52 0 0 1-.346.659l-.593.19a.548.548 0 0 1-.69-.34L.184 6.99c-.696-2.137.662-4.309 2.564-4.8 2.029-.523 3.402 0 4.076 1.948zm-.868 2.221c.43-.112.561-.993.292-1.969-.269-.975-.836-1.675-1.266-1.563-.43.112-.561.994-.292 1.969.269.975.836 1.675 1.266 1.563zm3.218-2.221c-.596 2.141.36 3.593 2.389 4.117a4.434 4.434 0 0 0 2.018.054c.048-.01-.9 2.778-1.522 4.61l-.41 1.205a.52.52 0 0 0 .346.659l.593.19c.289.092.6-.06.69-.34l2.536-7.643c.696-2.137-.662-4.309-2.564-4.8-2.029-.523-3.402 0-4.076 1.948zm.868 2.221c-.43-.112-.561-.993-.292-1.969.269-.975.836-1.675 1.266-1.563.43.112.561.994.292 1.969-.269.975-.836 1.675-1.266 1.563z","fill-rule":"evenodd"})],-1),q={__name:"FwbToastExampleIcon",setup(r){return(E,y)=>(t(),e("div",f,[s(n(o),{closable:""},{icon:a(()=>[b]),default:a(()=>[l(" Scroll down to see more examples. ")]),_:1}),s(n(o),{closable:""},{icon:a(()=>[h]),default:a(()=>[l(" You have new friend request. ")]),_:1}),s(n(o),{closable:"",type:"success"},{icon:a(()=>[w]),default:a(()=>[l(" Your airpods are connected. ")]),_:1})]))}},v={class:"vp-raw grid gap-2"},_={__name:"FwbToastExampleDivide",setup(r){return(E,y)=>(t(),e("div",v,[s(n(o),{divide:""},{default:a(()=>[l(" You've unlocked achievement. ")]),_:1}),s(n(o),{divide:"",type:"warning"},{default:a(()=>[l(" Improve password difficulty. ")]),_:1}),s(n(o),{divide:"",type:"success"},{default:a(()=>[l(" Item moved successfully. ")]),_:1}),s(n(o),{divide:"",type:"danger"},{default:a(()=>[l(" Item has been deleted. ")]),_:1})]))}},C={class:"vp-raw"},B=p("img",{alt:"Jese Leos image",class:"w-8 h-8 rounded-full shadow-lg",src:"https://flowbite.com/docs/images/people/profile-picture-1.jpg"},null,-1),A=p("span",{class:"mb-1 text-sm font-semibold text-gray-900 dark:text-white"},"Jese Leos",-1),D=p("div",{class:"mb-2 text-sm font-normal"}," Hi Neil, thanks for sharing your thoughts regarding Flowbite. ",-1),x={__name:"FwbToastExampleMessage",setup(r){return(E,y)=>(t(),e("div",C,[s(n(o),{alignment:"start",closable:""},{icon:a(()=>[B]),default:a(()=>[A,D,s(n(i),{size:"xs",href:"#"},{default:a(()=>[l(" Reply ")]),_:1})]),_:1})]))}},T={class:"vp-raw"},k=p("svg",{"aria-hidden":"true",class:"w-5 h-5",fill:"#ffff",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z","fill-rule":"evenodd"})],-1),z=p("span",{class:"mb-1 text-sm font-semibold text-gray-900 dark:text-white"},"Update available",-1),I=p("div",{class:"mb-2 text-sm font-normal"}," A new software version is available for download. ",-1),V={class:"grid grid-cols-2 gap-2"},P={__name:"FwbToastExampleInteractive",setup(r){return(E,y)=>(t(),e("div",T,[s(n(u),{theme:"blue"},{default:a(()=>[s(n(o),{alignment:"start",closable:""},{icon:a(()=>[k]),default:a(()=>[z,I,p("div",V,[s(n(i),{size:"xs"},{default:a(()=>[l(" Update ")]),_:1}),s(n(i),{size:"xs",color:"alternative"},{default:a(()=>[l(" Not now ")]),_:1})])]),_:1})]),_:1})]))}},S=c("",6),H=c("",2),M=c("",2),$=c("",2),N=c("",2),Y=c("",3),R=c("",1),Z=JSON.parse('{"title":"Vue Toast - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/toast.md","filePath":"components/toast.md"}'),L={name:"components/toast.md"},ss=Object.assign(L,{setup(r){return(E,y)=>(t(),e("div",null,[S,s(F),H,s(m),M,s(_),$,s(x),N,s(P),Y,s(q),R]))}});export{Z as __pageData,ss as default}; diff --git a/docs/.vitepress/dist/assets/components_toastProvider_toastProvider.md.9ae8b914.js b/docs/.vitepress/dist/assets/components_toastProvider_toastProvider.md.9ae8b914.js new file mode 100644 index 0000000..6499a91 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_toastProvider_toastProvider.md.9ae8b914.js @@ -0,0 +1 @@ +import{d as y,h as b,U as T,aj as f,ak as $,_ as P,M as C,o as v,b as g,w as d,H as u,l as c,L as S,k as o,r as I,a as p,c as x,a0 as h,a5 as F,E as N,a6 as V}from"./chunks/framework.3f630664.js";import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_}from"./chunks/FwbToast.vue_vue_type_script_setup_true_lang.8ed93404.js";import{h as E}from"./chunks/index.6b4d4439.js";import{_ as m}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as U}from"./chunks/FlowbiteThemable.vue_vue_type_script_setup_true_lang.e3bec3bf.js";import"./chunks/simplifyTailwindClasses.275301d3.js";import"./chunks/useFlowbiteThemable.013ea29e.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const w="flowbite-toast-injection-key",B=y({components:{FwbToast:_},props:{transition:{type:String,default:"slide-left"}},setup(){const e=b([]),r=(i,s)=>{E(()=>t(i),s)},a=i=>{const s=parseInt((new Date().getTime()*Math.random()).toString()).toString();return e.value.push({id:s,...i}),i.time>0&&r(s,i.time),s},l=()=>{if(e.value.length===0)return"";const i=e.value[e.value.length-1].id;return e.value.pop(),i},t=i=>{const s=e.value.findIndex(n=>n.id===i);return s>=0&&e.value.splice(s,1),s>=0};return T(w,{add:a,pop:l,remove:t}),{toasts:e,removeToast:t}},render(){const{$props:e,$slots:r,toasts:a,removeToast:l}=this;return f("div",{},[r.default?r.default():null,f($,{name:e.transition,tag:"div",class:"xl:w-1/6 md:w-1/4 sm:w-1/4 fixed top-3 right-3 flex flex-col gap-2 z-50"},{default:()=>a.map(t=>t.component?f(t.component,{key:t.id,onClose:()=>l(t.id),...t.componentProps?t.componentProps:{}},()=>t.text):f(_,{closable:!0,type:t.type,key:t.id,onClose:()=>l(t.id)},()=>t.text))})])}}),z=P(B,[["__scopeId","data-v-235a549a"]]);function A(){const e=C(w,null);return e===null&&console.warn("Cannot use useToast outside component. Please wrap your component with "),{add:t=>e?e==null?void 0:e.add(t):"",remove:t=>e?e==null?void 0:e.remove(t):!1,pop:()=>e?e==null?void 0:e.pop():""}}const D=o("svg",{"aria-hidden":"true",class:"w-5 h-5",fill:"#ffff",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{"fill-rule":"evenodd",d:"M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z","clip-rule":"evenodd"})],-1),H=o("span",{class:"mb-1 text-sm font-semibold text-gray-900 dark:text-white"},"Update available",-1),M={class:"mb-2 text-sm font-normal"},O={class:"grid grid-cols-2 gap-2"},J={__name:"UpdateToast",emits:["close"],setup(e){return(r,a)=>(v(),g(c(U),{theme:"blue"},{default:d(()=>[u(c(_),S(r.$attrs,{onClose:a[0]||(a[0]=l=>r.$emit("close"))}),{icon:d(()=>[D]),default:d(()=>[H,o("div",M,[I(r.$slots,"default")]),o("div",O,[u(c(m),{size:"xs"},{default:d(()=>[p(" Update ")]),_:1}),u(c(m),{size:"xs",color:"alternative"},{default:d(()=>[p(" Not now ")]),_:1})])]),_:3},16)]),_:3}))}},R={class:"flex flex-col gap-2"},W=o("label",{for:"ms",class:"block text-sm font-medium text-gray-900 dark:text-gray-400"},"Duration(ms)",-1),G={class:"flex gap-2"},L={class:"flex"},q={__name:"FwbToastProviderExampleChild",setup(e){const r=b(5e3),a=A(),l=()=>{a.add({time:parseInt(r.value)||0,text:"A new software version is available for download.",component:N(J),componentProps:{alignment:"start",closable:!0}})},t=s=>{if(s==="update")return l();a.add({type:s,time:parseInt(r.value)||0,text:`${s} alert! Hello world!`})},i=()=>{a.pop()};return(s,n)=>(v(),x("div",R,[W,h(o("input",{id:"ms","onUpdate:modelValue":n[0]||(n[0]=k=>r.value=k),type:"number",class:"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",placeholder:"John",required:""},null,512),[[F,r.value,void 0,{number:!0}]]),o("div",G,[u(c(m),{color:"green",onClick:n[1]||(n[1]=()=>t("success"))},{default:d(()=>[p(" success ")]),_:1}),u(c(m),{color:"yellow",onClick:n[2]||(n[2]=()=>t("warning"))},{default:d(()=>[p(" warning ")]),_:1}),u(c(m),{color:"red",onClick:n[3]||(n[3]=()=>t("danger"))},{default:d(()=>[p(" danger ")]),_:1}),u(c(m),{color:"purple",onClick:n[4]||(n[4]=()=>t("update"))},{default:d(()=>[p(" update ")]),_:1})]),o("div",L,[u(c(m),{color:"alternative",onClick:i},{default:d(()=>[p(" pop ")]),_:1})])]))}},K=o("label",{for:"countries",class:"block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"},"Select transition",-1),Y=o("option",{value:"slide-left"}," Slide left ",-1),Q=o("option",{value:"slide-right"}," Slide right ",-1),X=o("option",{value:"slide-top"}," Slide top ",-1),Z=o("option",{value:"slide-bottom"}," Slide bottom ",-1),j=o("option",{value:"fade"}," Fade ",-1),ee=[Y,Q,X,Z,j],te={class:"vp-raw flex align-center gap-2 flex-wrap flex-col"},oe={__name:"FwbToastProviderExample",setup(e){const r=b("slide-left");return(a,l)=>(v(),g(c(z),{transition:r.value},{default:d(()=>[K,h(o("select",{id:"countries","onUpdate:modelValue":l[0]||(l[0]=t=>r.value=t),class:"mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"},ee,512),[[V,r.value]]),o("div",te,[u(q)])]),_:1},8,["transition"]))}},re=o("h1",{id:"vue-toast-provider-flowbite",tabindex:"-1"},[p("Vue Toast Provider - Flowbite "),o("a",{class:"header-anchor",href:"#vue-toast-provider-flowbite","aria-label":'Permalink to "Vue Toast Provider - Flowbite"'},"​")],-1),se=o("div",{class:"warning custom-block"},[o("p",{class:"custom-block-title"},"WARNING"),o("p",null,"WIP, Do not use it in production")],-1),_e=JSON.parse('{"title":"Vue Toast Provider - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/toastProvider/toastProvider.md","filePath":"components/toastProvider/toastProvider.md"}'),ae={name:"components/toastProvider/toastProvider.md"},be=Object.assign(ae,{setup(e){return(r,a)=>(v(),x("div",null,[re,se,u(oe)]))}});export{_e as __pageData,be as default}; diff --git a/docs/.vitepress/dist/assets/components_toastProvider_toastProvider.md.9ae8b914.lean.js b/docs/.vitepress/dist/assets/components_toastProvider_toastProvider.md.9ae8b914.lean.js new file mode 100644 index 0000000..6499a91 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_toastProvider_toastProvider.md.9ae8b914.lean.js @@ -0,0 +1 @@ +import{d as y,h as b,U as T,aj as f,ak as $,_ as P,M as C,o as v,b as g,w as d,H as u,l as c,L as S,k as o,r as I,a as p,c as x,a0 as h,a5 as F,E as N,a6 as V}from"./chunks/framework.3f630664.js";import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_}from"./chunks/FwbToast.vue_vue_type_script_setup_true_lang.8ed93404.js";import{h as E}from"./chunks/index.6b4d4439.js";import{_ as m}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as U}from"./chunks/FlowbiteThemable.vue_vue_type_script_setup_true_lang.e3bec3bf.js";import"./chunks/simplifyTailwindClasses.275301d3.js";import"./chunks/useFlowbiteThemable.013ea29e.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const w="flowbite-toast-injection-key",B=y({components:{FwbToast:_},props:{transition:{type:String,default:"slide-left"}},setup(){const e=b([]),r=(i,s)=>{E(()=>t(i),s)},a=i=>{const s=parseInt((new Date().getTime()*Math.random()).toString()).toString();return e.value.push({id:s,...i}),i.time>0&&r(s,i.time),s},l=()=>{if(e.value.length===0)return"";const i=e.value[e.value.length-1].id;return e.value.pop(),i},t=i=>{const s=e.value.findIndex(n=>n.id===i);return s>=0&&e.value.splice(s,1),s>=0};return T(w,{add:a,pop:l,remove:t}),{toasts:e,removeToast:t}},render(){const{$props:e,$slots:r,toasts:a,removeToast:l}=this;return f("div",{},[r.default?r.default():null,f($,{name:e.transition,tag:"div",class:"xl:w-1/6 md:w-1/4 sm:w-1/4 fixed top-3 right-3 flex flex-col gap-2 z-50"},{default:()=>a.map(t=>t.component?f(t.component,{key:t.id,onClose:()=>l(t.id),...t.componentProps?t.componentProps:{}},()=>t.text):f(_,{closable:!0,type:t.type,key:t.id,onClose:()=>l(t.id)},()=>t.text))})])}}),z=P(B,[["__scopeId","data-v-235a549a"]]);function A(){const e=C(w,null);return e===null&&console.warn("Cannot use useToast outside component. Please wrap your component with "),{add:t=>e?e==null?void 0:e.add(t):"",remove:t=>e?e==null?void 0:e.remove(t):!1,pop:()=>e?e==null?void 0:e.pop():""}}const D=o("svg",{"aria-hidden":"true",class:"w-5 h-5",fill:"#ffff",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[o("path",{"fill-rule":"evenodd",d:"M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z","clip-rule":"evenodd"})],-1),H=o("span",{class:"mb-1 text-sm font-semibold text-gray-900 dark:text-white"},"Update available",-1),M={class:"mb-2 text-sm font-normal"},O={class:"grid grid-cols-2 gap-2"},J={__name:"UpdateToast",emits:["close"],setup(e){return(r,a)=>(v(),g(c(U),{theme:"blue"},{default:d(()=>[u(c(_),S(r.$attrs,{onClose:a[0]||(a[0]=l=>r.$emit("close"))}),{icon:d(()=>[D]),default:d(()=>[H,o("div",M,[I(r.$slots,"default")]),o("div",O,[u(c(m),{size:"xs"},{default:d(()=>[p(" Update ")]),_:1}),u(c(m),{size:"xs",color:"alternative"},{default:d(()=>[p(" Not now ")]),_:1})])]),_:3},16)]),_:3}))}},R={class:"flex flex-col gap-2"},W=o("label",{for:"ms",class:"block text-sm font-medium text-gray-900 dark:text-gray-400"},"Duration(ms)",-1),G={class:"flex gap-2"},L={class:"flex"},q={__name:"FwbToastProviderExampleChild",setup(e){const r=b(5e3),a=A(),l=()=>{a.add({time:parseInt(r.value)||0,text:"A new software version is available for download.",component:N(J),componentProps:{alignment:"start",closable:!0}})},t=s=>{if(s==="update")return l();a.add({type:s,time:parseInt(r.value)||0,text:`${s} alert! Hello world!`})},i=()=>{a.pop()};return(s,n)=>(v(),x("div",R,[W,h(o("input",{id:"ms","onUpdate:modelValue":n[0]||(n[0]=k=>r.value=k),type:"number",class:"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",placeholder:"John",required:""},null,512),[[F,r.value,void 0,{number:!0}]]),o("div",G,[u(c(m),{color:"green",onClick:n[1]||(n[1]=()=>t("success"))},{default:d(()=>[p(" success ")]),_:1}),u(c(m),{color:"yellow",onClick:n[2]||(n[2]=()=>t("warning"))},{default:d(()=>[p(" warning ")]),_:1}),u(c(m),{color:"red",onClick:n[3]||(n[3]=()=>t("danger"))},{default:d(()=>[p(" danger ")]),_:1}),u(c(m),{color:"purple",onClick:n[4]||(n[4]=()=>t("update"))},{default:d(()=>[p(" update ")]),_:1})]),o("div",L,[u(c(m),{color:"alternative",onClick:i},{default:d(()=>[p(" pop ")]),_:1})])]))}},K=o("label",{for:"countries",class:"block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"},"Select transition",-1),Y=o("option",{value:"slide-left"}," Slide left ",-1),Q=o("option",{value:"slide-right"}," Slide right ",-1),X=o("option",{value:"slide-top"}," Slide top ",-1),Z=o("option",{value:"slide-bottom"}," Slide bottom ",-1),j=o("option",{value:"fade"}," Fade ",-1),ee=[Y,Q,X,Z,j],te={class:"vp-raw flex align-center gap-2 flex-wrap flex-col"},oe={__name:"FwbToastProviderExample",setup(e){const r=b("slide-left");return(a,l)=>(v(),g(c(z),{transition:r.value},{default:d(()=>[K,h(o("select",{id:"countries","onUpdate:modelValue":l[0]||(l[0]=t=>r.value=t),class:"mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"},ee,512),[[V,r.value]]),o("div",te,[u(q)])]),_:1},8,["transition"]))}},re=o("h1",{id:"vue-toast-provider-flowbite",tabindex:"-1"},[p("Vue Toast Provider - Flowbite "),o("a",{class:"header-anchor",href:"#vue-toast-provider-flowbite","aria-label":'Permalink to "Vue Toast Provider - Flowbite"'},"​")],-1),se=o("div",{class:"warning custom-block"},[o("p",{class:"custom-block-title"},"WARNING"),o("p",null,"WIP, Do not use it in production")],-1),_e=JSON.parse('{"title":"Vue Toast Provider - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/toastProvider/toastProvider.md","filePath":"components/toastProvider/toastProvider.md"}'),ae={name:"components/toastProvider/toastProvider.md"},be=Object.assign(ae,{setup(e){return(r,a)=>(v(),x("div",null,[re,se,u(oe)]))}});export{_e as __pageData,be as default}; diff --git a/docs/.vitepress/dist/assets/components_toggle.md.05a55234.js b/docs/.vitepress/dist/assets/components_toggle.md.05a55234.js new file mode 100644 index 0000000..3921c17 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_toggle.md.05a55234.js @@ -0,0 +1,85 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as u,d as q,$ as v,o as y,c as i,a0 as w,a1 as B,k as b,n as f,l,t as T,h as E,H as a,Q as d}from"./chunks/framework.3f630664.js";const A="w-fit relative inline-flex items-center cursor-pointer",k='bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[""] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600',D="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300",V={lg:"w-14 h-7 after:top-0.5 after:left-[4px] after:h-6 after:w-6",md:"w-11 h-6 after:top-[2px] after:left-[2px] after:h-5 after:w-5",sm:"w-9 h-5 after:top-[2px] after:left-[2px] after:h-4 after:w-4"},x={red:"peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600",green:"peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600",purple:"peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600",yellow:"peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-400",teal:"peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600",orange:"peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:bg-orange-500"};function S(c){const s=u(()=>A),t=u(()=>k),n=u(()=>V[c.size.value]),e=u(()=>x[c.color.value]),g=u(()=>D);return{labelClasses:s,toggleSize:n,toggleClasses:t,toggleColor:e,toggleBallClasses:g}}const z=["disabled"],r=q({__name:"FwbToggle",props:{color:{default:""},disabled:{type:Boolean,default:!1},label:{default:""},modelValue:{type:Boolean,default:!1},size:{default:"md"}},emits:["update:modelValue"],setup(c,{emit:s}){const t=c,n=s,e=u({get(){return t.modelValue},set(m){n("update:modelValue",m)}}),{labelClasses:g,toggleSize:F,toggleClasses:_,toggleColor:o,toggleBallClasses:p}=S(v(t));return(m,C)=>(y(),i("label",{class:f(l(g))},[w(b("input",{"onUpdate:modelValue":C[0]||(C[0]=h=>e.value=h),disabled:m.disabled,class:"sr-only peer",type:"checkbox"},null,8,z),[[B,e.value]]),b("span",{class:f([l(_),l(F),l(o)])},null,2),b("span",{class:f(l(p))},T(m.label),3)],2))}}),P={class:"vp-raw"},I={__name:"FwbToggleExample",setup(c){const s=E(!1);return(t,n)=>(y(),i("div",P,[a(l(r),{modelValue:s.value,"onUpdate:modelValue":n[0]||(n[0]=e=>s.value=e),label:"Toggle me"},null,8,["modelValue"])]))}},$={class:"vp-raw"},U={__name:"FwbToggleExampleChecked",setup(c){const s=E(!0);return(t,n)=>(y(),i("div",$,[a(l(r),{modelValue:s.value,"onUpdate:modelValue":n[0]||(n[0]=e=>s.value=e),label:"Toggle me"},null,8,["modelValue"])]))}},N={class:"vp-raw flex justify-between flex-wrap gap-2"},R={__name:"FwbToggleExampleColors",setup(c){const s=E(!0),t=E(!0),n=E(!0),e=E(!0),g=E(!0),F=E(!0);return(_,o)=>(y(),i("div",N,[a(l(r),{modelValue:s.value,"onUpdate:modelValue":o[0]||(o[0]=p=>s.value=p),label:"Red",color:"red"},null,8,["modelValue"]),a(l(r),{modelValue:t.value,"onUpdate:modelValue":o[1]||(o[1]=p=>t.value=p),label:"Green",color:"green"},null,8,["modelValue"]),a(l(r),{modelValue:n.value,"onUpdate:modelValue":o[2]||(o[2]=p=>n.value=p),label:"Purple",color:"purple"},null,8,["modelValue"]),a(l(r),{modelValue:e.value,"onUpdate:modelValue":o[3]||(o[3]=p=>e.value=p),label:"Yellow",color:"yellow"},null,8,["modelValue"]),a(l(r),{modelValue:g.value,"onUpdate:modelValue":o[4]||(o[4]=p=>g.value=p),label:"Teal",color:"teal"},null,8,["modelValue"]),a(l(r),{modelValue:F.value,"onUpdate:modelValue":o[5]||(o[5]=p=>F.value=p),label:"Orange",color:"orange"},null,8,["modelValue"])]))}},O={class:"vp-raw"},L={__name:"FwbToggleExampleDisabled",setup(c){const s=E(!1);return(t,n)=>(y(),i("div",O,[a(l(r),{modelValue:s.value,"onUpdate:modelValue":n[0]||(n[0]=e=>s.value=e),disabled:"",label:"Can't Toggle me"},null,8,["modelValue"])]))}},M={class:"vp-raw grid gap-3"},G={__name:"FwbToggleExampleSize",setup(c){return(s,t)=>(y(),i("div",M,[a(l(r),{label:"Small",size:"sm"}),a(l(r),{label:"Medium",size:"md"}),a(l(r),{label:"Large",size:"lg"})]))}},Y=d('

Vue Toggle - Flowbite ​

Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colors ​

TIP

Original reference: https://flowbite.com/docs/forms/toggle/

The toggle component can be used to receive a simple “yes” or “no” type of answer from the user by choosing a single option from two options available in multiple sizes, styles, and colors coded with the utility classes from Tailwind CSS and with dark mode support.

Default toggle ​

',6),j=d(`
vue
<template>
+  <fwb-toggle v-model="toggle" label="Toggle me" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbToggle } from 'flowbite-vue'
+
+const toggle = ref(false)
+</script>
<template>
+  <fwb-toggle v-model="toggle" label="Toggle me" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbToggle } from 'flowbite-vue'
+
+const toggle = ref(false)
+</script>

Checked toggle ​

`,2),H=d(`
vue
<template>
+  <fwb-toggle v-model="toggle" label="Toggle me" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbToggle } from 'flowbite-vue'
+
+const toggle = ref(true)
+</script>
<template>
+  <fwb-toggle v-model="toggle" label="Toggle me" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbToggle } from 'flowbite-vue'
+
+const toggle = ref(true)
+</script>

Disabled toggle ​

`,2),J=d(`
vue
<template>
+  <fwb-toggle v-model="toggle" disabled label="Can't Toggle me" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbToggle } from 'flowbite'
+
+const toggle = ref(false)
+</script>
<template>
+  <fwb-toggle v-model="toggle" disabled label="Can't Toggle me" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbToggle } from 'flowbite'
+
+const toggle = ref(false)
+</script>

Colors ​

`,2),Q=d(`
vue
<template>
+  <fwb-toggle label="Red" color="red" />
+  <fwb-toggle label="Green" color="green" />
+  <fwb-toggle label="Purple" color="purple" />
+  <fwb-toggle label="Yellow" color="yellow" />
+  <fwb-toggle label="Teal" color="teal" />
+  <fwb-toggle label="Orange" color="orange" />
+</template>
<template>
+  <fwb-toggle label="Red" color="red" />
+  <fwb-toggle label="Green" color="green" />
+  <fwb-toggle label="Purple" color="purple" />
+  <fwb-toggle label="Yellow" color="yellow" />
+  <fwb-toggle label="Teal" color="teal" />
+  <fwb-toggle label="Orange" color="orange" />
+</template>

Size ​

`,2),K=d(`
vue
<template>
+  <fwb-toggle label="Small" size="sm" />
+  <fwb-toggle label="Medium" size="md" />
+  <fwb-toggle label="Large" size="lg" />
+</template>
+
+<script setup>
+import { FwbToggle } from 'flowbite-vue'
+</script>
<template>
+  <fwb-toggle label="Small" size="sm" />
+  <fwb-toggle label="Medium" size="md" />
+  <fwb-toggle label="Large" size="lg" />
+</template>
+
+<script setup>
+import { FwbToggle } from 'flowbite-vue'
+</script>
`,1),ss=JSON.parse('{"title":"Vue Toggle - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/toggle.md","filePath":"components/toggle.md"}'),W={name:"components/toggle.md"},ls=Object.assign(W,{setup(c){return(s,t)=>(y(),i("div",null,[Y,a(I),j,a(U),H,a(L),J,a(R),Q,a(G),K]))}});export{ss as __pageData,ls as default}; diff --git a/docs/.vitepress/dist/assets/components_toggle.md.05a55234.lean.js b/docs/.vitepress/dist/assets/components_toggle.md.05a55234.lean.js new file mode 100644 index 0000000..f3cf214 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_toggle.md.05a55234.lean.js @@ -0,0 +1 @@ +import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as u,d as q,$ as v,o as y,c as i,a0 as w,a1 as B,k as b,n as f,l,t as T,h as E,H as a,Q as d}from"./chunks/framework.3f630664.js";const A="w-fit relative inline-flex items-center cursor-pointer",k='bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[""] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600',D="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300",V={lg:"w-14 h-7 after:top-0.5 after:left-[4px] after:h-6 after:w-6",md:"w-11 h-6 after:top-[2px] after:left-[2px] after:h-5 after:w-5",sm:"w-9 h-5 after:top-[2px] after:left-[2px] after:h-4 after:w-4"},x={red:"peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600",green:"peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600",purple:"peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600",yellow:"peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-400",teal:"peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600",orange:"peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:bg-orange-500"};function S(c){const s=u(()=>A),t=u(()=>k),n=u(()=>V[c.size.value]),e=u(()=>x[c.color.value]),g=u(()=>D);return{labelClasses:s,toggleSize:n,toggleClasses:t,toggleColor:e,toggleBallClasses:g}}const z=["disabled"],r=q({__name:"FwbToggle",props:{color:{default:""},disabled:{type:Boolean,default:!1},label:{default:""},modelValue:{type:Boolean,default:!1},size:{default:"md"}},emits:["update:modelValue"],setup(c,{emit:s}){const t=c,n=s,e=u({get(){return t.modelValue},set(m){n("update:modelValue",m)}}),{labelClasses:g,toggleSize:F,toggleClasses:_,toggleColor:o,toggleBallClasses:p}=S(v(t));return(m,C)=>(y(),i("label",{class:f(l(g))},[w(b("input",{"onUpdate:modelValue":C[0]||(C[0]=h=>e.value=h),disabled:m.disabled,class:"sr-only peer",type:"checkbox"},null,8,z),[[B,e.value]]),b("span",{class:f([l(_),l(F),l(o)])},null,2),b("span",{class:f(l(p))},T(m.label),3)],2))}}),P={class:"vp-raw"},I={__name:"FwbToggleExample",setup(c){const s=E(!1);return(t,n)=>(y(),i("div",P,[a(l(r),{modelValue:s.value,"onUpdate:modelValue":n[0]||(n[0]=e=>s.value=e),label:"Toggle me"},null,8,["modelValue"])]))}},$={class:"vp-raw"},U={__name:"FwbToggleExampleChecked",setup(c){const s=E(!0);return(t,n)=>(y(),i("div",$,[a(l(r),{modelValue:s.value,"onUpdate:modelValue":n[0]||(n[0]=e=>s.value=e),label:"Toggle me"},null,8,["modelValue"])]))}},N={class:"vp-raw flex justify-between flex-wrap gap-2"},R={__name:"FwbToggleExampleColors",setup(c){const s=E(!0),t=E(!0),n=E(!0),e=E(!0),g=E(!0),F=E(!0);return(_,o)=>(y(),i("div",N,[a(l(r),{modelValue:s.value,"onUpdate:modelValue":o[0]||(o[0]=p=>s.value=p),label:"Red",color:"red"},null,8,["modelValue"]),a(l(r),{modelValue:t.value,"onUpdate:modelValue":o[1]||(o[1]=p=>t.value=p),label:"Green",color:"green"},null,8,["modelValue"]),a(l(r),{modelValue:n.value,"onUpdate:modelValue":o[2]||(o[2]=p=>n.value=p),label:"Purple",color:"purple"},null,8,["modelValue"]),a(l(r),{modelValue:e.value,"onUpdate:modelValue":o[3]||(o[3]=p=>e.value=p),label:"Yellow",color:"yellow"},null,8,["modelValue"]),a(l(r),{modelValue:g.value,"onUpdate:modelValue":o[4]||(o[4]=p=>g.value=p),label:"Teal",color:"teal"},null,8,["modelValue"]),a(l(r),{modelValue:F.value,"onUpdate:modelValue":o[5]||(o[5]=p=>F.value=p),label:"Orange",color:"orange"},null,8,["modelValue"])]))}},O={class:"vp-raw"},L={__name:"FwbToggleExampleDisabled",setup(c){const s=E(!1);return(t,n)=>(y(),i("div",O,[a(l(r),{modelValue:s.value,"onUpdate:modelValue":n[0]||(n[0]=e=>s.value=e),disabled:"",label:"Can't Toggle me"},null,8,["modelValue"])]))}},M={class:"vp-raw grid gap-3"},G={__name:"FwbToggleExampleSize",setup(c){return(s,t)=>(y(),i("div",M,[a(l(r),{label:"Small",size:"sm"}),a(l(r),{label:"Medium",size:"md"}),a(l(r),{label:"Large",size:"lg"})]))}},Y=d("",6),j=d("",2),H=d("",2),J=d("",2),Q=d("",2),K=d("",1),ss=JSON.parse('{"title":"Vue Toggle - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/toggle.md","filePath":"components/toggle.md"}'),W={name:"components/toggle.md"},ls=Object.assign(W,{setup(c){return(s,t)=>(y(),i("div",null,[Y,a(I),j,a(U),H,a(L),J,a(R),Q,a(G),K]))}});export{ss as __pageData,ls as default}; diff --git a/docs/.vitepress/dist/assets/components_tooltip.md.d14c95e6.js b/docs/.vitepress/dist/assets/components_tooltip.md.d14c95e6.js new file mode 100644 index 0000000..f862481 --- /dev/null +++ b/docs/.vitepress/dist/assets/components_tooltip.md.d14c95e6.js @@ -0,0 +1,221 @@ +import{V as b}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as p}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{d as u,g as d,o as E,c as r,H as n,w as s,r as m,l as a,a as l,k as i,Q as g}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const f={class:"flex items-start"},o=u({__name:"FwbTooltip",props:{placement:{default:"top"},theme:{default:"dark"},trigger:{default:"hover"}},setup(t){const e=t,c=d(()=>({light:"tooltip-light",dark:"tooltip-dark"})[e.theme]);return(y,V)=>(E(),r("div",f,[n(a(b),{placement:y.placement,triggers:[y.trigger],theme:c.value,"auto-hide":""},{popper:s(()=>[m(y.$slots,"content")]),default:s(()=>[m(y.$slots,"trigger")]),_:3},8,["placement","triggers","theme"])]))}}),_={class:"vp-raw"},h={__name:"FwbTooltipExample",setup(t){return(e,c)=>(E(),r("div",_,[n(a(o),null,{trigger:s(()=>[n(a(p),null,{default:s(()=>[l(" Default Tooltip ")]),_:1})]),content:s(()=>[l(" Tooltip content ")]),_:1})]))}},F={class:"vp-raw flex flex-wrap justify-center gap-2"},w={__name:"FwbTooltipExamplePosition",setup(t){return(e,c)=>(E(),r("div",F,[n(a(o),{placement:"top"},{trigger:s(()=>[n(a(p),null,{default:s(()=>[l(" Tooltip top ")]),_:1})]),content:s(()=>[l(" Tooltip on top ")]),_:1}),n(a(o),{placement:"right"},{trigger:s(()=>[n(a(p),null,{default:s(()=>[l(" Tooltip right ")]),_:1})]),content:s(()=>[l(" Tooltip on right ")]),_:1}),n(a(o),{placement:"bottom"},{trigger:s(()=>[n(a(p),null,{default:s(()=>[l(" Tooltip bottom ")]),_:1})]),content:s(()=>[l(" Tooltip on bottom ")]),_:1}),n(a(o),{placement:"left"},{trigger:s(()=>[n(a(p),null,{default:s(()=>[l(" Tooltip left ")]),_:1})]),content:s(()=>[l(" Tooltip on left ")]),_:1})]))}},D={class:"vp-raw flex flex-wrap justify-center gap-2"},A={__name:"FwbTooltipExampleStyle",setup(t){return(e,c)=>(E(),r("div",D,[n(a(o),{theme:"light"},{trigger:s(()=>[n(a(p),null,{default:s(()=>[l(" Light Tooltip ")]),_:1})]),content:s(()=>[l(" Tooltip content ")]),_:1}),n(a(o),{theme:"dark"},{trigger:s(()=>[n(a(p),null,{default:s(()=>[l(" Dark Tooltip ")]),_:1})]),content:s(()=>[l(" Tooltip content ")]),_:1})]))}},T={class:"vp-raw flex justify-center gap-2"},v=u({__name:"FwbTooltipExampleTrigger",setup(t){return(e,c)=>(E(),r("div",T,[n(a(o),null,{trigger:s(()=>[n(a(p),null,{default:s(()=>[l(" Tooltip hover ")]),_:1})]),content:s(()=>[l(" Tooltip content ")]),_:1}),n(a(o),{trigger:"click"},{trigger:s(()=>[n(a(p),null,{default:s(()=>[l(" Tooltip click ")]),_:1})]),content:s(()=>[l(" Tooltip content ")]),_:1})]))}}),C=i("h1",{id:"vue-tooltip-flowbite",tabindex:"-1"},[l("Vue Tooltip - Flowbite "),i("a",{class:"header-anchor",href:"#vue-tooltip-flowbite","aria-label":'Permalink to "Vue Tooltip - Flowbite"'},"​")],-1),B=i("h2",{id:"demo",tabindex:"-1"},[l("Demo "),i("a",{class:"header-anchor",href:"#demo","aria-label":'Permalink to "Demo"'},"​")],-1),k=g(`
vue
<template>
+  <fwb-tooltip>
+    <template #trigger>
+      <fwb-button>
+        Default Tooltip
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip content
+    </template>
+  </fwb-tooltip>
+</template>
+
+<script setup>
+import { FwbButton, FwbTooltip } from 'flowbite-vue'
+</script>
<template>
+  <fwb-tooltip>
+    <template #trigger>
+      <fwb-button>
+        Default Tooltip
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip content
+    </template>
+  </fwb-tooltip>
+</template>
+
+<script setup>
+import { FwbButton, FwbTooltip } from 'flowbite-vue'
+</script>

Tooltip styles ​

You can use choose between dark and light version styles for the tooltip component by changing the utility classes from Tailwind CSS and by applying the tooltip-light or tooltip-dark attribute.

`,3),q=g(`
vue
<template>
+  <fwb-tooltip theme="light">
+    <template #trigger>
+      <fwb-button>
+        Light Tooltip
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip content
+    </template>
+  </fwb-tooltip>
+  <fwb-tooltip theme="dark">
+    <template #trigger>
+      <fwb-button>
+        Dark Tooltip
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip content
+    </template>
+  </fwb-tooltip>
+</template>
+
+<script setup>
+import { FwbButton, FwbTooltip } from 'flowbite-vue'
+</script>
<template>
+  <fwb-tooltip theme="light">
+    <template #trigger>
+      <fwb-button>
+        Light Tooltip
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip content
+    </template>
+  </fwb-tooltip>
+  <fwb-tooltip theme="dark">
+    <template #trigger>
+      <fwb-button>
+        Dark Tooltip
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip content
+    </template>
+  </fwb-tooltip>
+</template>
+
+<script setup>
+import { FwbButton, FwbTooltip } from 'flowbite-vue'
+</script>

Placement ​

The positioning of the tooltip element relative to the triggering element (eg. button, link) can be set using placement attribute with top, top-start , top-end, bottom, bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-end, auto, auto-start, auto-end. The default value is: top

`,3),x=g(`
vue
<template>
+  <fwb-tooltip placement="top">
+    <template #trigger>
+      <fwb-button>
+        Tooltip top
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip on top
+    </template>
+  </fwb-tooltip>
+  <fwb-tooltip placement="right">
+    <template #trigger>
+      <fwb-button>
+        Tooltip right
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip on right
+    </template>
+  </fwb-tooltip>
+  <fwb-tooltip placement="bottom">
+    <template #trigger>
+      <fwb-button>
+        Tooltip bottom
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip on bottom
+    </template>
+  </fwb-tooltip>
+  <fwb-tooltip placement="left">
+    <template #trigger>
+      <fwb-button>
+        Tooltip left
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip on left
+    </template>
+  </fwb-tooltip>
+</template>
+
+<script setup>
+import { FwbButton, FwbTooltip } from 'flowbite-vue'
+</script>
<template>
+  <fwb-tooltip placement="top">
+    <template #trigger>
+      <fwb-button>
+        Tooltip top
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip on top
+    </template>
+  </fwb-tooltip>
+  <fwb-tooltip placement="right">
+    <template #trigger>
+      <fwb-button>
+        Tooltip right
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip on right
+    </template>
+  </fwb-tooltip>
+  <fwb-tooltip placement="bottom">
+    <template #trigger>
+      <fwb-button>
+        Tooltip bottom
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip on bottom
+    </template>
+  </fwb-tooltip>
+  <fwb-tooltip placement="left">
+    <template #trigger>
+      <fwb-button>
+        Tooltip left
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip on left
+    </template>
+  </fwb-tooltip>
+</template>
+
+<script setup>
+import { FwbButton, FwbTooltip } from 'flowbite-vue'
+</script>

triggerType ​

You can choose the triggering event by using the hover or click attributes to choose whether you want to show the tooltip when hovering or clicking on the element. By default this option is set to click.

`,3),P=g(`
vue
<template>
+  <fwb-tooltip>
+    <template #trigger>
+      <fwb-button>
+        Tooltip hover
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip content
+    </template>
+  </fwb-tooltip>
+  <fwb-tooltip trigger="click">
+    <template #trigger>
+      <fwb-button>
+        Tooltip click
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip content
+    </template>
+  </fwb-tooltip>
+</template>
+
+<script lang="ts" setup>
+import { FwbButton, FwbTooltip } from 'flowbite-vue'
+</script>
<template>
+  <fwb-tooltip>
+    <template #trigger>
+      <fwb-button>
+        Tooltip hover
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip content
+    </template>
+  </fwb-tooltip>
+  <fwb-tooltip trigger="click">
+    <template #trigger>
+      <fwb-button>
+        Tooltip click
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip content
+    </template>
+  </fwb-tooltip>
+</template>
+
+<script lang="ts" setup>
+import { FwbButton, FwbTooltip } from 'flowbite-vue'
+</script>
`,1),L=JSON.parse('{"title":"Vue Tooltip - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/tooltip.md","filePath":"components/tooltip.md"}'),S={name:"components/tooltip.md"},O=Object.assign(S,{setup(t){return(e,c)=>(E(),r("div",null,[C,B,n(h),k,n(A),q,n(w),x,n(v),P]))}});export{L as __pageData,O as default}; diff --git a/docs/.vitepress/dist/assets/components_tooltip.md.d14c95e6.lean.js b/docs/.vitepress/dist/assets/components_tooltip.md.d14c95e6.lean.js new file mode 100644 index 0000000..707563a --- /dev/null +++ b/docs/.vitepress/dist/assets/components_tooltip.md.d14c95e6.lean.js @@ -0,0 +1 @@ +import{V as b}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as p}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{d as u,g as d,o as E,c as r,H as n,w as s,r as m,l as a,a as l,k as i,Q as g}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const f={class:"flex items-start"},o=u({__name:"FwbTooltip",props:{placement:{default:"top"},theme:{default:"dark"},trigger:{default:"hover"}},setup(t){const e=t,c=d(()=>({light:"tooltip-light",dark:"tooltip-dark"})[e.theme]);return(y,V)=>(E(),r("div",f,[n(a(b),{placement:y.placement,triggers:[y.trigger],theme:c.value,"auto-hide":""},{popper:s(()=>[m(y.$slots,"content")]),default:s(()=>[m(y.$slots,"trigger")]),_:3},8,["placement","triggers","theme"])]))}}),_={class:"vp-raw"},h={__name:"FwbTooltipExample",setup(t){return(e,c)=>(E(),r("div",_,[n(a(o),null,{trigger:s(()=>[n(a(p),null,{default:s(()=>[l(" Default Tooltip ")]),_:1})]),content:s(()=>[l(" Tooltip content ")]),_:1})]))}},F={class:"vp-raw flex flex-wrap justify-center gap-2"},w={__name:"FwbTooltipExamplePosition",setup(t){return(e,c)=>(E(),r("div",F,[n(a(o),{placement:"top"},{trigger:s(()=>[n(a(p),null,{default:s(()=>[l(" Tooltip top ")]),_:1})]),content:s(()=>[l(" Tooltip on top ")]),_:1}),n(a(o),{placement:"right"},{trigger:s(()=>[n(a(p),null,{default:s(()=>[l(" Tooltip right ")]),_:1})]),content:s(()=>[l(" Tooltip on right ")]),_:1}),n(a(o),{placement:"bottom"},{trigger:s(()=>[n(a(p),null,{default:s(()=>[l(" Tooltip bottom ")]),_:1})]),content:s(()=>[l(" Tooltip on bottom ")]),_:1}),n(a(o),{placement:"left"},{trigger:s(()=>[n(a(p),null,{default:s(()=>[l(" Tooltip left ")]),_:1})]),content:s(()=>[l(" Tooltip on left ")]),_:1})]))}},D={class:"vp-raw flex flex-wrap justify-center gap-2"},A={__name:"FwbTooltipExampleStyle",setup(t){return(e,c)=>(E(),r("div",D,[n(a(o),{theme:"light"},{trigger:s(()=>[n(a(p),null,{default:s(()=>[l(" Light Tooltip ")]),_:1})]),content:s(()=>[l(" Tooltip content ")]),_:1}),n(a(o),{theme:"dark"},{trigger:s(()=>[n(a(p),null,{default:s(()=>[l(" Dark Tooltip ")]),_:1})]),content:s(()=>[l(" Tooltip content ")]),_:1})]))}},T={class:"vp-raw flex justify-center gap-2"},v=u({__name:"FwbTooltipExampleTrigger",setup(t){return(e,c)=>(E(),r("div",T,[n(a(o),null,{trigger:s(()=>[n(a(p),null,{default:s(()=>[l(" Tooltip hover ")]),_:1})]),content:s(()=>[l(" Tooltip content ")]),_:1}),n(a(o),{trigger:"click"},{trigger:s(()=>[n(a(p),null,{default:s(()=>[l(" Tooltip click ")]),_:1})]),content:s(()=>[l(" Tooltip content ")]),_:1})]))}}),C=i("h1",{id:"vue-tooltip-flowbite",tabindex:"-1"},[l("Vue Tooltip - Flowbite "),i("a",{class:"header-anchor",href:"#vue-tooltip-flowbite","aria-label":'Permalink to "Vue Tooltip - Flowbite"'},"​")],-1),B=i("h2",{id:"demo",tabindex:"-1"},[l("Demo "),i("a",{class:"header-anchor",href:"#demo","aria-label":'Permalink to "Demo"'},"​")],-1),k=g("",3),q=g("",3),x=g("",3),P=g("",1),L=JSON.parse('{"title":"Vue Tooltip - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/tooltip.md","filePath":"components/tooltip.md"}'),S={name:"components/tooltip.md"},O=Object.assign(S,{setup(t){return(e,c)=>(E(),r("div",null,[C,B,n(h),k,n(A),q,n(w),x,n(v),P]))}});export{L as __pageData,O as default}; diff --git a/docs/.vitepress/dist/assets/index.md.5a24cb33.js b/docs/.vitepress/dist/assets/index.md.5a24cb33.js new file mode 100644 index 0000000..393e7cf --- /dev/null +++ b/docs/.vitepress/dist/assets/index.md.5a24cb33.js @@ -0,0 +1 @@ +import{_ as e,o as t,c as i}from"./chunks/framework.3f630664.js";const u=JSON.parse('{"title":"Flowbite Vue 3","titleTemplate":"Flowbite","description":"","frontmatter":{"layout":"home","title":"Flowbite Vue 3","titleTemplate":"Flowbite","hero":{"name":"Flowbite Vue 3","text":"Vue component library based on Tailwind CSS","tagline":"Get started with the most popular open-source library of interactive UI components built with the utility classes from Tailwind CSS","image":{"src":"/assets/logo.svg","alt":"VitePress"},"actions":[{"theme":"brand","text":"Get Started","link":"/pages/getting-started"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/themesberg/flowbite-vue"}]},"features":[{"title":"Vue 3 components 🧱","details":"Use hundreds of open-source components such as navbars, modals, and dropdowns based on Vue 3 and Tailwind CSS."},{"title":"Based on Tailwind CSS 💨","details":"The components are based on the utility classes from Tailwind CSS and you can use them to further customize the interface."},{"title":"Powered by Flowbite 🚀","details":"The Flowbite Vue library is based on the original Flowbite component library using vanilla JavaScript."},{"title":"Open-source community ❤️","details":"Thousands of developers actively use the components from Flowbite Vue to power their applications."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),o={name:"index.md"};function a(s,n,l,r,d,c){return t(),i("div")}const p=e(o,[["render",a]]);export{u as __pageData,p as default}; diff --git a/docs/.vitepress/dist/assets/index.md.5a24cb33.lean.js b/docs/.vitepress/dist/assets/index.md.5a24cb33.lean.js new file mode 100644 index 0000000..393e7cf --- /dev/null +++ b/docs/.vitepress/dist/assets/index.md.5a24cb33.lean.js @@ -0,0 +1 @@ +import{_ as e,o as t,c as i}from"./chunks/framework.3f630664.js";const u=JSON.parse('{"title":"Flowbite Vue 3","titleTemplate":"Flowbite","description":"","frontmatter":{"layout":"home","title":"Flowbite Vue 3","titleTemplate":"Flowbite","hero":{"name":"Flowbite Vue 3","text":"Vue component library based on Tailwind CSS","tagline":"Get started with the most popular open-source library of interactive UI components built with the utility classes from Tailwind CSS","image":{"src":"/assets/logo.svg","alt":"VitePress"},"actions":[{"theme":"brand","text":"Get Started","link":"/pages/getting-started"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/themesberg/flowbite-vue"}]},"features":[{"title":"Vue 3 components 🧱","details":"Use hundreds of open-source components such as navbars, modals, and dropdowns based on Vue 3 and Tailwind CSS."},{"title":"Based on Tailwind CSS 💨","details":"The components are based on the utility classes from Tailwind CSS and you can use them to further customize the interface."},{"title":"Powered by Flowbite 🚀","details":"The Flowbite Vue library is based on the original Flowbite component library using vanilla JavaScript."},{"title":"Open-source community ❤️","details":"Thousands of developers actively use the components from Flowbite Vue to power their applications."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),o={name:"index.md"};function a(s,n,l,r,d,c){return t(),i("div")}const p=e(o,[["render",a]]);export{u as __pageData,p as default}; diff --git a/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2 b/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2 new file mode 100644 index 0000000..2a68729 Binary files /dev/null and b/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2 differ diff --git a/docs/.vitepress/dist/assets/inter-italic-cyrillic.ea42a392.woff2 b/docs/.vitepress/dist/assets/inter-italic-cyrillic.ea42a392.woff2 new file mode 100644 index 0000000..f640351 Binary files /dev/null and b/docs/.vitepress/dist/assets/inter-italic-cyrillic.ea42a392.woff2 differ diff --git a/docs/.vitepress/dist/assets/inter-italic-greek-ext.4fbe9427.woff2 b/docs/.vitepress/dist/assets/inter-italic-greek-ext.4fbe9427.woff2 new file mode 100644 index 0000000..0021896 Binary files /dev/null and b/docs/.vitepress/dist/assets/inter-italic-greek-ext.4fbe9427.woff2 differ diff --git a/docs/.vitepress/dist/assets/inter-italic-greek.8f4463c4.woff2 b/docs/.vitepress/dist/assets/inter-italic-greek.8f4463c4.woff2 new file mode 100644 index 0000000..71c265f Binary files /dev/null and b/docs/.vitepress/dist/assets/inter-italic-greek.8f4463c4.woff2 differ diff --git a/docs/.vitepress/dist/assets/inter-italic-latin-ext.bd8920cc.woff2 b/docs/.vitepress/dist/assets/inter-italic-latin-ext.bd8920cc.woff2 new file mode 100644 index 0000000..9c1b944 Binary files /dev/null and b/docs/.vitepress/dist/assets/inter-italic-latin-ext.bd8920cc.woff2 differ diff --git a/docs/.vitepress/dist/assets/inter-italic-latin.bd3b6f56.woff2 b/docs/.vitepress/dist/assets/inter-italic-latin.bd3b6f56.woff2 new file mode 100644 index 0000000..01fcf20 Binary files /dev/null and b/docs/.vitepress/dist/assets/inter-italic-latin.bd3b6f56.woff2 differ diff --git a/docs/.vitepress/dist/assets/inter-italic-vietnamese.6ce511fb.woff2 b/docs/.vitepress/dist/assets/inter-italic-vietnamese.6ce511fb.woff2 new file mode 100644 index 0000000..e4f788e Binary files /dev/null and b/docs/.vitepress/dist/assets/inter-italic-vietnamese.6ce511fb.woff2 differ diff --git a/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.e75737ce.woff2 b/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.e75737ce.woff2 new file mode 100644 index 0000000..28593cc Binary files /dev/null and b/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.e75737ce.woff2 differ diff --git a/docs/.vitepress/dist/assets/inter-roman-cyrillic.5f2c6c8c.woff2 b/docs/.vitepress/dist/assets/inter-roman-cyrillic.5f2c6c8c.woff2 new file mode 100644 index 0000000..a20adc1 Binary files /dev/null and b/docs/.vitepress/dist/assets/inter-roman-cyrillic.5f2c6c8c.woff2 differ diff --git a/docs/.vitepress/dist/assets/inter-roman-greek-ext.ab0619bc.woff2 b/docs/.vitepress/dist/assets/inter-roman-greek-ext.ab0619bc.woff2 new file mode 100644 index 0000000..e3b0be7 Binary files /dev/null and b/docs/.vitepress/dist/assets/inter-roman-greek-ext.ab0619bc.woff2 differ diff --git a/docs/.vitepress/dist/assets/inter-roman-greek.d5a6d92a.woff2 b/docs/.vitepress/dist/assets/inter-roman-greek.d5a6d92a.woff2 new file mode 100644 index 0000000..f790e04 Binary files /dev/null and b/docs/.vitepress/dist/assets/inter-roman-greek.d5a6d92a.woff2 differ diff --git a/docs/.vitepress/dist/assets/inter-roman-latin-ext.0030eebd.woff2 b/docs/.vitepress/dist/assets/inter-roman-latin-ext.0030eebd.woff2 new file mode 100644 index 0000000..715bd90 Binary files /dev/null and b/docs/.vitepress/dist/assets/inter-roman-latin-ext.0030eebd.woff2 differ diff --git a/docs/.vitepress/dist/assets/inter-roman-latin.2ed14f66.woff2 b/docs/.vitepress/dist/assets/inter-roman-latin.2ed14f66.woff2 new file mode 100644 index 0000000..a540b7a Binary files /dev/null and b/docs/.vitepress/dist/assets/inter-roman-latin.2ed14f66.woff2 differ diff --git a/docs/.vitepress/dist/assets/inter-roman-vietnamese.14ce25a6.woff2 b/docs/.vitepress/dist/assets/inter-roman-vietnamese.14ce25a6.woff2 new file mode 100644 index 0000000..5a9f9cb Binary files /dev/null and b/docs/.vitepress/dist/assets/inter-roman-vietnamese.14ce25a6.woff2 differ diff --git a/docs/.vitepress/dist/assets/pages_getting-started.md.0e48f016.js b/docs/.vitepress/dist/assets/pages_getting-started.md.0e48f016.js new file mode 100644 index 0000000..17ce6fc --- /dev/null +++ b/docs/.vitepress/dist/assets/pages_getting-started.md.0e48f016.js @@ -0,0 +1,43 @@ +import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.3f630664.js";const g=JSON.parse('{"title":"Flowbite Vue - Quickstart","description":"","frontmatter":{},"headers":[],"relativePath":"pages/getting-started.md","filePath":"pages/getting-started.md"}'),p={name:"pages/getting-started.md"},o=l(`

Flowbite Vue - Quickstart ​

Get started with Flowbite by including it into your project using NPM

Flowbite is a library of components built on top of the utility-classes from Tailwind CSS and it also includes a JavaScript file that makes interactive elements works, such as modals, dropdowns, and more. Learn how to get started by following this quickstart guide.

Require via NPM ​

Make sure that you have Node.js and Tailwind CSS installed.

  1. Install flowbite and flowbite-vue as a dependency using NPM by running the following command:
bash
npm i flowbite flowbite-vue
npm i flowbite flowbite-vue
  1. Require Flowbite as a plugin inside the tailwind.config.js and add flowbite-vue dist folder to tailwind content:
javascript
module.exports = {
+  content: [
+    'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx,vue}',
+    'node_modules/flowbite/**/*.{js,jsx,ts,tsx}'
+  ],
+  plugins: [
+      require('flowbite/plugin')
+  ],
+  theme: {}
+}
module.exports = {
+  content: [
+    'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx,vue}',
+    'node_modules/flowbite/**/*.{js,jsx,ts,tsx}'
+  ],
+  plugins: [
+      require('flowbite/plugin')
+  ],
+  theme: {}
+}
  1. Now you can use flowbite-vue anywhere in your project and build awesome interfaces:
vue
<template>
+  <fwb-dropdown text="Click me" placement="top">
+    <fwb-list-group>
+      <fwb-list-group-item>Item #1</fwb-list-group-item>
+      <fwb-list-group-item>Item #2</fwb-list-group-item>
+      <fwb-list-group-item>Item #3</fwb-list-group-item>
+    </fwb-list-group>
+  </fwb-dropdown>
+</template>
+
+<script setup>
+import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
+</script>
<template>
+  <fwb-dropdown text="Click me" placement="top">
+    <fwb-list-group>
+      <fwb-list-group-item>Item #1</fwb-list-group-item>
+      <fwb-list-group-item>Item #2</fwb-list-group-item>
+      <fwb-list-group-item>Item #3</fwb-list-group-item>
+    </fwb-list-group>
+  </fwb-dropdown>
+</template>
+
+<script setup>
+import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
+</script>
`,11),t=[o];function e(c,r,i,E,y,d){return a(),n("div",null,t)}const b=s(p,[["render",e]]);export{g as __pageData,b as default}; diff --git a/docs/.vitepress/dist/assets/pages_getting-started.md.0e48f016.lean.js b/docs/.vitepress/dist/assets/pages_getting-started.md.0e48f016.lean.js new file mode 100644 index 0000000..fdf3196 --- /dev/null +++ b/docs/.vitepress/dist/assets/pages_getting-started.md.0e48f016.lean.js @@ -0,0 +1 @@ +import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.3f630664.js";const g=JSON.parse('{"title":"Flowbite Vue - Quickstart","description":"","frontmatter":{},"headers":[],"relativePath":"pages/getting-started.md","filePath":"pages/getting-started.md"}'),p={name:"pages/getting-started.md"},o=l("",11),t=[o];function e(c,r,i,E,y,d){return a(),n("div",null,t)}const b=s(p,[["render",e]]);export{g as __pageData,b as default}; diff --git a/docs/.vitepress/dist/assets/style.a165892e.css b/docs/.vitepress/dist/assets/style.a165892e.css new file mode 100644 index 0000000..6154f5b --- /dev/null +++ b/docs/.vitepress/dist/assets/style.a165892e.css @@ -0,0 +1 @@ +@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/assets/inter-roman-cyrillic.5f2c6c8c.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/assets/inter-roman-cyrillic-ext.e75737ce.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/assets/inter-roman-greek.d5a6d92a.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/assets/inter-roman-greek-ext.ab0619bc.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/assets/inter-roman-latin.2ed14f66.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/assets/inter-roman-latin-ext.0030eebd.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/assets/inter-roman-vietnamese.14ce25a6.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/assets/inter-italic-cyrillic.ea42a392.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/assets/inter-italic-greek.8f4463c4.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/assets/inter-italic-greek-ext.4fbe9427.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/assets/inter-italic-latin.bd3b6f56.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/assets/inter-italic-latin-ext.bd8920cc.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/assets/inter-italic-vietnamese.6ce511fb.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Chinese Quotes;src:local("PingFang SC Regular"),local("PingFang SC"),local("SimHei"),local("Source Han Sans SC");unicode-range:U+2018,U+2019,U+201C,U+201D}:root{--vp-c-white: #ffffff;--vp-c-black: #000000;--vp-c-neutral: var(--vp-c-black);--vp-c-neutral-inverse: var(--vp-c-white)}.dark{--vp-c-neutral: var(--vp-c-white);--vp-c-neutral-inverse: var(--vp-c-black)}:root{--vp-c-gray-1: #dddde3;--vp-c-gray-2: #e4e4e9;--vp-c-gray-3: #ebebef;--vp-c-gray-soft: rgba(142, 150, 170, .14);--vp-c-indigo-1: #3451b2;--vp-c-indigo-2: #3a5ccc;--vp-c-indigo-3: #5672cd;--vp-c-indigo-soft: rgba(100, 108, 255, .14);--vp-c-green-1: #18794e;--vp-c-green-2: #299764;--vp-c-green-3: #30a46c;--vp-c-green-soft: rgba(16, 185, 129, .14);--vp-c-yellow-1: #915930;--vp-c-yellow-2: #946300;--vp-c-yellow-3: #9f6a00;--vp-c-yellow-soft: rgba(234, 179, 8, .14);--vp-c-red-1: #b8272c;--vp-c-red-2: #d5393e;--vp-c-red-3: #e0575b;--vp-c-red-soft: rgba(244, 63, 94, .14);--vp-c-sponsor: #db2777}.dark{--vp-c-gray-1: #515c67;--vp-c-gray-2: #414853;--vp-c-gray-3: #32363f;--vp-c-gray-soft: rgba(101, 117, 133, .16);--vp-c-indigo-1: #a8b1ff;--vp-c-indigo-2: #5c73e7;--vp-c-indigo-3: #3e63dd;--vp-c-indigo-soft: rgba(100, 108, 255, .16);--vp-c-green-1: #3dd68c;--vp-c-green-2: #30a46c;--vp-c-green-3: #298459;--vp-c-green-soft: rgba(16, 185, 129, .16);--vp-c-yellow-1: #f9b44e;--vp-c-yellow-2: #da8b17;--vp-c-yellow-3: #a46a0a;--vp-c-yellow-soft: rgba(234, 179, 8, .16);--vp-c-red-1: #f66f81;--vp-c-red-2: #f14158;--vp-c-red-3: #b62a3c;--vp-c-red-soft: rgba(244, 63, 94, .16)}:root{--vp-c-bg: #ffffff;--vp-c-bg-alt: #f6f6f7;--vp-c-bg-elv: #ffffff;--vp-c-bg-soft: #f6f6f7}.dark{--vp-c-bg: #1b1b1f;--vp-c-bg-alt: #161618;--vp-c-bg-elv: #202127;--vp-c-bg-soft: #202127}:root{--vp-c-border: #c2c2c4;--vp-c-divider: #e2e2e3;--vp-c-gutter: #e2e2e3}.dark{--vp-c-border: #3c3f44;--vp-c-divider: #2e2e32;--vp-c-gutter: #000000}:root{--vp-c-text-1: rgba(60, 60, 67);--vp-c-text-2: rgba(60, 60, 67, .78);--vp-c-text-3: rgba(60, 60, 67, .56)}.dark{--vp-c-text-1: rgba(255, 255, 245, .86);--vp-c-text-2: rgba(235, 235, 245, .6);--vp-c-text-3: rgba(235, 235, 245, .38)}:root{--vp-c-default-1: var(--vp-c-gray-1);--vp-c-default-2: var(--vp-c-gray-2);--vp-c-default-3: var(--vp-c-gray-3);--vp-c-default-soft: var(--vp-c-gray-soft);--vp-c-brand-1: var(--vp-c-indigo-1);--vp-c-brand-2: var(--vp-c-indigo-2);--vp-c-brand-3: var(--vp-c-indigo-3);--vp-c-brand-soft: var(--vp-c-indigo-soft);--vp-c-brand: var(--vp-c-brand-1);--vp-c-tip-1: var(--vp-c-brand-1);--vp-c-tip-2: var(--vp-c-brand-2);--vp-c-tip-3: var(--vp-c-brand-3);--vp-c-tip-soft: var(--vp-c-brand-soft);--vp-c-warning-1: var(--vp-c-yellow-1);--vp-c-warning-2: var(--vp-c-yellow-2);--vp-c-warning-3: var(--vp-c-yellow-3);--vp-c-warning-soft: var(--vp-c-yellow-soft);--vp-c-danger-1: var(--vp-c-red-1);--vp-c-danger-2: var(--vp-c-red-2);--vp-c-danger-3: var(--vp-c-red-3);--vp-c-danger-soft: var(--vp-c-red-soft)}:root{--vp-font-family-base: "Chinese Quotes", "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--vp-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}:root{--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--vp-shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);--vp-shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);--vp-shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16)}:root{--vp-z-index-footer: 10;--vp-z-index-local-nav: 20;--vp-z-index-nav: 30;--vp-z-index-layout-top: 40;--vp-z-index-backdrop: 50;--vp-z-index-sidebar: 60}:root{--vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");--vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E")}:root{--vp-layout-max-width: 1440px}:root{--vp-header-anchor-symbol: "#"}:root{--vp-code-line-height: 1.7;--vp-code-font-size: .875em;--vp-code-color: var(--vp-c-brand-1);--vp-code-link-color: var(--vp-c-brand-1);--vp-code-link-hover-color: var(--vp-c-brand-2);--vp-code-bg: var(--vp-c-default-soft);--vp-code-block-color: var(--vp-c-text-2);--vp-code-block-bg: var(--vp-c-bg-alt);--vp-code-block-divider-color: var(--vp-c-gutter);--vp-code-lang-color: var(--vp-c-text-3);--vp-code-line-highlight-color: var(--vp-c-default-soft);--vp-code-line-number-color: var(--vp-c-text-3);--vp-code-line-diff-add-color: var(--vp-c-green-soft);--vp-code-line-diff-add-symbol-color: var(--vp-c-green-1);--vp-code-line-diff-remove-color: var(--vp-c-red-soft);--vp-code-line-diff-remove-symbol-color: var(--vp-c-red-1);--vp-code-line-warning-color: var(--vp-c-yellow-soft);--vp-code-line-error-color: var(--vp-c-red-soft);--vp-code-copy-code-border-color: var(--vp-c-divider);--vp-code-copy-code-bg: var(--vp-c-bg-soft);--vp-code-copy-code-hover-border-color: var(--vp-c-divider);--vp-code-copy-code-hover-bg: var(--vp-c-bg);--vp-code-copy-code-active-text: var(--vp-c-text-2);--vp-code-copy-copied-text-content: "Copied";--vp-code-tab-divider: var(--vp-code-block-divider-color);--vp-code-tab-text-color: var(--vp-c-text-2);--vp-code-tab-bg: var(--vp-code-block-bg);--vp-code-tab-hover-text-color: var(--vp-c-text-1);--vp-code-tab-active-text-color: var(--vp-c-text-1);--vp-code-tab-active-bar-color: var(--vp-c-brand-1)}:root{--vp-button-brand-border: transparent;--vp-button-brand-text: var(--vp-c-white);--vp-button-brand-bg: var(--vp-c-brand-3);--vp-button-brand-hover-border: transparent;--vp-button-brand-hover-text: var(--vp-c-white);--vp-button-brand-hover-bg: var(--vp-c-brand-2);--vp-button-brand-active-border: transparent;--vp-button-brand-active-text: var(--vp-c-white);--vp-button-brand-active-bg: var(--vp-c-brand-1);--vp-button-alt-border: transparent;--vp-button-alt-text: var(--vp-c-text-1);--vp-button-alt-bg: var(--vp-c-default-3);--vp-button-alt-hover-border: transparent;--vp-button-alt-hover-text: var(--vp-c-text-1);--vp-button-alt-hover-bg: var(--vp-c-default-2);--vp-button-alt-active-border: transparent;--vp-button-alt-active-text: var(--vp-c-text-1);--vp-button-alt-active-bg: var(--vp-c-default-1);--vp-button-sponsor-border: var(--vp-c-text-2);--vp-button-sponsor-text: var(--vp-c-text-2);--vp-button-sponsor-bg: transparent;--vp-button-sponsor-hover-border: var(--vp-c-sponsor);--vp-button-sponsor-hover-text: var(--vp-c-sponsor);--vp-button-sponsor-hover-bg: transparent;--vp-button-sponsor-active-border: var(--vp-c-sponsor);--vp-button-sponsor-active-text: var(--vp-c-sponsor);--vp-button-sponsor-active-bg: transparent}:root{--vp-custom-block-font-size: 14px;--vp-custom-block-code-font-size: 13px;--vp-custom-block-info-border: transparent;--vp-custom-block-info-text: var(--vp-c-text-1);--vp-custom-block-info-bg: var(--vp-c-default-soft);--vp-custom-block-info-code-bg: var(--vp-c-default-soft);--vp-custom-block-tip-border: transparent;--vp-custom-block-tip-text: var(--vp-c-text-1);--vp-custom-block-tip-bg: var(--vp-c-brand-soft);--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);--vp-custom-block-warning-border: transparent;--vp-custom-block-warning-text: var(--vp-c-text-1);--vp-custom-block-warning-bg: var(--vp-c-warning-soft);--vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);--vp-custom-block-danger-border: transparent;--vp-custom-block-danger-text: var(--vp-c-text-1);--vp-custom-block-danger-bg: var(--vp-c-danger-soft);--vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);--vp-custom-block-details-border: var(--vp-custom-block-info-border);--vp-custom-block-details-text: var(--vp-custom-block-info-text);--vp-custom-block-details-bg: var(--vp-custom-block-info-bg);--vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg)}:root{--vp-input-border-color: var(--vp-c-border);--vp-input-bg-color: var(--vp-c-bg-alt);--vp-input-switch-bg-color: var(--vp-c-gray-soft)}:root{--vp-nav-height: 64px;--vp-nav-bg-color: var(--vp-c-bg);--vp-nav-screen-bg-color: var(--vp-c-bg);--vp-nav-logo-height: 24px}:root{--vp-local-nav-bg-color: var(--vp-c-bg)}:root{--vp-sidebar-width: 272px;--vp-sidebar-bg-color: var(--vp-c-bg-alt)}:root{--vp-backdrop-bg-color: rgba(0, 0, 0, .6)}:root{--vp-home-hero-name-color: var(--vp-c-brand-1);--vp-home-hero-name-background: transparent;--vp-home-hero-image-background-image: none;--vp-home-hero-image-filter: none}:root{--vp-badge-info-border: transparent;--vp-badge-info-text: var(--vp-c-text-2);--vp-badge-info-bg: var(--vp-c-default-soft);--vp-badge-tip-border: transparent;--vp-badge-tip-text: var(--vp-c-brand-1);--vp-badge-tip-bg: var(--vp-c-brand-soft);--vp-badge-warning-border: transparent;--vp-badge-warning-text: var(--vp-c-warning-1);--vp-badge-warning-bg: var(--vp-c-warning-soft);--vp-badge-danger-border: transparent;--vp-badge-danger-text: var(--vp-c-danger-1);--vp-badge-danger-bg: var(--vp-c-danger-soft)}:root{--vp-carbon-ads-text-color: var(--vp-c-text-1);--vp-carbon-ads-poweredby-color: var(--vp-c-text-2);--vp-carbon-ads-bg-color: var(--vp-c-bg-soft);--vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);--vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1)}:root{--vp-local-search-bg: var(--vp-c-bg);--vp-local-search-result-bg: var(--vp-c-bg);--vp-local-search-result-border: var(--vp-c-divider);--vp-local-search-result-selected-bg: var(--vp-c-bg);--vp-local-search-result-selected-border: var(--vp-c-brand-1);--vp-local-search-highlight-bg: var(--vp-c-brand-1);--vp-local-search-highlight-text: var(--vp-c-neutral-inverse)}@media (prefers-reduced-motion: reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-duration:0s!important;transition-delay:0s!important}}*,:before,:after{box-sizing:border-box}html{line-height:1.4;font-size:16px;-webkit-text-size-adjust:100%}html.dark{color-scheme:dark}body{margin:0;width:100%;min-width:320px;min-height:100vh;line-height:24px;font-family:var(--vp-font-family-base);font-size:16px;font-weight:400;color:var(--vp-c-text-1);background-color:var(--vp-c-bg);direction:ltr;font-synthesis:style;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}h1,h2,h3,h4,h5,h6{margin:0;line-height:24px;font-size:16px;font-weight:400}p{margin:0}strong,b{font-weight:600}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}ol,ul{list-style:none;margin:0;padding:0}blockquote{margin:0}pre,code,kbd,samp{font-family:var(--vp-font-family-mono)}img,svg,video,canvas,audio,iframe,embed,object{display:block}figure{margin:0}button,input,optgroup,select,textarea{border:0;padding:0;line-height:inherit;color:inherit}button{padding:0;font-family:inherit;background-color:transparent;background-image:none}button:enabled,[role=button]:enabled{cursor:pointer}button:focus,button:focus-visible{outline:1px dotted;outline:4px auto -webkit-focus-ring-color}button:focus:not(:focus-visible){outline:none!important}input:focus,textarea:focus,select:focus{outline:none}table{border-collapse:collapse}input{background-color:transparent}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:var(--vp-c-text-3)}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:var(--vp-c-text-3)}input::placeholder,textarea::placeholder{color:var(--vp-c-text-3)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}select{-webkit-appearance:none}h1,h2,h3,h4,h5,h6,li,p{overflow-wrap:break-word}vite-error-overlay{z-index:9999}.visually-hidden{position:absolute;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden}.custom-block{border:1px solid transparent;border-radius:8px;padding:16px 16px 8px;line-height:24px;font-size:var(--vp-custom-block-font-size);color:var(--vp-c-text-2)}.custom-block.info{border-color:var(--vp-custom-block-info-border);color:var(--vp-custom-block-info-text);background-color:var(--vp-custom-block-info-bg)}.custom-block.info a,.custom-block.info code{color:var(--vp-c-brand-1)}.custom-block.info a:hover{color:var(--vp-c-brand-2)}.custom-block.info code{background-color:var(--vp-custom-block-info-code-bg)}.custom-block.tip{border-color:var(--vp-custom-block-tip-border);color:var(--vp-custom-block-tip-text);background-color:var(--vp-custom-block-tip-bg)}.custom-block.tip a,.custom-block.tip code{color:var(--vp-c-brand-1)}.custom-block.tip a:hover{color:var(--vp-c-brand-2)}.custom-block.tip code{background-color:var(--vp-custom-block-tip-code-bg)}.custom-block.warning{border-color:var(--vp-custom-block-warning-border);color:var(--vp-custom-block-warning-text);background-color:var(--vp-custom-block-warning-bg)}.custom-block.warning a,.custom-block.warning code{color:var(--vp-c-warning-1)}.custom-block.warning a:hover{color:var(--vp-c-warning-2)}.custom-block.warning code{background-color:var(--vp-custom-block-warning-code-bg)}.custom-block.danger{border-color:var(--vp-custom-block-danger-border);color:var(--vp-custom-block-danger-text);background-color:var(--vp-custom-block-danger-bg)}.custom-block.danger a,.custom-block.danger code{color:var(--vp-c-danger-1)}.custom-block.danger a:hover{color:var(--vp-c-danger-2)}.custom-block.danger code{background-color:var(--vp-custom-block-danger-code-bg)}.custom-block.details{border-color:var(--vp-custom-block-details-border);color:var(--vp-custom-block-details-text);background-color:var(--vp-custom-block-details-bg)}.custom-block.details a{color:var(--vp-c-brand-1)}.custom-block.details a:hover{color:var(--vp-c-brand-2)}.custom-block.details code{background-color:var(--vp-custom-block-details-code-bg)}.custom-block-title{font-weight:600}.custom-block p+p{margin:8px 0}.custom-block.details summary{margin:0 0 8px;font-weight:700;cursor:pointer}.custom-block.details summary+p{margin:8px 0}.custom-block a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;transition:opacity .25s}.custom-block a:hover{opacity:.75}.custom-block code{font-size:var(--vp-custom-block-code-font-size)}.custom-block.custom-block th,.custom-block.custom-block blockquote>p{font-size:var(--vp-custom-block-font-size);color:inherit}.dark .vp-code-light{display:none}html:not(.dark) .vp-code-dark{display:none}.vp-code-group{margin-top:16px}.vp-code-group .tabs{position:relative;display:flex;margin-right:-24px;margin-left:-24px;padding:0 12px;background-color:var(--vp-code-tab-bg);overflow-x:auto;overflow-y:hidden;box-shadow:inset 0 -1px var(--vp-code-tab-divider)}@media (min-width: 640px){.vp-code-group .tabs{margin-right:0;margin-left:0;border-radius:8px 8px 0 0}}.vp-code-group .tabs input{position:fixed;opacity:0;pointer-events:none}.vp-code-group .tabs label{position:relative;display:inline-block;border-bottom:1px solid transparent;padding:0 12px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-code-tab-text-color);white-space:nowrap;cursor:pointer;transition:color .25s}.vp-code-group .tabs label:after{position:absolute;right:8px;bottom:-1px;left:8px;z-index:1;height:2px;border-radius:2px;content:"";background-color:transparent;transition:background-color .25s}.vp-code-group label:hover{color:var(--vp-code-tab-hover-text-color)}.vp-code-group input:checked+label{color:var(--vp-code-tab-active-text-color)}.vp-code-group input:checked+label:after{background-color:var(--vp-code-tab-active-bar-color)}.vp-code-group div[class*=language-],.vp-block{display:none;margin-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important}.vp-code-group div[class*=language-].active,.vp-block.active{display:block}.vp-block{padding:20px 24px}.vp-doc h1:not(:where(.vp-raw *)),.vp-doc h2:not(:where(.vp-raw *)),.vp-doc h3:not(:where(.vp-raw *)),.vp-doc h4:not(:where(.vp-raw *)),.vp-doc h5:not(:where(.vp-raw *)),.vp-doc h6:not(:where(.vp-raw *)){position:relative;font-weight:600;outline:none}.vp-doc h1:not(:where(.vp-raw *)){letter-spacing:-.02em;line-height:40px;font-size:28px}.vp-doc h2:not(:where(.vp-raw *)){margin:48px 0 16px;border-top:1px solid var(--vp-c-divider);padding-top:24px;letter-spacing:-.02em;line-height:32px;font-size:24px}.vp-doc h3:not(:where(.vp-raw *)){margin:32px 0 0;letter-spacing:-.01em;line-height:28px;font-size:20px}.vp-doc .header-anchor:not(:where(.vp-raw *)){position:absolute;top:0;left:0;margin-left:-.87em;font-weight:500;-webkit-user-select:none;user-select:none;opacity:0;text-decoration:none;transition:color .25s,opacity .25s}.vp-doc .header-anchor:not(:where(.vp-raw *)):before{content:var(--vp-header-anchor-symbol)}.vp-doc h1:hover .header-anchor:not(:where(.vp-raw *)),.vp-doc h1 .header-anchor:not(:where(.vp-raw *)):focus,.vp-doc h2:hover .header-anchor:not(:where(.vp-raw *)),.vp-doc h2 .header-anchor:not(:where(.vp-raw *)):focus,.vp-doc h3:hover .header-anchor:not(:where(.vp-raw *)),.vp-doc h3 .header-anchor:not(:where(.vp-raw *)):focus,.vp-doc h4:hover .header-anchor:not(:where(.vp-raw *)),.vp-doc h4 .header-anchor:not(:where(.vp-raw *)):focus,.vp-doc h5:hover .header-anchor:not(:where(.vp-raw *)),.vp-doc h5 .header-anchor:not(:where(.vp-raw *)):focus,.vp-doc h6:hover .header-anchor:not(:where(.vp-raw *)),.vp-doc h6 .header-anchor:not(:where(.vp-raw *)):focus{opacity:1}@media (min-width: 768px){.vp-doc h1:not(:where(.vp-raw *)){letter-spacing:-.02em;line-height:40px;font-size:32px}}.vp-doc h2 .header-anchor:not(:where(.vp-raw *)){top:24px}.vp-doc p:not(:where(.vp-raw *)),.vp-doc summary:not(:where(.vp-raw *)){margin:16px 0}.vp-doc p:not(:where(.vp-raw *)){line-height:28px}.vp-doc blockquote:not(:where(.vp-raw *)){margin:16px 0;border-left:2px solid var(--vp-c-divider);padding-left:16px;transition:border-color .5s}.vp-doc blockquote>p:not(:where(.vp-raw *)){margin:0;font-size:16px;color:var(--vp-c-text-2);transition:color .5s}.vp-doc a:not(:where(.vp-raw *)){font-weight:500;color:var(--vp-c-brand-1);text-decoration:underline;text-underline-offset:2px;transition:color .25s,opacity .25s}.vp-doc a:not(:where(.vp-raw *)):hover{color:var(--vp-c-brand-2)}.vp-doc strong:not(:where(.vp-raw *)){font-weight:600}.vp-doc ul:not(:where(.vp-raw *)),.vp-doc ol:not(:where(.vp-raw *)){padding-left:1.25rem;margin:16px 0}.vp-doc ul:not(:where(.vp-raw *)){list-style:disc}.vp-doc ol:not(:where(.vp-raw *)){list-style:decimal}.vp-doc li+li:not(:where(.vp-raw *)){margin-top:8px}.vp-doc li>ol:not(:where(.vp-raw *)),.vp-doc li>ul:not(:where(.vp-raw *)){margin:8px 0 0}.vp-doc table:not(:where(.vp-raw *)){display:block;border-collapse:collapse;margin:20px 0;overflow-x:auto}.vp-doc tr:not(:where(.vp-raw *)){border-top:1px solid var(--vp-c-divider);transition:background-color .5s}.vp-doc tr:not(:where(.vp-raw *)):nth-child(2n){background-color:var(--vp-c-bg-soft)}.vp-doc th:not(:where(.vp-raw *)),.vp-doc td:not(:where(.vp-raw *)){border:1px solid var(--vp-c-divider);padding:8px 16px}.vp-doc th:not(:where(.vp-raw *)){text-align:left;font-size:14px;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-doc td:not(:where(.vp-raw *)){font-size:14px}.vp-doc hr:not(:where(.vp-raw *)){margin:16px 0;border:none;border-top:1px solid var(--vp-c-divider)}.vp-doc .custom-block:not(:where(.vp-raw *)){margin:16px 0}.vp-doc .custom-block p:not(:where(.vp-raw *)){margin:8px 0;line-height:24px}.vp-doc .custom-block p:not(:where(.vp-raw *)):first-child{margin:0}.vp-doc .custom-block div[class*=language-]:not(:where(.vp-raw *)){margin:8px 0;border-radius:8px}.vp-doc .custom-block div[class*=language-] code:not(:where(.vp-raw *)){font-weight:400;background-color:transparent}.vp-doc .custom-block .vp-code-group .tabs:not(:where(.vp-raw *)){margin:0;border-radius:8px 8px 0 0}.vp-doc :not(pre,h1,h2,h3,h4,h5,h6)>code:not(:where(.vp-raw *)){font-size:var(--vp-code-font-size);color:var(--vp-code-color)}.vp-doc :not(pre)>code:not(:where(.vp-raw *)){border-radius:4px;padding:3px 6px;background-color:var(--vp-code-bg);transition:color .25s,background-color .5s}.vp-doc a>code:not(:where(.vp-raw *)){color:var(--vp-code-link-color)}.vp-doc a:hover>code:not(:where(.vp-raw *)){color:var(--vp-code-link-hover-color)}.vp-doc h1>code:not(:where(.vp-raw *)),.vp-doc h2>code:not(:where(.vp-raw *)),.vp-doc h3>code:not(:where(.vp-raw *)){font-size:.9em}.vp-doc div[class*=language-]:not(:where(.vp-raw *)),.vp-block:not(:where(.vp-raw *)){position:relative;margin:16px -24px;background-color:var(--vp-code-block-bg);overflow-x:auto;transition:background-color .5s}@media (min-width: 640px){.vp-doc div[class*=language-]:not(:where(.vp-raw *)),.vp-block:not(:where(.vp-raw *)){border-radius:8px;margin:16px 0}}@media (max-width: 639px){.vp-doc li div[class*=language-]:not(:where(.vp-raw *)){border-radius:8px 0 0 8px}}.vp-doc div[class*=language-]+div[class*=language-]:not(:where(.vp-raw *)),.vp-doc div[class$=-api]+div[class*=language-]:not(:where(.vp-raw *)),.vp-doc div[class*=language-]+div[class$=-api]>div[class*=language-]:not(:where(.vp-raw *)){margin-top:-8px}.vp-doc [class*=language-] pre:not(:where(.vp-raw *)),.vp-doc [class*=language-] code:not(:where(.vp-raw *)){direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.vp-doc [class*=language-] pre:not(:where(.vp-raw *)){position:relative;z-index:1;margin:0;padding:20px 0;background:transparent;overflow-x:auto}.vp-doc [class*=language-] code:not(:where(.vp-raw *)){display:block;padding:0 24px;width:fit-content;min-width:100%;line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-block-color);transition:color .5s}.vp-doc [class*=language-] code .highlighted:not(:where(.vp-raw *)){background-color:var(--vp-code-line-highlight-color);transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .highlighted.error:not(:where(.vp-raw *)){background-color:var(--vp-code-line-error-color)}.vp-doc [class*=language-] code .highlighted.warning:not(:where(.vp-raw *)){background-color:var(--vp-code-line-warning-color)}.vp-doc [class*=language-] code .diff:not(:where(.vp-raw *)){transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .diff:not(:where(.vp-raw *)):before{position:absolute;left:10px}.vp-doc [class*=language-] .has-focused-lines .line:not(:where(.vp-raw *)):not(.has-focus){filter:blur(.095rem);opacity:.7;transition:filter .35s,opacity .35s}.vp-doc [class*=language-]:hover .has-focused-lines .line:not(:where(.vp-raw *)):not(.has-focus){filter:blur(0);opacity:1}.vp-doc [class*=language-] code .diff.remove:not(:where(.vp-raw *)){background-color:var(--vp-code-line-diff-remove-color);opacity:.7}.vp-doc [class*=language-] code .diff.remove:not(:where(.vp-raw *)):before{content:"-";color:var(--vp-code-line-diff-remove-symbol-color)}.vp-doc [class*=language-] code .diff.add:not(:where(.vp-raw *)){background-color:var(--vp-code-line-diff-add-color)}.vp-doc [class*=language-] code .diff.add:not(:where(.vp-raw *)):before{content:"+";color:var(--vp-code-line-diff-add-symbol-color)}.vp-doc div[class*=language-].line-numbers-mode:not(:where(.vp-raw *)){padding-left:32px}.vp-doc .line-numbers-wrapper:not(:where(.vp-raw *)){position:absolute;top:0;bottom:0;left:0;z-index:3;border-right:1px solid var(--vp-code-block-divider-color);padding-top:20px;width:32px;text-align:center;font-family:var(--vp-font-family-mono);line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-line-number-color);transition:border-color .5s,color .5s}.vp-doc [class*=language-]>button.copy:not(:where(.vp-raw *)){direction:ltr;position:absolute;top:12px;right:12px;z-index:3;border:1px solid var(--vp-code-copy-code-border-color);border-radius:4px;width:40px;height:40px;background-color:var(--vp-code-copy-code-bg);opacity:0;cursor:pointer;background-image:var(--vp-icon-copy);background-position:50%;background-size:20px;background-repeat:no-repeat;transition:border-color .25s,background-color .25s,opacity .25s}.vp-doc [class*=language-]:hover>button.copy:not(:where(.vp-raw *)),.vp-doc [class*=language-]>button.copy:not(:where(.vp-raw *)):focus{opacity:1}.vp-doc [class*=language-]>button.copy:not(:where(.vp-raw *)):hover,.vp-doc [class*=language-]>button.copy.copied:not(:where(.vp-raw *)){border-color:var(--vp-code-copy-code-hover-border-color);background-color:var(--vp-code-copy-code-hover-bg)}.vp-doc [class*=language-]>button.copy.copied:not(:where(.vp-raw *)),.vp-doc [class*=language-]>button.copy:not(:where(.vp-raw *)):hover.copied{border-radius:0 4px 4px 0;background-color:var(--vp-code-copy-code-hover-bg);background-image:var(--vp-icon-copied)}.vp-doc [class*=language-]>button.copy.copied:not(:where(.vp-raw *)):before,.vp-doc [class*=language-]>button.copy:not(:where(.vp-raw *)):hover.copied:before{position:relative;top:-1px;transform:translate(calc(-100% - 1px));display:flex;justify-content:center;align-items:center;border:1px solid var(--vp-code-copy-code-hover-border-color);border-right:0;border-radius:4px 0 0 4px;padding:0 10px;width:fit-content;height:40px;text-align:center;font-size:12px;font-weight:500;color:var(--vp-code-copy-code-active-text);background-color:var(--vp-code-copy-code-hover-bg);white-space:nowrap;content:var(--vp-code-copy-copied-text-content)}.vp-doc [class*=language-]>span.lang:not(:where(.vp-raw *)){position:absolute;top:2px;right:8px;z-index:2;font-size:12px;font-weight:500;color:var(--vp-code-lang-color);transition:color .4s,opacity .4s}.vp-doc [class*=language-]:hover>button.copy+span.lang:not(:where(.vp-raw *)),.vp-doc [class*=language-]>button.copy:focus+span.lang:not(:where(.vp-raw *)){opacity:0}.vp-doc .VPTeamMembers:not(:where(.vp-raw *)){margin-top:24px}.vp-doc .VPTeamMembers.small.count-1 .container:not(:where(.vp-raw *)){margin:0!important;max-width:calc((100% - 24px)/2)!important}.vp-doc .VPTeamMembers.small.count-2 .container:not(:where(.vp-raw *)),.vp-doc .VPTeamMembers.small.count-3 .container:not(:where(.vp-raw *)){max-width:100%!important}.vp-doc .VPTeamMembers.medium.count-1 .container:not(:where(.vp-raw *)){margin:0!important;max-width:calc((100% - 24px)/2)!important}:is(.vp-external-link-icon,.vp-doc a[href*="://"],.vp-doc a[target=_blank]):not(:where(.vp-raw *)):not(.no-icon):after{display:inline-block;margin-top:-1px;margin-left:4px;width:11px;height:11px;background:currentColor;color:var(--vp-c-text-3);flex-shrink:0;--icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");-webkit-mask-image:var(--icon);mask-image:var(--icon)}.vp-external-link-icon:not(:where(.vp-raw *)):after{content:""}.vp-sponsor{border-radius:16px;overflow:hidden}.vp-sponsor.aside{border-radius:12px}.vp-sponsor-section+.vp-sponsor-section{margin-top:4px}.vp-sponsor-tier{margin-bottom:4px;text-align:center;letter-spacing:1px;line-height:24px;width:100%;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-sponsor.normal .vp-sponsor-tier{padding:13px 0 11px;font-size:14px}.vp-sponsor.aside .vp-sponsor-tier{padding:9px 0 7px;font-size:12px}.vp-sponsor-grid+.vp-sponsor-tier{margin-top:4px}.vp-sponsor-grid{display:flex;flex-wrap:wrap;gap:4px}.vp-sponsor-grid.xmini .vp-sponsor-grid-link{height:64px}.vp-sponsor-grid.xmini .vp-sponsor-grid-image{max-width:64px;max-height:22px}.vp-sponsor-grid.mini .vp-sponsor-grid-link{height:72px}.vp-sponsor-grid.mini .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.small .vp-sponsor-grid-link{height:96px}.vp-sponsor-grid.small .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.medium .vp-sponsor-grid-link{height:112px}.vp-sponsor-grid.medium .vp-sponsor-grid-image{max-width:120px;max-height:36px}.vp-sponsor-grid.big .vp-sponsor-grid-link{height:184px}.vp-sponsor-grid.big .vp-sponsor-grid-image{max-width:192px;max-height:56px}.vp-sponsor-grid[data-vp-grid="2"] .vp-sponsor-grid-item{width:calc((100% - 4px)/2)}.vp-sponsor-grid[data-vp-grid="3"] .vp-sponsor-grid-item{width:calc((100% - 4px * 2) / 3)}.vp-sponsor-grid[data-vp-grid="4"] .vp-sponsor-grid-item{width:calc((100% - 12px)/4)}.vp-sponsor-grid[data-vp-grid="5"] .vp-sponsor-grid-item{width:calc((100% - 16px)/5)}.vp-sponsor-grid[data-vp-grid="6"] .vp-sponsor-grid-item{width:calc((100% - 4px * 5) / 6)}.vp-sponsor-grid-item{flex-shrink:0;width:100%;background-color:var(--vp-c-bg-soft);transition:background-color .25s}.vp-sponsor-grid-item:hover{background-color:var(--vp-c-default-soft)}.vp-sponsor-grid-item:hover .vp-sponsor-grid-image{filter:grayscale(0) invert(0)}.vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.dark .vp-sponsor-grid-item:hover{background-color:var(--vp-c-white)}.dark .vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.vp-sponsor-grid-link{display:flex}.vp-sponsor-grid-box{display:flex;justify-content:center;align-items:center;width:100%}.vp-sponsor-grid-image{max-width:100%;filter:grayscale(1);transition:filter .25s}.dark .vp-sponsor-grid-image{filter:grayscale(1) invert(1)}.VPBadge[data-v-9613cc9f]{display:inline-block;margin-left:2px;border:1px solid transparent;border-radius:12px;padding:0 10px;line-height:22px;font-size:12px;font-weight:500;transform:translateY(-2px)}.vp-doc h1>.VPBadge[data-v-9613cc9f]{margin-top:4px;vertical-align:top}.vp-doc h2>.VPBadge[data-v-9613cc9f]{margin-top:3px;padding:0 8px;vertical-align:top}.vp-doc h3>.VPBadge[data-v-9613cc9f]{vertical-align:middle}.vp-doc h4>.VPBadge[data-v-9613cc9f],.vp-doc h5>.VPBadge[data-v-9613cc9f],.vp-doc h6>.VPBadge[data-v-9613cc9f]{vertical-align:middle;line-height:18px}.VPBadge.info[data-v-9613cc9f]{border-color:var(--vp-badge-info-border);color:var(--vp-badge-info-text);background-color:var(--vp-badge-info-bg)}.VPBadge.tip[data-v-9613cc9f]{border-color:var(--vp-badge-tip-border);color:var(--vp-badge-tip-text);background-color:var(--vp-badge-tip-bg)}.VPBadge.warning[data-v-9613cc9f]{border-color:var(--vp-badge-warning-border);color:var(--vp-badge-warning-text);background-color:var(--vp-badge-warning-bg)}.VPBadge.danger[data-v-9613cc9f]{border-color:var(--vp-badge-danger-border);color:var(--vp-badge-danger-text);background-color:var(--vp-badge-danger-bg)}.VPBackdrop[data-v-c79a1216]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--vp-z-index-backdrop);background:var(--vp-backdrop-bg-color);transition:opacity .5s}.VPBackdrop.fade-enter-from[data-v-c79a1216],.VPBackdrop.fade-leave-to[data-v-c79a1216]{opacity:0}.VPBackdrop.fade-leave-active[data-v-c79a1216]{transition-duration:.25s}@media (min-width: 1280px){.VPBackdrop[data-v-c79a1216]{display:none}}.NotFound[data-v-dfcf8e56]{padding:64px 24px 96px;text-align:center}@media (min-width: 768px){.NotFound[data-v-dfcf8e56]{padding:96px 32px 168px}}.code[data-v-dfcf8e56]{line-height:64px;font-size:64px;font-weight:600}.title[data-v-dfcf8e56]{padding-top:12px;letter-spacing:2px;line-height:20px;font-size:20px;font-weight:700}.divider[data-v-dfcf8e56]{margin:24px auto 18px;width:64px;height:1px;background-color:var(--vp-c-divider)}.quote[data-v-dfcf8e56]{margin:0 auto;max-width:256px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.action[data-v-dfcf8e56]{padding-top:20px}.link[data-v-dfcf8e56]{display:inline-block;border:1px solid var(--vp-c-brand-1);border-radius:16px;padding:3px 16px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:border-color .25s,color .25s}.link[data-v-dfcf8e56]:hover{border-color:var(--vp-c-brand-2);color:var(--vp-c-brand-2)}.root[data-v-d0ee3533]{position:relative;z-index:1}.nested[data-v-d0ee3533]{padding-left:16px}.outline-link[data-v-d0ee3533]{display:block;line-height:28px;color:var(--vp-c-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .5s;font-weight:400}.outline-link[data-v-d0ee3533]:hover,.outline-link.active[data-v-d0ee3533]{color:var(--vp-c-text-1);transition:color .25s}.outline-link.nested[data-v-d0ee3533]{padding-left:13px}.VPDocAsideOutline[data-v-d330b1bb]{display:none}.VPDocAsideOutline.has-outline[data-v-d330b1bb]{display:block}.content[data-v-d330b1bb]{position:relative;border-left:1px solid var(--vp-c-divider);padding-left:16px;font-size:13px;font-weight:500}.outline-marker[data-v-d330b1bb]{position:absolute;top:32px;left:-1px;z-index:0;opacity:0;width:2px;border-radius:2px;height:18px;background-color:var(--vp-c-brand-1);transition:top .25s cubic-bezier(0,1,.5,1),background-color .5s,opacity .25s}.outline-title[data-v-d330b1bb]{letter-spacing:.4px;line-height:28px;font-size:13px;font-weight:600}.VPDocAside[data-v-3f215769]{display:flex;flex-direction:column;flex-grow:1}.spacer[data-v-3f215769]{flex-grow:1}.VPDocAside[data-v-3f215769] .spacer+.VPDocAsideSponsors,.VPDocAside[data-v-3f215769] .spacer+.VPDocAsideCarbonAds{margin-top:24px}.VPDocAside[data-v-3f215769] .VPDocAsideSponsors+.VPDocAsideCarbonAds{margin-top:16px}.VPLastUpdated[data-v-7de715c0]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 640px){.VPLastUpdated[data-v-7de715c0]{line-height:32px;font-size:14px;font-weight:500}}.VPDocFooter[data-v-ef5dee53]{margin-top:64px}.edit-info[data-v-ef5dee53]{padding-bottom:18px}@media (min-width: 640px){.edit-info[data-v-ef5dee53]{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px}}.edit-link-button[data-v-ef5dee53]{display:flex;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:color .25s}.edit-link-button[data-v-ef5dee53]:hover{color:var(--vp-c-brand-2)}.edit-link-icon[data-v-ef5dee53]{margin-right:8px;width:14px;height:14px;fill:currentColor}.prev-next[data-v-ef5dee53]{border-top:1px solid var(--vp-c-divider);padding-top:24px;display:grid;grid-row-gap:8px}@media (min-width: 640px){.prev-next[data-v-ef5dee53]{grid-template-columns:repeat(2,1fr);grid-column-gap:16px}}.pager-link[data-v-ef5dee53]{display:block;border:1px solid var(--vp-c-divider);border-radius:8px;padding:11px 16px 13px;width:100%;height:100%;transition:border-color .25s}.pager-link[data-v-ef5dee53]:hover{border-color:var(--vp-c-brand-1)}.pager-link.next[data-v-ef5dee53]{margin-left:auto;text-align:right}.desc[data-v-ef5dee53]{display:block;line-height:20px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.title[data-v-ef5dee53]{display:block;line-height:20px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:color .25s}.VPDocOutlineDropdown[data-v-eadfb36b]{margin-bottom:48px}.VPDocOutlineDropdown button[data-v-eadfb36b]{display:block;font-size:14px;font-weight:500;line-height:24px;border:1px solid var(--vp-c-border);padding:4px 12px;color:var(--vp-c-text-2);background-color:var(--vp-c-default-soft);border-radius:8px;transition:color .5s}.VPDocOutlineDropdown button[data-v-eadfb36b]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPDocOutlineDropdown button.open[data-v-eadfb36b]{color:var(--vp-c-text-1)}.icon[data-v-eadfb36b]{display:inline-block;vertical-align:middle;width:16px;height:16px;fill:currentColor}[data-v-eadfb36b] .outline-link{font-size:14px;font-weight:400}.open>.icon[data-v-eadfb36b]{transform:rotate(90deg)}.items[data-v-eadfb36b]{margin-top:12px;border-left:1px solid var(--vp-c-divider)}.VPDoc[data-v-6b87e69f]{padding:32px 24px 96px;width:100%}.VPDoc .VPDocOutlineDropdown[data-v-6b87e69f]{display:none}@media (min-width: 960px) and (max-width: 1279px){.VPDoc .VPDocOutlineDropdown[data-v-6b87e69f]{display:block}}@media (min-width: 768px){.VPDoc[data-v-6b87e69f]{padding:48px 32px 128px}}@media (min-width: 960px){.VPDoc[data-v-6b87e69f]{padding:32px 32px 0}.VPDoc:not(.has-sidebar) .container[data-v-6b87e69f]{display:flex;justify-content:center;max-width:992px}.VPDoc:not(.has-sidebar) .content[data-v-6b87e69f]{max-width:752px}}@media (min-width: 1280px){.VPDoc .container[data-v-6b87e69f]{display:flex;justify-content:center}.VPDoc .aside[data-v-6b87e69f]{display:block}}@media (min-width: 1440px){.VPDoc:not(.has-sidebar) .content[data-v-6b87e69f]{max-width:784px}.VPDoc:not(.has-sidebar) .container[data-v-6b87e69f]{max-width:1104px}}.container[data-v-6b87e69f]{margin:0 auto;width:100%}.aside[data-v-6b87e69f]{position:relative;display:none;order:2;flex-grow:1;padding-left:32px;width:100%;max-width:256px}.left-aside[data-v-6b87e69f]{order:1;padding-left:unset;padding-right:32px}.aside-container[data-v-6b87e69f]{position:fixed;top:0;padding-top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 32px);width:224px;height:100vh;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}.aside-container[data-v-6b87e69f]::-webkit-scrollbar{display:none}.aside-curtain[data-v-6b87e69f]{position:fixed;bottom:0;z-index:10;width:224px;height:32px;background:linear-gradient(transparent,var(--vp-c-bg) 70%)}.aside-content[data-v-6b87e69f]{display:flex;flex-direction:column;min-height:calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px));padding-bottom:32px}.content[data-v-6b87e69f]{position:relative;margin:0 auto;width:100%}@media (min-width: 960px){.content[data-v-6b87e69f]{padding:0 32px 128px}}@media (min-width: 1280px){.content[data-v-6b87e69f]{order:1;margin:0;min-width:640px}}.content-container[data-v-6b87e69f]{margin:0 auto}.VPDoc.has-aside .content-container[data-v-6b87e69f]{max-width:688px}.external-link-icon-enabled :is(.vp-doc a[href*="://"][data-v-6b87e69f],.vp-doc a[target=_blank][data-v-6b87e69f]):after{content:"";color:currentColor}.VPButton[data-v-c1c5efc1]{display:inline-block;border:1px solid transparent;text-align:center;font-weight:600;white-space:nowrap;transition:color .25s,border-color .25s,background-color .25s}.VPButton[data-v-c1c5efc1]:active{transition:color .1s,border-color .1s,background-color .1s}.VPButton.medium[data-v-c1c5efc1]{border-radius:20px;padding:0 20px;line-height:38px;font-size:14px}.VPButton.big[data-v-c1c5efc1]{border-radius:24px;padding:0 24px;line-height:46px;font-size:16px}.VPButton.brand[data-v-c1c5efc1]{border-color:var(--vp-button-brand-border);color:var(--vp-button-brand-text);background-color:var(--vp-button-brand-bg)}.VPButton.brand[data-v-c1c5efc1]:hover{border-color:var(--vp-button-brand-hover-border);color:var(--vp-button-brand-hover-text);background-color:var(--vp-button-brand-hover-bg)}.VPButton.brand[data-v-c1c5efc1]:active{border-color:var(--vp-button-brand-active-border);color:var(--vp-button-brand-active-text);background-color:var(--vp-button-brand-active-bg)}.VPButton.alt[data-v-c1c5efc1]{border-color:var(--vp-button-alt-border);color:var(--vp-button-alt-text);background-color:var(--vp-button-alt-bg)}.VPButton.alt[data-v-c1c5efc1]:hover{border-color:var(--vp-button-alt-hover-border);color:var(--vp-button-alt-hover-text);background-color:var(--vp-button-alt-hover-bg)}.VPButton.alt[data-v-c1c5efc1]:active{border-color:var(--vp-button-alt-active-border);color:var(--vp-button-alt-active-text);background-color:var(--vp-button-alt-active-bg)}.VPButton.sponsor[data-v-c1c5efc1]{border-color:var(--vp-button-sponsor-border);color:var(--vp-button-sponsor-text);background-color:var(--vp-button-sponsor-bg)}.VPButton.sponsor[data-v-c1c5efc1]:hover{border-color:var(--vp-button-sponsor-hover-border);color:var(--vp-button-sponsor-hover-text);background-color:var(--vp-button-sponsor-hover-bg)}.VPButton.sponsor[data-v-c1c5efc1]:active{border-color:var(--vp-button-sponsor-active-border);color:var(--vp-button-sponsor-active-text);background-color:var(--vp-button-sponsor-active-bg)}html:not(.dark) .VPImage.dark[data-v-8426fc1a]{display:none}.dark .VPImage.light[data-v-8426fc1a]{display:none}.VPHero[data-v-da5d1713]{margin-top:calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px}@media (min-width: 640px){.VPHero[data-v-da5d1713]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px}}@media (min-width: 960px){.VPHero[data-v-da5d1713]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px}}.container[data-v-da5d1713]{display:flex;flex-direction:column;margin:0 auto;max-width:1152px}@media (min-width: 960px){.container[data-v-da5d1713]{flex-direction:row}}.main[data-v-da5d1713]{position:relative;z-index:10;order:2;flex-grow:1;flex-shrink:0}.VPHero.has-image .container[data-v-da5d1713]{text-align:center}@media (min-width: 960px){.VPHero.has-image .container[data-v-da5d1713]{text-align:left}.main[data-v-da5d1713]{order:1;width:calc((100% / 3) * 2)}.VPHero.has-image .main[data-v-da5d1713]{max-width:592px}}.name[data-v-da5d1713],.text[data-v-da5d1713]{max-width:392px;letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;white-space:pre-wrap}.VPHero.has-image .name[data-v-da5d1713],.VPHero.has-image .text[data-v-da5d1713]{margin:0 auto}.name[data-v-da5d1713]{color:var(--vp-home-hero-name-color)}.clip[data-v-da5d1713]{background:var(--vp-home-hero-name-background);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--vp-home-hero-name-color)}@media (min-width: 640px){.name[data-v-da5d1713],.text[data-v-da5d1713]{max-width:576px;line-height:56px;font-size:48px}}@media (min-width: 960px){.name[data-v-da5d1713],.text[data-v-da5d1713]{line-height:64px;font-size:56px}.VPHero.has-image .name[data-v-da5d1713],.VPHero.has-image .text[data-v-da5d1713]{margin:0}}.tagline[data-v-da5d1713]{padding-top:8px;max-width:392px;line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--vp-c-text-2)}.VPHero.has-image .tagline[data-v-da5d1713]{margin:0 auto}@media (min-width: 640px){.tagline[data-v-da5d1713]{padding-top:12px;max-width:576px;line-height:32px;font-size:20px}}@media (min-width: 960px){.tagline[data-v-da5d1713]{line-height:36px;font-size:24px}.VPHero.has-image .tagline[data-v-da5d1713]{margin:0}}.actions[data-v-da5d1713]{display:flex;flex-wrap:wrap;margin:-6px;padding-top:24px}.VPHero.has-image .actions[data-v-da5d1713]{justify-content:center}@media (min-width: 640px){.actions[data-v-da5d1713]{padding-top:32px}}@media (min-width: 960px){.VPHero.has-image .actions[data-v-da5d1713]{justify-content:flex-start}}.action[data-v-da5d1713]{flex-shrink:0;padding:6px}.image[data-v-da5d1713]{order:1;margin:-76px -24px -48px}@media (min-width: 640px){.image[data-v-da5d1713]{margin:-108px -24px -48px}}@media (min-width: 960px){.image[data-v-da5d1713]{flex-grow:1;order:2;margin:0;min-height:100%}}.image-container[data-v-da5d1713]{position:relative;margin:0 auto;width:320px;height:320px}@media (min-width: 640px){.image-container[data-v-da5d1713]{width:392px;height:392px}}@media (min-width: 960px){.image-container[data-v-da5d1713]{display:flex;justify-content:center;align-items:center;width:100%;height:100%;transform:translate(-32px,-32px)}}.image-bg[data-v-da5d1713]{position:absolute;top:50%;left:50%;border-radius:50%;width:192px;height:192px;background-image:var(--vp-home-hero-image-background-image);filter:var(--vp-home-hero-image-filter);transform:translate(-50%,-50%)}@media (min-width: 640px){.image-bg[data-v-da5d1713]{width:256px;height:256px}}@media (min-width: 960px){.image-bg[data-v-da5d1713]{width:320px;height:320px}}[data-v-da5d1713] .image-src{position:absolute;top:50%;left:50%;max-width:192px;max-height:192px;transform:translate(-50%,-50%)}@media (min-width: 640px){[data-v-da5d1713] .image-src{max-width:256px;max-height:256px}}@media (min-width: 960px){[data-v-da5d1713] .image-src{max-width:320px;max-height:320px}}.VPFeature[data-v-33204567]{display:block;border:1px solid var(--vp-c-bg-soft);border-radius:12px;height:100%;background-color:var(--vp-c-bg-soft);transition:border-color .25s,background-color .25s}.VPFeature.link[data-v-33204567]:hover{border-color:var(--vp-c-brand-1)}.box[data-v-33204567]{display:flex;flex-direction:column;padding:24px;height:100%}.box[data-v-33204567]>.VPImage{margin-bottom:20px}.icon[data-v-33204567]{display:flex;justify-content:center;align-items:center;margin-bottom:20px;border-radius:6px;background-color:var(--vp-c-default-soft);width:48px;height:48px;font-size:24px;transition:background-color .25s}.title[data-v-33204567]{line-height:24px;font-size:16px;font-weight:600}.details[data-v-33204567]{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.link-text[data-v-33204567]{padding-top:8px}.link-text-value[data-v-33204567]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-brand-1)}.link-text-icon[data-v-33204567]{display:inline-block;margin-left:6px;width:14px;height:14px;fill:currentColor}.VPFeatures[data-v-a6181336]{position:relative;padding:0 24px}@media (min-width: 640px){.VPFeatures[data-v-a6181336]{padding:0 48px}}@media (min-width: 960px){.VPFeatures[data-v-a6181336]{padding:0 64px}}.container[data-v-a6181336]{margin:0 auto;max-width:1152px}.items[data-v-a6181336]{display:flex;flex-wrap:wrap;margin:-8px}.item[data-v-a6181336]{padding:8px;width:100%}@media (min-width: 640px){.item.grid-2[data-v-a6181336],.item.grid-4[data-v-a6181336],.item.grid-6[data-v-a6181336]{width:50%}}@media (min-width: 768px){.item.grid-2[data-v-a6181336],.item.grid-4[data-v-a6181336]{width:50%}.item.grid-3[data-v-a6181336],.item.grid-6[data-v-a6181336]{width:calc(100% / 3)}}@media (min-width: 960px){.item.grid-4[data-v-a6181336]{width:25%}}.VPHome[data-v-d82743a8]{padding-bottom:96px}.VPHome[data-v-d82743a8] .VPHomeSponsors{margin-top:112px;margin-bottom:-128px}@media (min-width: 768px){.VPHome[data-v-d82743a8]{padding-bottom:128px}}.VPContent[data-v-669faec9]{flex-grow:1;flex-shrink:0;margin:var(--vp-layout-top-height, 0px) auto 0;width:100%}.VPContent.is-home[data-v-669faec9]{width:100%;max-width:100%}.VPContent.has-sidebar[data-v-669faec9]{margin:0}@media (min-width: 960px){.VPContent[data-v-669faec9]{padding-top:var(--vp-nav-height)}.VPContent.has-sidebar[data-v-669faec9]{margin:var(--vp-layout-top-height, 0px) 0 0;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPContent.has-sidebar[data-v-669faec9]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.VPFooter[data-v-e03eb2e1]{position:relative;z-index:var(--vp-z-index-footer);border-top:1px solid var(--vp-c-gutter);padding:32px 24px;background-color:var(--vp-c-bg)}.VPFooter.has-sidebar[data-v-e03eb2e1]{display:none}@media (min-width: 768px){.VPFooter[data-v-e03eb2e1]{padding:32px}}.container[data-v-e03eb2e1]{margin:0 auto;max-width:var(--vp-layout-max-width);text-align:center}.message[data-v-e03eb2e1],.copyright[data-v-e03eb2e1]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.VPLocalNavOutlineDropdown[data-v-1c15a60a]{padding:12px 20px 11px}.VPLocalNavOutlineDropdown button[data-v-1c15a60a]{display:block;font-size:12px;font-weight:500;line-height:24px;color:var(--vp-c-text-2);transition:color .5s;position:relative}.VPLocalNavOutlineDropdown button[data-v-1c15a60a]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPLocalNavOutlineDropdown button.open[data-v-1c15a60a]{color:var(--vp-c-text-1)}.icon[data-v-1c15a60a]{display:inline-block;vertical-align:middle;margin-left:2px;width:14px;height:14px;fill:currentColor}[data-v-1c15a60a] .outline-link{font-size:14px;padding:2px 0}.open>.icon[data-v-1c15a60a]{transform:rotate(90deg)}.items[data-v-1c15a60a]{position:absolute;top:64px;right:16px;left:16px;display:grid;gap:1px;border:1px solid var(--vp-c-border);border-radius:8px;background-color:var(--vp-c-gutter);max-height:calc(var(--vp-vh, 100vh) - 86px);overflow:hidden auto;box-shadow:var(--vp-shadow-3)}.header[data-v-1c15a60a]{background-color:var(--vp-c-bg-soft)}.top-link[data-v-1c15a60a]{display:block;padding:0 16px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1)}.outline[data-v-1c15a60a]{padding:8px 0;background-color:var(--vp-c-bg-soft)}.flyout-enter-active[data-v-1c15a60a]{transition:all .2s ease-out}.flyout-leave-active[data-v-1c15a60a]{transition:all .15s ease-in}.flyout-enter-from[data-v-1c15a60a],.flyout-leave-to[data-v-1c15a60a]{opacity:0;transform:translateY(-16px)}.VPLocalNav[data-v-79c8c1df]{position:sticky;top:0;left:0;z-index:var(--vp-z-index-local-nav);display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--vp-c-gutter);border-bottom:1px solid var(--vp-c-gutter);padding-top:var(--vp-layout-top-height, 0px);width:100%;background-color:var(--vp-local-nav-bg-color)}.VPLocalNav.fixed[data-v-79c8c1df]{position:fixed}.VPLocalNav.reached-top[data-v-79c8c1df]{border-top-color:transparent}@media (min-width: 960px){.VPLocalNav[data-v-79c8c1df]{display:none}}.menu[data-v-79c8c1df]{display:flex;align-items:center;padding:12px 24px 11px;line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.menu[data-v-79c8c1df]:hover{color:var(--vp-c-text-1);transition:color .25s}@media (min-width: 768px){.menu[data-v-79c8c1df]{padding:0 32px}}.menu-icon[data-v-79c8c1df]{margin-right:8px;width:16px;height:16px;fill:currentColor}.VPOutlineDropdown[data-v-79c8c1df]{padding:12px 24px 11px}@media (min-width: 768px){.VPOutlineDropdown[data-v-79c8c1df]{padding:12px 32px 11px}}.VPSwitch[data-v-b1685198]{position:relative;border-radius:11px;display:block;width:40px;height:22px;flex-shrink:0;border:1px solid var(--vp-input-border-color);background-color:var(--vp-input-switch-bg-color);transition:border-color .25s!important}.VPSwitch[data-v-b1685198]:hover{border-color:var(--vp-c-brand-1)}.check[data-v-b1685198]{position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background-color:var(--vp-c-neutral-inverse);box-shadow:var(--vp-shadow-1);transition:transform .25s!important}.icon[data-v-b1685198]{position:relative;display:block;width:18px;height:18px;border-radius:50%;overflow:hidden}.icon[data-v-b1685198] svg{position:absolute;top:3px;left:3px;width:12px;height:12px;fill:var(--vp-c-text-2)}.dark .icon[data-v-b1685198] svg{fill:var(--vp-c-text-1);transition:opacity .25s!important}.sun[data-v-ce54a7d1]{opacity:1}.moon[data-v-ce54a7d1],.dark .sun[data-v-ce54a7d1]{opacity:0}.dark .moon[data-v-ce54a7d1]{opacity:1}.dark .VPSwitchAppearance[data-v-ce54a7d1] .check{transform:translate(18px)}.VPNavBarAppearance[data-v-f6a63727]{display:none}@media (min-width: 1280px){.VPNavBarAppearance[data-v-f6a63727]{display:flex;align-items:center}}.VPMenuGroup+.VPMenuLink[data-v-43f1e123]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.link[data-v-43f1e123]{display:block;border-radius:6px;padding:0 12px;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);white-space:nowrap;transition:background-color .25s,color .25s}.link[data-v-43f1e123]:hover{color:var(--vp-c-brand-1);background-color:var(--vp-c-default-soft)}.link.active[data-v-43f1e123]{color:var(--vp-c-brand-1)}.VPMenuGroup[data-v-69e747b5]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.VPMenuGroup[data-v-69e747b5]:first-child{margin-top:0;border-top:0;padding-top:0}.VPMenuGroup+.VPMenuGroup[data-v-69e747b5]{margin-top:12px;border-top:1px solid var(--vp-c-divider)}.title[data-v-69e747b5]{padding:0 12px;line-height:32px;font-size:14px;font-weight:600;color:var(--vp-c-text-2);white-space:nowrap;transition:color .25s}.VPMenu[data-v-e7ea1737]{border-radius:12px;padding:12px;min-width:128px;border:1px solid var(--vp-c-divider);background-color:var(--vp-c-bg-elv);box-shadow:var(--vp-shadow-3);transition:background-color .5s;max-height:calc(100vh - var(--vp-nav-height));overflow-y:auto}.VPMenu[data-v-e7ea1737] .group{margin:0 -12px;padding:0 12px 12px}.VPMenu[data-v-e7ea1737] .group+.group{border-top:1px solid var(--vp-c-divider);padding:11px 12px 12px}.VPMenu[data-v-e7ea1737] .group:last-child{padding-bottom:0}.VPMenu[data-v-e7ea1737] .group+.item{border-top:1px solid var(--vp-c-divider);padding:11px 16px 0}.VPMenu[data-v-e7ea1737] .item{padding:0 16px;white-space:nowrap}.VPMenu[data-v-e7ea1737] .label{flex-grow:1;line-height:28px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.VPMenu[data-v-e7ea1737] .action{padding-left:24px}.VPFlyout[data-v-9c007e85]{position:relative}.VPFlyout[data-v-9c007e85]:hover{color:var(--vp-c-brand-1);transition:color .25s}.VPFlyout:hover .text[data-v-9c007e85]{color:var(--vp-c-text-2)}.VPFlyout:hover .icon[data-v-9c007e85]{fill:var(--vp-c-text-2)}.VPFlyout.active .text[data-v-9c007e85]{color:var(--vp-c-brand-1)}.VPFlyout.active:hover .text[data-v-9c007e85]{color:var(--vp-c-brand-2)}.VPFlyout:hover .menu[data-v-9c007e85],.button[aria-expanded=true]+.menu[data-v-9c007e85]{opacity:1;visibility:visible;transform:translateY(0)}.button[aria-expanded=false]+.menu[data-v-9c007e85]{opacity:0;visibility:hidden;transform:translateY(0)}.button[data-v-9c007e85]{display:flex;align-items:center;padding:0 12px;height:var(--vp-nav-height);color:var(--vp-c-text-1);transition:color .5s}.text[data-v-9c007e85]{display:flex;align-items:center;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.option-icon[data-v-9c007e85]{margin-right:0;width:16px;height:16px;fill:currentColor}.text-icon[data-v-9c007e85]{margin-left:4px;width:14px;height:14px;fill:currentColor}.icon[data-v-9c007e85]{width:20px;height:20px;fill:currentColor;transition:fill .25s}.menu[data-v-9c007e85]{position:absolute;top:calc(var(--vp-nav-height) / 2 + 20px);right:0;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,transform .25s}.VPSocialLink[data-v-f80f8133]{display:flex;justify-content:center;align-items:center;width:36px;height:36px;color:var(--vp-c-text-2);transition:color .5s}.VPSocialLink[data-v-f80f8133]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPSocialLink[data-v-f80f8133]>svg{width:20px;height:20px;fill:currentColor}.VPSocialLinks[data-v-7bc22406]{display:flex;justify-content:center}.VPNavBarExtra[data-v-40855f84]{display:none;margin-right:-12px}@media (min-width: 768px){.VPNavBarExtra[data-v-40855f84]{display:block}}@media (min-width: 1280px){.VPNavBarExtra[data-v-40855f84]{display:none}}.trans-title[data-v-40855f84]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.item.appearance[data-v-40855f84],.item.social-links[data-v-40855f84]{display:flex;align-items:center;padding:0 12px}.item.appearance[data-v-40855f84]{min-width:176px}.appearance-action[data-v-40855f84]{margin-right:-2px}.social-links-list[data-v-40855f84]{margin:-4px -8px}.VPNavBarHamburger[data-v-e5dd9c1c]{display:flex;justify-content:center;align-items:center;width:48px;height:var(--vp-nav-height)}@media (min-width: 768px){.VPNavBarHamburger[data-v-e5dd9c1c]{display:none}}.container[data-v-e5dd9c1c]{position:relative;width:16px;height:14px;overflow:hidden}.VPNavBarHamburger:hover .top[data-v-e5dd9c1c]{top:0;left:0;transform:translate(4px)}.VPNavBarHamburger:hover .middle[data-v-e5dd9c1c]{top:6px;left:0;transform:translate(0)}.VPNavBarHamburger:hover .bottom[data-v-e5dd9c1c]{top:12px;left:0;transform:translate(8px)}.VPNavBarHamburger.active .top[data-v-e5dd9c1c]{top:6px;transform:translate(0) rotate(225deg)}.VPNavBarHamburger.active .middle[data-v-e5dd9c1c]{top:6px;transform:translate(16px)}.VPNavBarHamburger.active .bottom[data-v-e5dd9c1c]{top:6px;transform:translate(0) rotate(135deg)}.VPNavBarHamburger.active:hover .top[data-v-e5dd9c1c],.VPNavBarHamburger.active:hover .middle[data-v-e5dd9c1c],.VPNavBarHamburger.active:hover .bottom[data-v-e5dd9c1c]{background-color:var(--vp-c-text-2);transition:top .25s,background-color .25s,transform .25s}.top[data-v-e5dd9c1c],.middle[data-v-e5dd9c1c],.bottom[data-v-e5dd9c1c]{position:absolute;width:16px;height:2px;background-color:var(--vp-c-text-1);transition:top .25s,background-color .5s,transform .25s}.top[data-v-e5dd9c1c]{top:0;left:0;transform:translate(0)}.middle[data-v-e5dd9c1c]{top:6px;left:0;transform:translate(8px)}.bottom[data-v-e5dd9c1c]{top:12px;left:0;transform:translate(4px)}.VPNavBarMenuLink[data-v-42ef59de]{display:flex;align-items:center;padding:0 12px;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.VPNavBarMenuLink.active[data-v-42ef59de],.VPNavBarMenuLink[data-v-42ef59de]:hover{color:var(--vp-c-brand-1)}.VPNavBarMenu[data-v-7f418b0f]{display:none}@media (min-width: 768px){.VPNavBarMenu[data-v-7f418b0f]{display:flex}}/*! @docsearch/css 3.5.2 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;-webkit-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;position:relative;padding:0 0 2px;border:0;top:-1px;width:20px}@media (max-width:768px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{animation:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0;stroke-width:var(--docsearch-icon-stroke-width)}}.DocSearch-Reset{animation:fade-in .1s ease-in forwards;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0;stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"» "}.DocSearch-Prefill{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:2px;box-shadow:var(--docsearch-key-shadow);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 1px;color:var(--docsearch-muted-color);border:0;width:20px}@media (max-width:768px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;-webkit-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}[class*=DocSearch]{--docsearch-primary-color: var(--vp-c-brand-1);--docsearch-highlight-color: var(--docsearch-primary-color);--docsearch-text-color: var(--vp-c-text-1);--docsearch-muted-color: var(--vp-c-text-2);--docsearch-searchbox-shadow: none;--docsearch-searchbox-background: transparent;--docsearch-searchbox-focus-background: transparent;--docsearch-key-gradient: transparent;--docsearch-key-shadow: none;--docsearch-modal-background: var(--vp-c-bg-soft);--docsearch-footer-background: var(--vp-c-bg)}.dark [class*=DocSearch]{--docsearch-modal-shadow: none;--docsearch-footer-shadow: none;--docsearch-logo-color: var(--vp-c-text-2);--docsearch-hit-background: var(--vp-c-default-soft);--docsearch-hit-color: var(--vp-c-text-2);--docsearch-hit-shadow: none}.DocSearch-Button{display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:48px;height:55px;background:transparent;transition:border-color .25s}.DocSearch-Button:hover{background:transparent}.DocSearch-Button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}.DocSearch-Button:focus:not(:focus-visible){outline:none!important}@media (min-width: 768px){.DocSearch-Button{justify-content:flex-start;border:1px solid transparent;border-radius:8px;padding:0 10px 0 12px;width:100%;height:40px;background-color:var(--vp-c-bg-alt)}.DocSearch-Button:hover{border-color:var(--vp-c-brand-1);background:var(--vp-c-bg-alt)}}.DocSearch-Button .DocSearch-Button-Container{display:flex;align-items:center}.DocSearch-Button .DocSearch-Search-Icon{position:relative;width:16px;height:16px;color:var(--vp-c-text-1);fill:currentColor;transition:color .5s}.DocSearch-Button:hover .DocSearch-Search-Icon{color:var(--vp-c-text-1)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Search-Icon{top:1px;margin-right:8px;width:14px;height:14px;color:var(--vp-c-text-2)}}.DocSearch-Button .DocSearch-Button-Placeholder{display:none;margin-top:2px;padding:0 16px 0 0;font-size:13px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.DocSearch-Button:hover .DocSearch-Button-Placeholder{color:var(--vp-c-text-1)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Placeholder{display:inline-block}}.DocSearch-Button .DocSearch-Button-Keys{direction:ltr;display:none;min-width:auto}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Keys{display:flex;align-items:center}}.DocSearch-Button .DocSearch-Button-Key{display:block;margin:2px 0 0;border:1px solid var(--vp-c-divider);border-right:none;border-radius:4px 0 0 4px;padding-left:6px;min-width:0;width:auto;height:22px;line-height:22px;font-family:var(--vp-font-family-base);font-size:12px;font-weight:500;transition:color .5s,border-color .5s}.DocSearch-Button .DocSearch-Button-Key+.DocSearch-Button-Key{border-right:1px solid var(--vp-c-divider);border-left:none;border-radius:0 4px 4px 0;padding-left:2px;padding-right:6px}.DocSearch-Button .DocSearch-Button-Key:first-child{font-size:0!important}.DocSearch-Button .DocSearch-Button-Key:first-child:after{content:"Ctrl";font-size:12px;letter-spacing:normal;color:var(--docsearch-muted-color)}.mac .DocSearch-Button .DocSearch-Button-Key:first-child:after{content:"⌘"}.DocSearch-Button .DocSearch-Button-Key:first-child>*{display:none}.VPNavBarSearch{display:flex;align-items:center}@media (min-width: 768px){.VPNavBarSearch{flex-grow:1;padding-left:24px}}@media (min-width: 960px){.VPNavBarSearch{padding-left:32px}}.dark .DocSearch-Footer{border-top:1px solid var(--vp-c-divider)}.DocSearch-Form{border:1px solid var(--vp-c-brand-1);background-color:var(--vp-c-white)}.dark .DocSearch-Form{background-color:var(--vp-c-default-soft)}.DocSearch-Screen-Icon>svg{margin:auto}.VPNavBarSocialLinks[data-v-0394ad82]{display:none}@media (min-width: 1280px){.VPNavBarSocialLinks[data-v-0394ad82]{display:flex;align-items:center}}.title[data-v-86d1bed8]{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;height:var(--vp-nav-height);font-size:16px;font-weight:600;color:var(--vp-c-text-1);transition:opacity .25s}@media (min-width: 960px){.title[data-v-86d1bed8]{flex-shrink:0}.VPNavBarTitle.has-sidebar .title[data-v-86d1bed8]{border-bottom-color:var(--vp-c-divider)}}[data-v-86d1bed8] .logo{margin-right:8px;height:var(--vp-nav-logo-height)}.VPNavBarTranslations[data-v-74abcbb9]{display:none}@media (min-width: 1280px){.VPNavBarTranslations[data-v-74abcbb9]{display:flex;align-items:center}}.title[data-v-74abcbb9]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.VPNavBar[data-v-a0fd61f4]{position:relative;border-bottom:1px solid transparent;padding:0 8px 0 24px;height:var(--vp-nav-height);pointer-events:none;white-space:nowrap}@media (min-width: 768px){.VPNavBar[data-v-a0fd61f4]{padding:0 32px}}@media (min-width: 960px){.VPNavBar.has-sidebar[data-v-a0fd61f4]{padding:0}.VPNavBar[data-v-a0fd61f4]:not(.has-sidebar):not(.top){border-bottom-color:var(--vp-c-gutter);background-color:var(--vp-nav-bg-color)}}.container[data-v-a0fd61f4]{display:flex;justify-content:space-between;margin:0 auto;max-width:calc(var(--vp-layout-max-width) - 64px);height:var(--vp-nav-height);pointer-events:none}.container>.title[data-v-a0fd61f4],.container>.content[data-v-a0fd61f4]{pointer-events:none}.container[data-v-a0fd61f4] *{pointer-events:auto}@media (min-width: 960px){.VPNavBar.has-sidebar .container[data-v-a0fd61f4]{max-width:100%}}.title[data-v-a0fd61f4]{flex-shrink:0;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar.has-sidebar .title[data-v-a0fd61f4]{position:absolute;top:0;left:0;z-index:2;padding:0 32px;width:var(--vp-sidebar-width);height:var(--vp-nav-height);background-color:transparent}}@media (min-width: 1440px){.VPNavBar.has-sidebar .title[data-v-a0fd61f4]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}.content[data-v-a0fd61f4]{flex-grow:1}@media (min-width: 960px){.VPNavBar.has-sidebar .content[data-v-a0fd61f4]{position:relative;z-index:1;padding-right:32px;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPNavBar.has-sidebar .content[data-v-a0fd61f4]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.content-body[data-v-a0fd61f4]{display:flex;justify-content:flex-end;align-items:center;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar:not(.top) .content-body[data-v-a0fd61f4]{position:relative;background-color:var(--vp-nav-bg-color)}}@media (max-width: 767px){.content-body[data-v-a0fd61f4]{column-gap:.5rem}}.menu+.translations[data-v-a0fd61f4]:before,.menu+.appearance[data-v-a0fd61f4]:before,.menu+.social-links[data-v-a0fd61f4]:before,.translations+.appearance[data-v-a0fd61f4]:before,.appearance+.social-links[data-v-a0fd61f4]:before{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--vp-c-divider);content:""}.menu+.appearance[data-v-a0fd61f4]:before,.translations+.appearance[data-v-a0fd61f4]:before{margin-right:16px}.appearance+.social-links[data-v-a0fd61f4]:before{margin-left:16px}.social-links[data-v-a0fd61f4]{margin-right:-8px}@media (min-width: 960px){.VPNavBar.has-sidebar .curtain[data-v-a0fd61f4]{position:absolute;right:0;bottom:-31px;width:calc(100% - var(--vp-sidebar-width));height:32px}.VPNavBar.has-sidebar .curtain[data-v-a0fd61f4]:before{display:block;width:100%;height:32px;background:linear-gradient(var(--vp-c-bg),transparent 70%);content:""}}@media (min-width: 1440px){.VPNavBar.has-sidebar .curtain[data-v-a0fd61f4]{width:calc(100% - ((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)))}}.VPNavScreenAppearance[data-v-add8f686]{display:flex;justify-content:space-between;align-items:center;border-radius:8px;padding:12px 14px 12px 16px;background-color:var(--vp-c-bg-soft)}.text[data-v-add8f686]{line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.VPNavScreenMenuLink[data-v-05f27b2a]{display:block;border-bottom:1px solid var(--vp-c-divider);padding:12px 0 11px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:border-color .25s,color .25s}.VPNavScreenMenuLink[data-v-05f27b2a]:hover{color:var(--vp-c-brand-1)}.VPNavScreenMenuGroupLink[data-v-19976ae1]{display:block;margin-left:12px;line-height:32px;font-size:14px;font-weight:400;color:var(--vp-c-text-1);transition:color .25s}.VPNavScreenMenuGroupLink[data-v-19976ae1]:hover{color:var(--vp-c-brand-1)}.VPNavScreenMenuGroupSection[data-v-8133b170]{display:block}.title[data-v-8133b170]{line-height:32px;font-size:13px;font-weight:700;color:var(--vp-c-text-2);transition:color .25s}.VPNavScreenMenuGroup[data-v-1ecb84e7]{border-bottom:1px solid var(--vp-c-divider);height:48px;overflow:hidden;transition:border-color .5s}.VPNavScreenMenuGroup .items[data-v-1ecb84e7]{visibility:hidden}.VPNavScreenMenuGroup.open .items[data-v-1ecb84e7]{visibility:visible}.VPNavScreenMenuGroup.open[data-v-1ecb84e7]{padding-bottom:10px;height:auto}.VPNavScreenMenuGroup.open .button[data-v-1ecb84e7]{padding-bottom:6px;color:var(--vp-c-brand-1)}.VPNavScreenMenuGroup.open .button-icon[data-v-1ecb84e7]{transform:rotate(45deg)}.button[data-v-1ecb84e7]{display:flex;justify-content:space-between;align-items:center;padding:12px 4px 11px 0;width:100%;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.button[data-v-1ecb84e7]:hover{color:var(--vp-c-brand-1)}.button-icon[data-v-1ecb84e7]{width:14px;height:14px;fill:var(--vp-c-text-2);transition:fill .5s,transform .25s}.group[data-v-1ecb84e7]:first-child{padding-top:0}.group+.group[data-v-1ecb84e7],.group+.item[data-v-1ecb84e7]{padding-top:4px}.VPNavScreenTranslations[data-v-d72aa483]{height:24px;overflow:hidden}.VPNavScreenTranslations.open[data-v-d72aa483]{height:auto}.title[data-v-d72aa483]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-text-1)}.icon[data-v-d72aa483]{width:16px;height:16px;fill:currentColor}.icon.lang[data-v-d72aa483]{margin-right:8px}.icon.chevron[data-v-d72aa483]{margin-left:4px}.list[data-v-d72aa483]{padding:4px 0 0 24px}.link[data-v-d72aa483]{line-height:32px;font-size:13px;color:var(--vp-c-text-1)}.VPNavScreen[data-v-cc5739dd]{position:fixed;top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px);right:0;bottom:0;left:0;padding:0 32px;width:100%;background-color:var(--vp-nav-screen-bg-color);overflow-y:auto;transition:background-color .5s;pointer-events:auto}.VPNavScreen.fade-enter-active[data-v-cc5739dd],.VPNavScreen.fade-leave-active[data-v-cc5739dd]{transition:opacity .25s}.VPNavScreen.fade-enter-active .container[data-v-cc5739dd],.VPNavScreen.fade-leave-active .container[data-v-cc5739dd]{transition:transform .25s ease}.VPNavScreen.fade-enter-from[data-v-cc5739dd],.VPNavScreen.fade-leave-to[data-v-cc5739dd]{opacity:0}.VPNavScreen.fade-enter-from .container[data-v-cc5739dd],.VPNavScreen.fade-leave-to .container[data-v-cc5739dd]{transform:translateY(-8px)}@media (min-width: 768px){.VPNavScreen[data-v-cc5739dd]{display:none}}.container[data-v-cc5739dd]{margin:0 auto;padding:24px 0 96px;max-width:288px}.menu+.translations[data-v-cc5739dd],.menu+.appearance[data-v-cc5739dd],.translations+.appearance[data-v-cc5739dd]{margin-top:24px}.menu+.social-links[data-v-cc5739dd]{margin-top:16px}.appearance+.social-links[data-v-cc5739dd]{margin-top:16px}.VPNav[data-v-7e5bc4a5]{position:relative;top:var(--vp-layout-top-height, 0px);left:0;z-index:var(--vp-z-index-nav);width:100%;pointer-events:none;transition:background-color .5s}@media (min-width: 960px){.VPNav[data-v-7e5bc4a5]{position:fixed}}.VPSidebarItem.level-0[data-v-e31bd47b]{padding-bottom:24px}.VPSidebarItem.collapsed.level-0[data-v-e31bd47b]{padding-bottom:10px}.item[data-v-e31bd47b]{position:relative;display:flex;width:100%}.VPSidebarItem.collapsible>.item[data-v-e31bd47b]{cursor:pointer}.indicator[data-v-e31bd47b]{position:absolute;top:6px;bottom:6px;left:-17px;width:2px;border-radius:2px;transition:background-color .25s}.VPSidebarItem.level-2.is-active>.item>.indicator[data-v-e31bd47b],.VPSidebarItem.level-3.is-active>.item>.indicator[data-v-e31bd47b],.VPSidebarItem.level-4.is-active>.item>.indicator[data-v-e31bd47b],.VPSidebarItem.level-5.is-active>.item>.indicator[data-v-e31bd47b]{background-color:var(--vp-c-brand-1)}.link[data-v-e31bd47b]{display:flex;align-items:center;flex-grow:1}.text[data-v-e31bd47b]{flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;transition:color .25s}.VPSidebarItem.level-0 .text[data-v-e31bd47b]{font-weight:700;color:var(--vp-c-text-1)}.VPSidebarItem.level-1 .text[data-v-e31bd47b],.VPSidebarItem.level-2 .text[data-v-e31bd47b],.VPSidebarItem.level-3 .text[data-v-e31bd47b],.VPSidebarItem.level-4 .text[data-v-e31bd47b],.VPSidebarItem.level-5 .text[data-v-e31bd47b]{font-weight:500;color:var(--vp-c-text-2)}.VPSidebarItem.level-0.is-link>.item>.link:hover .text[data-v-e31bd47b],.VPSidebarItem.level-1.is-link>.item>.link:hover .text[data-v-e31bd47b],.VPSidebarItem.level-2.is-link>.item>.link:hover .text[data-v-e31bd47b],.VPSidebarItem.level-3.is-link>.item>.link:hover .text[data-v-e31bd47b],.VPSidebarItem.level-4.is-link>.item>.link:hover .text[data-v-e31bd47b],.VPSidebarItem.level-5.is-link>.item>.link:hover .text[data-v-e31bd47b]{color:var(--vp-c-brand-1)}.VPSidebarItem.level-0.has-active>.item>.text[data-v-e31bd47b],.VPSidebarItem.level-1.has-active>.item>.text[data-v-e31bd47b],.VPSidebarItem.level-2.has-active>.item>.text[data-v-e31bd47b],.VPSidebarItem.level-3.has-active>.item>.text[data-v-e31bd47b],.VPSidebarItem.level-4.has-active>.item>.text[data-v-e31bd47b],.VPSidebarItem.level-5.has-active>.item>.text[data-v-e31bd47b],.VPSidebarItem.level-0.has-active>.item>.link>.text[data-v-e31bd47b],.VPSidebarItem.level-1.has-active>.item>.link>.text[data-v-e31bd47b],.VPSidebarItem.level-2.has-active>.item>.link>.text[data-v-e31bd47b],.VPSidebarItem.level-3.has-active>.item>.link>.text[data-v-e31bd47b],.VPSidebarItem.level-4.has-active>.item>.link>.text[data-v-e31bd47b],.VPSidebarItem.level-5.has-active>.item>.link>.text[data-v-e31bd47b]{color:var(--vp-c-text-1)}.VPSidebarItem.level-0.is-active>.item .link>.text[data-v-e31bd47b],.VPSidebarItem.level-1.is-active>.item .link>.text[data-v-e31bd47b],.VPSidebarItem.level-2.is-active>.item .link>.text[data-v-e31bd47b],.VPSidebarItem.level-3.is-active>.item .link>.text[data-v-e31bd47b],.VPSidebarItem.level-4.is-active>.item .link>.text[data-v-e31bd47b],.VPSidebarItem.level-5.is-active>.item .link>.text[data-v-e31bd47b]{color:var(--vp-c-brand-1)}.caret[data-v-e31bd47b]{display:flex;justify-content:center;align-items:center;margin-right:-7px;width:32px;height:32px;color:var(--vp-c-text-3);cursor:pointer;transition:color .25s;flex-shrink:0}.item:hover .caret[data-v-e31bd47b]{color:var(--vp-c-text-2)}.item:hover .caret[data-v-e31bd47b]:hover{color:var(--vp-c-text-1)}.caret-icon[data-v-e31bd47b]{width:18px;height:18px;fill:currentColor;transform:rotate(90deg);transition:transform .25s}.VPSidebarItem.collapsed .caret-icon[data-v-e31bd47b]{transform:rotate(0)}.VPSidebarItem.level-1 .items[data-v-e31bd47b],.VPSidebarItem.level-2 .items[data-v-e31bd47b],.VPSidebarItem.level-3 .items[data-v-e31bd47b],.VPSidebarItem.level-4 .items[data-v-e31bd47b],.VPSidebarItem.level-5 .items[data-v-e31bd47b]{border-left:1px solid var(--vp-c-divider);padding-left:16px}.VPSidebarItem.collapsed .items[data-v-e31bd47b]{display:none}.VPSidebar[data-v-b00e2fdd]{position:fixed;top:var(--vp-layout-top-height, 0px);bottom:0;left:0;z-index:var(--vp-z-index-sidebar);padding:32px 32px 96px;width:calc(100vw - 64px);max-width:320px;background-color:var(--vp-sidebar-bg-color);opacity:0;box-shadow:var(--vp-c-shadow-3);overflow-x:hidden;overflow-y:auto;transform:translate(-100%);transition:opacity .5s,transform .25s ease;overscroll-behavior:contain}.VPSidebar.open[data-v-b00e2fdd]{opacity:1;visibility:visible;transform:translate(0);transition:opacity .25s,transform .5s cubic-bezier(.19,1,.22,1)}.dark .VPSidebar[data-v-b00e2fdd]{box-shadow:var(--vp-shadow-1)}@media (min-width: 960px){.VPSidebar[data-v-b00e2fdd]{z-index:1;padding-top:var(--vp-nav-height);padding-bottom:128px;width:var(--vp-sidebar-width);max-width:100%;background-color:var(--vp-sidebar-bg-color);opacity:1;visibility:visible;box-shadow:none;transform:translate(0)}}@media (min-width: 1440px){.VPSidebar[data-v-b00e2fdd]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}@media (min-width: 960px){.curtain[data-v-b00e2fdd]{position:sticky;top:-64px;left:0;z-index:1;margin-top:calc(var(--vp-nav-height) * -1);margin-right:-32px;margin-left:-32px;height:var(--vp-nav-height);background-color:var(--vp-sidebar-bg-color)}}.nav[data-v-b00e2fdd]{outline:0}.group+.group[data-v-b00e2fdd]{border-top:1px solid var(--vp-c-divider);padding-top:10px}@media (min-width: 960px){.group[data-v-b00e2fdd]{padding-top:10px;width:calc(var(--vp-sidebar-width) - 64px)}}.VPSkipLink[data-v-0f60ec36]{top:8px;left:8px;padding:8px 16px;z-index:999;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none;color:var(--vp-c-brand-1);box-shadow:var(--vp-shadow-3);background-color:var(--vp-c-bg)}.VPSkipLink[data-v-0f60ec36]:focus{height:auto;width:auto;clip:auto;clip-path:none}@media (min-width: 1280px){.VPSkipLink[data-v-0f60ec36]{top:14px;left:16px}}.Layout[data-v-1919c326]{display:flex;flex-direction:column;min-height:100vh}.VPHomeSponsors[data-v-96bd69d5]{border-top:1px solid var(--vp-c-gutter);padding:88px 24px 96px;background-color:var(--vp-c-bg)}.container[data-v-96bd69d5]{margin:0 auto;max-width:1152px}.love[data-v-96bd69d5]{margin:0 auto;width:28px;height:28px;color:var(--vp-c-text-3)}.icon[data-v-96bd69d5]{width:28px;height:28px;fill:currentColor}.message[data-v-96bd69d5]{margin:0 auto;padding-top:10px;max-width:320px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.sponsors[data-v-96bd69d5]{padding-top:32px}.action[data-v-96bd69d5]{padding-top:40px;text-align:center}.VPTeamPage[data-v-10b00018]{padding-bottom:96px}@media (min-width: 768px){.VPTeamPage[data-v-10b00018]{padding-bottom:128px}}.VPTeamPageSection+.VPTeamPageSection[data-v-10b00018-s],.VPTeamMembers+.VPTeamPageSection[data-v-10b00018-s]{margin-top:64px}.VPTeamMembers+.VPTeamMembers[data-v-10b00018-s]{margin-top:24px}@media (min-width: 768px){.VPTeamPageTitle+.VPTeamPageSection[data-v-10b00018-s]{margin-top:16px}.VPTeamPageSection+.VPTeamPageSection[data-v-10b00018-s],.VPTeamMembers+.VPTeamPageSection[data-v-10b00018-s]{margin-top:96px}}.VPTeamMembers[data-v-10b00018-s]{padding:0 24px}@media (min-width: 768px){.VPTeamMembers[data-v-10b00018-s]{padding:0 48px}}@media (min-width: 960px){.VPTeamMembers[data-v-10b00018-s]{padding:0 64px}}.VPTeamPageTitle[data-v-bf2cbdac]{padding:48px 32px;text-align:center}@media (min-width: 768px){.VPTeamPageTitle[data-v-bf2cbdac]{padding:64px 48px 48px}}@media (min-width: 960px){.VPTeamPageTitle[data-v-bf2cbdac]{padding:80px 64px 48px}}.title[data-v-bf2cbdac]{letter-spacing:0;line-height:44px;font-size:36px;font-weight:500}@media (min-width: 768px){.title[data-v-bf2cbdac]{letter-spacing:-.5px;line-height:56px;font-size:48px}}.lead[data-v-bf2cbdac]{margin:0 auto;max-width:512px;padding-top:12px;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 768px){.lead[data-v-bf2cbdac]{max-width:592px;letter-spacing:.15px;line-height:28px;font-size:20px}}.VPTeamPageSection[data-v-b1a88750]{padding:0 32px}@media (min-width: 768px){.VPTeamPageSection[data-v-b1a88750]{padding:0 48px}}@media (min-width: 960px){.VPTeamPageSection[data-v-b1a88750]{padding:0 64px}}.title[data-v-b1a88750]{position:relative;margin:0 auto;max-width:1152px;text-align:center;color:var(--vp-c-text-2)}.title-line[data-v-b1a88750]{position:absolute;top:16px;left:0;width:100%;height:1px;background-color:var(--vp-c-divider)}.title-text[data-v-b1a88750]{position:relative;display:inline-block;padding:0 24px;letter-spacing:0;line-height:32px;font-size:20px;font-weight:500;background-color:var(--vp-c-bg)}.lead[data-v-b1a88750]{margin:0 auto;max-width:480px;padding-top:12px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.members[data-v-b1a88750]{padding-top:40px}.VPTeamMembersItem[data-v-28528e42]{display:flex;flex-direction:column;gap:2px;border-radius:12px;width:100%;height:100%;overflow:hidden}.VPTeamMembersItem.small .profile[data-v-28528e42]{padding:32px}.VPTeamMembersItem.small .data[data-v-28528e42]{padding-top:20px}.VPTeamMembersItem.small .avatar[data-v-28528e42]{width:64px;height:64px}.VPTeamMembersItem.small .name[data-v-28528e42]{line-height:24px;font-size:16px}.VPTeamMembersItem.small .affiliation[data-v-28528e42]{padding-top:4px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .desc[data-v-28528e42]{padding-top:12px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .links[data-v-28528e42]{margin:0 -16px -20px;padding:10px 0 0}.VPTeamMembersItem.medium .profile[data-v-28528e42]{padding:48px 32px}.VPTeamMembersItem.medium .data[data-v-28528e42]{padding-top:24px;text-align:center}.VPTeamMembersItem.medium .avatar[data-v-28528e42]{width:96px;height:96px}.VPTeamMembersItem.medium .name[data-v-28528e42]{letter-spacing:.15px;line-height:28px;font-size:20px}.VPTeamMembersItem.medium .affiliation[data-v-28528e42]{padding-top:4px;font-size:16px}.VPTeamMembersItem.medium .desc[data-v-28528e42]{padding-top:16px;max-width:288px;font-size:16px}.VPTeamMembersItem.medium .links[data-v-28528e42]{margin:0 -16px -12px;padding:16px 12px 0}.profile[data-v-28528e42]{flex-grow:1;background-color:var(--vp-c-bg-soft)}.data[data-v-28528e42]{text-align:center}.avatar[data-v-28528e42]{position:relative;flex-shrink:0;margin:0 auto;border-radius:50%;box-shadow:var(--vp-shadow-3)}.avatar-img[data-v-28528e42]{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;object-fit:cover}.name[data-v-28528e42]{margin:0;font-weight:600}.affiliation[data-v-28528e42]{margin:0;font-weight:500;color:var(--vp-c-text-2)}.org.link[data-v-28528e42]{color:var(--vp-c-text-2);transition:color .25s}.org.link[data-v-28528e42]:hover{color:var(--vp-c-brand-1)}.desc[data-v-28528e42]{margin:0 auto}.desc[data-v-28528e42] a{font-weight:500;color:var(--vp-c-brand-1);text-decoration-style:dotted;transition:color .25s}.links[data-v-28528e42]{display:flex;justify-content:center;height:56px}.sp-link[data-v-28528e42]{display:flex;justify-content:center;align-items:center;text-align:center;padding:16px;font-size:14px;font-weight:500;color:var(--vp-c-sponsor);background-color:var(--vp-c-bg-soft);transition:color .25s,background-color .25s}.sp .sp-link.link[data-v-28528e42]:hover,.sp .sp-link.link[data-v-28528e42]:focus{outline:none;color:var(--vp-c-white);background-color:var(--vp-c-sponsor)}.sp-icon[data-v-28528e42]{margin-right:8px;width:16px;height:16px;fill:currentColor}.VPTeamMembers.small .container[data-v-6cb0dbc4]{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}.VPTeamMembers.small.count-1 .container[data-v-6cb0dbc4]{max-width:276px}.VPTeamMembers.small.count-2 .container[data-v-6cb0dbc4]{max-width:576px}.VPTeamMembers.small.count-3 .container[data-v-6cb0dbc4]{max-width:876px}.VPTeamMembers.medium .container[data-v-6cb0dbc4]{grid-template-columns:repeat(auto-fit,minmax(256px,1fr))}@media (min-width: 375px){.VPTeamMembers.medium .container[data-v-6cb0dbc4]{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}}.VPTeamMembers.medium.count-1 .container[data-v-6cb0dbc4]{max-width:368px}.VPTeamMembers.medium.count-2 .container[data-v-6cb0dbc4]{max-width:760px}.container[data-v-6cb0dbc4]{display:grid;gap:24px;margin:0 auto;max-width:1152px}.btn-group>button{border-radius:0}.btn-group>button:first-child{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.btn-group>button:last-child{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.to-bottom-enter-active[data-v-e40b6242],.to-bottom-leave-active[data-v-e40b6242],.to-left-enter-active[data-v-e40b6242],.to-left-leave-active[data-v-e40b6242],.to-right-enter-active[data-v-e40b6242],.to-right-leave-active[data-v-e40b6242],.to-top-enter-active[data-v-e40b6242],.to-top-leave-active[data-v-e40b6242]{transition:all .25s}.to-top-enter-active[data-v-e40b6242],.to-top-leave-to[data-v-e40b6242]{opacity:0;transform:translateY(10px)}.to-top-leave[data-v-e40b6242],.to-top-enter-to[data-v-e40b6242]{opacity:1;transform:translateY(0)}.to-right-enter-active[data-v-e40b6242],.to-right-leave-to[data-v-e40b6242]{opacity:0;transform:translate(-10px)}.to-right-leave[data-v-e40b6242],.to-right-enter-to[data-v-e40b6242]{opacity:1;transform:translate(0)}.to-bottom-enter-active[data-v-e40b6242],.to-bottom-leave-to[data-v-e40b6242]{opacity:0;transform:translateY(-10px)}.to-bottom-leave[data-v-e40b6242],.to-bottom-enter-to[data-v-e40b6242]{opacity:1;transform:translateY(0)}.to-left-enter-active[data-v-e40b6242],.to-left-leave-to[data-v-e40b6242]{opacity:0;transform:translate(10px)}.to-left-leave[data-v-e40b6242],.to-left-enter-to[data-v-e40b6242]{opacity:1;transform:translate(0)}.slide-left-enter-active[data-v-235a549a],.slide-left-leave-active[data-v-235a549a]{transition:all .5s ease}.slide-left-enter-from[data-v-235a549a],.slide-left-leave-to[data-v-235a549a]{opacity:0;transform:translate(30px)}.slide-right-enter-active[data-v-235a549a],.slide-right-leave-active[data-v-235a549a]{transition:all .5s ease}.slide-right-enter-from[data-v-235a549a],.slide-right-leave-to[data-v-235a549a]{opacity:0;transform:translate(-30px)}.slide-top-enter-active[data-v-235a549a],.slide-top-leave-active[data-v-235a549a]{transition:all .5s ease}.slide-top-enter-from[data-v-235a549a],.slide-top-leave-to[data-v-235a549a]{opacity:0;transform:translateY(30px)}.slide-bottom-enter-active[data-v-235a549a],.slide-bottom-leave-active[data-v-235a549a]{transition:all .5s ease}.slide-bottom-enter-from[data-v-235a549a],.slide-bottom-leave-to[data-v-235a549a]{opacity:0;transform:translateY(-30px)}.fade-enter-active[data-v-235a549a],.fade-leave-active[data-v-235a549a]{transition:all .5s ease}.fade-enter-from[data-v-235a549a],.fade-leave-to[data-v-235a549a]{opacity:0}.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-tooltip-dark .v-popper__wrapper .v-popper__inner{background:rgba(0,0,0);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip-dark .v-popper__arrow-inner{visibility:hidden}.v-popper--theme-tooltip-dark .v-popper__arrow-outer{border-color:#000c}@media (prefers-color-scheme: dark){.v-popper--theme-tooltip-dark .v-popper__wrapper .v-popper__inner{background:rgb(55 65 81)}.v-popper--theme-tooltip-dark .v-popper__arrow-outer{border-color:#374151}}.v-popper--theme-tooltip-light .v-popper__wrapper .v-popper__inner{background:#fff;color:#000;padding:7px 12px 6px;border-radius:6px;border:1px solid #eeeeee;box-shadow:0 6px 30px #00000040}.v-popper--theme-tooltip-light .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-tooltip-light .v-popper__arrow-outer{border-color:#ddd}.v-popper__popper[data-popper-placement^=bottom] .v-popper__inner{margin-top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__inner{margin-left:-1px}input[type=range].range-lg[data-v-fadec9c5]::-moz-range-thumb{height:1.5rem;width:1.5rem}input[type=range].range-sm[data-v-fadec9c5]::-moz-range-thumb{height:1rem;width:1rem}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #1C64F2;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#1c64f2}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#1c64f2;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #1C64F2;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked,.dark [type=checkbox]:checked,.dark [type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px auto inherit}input[type=file]::file-selector-button{color:#fff;background:#1F2937;border:0;font-weight:500;font-size:.875rem;cursor:pointer;padding:.625rem 1rem .625rem 2rem;margin-inline-start:-1rem;margin-inline-end:1rem}input[type=file]::file-selector-button:hover{background:#374151}.dark input[type=file]::file-selector-button{color:#fff;background:#4B5563}.dark input[type=file]::file-selector-button:hover{background:#6B7280}input[type=range]::-webkit-slider-thumb{height:1.25rem;width:1.25rem;background:#1C64F2;border-radius:9999px;border:0;appearance:none;-moz-appearance:none;-webkit-appearance:none;cursor:pointer}input[type=range]:disabled::-webkit-slider-thumb{background:#9CA3AF}.dark input[type=range]:disabled::-webkit-slider-thumb{background:#6B7280}input[type=range]:focus::-webkit-slider-thumb{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1px;--tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity))}input[type=range]::-moz-range-thumb{height:1.25rem;width:1.25rem;background:#1C64F2;border-radius:9999px;border:0;appearance:none;-moz-appearance:none;-webkit-appearance:none;cursor:pointer}input[type=range]:disabled::-moz-range-thumb{background:#9CA3AF}.dark input[type=range]:disabled::-moz-range-thumb{background:#6B7280}input[type=range]::-moz-range-progress{background:#3F83F8}input[type=range]::-ms-fill-lower{background:#3F83F8}input[type=range].range-sm::-webkit-slider-thumb{height:1rem;width:1rem}input[type=range].range-lg::-webkit-slider-thumb{height:1.5rem;width:1.5rem}input[type=range].range-sm::-moz-range-thumb{height:1rem;width:1rem}input[type=range].range-lg::-moz-range-thumb{height:1.5rem;width:1.5rem}[data-tooltip-style^=light]+.tooltip>.tooltip-arrow:before{border-style:solid;border-color:#e5e7eb}[data-tooltip-style^=light]+.tooltip[data-popper-placement^=top]>.tooltip-arrow:before{border-bottom-width:1px;border-right-width:1px}[data-tooltip-style^=light]+.tooltip[data-popper-placement^=right]>.tooltip-arrow:before{border-bottom-width:1px;border-left-width:1px}[data-tooltip-style^=light]+.tooltip[data-popper-placement^=bottom]>.tooltip-arrow:before{border-top-width:1px;border-left-width:1px}[data-tooltip-style^=light]+.tooltip[data-popper-placement^=left]>.tooltip-arrow:before{border-top-width:1px;border-right-width:1px}.tooltip[data-popper-placement^=top]>.tooltip-arrow{bottom:-4px}.tooltip[data-popper-placement^=bottom]>.tooltip-arrow{top:-4px}.tooltip[data-popper-placement^=left]>.tooltip-arrow{right:-4px}.tooltip[data-popper-placement^=right]>.tooltip-arrow{left:-4px}.tooltip.invisible>.tooltip-arrow:before{visibility:hidden}[data-popper-arrow],[data-popper-arrow]:before{position:absolute;width:8px;height:8px;background:inherit}[data-popper-arrow]{visibility:hidden}[data-popper-arrow]:before{content:"";visibility:visible;transform:rotate(45deg)}[data-popper-arrow]:after{content:"";visibility:visible;transform:rotate(45deg);position:absolute;width:9px;height:9px;background:inherit}[role=tooltip]>[data-popper-arrow]:before{border-style:solid;border-color:#e5e7eb}.dark [role=tooltip]>[data-popper-arrow]:before{border-style:solid;border-color:#4b5563}[role=tooltip]>[data-popper-arrow]:after{border-style:solid;border-color:#e5e7eb}.dark [role=tooltip]>[data-popper-arrow]:after{border-style:solid;border-color:#4b5563}[data-popover][role=tooltip][data-popper-placement^=top]>[data-popper-arrow]:before{border-bottom-width:1px;border-right-width:1px}[data-popover][role=tooltip][data-popper-placement^=top]>[data-popper-arrow]:after{border-bottom-width:1px;border-right-width:1px}[data-popover][role=tooltip][data-popper-placement^=right]>[data-popper-arrow]:before{border-bottom-width:1px;border-left-width:1px}[data-popover][role=tooltip][data-popper-placement^=right]>[data-popper-arrow]:after{border-bottom-width:1px;border-left-width:1px}[data-popover][role=tooltip][data-popper-placement^=bottom]>[data-popper-arrow]:before{border-top-width:1px;border-left-width:1px}[data-popover][role=tooltip][data-popper-placement^=bottom]>[data-popper-arrow]:after{border-top-width:1px;border-left-width:1px}[data-popover][role=tooltip][data-popper-placement^=left]>[data-popper-arrow]:before{border-top-width:1px;border-right-width:1px}[data-popover][role=tooltip][data-popper-placement^=left]>[data-popper-arrow]:after{border-top-width:1px;border-right-width:1px}[data-popover][role=tooltip][data-popper-placement^=top]>[data-popper-arrow]{bottom:-5px}[data-popover][role=tooltip][data-popper-placement^=bottom]>[data-popper-arrow]{top:-5px}[data-popover][role=tooltip][data-popper-placement^=left]>[data-popper-arrow]{right:-5px}[data-popover][role=tooltip][data-popper-placement^=right]>[data-popper-arrow]{left:-5px}[role=tooltip].invisible>[data-popper-arrow]:before{visibility:hidden}[role=tooltip].invisible>[data-popper-arrow]:after{visibility:hidden}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(63 131 248 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(63 131 248 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.\!container{width:100%!important}.container{width:100%}@media (min-width: 640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width: 768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width: 1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width: 1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width: 1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.not-sr-only{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.pointer-events-none{pointer-events:none}.\!visible{visibility:visible!important}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.inset-y-0{top:0;bottom:0}.-bottom-1{bottom:-.25rem}.-bottom-1\.5{bottom:-.375rem}.-bottom-2{bottom:-.5rem}.-bottom-4{bottom:-1rem}.-left-1{left:-.25rem}.-left-1\.5{left:-.375rem}.-left-3{left:-.75rem}.-right-0{right:-0px}.-right-0\.5{right:-.125rem}.-right-1{right:-.25rem}.-right-1\.5{right:-.375rem}.-top-1{top:-.25rem}.-top-1\.5{top:-.375rem}.bottom-0{bottom:0}.bottom-2{bottom:.5rem}.bottom-2\.5{bottom:.625rem}.bottom-5{bottom:1.25rem}.end-2{inset-inline-end:.5rem}.end-2\.5{inset-inline-end:.625rem}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.right-2{right:.5rem}.right-2\.5{right:.625rem}.right-3{right:.75rem}.start-0{inset-inline-start:0px}.top-0{top:0}.top-1\/2{top:50%}.top-3{top:.75rem}.isolate{isolation:isolate}.isolation-auto{isolation:auto}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.\!m-0{margin:0!important}.m-2{margin:.5rem}.-mx-1{margin-left:-.25rem;margin-right:-.25rem}.-mx-1\.5{margin-left:-.375rem;margin-right:-.375rem}.-my-1{margin-top:-.25rem;margin-bottom:-.25rem}.-my-1\.5{margin-top:-.375rem;margin-bottom:-.375rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-1\.5{margin-left:.375rem;margin-right:.375rem}.mx-auto{margin-left:auto;margin-right:auto}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}.\!-mb-2{margin-bottom:-.5rem!important}.\!mt-1{margin-top:.25rem!important}.-mb-px{margin-bottom:-1px}.-ml-0{margin-left:-0px}.-ml-0\.5{margin-left:-.125rem}.-mr-1{margin-right:-.25rem}.-mr-1\.5{margin-right:-.375rem}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-0{margin-left:0}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.ml-auto{margin-left:auto}.mr-0{margin-right:0}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.ms-2{margin-inline-start:.5rem}.ms-3{margin-inline-start:.75rem}.ms-auto{margin-inline-start:auto}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.inline-table{display:inline-table}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-column{display:table-column}.table-column-group{display:table-column-group}.table-footer-group{display:table-footer-group}.table-header-group{display:table-header-group}.table-row-group{display:table-row-group}.table-row{display:table-row}.flow-root{display:flow-root}.grid{display:grid}.inline-grid{display:inline-grid}.contents{display:contents}.list-item{display:list-item}.hidden{display:none}.\!h-full{height:100%!important}.h-0{height:0px}.h-0\.5{height:.125rem}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-20{height:5rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-36{height:9rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-56{height:14rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-96{height:24rem}.h-auto{height:auto}.h-full{height:100%}.h-modal{height:calc(100% - 2rem)}.h-screen{height:100vh}.w-0{width:0px}.w-0\.5{width:.125rem}.w-1{width:.25rem}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-20{width:5rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-36{width:9rem}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-96{width:24rem}.w-\[100\%\]{width:100%}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-screen-xl{max-width:1280px}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-0{--tw-translate-y: -0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y: -100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-1\/2{--tw-translate-y: 50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-y-4{row-gap:1rem}.-space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(-1rem * var(--tw-space-x-reverse));margin-left:calc(-1rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1.5rem * var(--tw-space-x-reverse));margin-left:calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.space-y-reverse>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 1}.space-x-reverse>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 1}.divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse: 0;border-right-width:calc(1px * var(--tw-divide-x-reverse));border-left-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-y-reverse>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 1}.divide-x-reverse>:not([hidden])~:not([hidden]){--tw-divide-x-reverse: 1}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgb(243 244 246 / var(--tw-divide-opacity))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgb(229 231 235 / var(--tw-divide-opacity))}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-scroll{overflow:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-ellipsis{text-overflow:ellipsis}.text-clip{text-overflow:clip}.whitespace-nowrap{white-space:nowrap}.\!rounded-full{border-radius:9999px!important}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-e{border-start-end-radius:.25rem;border-end-end-radius:.25rem}.rounded-l{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.rounded-s{border-start-start-radius:.25rem;border-end-start-radius:.25rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.rounded-t-xl{border-top-left-radius:.75rem;border-top-right-radius:.75rem}.rounded-bl{border-bottom-left-radius:.25rem}.rounded-br{border-bottom-right-radius:.25rem}.rounded-ee{border-end-end-radius:.25rem}.rounded-es{border-end-start-radius:.25rem}.rounded-se{border-start-end-radius:.25rem}.rounded-ss{border-start-start-radius:.25rem}.rounded-tl{border-top-left-radius:.25rem}.rounded-tr{border-top-right-radius:.25rem}.border{border-width:1px}.border-0{border-width:0px}.border-2{border-width:2px}.border-\[1px\]{border-width:1px}.border-x{border-left-width:1px;border-right-width:1px}.border-x-0{border-left-width:0px;border-right-width:0px}.border-y{border-top-width:1px;border-bottom-width:1px}.border-b{border-bottom-width:1px}.border-b-0{border-bottom-width:0px}.border-b-2{border-bottom-width:2px}.border-e{border-inline-end-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-s{border-inline-start-width:1px}.border-t{border-top-width:1px}.border-t-0{border-top-width:0px}.border-t-4{border-top-width:4px}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-blue-500{--tw-border-opacity: 1;border-color:rgb(63 131 248 / var(--tw-border-opacity))}.border-blue-600{--tw-border-opacity: 1;border-color:rgb(28 100 242 / var(--tw-border-opacity))}.border-blue-700{--tw-border-opacity: 1;border-color:rgb(26 86 219 / var(--tw-border-opacity))}.border-blue-800{--tw-border-opacity: 1;border-color:rgb(30 66 159 / var(--tw-border-opacity))}.border-gray-100{--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.border-gray-500{--tw-border-opacity: 1;border-color:rgb(107 114 128 / var(--tw-border-opacity))}.border-gray-600{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity))}.border-gray-700{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity))}.border-gray-800{--tw-border-opacity: 1;border-color:rgb(31 41 55 / var(--tw-border-opacity))}.border-green-500{--tw-border-opacity: 1;border-color:rgb(14 159 110 / var(--tw-border-opacity))}.border-green-600{--tw-border-opacity: 1;border-color:rgb(5 122 85 / var(--tw-border-opacity))}.border-green-700{--tw-border-opacity: 1;border-color:rgb(4 108 78 / var(--tw-border-opacity))}.border-pink-600{--tw-border-opacity: 1;border-color:rgb(214 31 105 / var(--tw-border-opacity))}.border-pink-700{--tw-border-opacity: 1;border-color:rgb(191 18 93 / var(--tw-border-opacity))}.border-purple-300{--tw-border-opacity: 1;border-color:rgb(202 191 253 / var(--tw-border-opacity))}.border-purple-600{--tw-border-opacity: 1;border-color:rgb(126 58 242 / var(--tw-border-opacity))}.border-purple-700{--tw-border-opacity: 1;border-color:rgb(108 43 217 / var(--tw-border-opacity))}.border-red-500{--tw-border-opacity: 1;border-color:rgb(240 82 82 / var(--tw-border-opacity))}.border-red-600{--tw-border-opacity: 1;border-color:rgb(224 36 36 / var(--tw-border-opacity))}.border-red-700{--tw-border-opacity: 1;border-color:rgb(200 30 30 / var(--tw-border-opacity))}.border-transparent{border-color:transparent}.border-white{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}.border-yellow-400{--tw-border-opacity: 1;border-color:rgb(227 160 8 / var(--tw-border-opacity))}.border-yellow-500{--tw-border-opacity: 1;border-color:rgb(194 120 3 / var(--tw-border-opacity))}.bg-blue-100{--tw-bg-opacity: 1;background-color:rgb(225 239 254 / var(--tw-bg-opacity))}.bg-blue-200{--tw-bg-opacity: 1;background-color:rgb(195 221 253 / var(--tw-bg-opacity))}.bg-blue-50{--tw-bg-opacity: 1;background-color:rgb(235 245 255 / var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity: 1;background-color:rgb(28 100 242 / var(--tw-bg-opacity))}.bg-blue-700{--tw-bg-opacity: 1;background-color:rgb(26 86 219 / var(--tw-bg-opacity))}.bg-blue-800{--tw-bg-opacity: 1;background-color:rgb(30 66 159 / var(--tw-bg-opacity))}.bg-blue-900{--tw-bg-opacity: 1;background-color:rgb(35 56 118 / var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.bg-gray-300{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity))}.bg-gray-400{--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-gray-500{--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.bg-gray-600{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(222 247 236 / var(--tw-bg-opacity))}.bg-green-200{--tw-bg-opacity: 1;background-color:rgb(188 240 218 / var(--tw-bg-opacity))}.bg-green-400{--tw-bg-opacity: 1;background-color:rgb(49 196 141 / var(--tw-bg-opacity))}.bg-green-50{--tw-bg-opacity: 1;background-color:rgb(243 250 247 / var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity: 1;background-color:rgb(14 159 110 / var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity: 1;background-color:rgb(5 122 85 / var(--tw-bg-opacity))}.bg-green-700{--tw-bg-opacity: 1;background-color:rgb(4 108 78 / var(--tw-bg-opacity))}.bg-indigo-100{--tw-bg-opacity: 1;background-color:rgb(229 237 255 / var(--tw-bg-opacity))}.bg-indigo-200{--tw-bg-opacity: 1;background-color:rgb(205 219 254 / var(--tw-bg-opacity))}.bg-indigo-500{--tw-bg-opacity: 1;background-color:rgb(104 117 245 / var(--tw-bg-opacity))}.bg-indigo-600{--tw-bg-opacity: 1;background-color:rgb(88 80 236 / var(--tw-bg-opacity))}.bg-orange-100{--tw-bg-opacity: 1;background-color:rgb(254 236 220 / var(--tw-bg-opacity))}.bg-pink-100{--tw-bg-opacity: 1;background-color:rgb(252 232 243 / var(--tw-bg-opacity))}.bg-pink-200{--tw-bg-opacity: 1;background-color:rgb(250 209 232 / var(--tw-bg-opacity))}.bg-pink-700{--tw-bg-opacity: 1;background-color:rgb(191 18 93 / var(--tw-bg-opacity))}.bg-purple-100{--tw-bg-opacity: 1;background-color:rgb(237 235 254 / var(--tw-bg-opacity))}.bg-purple-200{--tw-bg-opacity: 1;background-color:rgb(220 215 254 / var(--tw-bg-opacity))}.bg-purple-500{--tw-bg-opacity: 1;background-color:rgb(144 97 249 / var(--tw-bg-opacity))}.bg-purple-600{--tw-bg-opacity: 1;background-color:rgb(126 58 242 / var(--tw-bg-opacity))}.bg-purple-700{--tw-bg-opacity: 1;background-color:rgb(108 43 217 / var(--tw-bg-opacity))}.bg-red-100{--tw-bg-opacity: 1;background-color:rgb(253 232 232 / var(--tw-bg-opacity))}.bg-red-200{--tw-bg-opacity: 1;background-color:rgb(251 213 213 / var(--tw-bg-opacity))}.bg-red-400{--tw-bg-opacity: 1;background-color:rgb(249 128 128 / var(--tw-bg-opacity))}.bg-red-50{--tw-bg-opacity: 1;background-color:rgb(253 242 242 / var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity: 1;background-color:rgb(240 82 82 / var(--tw-bg-opacity))}.bg-red-600{--tw-bg-opacity: 1;background-color:rgb(224 36 36 / var(--tw-bg-opacity))}.bg-red-700{--tw-bg-opacity: 1;background-color:rgb(200 30 30 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-white\/30{background-color:#ffffff4d}.bg-white\/50{background-color:#ffffff80}.bg-yellow-100{--tw-bg-opacity: 1;background-color:rgb(253 246 178 / var(--tw-bg-opacity))}.bg-yellow-200{--tw-bg-opacity: 1;background-color:rgb(252 233 106 / var(--tw-bg-opacity))}.bg-yellow-400{--tw-bg-opacity: 1;background-color:rgb(227 160 8 / var(--tw-bg-opacity))}.bg-yellow-50{--tw-bg-opacity: 1;background-color:rgb(253 253 234 / var(--tw-bg-opacity))}.bg-opacity-50{--tw-bg-opacity: .5}.bg-\[url\(\&\#39\;https\:\/\/flowbite\.s3\.amazonaws\.com\/docs\/jumbotron\/conference\.jpg\&\#39\;\)\]{background-image:url('https://flowbite.s3.amazonaws.com/docs/jumbotron/conference.jpg')}.bg-\[url\(\'https\:\/\/flowbite\.s3\.amazonaws\.com\/docs\/jumbotron\/conference\.jpg\'\)\]{background-image:url(https://flowbite.s3.amazonaws.com/docs/jumbotron/conference.jpg)}.bg-\[url\(\'https\:\/\/flowbite\.s3\.amazonaws\.com\/docs\/jumbotron\/hero-pattern\.svg\'\)\]{background-image:url(https://flowbite.s3.amazonaws.com/docs/jumbotron/hero-pattern.svg)}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-50{--tw-gradient-from: #EBF5FF var(--tw-gradient-from-position);--tw-gradient-to: rgb(235 245 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-blue-500{--tw-gradient-from: #3F83F8 var(--tw-gradient-from-position);--tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-cyan-500{--tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);--tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-green-400{--tw-gradient-from: #31C48D var(--tw-gradient-from-position);--tw-gradient-to: rgb(49 196 141 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-green-500{--tw-gradient-from: #0E9F6E var(--tw-gradient-from-position);--tw-gradient-to: rgb(14 159 110 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-lime-500{--tw-gradient-from: #84cc16 var(--tw-gradient-from-position);--tw-gradient-to: rgb(132 204 22 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-pink-500{--tw-gradient-from: #E74694 var(--tw-gradient-from-position);--tw-gradient-to: rgb(231 70 148 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-purple-500{--tw-gradient-from: #9061F9 var(--tw-gradient-from-position);--tw-gradient-to: rgb(144 97 249 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-purple-600{--tw-gradient-from: #7E3AF2 var(--tw-gradient-from-position);--tw-gradient-to: rgb(126 58 242 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-red-200{--tw-gradient-from: #FBD5D5 var(--tw-gradient-from-position);--tw-gradient-to: rgb(251 213 213 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-red-500{--tw-gradient-from: #F05252 var(--tw-gradient-from-position);--tw-gradient-to: rgb(240 82 82 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-teal-200{--tw-gradient-from: #AFECEF var(--tw-gradient-from-position);--tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-teal-300{--tw-gradient-from: #7EDCE2 var(--tw-gradient-from-position);--tw-gradient-to: rgb(126 220 226 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-teal-500{--tw-gradient-from: #0694A2 var(--tw-gradient-from-position);--tw-gradient-to: rgb(6 148 162 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-blue-600{--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #1C64F2 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-cyan-600{--tw-gradient-to: rgb(8 145 178 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #0891b2 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-green-600{--tw-gradient-to: rgb(5 122 85 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #057A55 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-lime-600{--tw-gradient-to: rgb(101 163 13 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #65a30d var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-pink-600{--tw-gradient-to: rgb(214 31 105 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #D61F69 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-purple-600{--tw-gradient-to: rgb(126 58 242 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #7E3AF2 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-red-300{--tw-gradient-to: rgb(248 180 180 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #F8B4B4 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-red-600{--tw-gradient-to: rgb(224 36 36 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #E02424 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-teal-600{--tw-gradient-to: rgb(4 116 129 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #047481 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to: #3F83F8 var(--tw-gradient-to-position)}.to-blue-600{--tw-gradient-to: #1C64F2 var(--tw-gradient-to-position)}.to-blue-700{--tw-gradient-to: #1A56DB var(--tw-gradient-to-position)}.to-cyan-700{--tw-gradient-to: #0e7490 var(--tw-gradient-to-position)}.to-green-700{--tw-gradient-to: #046C4E var(--tw-gradient-to-position)}.to-lime-200{--tw-gradient-to: #d9f99d var(--tw-gradient-to-position)}.to-lime-300{--tw-gradient-to: #bef264 var(--tw-gradient-to-position)}.to-lime-700{--tw-gradient-to: #4d7c0f var(--tw-gradient-to-position)}.to-orange-400{--tw-gradient-to: #FF8A4C var(--tw-gradient-to-position)}.to-pink-500{--tw-gradient-to: #E74694 var(--tw-gradient-to-position)}.to-pink-700{--tw-gradient-to: #BF125D var(--tw-gradient-to-position)}.to-purple-700{--tw-gradient-to: #6C2BD9 var(--tw-gradient-to-position)}.to-red-700{--tw-gradient-to: #C81E1E var(--tw-gradient-to-position)}.to-teal-700{--tw-gradient-to: #036672 var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to: transparent var(--tw-gradient-to-position)}.to-yellow-200{--tw-gradient-to: #FCE96A var(--tw-gradient-to-position)}.bg-center{background-position:center}.bg-repeat{background-repeat:repeat}.bg-no-repeat{background-repeat:no-repeat}.fill-blue-600{fill:#1c64f2}.fill-current{fill:currentColor}.fill-gray-300{fill:#d1d5db}.fill-gray-600{fill:#4b5563}.fill-green-500{fill:#0e9f6e}.fill-pink-600{fill:#d61f69}.fill-purple-600{fill:#7e3af2}.fill-red-600{fill:#e02424}.fill-white{fill:#fff}.fill-yellow-400{fill:#e3a008}.object-cover{object-fit:cover}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-0{padding-left:0;padding-right:0}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-20{padding-left:5rem;padding-right:5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-6{padding-bottom:1.5rem}.pl-10{padding-left:2.5rem}.pl-11{padding-left:2.75rem}.pl-2{padding-left:.5rem}.pl-2\.5{padding-left:.625rem}.pl-3{padding-left:.75rem}.pr-4{padding-right:1rem}.ps-10{padding-inline-start:2.5rem}.ps-3{padding-inline-start:.75rem}.ps-3\.5{padding-inline-start:.875rem}.pt-0{padding-top:0}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-start{text-align:start}.\!text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.normal-case{text-transform:none}.italic{font-style:italic}.not-italic{font-style:normal}.normal-nums{font-variant-numeric:normal}.ordinal{--tw-ordinal: ordinal;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.slashed-zero{--tw-slashed-zero: slashed-zero;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.lining-nums{--tw-numeric-figure: lining-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.oldstyle-nums{--tw-numeric-figure: oldstyle-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.proportional-nums{--tw-numeric-spacing: proportional-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.tabular-nums{--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.diagonal-fractions{--tw-numeric-fraction: diagonal-fractions;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.leading-normal{line-height:1.5}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-blue-100{--tw-text-opacity: 1;color:rgb(225 239 254 / var(--tw-text-opacity))}.text-blue-300{--tw-text-opacity: 1;color:rgb(164 202 254 / var(--tw-text-opacity))}.text-blue-400{--tw-text-opacity: 1;color:rgb(118 169 250 / var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity: 1;color:rgb(63 131 248 / var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity: 1;color:rgb(28 100 242 / var(--tw-text-opacity))}.text-blue-700{--tw-text-opacity: 1;color:rgb(26 86 219 / var(--tw-text-opacity))}.text-blue-800{--tw-text-opacity: 1;color:rgb(30 66 159 / var(--tw-text-opacity))}.text-blue-900{--tw-text-opacity: 1;color:rgb(35 56 118 / var(--tw-text-opacity))}.text-gray-200{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-green-200{--tw-text-opacity: 1;color:rgb(188 240 218 / var(--tw-text-opacity))}.text-green-400{--tw-text-opacity: 1;color:rgb(49 196 141 / var(--tw-text-opacity))}.text-green-500{--tw-text-opacity: 1;color:rgb(14 159 110 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(5 122 85 / var(--tw-text-opacity))}.text-green-700{--tw-text-opacity: 1;color:rgb(4 108 78 / var(--tw-text-opacity))}.text-green-800{--tw-text-opacity: 1;color:rgb(3 84 63 / var(--tw-text-opacity))}.text-green-900{--tw-text-opacity: 1;color:rgb(1 71 55 / var(--tw-text-opacity))}.text-indigo-500{--tw-text-opacity: 1;color:rgb(104 117 245 / var(--tw-text-opacity))}.text-indigo-700{--tw-text-opacity: 1;color:rgb(81 69 205 / var(--tw-text-opacity))}.text-indigo-800{--tw-text-opacity: 1;color:rgb(66 56 157 / var(--tw-text-opacity))}.text-indigo-900{--tw-text-opacity: 1;color:rgb(54 47 120 / var(--tw-text-opacity))}.text-orange-200{--tw-text-opacity: 1;color:rgb(252 217 189 / var(--tw-text-opacity))}.text-orange-500{--tw-text-opacity: 1;color:rgb(255 90 31 / var(--tw-text-opacity))}.text-orange-800{--tw-text-opacity: 1;color:rgb(138 44 13 / var(--tw-text-opacity))}.text-orange-900{--tw-text-opacity: 1;color:rgb(119 29 29 / var(--tw-text-opacity))}.text-pink-500{--tw-text-opacity: 1;color:rgb(231 70 148 / var(--tw-text-opacity))}.text-pink-600{--tw-text-opacity: 1;color:rgb(214 31 105 / var(--tw-text-opacity))}.text-pink-700{--tw-text-opacity: 1;color:rgb(191 18 93 / var(--tw-text-opacity))}.text-pink-800{--tw-text-opacity: 1;color:rgb(153 21 75 / var(--tw-text-opacity))}.text-pink-900{--tw-text-opacity: 1;color:rgb(117 26 61 / var(--tw-text-opacity))}.text-purple-500{--tw-text-opacity: 1;color:rgb(144 97 249 / var(--tw-text-opacity))}.text-purple-600{--tw-text-opacity: 1;color:rgb(126 58 242 / var(--tw-text-opacity))}.text-purple-700{--tw-text-opacity: 1;color:rgb(108 43 217 / var(--tw-text-opacity))}.text-purple-800{--tw-text-opacity: 1;color:rgb(85 33 181 / var(--tw-text-opacity))}.text-purple-900{--tw-text-opacity: 1;color:rgb(74 29 150 / var(--tw-text-opacity))}.text-red-200{--tw-text-opacity: 1;color:rgb(251 213 213 / var(--tw-text-opacity))}.text-red-400{--tw-text-opacity: 1;color:rgb(249 128 128 / var(--tw-text-opacity))}.text-red-500{--tw-text-opacity: 1;color:rgb(240 82 82 / var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgb(224 36 36 / var(--tw-text-opacity))}.text-red-700{--tw-text-opacity: 1;color:rgb(200 30 30 / var(--tw-text-opacity))}.text-red-800{--tw-text-opacity: 1;color:rgb(155 28 28 / var(--tw-text-opacity))}.text-red-900{--tw-text-opacity: 1;color:rgb(119 29 29 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-yellow-300{--tw-text-opacity: 1;color:rgb(250 202 21 / var(--tw-text-opacity))}.text-yellow-400{--tw-text-opacity: 1;color:rgb(227 160 8 / var(--tw-text-opacity))}.text-yellow-500{--tw-text-opacity: 1;color:rgb(194 120 3 / var(--tw-text-opacity))}.text-yellow-700{--tw-text-opacity: 1;color:rgb(142 75 16 / var(--tw-text-opacity))}.text-yellow-800{--tw-text-opacity: 1;color:rgb(114 59 19 / var(--tw-text-opacity))}.text-yellow-900{--tw-text-opacity: 1;color:rgb(99 49 18 / var(--tw-text-opacity))}.underline{text-decoration-line:underline}.overline{text-decoration-line:overline}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.subpixel-antialiased{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}.placeholder-green-700::placeholder{--tw-placeholder-opacity: 1;color:rgb(4 108 78 / var(--tw-placeholder-opacity))}.placeholder-red-700::placeholder{--tw-placeholder-opacity: 1;color:rgb(200 30 30 / var(--tw-placeholder-opacity))}.opacity-50{opacity:.5}.bg-blend-multiply{background-blend-mode:multiply}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-blue-500\/50{--tw-shadow-color: rgb(63 131 248 / .5);--tw-shadow: var(--tw-shadow-colored)}.shadow-blue-800\/80{--tw-shadow-color: rgb(30 66 159 / .8);--tw-shadow: var(--tw-shadow-colored)}.shadow-cyan-500\/50{--tw-shadow-color: rgb(6 182 212 / .5);--tw-shadow: var(--tw-shadow-colored)}.shadow-cyan-800\/80{--tw-shadow-color: rgb(21 94 117 / .8);--tw-shadow: var(--tw-shadow-colored)}.shadow-green-500\/50{--tw-shadow-color: rgb(14 159 110 / .5);--tw-shadow: var(--tw-shadow-colored)}.shadow-green-800\/80{--tw-shadow-color: rgb(3 84 63 / .8);--tw-shadow: var(--tw-shadow-colored)}.shadow-lime-500\/50{--tw-shadow-color: rgb(132 204 22 / .5);--tw-shadow: var(--tw-shadow-colored)}.shadow-lime-800\/80{--tw-shadow-color: rgb(63 98 18 / .8);--tw-shadow: var(--tw-shadow-colored)}.shadow-pink-500\/50{--tw-shadow-color: rgb(231 70 148 / .5);--tw-shadow: var(--tw-shadow-colored)}.shadow-pink-800\/80{--tw-shadow-color: rgb(153 21 75 / .8);--tw-shadow: var(--tw-shadow-colored)}.shadow-purple-500\/50{--tw-shadow-color: rgb(144 97 249 / .5);--tw-shadow: var(--tw-shadow-colored)}.shadow-purple-800\/80{--tw-shadow-color: rgb(85 33 181 / .8);--tw-shadow: var(--tw-shadow-colored)}.shadow-red-500\/50{--tw-shadow-color: rgb(240 82 82 / .5);--tw-shadow: var(--tw-shadow-colored)}.shadow-red-800\/80{--tw-shadow-color: rgb(155 28 28 / .8);--tw-shadow: var(--tw-shadow-colored)}.shadow-teal-500\/50{--tw-shadow-color: rgb(6 148 162 / .5);--tw-shadow: var(--tw-shadow-colored)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-2{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-8{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-inset{--tw-ring-inset: inset}.ring-blue-400{--tw-ring-opacity: 1;--tw-ring-color: rgb(118 169 250 / var(--tw-ring-opacity))}.ring-blue-800{--tw-ring-opacity: 1;--tw-ring-color: rgb(30 66 159 / var(--tw-ring-opacity))}.ring-cyan-800{--tw-ring-opacity: 1;--tw-ring-color: rgb(21 94 117 / var(--tw-ring-opacity))}.ring-gray-300{--tw-ring-opacity: 1;--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity))}.ring-gray-800{--tw-ring-opacity: 1;--tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity))}.ring-green-400{--tw-ring-opacity: 1;--tw-ring-color: rgb(49 196 141 / var(--tw-ring-opacity))}.ring-green-800{--tw-ring-opacity: 1;--tw-ring-color: rgb(3 84 63 / var(--tw-ring-opacity))}.ring-pink-800{--tw-ring-opacity: 1;--tw-ring-color: rgb(153 21 75 / var(--tw-ring-opacity))}.ring-pink-900{--tw-ring-opacity: 1;--tw-ring-color: rgb(117 26 61 / var(--tw-ring-opacity))}.ring-purple-800{--tw-ring-opacity: 1;--tw-ring-color: rgb(85 33 181 / var(--tw-ring-opacity))}.ring-purple-900{--tw-ring-opacity: 1;--tw-ring-color: rgb(74 29 150 / var(--tw-ring-opacity))}.ring-red-400{--tw-ring-opacity: 1;--tw-ring-color: rgb(249 128 128 / var(--tw-ring-opacity))}.ring-red-900{--tw-ring-opacity: 1;--tw-ring-color: rgb(119 29 29 / var(--tw-ring-opacity))}.ring-white{--tw-ring-opacity: 1;--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity))}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale: grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale-0{--tw-grayscale: grayscale(0);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sepia{--tw-sepia: sepia(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.\!filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur: blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-grayscale{--tw-backdrop-grayscale: grayscale(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-invert{--tw-backdrop-invert: invert(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-sepia{--tw-backdrop-sepia: sepia(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.\!transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important;transition-duration:.15s!important}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.duration-700{transition-duration:.7s}.duration-75{transition-duration:75ms}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:left-\[2px\]:after{content:var(--tw-content);left:2px}.after\:left-\[4px\]:after{content:var(--tw-content);left:4px}.after\:top-0:after{content:var(--tw-content);top:0}.after\:top-0\.5:after{content:var(--tw-content);top:.125rem}.after\:top-\[2px\]:after{content:var(--tw-content);top:2px}.after\:h-4:after{content:var(--tw-content);height:1rem}.after\:h-5:after{content:var(--tw-content);height:1.25rem}.after\:h-6:after{content:var(--tw-content);height:1.5rem}.after\:w-4:after{content:var(--tw-content);width:1rem}.after\:w-5:after{content:var(--tw-content);width:1.25rem}.after\:w-6:after{content:var(--tw-content);width:1.5rem}.after\:rounded-full:after{content:var(--tw-content);border-radius:9999px}.after\:border:after{content:var(--tw-content);border-width:1px}.after\:border-gray-300:after{content:var(--tw-content);--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.after\:bg-white:after{content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.after\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.after\:content-\[\"\"\]:after{--tw-content: "";content:var(--tw-content)}.first\:mr-3:first-child{margin-right:.75rem}.first\:whitespace-nowrap:first-child{white-space:nowrap}.first\:rounded-l:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.first\:rounded-l-lg:first-child{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.first\:font-medium:first-child{font-weight:500}.first\:text-gray-900:first-child{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.last\:mb-0:last-child{margin-bottom:0}.last\:mr-0:last-child{margin-right:0}.last\:rounded-r:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.last\:rounded-r-lg:last-child{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.last\:text-right:last-child{text-align:right}.odd\:bg-gray-50:nth-child(odd){--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.odd\:bg-white:nth-child(odd){--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.even\:bg-gray-50:nth-child(2n){--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.even\:bg-white:nth-child(2n){--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.hover\:border-gray-300:hover{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.hover\:bg-blue-100:hover{--tw-bg-opacity: 1;background-color:rgb(225 239 254 / var(--tw-bg-opacity))}.hover\:bg-blue-200:hover{--tw-bg-opacity: 1;background-color:rgb(195 221 253 / var(--tw-bg-opacity))}.hover\:bg-blue-800:hover{--tw-bg-opacity: 1;background-color:rgb(30 66 159 / var(--tw-bg-opacity))}.hover\:bg-blue-900:hover{--tw-bg-opacity: 1;background-color:rgb(35 56 118 / var(--tw-bg-opacity))}.hover\:bg-gray-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.hover\:bg-gray-50:hover{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.hover\:bg-gray-600:hover{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}.hover\:bg-gray-900:hover{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.hover\:bg-green-200:hover{--tw-bg-opacity: 1;background-color:rgb(188 240 218 / var(--tw-bg-opacity))}.hover\:bg-green-800:hover{--tw-bg-opacity: 1;background-color:rgb(3 84 63 / var(--tw-bg-opacity))}.hover\:bg-pink-800:hover{--tw-bg-opacity: 1;background-color:rgb(153 21 75 / var(--tw-bg-opacity))}.hover\:bg-purple-300:hover{--tw-bg-opacity: 1;background-color:rgb(202 191 253 / var(--tw-bg-opacity))}.hover\:bg-purple-800:hover{--tw-bg-opacity: 1;background-color:rgb(85 33 181 / var(--tw-bg-opacity))}.hover\:bg-red-200:hover{--tw-bg-opacity: 1;background-color:rgb(251 213 213 / var(--tw-bg-opacity))}.hover\:bg-red-800:hover{--tw-bg-opacity: 1;background-color:rgb(155 28 28 / var(--tw-bg-opacity))}.hover\:bg-yellow-200:hover{--tw-bg-opacity: 1;background-color:rgb(252 233 106 / var(--tw-bg-opacity))}.hover\:bg-yellow-500:hover{--tw-bg-opacity: 1;background-color:rgb(194 120 3 / var(--tw-bg-opacity))}.hover\:bg-gradient-to-bl:hover{background-image:linear-gradient(to bottom left,var(--tw-gradient-stops))}.hover\:bg-gradient-to-br:hover{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.hover\:bg-gradient-to-l:hover{background-image:linear-gradient(to left,var(--tw-gradient-stops))}.hover\:from-teal-200:hover{--tw-gradient-from: #AFECEF var(--tw-gradient-from-position);--tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.hover\:to-lime-200:hover{--tw-gradient-to: #d9f99d var(--tw-gradient-to-position)}.hover\:text-blue-600:hover{--tw-text-opacity: 1;color:rgb(28 100 242 / var(--tw-text-opacity))}.hover\:text-blue-700:hover{--tw-text-opacity: 1;color:rgb(26 86 219 / var(--tw-text-opacity))}.hover\:text-blue-900:hover{--tw-text-opacity: 1;color:rgb(35 56 118 / var(--tw-text-opacity))}.hover\:text-gray-600:hover{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.hover\:text-gray-700:hover{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity))}.hover\:text-gray-900:hover{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:no-underline:hover{text-decoration-line:none}.hover\:grayscale-0:hover{--tw-grayscale: grayscale(0);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus\:z-10:focus{z-index:10}.focus\:border-blue-500:focus{--tw-border-opacity: 1;border-color:rgb(63 131 248 / var(--tw-border-opacity))}.focus\:border-gray-200:focus{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.focus\:border-green-500:focus{--tw-border-opacity: 1;border-color:rgb(14 159 110 / var(--tw-border-opacity))}.focus\:border-red-500:focus{--tw-border-opacity: 1;border-color:rgb(240 82 82 / var(--tw-border-opacity))}.focus\:text-blue-700:focus{--tw-text-opacity: 1;color:rgb(26 86 219 / var(--tw-text-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-0:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-4:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-blue-200:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(195 221 253 / var(--tw-ring-opacity))}.focus\:ring-blue-300:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity))}.focus\:ring-blue-400:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(118 169 250 / var(--tw-ring-opacity))}.focus\:ring-blue-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity))}.focus\:ring-blue-700:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(26 86 219 / var(--tw-ring-opacity))}.focus\:ring-cyan-200:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(165 243 252 / var(--tw-ring-opacity))}.focus\:ring-cyan-300:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(103 232 249 / var(--tw-ring-opacity))}.focus\:ring-gray-100:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(243 244 246 / var(--tw-ring-opacity))}.focus\:ring-gray-200:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity))}.focus\:ring-gray-300:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity))}.focus\:ring-gray-400:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity))}.focus\:ring-green-200:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(188 240 218 / var(--tw-ring-opacity))}.focus\:ring-green-300:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(132 225 188 / var(--tw-ring-opacity))}.focus\:ring-green-400:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(49 196 141 / var(--tw-ring-opacity))}.focus\:ring-green-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(14 159 110 / var(--tw-ring-opacity))}.focus\:ring-lime-200:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(217 249 157 / var(--tw-ring-opacity))}.focus\:ring-lime-300:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(190 242 100 / var(--tw-ring-opacity))}.focus\:ring-pink-200:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(250 209 232 / var(--tw-ring-opacity))}.focus\:ring-pink-300:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(248 180 217 / var(--tw-ring-opacity))}.focus\:ring-purple-200:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(220 215 254 / var(--tw-ring-opacity))}.focus\:ring-purple-300:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(202 191 253 / var(--tw-ring-opacity))}.focus\:ring-red-100:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(253 232 232 / var(--tw-ring-opacity))}.focus\:ring-red-300:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(248 180 180 / var(--tw-ring-opacity))}.focus\:ring-red-400:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(249 128 128 / var(--tw-ring-opacity))}.focus\:ring-red-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(240 82 82 / var(--tw-ring-opacity))}.focus\:ring-teal-300:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(126 220 226 / var(--tw-ring-opacity))}.focus\:ring-yellow-300:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(250 202 21 / var(--tw-ring-opacity))}.focus\:ring-yellow-400:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(227 160 8 / var(--tw-ring-opacity))}.group:hover .group-hover\:bg-white\/50{background-color:#ffffff80}.group:hover .group-hover\:bg-opacity-0{--tw-bg-opacity: 0}.group:hover .group-hover\:from-cyan-500{--tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);--tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.group:hover .group-hover\:from-green-400{--tw-gradient-from: #31C48D var(--tw-gradient-from-position);--tw-gradient-to: rgb(49 196 141 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.group:hover .group-hover\:from-pink-500{--tw-gradient-from: #E74694 var(--tw-gradient-from-position);--tw-gradient-to: rgb(231 70 148 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.group:hover .group-hover\:from-purple-500{--tw-gradient-from: #9061F9 var(--tw-gradient-from-position);--tw-gradient-to: rgb(144 97 249 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.group:hover .group-hover\:from-purple-600{--tw-gradient-from: #7E3AF2 var(--tw-gradient-from-position);--tw-gradient-to: rgb(126 58 242 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.group:hover .group-hover\:from-red-200{--tw-gradient-from: #FBD5D5 var(--tw-gradient-from-position);--tw-gradient-to: rgb(251 213 213 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.group:hover .group-hover\:from-teal-300{--tw-gradient-from: #7EDCE2 var(--tw-gradient-from-position);--tw-gradient-to: rgb(126 220 226 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.group:hover .group-hover\:via-red-300{--tw-gradient-to: rgb(248 180 180 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #F8B4B4 var(--tw-gradient-via-position), var(--tw-gradient-to)}.group:hover .group-hover\:to-blue-500{--tw-gradient-to: #3F83F8 var(--tw-gradient-to-position)}.group:hover .group-hover\:to-blue-600{--tw-gradient-to: #1C64F2 var(--tw-gradient-to-position)}.group:hover .group-hover\:to-lime-300{--tw-gradient-to: #bef264 var(--tw-gradient-to-position)}.group:hover .group-hover\:to-orange-400{--tw-gradient-to: #FF8A4C var(--tw-gradient-to-position)}.group:hover .group-hover\:to-pink-500{--tw-gradient-to: #E74694 var(--tw-gradient-to-position)}.group:hover .group-hover\:to-yellow-200{--tw-gradient-to: #FCE96A var(--tw-gradient-to-position)}.group:hover .group-hover\:text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.group:hover .group-hover\:text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.group:focus .group-focus\:outline-none{outline:2px solid transparent;outline-offset:2px}.group:focus .group-focus\:ring-4{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.group:focus .group-focus\:ring-white{--tw-ring-opacity: 1;--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity))}.peer:checked~.peer-checked\:bg-blue-600{--tw-bg-opacity: 1;background-color:rgb(28 100 242 / var(--tw-bg-opacity))}.peer:checked~.peer-checked\:bg-green-600{--tw-bg-opacity: 1;background-color:rgb(5 122 85 / var(--tw-bg-opacity))}.peer:checked~.peer-checked\:bg-orange-500{--tw-bg-opacity: 1;background-color:rgb(255 90 31 / var(--tw-bg-opacity))}.peer:checked~.peer-checked\:bg-purple-600{--tw-bg-opacity: 1;background-color:rgb(126 58 242 / var(--tw-bg-opacity))}.peer:checked~.peer-checked\:bg-red-600{--tw-bg-opacity: 1;background-color:rgb(224 36 36 / var(--tw-bg-opacity))}.peer:checked~.peer-checked\:bg-teal-600{--tw-bg-opacity: 1;background-color:rgb(4 116 129 / var(--tw-bg-opacity))}.peer:checked~.peer-checked\:bg-yellow-400{--tw-bg-opacity: 1;background-color:rgb(227 160 8 / var(--tw-bg-opacity))}.peer:checked~.peer-checked\:after\:translate-x-full:after{content:var(--tw-content);--tw-translate-x: 100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:checked~.peer-checked\:after\:border-white:after{content:var(--tw-content);--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}.peer:focus~.peer-focus\:outline-none{outline:2px solid transparent;outline-offset:2px}.peer:focus~.peer-focus\:ring-4{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.peer:focus~.peer-focus\:ring-blue-300{--tw-ring-opacity: 1;--tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity))}.peer:focus~.peer-focus\:ring-green-300{--tw-ring-opacity: 1;--tw-ring-color: rgb(132 225 188 / var(--tw-ring-opacity))}.peer:focus~.peer-focus\:ring-orange-300{--tw-ring-opacity: 1;--tw-ring-color: rgb(253 186 140 / var(--tw-ring-opacity))}.peer:focus~.peer-focus\:ring-purple-300{--tw-ring-opacity: 1;--tw-ring-color: rgb(202 191 253 / var(--tw-ring-opacity))}.peer:focus~.peer-focus\:ring-red-300{--tw-ring-opacity: 1;--tw-ring-color: rgb(248 180 180 / var(--tw-ring-opacity))}.peer:focus~.peer-focus\:ring-teal-300{--tw-ring-opacity: 1;--tw-ring-color: rgb(126 220 226 / var(--tw-ring-opacity))}.peer:focus~.peer-focus\:ring-yellow-300{--tw-ring-opacity: 1;--tw-ring-color: rgb(250 202 21 / var(--tw-ring-opacity))}:is(.dark .dark\:divide-gray-700)>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgb(55 65 81 / var(--tw-divide-opacity))}:is(.dark .dark\:border-blue-500){--tw-border-opacity: 1;border-color:rgb(63 131 248 / var(--tw-border-opacity))}:is(.dark .dark\:border-blue-600){--tw-border-opacity: 1;border-color:rgb(28 100 242 / var(--tw-border-opacity))}:is(.dark .dark\:border-gray-500){--tw-border-opacity: 1;border-color:rgb(107 114 128 / var(--tw-border-opacity))}:is(.dark .dark\:border-gray-600){--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity))}:is(.dark .dark\:border-gray-700){--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity))}:is(.dark .dark\:border-gray-800){--tw-border-opacity: 1;border-color:rgb(31 41 55 / var(--tw-border-opacity))}:is(.dark .dark\:border-gray-900){--tw-border-opacity: 1;border-color:rgb(17 24 39 / var(--tw-border-opacity))}:is(.dark .dark\:border-green-500){--tw-border-opacity: 1;border-color:rgb(14 159 110 / var(--tw-border-opacity))}:is(.dark .dark\:border-pink-400){--tw-border-opacity: 1;border-color:rgb(241 126 184 / var(--tw-border-opacity))}:is(.dark .dark\:border-pink-500){--tw-border-opacity: 1;border-color:rgb(231 70 148 / var(--tw-border-opacity))}:is(.dark .dark\:border-purple-400){--tw-border-opacity: 1;border-color:rgb(172 148 250 / var(--tw-border-opacity))}:is(.dark .dark\:border-purple-500){--tw-border-opacity: 1;border-color:rgb(144 97 249 / var(--tw-border-opacity))}:is(.dark .dark\:border-red-500){--tw-border-opacity: 1;border-color:rgb(240 82 82 / var(--tw-border-opacity))}:is(.dark .dark\:border-yellow-300){--tw-border-opacity: 1;border-color:rgb(250 202 21 / var(--tw-border-opacity))}:is(.dark .dark\:bg-blue-200){--tw-bg-opacity: 1;background-color:rgb(195 221 253 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-blue-600){--tw-bg-opacity: 1;background-color:rgb(28 100 242 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-blue-900){--tw-bg-opacity: 1;background-color:rgb(35 56 118 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-300){--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-400){--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-600){--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-700){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-800){--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-800\/30){background-color:#1f29374d}:is(.dark .dark\:bg-gray-900){--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-green-200){--tw-bg-opacity: 1;background-color:rgb(188 240 218 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-green-500){--tw-bg-opacity: 1;background-color:rgb(14 159 110 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-green-600){--tw-bg-opacity: 1;background-color:rgb(5 122 85 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-green-800){--tw-bg-opacity: 1;background-color:rgb(3 84 63 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-indigo-200){--tw-bg-opacity: 1;background-color:rgb(205 219 254 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-indigo-500){--tw-bg-opacity: 1;background-color:rgb(104 117 245 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-orange-200){--tw-bg-opacity: 1;background-color:rgb(252 217 189 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-orange-700){--tw-bg-opacity: 1;background-color:rgb(180 52 3 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-pink-200){--tw-bg-opacity: 1;background-color:rgb(250 209 232 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-pink-600){--tw-bg-opacity: 1;background-color:rgb(214 31 105 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-pink-900){--tw-bg-opacity: 1;background-color:rgb(117 26 61 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-purple-200){--tw-bg-opacity: 1;background-color:rgb(220 215 254 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-purple-500){--tw-bg-opacity: 1;background-color:rgb(144 97 249 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-purple-600){--tw-bg-opacity: 1;background-color:rgb(126 58 242 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-red-200){--tw-bg-opacity: 1;background-color:rgb(251 213 213 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-red-500){--tw-bg-opacity: 1;background-color:rgb(240 82 82 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-red-600){--tw-bg-opacity: 1;background-color:rgb(224 36 36 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-red-800){--tw-bg-opacity: 1;background-color:rgb(155 28 28 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-transparent){background-color:transparent}:is(.dark .dark\:bg-yellow-200){--tw-bg-opacity: 1;background-color:rgb(252 233 106 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-opacity-80){--tw-bg-opacity: .8}:is(.dark .dark\:bg-\[url\(\'https\:\/\/flowbite\.s3\.amazonaws\.com\/docs\/jumbotron\/hero-pattern-dark\.svg\'\)\]){background-image:url(https://flowbite.s3.amazonaws.com/docs/jumbotron/hero-pattern-dark.svg)}:is(.dark .dark\:from-blue-900){--tw-gradient-from: #233876 var(--tw-gradient-from-position);--tw-gradient-to: rgb(35 56 118 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}:is(.dark .dark\:fill-gray-300){fill:#d1d5db}:is(.dark .dark\:text-blue-300){--tw-text-opacity: 1;color:rgb(164 202 254 / var(--tw-text-opacity))}:is(.dark .dark\:text-blue-400){--tw-text-opacity: 1;color:rgb(118 169 250 / var(--tw-text-opacity))}:is(.dark .dark\:text-blue-500){--tw-text-opacity: 1;color:rgb(63 131 248 / var(--tw-text-opacity))}:is(.dark .dark\:text-blue-800){--tw-text-opacity: 1;color:rgb(30 66 159 / var(--tw-text-opacity))}:is(.dark .dark\:text-gray-300){--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity))}:is(.dark .dark\:text-gray-400){--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity))}:is(.dark .dark\:text-gray-50){--tw-text-opacity: 1;color:rgb(249 250 251 / var(--tw-text-opacity))}:is(.dark .dark\:text-gray-500){--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}:is(.dark .dark\:text-gray-600){--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}:is(.dark .dark\:text-gray-800){--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity))}:is(.dark .dark\:text-green-200){--tw-text-opacity: 1;color:rgb(188 240 218 / var(--tw-text-opacity))}:is(.dark .dark\:text-green-400){--tw-text-opacity: 1;color:rgb(49 196 141 / var(--tw-text-opacity))}:is(.dark .dark\:text-green-500){--tw-text-opacity: 1;color:rgb(14 159 110 / var(--tw-text-opacity))}:is(.dark .dark\:text-green-900){--tw-text-opacity: 1;color:rgb(1 71 55 / var(--tw-text-opacity))}:is(.dark .dark\:text-indigo-500){--tw-text-opacity: 1;color:rgb(104 117 245 / var(--tw-text-opacity))}:is(.dark .dark\:text-indigo-900){--tw-text-opacity: 1;color:rgb(54 47 120 / var(--tw-text-opacity))}:is(.dark .dark\:text-orange-200){--tw-text-opacity: 1;color:rgb(252 217 189 / var(--tw-text-opacity))}:is(.dark .dark\:text-orange-900){--tw-text-opacity: 1;color:rgb(119 29 29 / var(--tw-text-opacity))}:is(.dark .dark\:text-pink-400){--tw-text-opacity: 1;color:rgb(241 126 184 / var(--tw-text-opacity))}:is(.dark .dark\:text-pink-500){--tw-text-opacity: 1;color:rgb(231 70 148 / var(--tw-text-opacity))}:is(.dark .dark\:text-pink-900){--tw-text-opacity: 1;color:rgb(117 26 61 / var(--tw-text-opacity))}:is(.dark .dark\:text-purple-400){--tw-text-opacity: 1;color:rgb(172 148 250 / var(--tw-text-opacity))}:is(.dark .dark\:text-purple-500){--tw-text-opacity: 1;color:rgb(144 97 249 / var(--tw-text-opacity))}:is(.dark .dark\:text-purple-900){--tw-text-opacity: 1;color:rgb(74 29 150 / var(--tw-text-opacity))}:is(.dark .dark\:text-red-200){--tw-text-opacity: 1;color:rgb(251 213 213 / var(--tw-text-opacity))}:is(.dark .dark\:text-red-400){--tw-text-opacity: 1;color:rgb(249 128 128 / var(--tw-text-opacity))}:is(.dark .dark\:text-red-500){--tw-text-opacity: 1;color:rgb(240 82 82 / var(--tw-text-opacity))}:is(.dark .dark\:text-red-900){--tw-text-opacity: 1;color:rgb(119 29 29 / var(--tw-text-opacity))}:is(.dark .dark\:text-white){--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}:is(.dark .dark\:text-yellow-300){--tw-text-opacity: 1;color:rgb(250 202 21 / var(--tw-text-opacity))}:is(.dark .dark\:text-yellow-400){--tw-text-opacity: 1;color:rgb(227 160 8 / var(--tw-text-opacity))}:is(.dark .dark\:text-yellow-500){--tw-text-opacity: 1;color:rgb(194 120 3 / var(--tw-text-opacity))}:is(.dark .dark\:text-yellow-900){--tw-text-opacity: 1;color:rgb(99 49 18 / var(--tw-text-opacity))}:is(.dark .dark\:placeholder-gray-400)::placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity))}:is(.dark .dark\:placeholder-green-500)::placeholder{--tw-placeholder-opacity: 1;color:rgb(14 159 110 / var(--tw-placeholder-opacity))}:is(.dark .dark\:placeholder-red-500)::placeholder{--tw-placeholder-opacity: 1;color:rgb(240 82 82 / var(--tw-placeholder-opacity))}:is(.dark .dark\:shadow-lg){--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:is(.dark .dark\:shadow-blue-800\/80){--tw-shadow-color: rgb(30 66 159 / .8);--tw-shadow: var(--tw-shadow-colored)}:is(.dark .dark\:shadow-cyan-800\/80){--tw-shadow-color: rgb(21 94 117 / .8);--tw-shadow: var(--tw-shadow-colored)}:is(.dark .dark\:shadow-green-800\/80){--tw-shadow-color: rgb(3 84 63 / .8);--tw-shadow: var(--tw-shadow-colored)}:is(.dark .dark\:shadow-lime-800\/80){--tw-shadow-color: rgb(63 98 18 / .8);--tw-shadow: var(--tw-shadow-colored)}:is(.dark .dark\:shadow-pink-800\/80){--tw-shadow-color: rgb(153 21 75 / .8);--tw-shadow: var(--tw-shadow-colored)}:is(.dark .dark\:shadow-purple-800\/80){--tw-shadow-color: rgb(85 33 181 / .8);--tw-shadow: var(--tw-shadow-colored)}:is(.dark .dark\:shadow-red-800\/80){--tw-shadow-color: rgb(155 28 28 / .8);--tw-shadow: var(--tw-shadow-colored)}:is(.dark .dark\:shadow-teal-800\/80){--tw-shadow-color: rgb(5 80 92 / .8);--tw-shadow: var(--tw-shadow-colored)}:is(.dark .dark\:ring-gray-500){--tw-ring-opacity: 1;--tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity))}:is(.dark .dark\:ring-gray-900){--tw-ring-opacity: 1;--tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity))}:is(.dark .dark\:ring-offset-gray-800){--tw-ring-offset-color: #1F2937}:is(.dark .first\:dark\:text-white):first-child{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}:is(.dark .odd\:dark\:bg-gray-800):nth-child(odd){--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}:is(.dark .even\:dark\:bg-gray-700):nth-child(2n){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}:is(.dark .even\:dark\:bg-gray-900):nth-child(2n){--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}:is(.dark .dark\:hover\:border-gray-500:hover){--tw-border-opacity: 1;border-color:rgb(107 114 128 / var(--tw-border-opacity))}:is(.dark .dark\:hover\:border-gray-600:hover){--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity))}:is(.dark .dark\:hover\:bg-blue-300:hover){--tw-bg-opacity: 1;background-color:rgb(164 202 254 / var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-blue-600:hover){--tw-bg-opacity: 1;background-color:rgb(28 100 242 / var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-blue-700:hover){--tw-bg-opacity: 1;background-color:rgb(26 86 219 / var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-blue-800:hover){--tw-bg-opacity: 1;background-color:rgb(30 66 159 / var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-gray-600:hover){--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-gray-700:hover){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-gray-800:hover){--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-green-600:hover){--tw-bg-opacity: 1;background-color:rgb(5 122 85 / var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-green-700:hover){--tw-bg-opacity: 1;background-color:rgb(4 108 78 / var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-pink-500:hover){--tw-bg-opacity: 1;background-color:rgb(231 70 148 / var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-pink-700:hover){--tw-bg-opacity: 1;background-color:rgb(191 18 93 / var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-purple-500:hover){--tw-bg-opacity: 1;background-color:rgb(144 97 249 / var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-purple-700:hover){--tw-bg-opacity: 1;background-color:rgb(108 43 217 / var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-red-600:hover){--tw-bg-opacity: 1;background-color:rgb(224 36 36 / var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-red-700:hover){--tw-bg-opacity: 1;background-color:rgb(200 30 30 / var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-yellow-400:hover){--tw-bg-opacity: 1;background-color:rgb(227 160 8 / var(--tw-bg-opacity))}:is(.dark .hover\:dark\:bg-gray-600):hover{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}:is(.dark .dark\:hover\:text-blue-300:hover){--tw-text-opacity: 1;color:rgb(164 202 254 / var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-blue-500:hover){--tw-text-opacity: 1;color:rgb(63 131 248 / var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-blue-700:hover){--tw-text-opacity: 1;color:rgb(26 86 219 / var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-gray-300:hover){--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-gray-900:hover){--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-white:hover){--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}:is(.dark .dark\:focus\:border-blue-500:focus){--tw-border-opacity: 1;border-color:rgb(63 131 248 / var(--tw-border-opacity))}:is(.dark .dark\:focus\:text-white:focus){--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}:is(.dark .dark\:focus\:ring-blue-500:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-blue-600:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(28 100 242 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-blue-800:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(30 66 159 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-blue-900:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(35 56 118 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-cyan-800:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(21 94 117 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-gray-500:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-gray-600:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-gray-700:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-gray-800:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-green-800:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(3 84 63 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-lime-800:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(63 98 18 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-pink-800:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(153 21 75 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-pink-900:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(117 26 61 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-purple-800:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(85 33 181 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-purple-900:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(74 29 150 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-red-400:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(249 128 128 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-red-800:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(155 28 28 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-red-900:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(119 29 29 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-teal-700:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(3 102 114 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-teal-800:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(5 80 92 / var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-yellow-900:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(99 49 18 / var(--tw-ring-opacity))}:is(.dark .group:hover .dark\:group-hover\:bg-gray-800\/60){background-color:#1f293799}:is(.dark .group:hover .dark\:group-hover\:text-white){--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}:is(.dark .group:focus .dark\:group-focus\:ring-gray-800\/70){--tw-ring-color: rgb(31 41 55 / .7)}:is(.dark .peer:focus~.dark\:peer-focus\:ring-blue-800){--tw-ring-opacity: 1;--tw-ring-color: rgb(30 66 159 / var(--tw-ring-opacity))}:is(.dark .peer:focus~.dark\:peer-focus\:ring-green-800){--tw-ring-opacity: 1;--tw-ring-color: rgb(3 84 63 / var(--tw-ring-opacity))}:is(.dark .peer:focus~.dark\:peer-focus\:ring-orange-800){--tw-ring-opacity: 1;--tw-ring-color: rgb(138 44 13 / var(--tw-ring-opacity))}:is(.dark .peer:focus~.dark\:peer-focus\:ring-purple-800){--tw-ring-opacity: 1;--tw-ring-color: rgb(85 33 181 / var(--tw-ring-opacity))}:is(.dark .peer:focus~.dark\:peer-focus\:ring-red-800){--tw-ring-opacity: 1;--tw-ring-color: rgb(155 28 28 / var(--tw-ring-opacity))}:is(.dark .peer:focus~.dark\:peer-focus\:ring-teal-800){--tw-ring-opacity: 1;--tw-ring-color: rgb(5 80 92 / var(--tw-ring-opacity))}:is(.dark .peer:focus~.dark\:peer-focus\:ring-yellow-800){--tw-ring-opacity: 1;--tw-ring-color: rgb(114 59 19 / var(--tw-ring-opacity))}@media (min-width: 640px){.sm\:mx-auto{margin-left:auto;margin-right:auto}.sm\:mb-0{margin-bottom:0}.sm\:mb-4{margin-bottom:1rem}.sm\:ml-4{margin-left:1rem}.sm\:mt-0{margin-top:0}.sm\:block{display:block}.sm\:flex{display:flex}.sm\:hidden{display:none}.sm\:h-10{height:2.5rem}.sm\:h-6{height:1.5rem}.sm\:h-64{height:16rem}.sm\:h-7{height:1.75rem}.sm\:h-96{height:24rem}.sm\:w-1\/4{width:25%}.sm\:w-10{width:2.5rem}.sm\:w-6{width:1.5rem}.sm\:w-auto{width:auto}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-center{justify-content:center}.sm\:justify-between{justify-content:space-between}.sm\:gap-6{gap:1.5rem}.sm\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px * var(--tw-space-y-reverse))}.sm\:rounded-lg{border-radius:.5rem}.sm\:p-6{padding:1.5rem}.sm\:p-8{padding:2rem}.sm\:px-0{padding-left:0;padding-right:0}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:pr-8{padding-right:2rem}.sm\:text-center{text-align:center}}@media (min-width: 768px){.md\:inset-0{top:0;right:0;bottom:0;left:0}.md\:order-2{order:2}.md\:mb-0{margin-bottom:0}.md\:mr-6{margin-right:1.5rem}.md\:mt-0{margin-top:0}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-auto{height:auto}.md\:h-full{height:100%}.md\:w-1\/4{width:25%}.md\:w-48{width:12rem}.md\:w-auto{width:auto}.md\:max-w-xl{max-width:36rem}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.md\:space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.md\:rounded-none{border-radius:0}.md\:rounded-l-lg{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.md\:border-0{border-width:0px}.md\:bg-transparent{background-color:transparent}.md\:p-0{padding:0}.md\:p-6{padding:1.5rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:py-8{padding-top:2rem;padding-bottom:2rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:font-medium{font-weight:500}.md\:text-blue-700{--tw-text-opacity: 1;color:rgb(26 86 219 / var(--tw-text-opacity))}.md\:hover\:bg-transparent:hover{background-color:transparent}.md\:hover\:text-blue-600:hover{--tw-text-opacity: 1;color:rgb(28 100 242 / var(--tw-text-opacity))}.md\:hover\:text-blue-700:hover{--tw-text-opacity: 1;color:rgb(26 86 219 / var(--tw-text-opacity))}:is(.dark .md\:dark\:bg-gray-900){--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}:is(.dark .md\:dark\:hover\:bg-transparent:hover){background-color:transparent}:is(.dark .md\:dark\:hover\:text-blue-500:hover){--tw-text-opacity: 1;color:rgb(63 131 248 / var(--tw-text-opacity))}:is(.dark .md\:dark\:hover\:text-white:hover){--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}}@media (min-width: 1024px){.lg\:my-8{margin-top:2rem;margin-bottom:2rem}.lg\:px-0{padding-left:0;padding-right:0}.lg\:px-16{padding-left:4rem;padding-right:4rem}.lg\:py-16{padding-top:4rem;padding-bottom:4rem}.lg\:py-8{padding-top:2rem;padding-bottom:2rem}.lg\:text-6xl{font-size:3.75rem;line-height:1}.lg\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width: 1280px){.xl\:h-80{height:20rem}.xl\:w-1\/6{width:16.666667%}}@media (min-width: 1536px){.\32xl\:h-96{height:24rem}}.rtl\:inset-x-0:where([dir=rtl],[dir=rtl] *){left:0;right:0}.rtl\:rotate-180:where([dir=rtl],[dir=rtl] *){--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\[\&\:not\(\:last-child\)\]\:border-b:not(:last-child){border-bottom-width:1px}:is(.dark .\[\&\:not\(\:last-child\)\]\:dark\:border-gray-700):not(:last-child){--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity))}button,input,optgroup,select,textarea{border:inherit}:root{--vp-home-hero-image-background-image: linear-gradient( -45deg, #41b88380 30%, #35495e80 );--vp-home-hero-image-filter: blur(72px)}:root{--vp-c-default-1: var(--vp-c-gray-1);--vp-c-default-2: var(--vp-c-gray-2);--vp-c-default-3: var(--vp-c-gray-3);--vp-c-default-soft: var(--vp-c-gray-soft);--vp-c-brand-1: var(--vp-c-indigo-1);--vp-c-brand-2: var(--vp-c-indigo-2);--vp-c-brand-3: var(--vp-c-indigo-3);--vp-c-brand-soft: var(--vp-c-indigo-soft);--vp-c-tip-1: var(--vp-c-brand-1);--vp-c-tip-2: var(--vp-c-brand-2);--vp-c-tip-3: var(--vp-c-brand-3);--vp-c-tip-soft: var(--vp-c-brand-soft);--vp-c-warning-1: var(--vp-c-yellow-1);--vp-c-warning-2: var(--vp-c-yellow-2);--vp-c-warning-3: var(--vp-c-yellow-3);--vp-c-warning-soft: var(--vp-c-yellow-soft);--vp-c-danger-1: var(--vp-c-red-1);--vp-c-danger-2: var(--vp-c-red-2);--vp-c-danger-3: var(--vp-c-red-3);--vp-c-danger-soft: var(--vp-c-red-soft)}:root{--vp-button-brand-border: transparent;--vp-button-brand-text: var(--vp-c-white);--vp-button-brand-bg: var(--vp-c-brand-3);--vp-button-brand-hover-border: transparent;--vp-button-brand-hover-text: var(--vp-c-white);--vp-button-brand-hover-bg: var(--vp-c-brand-2);--vp-button-brand-active-border: transparent;--vp-button-brand-active-text: var(--vp-c-white);--vp-button-brand-active-bg: var(--vp-c-brand-1)}:root{--vp-home-hero-name-color: transparent;--vp-home-hero-name-background: -webkit-linear-gradient( -45deg, #3fb983 30%, #039252 );--vp-home-hero-image-filter: blur(40px)}@media (min-width: 640px){:root{--vp-home-hero-image-filter: blur(56px)}}@media (min-width: 960px){:root{--vp-home-hero-image-filter: blur(72px)}}:root{--vp-custom-block-tip-border: transparent;--vp-custom-block-tip-text: var(--vp-c-text-1);--vp-custom-block-tip-bg: var(--vp-c-brand-soft);--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft)}.DocSearch{--docsearch-primary-color: var(--vp-c-brand-1) !important} diff --git a/docs/.vitepress/dist/components/PLAYGROUND/PLAYGROUND.html b/docs/.vitepress/dist/components/PLAYGROUND/PLAYGROUND.html new file mode 100644 index 0000000..1c1c23b --- /dev/null +++ b/docs/.vitepress/dist/components/PLAYGROUND/PLAYGROUND.html @@ -0,0 +1,32 @@ + + + + + + Flowbite Vue 3 | Flowbite Vue 3 + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/.vitepress/dist/components/accordion.html b/docs/.vitepress/dist/components/accordion.html new file mode 100644 index 0000000..b7c2421 --- /dev/null +++ b/docs/.vitepress/dist/components/accordion.html @@ -0,0 +1,540 @@ + + + + + + Vue Accordion - Flowbite | Flowbite Vue 3 + + + + + + + + + + + + + + + +
Flowbite Vue 3

Appearance

Vue Accordion - Flowbite ​

Use Tailwind CSS accordion component to show expanding content ​

TIP

Original reference: https://flowbite.com/docs/components/accordion/

Default accordion ​

Use this example to basic accordion.

vue
<template>
+  <fwb-accordion>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-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>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>another header</fwb-accordion-header>
+      <fwb-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>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-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>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-accordion>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-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>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>another header</fwb-accordion-header>
+      <fwb-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>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-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>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>

Always open accordion ​

Always open prop to makes accordion able to open multiple elements.

vue
<template>
+  <fwb-accordion always-open>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="/docs/getting-started/introduction/">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>another header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-accordion always-open>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="/docs/getting-started/introduction/">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>another header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>

Flush accordion ​

Flush prop removes side borders, and rounded corners

vue
<template>
+  <fwb-accordion flush>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="/docs/getting-started/introduction/">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>another header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-accordion flush>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="/docs/getting-started/introduction/">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>another header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>

Styling accordion ​

You can style accordion content and headers by passing tailwind classes into them.

vue
<template>
+  <fwb-accordion>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="/docs/getting-started/introduction/">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">
+        another header
+      </fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>
<template>
+  <fwb-accordion>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="/docs/getting-started/introduction/">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">
+        another header
+      </fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
+        </div>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>

Closed first item ​

vue
<template>
+    <fwb-accordion :open-first-item="false">
+      <fwb-accordion-panel>
+        <fwb-accordion-header>header</fwb-accordion-header>
+        <fwb-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>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>another header</fwb-accordion-header>
+        <fwb-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>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>and one more header</fwb-accordion-header>
+        <fwb-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>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+    </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>
<template>
+    <fwb-accordion :open-first-item="false">
+      <fwb-accordion-panel>
+        <fwb-accordion-header>header</fwb-accordion-header>
+        <fwb-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>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>another header</fwb-accordion-header>
+        <fwb-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>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>and one more header</fwb-accordion-header>
+        <fwb-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>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+    </fwb-accordion>
+</template>
+
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>

Released under the MIT License.

Copyright © 2023 Flowbite™

+ + + + \ No newline at end of file diff --git a/docs/.vitepress/dist/components/alert.html b/docs/.vitepress/dist/components/alert.html new file mode 100644 index 0000000..43d4819 --- /dev/null +++ b/docs/.vitepress/dist/components/alert.html @@ -0,0 +1,408 @@ + + + + + + Vue Alert - Flowbite | Flowbite Vue 3 + + + + + + + + + + + + + + + +
Flowbite Vue 3

Appearance

Vue Alert - Flowbite ​

Show contextual information to your users using alert elements based on Tailwind CSS ​

The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.

Default alert ​

Use the following examples of alert components to show messages as feedback to your users.

vue
<template>
+  <div class="grid gap-2">
+    <fwb-alert type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="danger">
+      Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="dark">
+      Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
<template>
+  <div class="grid gap-2">
+    <fwb-alert type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="danger">
+      Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="dark">
+      Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>

Alerts with icon ​

You can also include a descriptive icon to complement the message inside the alert component with the following example.

vue
<template>
+  <div class="grid gap-2">
+    <fwb-alert icon type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="danger">
+      Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="dark">
+      Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
<template>
+  <div class="grid gap-2">
+    <fwb-alert icon type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="danger">
+      Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="dark">
+      Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>

Bordered alerts ​

Use this example to add a border accent to the alert component instead of just a plain background.

vue
<template>
+  <div class="grid gap-2">
+    <fwb-alert border type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="danger">
+      Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="dark">
+      Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
<template>
+  <div class="grid gap-2">
+    <fwb-alert border type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="danger">
+      Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="dark">
+      Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>

Border accent ​

Use this example to add a border accent on top of the alert component for further visual distinction.

vue
<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-alert class="border-t-4 rounded-none" icon type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="danger">
+      Info Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="dark">
+      Info Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-alert class="border-t-4 rounded-none" icon type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="danger">
+      Info Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="dark">
+      Info Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>

Alerts with list ​

Use this example to show a list and a description inside an alert component.

vue
<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-alert type="info">
+      <span class="font-medium">Ensure that these requirements are met:</span>
+      <ul class="mt-1.5 ml-4 list-disc list-inside">
+        <li>At least 10 characters (and up to 100 characters)</li>
+        <li>At least one lowercase character</li>
+        <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
+      </ul>
+    </fwb-alert>
+    <fwb-alert type="danger">
+      <span class="font-medium">Ensure that these requirements are met:</span>
+      <ul class="mt-1.5 ml-4 list-disc list-inside">
+        <li>At least 10 characters (and up to 100 characters)</li>
+        <li>At least one lowercase character</li>
+        <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
+      </ul>
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-alert type="info">
+      <span class="font-medium">Ensure that these requirements are met:</span>
+      <ul class="mt-1.5 ml-4 list-disc list-inside">
+        <li>At least 10 characters (and up to 100 characters)</li>
+        <li>At least one lowercase character</li>
+        <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
+      </ul>
+    </fwb-alert>
+    <fwb-alert type="danger">
+      <span class="font-medium">Ensure that these requirements are met:</span>
+      <ul class="mt-1.5 ml-4 list-disc list-inside">
+        <li>At least 10 characters (and up to 100 characters)</li>
+        <li>At least one lowercase character</li>
+        <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
+      </ul>
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>

Dismissing ​

Use the following alert elements that are also dismissable.

vue
<script setup>
+import { Alert } from 'flowbite-vue'
+</script>
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-alert closable icon type="info">
+      Info
+    </fwb-alert>
+    <fwb-alert closable icon type="warning">
+      Warning
+    </fwb-alert>
+    <fwb-alert closable icon type="danger">
+      Danger
+    </fwb-alert>
+    <fwb-alert closable icon type="dark">
+      Dark
+    </fwb-alert>
+    <fwb-alert closable icon type="success">
+      Success
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
<script setup>
+import { Alert } from 'flowbite-vue'
+</script>
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-alert closable icon type="info">
+      Info
+    </fwb-alert>
+    <fwb-alert closable icon type="warning">
+      Warning
+    </fwb-alert>
+    <fwb-alert closable icon type="danger">
+      Danger
+    </fwb-alert>
+    <fwb-alert closable icon type="dark">
+      Dark
+    </fwb-alert>
+    <fwb-alert closable icon type="success">
+      Success
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>

Additional content ​

The following alert components can be used if you wish to disclose more information inside the element.

vue
<template>
+  <fwb-alert type="info">
+    <template #icon>
+      <svg
+        class="flex-shrink-0 w-4 h-4 mr-2"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
+        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+      </svg>
+      <span class="sr-only">Info</span>
+    </template>
+    <template #title>
+      <h3 class="text-lg font-medium">
+        This is a info alert
+      </h3>
+    </template>
+    <template #default="{ onCloseClick }">
+      <div class="mt-2 mb-4 text-sm">
+        More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
+      </div>
+      <div class="flex">
+        <button
+          type="button"
+          class="text-white bg-blue-800 hover:bg-blue-900 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        >
+          <svg
+            class="-ml-0.5 mr-2 h-3 w-3"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 14"
+          >
+            <path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
+          </svg>
+          View more
+        </button>
+        <button
+          type="button"
+          class="text-blue-800 bg-transparent border border-blue-800 hover:bg-blue-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:hover:bg-blue-600 dark:border-blue-600 dark:text-blue-400 dark:hover:text-white dark:focus:ring-blue-800"
+          data-dismiss-target="#alert-additional-content-1"
+          aria-label="Close"
+          @click="onCloseClick"
+        >
+          Dismiss
+        </button>
+      </div>
+    </template>
+  </fwb-alert>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
<template>
+  <fwb-alert type="info">
+    <template #icon>
+      <svg
+        class="flex-shrink-0 w-4 h-4 mr-2"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
+        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+      </svg>
+      <span class="sr-only">Info</span>
+    </template>
+    <template #title>
+      <h3 class="text-lg font-medium">
+        This is a info alert
+      </h3>
+    </template>
+    <template #default="{ onCloseClick }">
+      <div class="mt-2 mb-4 text-sm">
+        More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
+      </div>
+      <div class="flex">
+        <button
+          type="button"
+          class="text-white bg-blue-800 hover:bg-blue-900 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        >
+          <svg
+            class="-ml-0.5 mr-2 h-3 w-3"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 14"
+          >
+            <path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
+          </svg>
+          View more
+        </button>
+        <button
+          type="button"
+          class="text-blue-800 bg-transparent border border-blue-800 hover:bg-blue-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:hover:bg-blue-600 dark:border-blue-600 dark:text-blue-400 dark:hover:text-white dark:focus:ring-blue-800"
+          data-dismiss-target="#alert-additional-content-1"
+          aria-label="Close"
+          @click="onCloseClick"
+        >
+          Dismiss
+        </button>
+      </div>
+    </template>
+  </fwb-alert>
+</template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>

API ​

Props ​

NameValuesDefault
typeinfo, danger, success,warning, darkinfo
closablebooleanfalse
iconbooleanfalse
borderbooleanfalse

Events ​

NameDescription
closeClose button pressed

Slots ​

NameDescription
defaultalert content
close-iconcustom close icon
iconcustom icon
titletitle content

Released under the MIT License.

Copyright © 2023 Flowbite™

+ + + + \ No newline at end of file diff --git a/docs/.vitepress/dist/components/badge.html b/docs/.vitepress/dist/components/badge.html new file mode 100644 index 0000000..c5fba33 --- /dev/null +++ b/docs/.vitepress/dist/components/badge.html @@ -0,0 +1,194 @@ + + + + + + Vue Badge - Flowbite | Flowbite Vue 3 + + + + + + + + + + + + + + + +
Flowbite Vue 3

Appearance

Vue Badge - Flowbite ​

Use Tailwind CSS badges as elements to show counts or labels separately or inside other components ​

TIP

Original reference: https://flowbite.com/docs/components/badge/

The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made. Alternatively, badges can also be used as standalone elements that link to a certain page by using the anchor tag instead of a span element.

Default badge ​

Prop – type

Default Dark Red Green Yellow Indigo Purple Pink
vue
<template>
+  <fwb-badge>Default</fwb-badge>
+  <fwb-badge type="dark">Dark</fwb-badge>
+  <fwb-badge type="red">Red</fwb-badge>
+  <fwb-badge type="green">Green</fwb-badge>
+  <fwb-badge type="yellow">Yellow</fwb-badge>
+  <fwb-badge type="indigo">Indigo</fwb-badge>
+  <fwb-badge type="purple">Purple</fwb-badge>
+  <fwb-badge type="pink">Pink</fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>
<template>
+  <fwb-badge>Default</fwb-badge>
+  <fwb-badge type="dark">Dark</fwb-badge>
+  <fwb-badge type="red">Red</fwb-badge>
+  <fwb-badge type="green">Green</fwb-badge>
+  <fwb-badge type="yellow">Yellow</fwb-badge>
+  <fwb-badge type="indigo">Indigo</fwb-badge>
+  <fwb-badge type="purple">Purple</fwb-badge>
+  <fwb-badge type="pink">Pink</fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>

Large badges ​

Prop – size

Default Dark Red Green Yellow Indigo Purple Pink
vue
<template>
+  <fwb-badge size="xs">Default</fwb-badge>
+  <fwb-badge size="xs" type="dark">Dark</fwb-badge>
+  <fwb-badge size="xs" type="red">Red</fwb-badge>
+  <fwb-badge size="xs" type="green">Green</fwb-badge>
+  <fwb-badge size="sm" type="yellow">Yellow</fwb-badge>
+  <fwb-badge size="sm" type="indigo">Indigo</fwb-badge>
+  <fwb-badge size="sm" type="purple">Purple</fwb-badge>
+  <fwb-badge size="sm" type="pink">Pink</fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>
<template>
+  <fwb-badge size="xs">Default</fwb-badge>
+  <fwb-badge size="xs" type="dark">Dark</fwb-badge>
+  <fwb-badge size="xs" type="red">Red</fwb-badge>
+  <fwb-badge size="xs" type="green">Green</fwb-badge>
+  <fwb-badge size="sm" type="yellow">Yellow</fwb-badge>
+  <fwb-badge size="sm" type="indigo">Indigo</fwb-badge>
+  <fwb-badge size="sm" type="purple">Purple</fwb-badge>
+  <fwb-badge size="sm" type="pink">Pink</fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>

You can also use badges as anchor elements to link to another page. Prop – href

Link Link small
vue
<template>
+  <fwb-badge href="#">
+    Link
+  </fwb-badge>
+  <fwb-badge href="#" size="sm">
+    Link small
+  </fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>
<template>
+  <fwb-badge href="#">
+    Link
+  </fwb-badge>
+  <fwb-badge href="#" size="sm">
+    Link small
+  </fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>

Badges with icon ​

You can also use SVG icons inside the badge elements. slot icon

Default Dark
vue
<template>
+  <fwb-badge>
+    <template #icon>
+      <svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+    Default
+  </fwb-badge>
+  <fwb-badge size="sm" type="dark">
+    <template #icon>
+      <svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+    Dark
+  </fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>
<template>
+  <fwb-badge>
+    <template #icon>
+      <svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+    Default
+  </fwb-badge>
+  <fwb-badge size="sm" type="dark">
+    <template #icon>
+      <svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+    Dark
+  </fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>

Badge with icon only ​

vue
<template>
+  <fwb-badge>
+    <template #icon>
+      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-badge>
+  <fwb-badge type="dark">
+    <template #icon>
+      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-badge>
+  <fwb-badge size="sm" type="green">
+    <template #icon>
+      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>
<template>
+  <fwb-badge>
+    <template #icon>
+      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-badge>
+  <fwb-badge type="dark">
+    <template #icon>
+      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-badge>
+  <fwb-badge size="sm" type="green">
+    <template #icon>
+      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-badge>
+</template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>

Released under the MIT License.

Copyright © 2023 Flowbite™

+ + + + \ No newline at end of file diff --git a/docs/.vitepress/dist/components/breadcrumb.html b/docs/.vitepress/dist/components/breadcrumb.html new file mode 100644 index 0000000..0cdbe6f --- /dev/null +++ b/docs/.vitepress/dist/components/breadcrumb.html @@ -0,0 +1,152 @@ + + + + + + Vue Breadcrumb - Flowbite | Flowbite Vue 3 + + + + + + + + + + + + + + + +
Flowbite Vue 3

Appearance

Vue Breadcrumb - Flowbite ​

The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages.

Flowbite includes two styles of breadcrumb elements, one that has a transparent background and a few more that come with a background in different colors.

Default breadcrumb ​

vue
<template>
+  <fwb-breadcrumb>
+    <fwb-breadcrumb-item home href="#">
+      Home
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item href="#">
+      Projects
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item>
+      Flowbite
+    </fwb-breadcrumb-item>
+  </fwb-breadcrumb>
+</template>
+
+<script setup>
+import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
+</script>
<template>
+  <fwb-breadcrumb>
+    <fwb-breadcrumb-item home href="#">
+      Home
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item href="#">
+      Projects
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item>
+      Flowbite
+    </fwb-breadcrumb-item>
+  </fwb-breadcrumb>
+</template>
+
+<script setup>
+import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
+</script>

Solid Breadcrumb ​

vue
<template>
+  <fwb-breadcrumb solid>
+    <fwb-breadcrumb-item home href="#">
+      Home
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item href="#">
+      Projects
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item>
+      Flowbite
+    </fwb-breadcrumb-item>
+  </fwb-breadcrumb>
+</template>
+
+<script setup>
+import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
+</script>
<template>
+  <fwb-breadcrumb solid>
+    <fwb-breadcrumb-item home href="#">
+      Home
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item href="#">
+      Projects
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item>
+      Flowbite
+    </fwb-breadcrumb-item>
+  </fwb-breadcrumb>
+</template>
+
+<script setup>
+import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
+</script>

Custom Icons ​

vue
<template>
+  <fwb-breadcrumb>
+    <fwb-breadcrumb-item home href="#">
+      <template #home-icon>
+        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+        </svg>
+      </template>
+      Home
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item href="#">
+      <template #arrow-icon>
+        <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M14 5l7 7m0 0l-7 7m7-7H3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+        </svg>
+      </template>
+      Projects
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item>
+      <template #arrow-icon>
+        <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M14 5l7 7m0 0l-7 7m7-7H3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+        </svg>
+      </template>
+      Flowbite
+    </fwb-breadcrumb-item>
+  </fwb-breadcrumb>
+</template>
+
+<script setup>
+import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
+</script>
<template>
+  <fwb-breadcrumb>
+    <fwb-breadcrumb-item home href="#">
+      <template #home-icon>
+        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+        </svg>
+      </template>
+      Home
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item href="#">
+      <template #arrow-icon>
+        <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M14 5l7 7m0 0l-7 7m7-7H3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+        </svg>
+      </template>
+      Projects
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item>
+      <template #arrow-icon>
+        <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M14 5l7 7m0 0l-7 7m7-7H3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+        </svg>
+      </template>
+      Flowbite
+    </fwb-breadcrumb-item>
+  </fwb-breadcrumb>
+</template>
+
+<script setup>
+import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
+</script>

Released under the MIT License.

Copyright © 2023 Flowbite™

+ + + + \ No newline at end of file diff --git a/docs/.vitepress/dist/components/button-group.html b/docs/.vitepress/dist/components/button-group.html new file mode 100644 index 0000000..678ac25 --- /dev/null +++ b/docs/.vitepress/dist/components/button-group.html @@ -0,0 +1,87 @@ + + + + + + Vue Button Group - Flowbite | Flowbite Vue 3 + + + + + + + + + + + + + + + + + + +
Flowbite Vue 3

Appearance

Vue Button Group - Flowbite ​

Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line ​

TIP

Original reference: https://flowbite.com/docs/components/button-group/

The button group component from Flowbite can be used to stack together multiple buttons and links inside a single element.

Basic example ​

vue
<template>
+  <fwb-button-group>
+    <fwb-button>Button Default</fwb-button>
+    <fwb-button color="purple">Button Purple</fwb-button>
+    <fwb-button color="alternative">Button Alternative</fwb-button>
+    <fwb-button color="red">Button Red</fwb-button>
+  </fwb-button-group>
+</template>
+
+<script setup>
+import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button-group>
+    <fwb-button>Button Default</fwb-button>
+    <fwb-button color="purple">Button Purple</fwb-button>
+    <fwb-button color="alternative">Button Alternative</fwb-button>
+    <fwb-button color="red">Button Red</fwb-button>
+  </fwb-button-group>
+</template>
+
+<script setup>
+import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
+</script>

Buttons with icons ​

vue
<template>
+  <fwb-button-group>
+    <fwb-button outline>Button 1</fwb-button>
+    <fwb-button outline>Button 2</fwb-button>
+    <fwb-button outline>Button 3</fwb-button>
+    <fwb-button outline>
+      Button 4
+      <template #suffix>
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+        </svg>
+      </template>
+    </fwb-button>
+  </fwb-button-group>
+</template>
+
+<script setup>
+import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button-group>
+    <fwb-button outline>Button 1</fwb-button>
+    <fwb-button outline>Button 2</fwb-button>
+    <fwb-button outline>Button 3</fwb-button>
+    <fwb-button outline>
+      Button 4
+      <template #suffix>
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+        </svg>
+      </template>
+    </fwb-button>
+  </fwb-button-group>
+</template>
+
+<script setup>
+import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
+</script>

Released under the MIT License.

Copyright © 2023 Flowbite™

+ + + + \ No newline at end of file diff --git a/docs/.vitepress/dist/components/button.html b/docs/.vitepress/dist/components/button.html new file mode 100644 index 0000000..bcdcfcd --- /dev/null +++ b/docs/.vitepress/dist/components/button.html @@ -0,0 +1,475 @@ + + + + + + Vue Button - Flowbite | Flowbite Vue 3 + + + + + + + + + + + + + + + + + + +
Flowbite Vue 3

Appearance

Vue Button - Flowbite ​

TIP

Original reference: https://flowbite.com/docs/components/buttons/

The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages.

Flowbite provides a large variety of styles and sizes for the button component including outlined buttons, multiple colors, sizes, buttons with icons, and more.

Prop - color ​

vue
<template>
+  <fwb-button color="default">Default</fwb-button>
+  <fwb-button color="alternative">Alternative</fwb-button>
+  <fwb-button color="dark">Dark</fwb-button>
+  <fwb-button color="light">Light</fwb-button>
+  <fwb-button color="green">Green</fwb-button>
+  <fwb-button color="red">Red</fwb-button>
+  <fwb-button color="yellow">Yellow</fwb-button>
+  <fwb-button color="purple">Purple</fwb-button>
+  <fwb-button color="pink">Pink</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button color="default">Default</fwb-button>
+  <fwb-button color="alternative">Alternative</fwb-button>
+  <fwb-button color="dark">Dark</fwb-button>
+  <fwb-button color="light">Light</fwb-button>
+  <fwb-button color="green">Green</fwb-button>
+  <fwb-button color="red">Red</fwb-button>
+  <fwb-button color="yellow">Yellow</fwb-button>
+  <fwb-button color="purple">Purple</fwb-button>
+  <fwb-button color="pink">Pink</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - size ​

vue
<template>
+  <fwb-button size="xs">Extra Small - xs</fwb-button>
+  <fwb-button size="sm">Small - sm</fwb-button>
+  <fwb-button size="md">Medium - md</fwb-button>
+  <fwb-button size="lg">Large - lg</fwb-button>
+  <fwb-button size="xl">Extra Large - xl</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button size="xs">Extra Small - xs</fwb-button>
+  <fwb-button size="sm">Small - sm</fwb-button>
+  <fwb-button size="md">Medium - md</fwb-button>
+  <fwb-button size="lg">Large - lg</fwb-button>
+  <fwb-button size="xl">Extra Large - xl</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - pill ​

vue
<template>
+  <fwb-button color="default" pill>Default</fwb-button>
+  <fwb-button color="alternative" pill>Alternative</fwb-button>
+  <fwb-button color="dark" pill>Dark</fwb-button>
+  <fwb-button color="light" pill>Light</fwb-button>
+  <fwb-button color="green" pill>Green</fwb-button>
+  <fwb-button color="red" pill>Red</fwb-button>
+  <fwb-button color="yellow" pill>Yellow</fwb-button>
+  <fwb-button color="purple" pill>Purple</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button color="default" pill>Default</fwb-button>
+  <fwb-button color="alternative" pill>Alternative</fwb-button>
+  <fwb-button color="dark" pill>Dark</fwb-button>
+  <fwb-button color="light" pill>Light</fwb-button>
+  <fwb-button color="green" pill>Green</fwb-button>
+  <fwb-button color="red" pill>Red</fwb-button>
+  <fwb-button color="yellow" pill>Yellow</fwb-button>
+  <fwb-button color="purple" pill>Purple</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - gradient (monochrome) ​

vue
<template>
+  <fwb-button gradient="blue">Blue</fwb-button>
+  <fwb-button gradient="cyan">Cyan</fwb-button>
+  <fwb-button gradient="green">Green</fwb-button>
+  <fwb-button gradient="lime">Lime</fwb-button>
+  <fwb-button gradient="pink">Pink</fwb-button>
+  <fwb-button gradient="purple">Purple</fwb-button>
+  <fwb-button gradient="red">Red</fwb-button>
+  <fwb-button gradient="teal">Teal</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button gradient="blue">Blue</fwb-button>
+  <fwb-button gradient="cyan">Cyan</fwb-button>
+  <fwb-button gradient="green">Green</fwb-button>
+  <fwb-button gradient="lime">Lime</fwb-button>
+  <fwb-button gradient="pink">Pink</fwb-button>
+  <fwb-button gradient="purple">Purple</fwb-button>
+  <fwb-button gradient="red">Red</fwb-button>
+  <fwb-button gradient="teal">Teal</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - gradient (duotone) ​

vue
<template>
+  <fwb-button gradient="purple-blue">Purple to blue</fwb-button>
+  <fwb-button gradient="cyan-blue">Cyan to blue</fwb-button>
+  <fwb-button gradient="green-blue">Green to blue</fwb-button>
+  <fwb-button gradient="purple-pink">Purple to pink</fwb-button>
+  <fwb-button gradient="pink-orange">Pink to orange</fwb-button>
+  <fwb-button gradient="teal-lime">Teal to lime</fwb-button>
+  <fwb-button gradient="red-yellow">Red to yellow</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button gradient="purple-blue">Purple to blue</fwb-button>
+  <fwb-button gradient="cyan-blue">Cyan to blue</fwb-button>
+  <fwb-button gradient="green-blue">Green to blue</fwb-button>
+  <fwb-button gradient="purple-pink">Purple to pink</fwb-button>
+  <fwb-button gradient="pink-orange">Pink to orange</fwb-button>
+  <fwb-button gradient="teal-lime">Teal to lime</fwb-button>
+  <fwb-button gradient="red-yellow">Red to yellow</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - outline ​

vue
<template>
+  <fwb-button color="default" outline>Default</fwb-button>
+  <fwb-button color="dark" outline>Dark</fwb-button>
+  <fwb-button color="green" outline>Green</fwb-button>
+  <fwb-button color="red" outline>Red</fwb-button>
+  <fwb-button color="yellow" outline>Yellow</fwb-button>
+  <fwb-button color="purple" outline>Purple</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button color="default" outline>Default</fwb-button>
+  <fwb-button color="dark" outline>Dark</fwb-button>
+  <fwb-button color="green" outline>Green</fwb-button>
+  <fwb-button color="red" outline>Red</fwb-button>
+  <fwb-button color="yellow" outline>Yellow</fwb-button>
+  <fwb-button color="purple" outline>Purple</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - outline (gradient) ​

vue
<template>
+  <fwb-button gradient="purple-blue" outline>Purple to blue</fwb-button>
+  <fwb-button gradient="cyan-blue" outline>Cyan to blue</fwb-button>
+  <fwb-button gradient="green-blue" outline>Green to blue</fwb-button>
+  <fwb-button gradient="purple-pink" outline>Purple to pink</fwb-button>
+  <fwb-button gradient="pink-orange" outline>Pink to orange</fwb-button>
+  <fwb-button gradient="teal-lime" outline>Teal to lime</fwb-button>
+  <fwb-button gradient="red-yellow" outline>Red to yellow</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button gradient="purple-blue" outline>Purple to blue</fwb-button>
+  <fwb-button gradient="cyan-blue" outline>Cyan to blue</fwb-button>
+  <fwb-button gradient="green-blue" outline>Green to blue</fwb-button>
+  <fwb-button gradient="purple-pink" outline>Purple to pink</fwb-button>
+  <fwb-button gradient="pink-orange" outline>Pink to orange</fwb-button>
+  <fwb-button gradient="teal-lime" outline>Teal to lime</fwb-button>
+  <fwb-button gradient="red-yellow" outline>Red to yellow</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - shadow ​

vue
<template>
+  <fwb-button gradient="blue" shadow>Blue with blue</fwb-button>
+  <fwb-button gradient="cyan" shadow>Cyan with cyan</fwb-button>
+  <fwb-button gradient="green" shadow>Green with green</fwb-button>
+  <fwb-button gradient="lime" shadow>Lime with lime</fwb-button>
+  <fwb-button gradient="pink" shadow>Pink with pink</fwb-button>
+  <fwb-button gradient="purple" shadow>Purple with purple</fwb-button>
+  <fwb-button gradient="red" shadow>Red with red</fwb-button>
+  <fwb-button gradient="teal" shadow>Teal with teal</fwb-button>
+  <fwb-button gradient="blue" shadow="red">Blue with red</fwb-button>
+  <fwb-button gradient="cyan" shadow="teal">Cyan with teal</fwb-button>
+  <fwb-button gradient="teal" shadow="purple">Teal with purple</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button gradient="blue" shadow>Blue with blue</fwb-button>
+  <fwb-button gradient="cyan" shadow>Cyan with cyan</fwb-button>
+  <fwb-button gradient="green" shadow>Green with green</fwb-button>
+  <fwb-button gradient="lime" shadow>Lime with lime</fwb-button>
+  <fwb-button gradient="pink" shadow>Pink with pink</fwb-button>
+  <fwb-button gradient="purple" shadow>Purple with purple</fwb-button>
+  <fwb-button gradient="red" shadow>Red with red</fwb-button>
+  <fwb-button gradient="teal" shadow>Teal with teal</fwb-button>
+  <fwb-button gradient="blue" shadow="red">Blue with red</fwb-button>
+  <fwb-button gradient="cyan" shadow="teal">Cyan with teal</fwb-button>
+  <fwb-button gradient="teal" shadow="purple">Teal with purple</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - square ​

vue
<template>
+  <fwb-button gradient="red-yellow" square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="default" pill square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="dark" outline square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="yellow" outline pill square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+    </svg>
+  </fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button gradient="red-yellow" square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="default" pill square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="dark" outline square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="yellow" outline pill square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+    </svg>
+  </fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - loading ​

vue
<template>
+  <fwb-button :disabled="loading" :loading="loading" gradient="purple-blue" outline size="xs" @click="loading = !loading">
+    Click me
+  </fwb-button>
+  <fwb-button :loading="loading" gradient="red-yellow" size="sm" @click="loading = !loading">
+    Click me
+  </fwb-button>
+  <fwb-button :loading="loading" color="default" loading-position="suffix" outline @click="loading = !loading">
+    Click me
+    <template #suffix>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-button>
+  <fwb-button :loading="loading" gradient="green-blue" size="lg" @click="loading = !loading">
+    Click me
+  </fwb-button>
+  <fwb-button :loading="loading" gradient="pink" size="xl" @click="loading = !loading">
+    Click me
+  </fwb-button>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbButton } from 'flowbite-vue'
+
+const loading = ref(false)
+</script>
<template>
+  <fwb-button :disabled="loading" :loading="loading" gradient="purple-blue" outline size="xs" @click="loading = !loading">
+    Click me
+  </fwb-button>
+  <fwb-button :loading="loading" gradient="red-yellow" size="sm" @click="loading = !loading">
+    Click me
+  </fwb-button>
+  <fwb-button :loading="loading" color="default" loading-position="suffix" outline @click="loading = !loading">
+    Click me
+    <template #suffix>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-button>
+  <fwb-button :loading="loading" gradient="green-blue" size="lg" @click="loading = !loading">
+    Click me
+  </fwb-button>
+  <fwb-button :loading="loading" gradient="pink" size="xl" @click="loading = !loading">
+    Click me
+  </fwb-button>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbButton } from 'flowbite-vue'
+
+const loading = ref(false)
+</script>

Prop - disabled ​

vue
<template>
+  <fwb-button color="default" disabled>Default</fwb-button>
+  <fwb-button color="default" outline disabled>Default outline</fwb-button>
+  <fwb-button gradient="red" disabled>Red gradient</fwb-button>
+  <fwb-button gradient="red-yellow" disabled>Red to yellow gradient</fwb-button>
+  <fwb-button gradient="red-yellow" outline disabled>Red to yellow outline</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button color="default" disabled>Default</fwb-button>
+  <fwb-button color="default" outline disabled>Default outline</fwb-button>
+  <fwb-button gradient="red" disabled>Red gradient</fwb-button>
+  <fwb-button gradient="red-yellow" disabled>Red to yellow gradient</fwb-button>
+  <fwb-button gradient="red-yellow" outline disabled>Red to yellow outline</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Prop - href ​

You can add a link to a Button component. Additionally you can add tag prop to change button component to router-link

Google.com
vue
<template>
+  <fwb-button href="https://google.com" target="_blank">Google.com</fwb-button>
+  <fwb-button href="/pages/getting-started" tag="router-link">Quickstart</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button href="https://google.com" target="_blank">Google.com</fwb-button>
+  <fwb-button href="/pages/getting-started" tag="router-link">Quickstart</fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Slot - default ​

vue
<template>
+  <fwb-button gradient="purple-blue" square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="default" pill square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button gradient="green-blue" square>
+    Close something
+  </fwb-button>
+  <fwb-button color="default" outline pill square>
+    Open something
+    <template #suffix>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button gradient="purple-blue" square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="default" pill square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button gradient="green-blue" square>
+    Close something
+  </fwb-button>
+  <fwb-button color="default" outline pill square>
+    Open something
+    <template #suffix>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Slot - prefix ​

vue
<template>
+  <fwb-button>
+    <template #prefix>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
+      </svg>
+    </template>
+    Buy
+  </fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button>
+    <template #prefix>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
+      </svg>
+    </template>
+    Buy
+  </fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Slot - suffix ​

vue
<template>
+  <fwb-button>
+    Choose plan
+    <template #suffix>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
<template>
+  <fwb-button>
+    Choose plan
+    <template #suffix>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-button>
+</template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>

Button API ​

Props ​

NameTypeValuesDefault
colorStringdefault, alternative, dark, light, green, red, yellow, purple, pink, bluedefault
disabledBooleanfalse
gradientStringmonochrome:
blue, green, cyan, teal, lime, red, pink, purple
duotone:
purple-blue, cyan-blue, green-blue, purple-pink, pink-orange, teal-lime, red-yellow		null
hrefString''
loadingBooleanfalse
loading-positionStringprefix, suffixprefix
outlineBooleanfalse
pillBooleanfalse
shadowStringblue, green, cyan, teal, lime, red, pink, purplenull
sizeStringxs, sm, md, lg, xlmd
squareBooleanfalse
tagStringa

Released under the MIT License.

Copyright © 2023 Flowbite™

+ + + + \ No newline at end of file diff --git a/docs/.vitepress/dist/components/card.html b/docs/.vitepress/dist/components/card.html new file mode 100644 index 0000000..a603ea8 --- /dev/null +++ b/docs/.vitepress/dist/components/card.html @@ -0,0 +1,132 @@ + + + + + + Vue Card - Flowbite | Flowbite Vue 3 + + + + + + + + + + + + + + + +
Flowbite Vue 3

Appearance

Vue Card - Flowbite ​

Get started with a large variety of Tailwind CSS card examples for your web project ​

TIP

Original reference: https://flowbite.com/docs/components/card/

Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more.

Prop - default ​

Noteworthy technology acquisitions 2021

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

vue
<template>
+    <fwb-card href="#">
+      <div class="p-5">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Noteworthy technology acquisitions 2021
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+        </p>
+      </div>
+    </fwb-card>
+</template>
+
+<script setup>
+import { FwbCard } from 'flowbite-vue'
+</script>
<template>
+    <fwb-card href="#">
+      <div class="p-5">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Noteworthy technology acquisitions 2021
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+        </p>
+      </div>
+    </fwb-card>
+</template>
+
+<script setup>
+import { FwbCard } from 'flowbite-vue'
+</script>

Prop - image ​

Desk
Noteworthy technology acquisitions 2021

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

vue
<template>
+    <fwb-card
+      img-alt="Desk"
+      img-src="https://flowbite.com/docs/images/blog/image-1.jpg"
+      variant="image"
+    >
+      <div class="p-5">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Noteworthy technology acquisitions 2021
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+        </p>
+      </div>
+    </fwb-card>
+</template>
+
+<script setup>
+import { FwbCard } from 'flowbite-vue'
+</script>
<template>
+    <fwb-card
+      img-alt="Desk"
+      img-src="https://flowbite.com/docs/images/blog/image-1.jpg"
+      variant="image"
+    >
+      <div class="p-5">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Noteworthy technology acquisitions 2021
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+        </p>
+      </div>
+    </fwb-card>
+</template>
+
+<script setup>
+import { FwbCard } from 'flowbite-vue'
+</script>

Prop - horizontal ​

Desk
Noteworthy technology acquisitions 2021

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

vue
<template>
+    <fwb-card
+      img-alt="Desk"
+      img-src="https://flowbite.com/docs/images/blog/image-4.jpg"
+      variant="horizontal"
+    >
+      <div class="p-5">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Noteworthy technology acquisitions 2021
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+        </p>
+      </div>
+    </fwb-card>
+</template>
+
+<script setup>
+import { FwbCard } from 'flowbite-vue'
+</script>
<template>
+    <fwb-card
+      img-alt="Desk"
+      img-src="https://flowbite.com/docs/images/blog/image-4.jpg"
+      variant="horizontal"
+    >
+      <div class="p-5">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Noteworthy technology acquisitions 2021
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+        </p>
+      </div>
+    </fwb-card>
+</template>
+
+<script setup>
+import { FwbCard } from 'flowbite-vue'
+</script>

Released under the MIT License.

Copyright © 2023 Flowbite™

+ + + + \ No newline at end of file diff --git a/docs/.vitepress/dist/components/carousel.html b/docs/.vitepress/dist/components/carousel.html new file mode 100644 index 0000000..cc5d48b --- /dev/null +++ b/docs/.vitepress/dist/components/carousel.html @@ -0,0 +1,146 @@ + + + + + + Vue Carousel - Flowbite | Flowbite Vue 3 + + + + + + + + + + + + + + + +
Flowbite Vue 3

Appearance

Vue Carousel - Flowbite ​

Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options

Picture 1
Picture 2
Picture 3
vue
<template>
+  <fwb-carousel :pictures="pictures" />
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
<template>
+  <fwb-carousel :pictures="pictures" />
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
Picture 1
Picture 2
Picture 3
vue
<template>
+  <fwb-carousel no-controls :pictures="pictures" />
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
<template>
+  <fwb-carousel no-controls :pictures="pictures" />
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
Picture 1
Picture 2
Picture 3
vue
<template>
+  <fwb-carousel no-indicators :pictures="pictures" />
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
<template>
+  <fwb-carousel no-indicators :pictures="pictures" />
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
Picture 1
Picture 2
Picture 3
vue
<template>
+  <fwb-carousel :pictures="pictures" slide />
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
<template>
+  <fwb-carousel :pictures="pictures" slide />
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
Picture 1
Picture 2
Picture 3
vue
<template>
+  <fwb-carousel :pictures="pictures" slide :slide-interval="1000"/>
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
<template>
+  <fwb-carousel :pictures="pictures" slide :slide-interval="1000"/>
+</template>
+
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>

Props ​

NameTypeValuesDefault
animationBooleantrue, falsefalse
noControlsBooleantrue, falsefalse
noIndicatorsBooleantrue, falsefalse
picturesArray[{source: '', alt: ''}, ...][]
slideBooleantrue, falsefalse
slideIntervalNumber3000

Released under the MIT License.

Copyright © 2023 Flowbite™

+ + + + \ No newline at end of file diff --git a/docs/.vitepress/dist/components/modal.html b/docs/.vitepress/dist/components/modal.html new file mode 100644 index 0000000..cc800d7 --- /dev/null +++ b/docs/.vitepress/dist/components/modal.html @@ -0,0 +1,161 @@ + + + + + + Vue Modal - Flowbite | Flowbite Vue 3 + + + + + + + + + + + + + + + + + + +
Flowbite Vue 3

Appearance

Vue Modal - Flowbite ​

Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles ​

TIP

Original reference: https://flowbite.com/docs/components/modal/

The modal component can be used as an interactive dialog on top of the main content area of the website to show notifications and gather information using form elements from your website users.

Get started with multiple sizes, colors, and styles built with the utility classes from Tailwind CSS and the components from Flowbite.

Default modal ​

vue
<template>
+  <fwb-button @click="showModal">
+    Open modal
+  </fwb-button>
+
+  <fwb-modal v-if="isShowModal" @close="closeModal">
+    <template #header>
+      <div class="flex items-center text-lg">
+        Terms of Service
+      </div>
+    </template>
+    <template #body>
+      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+        With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
+      </p>
+      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+        The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
+      </p>
+    </template>
+    <template #footer>
+      <div class="flex justify-between">
+        <fwb-button @click="closeModal" color="alternative">
+          Decline
+        </fwb-button>
+        <fwb-button @click="closeModal" color="green">
+          I accept
+        </fwb-button>
+      </div>
+    </template>
+  </fwb-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbButton, FwbModal } from 'flowbite-vue'
+
+const isShowModal = ref(false)
+
+function closeModal () {
+  isShowModal.value = false
+}
+function showModal () {
+  isShowModal.value = true
+}
+</script>
<template>
+  <fwb-button @click="showModal">
+    Open modal
+  </fwb-button>
+
+  <fwb-modal v-if="isShowModal" @close="closeModal">
+    <template #header>
+      <div class="flex items-center text-lg">
+        Terms of Service
+      </div>
+    </template>
+    <template #body>
+      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+        With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
+      </p>
+      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+        The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
+      </p>
+    </template>
+    <template #footer>
+      <div class="flex justify-between">
+        <fwb-button @click="closeModal" color="alternative">
+          Decline
+        </fwb-button>
+        <fwb-button @click="closeModal" color="green">
+          I accept
+        </fwb-button>
+      </div>
+    </template>
+  </fwb-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbButton, FwbModal } from 'flowbite-vue'
+
+const isShowModal = ref(false)
+
+function closeModal () {
+  isShowModal.value = false
+}
+function showModal () {
+  isShowModal.value = true
+}
+</script>

Size ​

You can use four different modal sizing options starting from small to extra large, but keep in mind that the width of these modals will remain the same when browsing on smaller devices.

xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl

The default value is: 2xl

vue
<template>
+  <fwb-modal size="xs" />
+  <fwb-modal size="md" />
+  <fwb-modal size="xl" />
+  <fwb-modal size="5xl" />
+</template>
+
+<script setup>
+import { FwbModal } from 'flowbite-vue'
+</script>
<template>
+  <fwb-modal size="xs" />
+  <fwb-modal size="md" />
+  <fwb-modal size="xl" />
+  <fwb-modal size="5xl" />
+</template>
+
+<script setup>
+import { FwbModal } from 'flowbite-vue'
+</script>

Escapable ​

The escapable property is true by default to improve user experience and accessibility.

This means that you may close the modal by

  • Using the close button on the modal
  • Clicking outside of the modal
  • Pressing the escape key

In some situations, your user may be required to interact with the modal content. If this is the case, you can set the not-escapable property to true. The developer can then choose when they want to close the modal.

vue
<template>
+  <fwb-modal />
+  <fwb-modal not-escapable />
+</template>
+
+<script setup>
+import { FwbModal } from 'flowbite-vue'
+</script>
<template>
+  <fwb-modal />
+  <fwb-modal not-escapable />
+</template>
+
+<script setup>
+import { FwbModal } from 'flowbite-vue'
+</script>

Persistent ​

Clicking outside of the element or pressing esc key will not send close event.

vue
<template>
+  <fwb-modal persistent />
+</template>
+
+<script setup>
+import { FwbModal } from 'flowbite-vue'
+</script>
<template>
+  <fwb-modal persistent />
+</template>
+
+<script setup>
+import { FwbModal } from 'flowbite-vue'
+</script>

API ​

Props: ​

NameValuesDefault
sizemd,lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl2xl
notEscapabletrue, falsefalse
persistenttrue, falsetrue

Events: ​

NameType
closeClicked on the close button, pressed Esc, or clicked outside the modal content
click:outsideClicked outside the modal content

Released under the MIT License.

Copyright © 2023 Flowbite™

+ + + + \ No newline at end of file diff --git a/docs/.vitepress/dist/components/pagination.html b/docs/.vitepress/dist/components/pagination.html new file mode 100644 index 0000000..806b632 --- /dev/null +++ b/docs/.vitepress/dist/components/pagination.html @@ -0,0 +1,174 @@ + + + + + + Vue Pagination - Flowbite | Flowbite Vue 3 + + + + + + + + + + + + + + + +
Flowbite Vue 3

Appearance

Vue Pagination - Flowbite ​

Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes ​

The pagination component can be used to navigate across a series of content and data sets for various pages such as blog posts, products, and more. You can use multiple variants of this component with or without icons and even for paginating table data entries.

Default pagination ​

Use the following list of pagination items based on two sizes powered by Tailwind CSS utility classes to indicate a series of content for your website.

vue
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-items="100"></fwb-pagination>
+  <fwb-pagination v-model="currentPage" :total-items="100" large></fwb-pagination>
+</template>
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-items="100"></fwb-pagination>
+  <fwb-pagination v-model="currentPage" :total-items="100" large></fwb-pagination>
+</template>

Pagination with icons ​

The following pagination component example shows how you can use SVG icons instead of text to show the previous and next pages.

vue
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-pages="100" show-icons></fwb-pagination>
+</template>
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-pages="100" show-icons></fwb-pagination>
+</template>

Default with custom length ​

You can use your own pages count in the row by passing props: slice-length This prop means left side and right side pages row slicing. In the example it has value 4. So row length will be 4 + 1 + 4 pages - 9 pages.

vue
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-pages="100" :slice-length="4"></fwb-pagination>
+</template>
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-pages="100" :slice-length="4"></fwb-pagination>
+</template>

Previous and next ​

vue
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <div class="flex items-center justify-center text-center">
+    <fwb-pagination v-model="currentPage" :total-pages="10" :layout="'navigation'"></fwb-pagination>
+  </div>
+</template>
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <div class="flex items-center justify-center text-center">
+    <fwb-pagination v-model="currentPage" :total-pages="10" :layout="'navigation'"></fwb-pagination>
+  </div>
+</template>

Pagination with table layout ​

To use that layout you have to pass required props:

  • per-page: it's items count displayed on each page.
  • total-items: it's the total items count.

And there you don't need to use total-pages prop.

vue
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <div class="flex items-center justify-center text-center">
+    <fwb-pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" class="mb-2" />
+    <fwb-pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" large />
+  </div>
+</template>
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <div class="flex items-center justify-center text-center">
+    <fwb-pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" class="mb-2" />
+    <fwb-pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" large />
+  </div>
+</template>

Pagination with custom labels ​

vue
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-pages="100" previous-label="<<<" next-label=">>>"></fwb-pagination>
+</template>
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-pages="100" previous-label="<<<" next-label=">>>"></fwb-pagination>
+</template>

Slots example ​

Current page: 1
vue
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-items="100" :show-labels="false">
+    <template #prev-icon>⬅️</template>
+    <template #next-icon>➡️</template>
+    <template v-slot:page-button="{ page, setPage }">
+      <button
+          @click="setPage(page)"
+          class="flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-purple-200 border border-purple-300 hover:bg-purple-300 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+      >
+        {{ page }}
+      </button>
+    </template>
+  </fwb-pagination>
+  Current page: {{ currentPage }}
+</template>
<script setup>
+import { FwbPagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <fwb-pagination v-model="currentPage" :total-items="100" :show-labels="false">
+    <template #prev-icon>⬅️</template>
+    <template #next-icon>➡️</template>
+    <template v-slot:page-button="{ page, setPage }">
+      <button
+          @click="setPage(page)"
+          class="flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-purple-200 border border-purple-300 hover:bg-purple-300 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+      >
+        {{ page }}
+      </button>
+    </template>
+  </fwb-pagination>
+  Current page: {{ currentPage }}
+</template>

API ​

Props ​

NameValuesDefault
modelValuenumber1
totalPagesnumber10
perPagenumber10
totalItemsnumber10
layoutpagination, table, navigationpagination
showIconsbooleanfalse
sliceLengthnumber2
previousLabelstringPrevious
nextLabelstringNext
enableFirstAndLastButtonsbooleanfalse
showLabelsbooleantrue
largebooleanfalse

Events ​

NameDescription
update:model-valueCurrent page changed
page-changedCurrent page changed

Slots ​

NameDescription
startcontent before buttons
endcontent after buttons
first-buttonfirst button content
last-buttonlast button content
prev-buttonprevious button content
next-buttonnext button content
prev-iconprevious icon slot
next-iconnext icon slot
page-buttonpage button slot

Released under the MIT License.

Copyright © 2023 Flowbite™

+ + + + \ No newline at end of file diff --git a/docs/.vitepress/dist/index.html b/docs/.vitepress/dist/index.html new file mode 100644 index 0000000..8c2c71b --- /dev/null +++ b/docs/.vitepress/dist/index.html @@ -0,0 +1,25 @@ + + + + + + Flowbite Vue 3 | Flowbite + + + + + + + + + + + + + + +
Flowbite Vue 3

Appearance

Flowbite Vue 3

Vue component library based on Tailwind CSS

Get started with the most popular open-source library of interactive UI components built with the utility classes from Tailwind CSS

Get Started
View on GitHub
VitePress

Vue 3 components 🧱

Use hundreds of open-source components such as navbars, modals, and dropdowns based on Vue 3 and Tailwind CSS.

Based on Tailwind CSS 💨

The components are based on the utility classes from Tailwind CSS and you can use them to further customize the interface.

Powered by Flowbite 🚀

The Flowbite Vue library is based on the original Flowbite component library using vanilla JavaScript.

Open-source community ❤️

Thousands of developers actively use the components from Flowbite Vue to power their applications.

Released under the MIT License.

Copyright © 2023 Flowbite™

+ + + + \ No newline at end of file diff --git a/docs/.vitepress/dist/pages/getting-started.html b/docs/.vitepress/dist/pages/getting-started.html new file mode 100644 index 0000000..47a3c4a --- /dev/null +++ b/docs/.vitepress/dist/pages/getting-started.html @@ -0,0 +1,67 @@ + + + + + + Flowbite Vue - Quickstart | Flowbite Vue 3 + + + + + + + + + + + + + + +
Flowbite Vue 3

Appearance

Flowbite Vue - Quickstart ​

Get started with Flowbite by including it into your project using NPM

Flowbite is a library of components built on top of the utility-classes from Tailwind CSS and it also includes a JavaScript file that makes interactive elements works, such as modals, dropdowns, and more. Learn how to get started by following this quickstart guide.

Require via NPM ​

Make sure that you have Node.js and Tailwind CSS installed.

  1. Install flowbite and flowbite-vue as a dependency using NPM by running the following command:
bash
npm i flowbite flowbite-vue
npm i flowbite flowbite-vue
  1. Require Flowbite as a plugin inside the tailwind.config.js and add flowbite-vue dist folder to tailwind content:
javascript
module.exports = {
+  content: [
+    'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx,vue}',
+    'node_modules/flowbite/**/*.{js,jsx,ts,tsx}'
+  ],
+  plugins: [
+      require('flowbite/plugin')
+  ],
+  theme: {}
+}
module.exports = {
+  content: [
+    'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx,vue}',
+    'node_modules/flowbite/**/*.{js,jsx,ts,tsx}'
+  ],
+  plugins: [
+      require('flowbite/plugin')
+  ],
+  theme: {}
+}
  1. Now you can use flowbite-vue anywhere in your project and build awesome interfaces:
vue
<template>
+  <fwb-dropdown text="Click me" placement="top">
+    <fwb-list-group>
+      <fwb-list-group-item>Item #1</fwb-list-group-item>
+      <fwb-list-group-item>Item #2</fwb-list-group-item>
+      <fwb-list-group-item>Item #3</fwb-list-group-item>
+    </fwb-list-group>
+  </fwb-dropdown>
+</template>
+
+<script setup>
+import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
+</script>
<template>
+  <fwb-dropdown text="Click me" placement="top">
+    <fwb-list-group>
+      <fwb-list-group-item>Item #1</fwb-list-group-item>
+      <fwb-list-group-item>Item #2</fwb-list-group-item>
+      <fwb-list-group-item>Item #3</fwb-list-group-item>
+    </fwb-list-group>
+  </fwb-dropdown>
+</template>
+
+<script setup>
+import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
+</script>

Released under the MIT License.

Copyright © 2023 Flowbite™

+ + + + \ No newline at end of file