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

@@ -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`     |

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>

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',