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

refactor: add flowbite-themable-children for theming elements and support theme

Browse Source
This commit is contained in:
Alexandr
2022-07-25 15:34:26 +03:00
parent 6117a0ffaf
commit 8df67faaaa
10 changed files with 137 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Button/Button.vue
View File

@@ -1,6 +1,5 @@
<template>
<button type="button" :class="wrapperClasses" :disabled="disabled">
<flowbite-themable-children tag="button" :apply="['background', 'hover', 'focus']" :class="wrapperClasses" :disabled="disabled">
<div v-if="!isOutlineGradient && ($slots.prefix || loadingPrefix)" class="mr-2"> <!--automatically add mr class if slot provided or loading -->
<spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingPrefix" />
<slot name="prefix" v-else />
@@ -24,8 +23,7 @@
<spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingSuffix" />
<slot name="suffix" v-else />
</div>
</button>
</flowbite-themable-children>
</template>
<script lang="ts" setup>
import { computed, toRefs } from 'vue'
@@ -33,8 +31,8 @@ import type { PropType } from 'vue'
import Spinner from '../Spinner/Spinner.vue'
import { useButtonClasses } from './composables/useButtonClasses'
import { useButtonSpinner } from './composables/useButtonSpinner'
import FlowbiteThemableChildren from '../../components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/FlowbiteThemableChildren.vue'
import type { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './types'
const props = defineProps({
color: {
type: String as PropType<ButtonVariant>,

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

@@ -168,8 +168,6 @@ const alternativeColors = ['alternative', 'light']
export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses: Ref<string>, spanClasses: Ref<string> } {
const slots = useSlots()
const theme = useFlowbiteThemable()
const sizeClasses = computed(() => {
if (props.square.value) return buttonSquareSizeClasses[props.size.value]
return buttonSizeClasses[props.size.value]
@@ -180,7 +178,6 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
const isColor = !!props.color.value
const isOutline = props.outline.value
const isActiveTheme = theme.isActive.value
let hoverClass = ''
let backgroundClass = ''
@@ -205,7 +202,7 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
} else if (isColor && isOutline) { // COLOR AND OUTLINE
if (!alternativeColors.includes(props.color.value)) {
const color = isActiveTheme ? theme.color.value : props.color.value
const color = props.color.value
backgroundClass = buttonOutlineColorClasses.default[color as unknown as keyof typeof buttonOutlineColorClasses.default]
@@ -217,7 +214,7 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
} else { // JUST COLOR
const color = isActiveTheme ? theme.color.value : props.color.value
const color = props.color.value
backgroundClass = buttonColorClasses.default[color as unknown as keyof typeof buttonColorClasses.default]

30
src/components/Toast/Toast.vue
View File

@@ -1,23 +1,27 @@
<template>
<div id="toast-default" class="flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
<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="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"></path></svg>
<flowbite-themable :theme="'blue'">
<div id="toast-default" class="flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
<flowbite-themable-children v-if="icon" class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg text-white dark:text-white" :apply="['background', 'text']">
<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="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"></path></svg>
</flowbite-themable-children>
<div class="ml-3 text-sm font-normal">Set yourself free.</div>
<button type="button" class="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" data-dismiss-target="#toast-default" aria-label="Close">
<span class="sr-only">Close</span>
<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="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"></path></svg>
</button>
</div>
<div class="ml-3 text-sm font-normal">Set yourself free.</div>
<button type="button" class="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" data-dismiss-target="#toast-default" aria-label="Close">
<span class="sr-only">Close</span>
<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="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"></path></svg>
</button>
</div>
</flowbite-themable>
</template>
<script lang="ts" setup>
import { computed, toRefs } from 'vue'
import FlowbiteThemableChildren from '../../components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/FlowbiteThemableChildren.vue'
import type { ToastPresetIcon } from '@/components/Toast/types'
import type { PropType } from 'vue'
import { FlowbiteThemable } from '../../index'
const props = defineProps({
duration: {
type: Number,
default: 300,
icon: {
type: String as PropType<ToastPresetIcon | ''>,
default: '',
},
})

34
src/components/Toast/composables/useToastClasses.ts Normal file
View File

@@ -0,0 +1,34 @@
import type { Ref } from 'vue'
import { computed } from 'vue'
import type {
ThemableChildrenApply,
} from '@/components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/types'
import { useFlowbiteThemable } from '@/components/utils/FlowbiteThemable/composables/useFlowbiteThemable'
type UseThemableChildrenReturns = {
classes: Ref<string>
}
type UseThemableChildrenProps = {
apply: Ref<ThemableChildrenApply[]>
}
export function useFlowbiteThemableChildrenClasses(props: UseThemableChildrenProps): UseThemableChildrenReturns {
const { textClasses, borderClasses, backgroundClasses, hoverClasses, disabledClasses, isActive } = useFlowbiteThemable()
const classes = computed(() => {
if(!isActive.value) return ''
const _classes = []
if(props.apply.value.includes('text')) _classes.push(textClasses)
if(props.apply.value.includes('border')) _classes.push(borderClasses)
if(props.apply.value.includes('background')) _classes.push(backgroundClasses)
if(props.apply.value.includes('hover')) _classes.push(hoverClasses)
if(props.apply.value.includes('disabled')) _classes.push(disabledClasses)
return _classes.join(' ')
})
return {
classes,
}
}

1
src/components/Toast/types.ts Normal file
View File

@@ -0,0 +1 @@
export type ToastPresetIcon = 'success' | 'warning' | 'danger'

2
src/components/utils/FlowbiteThemable/FlowbiteThemable.vue
View File

@@ -15,4 +15,4 @@ const props = defineProps({
})
provide(FLOWBITE_THEMABLE_INJECTION_KEY, toRef(props, 'theme'))
</script>
</script>

29
src/components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/FlowbiteThemableChildren.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<component :is="tag" :class="simplifyTailwindClasses($attrs.class || [], classes)">
<slot />
</component>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import {
useFlowbiteThemableChildrenClasses,
} from './composables/useFlowbiteThemableChildrenClasses'
import type {
ThemableChildrenApply,
} from '@/components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/types'
import { toRefs } from 'vue'
import { simplifyTailwindClasses } from '../../../../../utils/simplifyTailwindClasses'
const props = defineProps({
apply: {
type: Array as PropType<ThemableChildrenApply[]>,
required: true,
},
tag: {
type: String,
default: 'div',
},
})
const { classes } = useFlowbiteThemableChildrenClasses(toRefs(props))
</script>

35
src/components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/composables/useFlowbiteThemableChildrenClasses.ts Normal file
View File

@@ -0,0 +1,35 @@
import type { Ref } from 'vue'
import { computed } from 'vue'
import type {
ThemableChildrenApply,
} from '../types'
import { useFlowbiteThemable } from '../../../composables/useFlowbiteThemable'
type UseThemableChildrenReturns = {
classes: Ref<string>
}
type UseThemableChildrenProps = {
apply: Ref<ThemableChildrenApply[]>
}
export function useFlowbiteThemableChildrenClasses(props: UseThemableChildrenProps): UseThemableChildrenReturns {
const { textClasses, borderClasses, backgroundClasses, hoverClasses, disabledClasses, focusClasses, isActive } = useFlowbiteThemable()
const classes = computed(() => {
if(!isActive.value) return ''
const _classes = []
if(props.apply.value.includes('text')) _classes.push(textClasses.value)
if(props.apply.value.includes('border')) _classes.push(borderClasses.value)
if(props.apply.value.includes('background')) _classes.push(backgroundClasses.value)
if(props.apply.value.includes('hover')) _classes.push(hoverClasses.value)
if(props.apply.value.includes('disabled')) _classes.push(disabledClasses.value)
if(props.apply.value.includes('focus')) _classes.push(focusClasses.value)
return _classes.join(' ')
})
return {
classes,
}
}

1
src/components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/types.ts Normal file
View File

@@ -0,0 +1 @@
export type ThemableChildrenApply = 'background' | 'disabled' | 'hover' | 'text' | 'border' | 'focus'

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

@@ -9,11 +9,12 @@ type UseFlowbiteThemableReturns = {
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 }
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']
@@ -25,6 +26,7 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
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',
@@ -32,6 +34,7 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
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',
@@ -39,6 +42,7 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
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',
@@ -46,6 +50,7 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
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',
@@ -53,6 +58,7 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
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',
},
}
@@ -89,13 +95,19 @@ export function useFlowbiteThemable(): UseFlowbiteThemableReturns {
return flowbiteThemeClasses[theme.value].border
})
const focusClasses = computed(() => {
if(!theme) return ''
return flowbiteThemeClasses[theme.value].focus
})
return {
backgroundClasses,
disabledClasses,
hoverClasses,
textClasses,
borderClasses,
focusClasses,
isActive,
color,
}
}
}