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

lint: Linter fixes

Browse Source
This commit is contained in:
Ilya Artamonov
2023-09-19 20:11:30 +03:00
parent 0a792fc0d5
commit faa35a98a4
12 changed files with 274 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/components/button/examples/ButtonLoadingExample.vue
View File

@@ -25,8 +25,8 @@
</div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import {Button} from '../../../../src/index'
import { ref } from 'vue'
import { Button } from '../../../../src/index'
const loading = ref(false)
</script>

28
docs/components/dropdown/examples/DropdownListGroupExample.vue
View File

@@ -4,25 +4,43 @@
<list-group>
<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 fill-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" clip-rule="evenodd"></path></svg>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
fill-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"
clip-rule="evenodd"
></path>
</svg>
</template>
Profile
</list-group-item>
<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"></path></svg>
<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"
></path>
</svg>
</template>
Settings
</list-group-item>
<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 fill-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" clip-rule="evenodd"></path></svg>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-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" clip-rule="evenodd"></path>
</svg>
</template>
Messages
</list-group-item>
<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 fill-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" clip-rule="evenodd"></path></svg>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
fill-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"
clip-rule="evenodd"
></path>
</svg>
</template>
Download
</list-group-item>
@@ -31,5 +49,5 @@
</div>
</template>
<script setup>
import { Dropdown, Button, ListGroup, ListGroupItem } from '../../../../src/index'
import { Dropdown, ListGroup, ListGroupItem } from '../../../../src/index'
</script>

28
docs/components/dropdown/examples/DropdownTriggerExample.vue
View File

@@ -7,25 +7,43 @@
<list-group>
<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 fill-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" clip-rule="evenodd"></path></svg>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
fill-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"
clip-rule="evenodd"
></path>
</svg>
</template>
Profile
</list-group-item>
<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"></path></svg>
<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"
></path>
</svg>
</template>
Settings
</list-group-item>
<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 fill-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" clip-rule="evenodd"></path></svg>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-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" clip-rule="evenodd"></path>
</svg>
</template>
Messages
</list-group-item>
<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 fill-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" clip-rule="evenodd"></path></svg>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
fill-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"
clip-rule="evenodd"
></path>
</svg>
</template>
Download
</list-group-item>
@@ -34,5 +52,5 @@
</div>
</template>
<script setup>
import { Dropdown, Button, ListGroup, ListGroupItem } from '../../../../src/index'
import { Dropdown, ListGroup, ListGroupItem } from '../../../../src/index'
</script>

15
docs/components/toastProvider/examples/ToastProviderExampleChild.vue
View File

@@ -1,7 +1,14 @@
<template>
<div class="flex flex-col gap-2">
<label for="ms" class="block text-sm font-medium text-gray-900 dark:text-gray-400">Duration(ms)</label>
<input v-model.number="ms" type="number" id="ms" 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>
<input
v-model.number="ms"
type="number"
id="ms"
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
/>
<div class="flex gap-2">
<Button @click="() => add('success')" color="green">success</Button>
<Button @click="() => add('warning')" color="yellow">warning</Button>
@@ -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()
}
</script>

22
docs/components/tooltip/examples/TooltipTriggerExample.vue
View File

@@ -10,9 +10,7 @@
Tooltip hover
</button>
</template>
<template #content>
Tooltip content
</template>
<template #content> Tooltip content </template>
</Tooltip>
<!-- Show tooltip on click -->
<Tooltip trigger="click">
@@ -24,9 +22,7 @@
Tooltip click
</button>
</template>
<template #content>
Tooltip content
</template>
<template #content> Tooltip content </template>
</Tooltip>
</div>
</template>
@@ -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<TooltipPlacement>,
default: 'top',
},
arrowColor: {
defineProps({
placement: {
type: String as PropType<TooltipPlacement>,
default: 'top',
},
arrowColor: {
type: String,
default: '#0f172a',
},
},
})
</script>

4
src/components/Accordion/composables/useAccordionContentClasses.ts
View File

@@ -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()

4
src/components/Accordion/composables/useAccordionHeaderClasses.ts
View File

@@ -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()

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

@@ -8,7 +8,7 @@ interface AccordionProps {
const accordionsStates = reactive<tState>({})
export function useAccordionState(
id?: string,
options?: AccordionProps
options?: AccordionProps,
): {
accordionsStates: tState
} {

1
src/components/Button/composables/useButtonClasses.ts
View File

@@ -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'

85
src/components/Sidebar/Sidebar.vue
View File

@@ -4,45 +4,110 @@
<ul class="space-y-2">
<li>
<a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
<svg class="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
<svg
class="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
<path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
</svg>
<span class="ml-3">Dashboard</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
<svg class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
<svg
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">Kanban</span>
<span class="inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
<svg class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path><path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path></svg>
<svg
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path>
<path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">Inbox</span>
<span class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200">3</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
<svg class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
<svg
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">Users</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
<svg class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd"></path></svg>
<svg
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z"
clip-rule="evenodd"
></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">Products</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
<svg class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clip-rule="evenodd"></path></svg>
<svg
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z"
clip-rule="evenodd"
></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">Sign In</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
<svg class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5zm-1 9v-1h5v2H5a1 1 0 01-1-1zm7 1h4a1 1 0 001-1v-1h-5v2zm0-4h5V8h-5v2zM9 8H4v2h5V8z" clip-rule="evenodd"></path></svg>
<svg
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5zm-1 9v-1h5v2H5a1 1 0 01-1-1zm7 1h4a1 1 0 001-1v-1h-5v2zm0-4h5V8h-5v2zM9 8H4v2h5V8z"
clip-rule="evenodd"
></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">Sign Up</span>
</a>
</li>
@@ -51,10 +116,7 @@
</aside>
</template>
<script lang="ts" setup>
import { computed, toRefs } from 'vue'
import type { PropType } from 'vue'
const props = defineProps({
defineProps({
children: {
type: Array,
default() {
@@ -70,5 +132,4 @@ const props = defineProps({
default: false,
},
})
</script>

79
src/components/Toast/components/ToastProvider/ToastProvider.vue
View File

@@ -1,19 +1,14 @@
<script lang="ts">
import { defineComponent, h, provide, ref, TransitionGroup } from 'vue'
import { FLOWBITE_TOAST_INJECTION_KEY } from '@/components/Toast/components/ToastProvider/injection/config'
import type {
ToastItem,
ToastItemWithId,
ToastTransition,
UseToastInjection,
} from '@/components/Toast/components/ToastProvider/types'
import type { ToastItem, ToastItemWithId, ToastTransition, UseToastInjection } from '@/components/Toast/components/ToastProvider/types'
import { Toast } from '@/index'
import { useTimeoutFn } from '@vueuse/core'
import type { PropType } from 'vue'
export default defineComponent({
components: {
Toast: Toast as any,
Toast,
},
props: {
transition: {
@@ -29,13 +24,12 @@ export default defineComponent({
}
const addToast = (toast: ToastItem) => {
const id = parseInt(((new Date()).getTime() * Math.random()).toString()).toString()
const id = parseInt((new Date().getTime() * Math.random()).toString()).toString()
toasts.value.push({
id,
...toast,
})
if (toast.time > 0)
runRemoveTimeout(id, toast.time)
if (toast.time > 0) runRemoveTimeout(id, toast.time)
return id
}
@@ -47,8 +41,8 @@ export default defineComponent({
}
const removeToast = (id: string) => {
const index = toasts.value.findIndex(_ => _.id === id)
if(index >= 0) toasts.value.splice(index, 1)
const index = toasts.value.findIndex((_) => _.id === id)
if (index >= 0) toasts.value.splice(index, 1)
return index >= 0
}
@@ -64,41 +58,48 @@ export default defineComponent({
}
},
render() {
const {
$props,
$slots,
toasts,
removeToast,
} = this
const { $props, $slots, toasts, removeToast } = this
return h('div', {}, [
$slots.default ? $slots.default() : null, // rendering default slot
h(TransitionGroup, {
name: $props.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: () => toasts.map(_toast => // rendering every toast
h(
TransitionGroup,
{
name: $props.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: () =>
toasts.map(
(
_toast, // rendering every toast
) =>
_toast.component
? h(_toast.component, {
key: _toast.id,
onClose: () => removeToast(_toast.id),
...(_toast.componentProps ? _toast.componentProps : {}),
}, () => _toast.text)
: h(Toast as any, {
closable: true,
type: _toast.type,
key: _toast.id,
onClose: () => removeToast(_toast.id),
}, () => _toast.text),
? h(
_toast.component,
{
key: _toast.id,
onClose: () => removeToast(_toast.id),
...(_toast.componentProps ? _toast.componentProps : {}),
},
() => _toast.text,
)
: h(
Toast,
{
closable: true,
type: _toast.type,
key: _toast.id,
onClose: () => removeToast(_toast.id),
},
() => _toast.text,
),
),
},
},
),
])
},
})
</script>
<style lang="scss" scoped src="./ToastProvider.css"></style>

182
src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
View File

@@ -4,114 +4,110 @@ import { computed, inject, ref } from 'vue'
import { FLOWBITE_THEMABLE_INJECTION_KEY } from '../injection/config'
type UseFlowbiteThemableReturns = {
textClasses: Ref<string>
backgroundClasses: Ref<string>
hoverClasses: Ref<string>
disabledClasses: Ref<string>
borderClasses: Ref<string>
focusClasses: Ref<string>
isActive: Ref<boolean>
color: Ref<FlowbiteTheme | undefined>
textClasses: Ref<string>
backgroundClasses: Ref<string>
hoverClasses: Ref<string>
disabledClasses: Ref<string>
borderClasses: Ref<string>
focusClasses: Ref<string>
isActive: Ref<boolean>
color: Ref<FlowbiteTheme | undefined>
}
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<T extends string = string> = Record<T, FlowbiteThemeMap>
const flowbiteThemesColors: FlowbiteTheme[] = ['blue', 'green', 'red', 'pink', 'purple']
const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
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<Ref<FlowbiteTheme | null>>(FLOWBITE_THEMABLE_INJECTION_KEY, ref(null))
const theme = inject<Ref<FlowbiteTheme | null>>(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,
}
}