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.
238 lines
13 KiB
238 lines
13 KiB
<script lang="ts">
|
|
import './app.css';
|
|
import MetadataEditor from '../components/MetadataEditor.svelte';
|
|
import { ling as lingInstance } from '@/ling/lib'
|
|
import LingInput from '@/ling/svelte/LingInput.svelte';
|
|
import {type Metadata} from '../../lib';
|
|
import {createLing, type LingNode, type LingRecord, p} from '@/ling/lib';
|
|
import {createGlob, type CurrDefinition} from '@/glob/lib'
|
|
import {unitData} from "@/glob/lib/unit_data.ts";
|
|
import { nameSpace, translations} from "@/mtas/lib/translations.ts";
|
|
import MetaTree from "@/mtas/svelte/components/MetaTree.svelte";
|
|
|
|
// ── Demo metadata ────────────────────────────────────────────────
|
|
let metadata = $state<Metadata>({
|
|
order: ['nombre','año','disponible','descripcion','lanzamiento','ultima_mod','web','precio','foto','manual','specs'],
|
|
nombre: { type: 'string', value: 'Toyota Corolla' },
|
|
año: { type: 'number', value: 2024 },
|
|
disponible: { type: 'boolean', value: true },
|
|
descripcion: { type: 'ling', value: { es: 'Sedán compacto fiable', en: 'Reliable compact sedan' } as LingRecord },
|
|
lanzamiento: { type: 'date', value: '2024-01-15' },
|
|
ultima_mod: { type: 'datetime', value: '2024-03-09T10:00:00Z' },
|
|
web: { type: 'url', value: 'https://toyota.es' },
|
|
precio: { type: 'currency', value: { amount: 24990, currency: 'EUR' } },
|
|
foto: { type: 'image', value: { url: 'https://images.unsplash.com/photo-1621007947382-bb3c3994e3fb?w=400&h=300&fit=crop', mimeType: 'image/jpeg' } },
|
|
manual: { type: 'pdf', value: { url: 'https://example.com/manual.pdf', filename: 'manual.pdf' } },
|
|
specs: { type: 'group', value: {
|
|
motor: { type: 'string', value: '1.8 VVT-i' },
|
|
cv: { type: 'number', value: 122 },
|
|
traccion: { type: 'string', value: 'FWD' },
|
|
}, order: ['cv', 'motor', 'traccion'] },
|
|
});
|
|
|
|
let showJson = $state(false);
|
|
let darkMode = $state(false);
|
|
let activeTab = $state<'editor' | 'tree'>('editor');
|
|
|
|
const defaultLocale = 'es';
|
|
|
|
const currDefinitions: Record<string, CurrDefinition> = {
|
|
EUR: {
|
|
symbol : '€',
|
|
code : 'EUR',
|
|
name : p({
|
|
es: { one: 'euro', other: 'euros' },
|
|
en: { one: 'euro', other: 'euros' },
|
|
}),
|
|
conversionValue: 1,
|
|
},
|
|
USD: {
|
|
symbol : '$',
|
|
code : 'USD',
|
|
name : p({
|
|
es: { one: 'dólar', other: 'dólares' },
|
|
en: { one: 'dollar', other: 'dollars' },
|
|
}),
|
|
conversionValue: 1.08,
|
|
},
|
|
};
|
|
|
|
const glob = createGlob({
|
|
locale : defaultLocale,
|
|
locales: ['es', 'en'],
|
|
ling : lingInstance,
|
|
numr : { minDecimals: 0, maxDecimals: 2 },
|
|
curr : { definitions: currDefinitions, selectedCurrency: 'EUR' },
|
|
dati : { selectedTimeFormat: '24h' },
|
|
unit : { selectedSystem: 'metric', categories: unitData },
|
|
});
|
|
glob.ling.extend(nameSpace, translations);
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>meta-content · Demo</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
|
</svelte:head>
|
|
|
|
<div class={['min-h-screen transition-colors duration-300', darkMode ? 'dark bg-zinc-950' : 'bg-zinc-50'].join(' ')}
|
|
style="font-family: 'Poppins', sans-serif;">
|
|
|
|
<!-- ── Header ─────────────────────────────────────────────────── -->
|
|
<header class="relative border-b border-zinc-200 bg-white/80 backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/80">
|
|
<div class="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-900 dark:bg-white">
|
|
<svg class="h-4 w-4 text-white dark:text-zinc-900" viewBox="0 0 16 16" fill="currentColor">
|
|
<rect x="1" y="1" width="6" height="6" rx="1"/>
|
|
<rect x="9" y="1" width="6" height="6" rx="1"/>
|
|
<rect x="1" y="9" width="6" height="6" rx="1"/>
|
|
<rect x="9" y="9" width="6" height="6" rx="1" opacity="0.4"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<span class="font-mono text-[11px] font-bold uppercase tracking-[0.2em] text-zinc-800 dark:text-zinc-200">
|
|
meta-content
|
|
</span>
|
|
<span class="ml-2 rounded border border-zinc-200 px-1.5 py-0.5 font-mono text-[9px] text-zinc-400 dark:border-zinc-700 dark:text-zinc-500">
|
|
v0.1.0
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<button
|
|
onclick={() => showJson = !showJson}
|
|
class={[
|
|
'rounded-lg border px-3 py-1.5 font-mono text-[11px] font-medium transition-all duration-150',
|
|
showJson
|
|
? 'border-zinc-800 bg-zinc-900 text-white dark:border-zinc-200 dark:bg-white dark:text-zinc-900'
|
|
: 'border-zinc-200 text-zinc-500 hover:border-zinc-300 dark:border-zinc-700 dark:text-zinc-400',
|
|
].join(' ')}
|
|
>
|
|
{showJson ? '← editor' : 'JSON →'}
|
|
</button>
|
|
<button
|
|
onclick={() => darkMode = !darkMode}
|
|
class="flex h-8 w-8 items-center justify-center rounded-lg border border-zinc-200
|
|
text-zinc-400 transition-colors hover:border-zinc-300 hover:text-zinc-600
|
|
dark:border-zinc-700 dark:text-zinc-500 dark:hover:border-zinc-600 dark:hover:text-zinc-300"
|
|
>
|
|
{#if darkMode}
|
|
<svg class="h-4 w-4" viewBox="0 0 16 16" fill="currentColor">
|
|
<path d="M8 1a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1A.75.75 0 0 1 8 1zM8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm5.657-8.157a.75.75 0 0 1 0 1.06l-.707.708a.75.75 0 0 1-1.06-1.06l.707-.708a.75.75 0 0 1 1.06 0zM3.05 4.904a.75.75 0 0 1-1.06-1.06l.707-.708a.75.75 0 0 1 1.06 1.06l-.707.708zM15 8a.75.75 0 0 1-.75.75h-1a.75.75 0 0 1 0-1.5h1A.75.75 0 0 1 15 8zM2.75 8a.75.75 0 0 1-.75.75H.75a.75.75 0 0 1 0-1.5H2A.75.75 0 0 1 2.75 8zM12.95 11.096a.75.75 0 0 1 1.06 1.06l-.707.708a.75.75 0 0 1-1.06-1.06l.707-.708zm-9.9 0l.707.708a.75.75 0 0 1-1.06 1.06l-.707-.707a.75.75 0 0 1 1.06-1.061z"/>
|
|
</svg>
|
|
{:else}
|
|
<svg class="h-4 w-4" viewBox="0 0 16 16" fill="currentColor">
|
|
<path d="M6 .278a.75.75 0 0 1 .18.83A7 7 0 1 0 14.85 9.5a.75.75 0 0 1 .83.18A8.5 8.5 0 1 1 6 .278z"/>
|
|
</svg>
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ── Main ───────────────────────────────────────────────────── -->
|
|
<main class="mx-auto max-w-5xl px-6 py-10">
|
|
|
|
<!-- Hero -->
|
|
<div class="mb-10">
|
|
<h1 class="text-[42px] font-extrabold leading-none tracking-tight text-zinc-900 dark:text-zinc-100">
|
|
Metadata<br/>
|
|
<span class="text-zinc-300 dark:text-zinc-700">Editor</span>
|
|
</h1>
|
|
<p class="mt-3 font-mono text-[12px] text-zinc-400 dark:text-zinc-500">
|
|
Campos tipados · Validación en tiempo real · Dark mode
|
|
</p>
|
|
</div>
|
|
|
|
{#if showJson}
|
|
<!-- ── JSON view ─────────────────────────────────────── -->
|
|
<div class="rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900">
|
|
<div class="flex items-center justify-between border-b border-zinc-100 px-4 py-3 dark:border-zinc-800">
|
|
<span class="font-mono text-[10px] font-bold uppercase tracking-widest text-zinc-400">
|
|
metadata · serializado
|
|
</span>
|
|
<button
|
|
onclick={() => navigator.clipboard.writeText(JSON.stringify(metadata, null, 2))}
|
|
class="rounded border border-zinc-200 px-2 py-1 font-mono text-[10px] text-zinc-400
|
|
hover:border-zinc-300 hover:text-zinc-600 dark:border-zinc-700 dark:hover:border-zinc-600"
|
|
>
|
|
copiar
|
|
</button>
|
|
</div>
|
|
<pre class="overflow-auto p-4 font-mono text-[11px] leading-relaxed text-zinc-600 dark:text-zinc-400"
|
|
>{JSON.stringify(metadata, null, 2)}</pre>
|
|
</div>
|
|
|
|
{:else}
|
|
<!-- ── Tabs ───────────────────────────────────────────── -->
|
|
<div class="flex flex-col gap-4 h-[640px]">
|
|
|
|
<!-- Tab bar -->
|
|
<div class="flex items-center gap-1 border-b border-zinc-200 dark:border-zinc-800">
|
|
<button
|
|
type="button"
|
|
onclick={() => activeTab = 'editor'}
|
|
class={[
|
|
'px-4 py-2 font-mono text-[11px] font-medium border-b-2 -mb-px transition-colors',
|
|
activeTab === 'editor'
|
|
? 'border-zinc-900 text-zinc-900 dark:border-zinc-100 dark:text-zinc-100'
|
|
: 'border-transparent text-zinc-400 hover:text-zinc-600 dark:text-zinc-600 dark:hover:text-zinc-400',
|
|
].join(' ')}
|
|
>
|
|
MetadataEditor
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onclick={() => activeTab = 'tree'}
|
|
class={[
|
|
'px-4 py-2 font-mono text-[11px] font-medium border-b-2 -mb-px transition-colors',
|
|
activeTab === 'tree'
|
|
? 'border-zinc-900 text-zinc-900 dark:border-zinc-100 dark:text-zinc-100'
|
|
: 'border-transparent text-zinc-400 hover:text-zinc-600 dark:text-zinc-600 dark:hover:text-zinc-400',
|
|
].join(' ')}
|
|
>
|
|
MetaTree
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab content -->
|
|
<div class="flex-1 min-h-0">
|
|
{#if activeTab === 'editor'}
|
|
<MetadataEditor
|
|
{glob}
|
|
bind:value={metadata}
|
|
attributes={['hidden', 'required']}
|
|
dark={darkMode}
|
|
onUpdate={(m) => metadata = m}
|
|
/>
|
|
{:else}
|
|
<MetaTree
|
|
{glob}
|
|
bind:value={metadata}
|
|
attributes={['hidden', 'required']}
|
|
dark={darkMode}
|
|
onUpdate={(m) => metadata = m}
|
|
/>
|
|
{/if}
|
|
</div>
|
|
|
|
</div>
|
|
{/if}
|
|
|
|
</main>
|
|
|
|
<!-- ── Footer ─────────────────────────────────────────────────── -->
|
|
<footer class="border-t border-zinc-100 py-6 dark:border-zinc-800">
|
|
<p class="text-center font-mono text-[10px] text-zinc-300 dark:text-zinc-700">
|
|
meta-content · TypeScript · Svelte 5 · Tailwind CSS
|
|
</p>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
:global(*) { font-family: 'Poppins', sans-serif !important; }
|
|
:global(code), :global(pre) { font-family: 'Poppins', sans-serif !important; }
|
|
</style> |