go
/
v
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(vcen-edit): unifica estilos de metas fields con el editor

Browse Source 
- Cambia clases inline a clases CSS estándar (field-input, ve-label)
- 19 componentes adaptados al estilo visual del editor
- Elimina código duplicado (variables cls innecesarias)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
glm
dev 7 months ago
parent 0e85c236d5
commit 4212e8168c
19 changed files with 76 additions and 90 deletions
Show Stats Download Patch File Download Diff File

18
src/vcen-edit/comps/metas/AudioField.svelte
Unescape View File

@ -9,8 +9,6 @@
onFieldChange: (field: MetadataField) => void;
} = $props();
const cls = 'rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full';
function handle(e: Event, action: string): void {
const str = (e.target as HTMLInputElement).value;
switch (action) {
@ -23,20 +21,20 @@
</script>
<div class="flex flex-col gap-1 w-full">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
<input type="text" value={field.value.url} oninput={(e) => handle(e, 'url')} class="{cls} font-mono" placeholder="/ruta o https://…" />
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
<input type="text" value={field.value.url} oninput={(e) => handle(e, 'url')} class="field-input font-mono" placeholder="/ruta o https://..." />
</div>
<div class="flex gap-3">
<div class="flex flex-col gap-1 flex-1">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.audDuration')}</label>
<input type="number" value={field.value.duration ?? ''} oninput={(e) => handle(e, 'duration')} class={cls} placeholder="s" />
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.audDuration')}</label>
<input type="number" value={field.value.duration ?? ''} oninput={(e) => handle(e, 'duration')} class="field-input" placeholder="s" />
</div>
<div class="flex flex-col gap-1 flex-1">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.audBitrate')}</label>
<input type="number" value={field.value.bitrate ?? ''} oninput={(e) => handle(e, 'bitrate')} class={cls} placeholder="kbps" />
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.audBitrate')}</label>
<input type="number" value={field.value.bitrate ?? ''} oninput={(e) => handle(e, 'bitrate')} class="field-input" placeholder="kbps" />
</div>
<div class="flex flex-col gap-1 w-28">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.audChannels')}</label>
<input type="number" value={field.value.channels ?? ''} oninput={(e) => handle(e, 'channels')} class={cls} placeholder="1/2" />
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.audChannels')}</label>
<input type="number" value={field.value.channels ?? ''} oninput={(e) => handle(e, 'channels')} class="field-input" placeholder="1/2" />
</div>
</div>

2
src/vcen-edit/comps/metas/BooleanField.svelte
Unescape View File

@ -14,7 +14,7 @@
</script>
<div class="flex items-center gap-4 py-1">
<input type="checkbox" checked={field.value} onchange={onChange} class="h-4 w-8 rounded-full cursor-pointer appearance-none bg-gray-700 checked:bg-indigo-600 transition-colors" />
<input type="checkbox" checked={field.value} onchange={onChange} class="ve-checkbox" />
<span class="text-sm text-gray-200">{field.value
? glob.t('vcen.editor.mtas.field.boolTrue')
: glob.t('vcen.editor.mtas.field.boolFalse')

4
src/vcen-edit/comps/metas/ColorField.svelte
Unescape View File

@ -15,8 +15,8 @@
<div class="flex items-end gap-4">
<div class="flex flex-col gap-1 flex-1">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.colorHex')}</label>
<input type="text" value={field.value.hex} oninput={onInput} class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full font-mono uppercase" placeholder="#000000" maxlength="9" />
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.colorHex')}</label>
<input type="text" value={field.value.hex} oninput={onInput} class="field-input font-mono uppercase" placeholder="#000000" maxlength="9" />
</div>
<input type="color" value={field.value.hex} oninput={onInput}
class="h-10 w-14 cursor-pointer rounded-lg border border-gray-700 bg-transparent p-0.5" />

14
src/vcen-edit/comps/metas/CoordinatesField.svelte
Unescape View File

@ -8,8 +8,6 @@
onFieldChange: (field: MetadataField) => void;
} = $props();
const cls = 'rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full';
function handle(e: Event, action: string): void {
const str = (e.target as HTMLInputElement).value;
switch (action) {
@ -22,15 +20,15 @@
<div class="flex gap-3">
<div class="flex flex-col gap-1 flex-1">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.coordLat')}</label>
<input type="number" step="any" value={field.value.lat} oninput={(e) => handle(e, 'lat')} class={cls} placeholder="0" />
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.coordLat')}</label>
<input type="number" step="any" value={field.value.lat} oninput={(e) => handle(e, 'lat')} class="field-input" placeholder="0" />
</div>
<div class="flex flex-col gap-1 flex-1">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.coordLng')}</label>
<input type="number" step="any" value={field.value.lng} oninput={(e) => handle(e, 'lng')} class={cls} placeholder="0" />
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.coordLng')}</label>
<input type="number" step="any" value={field.value.lng} oninput={(e) => handle(e, 'lng')} class="field-input" placeholder="0" />
</div>
<div class="flex flex-col gap-1 w-24">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.coordZoom')}</label>
<input type="number" value={field.value.zoom ?? ''} oninput={(e) => handle(e, 'zoom')} class={cls} placeholder="12" />
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.coordZoom')}</label>
<input type="number" value={field.value.zoom ?? ''} oninput={(e) => handle(e, 'zoom')} class="field-input" placeholder="12" />
</div>
</div>

12
src/vcen-edit/comps/metas/CurrencyField.svelte
Unescape View File

@ -8,8 +8,6 @@
onFieldChange: (field: MetadataField) => void;
} = $props();
const cls = 'rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full';
let currencies = $derived(glob.curr.getCurrencies());
let formatted = $derived((() => {
const { amount, currency } = field.value;
@ -31,20 +29,20 @@
<div class="flex gap-3">
<div class="flex flex-col gap-1 flex-1">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.amountLabel')}</label>
<input type="number" value={field.value.amount} oninput={(e) => handle(e, 'amount')} class={cls} />
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.amountLabel')}</label>
<input type="number" value={field.value.amount} oninput={(e) => handle(e, 'amount')} class="field-input" />
{#if formatted}
<span class="text-xs text-gray-500 mt-0.5">{formatted}</span>
{/if}
</div>
<div class="flex flex-col gap-1 w-28">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.currencyLabel')}</label>
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.currencyLabel')}</label>
{#if currencies.length <= 1}
<div class="{cls} flex items-center font-mono text-gray-500 cursor-default select-none">
<div class="field-input flex items-center font-mono text-gray-500 cursor-default select-none">
{field.value.currency}
</div>
{:else}
<select class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full font-mono uppercase"
<select class="field-input font-mono uppercase"
value={field.value.currency}
onchange={(e) => handle(e, 'currency')}>
{#each currencies as code}

4
src/vcen-edit/comps/metas/DateField.svelte
Unescape View File

@ -18,8 +18,8 @@
</script>
<div class="flex flex-col gap-1 w-full">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.types.date')}</label>
<input type="date" value={field.value || todayISO()} oninput={onInput} class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full" />
<label class="ve-label">{glob.t('vcen.editor.mtas.types.date')}</label>
<input type="date" value={field.value || todayISO()} oninput={onInput} class="field-input" />
{#if formatted}
<span class="text-xs text-gray-500 mt-0.5">{formatted}</span>
{/if}

4
src/vcen-edit/comps/metas/DateTimeField.svelte
Unescape View File

@ -18,8 +18,8 @@
</script>
<div class="flex flex-col gap-1 w-full">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.types.datetime')}</label>
<input type="datetime-local" value={(field.value || nowISO()).replace('Z', '')} oninput={onInput} class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full" />
<label class="ve-label">{glob.t('vcen.editor.mtas.types.datetime')}</label>
<input type="datetime-local" value={(field.value || nowISO()).replace('Z', '')} oninput={onInput} class="field-input" />
{#if formatted}
<span class="text-xs text-gray-500 mt-0.5">{formatted}</span>
{/if}

4
src/vcen-edit/comps/metas/EmailField.svelte
Unescape View File

@ -14,6 +14,6 @@
</script>
<div class="flex flex-col gap-1 w-full">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.types.email')}</label>
<input type="email" value={field.value} oninput={onInput} class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full" placeholder="user@example.com" />
<label class="ve-label">{glob.t('vcen.editor.mtas.types.email')}</label>
<input type="email" value={field.value} oninput={onInput} class="field-input" placeholder="user@example.com" />
</div>

4
src/vcen-edit/comps/metas/FileField.svelte
Unescape View File

@ -14,6 +14,6 @@
</script>
<div class="flex flex-col gap-1 w-full">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
<input type="text" value={field.value.url} oninput={onInput} class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full font-mono" placeholder="/ruta o https://…" />
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
<input type="text" value={field.value.url} oninput={onInput} class="field-input font-mono" placeholder="/ruta o https://..." />
</div>

18
src/vcen-edit/comps/metas/ImageField.svelte
Unescape View File

@ -8,8 +8,6 @@
onFieldChange: (field: MetadataField) => void;
} = $props();
const cls = 'rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full';
function handle(e: Event, action: string): void {
const inp = e.target as HTMLInputElement;
const sel = e.target as HTMLSelectElement;
@ -24,8 +22,8 @@
</script>
<div class="flex flex-col gap-1 w-full">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
<input type="text" value={field.value.url} oninput={(e) => handle(e, 'url')} class="{cls} font-mono" placeholder="/ruta o https://…" />
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
<input type="text" value={field.value.url} oninput={(e) => handle(e, 'url')} class="field-input font-mono" placeholder="/ruta o https://..." />
</div>
{#if field.value.url}
<figure class="rounded-lg overflow-hidden border border-gray-800">
@ -34,16 +32,16 @@
{/if}
<div class="flex gap-3">
<div class="flex flex-col gap-1 flex-1">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.imgWidth')}</label>
<input type="number" value={field.value.width ?? ''} oninput={(e) => handle(e, 'width')} class={cls} placeholder="px" />
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.imgWidth')}</label>
<input type="number" value={field.value.width ?? ''} oninput={(e) => handle(e, 'width')} class="field-input" placeholder="px" />
</div>
<div class="flex flex-col gap-1 flex-1">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.imgHeight')}</label>
<input type="number" value={field.value.height ?? ''} oninput={(e) => handle(e, 'height')} class={cls} placeholder="px" />
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.imgHeight')}</label>
<input type="number" value={field.value.height ?? ''} oninput={(e) => handle(e, 'height')} class="field-input" placeholder="px" />
</div>
<div class="flex flex-col gap-1 w-32">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.imgFormat')}</label>
<select class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full" value={field.value.format ?? ''} onchange={(e) => handle(e, 'format')}>
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.imgFormat')}</label>
<select class="field-input" value={field.value.format ?? ''} onchange={(e) => handle(e, 'format')}>
<option value="">—</option>
<option value="jpeg">JPEG</option>
<option value="png">PNG</option>

10
src/vcen-edit/comps/metas/MultiSelectField.svelte
Unescape View File

@ -22,8 +22,8 @@
<div class="flex flex-col gap-1.5">
<div class="flex items-center justify-between">
<span class="text-xs text-gray-500">{glob.t('vcen.editor.mtas.editor.selectOptions')}</span>
<button type="button" class="inline-flex items-center gap-1 px-2 py-1 text-xs rounded text-gray-500 hover:text-gray-300 hover:bg-gray-800 transition-colors"
<span class="ve-label">{glob.t('vcen.editor.mtas.editor.selectOptions')}</span>
<button type="button" class="text-gray-500 hover:text-gray-300 text-xs"
onclick={() => onFieldChange({ ...field, options: [...field.options, { value: `opt${field.options.length + 1}`, label: '' }] })}>
<svg class="h-3 w-3 fill-current" viewBox="0 0 16 16" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M8 2v12M2 8h12"/></svg>
{glob.t('vcen.editor.mtas.editor.selectAddOpt')}
@ -38,17 +38,17 @@
type="checkbox"
checked={field.value.includes(opt.value)}
onchange={(e) => handle(e, 'chk', opt.value)}
class="h-3.5 w-3.5 rounded border border-gray-600 bg-gray-800 checked:bg-indigo-600 checked:border-indigo-600 cursor-pointer appearance-none shrink-0"
class="ve-checkbox"
/>
<input
type="text"
value={opt.value} oninput={(e) => handle(e, 'opt-val', i)}
class="rounded border border-gray-700 bg-gray-800 px-2 py-1 text-xs text-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 flex-1 font-mono" placeholder={glob.t('vcen.editor.mtas.editor.selectOptValue')}
class="field-input text-xs flex-1 font-mono" placeholder={glob.t('vcen.editor.mtas.editor.selectOptValue')}
/>
<input
type="text"
value={opt.label} oninput={(e) => handle(e, 'opt-lbl', i)}
class="rounded border border-gray-700 bg-gray-800 px-2 py-1 text-xs text-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 flex-1" placeholder={glob.t('vcen.editor.mtas.editor.selectOptLabel')}
class="field-input text-xs flex-1" placeholder={glob.t('vcen.editor.mtas.editor.selectOptLabel')}
/>
<button
type="button" class="flex items-center justify-center w-6 h-6 rounded text-red-400 hover:bg-gray-800 transition-colors"

4
src/vcen-edit/comps/metas/NumberField.svelte
Unescape View File

@ -17,12 +17,12 @@
</script>
<div class="flex flex-col gap-1 w-full">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.types.number')}</label>
<label class="ve-label">{glob.t('vcen.editor.mtas.types.number')}</label>
<input
type="number"
value={field.value}
oninput={onInput}
class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"
class="field-input"
/>
{#if formatted}
<span class="text-xs text-gray-500 mt-0.5">{formatted}</span>

20
src/vcen-edit/comps/metas/PdfField.svelte
Unescape View File

@ -8,8 +8,6 @@
onFieldChange: (field: MetadataField) => void;
} = $props();
const cls = 'rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full';
function handle(e: Event, action: string): void {
const str = (e.target as HTMLInputElement).value;
switch (action) {
@ -22,38 +20,38 @@
</script>
<div class="flex flex-col gap-1 w-full">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
<input
type="text"
value={field.value.url} oninput={(e) => handle(e, 'url')}
class="{cls} font-mono"
placeholder="/ruta o https://…"
class="field-input font-mono"
placeholder="/ruta o https://..."
/>
</div>
<div class="flex gap-3">
<div class="flex flex-col gap-1 w-28">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.pdfPages')}</label>
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.pdfPages')}</label>
<input
type="number"
value={field.value.pages ?? ''}
oninput={(e) => handle(e, 'pages')} class={cls}
oninput={(e) => handle(e, 'pages')} class="field-input"
/>
</div>
<div class="flex flex-col gap-1 flex-1">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.pdfAuthor')}</label>
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.pdfAuthor')}</label>
<input
type="text"
value={field.value.author ?? ''}
oninput={(e) => handle(e, 'author')} class={cls}
oninput={(e) => handle(e, 'author')} class="field-input"
/>
</div>
<div class="flex flex-col gap-1 flex-1">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.pdfTitle')}</label>
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.pdfTitle')}</label>
<input
type="text"
value={field.value.title ?? ''}
oninput={(e) => handle(e, 'title')}
class={cls}
class="field-input"
/>
</div>
</div>

10
src/vcen-edit/comps/metas/PhoneField.svelte
Unescape View File

@ -8,8 +8,6 @@
onFieldChange: (field: MetadataField) => void;
} = $props();
const cls = 'rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full';
function handle(e: Event, action: string): void {
const str = (e.target as HTMLInputElement).value;
switch (action) {
@ -21,22 +19,22 @@
<div class="flex gap-3">
<div class="flex flex-col gap-1 w-28">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.phoneCode')}</label>
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.phoneCode')}</label>
<input
type="text"
value={field.value.countryCode ?? ''}
oninput={(e) => handle(e, 'code')}
class="{cls} font-mono"
class="field-input font-mono"
placeholder="+34"
/>
</div>
<div class="flex flex-col gap-1 flex-1">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.phoneNumber')}</label>
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.phoneNumber')}</label>
<input
type="tel"
value={field.value.number}
oninput={(e) => handle(e, 'number')}
class={cls} placeholder="600 000 000"
class="field-input" placeholder="600 000 000"
/>
</div>
</div>

12
src/vcen-edit/comps/metas/SelectField.svelte
Unescape View File

@ -22,8 +22,8 @@
</script>
<div class="flex flex-col gap-1 w-full">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.selectValue')}</label>
<select class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full" value={field.value ?? ''} onchange={(e) => handle(e, 'val')}>
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.selectValue')}</label>
<select class="field-input" value={field.value ?? ''} onchange={(e) => handle(e, 'val')}>
<option value="">—</option>
{#each field.options as opt}
<option value={opt.value}>{opt.label || opt.value}</option>
@ -32,10 +32,10 @@
</div>
<div class="flex flex-col gap-1.5">
<div class="flex items-center justify-between">
<span class="text-xs text-gray-500">{glob.t('vcen.editor.mtas.editor.selectOptions')}</span>
<span class="ve-label">{glob.t('vcen.editor.mtas.editor.selectOptions')}</span>
<button
type="button"
class="inline-flex items-center gap-1 px-2 py-1 text-xs rounded text-gray-500 hover:text-gray-300 hover:bg-gray-800 transition-colors"
class="text-gray-500 hover:text-gray-300 text-xs"
onclick={() => onFieldChange({ ...field, options: [...field.options, { value: `opt${field.options.length + 1}`, label: '' }] })}
>
<svg class="h-3 w-3 fill-current" viewBox="0 0 16 16" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
@ -53,14 +53,14 @@
type="text"
value={opt.value}
oninput={(e) => handle(e, 'opt-val', i)}
class="rounded border border-gray-700 bg-gray-800 px-2 py-1 text-xs text-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 flex-1 font-mono"
class="field-input text-xs flex-1 font-mono"
placeholder={glob.t('vcen.editor.mtas.editor.selectOptValue')}
/>
<input
type="text"
value={opt.label}
oninput={(e) => handle(e, 'opt-lbl', i)}
class="rounded border border-gray-700 bg-gray-800 px-2 py-1 text-xs text-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 flex-1"
class="field-input text-xs flex-1"
placeholder={glob.t('vcen.editor.mtas.editor.selectOptLabel')}
/>
<button

4
src/vcen-edit/comps/metas/SlugField.svelte
Unescape View File

@ -15,11 +15,11 @@
</script>
<div class="flex flex-col gap-1 w-full">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.types.slug')}</label>
<label class="ve-label">{glob.t('vcen.editor.mtas.types.slug')}</label>
<input
type="text"
value={field.value} oninput={onInput}
class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full font-mono"
class="field-input font-mono"
placeholder="my-slug"
/>
</div>

4
src/vcen-edit/comps/metas/StringField.svelte
Unescape View File

@ -14,13 +14,13 @@
</script>
<div class="flex flex-col gap-1 w-full">
<label class="text-xs font-medium text-gray-500">
<label class="ve-label">
{glob.t('vcen.editor.mtas.types.string')}
</label>
<input
type="text"
value={field.value}
oninput={onInput} class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"
oninput={onInput} class="field-input"
placeholder="Texto…"
/>
</div>

4
src/vcen-edit/comps/metas/UrlField.svelte
Unescape View File

@ -14,6 +14,6 @@
</script>
<div class="flex flex-col gap-1 w-full">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.types.url')}</label>
<input type="url" value={field.value} oninput={onInput} class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full font-mono" placeholder="https://…" />
<label class="ve-label">{glob.t('vcen.editor.mtas.types.url')}</label>
<input type="url" value={field.value} oninput={onInput} class="field-input font-mono" placeholder="https://..." />
</div>

14
src/vcen-edit/comps/metas/VideoField.svelte
Unescape View File

@ -8,8 +8,6 @@
onFieldChange: (field: MetadataField) => void;
} = $props();
const cls = 'rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full';
function handle(e: Event, action: string): void {
const str = (e.target as HTMLInputElement).value;
switch (action) {
@ -21,16 +19,16 @@
</script>
<div class="flex flex-col gap-1 w-full">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
<input type="text" value={field.value.url} oninput={(e) => handle(e, 'url')} class="{cls} font-mono" placeholder="/ruta o https://…" />
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
<input type="text" value={field.value.url} oninput={(e) => handle(e, 'url')} class="field-input font-mono" placeholder="/ruta o https://..." />
</div>
<div class="flex gap-3">
<div class="flex flex-col gap-1 flex-1">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.vidDuration')}</label>
<input type="number" value={field.value.duration ?? ''} oninput={(e) => handle(e, 'duration')} class={cls} placeholder="s" />
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.vidDuration')}</label>
<input type="number" value={field.value.duration ?? ''} oninput={(e) => handle(e, 'duration')} class="field-input" placeholder="s" />
</div>
<div class="flex flex-col gap-1 flex-1">
<label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.vidPoster')}</label>
<input type="text" value={field.value.poster ?? ''} oninput={(e) => handle(e, 'poster')} class="{cls} font-mono" placeholder="https://…" />
<label class="ve-label">{glob.t('vcen.editor.mtas.editor.vidPoster')}</label>
<input type="text" value={field.value.poster ?? ''} oninput={(e) => handle(e, 'poster')} class="field-input font-mono" placeholder="https://..." />
</div>
</div>

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.