added disabled option

skeletonlabs · Jul 23, 2023 · 893ec95 · 893ec95
1 parent c0e43ee
commit 893ec95
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 6 deletions.
diff --git a/packages/skeleton/src/lib/components/TreeView/TreeView.svelte b/packages/skeleton/src/lib/components/TreeView/TreeView.svelte
@@ -9,6 +9,8 @@
 	export let selection = false;
 	/** Enable selection of multiple items. */
 	export let multiple = false;
+	/** Set the tree disabled state */
+	export let disabled = false;
 	/** Provide classes to set the tree width. */
 	export let width: CssClasses = 'w-full';
 	/** Provide classes to set the vertical spacing between items. */
@@ -47,6 +49,7 @@
 	// Context API
 	setContext('selection', selection);
 	setContext('multiple', multiple);
+	setContext('disabled', disabled);
 	setContext('padding', padding);
 	setContext('indent', indent);
 	setContext('hover', hover);
@@ -60,10 +63,8 @@
 
 	// Reactive
 	$: classesBase = `${width} ${spacing} ${$$props.class ?? ''}`;
-
-	let child: any;
 </script>
 
-<div class="tree {classesBase}" data-testid="tree" role="tree" aria-multiselectable="true" aria-label={labelledby}>
+<div class="tree {classesBase}" data-testid="tree" role="tree" aria-multiselectable="true" aria-label={labelledby} aria-disabled={disabled}>
 	<slot />
 </div>
diff --git a/packages/skeleton/src/lib/components/TreeView/TreeViewItem.svelte b/packages/skeleton/src/lib/components/TreeView/TreeViewItem.svelte
@@ -10,6 +10,8 @@
 	// Props (state)
 	/** Set open by default on load. */
 	export let open = false;
+	/** Set the tree disabled state */
+	export let disabled: boolean = getContext('disabled');
 	/**
 	 * Set the radio group binding value.
 	 * @type {unknown}
@@ -67,6 +69,10 @@
 	let indeterminate = false;
 
 	// Functionality
+	function onSummaryClick(event: MouseEvent) {
+		// prevent any action when disabled
+		if (disabled) event.preventDefault();
+	}
 	// Svelte Checkbox Bugfix
 	// GitHub: https://github.com/sveltejs/svelte/issues/2308
 	// REPL: https://svelte.dev/repl/de117399559f4e7e9e14e2fc9ab243cc?version=3.12.1
@@ -184,24 +190,27 @@
 	const cSummary = 'list-none [&::-webkit-details-marker]:hidden flex items-center cursor-pointer';
 	const cSymbol = 'fill-current w-3 text-center transition-transform duration-[200ms]';
 	const cChildren = '';
+	const cDisabled = 'opacity-50 !cursor-not-allowed';
 
 	// Reactive State Classes
 	$: classesCaretState = open && $$slots.children ? caretOpen : caretClosed;
 	// Reactive Classes
+	$: classesDisabled = disabled ? cDisabled : '';
 	$: classesBase = `${cBase} ${$$props.class ?? ''}`;
-	$: classesSummary = `${cSummary} ${spacing} ${rounded} ${padding} ${hover} ${regionSummary}`;
+	$: classesSummary = `${cSummary} ${classesDisabled} ${spacing} ${rounded} ${padding} ${hover} ${regionSummary}`;
 	$: classesSymbol = `${cSymbol} ${classesCaret} ${regionSymbol}`;
 	$: classesCaret = `${classesCaretState}`;
 	$: classesHyphen = `${hyphenOpacity}`;
 	$: classesChildren = `${cChildren} ${indent} ${regionChildren}`;
 </script>
 
-<details bind:open class="tree-item {classesBase}" data-testid="tree-item">
+<details bind:open class="tree-item {classesBase}" data-testid="tree-item" aria-disabled={disabled}>
 	<summary
 		class="tree-item-summary {classesSummary}"
 		role="treeitem"
-		aria-selected="false"
+		aria-selected={checked}
 		aria-expanded={$$slots.children ? open : undefined}
+		on:click={onSummaryClick}
 		on:click
 		on:keydown
 		on:keyup

diff --git a/sites/skeleton.dev/src/routes/(inner)/components/tree-views/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/components/tree-views/+page.svelte
@@ -494,6 +494,80 @@ let children: TreeViewItem[] = [];
 		</svelte:fragment>
 	</TreeViewItem>
 	<!-- ... -->
+</TreeView>
+			`}
+					/>
+				</svelte:fragment>
+				<svelte:fragment slot="footer">
+					<p>Select children of <code class="code">Books</code> to see relational checking.</p>
+				</svelte:fragment>
+			</DocsPreview>
+		</section>
+		<section class="space-y-4">
+			<h2 class="h2">Disabled</h2>
+			<DocsPreview background="neutral">
+				<svelte:fragment slot="preview">
+					<TreeView disabled>
+						<TreeViewItem open>
+							<svelte:fragment slot="lead">
+								<i class="fa-solid fa-book-skull" />
+							</svelte:fragment>
+							<p>Books</p>
+							<svelte:fragment slot="children">
+								<TreeViewItem>
+									<p>Clean Code</p>
+								</TreeViewItem>
+								<TreeViewItem>
+									<p>The Clean Coder</p>
+								</TreeViewItem>
+								<TreeViewItem>
+									<p>The Art of Unix Programming</p>
+								</TreeViewItem>
+							</svelte:fragment>
+						</TreeViewItem>
+						<TreeViewItem>
+							<svelte:fragment slot="lead">
+								<i class="fa-solid fa-film" />
+							</svelte:fragment>
+							<p>Movies</p>
+							<svelte:fragment slot="children">
+								<TreeViewItem>
+									<p>Clean Code</p>
+								</TreeViewItem>
+								<TreeViewItem>
+									<p>The Clean Coder</p>
+								</TreeViewItem>
+								<TreeViewItem>
+									<p>The Art of Unix Programming</p>
+								</TreeViewItem>
+							</svelte:fragment>
+						</TreeViewItem>
+						<TreeViewItem>
+							<svelte:fragment slot="lead">
+								<i class="fa-solid fa-tv" />
+							</svelte:fragment>
+							<p>TV</p>
+						</TreeViewItem>
+					</TreeView>
+				</svelte:fragment>
+				<svelte:fragment slot="source">
+					<CodeBlock
+						language="html"
+						code={`
+<!-- Disable tree -->
+<TreeView disabled>
+	<!-- ... -->
+</TreeView>
+
+<!-- Disable tree items -->
+<TreeView>
+	<TreeViewItem disabled>
+		<!-- ... -->
+	</TreeViewItem>
+	<!-- Opened, disabled Tree item -->
+	<TreeViewItem open disabled>
+		<!-- ... -->
+	</TreeViewItem>
 </TreeView>
 			`}
 					/>