57 lines
1.4 KiB
Svelte
57 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import '$lib/app.css';
|
|
import { Checkbox, Details, Float, Integer, Select, ShortCut, Vec3 } from '$lib/index.js';
|
|
import Section from './Section.svelte';
|
|
|
|
let intValue = $state(0);
|
|
let floatValue = $state(0.2);
|
|
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);
|
|
</script>
|
|
|
|
<main class="flex flex-col gap-8 py-8">
|
|
<h1 class="text-4xl">@nodarium/ui</h1>
|
|
|
|
<Section title="Integer" value={intValue}>
|
|
<Integer bind:value={intValue} />
|
|
</Section>
|
|
|
|
<Section title="Float" value={floatValue}>
|
|
<Float bind:value={floatValue} />
|
|
</Section>
|
|
|
|
<Section title="Vec3" value={JSON.stringify(vecValue)}>
|
|
<Vec3 bind:value={vecValue} />
|
|
</Section>
|
|
|
|
<Section title="Select" value={d}>
|
|
<Select bind:value={selectValue} {options} />
|
|
</Section>
|
|
|
|
<Section title="Checkbox" value={checked}>
|
|
<Checkbox 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">
|
|
<ShortCut ctrl key="S" />
|
|
</Section>
|
|
</main>
|
|
|
|
<style>
|
|
main {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|