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

feat: toast component

Browse Source
This commit is contained in:
Alexandr
2022-07-26 19:13:30 +03:00
parent ba1a458f74
commit 4cca3e63cf
16 changed files with 382 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue
View File

@@ -12,7 +12,8 @@ import type {
ThemableChildrenApply,
} from '@/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/types'
import { toRefs } from 'vue'
import { simplifyTailwindClasses } from '../../../../../utils/simplifyTailwindClasses'
import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
import type { FlowbiteTheme } from '@/components/utils/FlowbiteThemable/types'
const props = defineProps({
apply: {
@@ -23,6 +24,10 @@ const props = defineProps({
type: String,
default: 'div',
},
theme: {
type: String as PropType<FlowbiteTheme>,
default: undefined,
},
})
const { classes } = useFlowbiteThemableChildClasses(toRefs(props))

4
src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/composables/useFlowbiteThemableChildClasses.ts
View File

@@ -4,6 +4,7 @@ import type {
ThemableChildrenApply,
} from '../types'
import { useFlowbiteThemable } from '../../../composables/useFlowbiteThemable'
import type { FlowbiteTheme } from '@/components/utils/FlowbiteThemable/types'
type UseFlowbiteThemableChildReturns = {
classes: Ref<string>
@@ -11,11 +12,12 @@ type UseFlowbiteThemableChildReturns = {
type UseFlowbiteThemableChildProps = {
apply: Ref<ThemableChildrenApply[]>
theme?: Ref<FlowbiteTheme | undefined>
}
export function useFlowbiteThemableChildClasses(props: UseFlowbiteThemableChildProps): UseFlowbiteThemableChildReturns {
const { textClasses, borderClasses, backgroundClasses, hoverClasses, disabledClasses, focusClasses, isActive } = useFlowbiteThemable()
const { textClasses, borderClasses, backgroundClasses, hoverClasses, disabledClasses, focusClasses, isActive } = useFlowbiteThemable(props.theme?.value)
const classes = computed(() => {
if(!isActive.value) return ''

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

@@ -63,41 +63,45 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
}
export function useFlowbiteThemable(): UseFlowbiteThemableReturns {
export function useFlowbiteThemable(_theme?: FlowbiteTheme): UseFlowbiteThemableReturns {
const theme = inject<Ref<FlowbiteTheme | null>>(FLOWBITE_THEMABLE_INJECTION_KEY, ref(null))
const isActive = computed(() => !!theme?.value)
const color = computed(() => theme?.value || undefined)
const themeName = computed(() => {
return _theme || theme.value
})
const backgroundClasses = computed(() => {
if(!theme.value) return ''
return flowbiteThemeClasses[theme.value].background
if(!themeName.value) return ''
return flowbiteThemeClasses[themeName.value].background
})
const disabledClasses = computed(() => {
if(!theme.value) return ''
return flowbiteThemeClasses[theme.value].disabled
if(!themeName.value) return ''
return flowbiteThemeClasses[themeName.value].disabled
})
const hoverClasses = computed(() => {
if(!theme.value) return ''
return flowbiteThemeClasses[theme.value].hover
if(!themeName.value) return ''
return flowbiteThemeClasses[themeName.value].hover
})
const textClasses = computed(() => {
if(!theme.value) return ''
return flowbiteThemeClasses[theme.value].text
if(!themeName.value) return ''
return flowbiteThemeClasses[themeName.value].text
})
const borderClasses = computed(() => {
if(!theme.value) return ''
return flowbiteThemeClasses[theme.value].border
if(!themeName.value) return ''
return flowbiteThemeClasses[themeName.value].border
})
const focusClasses = computed(() => {
if(!theme.value) return ''
return flowbiteThemeClasses[theme.value].focus
if(!themeName.value) return ''
return flowbiteThemeClasses[themeName.value].focus
})
return {