@x33025/sveltely 0.0.35 → 0.0.36

package/dist/components/ChipInput.svelte

@@ -7,6 +7,7 @@
 		placeholder?: string;
 		tags: string[];
 		selection?: string[];
+		disabled?: boolean;
 		action?: Snippet;
 	};
 
@@ -14,6 +15,7 @@
 		placeholder = 'Add a tag...',
 		tags = $bindable<string[]>(),
 		selection = $bindable<string[] | undefined>(),
+		disabled = false,
 		action
 	}: Props = $props();
 
@@ -56,7 +58,7 @@
 	};
 
 	const beginRangeSelection = (event: PointerEvent, index: number) => {
-		if (!selectionEnabled || event.button !== 0) return;
+		if (disabled || !selectionEnabled || event.button !== 0) return;
 		dragStartIndex = index;
 		dragHoverIndex = index;
 		isPointerSelecting = true;
@@ -64,7 +66,7 @@
 	};
 
 	const extendRangeSelection = (index: number) => {
-		if (!selectionEnabled || !isPointerSelecting || dragStartIndex === null) return;
+		if (disabled || !selectionEnabled || !isPointerSelecting || dragStartIndex === null) return;
 		dragHoverIndex = index;
 		if (dragStartIndex === index && !rangeSelectionMoved) return;
 		rangeSelectionMoved = true;
@@ -81,6 +83,7 @@
 	};
 
 	const onChipClick = (tag: string) => {
+		if (disabled) return;
 		if (suppressNextClick) {
 			suppressNextClick = false;
 			return;
@@ -89,13 +92,14 @@
 	};
 
 	const handleWindowPointerDown = (event: PointerEvent) => {
-		if (!selectionEnabled || !selection || !rootEl) return;
+		if (disabled || !selectionEnabled || !selection || !rootEl) return;
 		const target = event.target as Node | null;
 		if (target && rootEl.contains(target)) return;
 		selection = [];
 	};
 
 	const onKeydown = (event: KeyboardEvent) => {
+		if (disabled) return;
 		if ((event.key === 'Enter' || event.key === ',') && inputValue.trim()) {
 			event.preventDefault();
 			addTag(inputValue);
@@ -122,12 +126,14 @@
 	};
 
 	const openInput = async () => {
+		if (disabled) return;
 		showInput = true;
 		await tick();
 		inputEl?.focus();
 	};
 
 	const startEditing = async (tag: string) => {
+		if (disabled) return;
 		editingTag = tag;
 		editingValue = tag;
 		await tick();
@@ -177,6 +183,7 @@
 	};
 
 	const onEditKeydown = async (event: KeyboardEvent, tag: string) => {
+		if (disabled) return;
 		if (event.key === 'Enter') {
 			event.preventDefault();
 			await commitEdit('enter', tag);
@@ -208,6 +215,14 @@
 			selection = nextSelected;
 		}
 	});
+
+	$effect(() => {
+		if (!disabled) return;
+		endRangeSelection();
+		suppressNextClick = false;
+		showInput = false;
+		cancelEdit();
+	});
 </script>
 
 <svelte:window
@@ -216,7 +231,12 @@
 	onpointerdown={handleWindowPointerDown}
 />
 
-<div bind:this={rootEl} class="chip-row flex w-full flex-wrap items-center">
+<div
+	bind:this={rootEl}
+	class="chip-row flex w-full flex-wrap items-center"
+	class:chip-disabled={disabled}
+	aria-disabled={disabled}
+>
 	{#each tags as tag, index (tag)}
 		{#if editingTag === tag}
 			<input
@@ -224,6 +244,7 @@
 				bind:value={editingValue}
 				size={Math.max(editingValue.length, 1)}
 				class="chip-surface chip-input-field outline-none"
+				{disabled}
 				onblur={() => commitEdit('blur', tag)}
 				onkeydown={(event) => onEditKeydown(event, tag)}
 			/>
@@ -238,6 +259,7 @@
 				onclick={() => onChipClick(tag)}
 				ondblclick={() => startEditing(tag)}
 				aria-pressed={selection?.includes(tag)}
+				{disabled}
 			>
 				{tag}
 			</button>
@@ -245,6 +267,7 @@
 			<button
 				type="button"
 				class="chip-surface inline-flex items-center gap-2"
+				{disabled}
 				ondblclick={() => startEditing(tag)}>{tag}</button
 			>
 		{/if}
@@ -257,6 +280,7 @@
 			size={Math.max(inputValue.length, placeholder.length, 1)}
 			class="chip-surface chip-input-field outline-none"
 			{placeholder}
+			{disabled}
 			onkeydown={onKeydown}
 			onblur={onBlur}
 		/>
@@ -265,6 +289,7 @@
 			type="button"
 			class="chip-surface chip-input-action inline-flex items-center justify-center font-semibold"
 			aria-label="Add tag"
+			{disabled}
 			onclick={openInput}
 		>
 			<Plus style="width: var(--chip-input-font-size); height: var(--chip-input-font-size);" />
@@ -306,4 +331,17 @@
 	.chip-input-field:hover {
 		background: var(--chip-input-background);
 	}
+
+	.chip-disabled .chip-surface {
+		cursor: not-allowed;
+		opacity: 0.55;
+	}
+
+	.chip-disabled {
+		pointer-events: none;
+	}
+
+	.chip-disabled .chip-surface:hover {
+		background: var(--chip-input-background);
+	}
 </style>

package/dist/components/ChipInput.svelte.d.ts

@@ -3,6 +3,7 @@ type Props = {
     placeholder?: string;
     tags: string[];
     selection?: string[];
+    disabled?: boolean;
     action?: Snippet;
 };
 declare const ChipInput: import("svelte").Component<Props, {}, "tags" | "selection">;

package/dist/style/index.css

@@ -42,6 +42,11 @@
 		width: 100%;
 	}
 
+	.overflow-auto > .vstack,
+	.overflow-auto > .hstack {
+		flex-shrink: 0;
+	}
+
 	.chip-input-action {
 		width: calc(var(--chip-input-font-size) + 16px);
 		height: calc(var(--chip-input-font-size) + 16px);

package/dist/style.css

@@ -581,6 +581,9 @@
     height: 1px;
     width: 100%;
   }
+  .overflow-auto > .vstack,	.overflow-auto > .hstack {
+    flex-shrink: 0;
+  }
   .chip-input-action {
     width: calc(var(--chip-input-font-size) + 16px);
     height: calc(var(--chip-input-font-size) + 16px);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.0.35",
+	"version": "0.0.36",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",