Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add disabled state to dropdown trigger button #338

Merged
merged 4 commits into from
Jan 16, 2025
+57 −2
Merged

Add disabled state to dropdown trigger button #338

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
19dfd25
feat(dropdown): Add disabled state to be passed through to trigger bu…
tho-dan Jan 10, 2025
122388c
chore: add prop, block toggling when disabled, ensure readability, fi…
tho-dan Jan 13, 2025
222c2dd
chore: make example component consistent with docs code block
tho-dan Jan 13, 2025
3c27fc7
chore: elaborate on disabled state in conjunction with custom triggers
tho-dan Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions docs/components/dropdown.md
View file
Open in desktop
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 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

Expand Down Expand Up @@ -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` |
Expand Down
27 changes: 27 additions & 0 deletions docs/components/dropdown/examples/FwbDropdownExampleDisabled.vue
View file
Open in desktop
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">
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>
11 changes: 9 additions & 2 deletions src/components/FwbDropdown/FwbDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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<{
Expand All @@ -66,6 +72,7 @@ const props = withDefaults(
transition?: string
closeInside?: boolean
alignToEnd?: boolean
disabled?: boolean
}>(),
{
placement: 'bottom',
Expand Down
Loading