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

feat(ComboControl): use IconButton component

Browse Source
This commit is contained in:
Ilia Mashkov
2026-01-30 00:52:42 +03:00
parent 433fd2f7e6
commit 04602f0372
1 changed files with 13 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,6 +24,7 @@ import {
import MinusIcon from '@lucide/svelte/icons/minus';
import PlusIcon from '@lucide/svelte/icons/plus';
import type { ChangeEventHandler } from 'svelte/elements';
import IconButton from '../IconButton/IconButton.svelte';
interface ComboControlProps {
/**
@@ -79,34 +80,16 @@ const handleSliderChange = (newValue: number) => {
<TooltipRoot>
<ButtonGroupRoot class="bg-transparent border-none shadow-none">
<TooltipTrigger class="flex items-center">
<Button
variant="ghost"
class="
group relative border-none size-9
bg-white/20 hover:bg-white/60
backdrop-blur-3xl
transition-all duration-200 ease-out
will-change-transform
hover:-translate-y-0.5
active:translate-y-0 active:scale-95 active:shadow-none
cursor-pointer
disabled:opacity-50 disabled:pointer-events-none
"
size="icon"
<IconButton
onclick={control.decrease}
disabled={control.isAtMin}
aria-label={decreaseLabel}
rotation="counterclockwise"
>
<MinusIcon
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
"
/>
</Button>
{#snippet icon({ className })}
<MinusIcon class={className} />
{/snippet}
</IconButton>
<PopoverRoot>
<PopoverTrigger>
{#snippet child({ props })}
@@ -144,33 +127,16 @@ const handleSliderChange = (newValue: number) => {
</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"
<IconButton
aria-label={increaseLabel}
onclick={control.increase}
disabled={control.isAtMax}
rotation="clockwise"
>
<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
"
/>
</Button>
{#snippet icon({ className })}
<PlusIcon class={className} />
{/snippet}
</IconButton>
</TooltipTrigger>
</ButtonGroupRoot>
{#if controlLabel}