3 Commits

Author SHA1 Message Date
Felix Hungenberg
c46bf9e64f ci: fix lockfile
All checks were successful
Deploy to GitHub Pages / build_site (push) Successful in 2m1s
2026-01-19 16:57:54 +01:00
Felix Hungenberg
0cfd1e5c96 feat(ui): add id prop for inputs
Some checks failed
Deploy to GitHub Pages / build_site (push) Failing after 5s
2026-01-19 16:43:41 +01:00
Felix Hungenberg
ecfd4d5f2f feat(ui): cleanup integer input
remove warnings, migrate deprecated (dispatch to prop), include min max switch from float input, include esc/enter from float input, include precision, include partial styling from float input
2026-01-19 16:43:07 +01:00
6 changed files with 249 additions and 111 deletions

View File

@@ -1,18 +1,20 @@
<script lang="ts">
import type { NodeInput } from '@nodarium/types';
import Checkbox from './inputs/Checkbox.svelte';
import Float from './inputs/Float.svelte';
import Integer from './inputs/Integer.svelte';
import Select from './inputs/Select.svelte';
import type { NodeInput } from '@nodarium/types';
import Vec3 from './inputs/Vec3.svelte';
// import Number from './inputs/Number.svelte';
interface Props {
input: NodeInput;
value: any;
id?: string;
}
let { input, value = $bindable() }: Props = $props();
let { input, value = $bindable(), id }: Props = $props();
</script>
{#if input.type === 'float'}
@@ -20,9 +22,9 @@
{:else if input.type === 'integer'}
<Integer bind:value min={input?.min} max={input?.max} />
{:else if input.type === 'boolean'}
<Checkbox bind:value />
<Checkbox bind:value {id} />
{:else if input.type === 'select'}
<Select bind:value options={input.options} />
<Select bind:value options={input.options} {id} />
{:else if input.type === 'vec3'}
<Vec3 bind:value />
<Vec3 bind:value {id} />
{/if}

View File

@@ -1,9 +1,10 @@
<script lang="ts">
interface Props {
value: boolean;
id?: string;
}
let { value = $bindable(false) }: Props = $props();
let { value = $bindable(false), id }: Props = $props();
$effect(() => {
if (typeof value === 'string') {
@@ -23,6 +24,7 @@
type="checkbox"
bind:checked={value}
class="peer absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
{id}
/>
<span
class="absolute opacity-0 peer-checked:opacity-100 transition-opacity duration-100 flex w-full h-full items-center justify-center"

View File

@@ -4,13 +4,15 @@
step?: number;
min?: number;
max?: number;
id?: string;
}
let {
value = $bindable(0.5),
step = 0.01,
min = $bindable(0),
max = $bindable(1)
max = $bindable(1),
id
}: Props = $props();
if (min > max) {
@@ -110,6 +112,7 @@
<input
bind:value
bind:this={inputEl}
{id}
{step}
{max}
{min}

View File

@@ -1,41 +1,48 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
interface Props {
value?: number;
step?: number;
min?: number | undefined;
max?: number | undefined;
step?: number;
value?: number;
id?: string;
change?: (arg: number) => void;
}
let {
min = undefined,
max = undefined,
step = 1,
value = $bindable(0),
id = ''
step = 1,
min = $bindable(0),
max = $bindable(1),
id,
change
}: Props = $props();
if (!value) {
value = 0;
if (min > max) {
[min, max] = [max, min];
}
if (value > max) {
max = value;
}
let inputEl: HTMLInputElement | undefined = $state();
let wrapper: HTMLDivElement | undefined = $state();
function strip(input: number) {
return +parseFloat(input + '').toPrecision(2);
}
let inputEl = $state() as HTMLInputElement;
let wrapper = $state() as HTMLDivElement;
let prev = -1;
function update() {
if (prev === value) return;
prev = value;
dispatch('change', parseFloat(value + ''));
change?.(value);
}
function handleChange(change: number) {
value = Math.max(min ?? -Infinity, Math.min(+value + change, max ?? Infinity));
}
let isMouseDown = $state(false);
let downX = 0;
let downV = 0;
let rect: DOMRect;
@@ -65,6 +72,13 @@
window.removeEventListener('mousemove', handleMouseMove);
}
function handleKeyDown(ev: KeyboardEvent) {
if (ev.key === 'Escape' || ev.key === 'Enter') {
handleMouseUp();
inputEl?.blur();
}
}
function handleMouseMove(ev: MouseEvent) {
if (!ev.ctrlKey && typeof min === 'number' && typeof max === 'number') {
const vx = (ev.clientX - rect.left) / rect.width;
@@ -76,8 +90,12 @@
}
$effect(() => {
if ((value || 0).toString().length > 5) {
value = strip(value || 0);
}
value !== undefined && update();
});
let width = $derived(
Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 30) + 'px' : '20px'
);
@@ -86,9 +104,11 @@
<div
class="component-wrapper"
bind:this={wrapper}
class:is-down={isMouseDown}
role="slider"
tabindex="0"
aria-valuenow={value}
onkeydown={handleKeyDown}
onmousedown={handleMouseDown}
onmouseup={handleMouseUp}
>
@@ -124,21 +144,32 @@
border-radius: var(--border-radius, 2px);
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
}
input[type='number'] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
cursor: pointer;
font-size: 1em;
font-family: var(--font-family);
padding-top: 8px;
font-variant-numeric: tabular-nums;
color: var(--text-color);
background-color: transparent;
padding: var(--padding, 6px);
font-size: 1em;
padding-inline: 10px;
text-align: center;
border: none;
border-style: none;
flex: 1;
width: 72%;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
.is-down > input {
cursor: ew-resize !important;
}
.overlay {
@@ -151,6 +182,10 @@
pointer-events: none;
}
.is-down > .overlay {
transition: none !important;
}
button {
background-color: transparent;
border: none;

View File

@@ -0,0 +1,169 @@
<script lang="ts">
interface Props {
value?: number;
step?: number;
min?: number;
max?: number;
id?: string;
}
let {
value = $bindable(1),
step = 1,
min = $bindable(0),
max = $bindable(1),
id
}: Props = $props();
if (min > max) {
[min, max] = [max, min];
}
if (value > max) {
max = value;
}
function strip(input: number) {
return +parseFloat(input + '').toPrecision(2);
}
let inputEl: HTMLInputElement | undefined = $state();
let prev = -1;
function update() {
if (prev === value) return;
if (value.toString().length > 5) {
value = strip(value);
}
prev = value;
}
function handleChange(change: number) {
value = Math.max(min ?? -Infinity, Math.min(+value + change, max ?? Infinity));
}
function handleKeyDown(ev: KeyboardEvent) {
if (ev.key === 'Escape' || ev.key === 'Enter') {
inputEl?.blur();
}
}
$effect(() => {
update();
});
let ratio = $derived(((value - min) / (max - min)) * 100);
</script>
<div>
<div class="component-wrapper">
<button onclick={() => handleChange(-step)}>-</button>
<input
bind:value
bind:this={inputEl}
{id}
{step}
{max}
{min}
type="number"
onkeydown={handleKeyDown}
/>
<button onclick={() => handleChange(+step)}>+</button>
</div>
<div class="slider">
<input
type="range"
bind:value
{min}
{max}
{step}
style={`background: linear-gradient(90deg, var(--text-color) ${ratio}%, var(--layer-2, #4b4b4b) ${ratio}%)`}
/>
</div>
</div>
<style>
.component-wrapper {
display: flex;
background-color: var(--layer-2, #4b4b4b);
user-select: none;
transition: box-shadow 0.3s ease;
border: solid 1px var(--outline);
overflow: hidden;
border-radius: 0 var(--border-radius, 2px); /* only top */
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
}
input[type='number'] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
cursor: pointer;
font-family: var(--font-family);
font-variant-numeric: tabular-nums;
color: var(--text-color);
background-color: transparent;
padding: var(--padding, 6px);
font-size: 1em;
padding-inline: 10px;
text-align: center;
border: none;
border-style: none;
flex: 1;
width: 72%;
}
button {
background-color: transparent;
border: none;
cursor: pointer;
line-height: 0px;
margin: 0;
color: var(--text-color);
margin-inline: 6px;
}
div input[type='number'] {
color: var(--text-color);
background-color: transparent;
padding: var(--padding, 6px);
padding-inline: 0px;
text-align: center;
border: none;
border-style: none;
}
.slider {
position: relative;
margin-top: -1px; /* hide edge */
}
input[type='range'] {
position: absolute;
appearance: none;
width: 100%;
height: 3px;
background: var(--layer-2, #4b4b4b);
cursor: pointer;
}
/* Thumb: for Chrome, Safari, Edge */
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 0px;
height: 0px;
box-shadow: none;
}
/* Thumb: for Firefox */
input[type='range']::-moz-range-thumb {
border: none;
width: 0px;
height: 0px;
box-shadow: none;
}
</style>

95
pnpm-lock.yaml generated
View File

@@ -14,7 +14,7 @@ importers:
specifier: link:../packages/registry
version: link:../packages/registry
'@nodarium/ui':
specifier: ../packages/ui
specifier: link:../packages/ui
version: link:../packages/ui
'@nodarium/utils':
specifier: link:../packages/utils
@@ -24,7 +24,7 @@ importers:
version: 2.50.0(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.46.4)(vite@7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)))(svelte@5.46.4)(typescript@5.9.3)(vite@7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2))
'@tailwindcss/vite':
specifier: ^4.1.18
version: 4.1.18(vite@7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2))
version: 4.1.18(vite@7.3.1(@types/node@22.8.6)(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2))
'@threlte/core':
specifier: 8.3.1
version: 8.3.1(svelte@5.46.4)(three@0.182.0)
@@ -88,7 +88,7 @@ importers:
version: 5.9.3
vite:
specifier: ^7.3.1
version: 7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
version: 7.3.1(@types/node@22.8.6)(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
vite-plugin-comlink:
specifier: ^5.3.0
version: 5.3.0(comlink@4.4.2)(vite@7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2))
@@ -100,7 +100,7 @@ importers:
version: 3.5.0(vite@7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2))
vitest:
specifier: ^4.0.17
version: 4.0.17(jiti@2.6.1)(jsdom@25.0.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
version: 4.0.17(@types/node@22.8.6)(jiti@2.6.1)(jsdom@25.0.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
nodes/max/plantarium/box: {}
@@ -3356,7 +3356,7 @@ snapshots:
set-cookie-parser: 2.7.2
sirv: 3.0.2
svelte: 5.46.4
vite: 7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
vite: 7.3.1(@types/node@22.8.6)(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
optionalDependencies:
typescript: 5.9.3
@@ -3383,7 +3383,7 @@ snapshots:
'@sveltejs/vite-plugin-svelte': 6.2.4(svelte@5.46.4)(vite@7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2))
obug: 2.1.1
svelte: 5.46.4
vite: 7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
vite: 7.3.1(@types/node@22.8.6)(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
'@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.46.4)(vite@7.3.1(@types/node@22.8.6)(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2))':
dependencies:
@@ -3402,8 +3402,8 @@ snapshots:
magic-string: 0.30.21
obug: 2.1.1
svelte: 5.46.4
vite: 7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
vitefu: 1.1.1(vite@7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2))
vite: 7.3.1(@types/node@22.8.6)(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
vitefu: 1.1.1(vite@7.3.1(@types/node@22.8.6)(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2))
'@tailwindcss/node@4.1.18':
dependencies:
@@ -3473,13 +3473,6 @@ snapshots:
tailwindcss: 4.1.18
vite: 7.3.1(@types/node@22.8.6)(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
'@tailwindcss/vite@4.1.18(vite@7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2))':
dependencies:
'@tailwindcss/node': 4.1.18
'@tailwindcss/oxide': 4.1.18
tailwindcss: 4.1.18
vite: 7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
'@threejs-kit/instanced-sprite-mesh@2.5.1(@types/three@0.182.0)(three@0.182.0)':
dependencies:
diet-sprite: 0.0.1
@@ -3673,14 +3666,6 @@ snapshots:
optionalDependencies:
vite: 7.3.1(@types/node@22.8.6)(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
'@vitest/mocker@4.0.17(vite@7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2))':
dependencies:
'@vitest/spy': 4.0.17
estree-walker: 3.0.3
magic-string: 0.30.21
optionalDependencies:
vite: 7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
'@vitest/pretty-format@4.0.17':
dependencies:
tinyrainbow: 3.0.3
@@ -5148,18 +5133,18 @@ snapshots:
json5: 2.2.3
magic-string: 0.30.17
source-map: 0.7.6
vite: 7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
vite: 7.3.1(@types/node@22.8.6)(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
vite-plugin-glsl@1.5.5(@rollup/pluginutils@5.1.4(rollup@4.55.1))(esbuild@0.27.2)(vite@7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)):
dependencies:
vite: 7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
vite: 7.3.1(@types/node@22.8.6)(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
optionalDependencies:
'@rollup/pluginutils': 5.1.4(rollup@4.55.1)
esbuild: 0.27.2
vite-plugin-wasm@3.5.0(vite@7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)):
dependencies:
vite: 7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
vite: 7.3.1(@types/node@22.8.6)(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
vite@7.3.1(@types/node@22.8.6)(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2):
dependencies:
@@ -5179,31 +5164,10 @@ snapshots:
terser: 5.36.0
tsx: 4.19.2
vite@7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2):
dependencies:
esbuild: 0.27.2
fdir: 6.5.0(picomatch@4.0.3)
picomatch: 4.0.3
postcss: 8.5.6
rollup: 4.55.1
tinyglobby: 0.2.15
optionalDependencies:
fsevents: 2.3.3
jiti: 2.6.1
less: 4.2.0
lightningcss: 1.30.2
sass: 1.80.6
terser: 5.36.0
tsx: 4.19.2
vitefu@1.1.1(vite@7.3.1(@types/node@22.8.6)(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)):
optionalDependencies:
vite: 7.3.1(@types/node@22.8.6)(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
vitefu@1.1.1(vite@7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)):
optionalDependencies:
vite: 7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
vitest@4.0.17(@types/node@22.8.6)(jiti@2.6.1)(jsdom@25.0.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2):
dependencies:
'@vitest/expect': 4.0.17
@@ -5242,43 +5206,6 @@ snapshots:
- tsx
- yaml
vitest@4.0.17(jiti@2.6.1)(jsdom@25.0.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2):
dependencies:
'@vitest/expect': 4.0.17
'@vitest/mocker': 4.0.17(vite@7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2))
'@vitest/pretty-format': 4.0.17
'@vitest/runner': 4.0.17
'@vitest/snapshot': 4.0.17
'@vitest/spy': 4.0.17
'@vitest/utils': 4.0.17
es-module-lexer: 1.7.0
expect-type: 1.3.0
magic-string: 0.30.21
obug: 2.1.1
pathe: 2.0.3
picomatch: 4.0.3
std-env: 3.10.0
tinybench: 2.9.0
tinyexec: 1.0.2
tinyglobby: 0.2.15
tinyrainbow: 3.0.3
vite: 7.3.1(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2)
why-is-node-running: 2.3.0
optionalDependencies:
jsdom: 25.0.1
transitivePeerDependencies:
- jiti
- less
- lightningcss
- msw
- sass
- sass-embedded
- stylus
- sugarss
- terser
- tsx
- yaml
w3c-xmlserializer@5.0.0:
dependencies:
xml-name-validator: 5.0.0