feat: flowbite-themable for theming components with no color prop(not only)

src/components/Button/composables/useButtonClasses.ts

@@ -3,7 +3,6 @@ import { computed, useSlots } from 'vue'
 import classNames from 'classnames'
 import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from '../types'
 
-
 export type ButtonClassMap<T extends string> =  { hover: Record<T, string>, default: Record<T, string> }
 
 const buttonColorClasses: ButtonClassMap<ButtonVariant> = {

src/components/Spinner/composables/useSpinnerClasses.ts

@@ -1,4 +1,4 @@
-import type { SpinnerColor, SpinnerSize } from './Spinner.vue'
+import type { SpinnerColor, SpinnerSize } from '../types'
 import { computed } from 'vue'
 import type { Ref } from 'vue'
 import classNames from 'classnames'

src/components/Tabs/components/TabPane/TabPane.vue

@@ -6,7 +6,7 @@
   </li>
 </template>
 <script lang="ts" setup>
-import { inject, toRefs } from 'vue'
+import { inject, toRef } from 'vue'
 import { TAB_ACTIVATE_INJECTION_KEY, TAB_STYLE_INJECTION_KEY } from '../../injection/config'
 import type { TabsVariant } from '../../types'
 import { useTabClasses } from './composables/useTabClasses'
@@ -47,7 +47,8 @@ const tryActivateTab = () => {
 }
 
 const { tabClasses } = useTabClasses({
-  ...toRefs(props),
+  active: toRef(props,'active'),
+  disabled: toRef(props,'disabled'),
   variant,
 })
 </script>

src/components/Tabs/components/TabPane/composables/useTabClasses.ts

@@ -1,6 +1,8 @@
 import type { Ref } from 'vue'
 import { computed } from 'vue'
-import type { TabsVariant } from '../../Tabs.vue'
+import type { TabsVariant } from '../../../types'
+import { useFlowbiteThemable } from '../../../../utils/FlowbiteThemable/composables/useFlowbiteThemable'
+import { simplifyTailwindClasses } from '../../../../../utils/simplifyTailwindClasses'
 
 export type TabClassMap =  { disabled: string, default: string, active: string }
 
@@ -30,15 +32,28 @@ export function useTabClasses(props: UseTabClassesProps): {
     tabClasses: Ref<string>,
 } {
 
+    const theme = useFlowbiteThemable()
+
     const tabClasses = computed(() => {
+        const isActiveTheme = theme.isActive.value
+
         const tabClassType: keyof TabClassMap = props.active.value ? 'active' : props.disabled.value ? 'disabled' : 'default'
 
         if(props.variant === 'default')
-            return defaultTabClasses[tabClassType]
+            return simplifyTailwindClasses(
+                defaultTabClasses[tabClassType],
+                isActiveTheme && tabClassType === 'active' ? theme.textClasses.value : '',
+            )
         else if(props.variant === 'underline')
-            return underlineTabClasses[tabClassType]
+            return simplifyTailwindClasses(
+                underlineTabClasses[tabClassType],
+                isActiveTheme && tabClassType === 'active' ? [theme.borderClasses.value, theme.textClasses.value] : '',
+            )
         else if (props.variant === 'pills')
-            return pillsTabClasses[tabClassType]
+            return simplifyTailwindClasses(
+                pillsTabClasses[tabClassType],
+                isActiveTheme && tabClassType === 'active' ? [theme.backgroundClasses.value, 'text-white'] : '',
+            )
         return ''
     })
 

src/components/utils/FlowbiteThemable/FlowbiteThemable.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { FlowbiteTheme } from './types'
+import { provide, toRef } from 'vue'
+import { FLOWBITE_THEMABLE_INJECTION_KEY } from './injection/config'
+
+const props = defineProps({
+  theme: {
+    type: String as PropType<FlowbiteTheme>,
+    required: true,
+  },
+})
+
+provide(FLOWBITE_THEMABLE_INJECTION_KEY, toRef(props, 'theme'))
+</script>

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

@@ -0,0 +1,98 @@
+import type { FlowbiteThemablePayload, FlowbiteTheme } from '../types'
+import type { Ref } from 'vue'
+import { computed, inject } from 'vue'
+import { FLOWBITE_THEMABLE_INJECTION_KEY } from '../injection/config'
+
+type UseFlowbiteThemableReturns = {
+    textClasses: Ref<string>
+    backgroundClasses: Ref<string>
+    hoverClasses: Ref<string>
+    disabledClasses: Ref<string>
+    borderClasses: Ref<string>
+    isActive: Ref<boolean>
+}
+
+type FlowbiteThemeMap = { background: string, disabled: string, hover: string, text: string, border: string }
+type FlowbiteThemes<T extends string = string> = Record<T, FlowbiteThemeMap>
+
+const flowbiteThemesColors: FlowbiteTheme[] = ['blue', 'green', 'red', 'pink', 'purple']
+
+const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
+    blue: {
+        background: 'bg-blue-700 dark:bg-blue-600',
+        disabled: '',
+        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',
+    },
+    green: {
+        background: 'bg-green-700 dark:bg-green-600',
+        disabled: '',
+        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',
+    },
+    pink: {
+        background: 'bg-pink-700 dark:bg-pink-600',
+        disabled: '',
+        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',
+    },
+    purple: {
+        background: 'bg-purple-700 dark:bg-purple-600',
+        disabled: '',
+        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',
+    },
+    red: {
+        background: 'bg-red-700 dark:bg-red-600',
+        disabled: '',
+        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',
+    },
+
+}
+
+export function useFlowbiteThemable(): UseFlowbiteThemableReturns {
+
+    const theme = inject<Ref<FlowbiteTheme>>(FLOWBITE_THEMABLE_INJECTION_KEY)
+
+    const isActive = computed(() => !!theme)
+
+    const backgroundClasses = computed(() => {
+        if(!theme) return ''
+        return flowbiteThemeClasses[theme.value].background
+    })
+
+    const disabledClasses = computed(() => {
+        if(!theme) return ''
+        return flowbiteThemeClasses[theme.value].disabled
+    })
+
+    const hoverClasses = computed(() => {
+        if(!theme) return ''
+        return flowbiteThemeClasses[theme.value].hover
+    })
+
+    const textClasses = computed(() => {
+        if(!theme) return ''
+        return flowbiteThemeClasses[theme.value].text
+    })
+
+    const borderClasses = computed(() => {
+        if(!theme) return ''
+        return flowbiteThemeClasses[theme.value].border
+    })
+
+    return {
+        backgroundClasses,
+        disabledClasses,
+        hoverClasses,
+        textClasses,
+        borderClasses,
+        isActive,
+    }
+}

src/components/utils/FlowbiteThemable/injection/config.ts

@@ -0,0 +1 @@
+export const FLOWBITE_THEMABLE_INJECTION_KEY = 'flowbite-themable-injection-key'

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

@@ -0,0 +1,5 @@
+export type FlowbiteTheme = 'blue' | 'green' | 'red' | 'pink' | 'purple'
+
+export type FlowbiteThemablePayload = {
+    theme: FlowbiteTheme
+}