glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/comparison-slider #19

Merged
ilia merged 129 commits from feature/comparison-slider into main 2026-02-02 09:23:46 +00:00
Conversation 0 Commits 129 Files Changed 106 +105 -56
1 changed files with 105 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 873b697e8c - Show all commits

161
src/shared/ui/ComboControl/ComboControl.svelte
View File

@@ -16,6 +16,11 @@ import {
Trigger as PopoverTrigger, Trigger as PopoverTrigger,
} from '$shared/shadcn/ui/popover'; } from '$shared/shadcn/ui/popover';
import { Slider } from '$shared/shadcn/ui/slider'; import { Slider } from '$shared/shadcn/ui/slider';
import {
Content as TooltipContent,
Root as TooltipRoot,
Trigger as TooltipTrigger,
} from '$shared/shadcn/ui/tooltip';
import MinusIcon from '@lucide/svelte/icons/minus'; import MinusIcon from '@lucide/svelte/icons/minus';
import PlusIcon from '@lucide/svelte/icons/plus'; import PlusIcon from '@lucide/svelte/icons/plus';
import type { ChangeEventHandler } from 'svelte/elements'; import type { ChangeEventHandler } from 'svelte/elements';
@@ -71,61 +76,105 @@ const handleSliderChange = (newValue: number) => {
}; };
</script> </script>
<ButtonGroupRoot class="bg-transparent border-none shadow-none"> <TooltipRoot>
<Button <ButtonGroupRoot class="bg-transparent border-none shadow-none">
variant="ghost" <TooltipTrigger class="flex items-center">
class="hover:bg-white/50 bg-white/20 border-none" <Button
size="icon" variant="ghost"
aria-label={decreaseLabel} class="
onclick={control.decrease} group relative border-none size-9
disabled={control.isAtMin} bg-white/20 hover:bg-white/60
> transition-all duration-200 ease-out
<MinusIcon class="size-4" /> will-change-transform
</Button> hover:-translate-y-0.5
<PopoverRoot> active:translate-y-0 active:scale-95 active:shadow-none
<PopoverTrigger> cursor-pointer
{#snippet child({ props })} disabled:opacity-50 disabled:pointer-events-none
<Button "
{...props} size="icon"
variant="ghost" onclick={control.decrease}
class="hover:bg-white/50 bg-white/20 border-none" disabled={control.isAtMin}
size="icon" aria-label={decreaseLabel}
aria-label={controlLabel} >
> <MinusIcon
{control.value} class="
</Button> size-4 transition-all duration-200
{/snippet} stroke-slate-600/50
</PopoverTrigger> group-hover:stroke-indigo-500 group-hover:scale-110 group-hover:stroke-3
<PopoverContent class="w-auto p-4"> group-active:scale-90 group-active:-rotate-6
<div class="flex flex-col items-center gap-3"> group-disabled:stroke-transparent
<Slider "
min={control.min}
max={control.max}
step={control.step}
value={sliderValue}
onValueChange={handleSliderChange}
type="single"
orientation="vertical"
class="h-48"
/> />
<Input </Button>
value={control.value} <PopoverRoot>
onchange={handleInputChange} <PopoverTrigger>
min={control.min} {#snippet child({ props })}
max={control.max} <Button
class="w-16 text-center" {...props}
variant="ghost"
class="hover:bg-white/50 hover:font-bold bg-white/20 border-none duration-150 will-change-transform active:scale-95 cursor-pointer"
size="icon"
aria-label={controlLabel}
>
{control.value}
</Button>
{/snippet}
</PopoverTrigger>
<PopoverContent class="w-auto p-4">
<div class="flex flex-col items-center gap-3">
<Slider
min={control.min}
max={control.max}
step={control.step}
value={sliderValue}
onValueChange={handleSliderChange}
type="single"
orientation="vertical"
class="h-48"
/>
<Input
value={control.value}
onchange={handleInputChange}
min={control.min}
max={control.max}
class="w-16 text-center"
/>
</div>
</PopoverContent>
</PopoverRoot>
<Button
variant="ghost"
class="
group relative border-none size-9
bg-white/20 hover:bg-white/60
transition-all duration-200 ease-out
will-change-transform
hover:-translate-y-0.5
active:translate-y-0 active:scale-95 active:shadow-none
disabled:opacity-50 disabled:pointer-events-none
cursor-pointer
"
size="icon"
aria-label={increaseLabel}
onclick={control.increase}
disabled={control.isAtMax}
>
<PlusIcon
class="
size-4 transition-all duration-200
stroke-slate-600/50
group-hover:stroke-indigo-500 group-hover:scale-110 group-hover:stroke-3
group-active:scale-90 group-active:rotate-6
group-disabled:stroke-transparent
"
/> />
</div> </Button>
</PopoverContent> </TooltipTrigger>
</PopoverRoot> </ButtonGroupRoot>
<Button {#if controlLabel}
variant="ghost" <TooltipContent>
class="hover:bg-white/50 bg-white/20 border-none" {controlLabel}
size="icon" </TooltipContent>
aria-label={increaseLabel} {/if}
onclick={control.increase} </TooltipRoot>
disabled={control.isAtMax}
>
<PlusIcon class="size-4" />
</Button>
</ButtonGroupRoot>