@x33025/sveltely 0.0.29 → 0.0.32

package/dist/components/ChipInput.svelte

@@ -50,6 +50,12 @@
 			return;
 		}
 
+		if (event.key === 'Enter' && !inputValue.trim()) {
+			event.preventDefault();
+			showInput = false;
+			return;
+		}
+
 		if (event.key === 'Escape') {
 			inputValue = '';
 			showInput = false;
@@ -57,7 +63,8 @@
 		}
 
 		if (event.key === 'Backspace' && !inputValue && tags.length > 0) {
-			tags = tags.slice(0, -1);
+			event.preventDefault();
+			startEditing(tags[tags.length - 1]);
 		}
 	};
 
@@ -75,14 +82,34 @@
 		editingEl?.select();
 	};
 
-	const commitEdit = () => {
-		if (!editingTag) return;
+	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 || next === previous) return;
+		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));
@@ -96,10 +123,16 @@
 		editingValue = '';
 	};
 
-	const onEditKeydown = (event: KeyboardEvent) => {
+	const onEditKeydown = async (event: KeyboardEvent, tag: string) => {
 		if (event.key === 'Enter') {
 			event.preventDefault();
-			commitEdit();
+			await commitEdit('enter', tag);
+			return;
+		}
+
+		if ((event.key === 'Backspace' || event.key === 'Delete') && !editingValue.trim()) {
+			event.preventDefault();
+			await commitEdit('advance', tag);
 			return;
 		}
 
@@ -124,86 +157,87 @@
 	});
 </script>
 
-<div class="w-full max-w-lg">
-	<div class="tag-row flex flex-wrap items-center">
-		{#each tags as tag (tag)}
-			{#if editingTag === tag}
-				<input
-					bind:this={editingEl}
-					bind:value={editingValue}
-					class="tag-surface tag-input-field min-w-20 outline-none"
-					onblur={commitEdit}
-					onkeydown={onEditKeydown}
-				/>
-			{: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}
-				<button
-					type="button"
-					class="tag-surface inline-flex items-center gap-2"
-					ondblclick={() => startEditing(tag)}>{tag}</button
-				>
-			{/if}
-		{/each}
-
-		{#if showInput}
+<div class="chip-row flex w-full flex-wrap items-center">
+	{#each tags as tag (tag)}
+		{#if editingTag === tag}
 			<input
-				bind:this={inputEl}
-				bind:value={inputValue}
-				class="tag-surface tag-input-field min-w-36 outline-none"
-				{placeholder}
-				onkeydown={onKeydown}
-				onblur={onBlur}
+				bind:this={editingEl}
+				bind:value={editingValue}
+				size={Math.max(editingValue.length, 1)}
+				class="chip-surface chip-input-field outline-none"
+				onblur={() => commitEdit('blur', tag)}
+				onkeydown={(event) => onEditKeydown(event, tag)}
 			/>
-		{:else}
+		{:else if selectionEnabled}
 			<button
 				type="button"
-				class="tag-surface chip-input-action inline-flex items-center justify-center font-semibold"
-				aria-label="Add tag"
-				onclick={openInput}
+				class="chip-surface inline-flex items-center gap-2"
+				class:chip-selected={selection?.includes(tag)}
+				onclick={() => toggleSelected(tag)}
+				ondblclick={() => startEditing(tag)}
+				aria-pressed={selection?.includes(tag)}
 			>
-				<Plus style="width: var(--chip-input-font-size); height: var(--chip-input-font-size);" />
+				{tag}
 			</button>
+		{:else}
+			<button
+				type="button"
+				class="chip-surface inline-flex items-center gap-2"
+				ondblclick={() => startEditing(tag)}>{tag}</button
+			>
 		{/if}
-
-		{#if action}
-			{@render action()}
-		{/if}
-	</div>
+	{/each}
+
+	{#if showInput}
+		<input
+			bind:this={inputEl}
+			bind:value={inputValue}
+			size={Math.max(inputValue.length, placeholder.length, 1)}
+			class="chip-surface chip-input-field outline-none"
+			{placeholder}
+			onkeydown={onKeydown}
+			onblur={onBlur}
+		/>
+	{:else}
+		<button
+			type="button"
+			class="chip-surface chip-input-action inline-flex items-center justify-center font-semibold"
+			aria-label="Add tag"
+			onclick={openInput}
+		>
+			<Plus style="width: var(--chip-input-font-size); height: var(--chip-input-font-size);" />
+		</button>
+	{/if}
+
+	{#if action}
+		{@render action()}
+	{/if}
 </div>
 
 <style>
-	.tag-row {
+	.chip-row {
 		gap: var(--chip-input-gap);
 	}
 
-	.tag-surface {
+	.chip-surface {
 		background: var(--chip-input-background);
 		color: var(--chip-input-text);
 		font-size: var(--chip-input-font-size);
 		border-radius: var(--chip-input-border-radius);
 		padding: var(--chip-input-padding);
 		border: 1px solid var(--chip-input-border-color);
+		white-space: nowrap;
 	}
 
-	.tag-selected {
+	.chip-selected {
 		border-color: var(--chip-input-highlight);
 	}
 
-	.tag-surface:hover {
+	.chip-surface:hover {
 		background: var(--chip-input-hover);
 	}
 
-	.tag-input-field:hover {
+	.chip-input-field:hover {
 		background: var(--chip-input-background);
 	}
 </style>

package/dist/style.css

@@ -22,7 +22,6 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
-    --container-lg: 32rem;
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --font-weight-medium: 500;
@@ -269,15 +268,6 @@
   .w-full {
     width: 100%;
   }
-  .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);
-  }
   .flex-1 {
     flex: 1;
   }

package/package.json

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