From 122388cbe343c51cf0aa7f8c71ea2f7f69961629 Mon Sep 17 00:00:00 2001
From: Daniel Fahl <daniel.fahl@thomann.io>
Date: Mon, 13 Jan 2025 06:56:49 +0100
Subject: [PATCH] chore: add prop, block toggling when disabled, ensure
 readability, fix linting errors

---
 docs/components/dropdown.md                |  5 +++--
 src/components/FwbDropdown/FwbDropdown.vue | 10 ++++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md
index 18b72b23..49898a9b 100644
--- a/docs/components/dropdown.md
+++ b/docs/components/dropdown.md
@@ -247,10 +247,10 @@ Please note that this has to be manually implemented when using a custom trigger
 ```vue
 <template>
   <fwb-dropdown text="Normal state">
-    Access this content by clicking the dropdown's trigger button
+    Dropdown content
   </fwb-dropdown>
   <fwb-dropdown text="Disabled state" disabled>
-    You cannot access this content, since the dropdown's trigger button is disabled
+    Disabled dropdown content
   </fwb-dropdown>
 </template>
 
@@ -327,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/src/components/FwbDropdown/FwbDropdown.vue b/src/components/FwbDropdown/FwbDropdown.vue
index cc6f89de..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 :disabled="disabled" :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<{