-
+
@@ -23,7 +30,7 @@ const ms = ref(5000)
const toast = useToast()
const addUpdate = () => {
- const id = toast.add({
+ toast.add({
time: parseInt(ms.value) || 0,
text: 'A new software version is available for download.',
component: shallowRef(UpdateToast),
@@ -35,16 +42,14 @@ const addUpdate = () => {
}
const add = (type) => {
- if(type === 'update') return addUpdate()
+ if (type === 'update') return addUpdate()
toast.add({
type,
time: parseInt(ms.value) || 0,
text: `${type} alert! Hello world!`,
})
-
}
const remove = () => {
toast.pop()
}
-
diff --git a/docs/components/tooltip/examples/TooltipTriggerExample.vue b/docs/components/tooltip/examples/TooltipTriggerExample.vue
index 2d98aa7..8941f91 100644
--- a/docs/components/tooltip/examples/TooltipTriggerExample.vue
+++ b/docs/components/tooltip/examples/TooltipTriggerExample.vue
@@ -10,9 +10,7 @@
Tooltip hover
-
- Tooltip content
-
+ Tooltip content
@@ -24,9 +22,7 @@
Tooltip click
-
- Tooltip content
-
+ Tooltip content
@@ -36,14 +32,14 @@ import { Tooltip } from '../../../../src/index'
import type { PropType } from 'vue'
import type { TooltipPlacement } from '../../../../src/components/Tooltip/types'
-const props = defineProps({
-placement: {
- type: String as PropType
,
- default: 'top',
-},
-arrowColor: {
+defineProps({
+ placement: {
+ type: String as PropType,
+ default: 'top',
+ },
+ arrowColor: {
type: String,
default: '#0f172a',
-},
+ },
})
diff --git a/src/components/Accordion/composables/useAccordionContentClasses.ts b/src/components/Accordion/composables/useAccordionContentClasses.ts
index b11a4d0..cc38667 100644
--- a/src/components/Accordion/composables/useAccordionContentClasses.ts
+++ b/src/components/Accordion/composables/useAccordionContentClasses.ts
@@ -1,9 +1,9 @@
-import { computed } from 'vue'
+import { computed, type Ref } from 'vue'
import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
import classNames from 'classnames'
const baseContentClasses = 'p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900'
-export function useAccordionContentClasses(contentRef: any) {
+export function useAccordionContentClasses(contentRef: Ref) {
const accordionId = computed(() => contentRef.value.parentElement.parentElement.dataset.accordionId)
const panelId = computed(() => contentRef.value.parentElement.dataset.panelId)
const { accordionsStates } = useAccordionState()
diff --git a/src/components/Accordion/composables/useAccordionHeaderClasses.ts b/src/components/Accordion/composables/useAccordionHeaderClasses.ts
index 0fdd9dc..afa4922 100644
--- a/src/components/Accordion/composables/useAccordionHeaderClasses.ts
+++ b/src/components/Accordion/composables/useAccordionHeaderClasses.ts
@@ -1,11 +1,11 @@
-import { computed } from 'vue'
+import { computed, type Ref } from 'vue'
import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
import classNames from 'classnames'
const baseHeaderClasses =
'flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
const baseArrowClasses = 'w-6 h-6 shrink-0'
-export function useAccordionHeaderClasses(headerRef: any) {
+export function useAccordionHeaderClasses(headerRef: Ref) {
const accordionId = computed(() => headerRef.value.parentElement.parentElement.dataset.accordionId)
const panelId = computed(() => headerRef.value.parentElement.dataset.panelId)
const { accordionsStates } = useAccordionState()
diff --git a/src/components/Accordion/composables/useAccordionState.ts b/src/components/Accordion/composables/useAccordionState.ts
index 98fbaab..5fbe7f9 100644
--- a/src/components/Accordion/composables/useAccordionState.ts
+++ b/src/components/Accordion/composables/useAccordionState.ts
@@ -8,7 +8,7 @@ interface AccordionProps {
const accordionsStates = reactive({})
export function useAccordionState(
id?: string,
- options?: AccordionProps
+ options?: AccordionProps,
): {
accordionsStates: tState
} {
diff --git a/src/components/Button/composables/useButtonClasses.ts b/src/components/Button/composables/useButtonClasses.ts
index 99e5919..e5b67b1 100644
--- a/src/components/Button/composables/useButtonClasses.ts
+++ b/src/components/Button/composables/useButtonClasses.ts
@@ -1,6 +1,5 @@
import type { Ref } from 'vue'
import { computed, useSlots } from 'vue'
-import classNames from 'classnames'
import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from '../types'
import { twMerge } from 'tailwind-merge'
diff --git a/src/components/Sidebar/Sidebar.vue b/src/components/Sidebar/Sidebar.vue
index aedbbe1..9a780dc 100644
--- a/src/components/Sidebar/Sidebar.vue
+++ b/src/components/Sidebar/Sidebar.vue
@@ -4,45 +4,110 @@
-
-
+
Dashboard
-
-
+
Kanban
Pro
-
-
+
Inbox
3
-
-
+
Users
-
-
+
Products
-
-
+
Sign In
-
-
+
Sign Up
@@ -51,10 +116,7 @@
diff --git a/src/components/Toast/components/ToastProvider/ToastProvider.vue b/src/components/Toast/components/ToastProvider/ToastProvider.vue
index b2afbf2..2f7d21c 100644
--- a/src/components/Toast/components/ToastProvider/ToastProvider.vue
+++ b/src/components/Toast/components/ToastProvider/ToastProvider.vue
@@ -1,19 +1,14 @@
diff --git a/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts b/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
index 195f75c..b1f8fcd 100644
--- a/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
+++ b/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
@@ -4,114 +4,110 @@ import { computed, inject, ref } from 'vue'
import { FLOWBITE_THEMABLE_INJECTION_KEY } from '../injection/config'
type UseFlowbiteThemableReturns = {
- textClasses: Ref
- backgroundClasses: Ref
- hoverClasses: Ref
- disabledClasses: Ref
- borderClasses: Ref
- focusClasses: Ref
- isActive: Ref
- color: Ref
+ textClasses: Ref
+ backgroundClasses: Ref
+ hoverClasses: Ref
+ disabledClasses: Ref
+ borderClasses: Ref
+ focusClasses: Ref
+ isActive: Ref
+ color: Ref
}
-type FlowbiteThemeMap = { background: string, disabled: string, hover: string, text: string, border: string, focus: string }
+type FlowbiteThemeMap = { background: string; disabled: string; hover: string; text: string; border: string; focus: string }
type FlowbiteThemes = Record
-const flowbiteThemesColors: FlowbiteTheme[] = ['blue', 'green', 'red', 'pink', 'purple']
-
const flowbiteThemeClasses: FlowbiteThemes = {
- 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',
- },
-
+ 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',
+ },
}
export function useFlowbiteThemable(_theme?: FlowbiteTheme): UseFlowbiteThemableReturns {
+ const theme = inject>(FLOWBITE_THEMABLE_INJECTION_KEY, ref(null))
- const theme = inject>(FLOWBITE_THEMABLE_INJECTION_KEY, ref(null))
+ const isActive = computed(() => !!theme?.value)
+ const color = computed(() => theme?.value || undefined)
- const isActive = computed(() => !!theme?.value)
- const color = computed(() => theme?.value || undefined)
+ const themeName = computed(() => {
+ return _theme || theme.value
+ })
- const themeName = computed(() => {
- return _theme || theme.value
- })
+ const backgroundClasses = computed(() => {
+ if (!themeName.value) return ''
+ return flowbiteThemeClasses[themeName.value].background
+ })
- const backgroundClasses = computed(() => {
- if(!themeName.value) return ''
- return flowbiteThemeClasses[themeName.value].background
- })
+ const disabledClasses = computed(() => {
+ if (!themeName.value) return ''
+ return flowbiteThemeClasses[themeName.value].disabled
+ })
- const disabledClasses = computed(() => {
- if(!themeName.value) return ''
- return flowbiteThemeClasses[themeName.value].disabled
- })
+ const hoverClasses = computed(() => {
+ if (!themeName.value) return ''
+ return flowbiteThemeClasses[themeName.value].hover
+ })
- const hoverClasses = computed(() => {
- if(!themeName.value) return ''
- return flowbiteThemeClasses[themeName.value].hover
- })
+ const textClasses = computed(() => {
+ if (!themeName.value) return ''
+ return flowbiteThemeClasses[themeName.value].text
+ })
- const textClasses = computed(() => {
- if(!themeName.value) return ''
- return flowbiteThemeClasses[themeName.value].text
- })
+ const borderClasses = computed(() => {
+ if (!themeName.value) return ''
+ return flowbiteThemeClasses[themeName.value].border
+ })
- const borderClasses = computed(() => {
- if(!themeName.value) return ''
- return flowbiteThemeClasses[themeName.value].border
- })
+ const focusClasses = computed(() => {
+ if (!themeName.value) return ''
+ return flowbiteThemeClasses[themeName.value].focus
+ })
- const focusClasses = computed(() => {
- if(!themeName.value) return ''
- return flowbiteThemeClasses[themeName.value].focus
- })
-
- return {
- backgroundClasses,
- disabledClasses,
- hoverClasses,
- textClasses,
- borderClasses,
- focusClasses,
- isActive,
- color,
- }
+ return {
+ backgroundClasses,
+ disabledClasses,
+ hoverClasses,
+ textClasses,
+ borderClasses,
+ focusClasses,
+ isActive,
+ color,
+ }
}