feat: initial dropdown and flowbite themable examples

docs/guide/button/button.md

@@ -22,7 +22,7 @@ reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/
 ## Prop - color
 
 ```typescript
-type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple'
+type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
 defineProps({
     color: {
         type: String as PropType<ButtonVariant>,

docs/guide/button/examples/ButtonColorExample.vue

@@ -8,6 +8,7 @@
     <Button color="red">Red</Button>
     <Button color="yellow">Yellow</Button>
     <Button color="purple">Purple</Button>
+    <Button color="pink">Pink</Button>
   </div>
 </template>
 <script setup>

docs/guide/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
+      <flowbite-themable :key="theme" v-for="theme in themes" :theme="theme">
+        <Button>
+          {{ theme }}
+        </Button>
+      </flowbite-themable>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import { FlowbiteThemable, Button } from '../../../../../src/index'
+import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
+
+const themes: FlowbiteTheme[] = ['blue', 'green', 'red', 'pink', 'purple']
+
+defineProps({
+  theme: {
+    type: String as PropType<FlowbiteTheme>,
+    default: 'blue',
+  },
+})
+</script>

docs/guide/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
+      <flowbite-themable :theme="theme">
+        <dropdown text="Text 1">
+          Content 1
+        </dropdown>
+        <dropdown text="Text 2">
+          Content 2
+        </dropdown>
+        <dropdown text="Text 3">
+          Content 3
+        </dropdown>
+      </flowbite-themable>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import { FlowbiteThemable, Dropdown } from '../../../../../src/index'
+import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
+
+defineProps({
+  theme: {
+    type: String as PropType<FlowbiteTheme>,
+    default: 'blue',
+  },
+})
+</script>

docs/guide/flowbiteThemable/flowbiteThemable.md

@@ -2,6 +2,8 @@
 import FlowbiteThemableTabsPillsExample from './examples/tabs/FlowbiteThemableTabsPillsExample.vue';
 import FlowbiteThemableTabsUnderlineExample from './examples/tabs/FlowbiteThemableTabsUnderlineExample.vue';
 import FlowbiteThemableTabsDefaultExample from './examples/tabs/FlowbiteThemableTabsDefaultExample.vue';
+import FlowbiteThemableDropdownExample from './examples/dropdown/FlowbiteThemableDropdownExample.vue';
+import FlowbiteThemableButtonExample from './examples/button/FlowbiteThemableButtonExample.vue';
 </script>
 
 # Flowbite Themable
@@ -12,12 +14,12 @@ You can use this wrapper for styling components with no color prop(like tabs, dr
 
 ```vue
 <script setup>
-import {Tabs, Tab, FlowbiteThemable} from 'flowbite-vue'
+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">
+  <flowbite-themable :theme="theme">
       <tabs :variant="variant" class="p-5">
         ...
       </tabs>
@@ -59,4 +61,48 @@ const variant = 'default' // see tabs docs
 
 <FlowbiteThemableTabsDefaultExample theme="purple" />
 
-<FlowbiteThemableTabsDefaultExample theme="red" />
+<FlowbiteThemableTabsDefaultExample theme="red" />
+
+## Dropdown
+
+```vue
+<script setup>
+import { Dropdown, FlowbiteThemable } from 'flowbite-vue'
+const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
+</script>
+<template>
+  <flowbite-themable :theme="theme">
+      <dropdown>
+        ...
+      </dropdown>
+  </flowbite-themable>
+</template>
+```
+
+<FlowbiteThemableDropdownExample theme="blue" class="mb-2" />
+
+<FlowbiteThemableDropdownExample theme="green" class="mb-2" />
+
+<FlowbiteThemableDropdownExample theme="pink" class="mb-2" />
+
+<FlowbiteThemableDropdownExample theme="purple" class="mb-2" />
+
+<FlowbiteThemableDropdownExample theme="red" />
+
+## Button
+
+```vue
+<script setup>
+import { Button, FlowbiteThemable } from 'flowbite-vue'
+const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
+</script>
+<template>
+  <flowbite-themable :theme="theme">
+      <Button>
+        ...
+      </Button>
+  </flowbite-themable>
+</template>
+```
+
+<FlowbiteThemableButtonExample />