diff --git a/.changeset/giant-tomatoes-kick.md b/.changeset/giant-tomatoes-kick.md new file mode 100644 index 0000000000..7dce40f402 --- /dev/null +++ b/.changeset/giant-tomatoes-kick.md @@ -0,0 +1,5 @@ +--- +"@skeletonlabs/skeleton": minor +--- + +feat: Added `disabled` prop to ListBox and ListBoxItem components. diff --git a/packages/skeleton/src/lib/components/ListBox/ListBox.svelte b/packages/skeleton/src/lib/components/ListBox/ListBox.svelte index 8e3fe9ffb6..6818c9456d 100644 --- a/packages/skeleton/src/lib/components/ListBox/ListBox.svelte +++ b/packages/skeleton/src/lib/components/ListBox/ListBox.svelte @@ -7,6 +7,8 @@ // Props /** Enable selection of multiple items. */ export let multiple = false; + /** Disables selection of items. */ + export let disabled = false; // Props (styles) /** Provide class to set the vertical spacing style. */ @@ -35,6 +37,7 @@ export let labelledby = ''; // Context + setContext('disabled', disabled); setContext('multiple', multiple); setContext('rounded', rounded); setContext('active', active); diff --git a/packages/skeleton/src/lib/components/ListBox/ListBoxItem.svelte b/packages/skeleton/src/lib/components/ListBox/ListBoxItem.svelte index 43bcd24159..361e8369f3 100644 --- a/packages/skeleton/src/lib/components/ListBox/ListBoxItem.svelte +++ b/packages/skeleton/src/lib/components/ListBox/ListBoxItem.svelte @@ -19,6 +19,7 @@ export let value: any; // Context + export let disabled: boolean = getContext('disabled'); export let multiple: string = getContext('multiple'); export let rounded: CssClasses = getContext('rounded'); export let active: CssClasses = getContext('active'); @@ -30,6 +31,7 @@ // Classes const cBase = 'cursor-pointer -outline-offset-[3px]'; + const cDisabled = 'opacity-50 !cursor-default'; const cLabel = 'flex items-center space-x-4'; // Local @@ -95,8 +97,9 @@ // Reactive $: selected = multiple ? group.some((groupVal: unknown) => areDeeplyEqual(value, groupVal)) : areDeeplyEqual(group, value); - $: classesActive = selected ? active : hover; - $: classesBase = `${cBase} ${rounded} ${padding} ${classesActive} ${$$props.class ?? ''}`; + $: classesActive = selected ? active : !disabled ? hover : ''; + $: classesDisabled = disabled ? cDisabled : ''; + $: classesBase = `${cBase} ${classesDisabled} ${rounded} ${padding} ${classesActive} ${$$props.class ?? ''}`; $: classesLabel = `${cLabel}`; $: classesRegionLead = `${cRegionLead} ${regionLead}`; $: classesRegionDefault = `${cRegionDefault} ${regionDefault}`; @@ -119,9 +122,9 @@
Use the disabled
property to disable the entire listbox or each item.