You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
2.2 KiB
43 lines
2.2 KiB
7 months ago
|
<script lang="ts">
|
||
|
|
import type { PdfField } from '../../../lib';
|
||
|
|
import type { MetadataField } from '../../../lib';
|
||
|
|
import type { GlobState } from '@/glob/adapters/svelte';
|
||
|
|
|
||
|
|
let { field, glob, onFieldChange }: {
|
||
|
|
field: PdfField;
|
||
|
|
glob: GlobState;
|
||
|
|
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) {
|
||
|
|
case 'url': onFieldChange({ ...field, value: { ...field.value, url: str } }); break;
|
||
|
|
case 'pages': { const v = parseInt(str); onFieldChange({ ...field, value: { ...field.value, ...(isNaN(v) ? {} : { pages: v }) } }); break; }
|
||
|
|
case 'author': onFieldChange({ ...field, value: { ...field.value, author: str } }); break;
|
||
|
|
case 'title': onFieldChange({ ...field, value: { ...field.value, title: str } }); break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</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://…" />
|
||
|
|
</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>
|
||
|
|
<input type="number" value={field.value.pages ?? ''} oninput={(e) => handle(e, 'pages')} class={cls} />
|
||
|
|
</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>
|
||
|
|
<input type="text" value={field.value.author ?? ''} oninput={(e) => handle(e, 'author')} class={cls} />
|
||
|
|
</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>
|
||
|
|
<input type="text" value={field.value.title ?? ''} oninput={(e) => handle(e, 'title')} class={cls} />
|
||
|
|
</div>
|
||
|
|
</div>
|