Merge remote-tracking branch 'origin/main' into feat/arena-runtime
This commit is contained in:
Max Richter
@@ -10,8 +10,8 @@
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@nodarium/types": "link:../types",
|
||||
"@nodarium/utils": "link:../utils",
|
||||
"@nodarium/types": "workspace:",
|
||||
"@nodarium/utils": "workspace:",
|
||||
"idb": "^8.0.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
"svelte": "^4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nodarium/types": "link:../types",
|
||||
"@nodarium/types": "workspace:",
|
||||
"@sveltejs/adapter-static": "^3.0.10",
|
||||
"@sveltejs/kit": "^2.50.0",
|
||||
"@sveltejs/package": "^2.5.7",
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { NodeInput } from '@nodarium/types';
|
||||
|
||||
import Checkbox from './inputs/Checkbox.svelte';
|
||||
import Number from './inputs/Number.svelte';
|
||||
import Select from './inputs/Select.svelte';
|
||||
import Vec3 from './inputs/Vec3.svelte';
|
||||
import { Checkbox, Number, Select, Vec3 } from './index.js';
|
||||
|
||||
interface Props {
|
||||
input: NodeInput;
|
||||
@@ -16,7 +13,7 @@
|
||||
</script>
|
||||
|
||||
{#if input.type === 'float'}
|
||||
<Number bind:value min={input?.min} max={input?.max} step={0.01} />
|
||||
<Number bind:value min={input?.min} max={input?.max} step={input?.step} />
|
||||
{:else if input.type === 'integer'}
|
||||
<Number bind:value min={input?.min} max={input?.max} />
|
||||
{:else if input.type === 'boolean'}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
export { default as Input } from './Input.svelte';
|
||||
export { default as Checkbox } from './inputs/Checkbox.svelte';
|
||||
export { default as Float } from './inputs/Float.svelte';
|
||||
export { default as Float, default as Number } from './inputs/Float.svelte';
|
||||
export { default as Integer } from './inputs/Integer.svelte';
|
||||
export { default as Number } from './inputs/Number.svelte';
|
||||
export { default as Select } from './inputs/Select.svelte';
|
||||
export { default as Vec3 } from './inputs/Vec3.svelte';
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
let {
|
||||
value = $bindable(0.5),
|
||||
step = 0.01,
|
||||
step,
|
||||
min = $bindable(0),
|
||||
max = $bindable(1),
|
||||
id
|
||||
@@ -22,8 +22,11 @@
|
||||
max = value;
|
||||
}
|
||||
|
||||
// svelte-ignore state_referenced_locally only use initial values
|
||||
const precision = ((step || value).toString().split('.')[1] || '').length;
|
||||
|
||||
function strip(input: number) {
|
||||
return +parseFloat(input + '').toPrecision(2);
|
||||
return +parseFloat(input + '').toFixed(precision);
|
||||
}
|
||||
|
||||
let inputEl: HTMLInputElement | undefined = $state();
|
||||
@@ -94,14 +97,22 @@
|
||||
} else {
|
||||
value = Math.max(Math.min(min + (max - min) * vx, max), min);
|
||||
}
|
||||
(ev.target as HTMLElement)?.blur();
|
||||
|
||||
value = strip(value);
|
||||
|
||||
// With ctrl + outside of input ev.target becomes HTMLDocument
|
||||
if (ev.target instanceof HTMLElement) {
|
||||
ev.target?.blur();
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if ((value || 0).toString().length > 5) {
|
||||
value = strip(value || 0);
|
||||
if (value.toString().length > 5) {
|
||||
value = strip(value);
|
||||
}
|
||||
value !== undefined && handleChange();
|
||||
});
|
||||
|
||||
let width = $derived(
|
||||
Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 50) + 'px' : '20px'
|
||||
);
|
||||
@@ -137,12 +148,12 @@
|
||||
border-radius: var(--border-radius, 2px);
|
||||
}
|
||||
|
||||
input[type='number']::-webkit-inner-spin-button,
|
||||
input[type='number']::-webkit-outer-spin-button {
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type='number'] {
|
||||
input[type="number"] {
|
||||
box-sizing: border-box;
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
|
||||
@@ -1,210 +1,215 @@
|
||||
<!--
|
||||
@component
|
||||
@deprecated use Float.svelte
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
value?: number;
|
||||
step?: number;
|
||||
min?: number | undefined;
|
||||
max?: number | undefined;
|
||||
id?: string;
|
||||
change?: (arg: number) => void;
|
||||
}
|
||||
interface Props {
|
||||
value?: number;
|
||||
step?: number;
|
||||
min?: number | undefined;
|
||||
max?: number | undefined;
|
||||
id?: string;
|
||||
change?: (arg: number) => void;
|
||||
}
|
||||
|
||||
let {
|
||||
value = $bindable(0),
|
||||
step = 1,
|
||||
min = $bindable(0),
|
||||
max = $bindable(1),
|
||||
id,
|
||||
change
|
||||
}: Props = $props();
|
||||
let {
|
||||
value = $bindable(0),
|
||||
step = 1,
|
||||
min = $bindable(0),
|
||||
max = $bindable(1),
|
||||
id,
|
||||
change
|
||||
}: Props = $props();
|
||||
|
||||
if (min > max) {
|
||||
[min, max] = [max, min];
|
||||
}
|
||||
if (value > max) {
|
||||
max = value;
|
||||
}
|
||||
if (min > max) {
|
||||
[min, max] = [max, min];
|
||||
}
|
||||
if (value > max) {
|
||||
max = value;
|
||||
}
|
||||
|
||||
function strip(input: number) {
|
||||
return +parseFloat(input + '').toPrecision(2);
|
||||
}
|
||||
function strip(input: number) {
|
||||
return +parseFloat(input + '').toPrecision(2);
|
||||
}
|
||||
|
||||
let inputEl = $state() as HTMLInputElement;
|
||||
let wrapper = $state() as HTMLDivElement;
|
||||
let inputEl = $state() as HTMLInputElement;
|
||||
let wrapper = $state() as HTMLDivElement;
|
||||
|
||||
let prev = -1;
|
||||
function update() {
|
||||
if (prev === value) return;
|
||||
prev = value;
|
||||
change?.(value);
|
||||
}
|
||||
let prev = -1;
|
||||
function update() {
|
||||
if (prev === value) return;
|
||||
prev = value;
|
||||
change?.(value);
|
||||
}
|
||||
|
||||
function handleChange(change: number) {
|
||||
value = Math.max(min ?? -Infinity, Math.min(+value + change, max ?? Infinity));
|
||||
}
|
||||
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;
|
||||
let isMouseDown = $state(false);
|
||||
let downX = 0;
|
||||
let downV = 0;
|
||||
let rect: DOMRect;
|
||||
|
||||
function handleMouseDown(ev: MouseEvent) {
|
||||
ev.preventDefault();
|
||||
function handleMouseDown(ev: MouseEvent) {
|
||||
ev.preventDefault();
|
||||
|
||||
downV = value;
|
||||
downX = ev.clientX;
|
||||
rect = wrapper.getBoundingClientRect();
|
||||
downV = value;
|
||||
downX = ev.clientX;
|
||||
rect = wrapper.getBoundingClientRect();
|
||||
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mouseup', handleMouseUp);
|
||||
document.body.style.cursor = 'ew-resize';
|
||||
}
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mouseup', handleMouseUp);
|
||||
document.body.style.cursor = 'ew-resize';
|
||||
}
|
||||
|
||||
function handleMouseUp() {
|
||||
if (downV === value) {
|
||||
inputEl.focus();
|
||||
} else {
|
||||
inputEl.blur();
|
||||
}
|
||||
function handleMouseUp() {
|
||||
if (downV === value) {
|
||||
inputEl.focus();
|
||||
} else {
|
||||
inputEl.blur();
|
||||
}
|
||||
|
||||
document.body.style.cursor = 'unset';
|
||||
window.removeEventListener('mouseup', handleMouseUp);
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
}
|
||||
document.body.style.cursor = 'unset';
|
||||
window.removeEventListener('mouseup', handleMouseUp);
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
}
|
||||
|
||||
function handleKeyDown(ev: KeyboardEvent) {
|
||||
if (ev.key === 'Escape' || ev.key === 'Enter') {
|
||||
handleMouseUp();
|
||||
inputEl?.blur();
|
||||
}
|
||||
}
|
||||
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;
|
||||
value = Math.max(Math.min(Math.round(min + (max - min) * vx), max), min);
|
||||
} else {
|
||||
const vx = ev.clientX - downX;
|
||||
value = downV + Math.round(vx / 10);
|
||||
}
|
||||
}
|
||||
function handleMouseMove(ev: MouseEvent) {
|
||||
if (!ev.ctrlKey && typeof min === 'number' && typeof max === 'number') {
|
||||
const vx = (ev.clientX - rect.left) / rect.width;
|
||||
value = Math.max(Math.min(Math.round(min + (max - min) * vx), max), min);
|
||||
} else {
|
||||
const vx = ev.clientX - downX;
|
||||
value = downV + Math.round(vx / 10);
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if ((value || 0).toString().length > 5) {
|
||||
value = strip(value || 0);
|
||||
}
|
||||
value !== undefined && update();
|
||||
});
|
||||
$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'
|
||||
);
|
||||
let width = $derived(
|
||||
Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 30) + 'px' : '20px'
|
||||
);
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="component-wrapper"
|
||||
bind:this={wrapper}
|
||||
class:is-down={isMouseDown}
|
||||
role="slider"
|
||||
tabindex="0"
|
||||
aria-valuenow={value}
|
||||
onkeydown={handleKeyDown}
|
||||
onmousedown={handleMouseDown}
|
||||
onmouseup={handleMouseUp}
|
||||
class="component-wrapper"
|
||||
bind:this={wrapper}
|
||||
class:is-down={isMouseDown}
|
||||
role="slider"
|
||||
tabindex="0"
|
||||
aria-valuenow={value}
|
||||
onkeydown={handleKeyDown}
|
||||
onmousedown={handleMouseDown}
|
||||
onmouseup={handleMouseUp}
|
||||
>
|
||||
<button onclick={() => handleChange(-step)}>-</button>
|
||||
<input
|
||||
bind:value
|
||||
bind:this={inputEl}
|
||||
{id}
|
||||
{step}
|
||||
{max}
|
||||
{min}
|
||||
type="number"
|
||||
style={`width:${width};`}
|
||||
/>
|
||||
<button onclick={() => handleChange(-step)}>-</button>
|
||||
<input
|
||||
bind:value
|
||||
bind:this={inputEl}
|
||||
{id}
|
||||
{step}
|
||||
{max}
|
||||
{min}
|
||||
type="number"
|
||||
style={`width:${width};`}
|
||||
/>
|
||||
|
||||
<button onclick={() => handleChange(+step)}>+</button>
|
||||
{#if typeof min !== 'undefined' && typeof max !== 'undefined'}
|
||||
<span
|
||||
class="overlay"
|
||||
style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`}
|
||||
></span>
|
||||
{/if}
|
||||
<button onclick={() => handleChange(+step)}>+</button>
|
||||
{#if typeof min !== 'undefined' && typeof max !== 'undefined'}
|
||||
<span
|
||||
class="overlay"
|
||||
style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`}
|
||||
></span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.component-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
background-color: var(--layer-2, #4b4b4b);
|
||||
border-radius: 2px;
|
||||
user-select: none;
|
||||
transition: box-shadow 0.3s ease;
|
||||
outline: solid 1px var(--outline);
|
||||
overflow: hidden;
|
||||
border-radius: var(--border-radius, 2px);
|
||||
}
|
||||
.component-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
background-color: var(--layer-2, #4b4b4b);
|
||||
border-radius: 2px;
|
||||
user-select: none;
|
||||
transition: box-shadow 0.3s ease;
|
||||
outline: solid 1px var(--outline);
|
||||
overflow: hidden;
|
||||
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-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%;
|
||||
}
|
||||
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%;
|
||||
}
|
||||
|
||||
.is-down > input {
|
||||
cursor: ew-resize !important;
|
||||
}
|
||||
.is-down > input {
|
||||
cursor: ew-resize !important;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-color: var(--layer-3);
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-color: var(--layer-3);
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.is-down > .overlay {
|
||||
transition: none !important;
|
||||
}
|
||||
.is-down > .overlay {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
line-height: 0px;
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
margin-inline: 6px;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,177 +0,0 @@
|
||||
<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: _id
|
||||
}: Props = $props();
|
||||
const uid = $props.id();
|
||||
const id = $derived(_id || uid);
|
||||
|
||||
if (min > max) {
|
||||
[min, max] = [max, min];
|
||||
}
|
||||
if (value > max) {
|
||||
max = value;
|
||||
}
|
||||
|
||||
function strip(input: number) {
|
||||
return +parseFloat(input + '').toPrecision(2);
|
||||
}
|
||||
|
||||
let inputEl = $state() as HTMLInputElement;
|
||||
|
||||
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>
|
||||
:root {
|
||||
--slider-height: 4px;
|
||||
}
|
||||
|
||||
.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: var(--slider-height);
|
||||
background: var(--layer-2, #4b4b4b);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Thumb: for Chrome, Safari, Edge */
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 12px;
|
||||
height: var(--slider-height);
|
||||
background: var(--text-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Thumb: for Firefox */
|
||||
input[type='range']::-moz-range-thumb {
|
||||
border: none;
|
||||
width: 12px;
|
||||
height: var(--slider-height);
|
||||
background: var(--text-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import Number from './Number.svelte';
|
||||
import { Number } from '$lib/index.js';
|
||||
|
||||
interface Props {
|
||||
value?: any;
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
<script lang="ts">
|
||||
import '$lib/app.css';
|
||||
import { Checkbox, Details, Float, Integer, Number, Select, ShortCut, Vec3 } from '$lib/index.js';
|
||||
import { Checkbox, Details, Number, 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);
|
||||
@@ -30,22 +32,22 @@
|
||||
<Select bind:value={themeIndex} options={themes}></Select>
|
||||
</div>
|
||||
|
||||
<Section title="Integer" value={intValue}>
|
||||
<Integer bind:value={intValue} />
|
||||
<Section title="Integer (step inherit)" value={intValue}>
|
||||
<Number bind:value={intValue} max={2} />
|
||||
</Section>
|
||||
|
||||
<Section title="Float" value={floatValue}>
|
||||
<Float bind:value={floatValue} />
|
||||
</Section>
|
||||
|
||||
<Section title="Number" value={intValue}>
|
||||
<Number bind:value={intValue} />
|
||||
</Section>
|
||||
|
||||
<Section title="Number (float)" value={floatValue}>
|
||||
<Section title="Float (step inherit)" value={floatValue}>
|
||||
<Number bind:value={floatValue} />
|
||||
</Section>
|
||||
|
||||
<Section title="Float 2 (step inherit)" value={intValue}>
|
||||
<Number bind:value={float2Value} />
|
||||
</Section>
|
||||
|
||||
<Section title="Float (0.01 step)" value={floatValue}>
|
||||
<Number bind:value={float3Value} step={0.01} max={3} />
|
||||
</Section>
|
||||
|
||||
<Section title="Vec3" value={JSON.stringify(vecValue)}>
|
||||
<Vec3 bind:value={vecValue} />
|
||||
</Section>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@nodarium/types": "link:../types"
|
||||
"@nodarium/types": "workspace:"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^7.3.1",
|
||||
|
||||
Reference in New Issue
Block a user