From ffee3508729757c2def94f645605985ec422ba7f Mon Sep 17 00:00:00 2001
From: tho-dan <daniel.fahl@thomann.io>
Date: Thu, 16 Jan 2025 07:00:14 +0100
Subject: [PATCH] Add disabled state to dropdown trigger button (#338)

* feat(dropdown): Add disabled state to be passed through to trigger button

* chore: add prop, block toggling when disabled, ensure readability, fix linting errors

* chore: make example component consistent with docs code block

* chore: elaborate on disabled state in conjunction with custom triggers
---
 docs/components/dropdown.md                   | 21 +++++++++++++++
 .../examples/FwbDropdownExampleDisabled.vue   | 27 +++++++++++++++++++
 src/components/FwbDropdown/FwbDropdown.vue    | 11 ++++++--
 3 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 docs/components/dropdown/examples/FwbDropdownExampleDisabled.vue

diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md
index b10d3eb5..98fdc3cc 100644
--- a/docs/components/dropdown.md
+++ b/docs/components/dropdown.md
@@ -3,6 +3,7 @@ import FwbDropdownExamplePlacement from './dropdown/examples/FwbDropdownExampleP
 import FwbDropdownExampleAlignment from './dropdown/examples/FwbDropdownExampleAlignment.vue'
 import FwbDropdownExampleListGroup from './dropdown/examples/FwbDropdownExampleListGroup.vue'
 import FwbDropdownExampleColors from './dropdown/examples/FwbDropdownExampleColors.vue'
+import FwbDropdownExampleDisabled from './dropdown/examples/FwbDropdownExampleDisabled.vue'
 import FwbDropdownExampleTrigger from './dropdown/examples/FwbDropdownExampleTrigger.vue'
 import FwbDropdownExampleCloseInside from './dropdown/examples/FwbDropdownExampleCloseInside.vue'
 </script>
@@ -239,6 +240,25 @@ import { FwbDropdown } from 'flowbite-vue'
 </script>
 ```
 
+## Dropdown - Disabled
+Please note that when using a custom trigger (via the trigger slot), you'll need to also implement the disabled state manually by passing the disabled prop to your trigger element. You should still use the disabled prop here to ensure correct handling of the disabled state in the dropdown click handler.
+
+<fwb-dropdown-example-disabled />
+```vue
+<template>
+  <fwb-dropdown text="Normal state">
+    Dropdown content
+  </fwb-dropdown>
+  <fwb-dropdown text="Disabled state" disabled>
+    Disabled dropdown content
+  </fwb-dropdown>
+</template>
+
+<script setup>
+import { FwbDropdown } from 'flowbite-vue'
+</script>
+```
+
 
 ## Dropdown - trigger
 
@@ -307,6 +327,7 @@ import { FwbDropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
 | placement   | `DropdownPlacement` | `'bottom'`  |
 | text        | `string`            | `''`        |
 | color       | `ButtonVariant`     | `'default'` |
+| disabled    | `boolean`           | `false`     |
 | transition  | `string`            | `''`        |
 | closeInside | `boolean`           | `false`     |
 | alignToEnd  | `boolean`           | `false`     |
diff --git a/docs/components/dropdown/examples/FwbDropdownExampleDisabled.vue b/docs/components/dropdown/examples/FwbDropdownExampleDisabled.vue
new file mode 100644
index 00000000..e0a70912
--- /dev/null
+++ b/docs/components/dropdown/examples/FwbDropdownExampleDisabled.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="vp-raw flex gap-2 flex-wrap">
+    <fwb-dropdown
+      text="Normal State"
+    >
+      <div class="w-52">
+        <p class="p-4">
+          Dropdown content
+        </p>
+      </div>
+    </fwb-dropdown>
+    <fwb-dropdown
+      text="Disabled State"
+      disabled
+    >
+      <div class="w-52">
+        <p class="p-4">
+          Disabled dropdown content
+        </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 04b16e8c..b8af8fcd 100644
--- a/src/components/FwbDropdown/FwbDropdown.vue
+++ b/src/components/FwbDropdown/FwbDropdown.vue
@@ -6,7 +6,10 @@
     <div class="inline-flex items-center">
       <fwb-slot-listener @click="onToggle">
         <slot name="trigger">
-          <fwb-button :color="color">
+          <fwb-button
+            :disabled="disabled"
+            :color="color"
+          >
             {{ text }}
             <template #suffix>
               <svg
@@ -56,7 +59,10 @@ const visible = ref(false)
 const onHide = () => {
   if (props.closeInside) visible.value = false
 }
-const onToggle = () => (visible.value = !visible.value)
+const onToggle = () => {
+  if (props.disabled) return
+  visible.value = !visible.value
+}
 
 const props = withDefaults(
   defineProps<{
@@ -66,6 +72,7 @@ const props = withDefaults(
     transition?: string
     closeInside?: boolean
     alignToEnd?: boolean
+    disabled?: boolean
   }>(),
   {
     placement: 'bottom',