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

src/components/Button/Button.vue

@@ -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>
-
+  </flowbite-themable-children>
-  </button>
 </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>,

src/components/Button/composables/useButtonClasses.ts

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

src/components/Toast/Toast.vue

@@ -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">
+  <flowbite-themable :theme="'blue'">
-    <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">
+    <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">
-      <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 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>
+  </flowbite-themable>
-    <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>
 </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: {
+  icon: {
-    type: Number,
+    type: String as PropType<ToastPresetIcon | ''>,
-    default: 300,
+    default: '',
   },
 })
 

src/components/Toast/composables/useToastClasses.ts

@@ -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,
+    }
+}

src/components/Toast/types.ts

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

src/components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/FlowbiteThemableChildren.vue

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

src/components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/composables/useFlowbiteThemableChildrenClasses.ts

@@ -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,
+    }
+}

src/components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/types.ts

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

src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts

@@ -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,12 +95,18 @@ 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,
     }