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

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

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]