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

feat(TypographyMenu): add snippets to reduce repetitions

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-09 09:32:08 +03:00
parent df2d6bae3b
commit a7d08a9329
1 changed files with 32 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte
View File

@@ -13,6 +13,7 @@ import {
} from '$shared/ui';
import { comparisonStore } from '$widgets/ComparisonSlider/model';
import AArrowUP from '@lucide/svelte/icons/a-arrow-up';
import { type Orientation } from 'bits-ui';
import { Spring } from 'svelte/motion';
import { fade } from 'svelte/transition';
@@ -106,6 +107,26 @@ $effect(() => {
});
</script>
{#snippet InputComponent(className: string)}
<Input
class={className}
bind:value={comparisonStore.text}
disabled={isDragging}
onfocusin={handleInputFocus}
placeholder="The quick brown fox..."
/>
{/snippet}
{#snippet Controls(className: string, orientation: Orientation)}
{#if typography.weightControl && typography.sizeControl && typography.heightControl}
<div class={className}>
<ComboControlV2 control={typography.weightControl} {orientation} reduced />
<ComboControlV2 control={typography.sizeControl} {orientation} reduced />
<ComboControlV2 control={typography.heightControl} {orientation} reduced />
</div>
{/if}
{/snippet}
<div
class="z-50 will-change-transform"
style:transform="
@@ -117,20 +138,8 @@ $effect(() => {
>
{#if staticPosition}
<div class="flex flex-col gap-6">
<Input
class="p-6"
bind:value={comparisonStore.text}
disabled={isDragging}
onfocusin={handleInputFocus}
placeholder="The quick brown fox..."
/>
{#if typography.weightControl && typography.sizeControl && typography.heightControl}
<div class="flex flex-col justify-between items-center-safe gap-6">
<ComboControlV2 control={typography.weightControl} orientation="horizontal" />
<ComboControlV2 control={typography.sizeControl} orientation="horizontal" />
<ComboControlV2 control={typography.heightControl} orientation="horizontal" />
</div>
{/if}
{@render InputComponent?.('p-6')}
{@render Controls?.('flex flex-col justify-between items-center-safe gap-6', 'horizontal')}
</div>
{:else}
<ExpandableWrapper
@@ -159,46 +168,18 @@ $effect(() => {
{/snippet}
{#snippet visibleContent()}
<div class="relative">
<!--
<Input
bind:value={comparisonStore.text}
disabled={isDragging}
onfocusin={handleInputFocus}
class={cn(
isActive
? 'h-7 sm:h-8 text-[11px] sm:text-xs text-center bg-white/40 border-none rounded-lg focus-visible:ring-indigo-500/50 text-slate-900'
: 'bg-transparent shadow-none border-none p-0 h-auto text-sm sm:text-base font-medium focus-visible:ring-0 text-slate-900/50',
' placeholder:text-slate-400 selection:bg-indigo-100 flex-1 transition-all duration-350 w-44 sm:w-56',
)}
placeholder="The quick brown fox..."
/>
-->
<Input
class={cn(
'pl-1 sm:pl-3 pr-1 sm:pr-3',
'h-6 sm:h-8 md:h-10',
'rounded-lg',
isActive
? 'h-7 sm:h-8 text-[0.825rem]'
: 'bg-transparent shadow-none border-none p-0 h-auto text-sm sm:text-base font-medium focus-visible:ring-0 text-slate-900/50',
)}
bind:value={comparisonStore.text}
disabled={isDragging}
onfocusin={handleInputFocus}
placeholder="The quick brown fox..."
/>
</div>
{@render InputComponent(cn(
'pl-1 sm:pl-3 pr-1 sm:pr-3',
'h-6 sm:h-8 md:h-10',
'rounded-lg',
isActive
? 'h-7 sm:h-8 text-[0.825rem]'
: 'bg-transparent shadow-none border-none p-0 h-auto text-sm sm:text-base font-medium focus-visible:ring-0 text-slate-900/50',
))}
{/snippet}
{#snippet hiddenContent()}
{#if typography.weightControl && typography.sizeControl && typography.heightControl}
<div class="flex flex-row justify-between items-center-safe gap-2 sm:gap-0">
<ComboControlV2 control={typography.weightControl} orientation="vertical" />
<ComboControlV2 control={typography.sizeControl} orientation="vertical" />
<ComboControlV2 control={typography.heightControl} orientation="vertical" />
</div>
{/if}
{@render Controls?.('flex flex-row justify-between items-center-safe gap-2 sm:gap-0 h-64', 'vertical')}
{/snippet}
</ExpandableWrapper>
{/if}