From 749732dbe766cca8fb8dd69cea52ee1c1ceaf631 Mon Sep 17 00:00:00 2001
From: Alexandr <a.pashkevich22@gmail.com>
Date: Fri, 8 Jul 2022 21:13:05 +0300
Subject: [PATCH] feat: initial dropdown and flowbite themable examples

---
 docs/guide/button/button.md                   |  2 +-
 .../button/examples/ButtonColorExample.vue    |  1 +
 .../button/FlowbiteThemableButtonExample.vue  | 25 +++++++++
 .../FlowbiteThemableDropdownExample.vue       | 29 +++++++++++
 .../flowbiteThemable/flowbiteThemable.md      | 52 +++++++++++++++++--
 .../Button/composables/useButtonClasses.ts    |  9 +++-
 src/components/Button/types.d.ts              |  2 +-
 7 files changed, 114 insertions(+), 6 deletions(-)
 create mode 100644 docs/guide/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue
 create mode 100644 docs/guide/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue

diff --git a/docs/guide/button/button.md b/docs/guide/button/button.md
index 468457a..f34201e 100644
--- a/docs/guide/button/button.md
+++ b/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>,
diff --git a/docs/guide/button/examples/ButtonColorExample.vue b/docs/guide/button/examples/ButtonColorExample.vue
index 3e63035..1e66115 100644
--- a/docs/guide/button/examples/ButtonColorExample.vue
+++ b/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>
diff --git a/docs/guide/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue b/docs/guide/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue
new file mode 100644
index 0000000..c06ec51
--- /dev/null
+++ b/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>
diff --git a/docs/guide/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue b/docs/guide/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue
new file mode 100644
index 0000000..b7691d1
--- /dev/null
+++ b/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>
diff --git a/docs/guide/flowbiteThemable/flowbiteThemable.md b/docs/guide/flowbiteThemable/flowbiteThemable.md
index 1b247ff..34482d3 100644
--- a/docs/guide/flowbiteThemable/flowbiteThemable.md
+++ b/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" />
\ No newline at end of file
+<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 />
\ No newline at end of file
diff --git a/src/components/Button/composables/useButtonClasses.ts b/src/components/Button/composables/useButtonClasses.ts
index d6ab7ff..be079fa 100644
--- a/src/components/Button/composables/useButtonClasses.ts
+++ b/src/components/Button/composables/useButtonClasses.ts
@@ -9,6 +9,7 @@ export type ButtonClassMap<T extends string> =  { hover: Record<T, string>, defa
 const buttonColorClasses: ButtonClassMap<ButtonVariant> = {
   default: {
     default: 'text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800',
+    blue: 'text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800',
     alternative: 'font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600',
     dark: 'text-white bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg dark:bg-gray-800 dark:focus:ring-gray-700 dark:border-gray-700',
     light: 'text-gray-900 bg-white border border-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-200 font-medium rounded-lg dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:focus:ring-gray-700',
@@ -16,9 +17,11 @@ const buttonColorClasses: ButtonClassMap<ButtonVariant> = {
     red: 'focus:outline-none text-white bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg dark:bg-red-600 dark:focus:ring-red-900',
     yellow: 'focus:outline-none text-white bg-yellow-400 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg dark:focus:ring-yellow-900',
     purple: 'focus:outline-none text-white bg-purple-700 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg dark:bg-purple-600 dark:focus:ring-purple-900',
+    pink: 'focus:outline-none text-white bg-pink-700 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg dark:bg-pink-600 dark:focus:ring-pink-900',
   },
   hover: {
     default: 'hover:bg-blue-800 dark:hover:bg-blue-700',
+    blue: 'hover:bg-blue-800 dark:hover:bg-blue-700',
     alternative: 'hover:bg-gray-100 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700',
     dark: 'hover:bg-gray-900 dark:hover:bg-gray-700',
     light: 'hover:bg-gray-100 dark:hover:border-gray-600',
@@ -26,7 +29,7 @@ const buttonColorClasses: ButtonClassMap<ButtonVariant> = {
     red: 'hover:bg-red-800 dark:hover:bg-red-700',
     yellow: 'hover:bg-yellow-500',
     purple: 'hover:bg-purple-800 dark:hover:bg-purple-700',
-
+    pink: 'hover:bg-pink-800 dark:hover:bg-pink-700',
   },
 }
 
@@ -34,16 +37,20 @@ const buttonOutlineColorClasses: ButtonClassMap<Exclude<ButtonVariant, 'light' |
   default: {
     dark: 'text-gray-900 border border-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm text-center dark:border-gray-600 dark:text-gray-400 dark:focus:ring-gray-800',
     default: 'text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800',
+    blue: 'text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800',
     green: 'text-green-700 border border-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm text-center dark:border-green-500 dark:text-green-500 dark:focus:ring-green-800',
     purple: 'text-purple-700 border border-purple-700 focus:ring-4 focus:outline-none focus:ring-purple-300 font-medium rounded-lg text-sm text-center dark:border-purple-400 dark:text-purple-400 dark:focus:ring-purple-900',
+    pink: 'text-pink-700 border border-pink-700 focus:ring-4 focus:outline-none focus:ring-pink-300 font-medium rounded-lg text-sm text-center dark:border-pink-400 dark:text-pink-400 dark:focus:ring-pink-900',
     red: 'text-red-700 border border-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm text-center dark:border-red-500 dark:text-red-500 dark:focus:ring-red-900',
     yellow: 'text-yellow-400 border border-yellow-400 focus:ring-4 focus:outline-none focus:ring-yellow-300 font-medium rounded-lg text-sm text-center dark:border-yellow-300 dark:text-yellow-300 dark:focus:ring-yellow-900',
   },
   hover: {
     dark: 'hover:text-white hover:bg-gray-900 dark:hover:text-white dark:hover:bg-gray-600',
     default: 'hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-600',
+    blue: 'hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-600',
     green: 'hover:text-white hover:bg-green-800 dark:hover:text-white dark:hover:bg-green-600',
     purple: 'hover:text-white hover:bg-purple-800 dark:hover:text-white dark:hover:bg-purple-500',
+    pink: 'hover:text-white hover:bg-pink-800 dark:hover:text-white dark:hover:bg-pink-500',
     red: 'hover:text-white hover:bg-red-800 dark:hover:text-white dark:hover:bg-red-600',
     yellow: 'hover:text-white hover:bg-yellow-500 dark:hover:text-white dark:hover:bg-yellow-400',
   },
diff --git a/src/components/Button/types.d.ts b/src/components/Button/types.d.ts
index 701b089..a55f2c8 100644
--- a/src/components/Button/types.d.ts
+++ b/src/components/Button/types.d.ts
@@ -1,5 +1,5 @@
 export type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
 export type ButtonDuotoneGradient = 'purple-blue' | 'cyan-blue' | 'green-blue' | 'purple-pink' | 'pink-orange' | 'teal-lime' | 'red-yellow'
 export type ButtonGradient = ButtonDuotoneGradient | ButtonMonochromeGradient
-export type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple'
+export type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
\ No newline at end of file