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

feat(CheckboxFilter): use new transition function springySlideFade

Browse Source
This commit is contained in:
Ilia Mashkov
2026-01-24 15:25:56 +03:00
parent b7992ca138
commit 732f77f504
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,10 @@
- Local transition prevents animation when component first renders - Local transition prevents animation when component first renders
--> -->
<script lang="ts"> <script lang="ts">
import type { Filter } from '$shared/lib'; import {
type Filter,
springySlideFade,
} from '$shared/lib';
import { Badge } from '$shared/shadcn/ui/badge'; import { Badge } from '$shared/shadcn/ui/badge';
import { buttonVariants } from '$shared/shadcn/ui/button'; import { buttonVariants } from '$shared/shadcn/ui/button';
import { Checkbox } from '$shared/shadcn/ui/checkbox'; import { Checkbox } from '$shared/shadcn/ui/checkbox';
@@ -20,7 +23,6 @@ import { Label } from '$shared/shadcn/ui/label';
import ChevronDownIcon from '@lucide/svelte/icons/chevron-down'; import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
import { cubicOut } from 'svelte/easing'; import { cubicOut } from 'svelte/easing';
import { prefersReducedMotion } from 'svelte/motion'; import { prefersReducedMotion } from 'svelte/motion';
import { slide } from 'svelte/transition';
interface PropertyFilterProps { interface PropertyFilterProps {
/** Label for this filter group (e.g., "Properties", "Tags") */ /** Label for this filter group (e.g., "Properties", "Tags") */
@@ -37,7 +39,7 @@ let isOpen = $state(true);
// Animation config respects user preferences - zero duration if reduced motion enabled // Animation config respects user preferences - zero duration if reduced motion enabled
// Local modifier prevents animation on initial render, only animates user interactions // Local modifier prevents animation on initial render, only animates user interactions
const slideConfig = $derived({ const slideConfig = $derived({
duration: prefersReducedMotion.current ? 0 : 250, duration: prefersReducedMotion.current ? 0 : 150,
easing: cubicOut, easing: cubicOut,
}); });
@@ -49,7 +51,7 @@ const hasSelection = $derived(selectedCount > 0);
<!-- Collapsible card wrapper with subtle hover state for affordance --> <!-- Collapsible card wrapper with subtle hover state for affordance -->
<CollapsibleRoot <CollapsibleRoot
bind:open={isOpen} bind:open={isOpen}
class="w-full rounded-lg border bg-card transition-colors hover:bg-accent/5" class="w-full bg-card transition-colors hover:bg-accent/5"
> >
<!-- Trigger row: title, expand indicator, and optional count badge --> <!-- Trigger row: title, expand indicator, and optional count badge -->
<div class="flex items-center justify-between px-4 py-2"> <div class="flex items-center justify-between px-4 py-2">
@@ -88,8 +90,8 @@ const hasSelection = $derived(selectedCount > 0);
<!-- Expandable content with slide animation --> <!-- Expandable content with slide animation -->
{#if isOpen} {#if isOpen}
<div <div
transition:slide|local={slideConfig} transition:springySlideFade|local={slideConfig}
class="border-t" class="will-change-[height,opacity]"
> >
<div class="px-4 py-3"> <div class="px-4 py-3">
<div class="flex flex-col gap-0.5"> <div class="flex flex-col gap-0.5">