b19da950a6
Use tailwind v4 @theme block so we can use bg-layer-0 instead of bg-[--layer-0] for theme colors.
114 lines
2.8 KiB
Svelte
114 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import '$lib/app.css';
|
|
import { Details, InputCheckbox, InputNumber, InputSelect, InputVec3, ShortCut } from '$lib';
|
|
import Section from './Section.svelte';
|
|
|
|
let intValue = $state(0);
|
|
let floatValue = $state(0.2);
|
|
let float3Value = $state(1);
|
|
let vecValue = $state([0.2, 0.3, 0.4]);
|
|
const options = ['strawberry', 'raspberry', 'chickpeas'];
|
|
let selectValue = $state(0);
|
|
const d = $derived(options[selectValue]);
|
|
|
|
let checked = $state(false);
|
|
let detailsOpen = $state(false);
|
|
|
|
const themes = [
|
|
'dark',
|
|
'light',
|
|
'solarized',
|
|
'catppuccin',
|
|
'high-contrast',
|
|
'nord',
|
|
'dracula'
|
|
];
|
|
let themeIndex = $state(0);
|
|
$effect(() => {
|
|
const classList = document.documentElement.classList;
|
|
for (const c of classList) {
|
|
if (c.startsWith('theme-')) document.documentElement.classList.remove(c);
|
|
}
|
|
document.documentElement.classList.add(`theme-${themes[themeIndex]}`);
|
|
});
|
|
|
|
const colors = [
|
|
'layer-0',
|
|
'layer-1',
|
|
'layer-2',
|
|
'layer-3',
|
|
'active',
|
|
'selected',
|
|
'outline',
|
|
'connection',
|
|
'edge',
|
|
'text'
|
|
];
|
|
</script>
|
|
|
|
<main class="flex flex-col gap-8 py-8">
|
|
<div class="flex gap-4">
|
|
<h1 class="text-4xl">@nodarium/ui</h1>
|
|
<InputSelect bind:value={themeIndex} options={themes}></InputSelect>
|
|
</div>
|
|
|
|
<Section title="Colors">
|
|
<table>
|
|
<tbody>
|
|
{#each colors as color (color)}
|
|
<tr>
|
|
<td>
|
|
<div class="w-6 h-6 mr-2 my-1 rounded-sm outline-1 bg-{color}"></div>
|
|
</td>
|
|
<td>{color}</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</Section>
|
|
|
|
<Section title="InputNumber">
|
|
<div class="flex flex-col gap-2">
|
|
<p>value={floatValue}</p>
|
|
<InputNumber bind:value={floatValue} />
|
|
<p>min=0 max=10 step=1 value={intValue}</p>
|
|
<InputNumber bind:value={intValue} min={0} max={10} step={1} />
|
|
<p>min=0 max=3 step=0.01 value={float3Value}</p>
|
|
<InputNumber bind:value={float3Value} step={0.01} max={3} />
|
|
</div>
|
|
</Section>
|
|
|
|
<Section title="Vec3" value={JSON.stringify(vecValue)}>
|
|
<InputVec3 bind:value={vecValue} />
|
|
</Section>
|
|
|
|
<Section title="Select" value={d}>
|
|
<InputSelect bind:value={selectValue} {options} />
|
|
</Section>
|
|
|
|
<Section title="Checkbox" value={checked}>
|
|
<InputCheckbox bind:value={checked} />
|
|
</Section>
|
|
|
|
<Section title="Details" value={detailsOpen}>
|
|
<Details title="More Information" bind:open={detailsOpen}>
|
|
<p>Here is some more information that was previously hidden.</p>
|
|
</Details>
|
|
</Section>
|
|
|
|
<Section title="Shortcut">
|
|
<div class="flex gap-4">
|
|
<ShortCut ctrl key="S" />
|
|
<ShortCut alt key="F4" />
|
|
<ShortCut alt ctrl key="delete" />
|
|
</div>
|
|
</Section>
|
|
</main>
|
|
|
|
<style>
|
|
main {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|