From ab467d9cd06c354734d429fabd714810d1a4f70c Mon Sep 17 00:00:00 2001
From: Daniel Fahl <daniel.fahl@thomann.io>
Date: Thu, 5 Dec 2024 06:42:11 +0100
Subject: [PATCH 1/2] feat(FwbDropdown): Add color prop to dropdown to adjust
 default trigger button style

---
 docs/components/dropdown.md                   |  61 ++++--
 .../examples/FwbDropdownExampleColors.vue     | 179 ++++++++++++++++++
 src/components/FwbDropdown/FwbDropdown.vue    |  54 ++++--
 3 files changed, 262 insertions(+), 32 deletions(-)
 create mode 100644 docs/components/dropdown/examples/FwbDropdownExampleColors.vue

diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md
index b6ccdeb7..9ef76dbd 100644
--- a/docs/components/dropdown.md
+++ b/docs/components/dropdown.md
@@ -1,8 +1,8 @@
 <script setup>
-import FwbDropdownExamplePlacement from './dropdown/examples/FwbDropdownExamplePlacement.vue'
-import FwbDropdownExampleAlignment from './dropdown/examples/FwbDropdownExampleAlignment.vue'
-import FwbDropdownExampleListGroup from './dropdown/examples/FwbDropdownExampleListGroup.vue'
-import FwbDropdownExampleTrigger from './dropdown/examples/FwbDropdownExampleTrigger.vue'
+import FwbDropdownExamplePlacement from './dropdown/examples/FwbDropdownExamplePlacement.vue';
+import FwbDropdownExampleAlignment from './dropdown/examples/FwbDropdownExampleAlignment.vue';
+import FwbDropdownExampleListGroup from './dropdown/examples/FwbDropdownExampleListGroup.vue';
+import FwbDropdownExampleTrigger from './dropdown/examples/FwbDropdownExampleTrigger.vue';
 </script>
 
 # Vue Dropdown - Flowbite
@@ -199,6 +199,45 @@ import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
 </script>
 ```
 
+## Dropdown - Button colors
+<fwb-dropdown-example-colors />
+```vue
+<template>
+  <fwb-dropdown text="Default" color="default">
+    ...
+  </fwb-dropdown>
+  <fwb-dropdown text="Alternative" color="alternative">
+    ...
+  </fwb-dropdown>
+  <fwb-dropdown text="Dark" color="dark">
+    ...
+  </fwb-dropdown>
+  <fwb-dropdown text="Light" color="light">
+    ...
+  </fwb-dropdown>
+  <fwb-dropdown text="Green" color="green">
+    ...
+  </fwb-dropdown>
+  <fwb-dropdown text="Red" color="red">
+    ...
+  </fwb-dropdown>
+  <fwb-dropdown text="Yellow" color="yellow">
+    ...
+  </fwb-dropdown>
+  <fwb-dropdown text="Purple" color="purple">
+    ...
+  </fwb-dropdown>
+  <fwb-dropdown text="Pink" color="pink">
+    ...
+  </fwb-dropdown>
+</template>
+
+<script setup>
+import { FwbDropdown } from 'flowbite-vue'
+</script>
+```
+
+
 ## Dropdown - trigger
 
 <fwb-dropdown-example-trigger />
@@ -261,13 +300,13 @@ import { FwbDropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
 ## API
 
 ### Props
-| Name     | Values | Default |
-|----------|--------|---------|
-| placement | `DropdownPlacement` | `'bottom'`  |
-| text | `string` | `''` |
-| transition | `string` | `''` |
-| closeInside | `boolean` | `false` |
-| alignToEnd | `boolean` | `false` |
+| Name        | Values              | Default    |
+|-------------|---------------------|------------|
+| placement   | `DropdownPlacement` | `'bottom'` |
+| text        | `string`            | `''`       |
+| transition  | `string`            | `''`       |
+| closeInside | `boolean`           | `false`    |
+| alignToEnd  | `boolean`           | `false`    |
 
 ### Events
 | Name | Description            |
diff --git a/docs/components/dropdown/examples/FwbDropdownExampleColors.vue b/docs/components/dropdown/examples/FwbDropdownExampleColors.vue
new file mode 100644
index 00000000..e21f29ab
--- /dev/null
+++ b/docs/components/dropdown/examples/FwbDropdownExampleColors.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="vp-raw flex gap-2 flex-wrap">
+    <fwb-dropdown
+      text="Default"
+      color="default"
+    >
+      <div class="w-52">
+        <p class="p-2">
+          Dropdown content line one
+        </p>
+        <p class="p-2">
+          Dropdown content line two
+        </p>
+        <p class="p-2">
+          Dropdown content line three
+        </p>
+        <p class="p-2">
+          Dropdown content line four
+        </p>
+      </div>
+    </fwb-dropdown>
+    <fwb-dropdown
+      text="Alternative"
+      color="alternative"
+    >
+      <div class="w-52">
+        <p class="p-2">
+          Dropdown content line one
+        </p>
+        <p class="p-2">
+          Dropdown content line two
+        </p>
+        <p class="p-2">
+          Dropdown content line three
+        </p>
+        <p class="p-2">
+          Dropdown content line four
+        </p>
+      </div>
+    </fwb-dropdown>
+    <fwb-dropdown
+      text="Dark"
+      color="dark"
+    >
+      <div class="w-52">
+        <p class="p-2">
+          Dropdown content line one
+        </p>
+        <p class="p-2">
+          Dropdown content line two
+        </p>
+        <p class="p-2">
+          Dropdown content line three
+        </p>
+        <p class="p-2">
+          Dropdown content line four
+        </p>
+      </div>
+    </fwb-dropdown>
+    <fwb-dropdown
+      text="Light"
+      color="light"
+    >
+      <div class="w-52">
+        <p class="p-2">
+          Dropdown content line one
+        </p>
+        <p class="p-2">
+          Dropdown content line two
+        </p>
+        <p class="p-2">
+          Dropdown content line three
+        </p>
+        <p class="p-2">
+          Dropdown content line four
+        </p>
+      </div>
+    </fwb-dropdown>
+    <fwb-dropdown
+      text="Green"
+      color="green"
+    >
+      <div class="w-52">
+        <p class="p-2">
+          Dropdown content line one
+        </p>
+        <p class="p-2">
+          Dropdown content line two
+        </p>
+        <p class="p-2">
+          Dropdown content line three
+        </p>
+        <p class="p-2">
+          Dropdown content line four
+        </p>
+      </div>
+    </fwb-dropdown>
+    <fwb-dropdown
+      text="Red"
+      color="red"
+    >
+      <div class="w-52">
+        <p class="p-2">
+          Dropdown content line one
+        </p>
+        <p class="p-2">
+          Dropdown content line two
+        </p>
+        <p class="p-2">
+          Dropdown content line three
+        </p>
+        <p class="p-2">
+          Dropdown content line four
+        </p>
+      </div>
+    </fwb-dropdown>
+    <fwb-dropdown
+      text="Yellow"
+      color="yellow"
+    >
+      <div class="w-52">
+        <p class="p-2">
+          Dropdown content line one
+        </p>
+        <p class="p-2">
+          Dropdown content line two
+        </p>
+        <p class="p-2">
+          Dropdown content line three
+        </p>
+        <p class="p-2">
+          Dropdown content line four
+        </p>
+      </div>
+    </fwb-dropdown>
+    <fwb-dropdown
+      text="Purple"
+      color="purple"
+    >
+      <div class="w-52">
+        <p class="p-2">
+          Dropdown content line one
+        </p>
+        <p class="p-2">
+          Dropdown content line two
+        </p>
+        <p class="p-2">
+          Dropdown content line three
+        </p>
+        <p class="p-2">
+          Dropdown content line four
+        </p>
+      </div>
+    </fwb-dropdown>
+    <fwb-dropdown
+      text="Pink"
+      color="pink"
+    >
+      <div class="w-52">
+        <p class="p-2">
+          Dropdown content line one
+        </p>
+        <p class="p-2">
+          Dropdown content line two
+        </p>
+        <p class="p-2">
+          Dropdown content line three
+        </p>
+        <p class="p-2">
+          Dropdown content line four
+        </p>
+      </div>
+    </fwb-dropdown>
+  </div>
+</template>
+
+<script setup>
+import { FwbDropdown } from '../../../../src/index'
+</script>
diff --git a/src/components/FwbDropdown/FwbDropdown.vue b/src/components/FwbDropdown/FwbDropdown.vue
index 8e3a2e49..084a2424 100644
--- a/src/components/FwbDropdown/FwbDropdown.vue
+++ b/src/components/FwbDropdown/FwbDropdown.vue
@@ -6,7 +6,7 @@
     <div class="inline-flex items-center">
       <fwb-slot-listener @click="onToggle">
         <slot name="trigger">
-          <fwb-button>
+          <fwb-button :color="color">
             {{ text }}
             <template #suffix>
               <svg
@@ -50,6 +50,7 @@ import type { DropdownPlacement } from './types'
 import FwbButton from '@/components/FwbButton/FwbButton.vue'
 import FwbSlotListener from '@/components/utils/FwbSlotListener/FwbSlotListener.vue'
 import { useDropdownClasses } from './composables/useDropdownClasses'
+import type { ButtonVariant } from '@/components/FwbButton/types'
 
 const visible = ref(false)
 const onHide = () => {
@@ -61,6 +62,7 @@ const props = withDefaults(
   defineProps<{
     placement?: DropdownPlacement
     text?: string
+    color?: ButtonVariant
     transition?: string
     closeInside?: boolean
     alignToEnd?: boolean
@@ -68,6 +70,7 @@ const props = withDefaults(
   {
     placement: 'bottom',
     text: '',
+    color: 'default',
     transition: '',
     closeInside: false,
     alignToEnd: false,
@@ -75,20 +78,17 @@ const props = withDefaults(
 )
 
 const emit = defineEmits<{
-  'show': []
-  'hide': []
+  show: []
+  hide: []
 }>()
 
-watch(
-  visible,
-  (isVisible: boolean) => {
-    if (isVisible) {
-      emit('show')
-    } else {
-      emit('hide')
-    }
-  },
-)
+watch(visible, (isVisible: boolean) => {
+  if (isVisible) {
+    emit('show')
+  } else {
+    emit('hide')
+  }
+})
 
 const placementTransitionMap: Record<DropdownPlacement, string> = {
   bottom: 'to-bottom',
@@ -132,41 +132,53 @@ onClickOutside(wrapper, () => {
 }
 
 /* to top */
-.to-top-enter-active, .to-top-leave-to {
+.to-top-enter-active,
+.to-top-leave-to {
   opacity: 0;
   transform: translateY(10px);
 }
-.to-top-leave, .to-top-enter-to {
+
+.to-top-leave,
+.to-top-enter-to {
   opacity: 1;
   transform: translateY(0);
 }
 
 /* to right */
-.to-right-enter-active, .to-right-leave-to {
+.to-right-enter-active,
+.to-right-leave-to {
   opacity: 0;
   transform: translateX(-10px);
 }
-.to-right-leave, .to-right-enter-to {
+
+.to-right-leave,
+.to-right-enter-to {
   opacity: 1;
   transform: translateX(0);
 }
 
 /* to bottom */
-.to-bottom-enter-active, .to-bottom-leave-to {
+.to-bottom-enter-active,
+.to-bottom-leave-to {
   opacity: 0;
   transform: translateY(-10px);
 }
-.to-bottom-leave, .to-bottom-enter-to {
+
+.to-bottom-leave,
+.to-bottom-enter-to {
   opacity: 1;
   transform: translateY(0);
 }
 
 /* to left */
-.to-left-enter-active, .to-left-leave-to {
+.to-left-enter-active,
+.to-left-leave-to {
   opacity: 0;
   transform: translateX(10px);
 }
-.to-left-leave, .to-left-enter-to {
+
+.to-left-leave,
+.to-left-enter-to {
   opacity: 1;
   transform: translateX(0);
 }

From d2c25a9955c3340a545422f56c3b2a813c386c08 Mon Sep 17 00:00:00 2001
From: Daniel Fahl <daniel.fahl@thomann.io>
Date: Mon, 9 Dec 2024 06:22:40 +0100
Subject: [PATCH 2/2] chore: fix code style, add prop to table, add missing
 import

---
 docs/components/dropdown.md | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md
index 9ef76dbd..8eda1ec0 100644
--- a/docs/components/dropdown.md
+++ b/docs/components/dropdown.md
@@ -1,8 +1,9 @@
 <script setup>
-import FwbDropdownExamplePlacement from './dropdown/examples/FwbDropdownExamplePlacement.vue';
-import FwbDropdownExampleAlignment from './dropdown/examples/FwbDropdownExampleAlignment.vue';
-import FwbDropdownExampleListGroup from './dropdown/examples/FwbDropdownExampleListGroup.vue';
-import FwbDropdownExampleTrigger from './dropdown/examples/FwbDropdownExampleTrigger.vue';
+import FwbDropdownExamplePlacement from './dropdown/examples/FwbDropdownExamplePlacement.vue'
+import FwbDropdownExampleAlignment from './dropdown/examples/FwbDropdownExampleAlignment.vue'
+import FwbDropdownExampleListGroup from './dropdown/examples/FwbDropdownExampleListGroup.vue'
+import FwbDropdownExampleColors from './dropdown/examples/FwbDropdownExampleColors.vue'
+import FwbDropdownExampleTrigger from './dropdown/examples/FwbDropdownExampleTrigger.vue'
 </script>
 
 # Vue Dropdown - Flowbite
@@ -300,13 +301,14 @@ import { FwbDropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
 ## API
 
 ### Props
-| Name        | Values              | Default    |
-|-------------|---------------------|------------|
-| placement   | `DropdownPlacement` | `'bottom'` |
-| text        | `string`            | `''`       |
-| transition  | `string`            | `''`       |
-| closeInside | `boolean`           | `false`    |
-| alignToEnd  | `boolean`           | `false`    |
+| Name        | Values              | Default     |
+|-------------|---------------------|-------------|
+| placement   | `DropdownPlacement` | `'bottom'`  |
+| text        | `string`            | `''`        |
+| color       | `ButtonVariant`     | `'default'` |
+| transition  | `string`            | `''`        |
+| closeInside | `boolean`           | `false`     |
+| alignToEnd  | `boolean`           | `false`     |
 
 ### Events
 | Name | Description            |