Merge pull request #2519 from skeletonlabs/dev

Merge for release - Feb 27, 2024

Author: endigo9740

.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/README.md

@@ -0,0 +1 @@
+# skeleton.dev source code

sites/skeleton.dev/src/lib/components/DocsSidebar/DocsSidebar.svelte

@@ -41,11 +41,6 @@
 			<span>Home</span>
 		</AppRailAnchor>
 		<!-- prettier-ignore -->
-		<AppRailAnchor href="https://store.skeleton.dev" target="_blank" class="lg:hidden" on:click={() => { onClickAnchor() }}>
-			<svelte:fragment slot="lead"><i class="fa-solid fa-cart-shopping text-2xl" /></svelte:fragment>
-			<span>Store</span>
-		</AppRailAnchor>
-		<!-- prettier-ignore -->
 		<AppRailAnchor href="/blog" class="lg:hidden" on:click={() => { onClickAnchor() }}>
 			<svelte:fragment slot="lead"><i class="fa-solid fa-bullhorn text-2xl" /></svelte:fragment>
 			<span>Blog</span>

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>

sites/skeleton.dev/src/routes/(inner)/docs/ssd/+page.svelte

@@ -79,7 +79,7 @@
 	<!-- Getting Started -->
 	<section class="space-y-4">
 		<h2 class="h2">Getting Started</h2>
-		<h3 class="h3">Install Depedencies</h3>
+		<h3 class="h3">Install Dependencies</h3>
 		<p>Add Svelte Simple Datables to your Skeleton project by running the following command.</p>
 		<CodeBlock
 			language="shell"

sites/skeleton.dev/src/routes/(inner)/docs/ssd/ClientSSD.svelte

@@ -29,7 +29,7 @@ export default [
 	<section class="space-y-4">
 		<h3 class="h3" data-toc-ignore>2. The Datatable Component</h3>
 		<p>
-			Create the new Datatable component in <code class="code">/src/lib/comonents/Datatable.svelte</code>, import your custom dataset, as
+			Create the new Datatable component in <code class="code">/src/lib/components/Datatable.svelte</code>, import your custom dataset, as
 			well as the
 			<code class="code">DataHandler</code> from Svelte Simple Datatables. Then, intialize the <code class="code">handler</code> and
 			<code class="code">rows</code>.

sites/skeleton.dev/src/routes/(inner)/docs/ssd/ServerSSD.svelte

@@ -100,7 +100,7 @@ const getParams = (state: State) => {
 		<h3 class="h3" data-toc-ignore>2. The Datatable Component</h3>
 
 		<p>
-			Create the new Datatable component in <code class="code">/src/lib/comonents/Datatable.svelte</code>. Import
+			Create the new Datatable component in <code class="code">/src/lib/components/Datatable.svelte</code>. Import
 			<code class="code">reload</code>
 			from <code class="code">api.ts</code>. Then import <code class="code">DataHandler</code> and the
 			<code class="code">State</code>