KeyValuePairs.svelte

<script lang="ts">
	import { Plus, Trash2 } from '@lucide/svelte';
	import { Input } from '$lib/components/ui/input';
	import {
		autoResizeTextarea,
		sanitizeKeyValuePairKey,
		sanitizeKeyValuePairValue
	} from '$lib/utils';
	import { KEY_VALUE_PAIR_KEY_MAX_LENGTH, KEY_VALUE_PAIR_VALUE_MAX_LENGTH } from '$lib/constants';
	import type { KeyValuePair } from '$lib/types';

	interface Props {
		class?: string;
		pairs: KeyValuePair[];
		onPairsChange: (pairs: KeyValuePair[]) => void;
		keyPlaceholder?: string;
		valuePlaceholder?: string;
		addButtonLabel?: string;
		emptyMessage?: string;
		sectionLabel?: string;
		sectionLabelOptional?: boolean;
	}

	let {
		class: className = '',
		pairs,
		onPairsChange,
		keyPlaceholder = 'Key',
		valuePlaceholder = 'Value',
		addButtonLabel = 'Add',
		emptyMessage = 'No items configured.',
		sectionLabel,
		sectionLabelOptional = true
	}: Props = $props();

	function addPair() {
		onPairsChange([...pairs, { key: '', value: '' }]);
	}

	function removePair(index: number) {
		onPairsChange(pairs.filter((_, i) => i !== index));
	}

	function updatePairKey(index: number, rawKey: string) {
		const key = sanitizeKeyValuePairKey(rawKey);
		const newPairs = [...pairs];

		newPairs[index] = { ...newPairs[index], key };
		onPairsChange(newPairs);
	}

	function trimPairKey(index: number, key: string) {
		const trimmed = key.trim();
		if (trimmed === key) return;

		const newPairs = [...pairs];

		newPairs[index] = { ...newPairs[index], key: trimmed };
		onPairsChange(newPairs);
	}

	function updatePairValue(index: number, rawValue: string) {
		const value = sanitizeKeyValuePairValue(rawValue);
		const newPairs = [...pairs];

		newPairs[index] = { ...newPairs[index], value };
		onPairsChange(newPairs);
	}

	function trimPairValue(index: number, value: string) {
		const trimmed = value.trim();
		if (trimmed === value) return;

		const newPairs = [...pairs];

		newPairs[index] = { ...newPairs[index], value: trimmed };
		onPairsChange(newPairs);
	}
</script>

<div class={className}>
	<div class="mb-2 flex items-center justify-between">
		{#if sectionLabel}
			<span class="text-xs font-medium">
				{sectionLabel}
				{#if sectionLabelOptional}
					<span class="text-muted-foreground">(optional)</span>
				{/if}
			</span>
		{/if}

		<button
			type="button"
			class="inline-flex cursor-pointer items-center gap-1 rounded-md px-1.5 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
			onclick={addPair}
		>
			<Plus class="h-3 w-3" />
			{addButtonLabel}
		</button>
	</div>
	{#if pairs.length > 0}
		<div class="space-y-3">
			{#each pairs as pair, index (index)}
				<div class="flex items-start gap-2">
					<Input
						type="text"
						placeholder={keyPlaceholder}
						value={pair.key}
						maxlength={KEY_VALUE_PAIR_KEY_MAX_LENGTH}
						oninput={(e) => updatePairKey(index, e.currentTarget.value)}
						onblur={(e) => trimPairKey(index, e.currentTarget.value)}
						class="flex-1"
					/>

					<textarea
						use:autoResizeTextarea
						placeholder={valuePlaceholder}
						value={pair.value}
						maxlength={KEY_VALUE_PAIR_VALUE_MAX_LENGTH}
						oninput={(e) => {
							updatePairValue(index, e.currentTarget.value);
							autoResizeTextarea(e.currentTarget);
						}}
						onblur={(e) => trimPairValue(index, e.currentTarget.value)}
						class="flex-1 resize-none rounded-md border border-input bg-transparent px-3 py-2 text-sm leading-5 placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
						rows="1"
					></textarea>

					<button
						type="button"
						class="mt-1.5 shrink-0 cursor-pointer rounded-md p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
						onclick={() => removePair(index)}
						aria-label="Remove item"
					>
						<Trash2 class="h-3.5 w-3.5" />
					</button>
				</div>
			{/each}
		</div>
	{:else}
		<p class="text-xs text-muted-foreground">{emptyMessage}</p>
	{/if}
</div>