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

docs/.vitepress/config.ts

@@ -11,7 +11,15 @@ function buildSidebar() {
       items: [
         ...getComponents(),
       ],
-  }]
+    },
+    {
+      text: 'Utils',
+      collapsible: true,
+      items: [
+        ...getUtils(),
+      ],
+    },
+  ]
 }
 
 function getComponents() {
@@ -24,6 +32,12 @@ function getComponents() {
   ]
 }
 
+function getUtils() {
+  return [
+    { text: 'Flowbite Themable', link: '/guide/flowbiteThemable/flowbiteThemable.md' },
+  ]
+}
+
 /**
  * This can be used as an example
  * https://github.com/vuejs/vitepress/blob/master/docs/.vitepress/config.js

docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsDefaultExample.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="vp-raw">
+    <flowbite-themable :theme="theme">
+      <tabs v-model="activeTab" class="p-5">
+        <tab name="first" title="First">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
+        </tab>
+        <tab name="second" title="Second">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
+        </tab>
+        <tab name="third" title="Third">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
+        </tab>
+        <tab name="fourth" title="Fourth" :disabled="true">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem.
+        </tab>
+      </tabs>
+    </flowbite-themable>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import { ref } from 'vue'
+import { Tabs, Tab, FlowbiteThemable } from '../../../../../src/index'
+import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
+const activeTab = ref('first')
+
+defineProps({
+  theme: {
+    type: String as PropType<FlowbiteTheme>,
+    default: 'blue',
+  },
+})
+</script>

docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsPillsExample.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="vp-raw">
+    <flowbite-themable :theme="theme">
+      <tabs variant="pills" v-model="activeTab" class="p-5">
+        <tab name="first" title="First">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
+        </tab>
+        <tab name="second" title="Second">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
+        </tab>
+        <tab name="third" title="Third">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
+        </tab>
+        <tab name="fourth" title="Fourth" :disabled="true">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem.
+        </tab>
+      </tabs>
+    </flowbite-themable>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import { ref } from 'vue'
+import { Tabs, Tab, FlowbiteThemable } from '../../../../../src/index'
+import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
+const activeTab = ref('first')
+
+defineProps({
+  theme: {
+    type: String as PropType<FlowbiteTheme>,
+    default: 'blue',
+  },
+})
+</script>

docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsUnderlineExample.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="vp-raw">
+    <flowbite-themable :theme="theme">
+      <tabs variant="underline" v-model="activeTab" class="p-5">
+        <tab name="first" title="First">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
+        </tab>
+        <tab name="second" title="Second">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
+        </tab>
+        <tab name="third" title="Third">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
+        </tab>
+        <tab name="fourth" title="Fourth" :disabled="true">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem.
+        </tab>
+      </tabs>
+    </flowbite-themable>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import { ref } from 'vue'
+import { Tabs, Tab, FlowbiteThemable } from '../../../../../src/index'
+import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
+const activeTab = ref('first')
+
+defineProps({
+  theme: {
+    type: String as PropType<FlowbiteTheme>,
+    default: 'blue',
+  },
+})
+</script>

docs/guide/flowbiteThemable/flowbiteThemable.md

@@ -0,0 +1,62 @@
+<script setup>
+import FlowbiteThemableTabsPillsExample from './examples/tabs/FlowbiteThemableTabsPillsExample.vue';
+import FlowbiteThemableTabsUnderlineExample from './examples/tabs/FlowbiteThemableTabsUnderlineExample.vue';
+import FlowbiteThemableTabsDefaultExample from './examples/tabs/FlowbiteThemableTabsDefaultExample.vue';
+</script>
+
+# Flowbite Themable
+
+You can use this wrapper for styling components with no color prop(like tabs, dropdown etc.)
+
+## Tabs
+
+```vue
+<script setup>
+import {Tabs, Tab, FlowbiteThemable} from 'flowbite-vue'
+const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
+const variant = 'default' // see tabs docs
+</script>
+<template>
+  <flowbite-themable :theme="theme" theme="blue">
+      <tabs :variant="variant" class="p-5">
+        ...
+      </tabs>
+  </flowbite-themable>
+</template>
+```
+
+### **variant: pills**
+---
+<FlowbiteThemableTabsPillsExample theme="blue" />
+
+<FlowbiteThemableTabsPillsExample theme="green" />
+
+<FlowbiteThemableTabsPillsExample theme="pink" />
+
+<FlowbiteThemableTabsPillsExample theme="purple" />
+
+<FlowbiteThemableTabsPillsExample theme="red" />
+
+### **variant: underline**
+---
+<FlowbiteThemableTabsUnderlineExample theme="blue" />
+
+<FlowbiteThemableTabsUnderlineExample theme="green" />
+
+<FlowbiteThemableTabsUnderlineExample theme="pink" />
+
+<FlowbiteThemableTabsUnderlineExample theme="purple" />
+
+<FlowbiteThemableTabsUnderlineExample theme="red" />
+
+### **variant: default**
+---
+<FlowbiteThemableTabsDefaultExample theme="blue" />
+
+<FlowbiteThemableTabsDefaultExample theme="green" />
+
+<FlowbiteThemableTabsDefaultExample theme="pink" />
+
+<FlowbiteThemableTabsDefaultExample theme="purple" />
+
+<FlowbiteThemableTabsDefaultExample theme="red" />

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

src/index.ts

@@ -4,3 +4,4 @@ export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.vue
 export { default as Alert } from './components/Alert/Alert.vue'
 export { default as Tabs } from './components/Tabs/Tabs.vue'
 export { default as Tab } from './components/Tabs/components/Tab/Tab.vue'
+export { default as FlowbiteThemable } from './components/utils/FlowbiteThemable/FlowbiteThemable.vue'

src/utils/simplifyTailwindClasses.ts

@@ -0,0 +1,52 @@
+// function to simplify tailwind classes, can be upgraded with RegExp and by minimizing of using array methods
+// example:
+// simplifyClasses('dark:background-red-600 background-red text-black', 'dark:background-blue')
+
+export type TailwindClassMatcherMap = Record<string, (c: string) => string>
+
+const classTypeMatchers: TailwindClassMatcherMap = {
+    border: (_class: string): string => {
+      return _class.substring(0, _class.lastIndexOf('-')) // for splitting border-b-2 and border-red
+    },
+}
+
+const getTypeFromClass = (_class: string, matchers: TailwindClassMatcherMap = classTypeMatchers) => {
+    const classesToMatch = Object.keys(matchers)
+    const matchClass = classesToMatch.find(_matchClass => _class.includes(_matchClass)) // TODO: maybe need to filter instead of find
+    if(!matchClass) return _class.substring(0, _class.indexOf('-'))
+
+    return matchers[matchClass as keyof typeof matchers](_class)
+}
+
+export function simplifyTailwindClasses(...classes: (string | string[])[]): string {
+    return classes.reduce((acc: { types: string[], classes: string[] }, value: string | string[]) => {
+        const currentClasses = Array.isArray(value)
+            ? Array.from(value).map(_ => _.split(' ')).flat() // to support args like ['text-white background-red', 'flex'] etc.
+            : value.split(' ')
+        const currentTypes = currentClasses.map(_class => getTypeFromClass(_class))
+
+        const typesToAdd = currentTypes.filter(_ => !acc.types.includes(_))
+        const typesToReplace = currentTypes.filter(_ => acc.types.includes(_))
+        const newTypes = [...typesToReplace, ...typesToAdd]
+
+        const types = [...new Set([...acc.types, ...newTypes])]
+        const classes = types.map(type => {
+            if(newTypes.includes(type)) {
+                const classIndex = currentTypes.indexOf(type)
+                if(classIndex >= 0)
+                    return currentClasses[classIndex] || ''
+            }
+            const classIndex = acc.types.indexOf(type)
+            if(classIndex >= 0)
+                return acc.classes[classIndex] || ''
+            return ''
+        }).filter(_ => !!_)
+
+        return {
+            types,
+            classes,
+        }
+    }, { types: [], classes: [] }).classes.join(' ')
+}
+
+// simplifyClasses('dark:background-red-600 background-red text-400-black', 'dark:background-blue', 'text-600-white', 'dark:background-red-600')