diff --git a/.changeset/cold-houses-sparkle.md b/.changeset/cold-houses-sparkle.md new file mode 100644 index 000000000..d920b4732 --- /dev/null +++ b/.changeset/cold-houses-sparkle.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +Support setting `disabled` for MenuOption (MenuButton, MenuField, SelectField) diff --git a/packages/svelte-ux/src/lib/components/MenuButton.svelte b/packages/svelte-ux/src/lib/components/MenuButton.svelte index 94c5f282f..9835a959f 100644 --- a/packages/svelte-ux/src/lib/components/MenuButton.svelte +++ b/packages/svelte-ux/src/lib/components/MenuButton.svelte @@ -75,6 +75,7 @@ value = option.value; dispatch('change', { option, value }); }} + disabled={option.disabled} > {option.label} diff --git a/packages/svelte-ux/src/lib/components/MenuField.svelte b/packages/svelte-ux/src/lib/components/MenuField.svelte index a302b195a..70dea2c78 100644 --- a/packages/svelte-ux/src/lib/components/MenuField.svelte +++ b/packages/svelte-ux/src/lib/components/MenuField.svelte @@ -137,6 +137,7 @@ selected={option.value === value} class={cls(option.group ? 'px-4' : 'px-2', settingsClasses.option, classes.option)} classes={classes.menuItem} + disabled={option.disabled} on:click={() => (value = option.value)} > {option.label} diff --git a/packages/svelte-ux/src/lib/components/SelectField.svelte b/packages/svelte-ux/src/lib/components/SelectField.svelte index 145637473..7ee3a8847 100644 --- a/packages/svelte-ux/src/lib/components/SelectField.svelte +++ b/packages/svelte-ux/src/lib/components/SelectField.svelte @@ -554,7 +554,7 @@ }} role="option" aria-selected={option === selected ? 'true' : 'false'} - aria-disabled={option?.disabled ? 'true' : 'false'} + disabled={option.disabled} > {option.label} @@ -613,7 +613,7 @@ }} role="option" aria-selected={option === selected ? 'true' : 'false'} - aria-disabled={option?.disabled ? 'true' : 'false'} + disabled={option.disabled} > {option.label} diff --git a/packages/svelte-ux/src/lib/types/index.ts b/packages/svelte-ux/src/lib/types/index.ts index 5b219232d..8e06588f8 100644 --- a/packages/svelte-ux/src/lib/types/index.ts +++ b/packages/svelte-ux/src/lib/types/index.ts @@ -9,6 +9,7 @@ export type MenuOption = { value: T; icon?: string; group?: string; + disabled?: boolean; } & Record; export type LabelPlacement = 'inset' | 'float' | 'top' | 'left'; diff --git a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte index 3dd850223..59a1199ae 100644 --- a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte @@ -31,6 +31,13 @@ { label: 'Four', value: 4, icon: mdiAccount }, ]; + let optionsWithDisabled: MenuOption[] = [ + { label: 'One', value: 1 }, + { label: 'Two', value: 2 }, + { label: 'Three', value: 3, disabled: true }, + { label: 'Four', value: 4 }, + ]; + const optionsWithGroup: MenuOption[] = [ { label: 'One', value: 1, group: 'First' }, { label: 'Two', value: 2, group: 'First' }, @@ -105,6 +112,15 @@ +

Disabled options

+ + + console.log('on:change', e.detail)} + /> + +

Grouped options