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

.

Browse Source
master
dev 7 months ago
parent 9c0e24dab1
commit d1fbf455cf
5 changed files with 11 additions and 90 deletions
Show Stats Download Patch File Download Diff File

2
src/mtas/lib/guards.ts
Unescape View File

@ -24,7 +24,7 @@ export function isValidUrl(value: string): boolean {
const KNOWN_TYPES: MetadataFieldType[] = [
'string','number','boolean','ling','date','datetime',
'url','currency','image','video','audio','pdf','file','group',
'url','currency','image','video','audio','pdf','file','html','group',
];

6
src/mtas/svelte/components/AddFieldDrawer.svelte
Unescape View File

@ -29,14 +29,14 @@
let fieldValue = $state<MetadataField>(defaultForType(selectedType));
let keyError = $state('');
let wasOpen = $state(false);
let prevOpen = false;
$effect(() => {
if (open && !wasOpen) {
if (open && !prevOpen) {
fieldKey = suggestKey(selectedType);
fieldValue = defaultForType(selectedType);
keyError = '';
}
wasOpen = open;
prevOpen = open;
});
function suggestKey(type: MetadataFieldType): string {

3
src/mtas/svelte/components/FieldRow.svelte
Unescape View File

@ -148,8 +148,6 @@
<div
id="field-row-{fieldKey}"
role="listitem"
aria-label={fieldKey}
class={[
'card bg-base-100 border transition-all duration-150 flex-row focus-within:border-base-content w-full',
depth > 0 ? 'ml-5' : '',
@ -187,7 +185,6 @@
<div
role="button"
tabindex="0"
onkeydown={handleExpandKey}
class={[
'flex cursor-pointer items-center gap-3 px-4 focus-visible:outline-none',

7
src/mtas/svelte/components/MetadataEditor.svelte
Unescape View File

@ -104,8 +104,6 @@
const newOrder = [...keyOrder, key];
value = { ...value, [key]: field, order: newOrder };
emit();
// Ir a la última página donde aparece el nuevo campo
if (pageSize > 0) page = Math.ceil(newOrder.length / pageSize);
}
function updateFieldKey(oldKey: string, newKey: string): void {
@ -152,7 +150,8 @@
}
</script>
<div data-theme={dark ? 'dark' : 'light'} class="card bg-base-100 border border-base-200 shadow-sm w-full">
<div data-theme={dark ? 'dark' : 'light'}>
<div class="card bg-base-100 border border-base-200 shadow-sm w-full">
<!-- ── Header ──────────────────────────────────────────────────── -->
<div class="card-body gap-4 pb-3 border-b border-base-200">
@ -292,7 +291,7 @@
</div>
{/if}
</div>
</div>
<AddFieldDrawer

83
src/mtas/svelte/demo/App.svelte
Unescape View File

@ -49,9 +49,8 @@
style="font-family: 'Poppins', sans-serif;">
<!-- ── Background grid ────────────────────────────────────────── -->
<div class="pointer-events-none fixed inset-0 opacity-[0.03] dark:opacity-[0.06]"
style="background-image: linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px); background-size: 32px 32px;">
</div>
<!-- ── Header ─────────────────────────────────────────────────── -->
<header class="relative border-b border-zinc-200 bg-white/80 backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/80">
@ -173,50 +172,7 @@
<div class="h-px flex-1 bg-zinc-100 dark:bg-zinc-800"></div>
</div>
<div class="flex flex-col gap-4 rounded-xl border border-zinc-200 bg-white p-4
dark:border-zinc-800 dark:bg-zinc-900">
<!-- textarea mode -->
<LingInput
value={lingValue}
{locales}
{defaultLocale}
label="Descripción"
placeholder="Escribe aquí…"
required={true}
invalid={lingInvalid}
as="textarea"
rows={3}
onUpdate={(v) => lingValue = v}
/>
<!-- input mode -->
<LingInput
value={lingValue}
{locales}
{defaultLocale}
label="Título"
as="input"
onUpdate={(v) => lingValue = v}
/>
<!-- Invalid toggle -->
<div class="flex items-center gap-2 border-t border-zinc-100 pt-3 dark:border-zinc-800">
<span class="font-mono text-[10px] text-zinc-400">Simular inválido</span>
<button
onclick={() => lingInvalid = !lingInvalid}
class={[
'relative h-5 w-9 rounded-full transition-colors duration-200',
lingInvalid ? 'bg-red-400' : 'bg-zinc-200 dark:bg-zinc-700',
].join(' ')}
>
<span class={[
'absolute top-0.5 h-4 w-4 rounded-full bg-white shadow transition-transform duration-200',
lingInvalid ? 'translate-x-4' : 'translate-x-0.5',
].join(' ')}></span>
</button>
</div>
</div>
</div>
<!-- Stats card -->
@ -238,38 +194,7 @@
</div>
</div>
<!-- Type legend -->
<div class="rounded-xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
<p class="mb-3 font-mono text-[10px] font-bold uppercase tracking-[0.16em] text-zinc-400 dark:text-zinc-600">
Tipos disponibles
</p>
<div class="flex flex-wrap gap-1.5">
{#each ['string','number','boolean','ling','date','datetime','url','currency','image','video','audio','pdf','file','group'] as type}
{@const colors: Record<string, string> = {
string: 'bg-sky-50 text-sky-500 border-sky-200 dark:bg-sky-900/20 dark:text-sky-400 dark:border-sky-800',
number: 'bg-violet-50 text-violet-500 border-violet-200 dark:bg-violet-900/20 dark:text-violet-400 dark:border-violet-800',
boolean: 'bg-amber-50 text-amber-500 border-amber-200 dark:bg-amber-900/20 dark:text-amber-400 dark:border-amber-800',
ling: 'bg-emerald-50 text-emerald-500 border-emerald-200 dark:bg-emerald-900/20 dark:text-emerald-400 dark:border-emerald-800',
date: 'bg-orange-50 text-orange-500 border-orange-200 dark:bg-orange-900/20 dark:text-orange-400 dark:border-orange-800',
datetime: 'bg-rose-50 text-rose-500 border-rose-200 dark:bg-rose-900/20 dark:text-rose-400 dark:border-rose-800',
url: 'bg-cyan-50 text-cyan-500 border-cyan-200 dark:bg-cyan-900/20 dark:text-cyan-400 dark:border-cyan-800',
currency: 'bg-lime-50 text-lime-500 border-lime-200 dark:bg-lime-900/20 dark:text-lime-400 dark:border-lime-800',
image: 'bg-pink-50 text-pink-500 border-pink-200 dark:bg-pink-900/20 dark:text-pink-400 dark:border-pink-800',
video: 'bg-red-50 text-red-500 border-red-200 dark:bg-red-900/20 dark:text-red-400 dark:border-red-800',
audio: 'bg-purple-50 text-purple-500 border-purple-200 dark:bg-purple-900/20 dark:text-purple-400 dark:border-purple-800',
pdf: 'bg-zinc-100 text-zinc-500 border-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-700',
file: 'bg-teal-50 text-teal-500 border-teal-200 dark:bg-teal-900/20 dark:text-teal-400 dark:border-teal-800',
group: 'bg-indigo-50 text-indigo-500 border-indigo-200 dark:bg-indigo-900/20 dark:text-indigo-400 dark:border-indigo-800',
}}
<span class={[
'rounded border px-1.5 py-0.5 font-mono text-[9px] font-bold uppercase tracking-widest',
colors[type] ?? '',
].join(' ')}>
{type}
</span>
{/each}
</div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.