refactor: use tailwind custom colors for themes
Use tailwind v4 @theme block so we can use bg-layer-0 instead of bg-[--layer-0] for theme colors.
This commit is contained in:
Max Richter
@@ -1,199 +0,0 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
value?: number;
|
||||
step?: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
value = $bindable(0.5),
|
||||
step,
|
||||
min = $bindable(0),
|
||||
max = $bindable(1),
|
||||
id
|
||||
}: Props = $props();
|
||||
|
||||
if (min > max) {
|
||||
[min, max] = [max, min];
|
||||
}
|
||||
if (value > max) {
|
||||
max = value;
|
||||
}
|
||||
|
||||
const precision = $derived(
|
||||
((step || value).toString().split('.')[1] || '').length
|
||||
);
|
||||
|
||||
function strip(input: number) {
|
||||
return +parseFloat(input + '').toFixed(precision);
|
||||
}
|
||||
|
||||
let inputEl: HTMLInputElement | undefined = $state();
|
||||
|
||||
let oldValue: number;
|
||||
function handleChange() {
|
||||
if (value === oldValue) return;
|
||||
oldValue = value;
|
||||
}
|
||||
|
||||
let isMouseDown = $state(false);
|
||||
let downV = 0;
|
||||
let vx = 0;
|
||||
let rect: DOMRect;
|
||||
|
||||
function handleMouseDown(ev: MouseEvent) {
|
||||
ev.preventDefault();
|
||||
|
||||
if (!inputEl) return;
|
||||
|
||||
inputEl.focus();
|
||||
|
||||
isMouseDown = true;
|
||||
|
||||
downV = value;
|
||||
rect = inputEl.getBoundingClientRect();
|
||||
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mouseup', handleMouseUp);
|
||||
document.body.style.cursor = 'ew-resize';
|
||||
(ev.target as HTMLElement)?.blur();
|
||||
}
|
||||
|
||||
function handleMouseUp() {
|
||||
isMouseDown = false;
|
||||
|
||||
if (downV === value) {
|
||||
inputEl?.focus();
|
||||
}
|
||||
|
||||
if (value > max) {
|
||||
max = value;
|
||||
}
|
||||
|
||||
if (value < min) {
|
||||
min = value;
|
||||
}
|
||||
|
||||
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 handleMouseMove(ev: MouseEvent) {
|
||||
vx = (ev.clientX - rect.left) / rect.width;
|
||||
|
||||
if (ev.ctrlKey) {
|
||||
let v = min + (max - min) * vx;
|
||||
value = v;
|
||||
} else {
|
||||
value = Math.max(Math.min(min + (max - min) * vx, max), min);
|
||||
}
|
||||
|
||||
value = strip(value);
|
||||
|
||||
// With ctrl + outside of input ev.target becomes HTMLDocument
|
||||
if (ev.target instanceof HTMLElement) {
|
||||
ev.target?.blur();
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (value.toString().length > 5) {
|
||||
value = strip(value);
|
||||
}
|
||||
if (value !== undefined) {
|
||||
handleChange();
|
||||
}
|
||||
});
|
||||
|
||||
let width = $derived(
|
||||
Number.isFinite(value)
|
||||
? Math.max((value?.toString().length ?? 1) * 8, 50) + 'px'
|
||||
: '20px'
|
||||
);
|
||||
</script>
|
||||
|
||||
<div class="component-wrapper" class:is-down={isMouseDown}>
|
||||
<span class="overlay" style={`width: ${((value - min) / (max - min)) * 100}%`}></span>
|
||||
<input
|
||||
bind:value
|
||||
bind:this={inputEl}
|
||||
{id}
|
||||
{step}
|
||||
{max}
|
||||
{min}
|
||||
onkeydown={handleKeyDown}
|
||||
onmousedown={handleMouseDown}
|
||||
onmouseup={handleMouseUp}
|
||||
type="number"
|
||||
style={`width:${width};`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.component-wrapper {
|
||||
position: relative;
|
||||
background-color: var(--layer-2, #4b4b4b);
|
||||
border-radius: 4px;
|
||||
user-select: none;
|
||||
transition: box-shadow 0.3s ease;
|
||||
border: solid 1px var(--outline);
|
||||
box-sizing: border-box;
|
||||
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"] {
|
||||
box-sizing: border-box;
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
font-family: var(--font-family);
|
||||
font-variant-numeric: tabular-nums;
|
||||
cursor: pointer;
|
||||
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;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.is-down > input {
|
||||
cursor: ew-resize !important;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
background-color: var(--text-color);
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.is-down > .overlay {
|
||||
transition: none !important;
|
||||
}
|
||||
</style>
|
||||
@@ -18,7 +18,7 @@
|
||||
</script>
|
||||
|
||||
<label
|
||||
class="relative inline-flex h-[22px] w-[22px] cursor-pointer items-center justify-center bg-[var(--layer-2)] rounded-[5px]"
|
||||
class="relative inline-flex h-5.5 w-5.5 cursor-pointer items-center justify-center bg-layer-2 rounded-[5px]"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -33,7 +33,7 @@
|
||||
viewBox="0 0 19 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-[10px] w-[12px] text-[var(--text-color)]"
|
||||
class="h-2.5 w-3 text-text"
|
||||
>
|
||||
<path
|
||||
d="M2 7L7 12L17 2"
|
||||
174
packages/ui/src/lib/inputs/InputNumber.svelte
Normal file
174
packages/ui/src/lib/inputs/InputNumber.svelte
Normal file
@@ -0,0 +1,174 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
value?: number;
|
||||
step?: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
value = $bindable(0.5),
|
||||
step,
|
||||
min = $bindable(0),
|
||||
max = $bindable(1),
|
||||
id
|
||||
}: Props = $props();
|
||||
|
||||
// normalize bounds
|
||||
if (min > max) [min, max] = [max, min];
|
||||
if (value > max) max = value;
|
||||
|
||||
let inputEl: HTMLInputElement | undefined = $state();
|
||||
|
||||
function clamp(v: number) {
|
||||
return Math.min(max, Math.max(min, v));
|
||||
}
|
||||
|
||||
function snap(v: number) {
|
||||
if (step) v = Math.round(v / step) * step;
|
||||
return +v.toFixed(3);
|
||||
}
|
||||
|
||||
let dragging = $state(false);
|
||||
let startValue = 0;
|
||||
let rect: DOMRect;
|
||||
|
||||
function onMouseDown(e: MouseEvent) {
|
||||
if (!inputEl) return;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
dragging = true;
|
||||
startValue = value;
|
||||
rect = inputEl.getBoundingClientRect();
|
||||
|
||||
document.body.style.cursor = 'ew-resize';
|
||||
window.addEventListener('mousemove', onMouseMove);
|
||||
window.addEventListener('mouseup', onMouseUp);
|
||||
}
|
||||
|
||||
function onMouseMove(e: MouseEvent) {
|
||||
const ratio = (e.clientX - rect.left) / rect.width;
|
||||
let delta = (min + (max - min) * ratio) - startValue;
|
||||
|
||||
if (e.shiftKey) delta /= 5;
|
||||
|
||||
value = snap(
|
||||
e.ctrlKey
|
||||
? startValue + delta
|
||||
: clamp(startValue + delta)
|
||||
);
|
||||
}
|
||||
|
||||
function onMouseUp() {
|
||||
dragging = false;
|
||||
document.body.style.cursor = '';
|
||||
window.removeEventListener('mousemove', onMouseMove);
|
||||
window.removeEventListener('mouseup', onMouseUp);
|
||||
if (startValue === value) {
|
||||
inputEl?.focus();
|
||||
}
|
||||
|
||||
min = Math.min(min, value);
|
||||
max = Math.max(max, value);
|
||||
}
|
||||
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape' || e.key === 'Enter') {
|
||||
onMouseUp();
|
||||
inputEl?.blur();
|
||||
}
|
||||
}
|
||||
|
||||
function windowKeyDown(e: KeyboardEvent) {
|
||||
if (!dragging) return;
|
||||
if (e.shiftKey) {
|
||||
startValue = value;
|
||||
}
|
||||
}
|
||||
|
||||
const width = $derived(
|
||||
Number.isFinite(value)
|
||||
? `${Math.max(value.toString().length * 8, 50)}px`
|
||||
: '20px'
|
||||
);
|
||||
|
||||
function stepUp(e: MouseEvent) {
|
||||
value = snap(value + (e.shiftKey ? step! * 10 : step!));
|
||||
}
|
||||
|
||||
function stepDown(e: MouseEvent) {
|
||||
value = snap(value - (e.shiftKey ? step! * 10 : step!));
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
value = snap(clamp(value));
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={windowKeyDown} />
|
||||
|
||||
<div
|
||||
class="component-wrapper relative flex items-stretch overflow-hidden rounded-sm border border-outline bg-layer-2 select-none transition-shadow"
|
||||
class:cursor-ew-resize={dragging}
|
||||
>
|
||||
{#if step}
|
||||
<button
|
||||
aria-label="step down"
|
||||
onmousedown={stepDown}
|
||||
class="cursor-pointer w-4 bg-layer-3 opacity-30 hover:opacity-50"
|
||||
>
|
||||
<span class="i-[tabler--chevron-compact-left] block h-full w-full text-outline!"></span>
|
||||
</button>
|
||||
<div class="w-px bg-outline"></div>
|
||||
{/if}
|
||||
|
||||
<div class="relative grow">
|
||||
<div
|
||||
class="absolute inset-y-0 left-0 bg-layer-3 opacity-30 pointer-events-none transition-[width]"
|
||||
class:transition-none={dragging}
|
||||
style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`}
|
||||
>
|
||||
</div>
|
||||
|
||||
<input
|
||||
bind:this={inputEl}
|
||||
bind:value
|
||||
{id}
|
||||
{step}
|
||||
{min}
|
||||
{max}
|
||||
type="number"
|
||||
onkeydown={onKeyDown}
|
||||
onmousedown={onMouseDown}
|
||||
class="w-full min-w-full cursor-pointer bg-transparent px-2 py-1 text-center font-tabular text-text outline-none appearance-none"
|
||||
style:width={width}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if step}
|
||||
<div class="w-px bg-outline"></div>
|
||||
<button
|
||||
aria-label="step up"
|
||||
onmousedown={stepUp}
|
||||
class="cursor-pointer w-4 bg-layer-3 opacity-30 hover:opacity-50"
|
||||
>
|
||||
<span class="i-[tabler--chevron-compact-right] block h-full w-full text-outline!"></span>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
input[type="number"] {
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
</style>
|
||||
@@ -8,7 +8,7 @@
|
||||
let { options = [], value = $bindable(0), id = '' }: Props = $props();
|
||||
</script>
|
||||
|
||||
<select {id} bind:value>
|
||||
<select {id} bind:value class="bg-layer-2 text-text">
|
||||
{#each options as label, i (label)}
|
||||
<option value={i}>{label}</option>
|
||||
{/each}
|
||||
@@ -16,10 +16,8 @@
|
||||
|
||||
<style>
|
||||
select {
|
||||
background: var(--layer-2);
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-family);
|
||||
outline: solid 1px var(--outline);
|
||||
outline: solid 1px var(--color-outline);
|
||||
padding: 0.8em 1em;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import Float from './Float.svelte';
|
||||
import InputNumber from './InputNumber.svelte';
|
||||
|
||||
interface Props {
|
||||
value?: number[];
|
||||
@@ -10,9 +10,9 @@
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<Float id={`${id}-x`} bind:value={value[0]} step={0.01} />
|
||||
<Float id={`${id}-y`} bind:value={value[1]} step={0.01} />
|
||||
<Float id={`${id}-z`} bind:value={value[2]} step={0.01} />
|
||||
<InputNumber id={`${id}-x`} bind:value={value[0]} step={0.01} />
|
||||
<InputNumber id={`${id}-y`} bind:value={value[1]} step={0.01} />
|
||||
<InputNumber id={`${id}-z`} bind:value={value[2]} step={0.01} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -23,9 +23,9 @@
|
||||
div > :global(.component-wrapper:nth-child(2)) {
|
||||
border-radius: 0px !important;
|
||||
outline: none;
|
||||
border: solid thin var(--outline);
|
||||
border-top: solid thin color-mix(in srgb, var(--outline) 50%, transparent);
|
||||
border-bottom: solid thin color-mix(in srgb, var(--outline) 50%, transparent);
|
||||
border: solid thin var(--color-outline);
|
||||
border-top: solid 1px var(--color-outline);
|
||||
border-bottom: solid 1px var(--color-outline);
|
||||
}
|
||||
div > :global(.component-wrapper:nth-child(3)) {
|
||||
border-top: none !important;
|
||||
Reference in New Issue
Block a user