108 lines
2.8 KiB
Svelte
108 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import { Plus, X } from '@lucide/svelte';
|
|
import { Input } from '$lib/components/ui/input';
|
|
import { autoResizeTextarea } from '$lib/utils';
|
|
import type { KeyValuePair } from '$lib/types';
|
|
|
|
interface Props {
|
|
pairs: KeyValuePair[];
|
|
onPairsChange: (pairs: KeyValuePair[]) => void;
|
|
keyPlaceholder?: string;
|
|
valuePlaceholder?: string;
|
|
addButtonLabel?: string;
|
|
emptyMessage?: string;
|
|
sectionLabel?: string;
|
|
sectionLabelOptional?: boolean;
|
|
}
|
|
|
|
let {
|
|
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, key: string) {
|
|
const newPairs = [...pairs];
|
|
newPairs[index] = { ...newPairs[index], key };
|
|
onPairsChange(newPairs);
|
|
}
|
|
|
|
function updatePairValue(index: number, value: string) {
|
|
const newPairs = [...pairs];
|
|
newPairs[index] = { ...newPairs[index], value };
|
|
onPairsChange(newPairs);
|
|
}
|
|
</script>
|
|
|
|
<div>
|
|
<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-center gap-2">
|
|
<Input
|
|
type="text"
|
|
placeholder={keyPlaceholder}
|
|
value={pair.key}
|
|
oninput={(e) => updatePairKey(index, e.currentTarget.value)}
|
|
class="flex-1"
|
|
/>
|
|
|
|
<textarea
|
|
placeholder={valuePlaceholder}
|
|
value={pair.value}
|
|
oninput={(e) => {
|
|
updatePairValue(index, e.currentTarget.value);
|
|
autoResizeTextarea(e.currentTarget);
|
|
}}
|
|
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="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"
|
|
>
|
|
<X class="h-3.5 w-3.5" />
|
|
</button>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<p class="text-xs text-muted-foreground">{emptyMessage}</p>
|
|
{/if}
|
|
</div>
|