@x33025/sveltely 0.0.28 → 0.0.31

package/dist/components/ChipInput.svelte

@@ -20,6 +20,9 @@
 	let inputValue = $state('');
 	let showInput = $state(false);
 	let inputEl = $state<HTMLInputElement | null>(null);
+	let editingTag = $state<string | null>(null);
+	let editingValue = $state('');
+	let editingEl = $state<HTMLInputElement | null>(null);
 	const selectionEnabled = $derived(selection !== undefined);
 
 	const addTag = (rawValue: string) => {
@@ -47,6 +50,12 @@
 			return;
 		}
 
+		if (event.key === 'Enter' && !inputValue.trim()) {
+			event.preventDefault();
+			showInput = false;
+			return;
+		}
+
 		if (event.key === 'Escape') {
 			inputValue = '';
 			showInput = false;
@@ -54,7 +63,8 @@
 		}
 
 		if (event.key === 'Backspace' && !inputValue && tags.length > 0) {
-			tags = tags.slice(0, -1);
+			event.preventDefault();
+			startEditing(tags[tags.length - 1]);
 		}
 	};
 
@@ -64,6 +74,74 @@
 		inputEl?.focus();
 	};
 
+	const startEditing = async (tag: string) => {
+		editingTag = tag;
+		editingValue = tag;
+		await tick();
+		editingEl?.focus();
+		editingEl?.select();
+	};
+
+	const commitEdit = async (source: 'enter' | 'blur' | 'advance', targetTag: string) => {
+		if (!editingTag || editingTag !== targetTag) return;
+
+		const previous = editingTag;
+		const next = editingValue.trim();
+		editingTag = null;
+
+		if (!next) {
+			if (source === 'enter' || source === 'advance') {
+				const previousIndex = tags.indexOf(previous);
+				const nextTags = tags.filter((tag) => tag !== previous);
+				tags = nextTags;
+				if (selection?.includes(previous)) {
+					selection = selection.filter((tag) => tag !== previous);
+				}
+
+				if (source === 'advance' && nextTags.length > 0) {
+					const nextIndex = Math.min(previousIndex, nextTags.length - 1);
+					await startEditing(nextTags[nextIndex]);
+				} else if (nextTags.length === 0) {
+					inputValue = '';
+					await openInput();
+				}
+			}
+			return;
+		}
+
+		if (next === previous) return;
+		if (tags.includes(next)) return;
+
+		tags = tags.map((tag) => (tag === previous ? next : tag));
+		if (selection?.includes(previous)) {
+			selection = selection.map((tag) => (tag === previous ? next : tag));
+		}
+	};
+
+	const cancelEdit = () => {
+		editingTag = null;
+		editingValue = '';
+	};
+
+	const onEditKeydown = async (event: KeyboardEvent, tag: string) => {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			await commitEdit('enter', tag);
+			return;
+		}
+
+		if ((event.key === 'Backspace' || event.key === 'Delete') && !editingValue.trim()) {
+			event.preventDefault();
+			await commitEdit('advance', tag);
+			return;
+		}
+
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			cancelEdit();
+		}
+	};
+
 	const onBlur = () => {
 		if (!inputValue.trim()) {
 			showInput = false;
@@ -82,18 +160,31 @@
 <div class="w-full max-w-lg">
 	<div class="tag-row flex flex-wrap items-center">
 		{#each tags as tag (tag)}
-			{#if selectionEnabled}
+			{#if editingTag === tag}
+				<input
+					bind:this={editingEl}
+					bind:value={editingValue}
+					class="tag-surface tag-input-field min-w-20 outline-none"
+					onblur={() => commitEdit('blur', tag)}
+					onkeydown={(event) => onEditKeydown(event, tag)}
+				/>
+			{:else if selectionEnabled}
 				<button
 					type="button"
 					class="tag-surface inline-flex items-center gap-2"
 					class:tag-selected={selection?.includes(tag)}
 					onclick={() => toggleSelected(tag)}
+					ondblclick={() => startEditing(tag)}
 					aria-pressed={selection?.includes(tag)}
 				>
 					{tag}
 				</button>
 			{:else}
-				<span class="tag-surface inline-flex items-center gap-2">{tag}</span>
+				<button
+					type="button"
+					class="tag-surface inline-flex items-center gap-2"
+					ondblclick={() => startEditing(tag)}>{tag}</button
+				>
 			{/if}
 		{/each}
 

package/dist/style.css

@@ -272,6 +272,9 @@
   .max-w-lg {
     max-width: var(--container-lg);
   }
+  .min-w-20 {
+    min-width: calc(var(--spacing) * 20);
+  }
   .min-w-36 {
     min-width: calc(var(--spacing) * 36);
   }

package/package.json

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