73 lines
2.0 KiB
Svelte
73 lines
2.0 KiB
Svelte
|
<!--
|
||
|
|
Component: ComboControl
|
||
|
|
Provides the same functionality as the original ComboControl but lacks increase/decrease buttons.
|
||
|
|
-->
|
||
|
|
<script lang="ts">
|
||
|
|
import type { TypographyControl } from '$shared/lib';
|
||
|
|
import { Input } from '$shared/shadcn/ui/input';
|
||
|
|
import { Slider } from '$shared/shadcn/ui/slider';
|
||
|
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||
|
|
import type { Snippet } from 'svelte';
|
||
|
|
import type { ChangeEventHandler } from 'svelte/elements';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
control: TypographyControl;
|
||
|
|
ref?: Snippet;
|
||
|
|
}
|
||
|
|
|
||
|
|
let {
|
||
|
|
control,
|
||
|
|
ref = $bindable(),
|
||
|
|
}: Props = $props();
|
||
|
|
|
||
|
|
let sliderValue = $state(Number(control.value));
|
||
|
|
|
||
|
|
$effect(() => {
|
||
|
|
sliderValue = Number(control.value);
|
||
|
|
});
|
||
|
|
|
||
|
|
const handleInputChange: ChangeEventHandler<HTMLInputElement> = event => {
|
||
|
|
const parsedValue = parseFloat(event.currentTarget.value);
|
||
|
|
if (!isNaN(parsedValue)) {
|
||
|
|
control.value = parsedValue;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSliderChange = (newValue: number) => {
|
||
|
|
control.value = newValue;
|
||
|
|
};
|
||
|
|
|
||
|
|
// Shared glass button class for consistency
|
||
|
|
// const glassBtnClass = cn(
|
||
|
|
// 'border-none transition-all duration-200',
|
||
|
|
// 'bg-white/10 hover:bg-white/40 active:scale-90',
|
||
|
|
// 'text-slate-900 font-medium',
|
||
|
|
// );
|
||
|
|
|
||
|
|
// const ghostStyle = cn(
|
||
|
|
// 'flex items-center justify-center transition-all duration-300 ease-out',
|
||
|
|
// 'text-slate-900/40 hover:text-slate-950 hover:bg-white/20 active:scale-90',
|
||
|
|
// 'disabled:opacity-10 disabled:pointer-events-none',
|
||
|
|
// );
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="flex flex-col items-center gap-4">
|
||
|
|
<Input
|
||
|
|
value={control.value}
|
||
|
|
onchange={handleInputChange}
|
||
|
|
min={control.min}
|
||
|
|
max={control.max}
|
||
|
|
class="w-14 h-8 text-xs text-center bg-white/40 border-none rounded-lg focus-visible:ring-indigo-500/50"
|
||
|
|
/>
|
||
|
|
<Slider
|
||
|
|
min={control.min}
|
||
|
|
max={control.max}
|
||
|
|
step={control.step}
|
||
|
|
value={sliderValue}
|
||
|
|
onValueChange={handleSliderChange}
|
||
|
|
type="single"
|
||
|
|
orientation="vertical"
|
||
|
|
class="h-30"
|
||
|
|
/>
|
||
|
|
</div>
|