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" />