v/src/mtas/svelte/components/FieldEditor.svelte

<script lang="ts">
    import type { MetadataField } from '../../lib';
    import FieldValueEditor from './FieldValueEditor.svelte';
    import type {GlobInstance} from "@/glob/lib";

    let {
        fieldKey, field,
        attributes = [],
        glob,
        onKeyChange, onFieldChange,
    }: {
        fieldKey: string;
        field: MetadataField;
        attributes?: string[];
        glob: GlobInstance;
        onKeyChange: (newKey: string) => void;
        onFieldChange: (field: MetadataField) => void;
    } = $props();

    let editKey  = $state(fieldKey);
    let keyError = $state('');

    $effect(() => { editKey = fieldKey; });

    let asBase      = $derived(field as MetadataField & { hidden?: boolean; attrs?: string[] });
    let activeAttrs = $derived(asBase.attrs ?? []);

    function handleKeyCommit(): void {
        const trimmed = editKey.trim();
        if (!trimmed) {
            keyError = glob.t('vcen.editor.mtas.editor.keyEmpty');
            editKey  = fieldKey;
            return;
        }
        keyError = '';
        if (trimmed !== fieldKey) onKeyChange(trimmed);
    }

    function handleKeydown(e: KeyboardEvent): void {
        e.stopPropagation();
        if (e.key === 'Enter')  (e.currentTarget as HTMLInputElement).blur();
        if (e.key === 'Escape') { editKey = fieldKey; keyError = ''; (e.currentTarget as HTMLInputElement).blur(); }
    }

    function update(partial: Partial<MetadataField & { hidden?: boolean; attrs?: string[] }>): void {
        onFieldChange({ ...field, ...partial } as MetadataField);
    }

    function toggleAttr(attr: string): void {
        const current = asBase.attrs ?? [];
        const next = current.includes(attr) ? current.filter(a => a !== attr) : [...current, attr];
        update({ attrs: next });
    }
</script>

<div class="flex flex-col gap-4 p-4">

    <!-- ── Field key ──────────────────────────────────────────────── -->
    <fieldset class="fieldset w-full">
        <legend class="fieldset-legend">
            {glob.t('vcen.editor.mtas.editor.keyLabel')}
        </legend>
        <input
            value={editKey}
            oninput={(e) => { editKey = (e.currentTarget as HTMLInputElement).value; keyError = ''; }}
            onblur={handleKeyCommit}
            onkeydown={handleKeydown}
            class={['input input-bordered w-full font-mono', keyError ? 'input-error' : ''].join(' ')}
            placeholder={glob.t('vcen.editor.mtas.editor.keyPlaceholder')}
        />
        {#if keyError}
            <span class="fieldset-label text-error">{keyError}</span>
        {/if}
    </fieldset>

    <!-- ── Value editor ───────────────────────────────────────────── -->
    <FieldValueEditor {field} {glob} {onFieldChange} />

    <!-- ── Attributes ────────────────────────────────────────────── -->
    {#if attributes.length > 0}
        <div class="divider my-0 text-xs text-base-content/30">Atributos</div>
        <div class="flex flex-wrap gap-1.5">
            {#each attributes as attr (attr)}
                {@const active = activeAttrs.includes(attr)}
                <button
                    type="button"
                    onclick={() => toggleAttr(attr)}
                    class={[
                        'badge badge-md cursor-pointer select-none transition-all gap-1',
                        active
                            ? 'badge-primary'
                            : 'badge-ghost border border-base-300 hover:border-primary/40',
                    ].join(' ')}
                >
                    {#if active}
                        <svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M2 6l3 3 5-5"/>
                        </svg>
                    {/if}
                    {attr}
                </button>
            {/each}
        </div>
    {/if}

    <!-- ── Hidden toggle ──────────────────────────────────────────── -->
    <div class="divider my-0"></div>
    <label class="flex items-center gap-3 cursor-pointer">
        <input
            type="checkbox"
            checked={asBase.hidden ?? false}
            onchange={(e) => update({ hidden: (e.currentTarget as HTMLInputElement).checked })}
            class="toggle toggle-sm toggle-primary"
        />
        <span class="text-sm text-base-content/70">{glob.t('vcen.editor.mtas.editor.hideField')}</span>
    </label>

</div>