🧼 Updates inputs after svelte migration
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user