117 lines
3.4 KiB
Svelte
117 lines
3.4 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 { cn } from '$shared/shadcn/utils/shadcn-utils';
|
|
import { Input } from '$shared/ui';
|
|
import { Slider } from '$shared/ui';
|
|
import type { Orientation } from 'bits-ui';
|
|
import type { ChangeEventHandler } from 'svelte/elements';
|
|
|
|
interface Props {
|
|
/**
|
|
* Control instance
|
|
*/
|
|
control: TypographyControl;
|
|
/**
|
|
* Orientation
|
|
*/
|
|
orientation?: Orientation;
|
|
/**
|
|
* Label text
|
|
*/
|
|
label?: string;
|
|
/**
|
|
* CSS class
|
|
*/
|
|
class?: string;
|
|
}
|
|
|
|
let {
|
|
control,
|
|
orientation = 'vertical',
|
|
label,
|
|
class: className,
|
|
}: Props = $props();
|
|
|
|
let inputValue = $state(String(control.value));
|
|
|
|
$effect(() => {
|
|
inputValue = String(control.value);
|
|
});
|
|
|
|
const handleInputChange: ChangeEventHandler<HTMLInputElement> = event => {
|
|
const parsedValue = parseFloat(event.currentTarget.value);
|
|
if (!isNaN(parsedValue)) {
|
|
control.value = parsedValue;
|
|
inputValue = String(parsedValue);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<div
|
|
class={cn(
|
|
'flex gap-4 sm:p-4 rounded-xl transition-all duration-300',
|
|
'backdrop-blur-md',
|
|
orientation === 'horizontal' ? 'flex-row items-end w-full' : 'flex-col items-center h-full',
|
|
className,
|
|
)}
|
|
>
|
|
<Input
|
|
class="h-10 rounded-lg w-12 pl-1 pr-1 sm:pr-1 md:pr-1 sm:pl-1 md:pl-1 text-center"
|
|
value={inputValue}
|
|
onchange={handleInputChange}
|
|
min={control.min}
|
|
max={control.max}
|
|
step={control.step}
|
|
/>
|
|
|
|
<div class={cn('relative', orientation === 'horizontal' ? 'w-full' : 'h-full')}>
|
|
<div
|
|
class={cn(
|
|
'absolute flex justify-between',
|
|
orientation === 'horizontal' ? 'flex-row w-full -top-5 px-0.5' : 'flex-col h-full -left-5 py-0.5',
|
|
)}
|
|
>
|
|
{#each Array(5) as _, i}
|
|
<div
|
|
class={cn(
|
|
'flex items-center gap-1.5',
|
|
orientation === 'horizontal' ? 'flex-col' : 'flex-row',
|
|
)}
|
|
>
|
|
<span class="font-mono text-[0.375rem] text-gray-400 tabular-nums">
|
|
{
|
|
Number.isInteger(control.step)
|
|
? Math.round(control.min + (i * (control.max - control.min) / 4))
|
|
: (control.min + (i * (control.max - control.min) / 4)).toFixed(2)
|
|
}
|
|
</span>
|
|
<div class={cn('bg-gray-300', orientation === 'horizontal' ? 'w-px h-1' : 'h-px w-1')}></div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<Slider
|
|
class={cn(orientation === 'horizontal' ? 'w-full' : 'h-full')}
|
|
bind:value={control.value}
|
|
min={control.min}
|
|
max={control.max}
|
|
step={control.step}
|
|
{orientation}
|
|
/>
|
|
</div>
|
|
|
|
{#if label}
|
|
<div class="flex items-center gap-2 opacity-70">
|
|
<div class="w-1 h-1 rounded-full bg-gray-900"></div>
|
|
<div class="w-px h-2 bg-gray-400/50"></div>
|
|
<span class="font-mono text-[8px] uppercase tracking-[0.2em] text-gray-500 font-medium">
|
|
{label}
|
|
</span>
|
|
</div>
|
|
{/if}
|
|
</div>
|