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

feat: use new number input
All checks were successful
Deploy to GitHub Pages / build_site (push) Successful in 2m2s
Details

Browse Source 
fix missing id in html
This commit is contained in:
Felix Hungenberg
2026-01-20 16:49:56 +01:00
parent 3e3d41ae98
commit 6b6038e546
3 changed files with 33 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/ui/src/lib/Input.svelte
View File

@@ -2,11 +2,9 @@
import type { NodeInput } from '@nodarium/types'; import type { NodeInput } from '@nodarium/types';
import Checkbox from './inputs/Checkbox.svelte'; import Checkbox from './inputs/Checkbox.svelte';
import Float from './inputs/Float.svelte'; import Number from './inputs/Number.svelte';
import Integer from './inputs/Integer.svelte';
import Select from './inputs/Select.svelte'; import Select from './inputs/Select.svelte';
import Vec3 from './inputs/Vec3.svelte'; import Vec3 from './inputs/Vec3.svelte';
// import Number from './inputs/Number.svelte';
interface Props { interface Props {
input: NodeInput; input: NodeInput;
@@ -18,9 +16,9 @@
</script> </script>
{#if input.type === 'float'} {#if input.type === 'float'}
<Float bind:value min={input?.min} max={input?.max} /> <Number bind:value min={input?.min} max={input?.max} step={0.01} />
{:else if input.type === 'integer'} {:else if input.type === 'integer'}
<Integer bind:value min={input?.min} max={input?.max} /> <Number bind:value min={input?.min} max={input?.max} />
{:else if input.type === 'boolean'} {:else if input.type === 'boolean'}
<Checkbox bind:value {id} /> <Checkbox bind:value {id} />
{:else if input.type === 'select'} {:else if input.type === 'select'}

10
packages/ui/src/lib/inputs/Integer.svelte
View File

@@ -112,10 +112,7 @@
onmousedown={handleMouseDown} onmousedown={handleMouseDown}
onmouseup={handleMouseUp} onmouseup={handleMouseUp}
> >
{#if typeof min !== 'undefined' && typeof max !== 'undefined'} <div class="">
<span class="overlay" style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`}
></span>
{/if}
<button onclick={() => handleChange(-step)}>-</button> <button onclick={() => handleChange(-step)}>-</button>
<input <input
bind:value bind:value
@@ -130,6 +127,11 @@
<button onclick={() => handleChange(+step)}>+</button> <button onclick={() => handleChange(+step)}>+</button>
</div> </div>
{#if typeof min !== 'undefined' && typeof max !== 'undefined'}
<span class="overlay" style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`}
></span>
{/if}
</div>
<style> <style>
.component-wrapper { .component-wrapper {

22
packages/ui/src/lib/inputs/Number.svelte
View File

@@ -12,8 +12,10 @@
step = 1, step = 1,
min = $bindable(0), min = $bindable(0),
max = $bindable(1), max = $bindable(1),
id id: _id
}: Props = $props(); }: Props = $props();
const uid = $props.id();
const id = $derived(_id || uid);
if (min > max) { if (min > max) {
[min, max] = [max, min]; [min, max] = [max, min];
@@ -26,7 +28,7 @@
return +parseFloat(input + '').toPrecision(2); return +parseFloat(input + '').toPrecision(2);
} }
let inputEl: HTMLInputElement | undefined = $state(); let inputEl = $state() as HTMLInputElement;
let prev = -1; let prev = -1;
function update() { function update() {
@@ -82,6 +84,10 @@
</div> </div>
<style> <style>
:root {
--slider-height: 4px;
}
.component-wrapper { .component-wrapper {
display: flex; display: flex;
background-color: var(--layer-2, #4b4b4b); background-color: var(--layer-2, #4b4b4b);
@@ -145,7 +151,7 @@
position: absolute; position: absolute;
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 3px; height: var(--slider-height);
background: var(--layer-2, #4b4b4b); background: var(--layer-2, #4b4b4b);
cursor: pointer; cursor: pointer;
} }
@@ -154,16 +160,18 @@
input[type='range']::-webkit-slider-thumb { input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 0px; width: 12px;
height: 0px; height: var(--slider-height);
background: var(--text-color);
box-shadow: none; box-shadow: none;
} }
/* Thumb: for Firefox */ /* Thumb: for Firefox */
input[type='range']::-moz-range-thumb { input[type='range']::-moz-range-thumb {
border: none; border: none;
width: 0px; width: 12px;
height: 0px; height: var(--slider-height);
background: var(--text-color);
box-shadow: none; box-shadow: none;
} }
</style> </style>