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

feature(CheckboxFilter): move filter counter badge

Browse Source
This commit is contained in:
Ilia Mashkov
2026-01-03 13:52:11 +03:00
parent ac41f324b1
commit 53baacf05a
1 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/shared/ui/CheckboxFilter/CheckboxFilter.svelte
View File

@@ -84,6 +84,16 @@ const hasSelection = $derived(selectedCount > 0);
> >
<h4 class="text-sm font-semibold">{displayedLabel}</h4> <h4 class="text-sm font-semibold">{displayedLabel}</h4>
<!-- Badge only appears when items are selected to avoid clutter -->
{#if hasSelection}
<Badge
variant="secondary"
class="mr-auto h-5 min-w-5 px-1.5 text-xs font-medium tabular-nums"
>
{selectedCount}
</Badge>
{/if}
<!-- Chevron rotates based on open state for visual feedback --> <!-- Chevron rotates based on open state for visual feedback -->
<div <div
class="shrink-0 transition-transform duration-200 ease-out" class="shrink-0 transition-transform duration-200 ease-out"
@@ -91,15 +101,6 @@ const hasSelection = $derived(selectedCount > 0);
> >
<ChevronDownIcon class="h-4 w-4" /> <ChevronDownIcon class="h-4 w-4" />
</div> </div>
<!-- Badge only appears when items are selected to avoid clutter -->
{#if hasSelection}
<Badge
variant="secondary"
class="ml-auto h-5 min-w-5 px-1.5 text-xs font-medium tabular-nums"
>
{selectedCount}
</Badge>
{/if}
</Collapsible.Trigger> </Collapsible.Trigger>
</div> </div>