max/nodarium
1
0
Fork 0
Code Issues 12 Pull Requests 2 Actions Packages Projects Releases 3 Wiki Activity

chore: setup linting

Browse Source
This commit is contained in:
Max Richter
2026-02-02 16:22:14 +01:00
parent 137425b31b
commit 30e897468a
174 changed files with 6043 additions and 5107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
packages/ui/src/routes/+page.svelte
View File

@@ -1,79 +1,86 @@
<script lang="ts">
import '$lib/app.css';
import { Checkbox, Details, Number, Select, ShortCut, Vec3 } from '$lib/index.js';
import Section from './Section.svelte';
import '$lib/app.css';
import { Checkbox, Details, Float, Select, ShortCut, Vec3 } from '$lib/index.js';
import Section from './Section.svelte';
let intValue = $state(0);
let floatValue = $state(0.2);
let float2Value = $state(0.02);
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 intValue = $state(0);
let floatValue = $state(0.2);
let float2Value = $state(0.02);
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);
let checked = $state(false);
let detailsOpen = $state(false);
const themes = ['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 themes = [
'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]}`);
});
</script>
<main class="flex flex-col gap-8 py-8">
<div class="flex gap-4">
<h1 class="text-4xl">@nodarium/ui</h1>
<Select bind:value={themeIndex} options={themes}></Select>
</div>
<div class="flex gap-4">
<h1 class="text-4xl">@nodarium/ui</h1>
<Select bind:value={themeIndex} options={themes}></Select>
</div>
<Section title="Integer (step inherit)" value={intValue}>
<Number bind:value={intValue} max={2} />
</Section>
<Section title="Integer (step inherit)" value={intValue}>
<Float bind:value={intValue} max={2} />
</Section>
<Section title="Float (step inherit)" value={floatValue}>
<Number bind:value={floatValue} />
</Section>
<Section title="Float (step inherit)" value={floatValue}>
<Float bind:value={floatValue} />
</Section>
<Section title="Float 2 (step inherit)" value={intValue}>
<Number bind:value={float2Value} />
</Section>
<Section title="Float 2 (step inherit)" value={intValue}>
<Float bind:value={float2Value} />
</Section>
<Section title="Float (0.01 step)" value={floatValue}>
<Number bind:value={float3Value} step={0.01} max={3} />
</Section>
<Section title="Float (0.01 step)" value={floatValue}>
<Float bind:value={float3Value} step={0.01} max={3} />
</Section>
<Section title="Vec3" value={JSON.stringify(vecValue)}>
<Vec3 bind:value={vecValue} />
</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="Select" value={d}>
<Select bind:value={selectValue} {options} />
</Section>
<Section title="Checkbox" value={checked}>
<Checkbox bind:value={checked} />
</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="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>
<Section title="Shortcut">
<ShortCut ctrl key="S" />
</Section>
</main>
<style>
main {
max-width: 800px;
margin: 0 auto;
}
main {
max-width: 800px;
margin: 0 auto;
}
</style>

26
packages/ui/src/routes/Section.svelte
View File

@@ -1,18 +1,18 @@
<script lang="ts">
import { type Snippet } from 'svelte';
let { title, value, children } = $props<{
title?: string;
value?: unknown;
children?: Snippet;
}>();
import { type Snippet } from 'svelte';
let { title, value, children } = $props<{
title?: string;
value?: unknown;
children?: Snippet;
}>();
</script>
<section class="border border-1/2 mb-4 p-4 flex flex-col gap-4">
<h3 class="flex gap-2 font-bold">
{title}
<p class="font-normal! opacity-50!">{value}</p>
</h3>
<div>
{@render children()}
</div>
<h3 class="flex gap-2 font-bold">
{title}
<p class="font-normal! opacity-50!">{value}</p>
</h3>
<div>
{@render children()}
</div>
</section>