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

src/components/utils/FlowbiteThemable/FlowbiteThemable.vue

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

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