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.
442 lines
12 KiB
442 lines
12 KiB
6 months ago
|
<script lang="ts">
|
||
|
|
import '$uix/air/tokens/index.css';
|
||
|
|
import '$uix/air/themes/index.css';
|
||
|
|
import { setContext } from 'svelte';
|
||
|
|
import { AIR_DEFAULT_THEME, type AirThemeId } from '$uix/air';
|
||
|
|
import { TerraConfig } from '$uix/terra';
|
||
|
|
import {
|
||
|
|
createTerraCurrencyFormatter,
|
||
|
|
createTerraDateTimeFormatter,
|
||
|
|
createTerraNumberFormatter,
|
||
|
|
createTerraTranslator,
|
||
|
|
createTerraUnitFormatter,
|
||
|
|
} from '$uix/terra/config/exports';
|
||
|
|
import { AIR_DEMO_CONTEXT_KEY, type AirDemoContext } from './demo-context';
|
||
|
|
import {
|
||
|
|
AIR_DEMO_LOCALES,
|
||
|
|
type AirDemoLocaleId,
|
||
|
|
formatAirDemoCurrency,
|
||
|
|
formatAirDemoDate,
|
||
|
|
formatAirDemoNumber,
|
||
|
|
formatAirDemoUnit,
|
||
|
|
getAirDemoLocale,
|
||
|
|
translateAirDemoPath,
|
||
|
|
translateAirDemoValue,
|
||
|
|
} from './demo-locale';
|
||
|
|
|
||
|
|
let { children } = $props();
|
||
|
|
let theme = $state<AirThemeId>(AIR_DEFAULT_THEME);
|
||
|
|
let localeId = $state<AirDemoLocaleId>('en-US');
|
||
|
|
|
||
|
|
const themes: AirThemeId[] = ['base-light', 'base-dark'];
|
||
|
|
const localeOptions = AIR_DEMO_LOCALES;
|
||
|
|
|
||
|
|
const currentLocale = $derived(getAirDemoLocale(localeId));
|
||
|
|
const previewDate = $derived(formatAirDemoDate(localeId));
|
||
|
|
const previewNumber = $derived(formatAirDemoNumber(localeId));
|
||
|
|
const previewCurrency = $derived(formatAirDemoCurrency(localeId));
|
||
|
|
const previewUnit = $derived(formatAirDemoUnit(localeId));
|
||
|
|
|
||
|
|
const translator = createTerraTranslator({
|
||
|
|
locale: () => currentLocale.id,
|
||
|
|
translate: () => (value) => translateAirDemoValue(localeId, value),
|
||
|
|
translatePath: () => (path, ...args) => translateAirDemoPath(localeId, path, ...args),
|
||
|
|
});
|
||
|
|
|
||
|
|
const dateTimeFormatter = createTerraDateTimeFormatter({
|
||
|
|
dateOrder: () => currentLocale.dateOrder,
|
||
|
|
timeFormat: () => currentLocale.timeFormat,
|
||
|
|
});
|
||
|
|
|
||
|
|
const numberFormatter = createTerraNumberFormatter({
|
||
|
|
format: () => (...args: unknown[]) => {
|
||
|
|
const [value, options] = args as [unknown, Intl.NumberFormatOptions?];
|
||
|
|
return new Intl.NumberFormat(localeId, options).format(Number(value ?? 0));
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const currencyFormatter = createTerraCurrencyFormatter({
|
||
|
|
format: () => (...args: unknown[]) => {
|
||
|
|
const [value, currency, options] = args as [unknown, string | undefined, Intl.NumberFormatOptions?];
|
||
|
|
return new Intl.NumberFormat(localeId, {
|
||
|
|
style: 'currency',
|
||
|
|
currency: currency ?? currentLocale.currency,
|
||
|
|
...(options ?? {}),
|
||
|
|
}).format(Number(value ?? 0));
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const unitFormatter = createTerraUnitFormatter({
|
||
|
|
format: () => (...args: unknown[]) => {
|
||
|
|
const [value, unit, options] = args as [unknown, Intl.NumberFormatOptions['unit'] | undefined, Intl.NumberFormatOptions?];
|
||
|
|
return new Intl.NumberFormat(localeId, {
|
||
|
|
style: 'unit',
|
||
|
|
unit: unit ?? currentLocale.unit,
|
||
|
|
unitDisplay: 'narrow',
|
||
|
|
...(options ?? {}),
|
||
|
|
}).format(Number(value ?? 0));
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const airDemoContext: AirDemoContext = {
|
||
|
|
localeId: () => localeId,
|
||
|
|
dir: () => currentLocale.dir,
|
||
|
|
t: (path, ...args) => translateAirDemoPath(localeId, path, ...args),
|
||
|
|
};
|
||
|
|
|
||
|
|
setContext(AIR_DEMO_CONTEXT_KEY, airDemoContext);
|
||
|
|
|
||
|
|
$effect(() => {
|
||
|
|
document.documentElement.lang = currentLocale.id;
|
||
|
|
document.documentElement.dir = currentLocale.dir;
|
||
|
|
document.documentElement.setAttribute('data-theme', theme);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<svelte:head>
|
||
|
|
<title>Air Tests</title>
|
||
|
|
</svelte:head>
|
||
|
|
|
||
|
|
<TerraConfig
|
||
|
|
{translator}
|
||
|
|
{dateTimeFormatter}
|
||
|
|
{numberFormatter}
|
||
|
|
{currencyFormatter}
|
||
|
|
{unitFormatter}
|
||
|
|
dir={currentLocale.dir}
|
||
|
|
>
|
||
|
|
<div class="air-demo-shell" data-theme={theme} lang={currentLocale.id} dir={currentLocale.dir}>
|
||
|
|
<div class="air-demo-atmosphere" aria-hidden="true"></div>
|
||
|
|
|
||
|
|
<header class="air-demo-toolbar">
|
||
|
|
<div class="air-demo-toolbar-main">
|
||
|
|
<div class="air-demo-brand">
|
||
|
|
<p class="air-demo-eyebrow">Air Playground</p>
|
||
|
|
<div>
|
||
|
|
<h1>Visual system review</h1>
|
||
|
|
<p>
|
||
|
|
Live environment for validating theme, locale, motion and component behavior
|
||
|
|
inside the real `air` shell.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav class="air-demo-nav" aria-label="Air demo sections">
|
||
|
|
<a href="/test">Indice general</a>
|
||
|
|
<a href="/test/terra">Terra</a>
|
||
|
|
<a href="/test/air">Air</a>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="air-demo-toolbar-side">
|
||
|
|
<section class="air-demo-panel air-demo-panel--preview" aria-label="Locale preview">
|
||
|
|
<header>
|
||
|
|
<span>Preview</span>
|
||
|
|
<strong>{currentLocale.label}</strong>
|
||
|
|
</header>
|
||
|
|
<div class="air-demo-preview-row">
|
||
|
|
<div>
|
||
|
|
<span class="air-demo-preview-label">Date</span>
|
||
|
|
<span>{previewDate}</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span class="air-demo-preview-label">Number</span>
|
||
|
|
<span>{previewNumber}</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span class="air-demo-preview-label">Currency</span>
|
||
|
|
<span>{previewCurrency}</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span class="air-demo-preview-label">Unit</span>
|
||
|
|
<span>{previewUnit}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="air-demo-panel air-demo-panel--compact">
|
||
|
|
<header>
|
||
|
|
<span>Locale</span>
|
||
|
|
<strong>{currentLocale.id}</strong>
|
||
|
|
</header>
|
||
|
|
<div class="air-demo-switcher" aria-label="Locale switcher">
|
||
|
|
{#each localeOptions as item}
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class:air-demo-chip={true}
|
||
|
|
class:air-demo-chip--active={localeId === item.id}
|
||
|
|
onclick={() => (localeId = item.id)}
|
||
|
|
>
|
||
|
|
{item.label}
|
||
|
|
</button>
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="air-demo-panel air-demo-panel--compact">
|
||
|
|
<header>
|
||
|
|
<span>Theme</span>
|
||
|
|
<strong>{theme}</strong>
|
||
|
|
</header>
|
||
|
|
<div class="air-demo-switcher" aria-label="Theme switcher">
|
||
|
|
{#each themes as item}
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class:air-demo-chip={true}
|
||
|
|
class:air-demo-chip--active={theme === item}
|
||
|
|
onclick={() => (theme = item)}
|
||
|
|
>
|
||
|
|
{item}
|
||
|
|
</button>
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="air-demo-content">
|
||
|
|
{@render children?.()}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</TerraConfig>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
:global(body) {
|
||
|
|
margin: 0;
|
||
|
|
background:
|
||
|
|
radial-gradient(circle at top left, color-mix(in srgb, var(--air-color-accent-muted) 42%, transparent), transparent 32%),
|
||
|
|
radial-gradient(circle at top right, color-mix(in srgb, var(--air-color-surface) 74%, transparent), transparent 26%),
|
||
|
|
var(--air-color-bg);
|
||
|
|
color: var(--air-color-text-primary);
|
||
|
|
font-family: var(--air-font-sans);
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-shell {
|
||
|
|
position: relative;
|
||
|
|
min-height: 100vh;
|
||
|
|
background: transparent;
|
||
|
|
color: var(--air-color-text-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-atmosphere {
|
||
|
|
position: fixed;
|
||
|
|
inset: 0;
|
||
|
|
pointer-events: none;
|
||
|
|
background:
|
||
|
|
radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--air-color-accent-muted) 32%, transparent), transparent 28%),
|
||
|
|
radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--air-color-surface) 60%, transparent), transparent 24%);
|
||
|
|
opacity: 0.95;
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-toolbar {
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
z-index: 10;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.35fr);
|
||
|
|
gap: var(--air-space-4);
|
||
|
|
align-items: center;
|
||
|
|
padding: var(--air-space-4) var(--air-space-6);
|
||
|
|
background: color-mix(in srgb, var(--air-color-bg) 82%, transparent);
|
||
|
|
backdrop-filter: blur(18px);
|
||
|
|
border-bottom: 1px solid color-mix(in srgb, var(--air-color-border) 82%, transparent);
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-toolbar-main,
|
||
|
|
.air-demo-toolbar-side {
|
||
|
|
display: flex;
|
||
|
|
gap: var(--air-space-4);
|
||
|
|
min-width: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-toolbar-main {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-toolbar-side {
|
||
|
|
align-items: stretch;
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-brand {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: var(--air-space-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-eyebrow {
|
||
|
|
margin: 0;
|
||
|
|
font-family: var(--air-font-mono);
|
||
|
|
font-size: var(--air-font-size-xs);
|
||
|
|
line-height: var(--air-leading-ui);
|
||
|
|
font-weight: var(--air-font-weight-medium);
|
||
|
|
letter-spacing: var(--air-tracking-wider);
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--air-color-accent-text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-brand h1 {
|
||
|
|
margin: 0;
|
||
|
|
font-size: clamp(var(--air-font-size-xl), 1.7vw, 28px);
|
||
|
|
line-height: var(--air-leading-heading);
|
||
|
|
font-weight: var(--air-font-weight-semibold);
|
||
|
|
letter-spacing: var(--air-tracking-tight);
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-brand p {
|
||
|
|
margin: var(--air-space-1) 0 0;
|
||
|
|
max-width: 54ch;
|
||
|
|
font-size: var(--air-font-size-sm);
|
||
|
|
line-height: var(--air-leading-text);
|
||
|
|
color: var(--air-color-text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-nav,
|
||
|
|
.air-demo-switcher {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: var(--air-space-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-nav a,
|
||
|
|
.air-demo-chip {
|
||
|
|
appearance: none;
|
||
|
|
border: 1px solid var(--air-color-border);
|
||
|
|
background: color-mix(in srgb, var(--air-color-surface-raised) 86%, transparent);
|
||
|
|
color: var(--air-color-text-primary);
|
||
|
|
text-decoration: none;
|
||
|
|
padding: var(--air-space-2) var(--air-space-3);
|
||
|
|
border-radius: var(--air-radius-full);
|
||
|
|
font: inherit;
|
||
|
|
font-size: var(--air-font-size-sm);
|
||
|
|
line-height: var(--air-leading-ui);
|
||
|
|
transition:
|
||
|
|
background var(--air-duration-fast) var(--air-ease-default),
|
||
|
|
border-color var(--air-duration-fast) var(--air-ease-default),
|
||
|
|
color var(--air-duration-fast) var(--air-ease-default),
|
||
|
|
box-shadow var(--air-duration-fast) var(--air-ease-default);
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-nav a:hover,
|
||
|
|
.air-demo-chip:hover {
|
||
|
|
border-color: var(--air-color-border-strong);
|
||
|
|
background: var(--air-color-surface-raised);
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-nav a:focus-visible,
|
||
|
|
.air-demo-chip:focus-visible {
|
||
|
|
outline: 2px solid var(--air-color-accent);
|
||
|
|
outline-offset: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-chip--active {
|
||
|
|
background: var(--air-color-accent);
|
||
|
|
border-color: var(--air-color-accent);
|
||
|
|
box-shadow: inset 0 1px 0 color-mix(in srgb, white 24%, transparent);
|
||
|
|
color: var(--air-color-surface-raised);
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-panel {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: var(--air-space-3);
|
||
|
|
padding: var(--air-space-3);
|
||
|
|
border-radius: var(--air-radius-xl);
|
||
|
|
border: 1px solid color-mix(in srgb, var(--air-color-border) 88%, transparent);
|
||
|
|
background: color-mix(in srgb, var(--air-color-surface-raised) 92%, transparent);
|
||
|
|
box-shadow: var(--air-shadow-1);
|
||
|
|
min-width: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-panel--preview {
|
||
|
|
flex: 1.35;
|
||
|
|
background:
|
||
|
|
linear-gradient(180deg, color-mix(in srgb, var(--air-color-accent-muted) 18%, transparent), transparent),
|
||
|
|
color-mix(in srgb, var(--air-color-surface-raised) 94%, transparent);
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-panel--compact {
|
||
|
|
flex: 0.9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-panel header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: var(--air-space-2);
|
||
|
|
align-items: baseline;
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-panel header span {
|
||
|
|
font-family: var(--air-font-mono);
|
||
|
|
font-size: var(--air-font-size-xs);
|
||
|
|
line-height: var(--air-leading-ui);
|
||
|
|
letter-spacing: var(--air-tracking-wide);
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--air-color-text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-panel header strong {
|
||
|
|
font-size: var(--air-font-size-sm);
|
||
|
|
line-height: var(--air-leading-ui);
|
||
|
|
font-weight: var(--air-font-weight-medium);
|
||
|
|
color: var(--air-color-text-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-preview-row {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
|
|
gap: var(--air-space-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-preview-row div {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 2px;
|
||
|
|
padding: var(--air-space-2) var(--air-space-3);
|
||
|
|
border-radius: var(--air-radius-lg);
|
||
|
|
border: 1px solid color-mix(in srgb, var(--air-color-border) 78%, transparent);
|
||
|
|
background: color-mix(in srgb, var(--air-color-surface) 82%, transparent);
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-preview-label {
|
||
|
|
font-size: var(--air-font-size-xs);
|
||
|
|
line-height: var(--air-leading-ui);
|
||
|
|
color: var(--air-color-text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-preview-row span:last-child {
|
||
|
|
font-family: var(--air-font-mono);
|
||
|
|
font-size: var(--air-font-size-xs);
|
||
|
|
line-height: 1.5;
|
||
|
|
color: var(--air-color-text-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-content {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
padding: var(--air-space-6);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 1280px) {
|
||
|
|
.air-demo-toolbar {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 960px) {
|
||
|
|
.air-demo-toolbar-side {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 720px) {
|
||
|
|
.air-demo-toolbar,
|
||
|
|
.air-demo-content {
|
||
|
|
padding: var(--air-space-4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.air-demo-preview-row {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|