Skip to content

Commit

Permalink
feat(dropdown): Add disabled state to be passed through to trigger bu…
Browse files Browse the repository at this point in the history
…tton
  • Loading branch information
tho-dan committed Jan 10, 2025
1 parent 8810269 commit 19dfd25
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 1 deletion.
20 changes: 20 additions & 0 deletions docs/components/dropdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -239,6 +240,25 @@ import { FwbDropdown } from 'flowbite-vue'
</script>
```

## Dropdown - Disabled
Please note that this has to be manually implemented when using a custom trigger (see below)

<fwb-dropdown-example-disabled />
```vue
<template>
<fwb-dropdown text="Normal state">
Access this content by clicking the dropdown's trigger button
</fwb-dropdown>
<fwb-dropdown text="Disabled state" disabled>
You cannot access this content, since the dropdown's trigger button is disabled
</fwb-dropdown>
</template>
<script setup>
import { FwbDropdown } from 'flowbite-vue'
</script>
```


## Dropdown - trigger

Expand Down
27 changes: 27 additions & 0 deletions docs/components/dropdown/examples/FwbDropdownExampleDisabled.vue
Original file line number Diff line number Diff line change
@@ -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">
Access this content by clicking the dropdown's trigger button
</p>
</div>
</fwb-dropdown>
<fwb-dropdown
text="Disabled State"
disabled
>
<div class="w-52">
<p class="p-4">
You cannot access this content, since the dropdown's trigger button is disabled
</p>
</div>
</fwb-dropdown>
</div>
</template>

<script setup>
import { FwbDropdown } from '../../../../src/index'
</script>
3 changes: 2 additions & 1 deletion src/components/FwbDropdown/FwbDropdown.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<div class="inline-flex items-center">
<fwb-slot-listener @click="onToggle">
<slot name="trigger">
<fwb-button :color="color">
<fwb-button :disabled="disabled" :color="color">

Check warning on line 9 in src/components/FwbDropdown/FwbDropdown.vue

View workflow job for this annotation

GitHub Actions / lint (18.x)

':color' should be on a new line
{{ text }}
<template #suffix>
<svg
Expand Down Expand Up @@ -66,6 +66,7 @@ const props = withDefaults(
transition?: string
closeInside?: boolean
alignToEnd?: boolean
disabled?: boolean
}>(),
{
placement: 'bottom',
Expand Down

0 comments on commit 19dfd25

Please sign in to comment.