Support setting disabled for MenuOption (MenuButton, MenuField, Sel…

…ectField)
techniq · Jul 15, 2024 · 19ca5a6 · 19ca5a6
1 parent 3f502f1
commit 19ca5a6
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 2 deletions.
diff --git a/.changeset/cold-houses-sparkle.md 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
@@ -75,6 +75,7 @@
               value = option.value;
               dispatch('change', { option, value });
             }}
+            disabled={option.disabled}
           >
             {option.label}
           </MenuItem>

diff --git 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
@@ -554,7 +554,7 @@
                 }}
                 role="option"
                 aria-selected={option === selected ? 'true' : 'false'}
-                aria-disabled={option?.disabled ? 'true' : 'false'}
+                disabled={option.disabled}
               >
                 {option.label}
               </MenuItem>
@@ -613,7 +613,7 @@
               }}
               role="option"
               aria-selected={option === selected ? 'true' : 'false'}
-              aria-disabled={option?.disabled ? 'true' : 'false'}
+              disabled={option.disabled}
             >
               {option.label}
             </MenuItem>

diff --git 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<T = any> = {
   value: T;
   icon?: string;
   group?: string;
+  disabled?: boolean;
 } & Record<string, any>;
 
 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
@@ -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 @@
   <SelectField {options} bind:value clearSearchOnOpen={false} />
 </Preview>
 
+<h2>Disabled options</h2>
+
+<Preview>
+  <SelectField
+    options={optionsWithDisabled}
+    on:change={(e) => console.log('on:change', e.detail)}
+  />
+</Preview>
+
 <h2>Grouped options</h2>
 
 <Preview>