Feat/add disabled to listbox listboxitem (#2485)

Co-authored-by: endigo9740 <[email protected]>

.changeset/giant-tomatoes-kick.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": minor
+---
+
+feat: Added `disabled` prop to ListBox and ListBoxItem components.

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);

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 @@
 		<!-- NOTE: Don't use `hidden` as it prevents `required` from operating -->
 		<div class="h-0 w-0 overflow-hidden">
 			{#if multiple}
-				<input bind:this={elemInput} type="checkbox" {name} {value} bind:checked tabindex="-1" on:click on:change />
+				<input {disabled} bind:this={elemInput} type="checkbox" {name} {value} bind:checked tabindex="-1" on:click on:change />
 			{:else}
-				<input bind:this={elemInput} type="radio" bind:group {name} {value} tabindex="-1" on:click on:change />
+				<input {disabled} bind:this={elemInput} type="radio" bind:group {name} {value} tabindex="-1" on:click on:change />
 			{/if}
 		</div>
 		<!-- <slot /> -->

sites/skeleton.dev/src/routes/(inner)/components/listboxes/+page.svelte

@@ -30,6 +30,7 @@
 	// Local
 	let valueSingle = 'books';
 	let valueMultiple = ['books', 'movies'];
+	let valueDisabled = ['books', 'movies'];
 </script>
 
 <DocsShell {settings}>
@@ -119,6 +120,12 @@
 				</svelte:fragment>
 			</DocsPreview>
 		</section>
+		<section class="space-y-4">
+			<h2 class="h2">Disabled</h2>
+			<p>Use the <code class="code">disabled</code> property to disable the entire listbox or each item.</p>
+			<CodeBlock language="html" code={`<ListBox ... disabled>...</ListBox>`} />
+			<CodeBlock language="html" code={`<ListBoxItem ... disabled>...</ListBoxItem>`} />
+		</section>
 		<section class="space-y-4">
 			<h2 class="h2">Lead and Trail Slots</h2>
 			<p>