@placeholderco/placeholder-ui 1.0.12 → 2.0.0

package/dist/form/ComboBoxItemBuilder.svelte

@@ -1,106 +1,110 @@
-<script lang="ts">
+<script module lang="ts">
 	import type { ComboBoxItem } from '../models/ComboBoxItem.js';
-	import ActionIcon from '../ui/ActionIcon.svelte';
-	import Button from '../ui/Button.svelte';
-	import Checkbox from './Checkbox.svelte';
-	import { iconPlus, iconTrash } from '../icon/index.js';
-	import FormGroup from './FormGroup.svelte';
 
-	interface Props {
+	export interface ComboBoxItemBuilderProps {
+		/** Label text displayed above the builder */
 		label?: string;
+		/** Array of combo box items (bindable) */
 		items?: ComboBoxItem[];
+		/** Array of default selected values (bindable) */
 		defaultValues?: string[];
+		/** Header text for the label column */
+		labelHeader?: string;
+		/** Header text for the value column */
+		valueHeader?: string;
+		/** Placeholder for label input field (defaults to labelHeader) */
 		labelPlaceholder?: string;
+		/** Placeholder for value input field (defaults to valueHeader) */
 		valuePlaceholder?: string;
+		/** Hide the "Selected" column and skip default-value tracking */
+		hideSelected?: boolean;
+		/** Disable auto-copying the label into the value field */
+		disableValueSync?: boolean;
+		/** Allow multiple items to share the same value. Note: default-value tracking is keyed by value, so items sharing a value also share their selected state */
+		allowDuplicateValues?: boolean;
+		/** Additional CSS classes */
 		class?: string;
+		/** Callback when items or default values change */
 		onchange?: (items: ComboBoxItem[], defaultValues: string[]) => void;
 	}
+</script>
+
+<script lang="ts">
+	import { tick } from 'svelte';
+	import ActionIcon from '../ui/ActionIcon.svelte';
+	import Checkbox from './Checkbox.svelte';
+	import { iconTrash } from '../icon/index.js';
+	import FormGroup from './FormGroup.svelte';
 
 	let {
 		label = '',
 		items = $bindable([]),
 		defaultValues = $bindable([]),
-		labelPlaceholder = 'Label',
-		valuePlaceholder = 'Value',
+		labelHeader = 'Label',
+		valueHeader = 'Value',
+		labelPlaceholder = undefined,
+		valuePlaceholder = undefined,
+		hideSelected = false,
+		disableValueSync = false,
+		allowDuplicateValues = false,
 		class: classes = '',
 		onchange
-	}: Props = $props();
+	}: ComboBoxItemBuilderProps = $props();
 
-	let newLabel = $state('');
-	let newValue = $state('');
-	let valueManuallyEdited = $state(false);
-	let labelInputEl: HTMLInputElement | undefined = $state(undefined);
+	let effectiveLabelPlaceholder = $derived(labelPlaceholder ?? labelHeader);
+	let effectiveValuePlaceholder = $derived(valuePlaceholder ?? valueHeader);
 
-	// Copy label exactly for default value
-	function labelToValue(label: string): string {
-		return label.trim();
-	}
+	let labelInputEl: HTMLInputElement | undefined = $state(undefined);
+	let itemLabelInputs: HTMLInputElement[] = $state([]);
+	let itemValueInputs: HTMLInputElement[] = $state([]);
+
+	// Typing in the empty bottom row immediately creates a real item and moves focus into it
+	async function handleNewInput(
+		field: 'label' | 'value',
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) {
+		const text = e.currentTarget.value;
+		e.currentTarget.value = '';
+		if (!text) return;
+
+		const newItem: ComboBoxItem =
+			field === 'label'
+				? { label: text, value: disableValueSync ? '' : text }
+				: { label: '', value: text };
 
-	// Handle label input - auto-sync to value if not manually edited
-	function handleLabelInput(value: string) {
-		newLabel = value;
-		if (!valueManuallyEdited) {
-			newValue = labelToValue(value);
-		}
-	}
+		items = [...items, newItem];
+		notifyChange();
 
-	// Handle value input - mark as manually edited
-	function handleValueInput(value: string) {
-		newValue = value;
-		if (value !== labelToValue(newLabel)) {
-			valueManuallyEdited = true;
-		}
+		await tick();
+		const input =
+			field === 'label' ? itemLabelInputs[items.length - 1] : itemValueInputs[items.length - 1];
+		input?.focus();
+		input?.setSelectionRange(text.length, text.length);
 	}
 
 	// Check if a value already exists (excluding a specific index for editing)
-	function valueExists(value: string, excludeIndex?: number): boolean {
+	function valueExists(value: string, excludeIndex: number | undefined = undefined): boolean {
 		return items.some((item, i) =>
 			item.value === value && i !== excludeIndex
 		);
 	}
 
 	// Check if a label already exists (excluding a specific index for editing)
-	function labelExists(label: string, excludeIndex?: number): boolean {
+	function labelExists(label: string, excludeIndex: number | undefined = undefined): boolean {
 		return items.some((item, i) =>
 			item.label === label && i !== excludeIndex
 		);
 	}
 
-	// Check if new value/label would be a duplicate
-	let isDuplicateNewValue = $derived(
-		newValue.trim() !== '' && valueExists(newValue.trim())
-	);
-
-	let isDuplicateNewLabel = $derived(
-		newLabel.trim() !== '' && labelExists(newLabel.trim())
-	);
-
-	function addItem() {
-		if (!newLabel.trim() || !newValue.trim()) return;
-		if (isDuplicateNewValue || isDuplicateNewLabel) return;
-
-		const newItem: ComboBoxItem = {
-			label: newLabel.trim(),
-			value: newValue.trim()
-		};
-
-		items = [...items, newItem];
-		newLabel = '';
-		newValue = '';
-		valueManuallyEdited = false;
-
-		notifyChange();
-
-		// Focus back on label input for quick entry of next item
-		labelInputEl?.focus();
-	}
-
 	function removeItem(index: number) {
 		const removedItem = items[index];
 		items = items.filter((_, i) => i !== index);
 
-		// Remove from defaults if it was selected
-		if (defaultValues.includes(removedItem.value)) {
+		// Remove from defaults if it was selected and no remaining item shares the value
+		if (
+			defaultValues.includes(removedItem.value) &&
+			!items.some(item => item.value === removedItem.value)
+		) {
 			defaultValues = defaultValues.filter(v => v !== removedItem.value);
 		}
 
@@ -123,17 +127,20 @@
 		const currentItem = items[index];
 
 		// Check if label and value were in sync (exact case-sensitive match)
-		const wasInSync = currentItem.label === currentItem.value;
+		const wasInSync = !disableValueSync && currentItem.label === currentItem.value;
 
 		// If they were in sync, also update the value to maintain exact match (if it wouldn't create a duplicate)
-		if (wasInSync && !valueExists(label, index)) {
+		if (wasInSync && (allowDuplicateValues || !valueExists(label, index))) {
 			const oldValue = currentItem.value;
 			items = items.map((item, i) =>
 				i === index ? { ...item, label, value: label } : item
 			);
 
-			// Update defaults if the value was changed
-			if (defaultValues.includes(oldValue)) {
+			// Update defaults if the value was changed and no remaining item shares the old value
+			if (
+				defaultValues.includes(oldValue) &&
+				!items.some(item => item.value === oldValue)
+			) {
 				defaultValues = defaultValues.map(v => v === oldValue ? label : v);
 			}
 		} else {
@@ -147,15 +154,18 @@
 
 	function updateItemValue(index: number, newVal: string) {
 		// Don't allow duplicate values
-		if (valueExists(newVal, index)) return;
+		if (!allowDuplicateValues && valueExists(newVal, index)) return;
 
 		const oldValue = items[index].value;
 		items = items.map((item, i) =>
 			i === index ? { ...item, value: newVal } : item
 		);
 
-		// Update defaults if the value was changed
-		if (defaultValues.includes(oldValue)) {
+		// Update defaults if the value was changed and no remaining item shares the old value
+		if (
+			defaultValues.includes(oldValue) &&
+			!items.some(item => item.value === oldValue)
+		) {
 			defaultValues = defaultValues.map(v => v === oldValue ? newVal : v);
 		}
 
@@ -166,10 +176,11 @@
 		onchange?.(items, defaultValues);
 	}
 
-	function handleKeyDown(e: KeyboardEvent) {
+	// Enter in an item row jumps back to the empty row for quick entry of the next item
+	function handleItemKeyDown(e: KeyboardEvent) {
 		if (e.key === 'Enter') {
 			e.preventDefault();
-			addItem();
+			labelInputEl?.focus();
 		}
 	}
 
@@ -196,40 +207,48 @@
 		</FormGroup>
 	{/if}
 
-	<div class="builder-content">
+	<div class="builder-content" class:no-selected={hideSelected}>
 		<!-- Header row -->
 		<div class="header-row">
-			<div class="col-default">Selected</div>
-			<div class="col-label">Label</div>
-			<div class="col-value">Value</div>
+			{#if !hideSelected}
+				<div class="col-default">Selected</div>
+			{/if}
+			<div class="col-label">{labelHeader}</div>
+			<div class="col-value">{valueHeader}</div>
 			<div class="col-actions"></div>
 		</div>
 
 		<!-- Existing items -->
 		{#each items as item, index (index)}
 			<div class="item-row">
-				<div class="col-default">
-					<Checkbox
-						checked={defaultValues.includes(item.value)}
-						onchange={(checked) => toggleDefault(item.value, checked)}
-					/>
-				</div>
+				{#if !hideSelected}
+					<div class="col-default">
+						<Checkbox
+							checked={defaultValues.includes(item.value)}
+							onchange={(checked) => toggleDefault(item.value, checked)}
+						/>
+					</div>
+				{/if}
 				<div class="col-label">
 					<input
+						bind:this={itemLabelInputs[index]}
 						type="text"
 						class="item-input"
 						value={item.label}
 						oninput={(e) => updateItemLabel(index, e.currentTarget.value)}
-						placeholder={labelPlaceholder}
+						onkeydown={handleItemKeyDown}
+						placeholder={effectiveLabelPlaceholder}
 					/>
 				</div>
 				<div class="col-value">
 					<input
+						bind:this={itemValueInputs[index]}
 						type="text"
 						class="item-input"
 						value={item.value}
 						oninput={(e) => updateItemValue(index, e.currentTarget.value)}
-						placeholder={valuePlaceholder}
+						onkeydown={handleItemKeyDown}
+						placeholder={effectiveValuePlaceholder}
 					/>
 				</div>
 				<div class="col-actions">
@@ -246,69 +265,35 @@
 
 		<!-- Add new item row -->
 		<div class="add-row">
-			<div class="col-default"></div>
+			{#if !hideSelected}
+				<div class="col-default"></div>
+			{/if}
 			<div class="col-label">
 				<input
 					bind:this={labelInputEl}
 					type="text"
 					class="item-input new-input"
-					class:error={isDuplicateNewLabel}
-					value={newLabel}
-					oninput={(e) => handleLabelInput(e.currentTarget.value)}
-					placeholder={labelPlaceholder}
-					onkeydown={handleKeyDown}
+					oninput={(e) => handleNewInput('label', e)}
+					placeholder={effectiveLabelPlaceholder}
 				/>
 			</div>
 			<div class="col-value">
 				<input
 					type="text"
 					class="item-input new-input"
-					class:error={isDuplicateNewValue}
-					value={newValue}
-					oninput={(e) => handleValueInput(e.currentTarget.value)}
-					placeholder={valuePlaceholder}
-					onkeydown={handleKeyDown}
-				/>
-			</div>
-			<div class="col-actions">
-				<ActionIcon
-					variant="auto-subtle"
-					svg={iconPlus}
-					size="1rem"
-					onclick={addItem}
-					disabled={!newLabel.trim() || !newValue.trim() || isDuplicateNewValue || isDuplicateNewLabel}
-					tooltip="Add item"
+					oninput={(e) => handleNewInput('value', e)}
+					placeholder={effectiveValuePlaceholder}
 				/>
 			</div>
+			<div class="col-actions"></div>
 		</div>
-
-		{#if isDuplicateNewLabel || isDuplicateNewValue}
-			<div class="error-message">
-				{#if isDuplicateNewLabel && isDuplicateNewValue}
-					Label "{newLabel}" and value "{newValue}" already exist
-				{:else if isDuplicateNewLabel}
-					Label "{newLabel}" already exists
-				{:else}
-					Value "{newValue}" already exists
-				{/if}
-			</div>
-		{/if}
-
-		<!-- Quick add button for mobile/convenience -->
-		{#if newLabel.trim() && newValue.trim() && !isDuplicateNewValue && !isDuplicateNewLabel}
-			<div class="quick-add">
-				<Button variant="auto-subtle" onclick={addItem}>
-					Add "{newLabel}"
-				</Button>
-			</div>
-		{/if}
 	</div>
 
 	<!-- Summary -->
 	{#if items.length > 0}
 		<div class="summary">
 			<span class="summary-count">{items.length} item{items.length !== 1 ? 's' : ''}</span>
-			{#if defaultValues.length > 0}
+			{#if !hideSelected && defaultValues.length > 0}
 				<span class="summary-default">
 					Selected: {defaultLabels}
 				</span>
@@ -323,21 +308,27 @@
 	}
 
 	.builder-content {
-		border: 1px solid var(--pui-border-default);
-		border-radius: var(--pui-radius-md);
+		border: 1px solid var(--border-color);
+		border-radius: 0.375rem;
 		overflow: hidden;
 	}
 
+	.no-selected .header-row,
+	.no-selected .item-row,
+	.no-selected .add-row {
+		grid-template-columns: 1fr 1fr 2.5rem;
+	}
+
 	.header-row {
 		display: grid;
 		grid-template-columns: 3.5rem 1fr 1fr 2.5rem;
-		gap: var(--pui-spacing-2);
-		padding: var(--pui-spacing-2) var(--pui-spacing-3);
-		background-color: var(--pui-input-bg);
-		border-bottom: 1px solid var(--pui-border-default);
-		font-size: var(--pui-font-size-xs);
-		font-weight: var(--pui-font-weight-semibold);
-		color: var(--pui-text-muted);
+		gap: 0.5rem;
+		padding: 0.5rem 0.75rem;
+		background-color: var(--input-bg-color);
+		border-bottom: 1px solid var(--border-color);
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: var(--text-muted);
 		text-transform: uppercase;
 		letter-spacing: 0.025em;
 	}
@@ -346,18 +337,18 @@
 	.add-row {
 		display: grid;
 		grid-template-columns: 3.5rem 1fr 1fr 2.5rem;
-		gap: var(--pui-spacing-2);
-		padding: var(--pui-spacing-2) var(--pui-spacing-3);
+		gap: 0.5rem;
+		padding: 0.5rem 0.75rem;
 		align-items: center;
-		border-bottom: 1px solid var(--pui-border-default);
+		border-bottom: 1px solid var(--border-color);
 	}
 
 	.item-row:last-of-type {
-		border-bottom: 1px solid var(--pui-border-default);
+		border-bottom: 1px solid var(--border-color);
 	}
 
 	.add-row {
-		background-color: var(--pui-bg-subtle);
+		background-color: rgba(var(--ui-primary-rgbc), 0.02);
 		border-bottom: none;
 	}
 
@@ -375,71 +366,47 @@
 
 	.item-input {
 		width: 100%;
-		padding: var(--pui-spacing-1_5) var(--pui-spacing-2);
-		border: 1px solid var(--pui-border-default);
-		border-radius: var(--pui-radius-sm);
-		background-color: var(--pui-input-bg);
-		color: var(--pui-text-primary);
-		font-size: var(--pui-font-size-sm);
-		transition: border-color var(--pui-transition-fast) var(--pui-ease-in-out);
+		padding: 0.375rem 0.5rem;
+		border: 1px solid var(--border-color);
+		border-radius: 0.25rem;
+		background-color: var(--input-bg-color);
+		color: var(--text-color);
+		font-size: 0.875rem;
+		transition: border-color 0.15s;
 	}
 
 	.item-input:focus {
 		outline: none;
-		border-color: var(--pui-input-border-focus);
+		border-color: var(--accent-color);
 	}
 
 	.item-input::placeholder {
-		color: var(--pui-text-placeholder);
+		color: var(--placeholder-color);
 	}
 
 	.new-input {
 		background-color: transparent;
 	}
 
-	.item-input.error {
-		border-color: var(--pui-text-danger);
-	}
-
-	.item-input.error:focus {
-		border-color: var(--pui-text-danger);
-	}
-
-	.error-message {
-		padding: var(--pui-spacing-1_5) var(--pui-spacing-3);
-		font-size: var(--pui-font-size-xs);
-		color: var(--pui-text-danger);
-		background-color: var(--pui-bg-subtle);
-	}
-
-	.quick-add {
-		padding: var(--pui-spacing-2) var(--pui-spacing-3);
-		background-color: var(--pui-bg-subtle);
-		display: flex;
-		justify-content: flex-end;
-	}
-
 	.summary {
 		display: flex;
-		gap: var(--pui-spacing-4);
-		padding: var(--pui-spacing-2) 0;
-		font-size: var(--pui-font-size-sm);
-		color: var(--pui-text-muted);
-		margin-top: var(--pui-spacing-2);
+		gap: 1rem;
+		padding: 0.5rem 0;
+		font-size: 0.875rem;
+		color: var(--text-muted);
+		margin-top: 0.5rem;
 	}
 
 	.summary-count {
-		font-weight: var(--pui-font-weight-medium);
+		font-weight: 500;
 	}
 
 	.summary-default {
-		color: var(--pui-accent-color);
+		color: var(--accent-color);
 	}
 
-	:global(.dark) .add-row,
-	:global(.dark) .quick-add,
-	:global(.dark) .error-message {
-		background-color: var(--pui-bg-subtle);
+	:global(.dark) .add-row {
+		background-color: rgba(var(--ui-accent-rgbc), 0.02);
 	}
 
 	/* Responsive adjustments */
@@ -448,13 +415,19 @@
 		.item-row,
 		.add-row {
 			grid-template-columns: 2.5rem 1fr 1fr 2rem;
-			gap: var(--pui-spacing-1);
-			padding: var(--pui-spacing-1_5) var(--pui-spacing-2);
+			gap: 0.25rem;
+			padding: 0.375rem 0.5rem;
+		}
+
+		.no-selected .header-row,
+		.no-selected .item-row,
+		.no-selected .add-row {
+			grid-template-columns: 1fr 1fr 2rem;
 		}
 
 		.item-input {
-			padding: var(--pui-spacing-1) var(--pui-spacing-1_5);
-			font-size: var(--pui-font-size-sm);
+			padding: 0.25rem 0.375rem;
+			font-size: 0.8125rem;
 		}
 	}
 </style>

package/dist/form/ComboBoxItemBuilder.svelte.d.ts

@@ -1,13 +1,30 @@
 import type { ComboBoxItem } from '../models/ComboBoxItem.js';
-interface Props {
+export interface ComboBoxItemBuilderProps {
+    /** Label text displayed above the builder */
     label?: string;
+    /** Array of combo box items (bindable) */
     items?: ComboBoxItem[];
+    /** Array of default selected values (bindable) */
     defaultValues?: string[];
+    /** Header text for the label column */
+    labelHeader?: string;
+    /** Header text for the value column */
+    valueHeader?: string;
+    /** Placeholder for label input field (defaults to labelHeader) */
     labelPlaceholder?: string;
+    /** Placeholder for value input field (defaults to valueHeader) */
     valuePlaceholder?: string;
+    /** Hide the "Selected" column and skip default-value tracking */
+    hideSelected?: boolean;
+    /** Disable auto-copying the label into the value field */
+    disableValueSync?: boolean;
+    /** Allow multiple items to share the same value. Note: default-value tracking is keyed by value, so items sharing a value also share their selected state */
+    allowDuplicateValues?: boolean;
+    /** Additional CSS classes */
     class?: string;
+    /** Callback when items or default values change */
     onchange?: (items: ComboBoxItem[], defaultValues: string[]) => void;
 }
-declare const ComboBoxItemBuilder: import("svelte").Component<Props, {}, "items" | "defaultValues">;
+declare const ComboBoxItemBuilder: import("svelte").Component<ComboBoxItemBuilderProps, {}, "items" | "defaultValues">;
 type ComboBoxItemBuilder = ReturnType<typeof ComboBoxItemBuilder>;
 export default ComboBoxItemBuilder;