🧼 Updates inputs after svelte migration

This commit is contained in:
Rune Harlyk
2025-03-01 23:01:32 +01:00
committed by Rune Harlyk
parent 0b01634a20
commit 113ac1bc2c
2 changed files with 36 additions and 41 deletions
@@ -1,37 +1,34 @@
<script lang="ts">
import { createBubbler } from 'svelte/legacy';
interface Props {
min?: number;
max?: number;
step?: number;
value?: any;
}
const bubble = createBubbler();
interface Props {
min?: number;
max?: number;
step?: number;
value?: any;
}
let {
min = 0,
max = 100,
step = 1,
value = $bindable((max - min) / 2)
}: Props = $props();
let {
min = 0,
max = 100,
step = 1,
value = $bindable((max - min) / 2),
...rest
}: Props = $props();
</script>
<input
type="range"
style="writing-mode: vertical-lr; direction: rtl"
class="cursor-pointer"
min={min}
max={max}
step={step}
{min}
{max}
{step}
bind:value
oninput={bubble('input')}
onchange={bubble('change')}
{...rest}
/>
<style>
input[type=range]::-webkit-slider-runnable-track {
background: oklch(var(--p)/1);
border-radius: var(--rounded-box, 1rem);
}
</style>
input[type='range']::-webkit-slider-runnable-track {
background: oklch(var(--p) / 1);
border-radius: var(--rounded-box, 1rem);
}
</style>
+13 -15
View File
@@ -1,22 +1,20 @@
<script lang="ts">
import { createBubbler } from 'svelte/legacy';
interface Props {
options?: string[];
selectedOption?: string;
change: () => void;
[key: string]: any;
}
const bubble = createBubbler();
interface Props {
options?: string[];
selectedOption?: string;
[key: string]: any
}
let { options = [], selectedOption = $bindable(''), ...rest }: Props = $props();
let { options = [], selectedOption = $bindable(''), ...rest }: Props = $props();
</script>
<select
bind:value={selectedOption}
onchange={bubble('change')}
class="select select-bordered select-sm lg:select-md max-w-xs {rest.class || ''}"
bind:value={selectedOption}
{...rest}
class="select select-bordered select-sm lg:select-md max-w-xs {rest.class || ''}"
>
{#each options as option}
<option value={option}>{option}</option>
{/each}
{#each options as option}
<option value={option}>{option}</option>
{/each}
</select>