chore: merged with main, conflict resolved
This commit is contained in:
Ilia Mashkov
@@ -5,11 +5,13 @@
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { cn } from '$shared/lib';
|
||||
import { Slider } from '$shared/ui';
|
||||
import {
|
||||
Popover,
|
||||
Slider,
|
||||
} from '$shared/ui';
|
||||
import { Button } from '$shared/ui/Button';
|
||||
import MinusIcon from '@lucide/svelte/icons/minus';
|
||||
import PlusIcon from '@lucide/svelte/icons/plus';
|
||||
import { Popover } from 'bits-ui';
|
||||
import TechText from '../TechText/TechText.svelte';
|
||||
import type {
|
||||
ControlLabels,
|
||||
@@ -103,59 +105,55 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
|
||||
|
||||
<!-- Trigger -->
|
||||
<div class="relative mx-1">
|
||||
<Popover.Root bind:open>
|
||||
<Popover.Trigger>
|
||||
{#snippet child({ props })}
|
||||
<button
|
||||
{...props}
|
||||
class={cn(
|
||||
'flex flex-col flex-center w-14 py-1',
|
||||
'select-none rounded-none transition-all duration-fast',
|
||||
'border border-transparent',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30',
|
||||
open
|
||||
? 'surface-card-elevated'
|
||||
: 'hover:bg-paper/50 dark:hover:bg-dark-card/50',
|
||||
)}
|
||||
aria-label={controlLabel ? `${controlLabel}: ${formattedValue()}` : undefined}
|
||||
>
|
||||
<!-- Label row -->
|
||||
{#if displayLabel}
|
||||
<span
|
||||
class="
|
||||
text-3xs text-label-mono
|
||||
text-neutral-900 dark:text-neutral-100
|
||||
mb-0.5 leading-none
|
||||
"
|
||||
>
|
||||
{displayLabel}
|
||||
</span>
|
||||
{/if}
|
||||
<Popover bind:open side="top" align="center">
|
||||
{#snippet trigger(props)}
|
||||
<button
|
||||
{...props}
|
||||
class={cn(
|
||||
'flex flex-col flex-center w-14 py-1',
|
||||
'select-none rounded-none transition-all duration-fast',
|
||||
'border border-transparent',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30',
|
||||
open
|
||||
? 'surface-card-elevated'
|
||||
: 'hover:bg-paper/50 dark:hover:bg-dark-card/50',
|
||||
)}
|
||||
aria-label={controlLabel ? `${controlLabel}: ${formattedValue()}` : undefined}
|
||||
>
|
||||
<!-- Label row -->
|
||||
{#if displayLabel}
|
||||
<span
|
||||
class="
|
||||
text-3xs text-label-mono
|
||||
text-neutral-900 dark:text-neutral-100
|
||||
mb-0.5 leading-none
|
||||
"
|
||||
>
|
||||
{displayLabel}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
<!-- Value row -->
|
||||
<TechText variant="muted" size="md">
|
||||
{formattedValue()}
|
||||
</TechText>
|
||||
</button>
|
||||
{/snippet}
|
||||
</Popover.Trigger>
|
||||
<!-- Value row -->
|
||||
<TechText variant="muted" size="md">
|
||||
{formattedValue()}
|
||||
</TechText>
|
||||
</button>
|
||||
{/snippet}
|
||||
|
||||
<!-- Vertical slider popover -->
|
||||
<Popover.Content
|
||||
class="w-auto py-4 px-3 h-64 flex-center rounded-none surface-card-elevated"
|
||||
align="center"
|
||||
side="top"
|
||||
>
|
||||
<Slider
|
||||
class="h-full"
|
||||
bind:value={control.value}
|
||||
min={control.min}
|
||||
max={control.max}
|
||||
step={control.step}
|
||||
orientation="vertical"
|
||||
/>
|
||||
</Popover.Content>
|
||||
</Popover.Root>
|
||||
{#snippet children()}
|
||||
<div class="w-auto py-4 px-3 h-64 flex-center rounded-none surface-card-elevated">
|
||||
<Slider
|
||||
class="h-full"
|
||||
bind:value={control.value}
|
||||
min={control.min}
|
||||
max={control.max}
|
||||
step={control.step}
|
||||
orientation="vertical"
|
||||
/>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
<!-- Increase button -->
|
||||
|
||||
@@ -3,6 +3,7 @@ import {
|
||||
render,
|
||||
screen,
|
||||
waitFor,
|
||||
within,
|
||||
} from '@testing-library/svelte';
|
||||
import ComboControl from './ComboControl.svelte';
|
||||
import { createNumericControlMock } from './testing/createNumericControlMock.svelte';
|
||||
@@ -16,6 +17,16 @@ function makeControl(value: number, opts: { min?: number; max?: number; step?: n
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* The trigger is the button wired to the popover (has popovertarget). The native
|
||||
* Popover always renders its content (the vertical slider, which also displays the
|
||||
* value) in the DOM, so value assertions must be scoped to the trigger to avoid
|
||||
* matching the slider's own value label.
|
||||
*/
|
||||
function getTrigger(): HTMLElement {
|
||||
return document.querySelector('button[popovertarget]') as HTMLElement;
|
||||
}
|
||||
|
||||
describe('ComboControl', () => {
|
||||
describe('Rendering', () => {
|
||||
it('renders decrease and increase buttons', () => {
|
||||
@@ -26,17 +37,17 @@ describe('ComboControl', () => {
|
||||
|
||||
it('renders the current integer value', () => {
|
||||
render(ComboControl, { control: makeControl(42) });
|
||||
expect(screen.getByText('42')).toBeInTheDocument();
|
||||
expect(within(getTrigger()).getByText('42')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('formats decimal value to 1 decimal place when step >= 0.1', () => {
|
||||
render(ComboControl, { control: makeControl(1.5, { step: 0.1 }) });
|
||||
expect(screen.getByText('1.5')).toBeInTheDocument();
|
||||
expect(within(getTrigger()).getByText('1.5')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('formats decimal value to 2 decimal places when step < 0.1', () => {
|
||||
render(ComboControl, { control: makeControl(1.55, { step: 0.01 }) });
|
||||
expect(screen.getByText('1.55')).toBeInTheDocument();
|
||||
expect(within(getTrigger()).getByText('1.55')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders label when label prop is provided', () => {
|
||||
@@ -106,16 +117,32 @@ describe('ComboControl', () => {
|
||||
const control = makeControl(50);
|
||||
render(ComboControl, { control });
|
||||
await fireEvent.click(screen.getByLabelText('Increase'));
|
||||
await waitFor(() => expect(screen.getByText('51')).toBeInTheDocument());
|
||||
await waitFor(() => expect(within(getTrigger()).getByText('51')).toBeInTheDocument());
|
||||
});
|
||||
});
|
||||
|
||||
describe('Popover', () => {
|
||||
it('opens popover with vertical slider on trigger click', async () => {
|
||||
/**
|
||||
* The native Popover always renders its content; opening is driven by the
|
||||
* browser's declarative popovertarget invoker, which jsdom does not simulate
|
||||
* on click (mirrors Popover.svelte.test.ts). So assert the wired-but-closed
|
||||
* state, then drive the open through the API the browser would call.
|
||||
*/
|
||||
it('exposes a popover trigger with the vertical slider as its content', async () => {
|
||||
render(ComboControl, { control: makeControl(50), controlLabel: 'Size control' });
|
||||
expect(screen.queryByRole('slider')).not.toBeInTheDocument();
|
||||
await fireEvent.click(screen.getByText('Size control'));
|
||||
await waitFor(() => expect(screen.getByRole('slider')).toBeInTheDocument());
|
||||
|
||||
const trigger = getTrigger();
|
||||
expect(trigger).toHaveAttribute('aria-expanded', 'false');
|
||||
|
||||
const content = document.getElementById(trigger.getAttribute('popovertarget')!) as HTMLElement;
|
||||
expect(content).toHaveAttribute('data-state', 'closed');
|
||||
// The vertical slider lives inside the popover content. While closed the
|
||||
// content is visibility:hidden, so query including hidden elements.
|
||||
expect(within(content).getByRole('slider', { hidden: true })).toBeInTheDocument();
|
||||
|
||||
content.showPopover();
|
||||
await waitFor(() => expect(content).toHaveAttribute('data-state', 'open'));
|
||||
expect(trigger).toHaveAttribute('aria-expanded', 'true');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,117 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import Popover from './Popover.svelte';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Shared/Popover',
|
||||
component: Popover,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'Anchored popover on the native Popover API (top-layer, light-dismiss, ESC, focus return). Hand-rolled side/align/offset positioning with flip + shift.',
|
||||
},
|
||||
story: { inline: false }, // Render stories in iframe for state isolation
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
side: {
|
||||
control: 'select',
|
||||
options: ['top', 'bottom', 'left', 'right'],
|
||||
description: 'Preferred side',
|
||||
},
|
||||
align: {
|
||||
control: 'select',
|
||||
options: ['start', 'center', 'end'],
|
||||
description: 'Cross-axis alignment',
|
||||
},
|
||||
sideOffset: {
|
||||
control: 'number',
|
||||
description: 'Gap between trigger and content (px)',
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { Slider } from '$shared/ui';
|
||||
|
||||
let open = $state(false);
|
||||
let value = $state(50);
|
||||
</script>
|
||||
|
||||
<Story name="Bottom">
|
||||
{#snippet template()}
|
||||
<div class="p-32 flex-center min-h-screen">
|
||||
<Popover bind:open side="bottom" align="center" sideOffset={8}>
|
||||
{#snippet trigger(props)}
|
||||
<button {...props} class="surface-card-elevated px-4 py-2">Open popover</button>
|
||||
{/snippet}
|
||||
{#snippet children()}
|
||||
<div class="surface-popover p-4 w-56">Popover content</div>
|
||||
{/snippet}
|
||||
</Popover>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Top">
|
||||
{#snippet template()}
|
||||
<div class="p-32 flex-center min-h-screen">
|
||||
<Popover bind:open side="top" align="center" sideOffset={8}>
|
||||
{#snippet trigger(props)}
|
||||
<button {...props} class="surface-card-elevated px-4 py-2">Open popover</button>
|
||||
{/snippet}
|
||||
{#snippet children()}
|
||||
<div class="surface-popover p-4 w-56">Popover content</div>
|
||||
{/snippet}
|
||||
</Popover>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<!--
|
||||
Mirrors TypographyMenu: top/end placement with a programmatic Close button
|
||||
wired to the `close()` param of the children snippet.
|
||||
-->
|
||||
<Story name="AlignedEnd">
|
||||
{#snippet template()}
|
||||
<div class="p-32 flex-center min-h-screen">
|
||||
<Popover bind:open side="top" align="end" sideOffset={8}>
|
||||
{#snippet trigger(props)}
|
||||
<button {...props} class="surface-card-elevated px-4 py-2">Open menu</button>
|
||||
{/snippet}
|
||||
{#snippet children({ close })}
|
||||
<div class="surface-popover p-4 w-72">
|
||||
<h3 class="text-sm font-medium mb-3">Menu header</h3>
|
||||
<p class="text-sm text-muted-foreground mb-4">
|
||||
Aligned to the trigger's end edge.
|
||||
</p>
|
||||
<button class="surface-card-elevated px-3 py-1.5 text-sm" onclick={close}>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Popover>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<!-- Mirrors ComboControl: a vertical Slider lives inside the popover content. -->
|
||||
<Story name="WithSlider">
|
||||
{#snippet template()}
|
||||
<div class="p-32 flex-center min-h-screen">
|
||||
<Popover bind:open side="top" align="center" sideOffset={8}>
|
||||
{#snippet trigger(props)}
|
||||
<button {...props} class="surface-card-elevated px-4 py-2">Adjust value</button>
|
||||
{/snippet}
|
||||
{#snippet children()}
|
||||
<div class="surface-card-elevated p-3 h-64 flex-center">
|
||||
<Slider orientation="vertical" min={0} max={100} bind:value />
|
||||
</div>
|
||||
{/snippet}
|
||||
</Popover>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
@@ -0,0 +1,225 @@
|
||||
<!--
|
||||
Component: Popover
|
||||
Anchored popover on the native Popover API (top-layer, light-dismiss, ESC,
|
||||
focus return handled by the browser). Placement is computed by the pure
|
||||
`popover-position` module and applied as fixed coordinates; it repositions
|
||||
on scroll/resize/content-resize. `open` is two-way bindable. The trigger is
|
||||
consumer-rendered via the `trigger` snippet, which spreads a props object
|
||||
(an attachment captures the trigger element; `popovertarget` wires the
|
||||
native invoker). `children` receives `close()` to dismiss programmatically.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { cn } from '$shared/lib';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { createAttachmentKey } from 'svelte/attachments';
|
||||
import {
|
||||
type Align,
|
||||
type Side,
|
||||
computePosition,
|
||||
} from './popover-position';
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
* Open state (two-way bindable)
|
||||
* @default false
|
||||
*/
|
||||
open?: boolean;
|
||||
/**
|
||||
* Preferred side
|
||||
* @default 'bottom'
|
||||
*/
|
||||
side?: Side;
|
||||
/**
|
||||
* Cross-axis alignment
|
||||
* @default 'center'
|
||||
*/
|
||||
align?: Align;
|
||||
/**
|
||||
* Gap between trigger and content (px)
|
||||
* @default 0
|
||||
*/
|
||||
sideOffset?: number;
|
||||
/**
|
||||
* CSS classes applied to the content element
|
||||
*/
|
||||
class?: string;
|
||||
/**
|
||||
* ARIA role for the content
|
||||
* @default 'dialog'
|
||||
*/
|
||||
role?: 'dialog' | 'menu' | 'listbox';
|
||||
/**
|
||||
* Trigger snippet — spread the provided props onto your trigger element
|
||||
*/
|
||||
trigger: Snippet<[Record<string, unknown>]>;
|
||||
/**
|
||||
* Content snippet — receives `close()` for programmatic dismissal
|
||||
*/
|
||||
children: Snippet<[{ close: () => void }]>;
|
||||
}
|
||||
|
||||
let {
|
||||
open = $bindable(false),
|
||||
side = 'bottom',
|
||||
align = 'center',
|
||||
sideOffset = 0,
|
||||
class: className,
|
||||
role = 'dialog',
|
||||
trigger,
|
||||
children,
|
||||
}: Props = $props();
|
||||
|
||||
const uid = $props.id();
|
||||
const contentId = `popover-${uid}`;
|
||||
|
||||
let triggerEl: HTMLElement | undefined = $state();
|
||||
let contentEl: HTMLElement | undefined = $state();
|
||||
/**
|
||||
* Side actually used after flip. Seeded from the `side` prop; the authoritative
|
||||
* value is written by updatePosition() on every open, so the seed only matters
|
||||
* for the closed state (hence the intentional state_referenced_locally warning).
|
||||
*/
|
||||
let resolvedSide = $state(side);
|
||||
|
||||
/**
|
||||
* True once updatePosition has applied coordinates for the current open.
|
||||
* Gates visibility so the content never paints at its pre-positioned (0,0)
|
||||
* top-layer default before the first measurement.
|
||||
*/
|
||||
let positioned = $state(false);
|
||||
|
||||
/**
|
||||
* Resolved fixed-position coordinates. Applied through the reactive `style`
|
||||
* attribute (not imperatively) so they can't be wiped when the attribute
|
||||
* re-renders — mixing the two caused a one-frame top-left flash.
|
||||
*/
|
||||
let x = $state(0);
|
||||
let y = $state(0);
|
||||
|
||||
/**
|
||||
* Actual DOM open state, driven by the `toggle` event. Source of truth for
|
||||
* whether the browser currently shows the popover; `open` is the public binding.
|
||||
*/
|
||||
let shown = $state(false);
|
||||
|
||||
/**
|
||||
* Stable attachment that captures the consumer's trigger element for measuring.
|
||||
* Created once so spreading reactive `triggerProps` doesn't re-run it.
|
||||
*/
|
||||
const attachKey = createAttachmentKey();
|
||||
const attachTrigger = (node: HTMLElement) => {
|
||||
triggerEl = node;
|
||||
return () => {
|
||||
if (triggerEl === node) {
|
||||
triggerEl = undefined;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const triggerProps = $derived({
|
||||
popovertarget: contentId,
|
||||
'aria-haspopup': role,
|
||||
'aria-expanded': open,
|
||||
'aria-controls': contentId,
|
||||
[attachKey]: attachTrigger,
|
||||
});
|
||||
|
||||
/**
|
||||
* Recompute and apply the fixed-position coordinates.
|
||||
*/
|
||||
function updatePosition(): void {
|
||||
if (!triggerEl || !contentEl) {
|
||||
return;
|
||||
}
|
||||
const result = computePosition({
|
||||
triggerRect: triggerEl.getBoundingClientRect(),
|
||||
contentRect: { width: contentEl.offsetWidth, height: contentEl.offsetHeight },
|
||||
viewport: { width: window.innerWidth, height: window.innerHeight },
|
||||
side,
|
||||
align,
|
||||
sideOffset,
|
||||
});
|
||||
resolvedSide = result.side;
|
||||
x = result.x;
|
||||
y = result.y;
|
||||
positioned = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Mirror the `toggle` event into our state.
|
||||
*/
|
||||
function onToggle(event: ToggleEvent): void {
|
||||
shown = event.newState === 'open';
|
||||
open = shown;
|
||||
if (!shown) {
|
||||
positioned = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Programmatic dismiss for the content snippet.
|
||||
*/
|
||||
function close(): void {
|
||||
open = false;
|
||||
}
|
||||
|
||||
// state -> browser: open the popover when `open` flips true and it isn't shown,
|
||||
// and close it when `open` flips false while shown. `shown` (from toggle) breaks
|
||||
// the loop so we never call show/hide redundantly.
|
||||
$effect(() => {
|
||||
const el = contentEl;
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
if (open && !shown) {
|
||||
el.showPopover();
|
||||
} else if (!open && shown) {
|
||||
el.hidePopover();
|
||||
}
|
||||
});
|
||||
|
||||
// Position while shown; reposition on scroll/resize/content-resize; auto-clean.
|
||||
$effect(() => {
|
||||
if (!shown || !contentEl || !triggerEl) {
|
||||
return;
|
||||
}
|
||||
updatePosition();
|
||||
const observer = new ResizeObserver(() => updatePosition());
|
||||
observer.observe(contentEl);
|
||||
const onScroll = () => updatePosition();
|
||||
window.addEventListener('scroll', onScroll, true);
|
||||
window.addEventListener('resize', onScroll);
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
window.removeEventListener('scroll', onScroll, true);
|
||||
window.removeEventListener('resize', onScroll);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
{@render trigger(triggerProps)}
|
||||
|
||||
<!--
|
||||
inset:auto + margin:0 neutralize the UA popover stylesheet (which sets
|
||||
inset:0; margin:auto to center it) so the JS-applied left/top win.
|
||||
visibility is hidden until updatePosition runs (see `positioned`).
|
||||
-->
|
||||
<div
|
||||
bind:this={contentEl}
|
||||
id={contentId}
|
||||
popover="auto"
|
||||
{role}
|
||||
data-side={resolvedSide}
|
||||
data-state={shown ? 'open' : 'closed'}
|
||||
ontoggle={onToggle}
|
||||
style={`position: fixed; inset: auto; left: ${x}px; top: ${y}px; margin: 0;${positioned ? '' : ' visibility: hidden;'}`}
|
||||
class={cn(
|
||||
'opacity-0 scale-95 transition-discrete transition-[opacity,transform] duration-fast',
|
||||
'starting:opacity-0 starting:scale-95',
|
||||
'[&:popover-open]:opacity-100 [&:popover-open]:scale-100',
|
||||
'data-[side=top]:origin-bottom data-[side=bottom]:origin-top',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{@render children({ close })}
|
||||
</div>
|
||||
@@ -0,0 +1,49 @@
|
||||
import {
|
||||
fireEvent,
|
||||
render,
|
||||
screen,
|
||||
} from '@testing-library/svelte';
|
||||
import Harness from './PopoverHarness.svelte';
|
||||
|
||||
/**
|
||||
* Resolve the popover content element (the [popover] ancestor of the test content).
|
||||
*/
|
||||
function getContent(): HTMLElement {
|
||||
return screen.getByTestId('content').closest('[popover]') as HTMLElement;
|
||||
}
|
||||
|
||||
describe('Popover', () => {
|
||||
it('renders the trigger with aria wiring, closed by default', () => {
|
||||
render(Harness);
|
||||
const trigger = screen.getByRole('button', { name: 'Open' });
|
||||
expect(trigger).toHaveAttribute('aria-expanded', 'false');
|
||||
expect(trigger).toHaveAttribute('aria-haspopup', 'dialog');
|
||||
expect(trigger).toHaveAttribute('popovertarget');
|
||||
expect(getContent()).toHaveAttribute('data-state', 'closed');
|
||||
});
|
||||
|
||||
it('opens via the popover toggle and syncs aria-expanded + data-state', async () => {
|
||||
render(Harness);
|
||||
const trigger = screen.getByRole('button', { name: 'Open' });
|
||||
// jsdom does not auto-invoke popovertarget; call the API the browser would.
|
||||
getContent().showPopover();
|
||||
await Promise.resolve();
|
||||
expect(getContent()).toHaveAttribute('data-state', 'open');
|
||||
expect(trigger).toHaveAttribute('aria-expanded', 'true');
|
||||
});
|
||||
|
||||
it('opens when the parent sets open=true (state -> browser)', async () => {
|
||||
render(Harness, { open: true });
|
||||
await Promise.resolve();
|
||||
expect(getContent()).toHaveAttribute('data-state', 'open');
|
||||
});
|
||||
|
||||
it('close() hides the popover and resets aria-expanded', async () => {
|
||||
render(Harness, { open: true });
|
||||
await Promise.resolve();
|
||||
const trigger = screen.getByRole('button', { name: 'Open' });
|
||||
await fireEvent.click(screen.getByTestId('close'));
|
||||
expect(getContent()).toHaveAttribute('data-state', 'closed');
|
||||
expect(trigger).toHaveAttribute('aria-expanded', 'false');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,21 @@
|
||||
<!--
|
||||
Component: PopoverHarness
|
||||
Test-only fixture: renders Popover with a button trigger and simple content
|
||||
exposing the close() callback.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import Popover from './Popover.svelte';
|
||||
|
||||
let { open = $bindable(false) }: { open?: boolean } = $props();
|
||||
</script>
|
||||
|
||||
<Popover bind:open>
|
||||
{#snippet trigger(props)}
|
||||
<button {...props}>Open</button>
|
||||
{/snippet}
|
||||
{#snippet children({ close })}
|
||||
<div data-testid="content">
|
||||
<button onclick={close} data-testid="close">Close</button>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Popover>
|
||||
@@ -0,0 +1,119 @@
|
||||
import {
|
||||
type Align,
|
||||
type Side,
|
||||
computePosition,
|
||||
} from './popover-position';
|
||||
|
||||
/**
|
||||
* Build a DOMRect-like object (jsdom/node has no layout).
|
||||
*/
|
||||
function rect(x: number, y: number, width: number, height: number): DOMRect {
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
height,
|
||||
top: y,
|
||||
left: x,
|
||||
right: x + width,
|
||||
bottom: y + height,
|
||||
toJSON: () => ({}),
|
||||
} as DOMRect;
|
||||
}
|
||||
|
||||
const viewport = { width: 1000, height: 800 };
|
||||
const content = { width: 200, height: 100 };
|
||||
|
||||
function compute(side: Side, align: Align, sideOffset = 0, trigger = rect(400, 400, 100, 40)) {
|
||||
return computePosition({ triggerRect: trigger, contentRect: content, viewport, side, align, sideOffset });
|
||||
}
|
||||
|
||||
describe('computePosition', () => {
|
||||
it('places below the trigger for side="bottom"', () => {
|
||||
const r = compute('bottom', 'center');
|
||||
expect(r.side).toBe('bottom');
|
||||
expect(r.y).toBe(440); // trigger.bottom (400+40)
|
||||
});
|
||||
|
||||
it('places above the trigger for side="top"', () => {
|
||||
const r = compute('top', 'center');
|
||||
expect(r.side).toBe('top');
|
||||
expect(r.y).toBe(300); // trigger.top (400) - content.height (100)
|
||||
});
|
||||
|
||||
it('applies sideOffset on the main axis', () => {
|
||||
const r = compute('bottom', 'center', 8);
|
||||
expect(r.y).toBe(448);
|
||||
});
|
||||
|
||||
it('aligns center on the cross axis (vertical side)', () => {
|
||||
const r = compute('bottom', 'center');
|
||||
// trigger center x = 450; content half = 100 -> 350
|
||||
expect(r.x).toBe(350);
|
||||
});
|
||||
|
||||
it('aligns start and end on the cross axis (vertical side)', () => {
|
||||
expect(compute('bottom', 'start').x).toBe(400); // trigger.left
|
||||
expect(compute('bottom', 'end').x).toBe(300); // trigger.right(500) - content.width(200)
|
||||
});
|
||||
|
||||
it('places left/right with vertical cross-axis alignment', () => {
|
||||
const right = compute('right', 'start');
|
||||
expect(right.side).toBe('right');
|
||||
expect(right.x).toBe(500); // trigger.right
|
||||
expect(right.y).toBe(400); // trigger.top (align start)
|
||||
const left = compute('left', 'center');
|
||||
expect(left.side).toBe('left');
|
||||
expect(left.x).toBe(200); // trigger.left(400) - content.width(200)
|
||||
});
|
||||
|
||||
it('flips top->bottom when there is no room above', () => {
|
||||
const nearTop = rect(400, 20, 100, 40); // only 20px above, content needs 100
|
||||
const r = computePosition({
|
||||
triggerRect: nearTop,
|
||||
contentRect: content,
|
||||
viewport,
|
||||
side: 'top',
|
||||
align: 'center',
|
||||
sideOffset: 0,
|
||||
});
|
||||
expect(r.side).toBe('bottom');
|
||||
expect(r.y).toBe(60); // nearTop.bottom
|
||||
});
|
||||
|
||||
it('does NOT flip when neither side fits (keeps requested side)', () => {
|
||||
const tall = { width: 200, height: 700 };
|
||||
const r = computePosition({
|
||||
triggerRect: rect(400, 400, 100, 40),
|
||||
contentRect: tall,
|
||||
viewport,
|
||||
side: 'top',
|
||||
align: 'center',
|
||||
sideOffset: 0,
|
||||
});
|
||||
expect(r.side).toBe('top');
|
||||
});
|
||||
|
||||
it('shifts on the cross axis to stay within the viewport', () => {
|
||||
const nearRight = rect(950, 400, 40, 40); // center x ~970, content 200 would overflow right
|
||||
const r = computePosition({
|
||||
triggerRect: nearRight,
|
||||
contentRect: content,
|
||||
viewport,
|
||||
side: 'bottom',
|
||||
align: 'center',
|
||||
sideOffset: 0,
|
||||
});
|
||||
expect(r.x).toBe(800); // clamped to viewport.width(1000) - content.width(200)
|
||||
const nearLeft = rect(10, 400, 40, 40);
|
||||
const r2 = computePosition({
|
||||
triggerRect: nearLeft,
|
||||
contentRect: content,
|
||||
viewport,
|
||||
side: 'bottom',
|
||||
align: 'center',
|
||||
sideOffset: 0,
|
||||
});
|
||||
expect(r2.x).toBe(0); // clamped to 0
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,149 @@
|
||||
import { clampNumber } from '$shared/lib/utils';
|
||||
|
||||
/**
|
||||
* Side of the trigger the content prefers to open toward.
|
||||
*/
|
||||
export type Side = 'top' | 'bottom' | 'left' | 'right';
|
||||
|
||||
/**
|
||||
* Cross-axis alignment of the content relative to the trigger.
|
||||
*/
|
||||
export type Align = 'start' | 'center' | 'end';
|
||||
|
||||
/**
|
||||
* Inputs for a single placement computation. All geometry is injected
|
||||
* (no DOM reads) so the function stays pure and unit-testable.
|
||||
*/
|
||||
type ComputeArgs = {
|
||||
/**
|
||||
* Trigger bounding rect (viewport coordinates).
|
||||
*/
|
||||
triggerRect: DOMRect;
|
||||
/**
|
||||
* Measured content size.
|
||||
*/
|
||||
contentRect: { width: number; height: number };
|
||||
/**
|
||||
* Viewport size.
|
||||
*/
|
||||
viewport: { width: number; height: number };
|
||||
/**
|
||||
* Preferred side.
|
||||
*/
|
||||
side: Side;
|
||||
/**
|
||||
* Cross-axis alignment.
|
||||
*/
|
||||
align: Align;
|
||||
/**
|
||||
* Gap between trigger and content on the main axis.
|
||||
*/
|
||||
sideOffset: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* Resolved placement: fixed-position coordinates plus the side actually used
|
||||
* (may differ from the requested side after a flip).
|
||||
*/
|
||||
type ComputeResult = { x: number; y: number; side: Side };
|
||||
|
||||
const OPPOSITE: Record<Side, Side> = {
|
||||
top: 'bottom',
|
||||
bottom: 'top',
|
||||
left: 'right',
|
||||
right: 'left',
|
||||
};
|
||||
|
||||
/**
|
||||
* True for sides whose main axis is vertical (content sits above/below).
|
||||
*/
|
||||
function isVertical(side: Side): boolean {
|
||||
return side === 'top' || side === 'bottom';
|
||||
}
|
||||
|
||||
/**
|
||||
* Main-axis coordinate (top for vertical sides, left for horizontal sides).
|
||||
*/
|
||||
function mainAxisCoord(side: Side, t: DOMRect, c: { width: number; height: number }, offset: number): number {
|
||||
switch (side) {
|
||||
case 'top':
|
||||
return t.top - c.height - offset;
|
||||
case 'bottom':
|
||||
return t.bottom + offset;
|
||||
case 'left':
|
||||
return t.left - c.width - offset;
|
||||
case 'right':
|
||||
return t.right + offset;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the content fits on the given side within the viewport.
|
||||
*/
|
||||
function fitsOnSide(
|
||||
side: Side,
|
||||
t: DOMRect,
|
||||
c: { width: number; height: number },
|
||||
v: { width: number; height: number },
|
||||
offset: number,
|
||||
): boolean {
|
||||
const coord = mainAxisCoord(side, t, c, offset);
|
||||
switch (side) {
|
||||
case 'top':
|
||||
return coord >= 0;
|
||||
case 'left':
|
||||
return coord >= 0;
|
||||
case 'bottom':
|
||||
return coord + c.height <= v.height;
|
||||
case 'right':
|
||||
return coord + c.width <= v.width;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Cross-axis coordinate for the requested alignment.
|
||||
*/
|
||||
function crossAxisCoord(side: Side, align: Align, t: DOMRect, c: { width: number; height: number }): number {
|
||||
if (isVertical(side)) {
|
||||
if (align === 'start') {
|
||||
return t.left;
|
||||
}
|
||||
if (align === 'end') {
|
||||
return t.right - c.width;
|
||||
}
|
||||
return t.left + t.width / 2 - c.width / 2;
|
||||
}
|
||||
if (align === 'start') {
|
||||
return t.top;
|
||||
}
|
||||
if (align === 'end') {
|
||||
return t.bottom - c.height;
|
||||
}
|
||||
return t.top + t.height / 2 - c.height / 2;
|
||||
}
|
||||
|
||||
/**
|
||||
* Compute an anchored placement with flip (to the opposite side when the
|
||||
* preferred side doesn't fit but the opposite does) and shift (clamp the
|
||||
* cross axis so the content stays within the viewport).
|
||||
*/
|
||||
export function computePosition(args: ComputeArgs): ComputeResult {
|
||||
const { triggerRect: t, contentRect: c, viewport: v, align, sideOffset } = args;
|
||||
let side = args.side;
|
||||
|
||||
if (!fitsOnSide(side, t, c, v, sideOffset) && fitsOnSide(OPPOSITE[side], t, c, v, sideOffset)) {
|
||||
side = OPPOSITE[side];
|
||||
}
|
||||
|
||||
let x: number;
|
||||
let y: number;
|
||||
if (isVertical(side)) {
|
||||
y = mainAxisCoord(side, t, c, sideOffset);
|
||||
x = clampNumber(crossAxisCoord(side, align, t, c), 0, Math.max(0, v.width - c.width));
|
||||
} else {
|
||||
x = mainAxisCoord(side, t, c, sideOffset);
|
||||
y = clampNumber(crossAxisCoord(side, align, t, c), 0, Math.max(0, v.height - c.height));
|
||||
}
|
||||
|
||||
return { x, y, side };
|
||||
}
|
||||
@@ -10,7 +10,7 @@ const { Story } = defineMeta({
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'Styled bits-ui slider component with red accent (#ff3b30). Thumb is a 45° rotated square with hover/active scale animations.',
|
||||
'Single-value slider (native, no bits-ui) with brand accent. Diamond thumb (45° rotated square) with hover/active scale. Supports pointer drag, click-to-seek, touch, and keyboard (arrows, Home/End, PageUp/Down).',
|
||||
},
|
||||
story: { inline: false }, // Render stories in iframe for state isolation
|
||||
},
|
||||
@@ -39,8 +39,6 @@ const { Story } = defineMeta({
|
||||
<script lang="ts">
|
||||
import type { ComponentProps } from 'svelte';
|
||||
let value = $state(50);
|
||||
let valueLow = $state(25);
|
||||
let valueHigh = $state(75);
|
||||
</script>
|
||||
|
||||
<Story
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
<!--
|
||||
Component: Slider
|
||||
Single-value slider using bits-ui Slider primitive.
|
||||
Single-value slider built on a native role="slider" element (no bits-ui).
|
||||
Supports pointer drag, click-to-seek, touch, and full keyboard nav.
|
||||
Swiss design: 1px track, diamond thumb (rotate-45), brand accent.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import {
|
||||
type Orientation,
|
||||
Slider,
|
||||
} from 'bits-ui';
|
||||
pointerToValue,
|
||||
snapToStep,
|
||||
} from './slider-math';
|
||||
|
||||
type Orientation = 'horizontal' | 'vertical';
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
@@ -67,8 +70,122 @@ let {
|
||||
class: className,
|
||||
}: Props = $props();
|
||||
|
||||
/**
|
||||
* PageUp/PageDown move by this multiple of `step`.
|
||||
*/
|
||||
const LARGE_STEP_MULTIPLIER = 10;
|
||||
|
||||
const isVertical = $derived(orientation === 'vertical');
|
||||
|
||||
/**
|
||||
* Thumb/range offset as a clamped percentage of the track.
|
||||
*/
|
||||
const percent = $derived.by(() => {
|
||||
if (max <= min) {
|
||||
return 0;
|
||||
}
|
||||
return Math.min(Math.max(((value - min) / (max - min)) * 100, 0), 100);
|
||||
});
|
||||
|
||||
let trackEl: HTMLElement | undefined = $state();
|
||||
let thumbEl: HTMLElement | undefined = $state();
|
||||
let dragging = $state(false);
|
||||
|
||||
/**
|
||||
* Apply a candidate value: snap, clamp, store, and notify only on change.
|
||||
*/
|
||||
function commit(raw: number): void {
|
||||
const next = snapToStep(raw, { min, max, step });
|
||||
if (next !== value) {
|
||||
value = next;
|
||||
onValueChange?.(next);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Keep an externally-supplied value normalized to the step grid and range.
|
||||
* Mirrors the bits-ui primitive's behavior so out-of-range or off-grid
|
||||
* props don't desync the thumb position from aria-valuenow / the label.
|
||||
* Converges in one pass: once snapped, the value equals its own snap.
|
||||
*/
|
||||
$effect(() => {
|
||||
const normalized = snapToStep(value, { min, max, step });
|
||||
if (normalized !== value) {
|
||||
value = normalized;
|
||||
onValueChange?.(normalized);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Resolve a pointer event to a value using the live track rect.
|
||||
*/
|
||||
function seek(event: PointerEvent): void {
|
||||
if (!trackEl) {
|
||||
return;
|
||||
}
|
||||
const rect = trackEl.getBoundingClientRect();
|
||||
commit(pointerToValue(event, rect, { min, max, step, orientation }));
|
||||
}
|
||||
|
||||
function handlePointerDown(event: PointerEvent): void {
|
||||
if (disabled) {
|
||||
return;
|
||||
}
|
||||
dragging = true;
|
||||
thumbEl?.focus();
|
||||
(event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId);
|
||||
seek(event);
|
||||
}
|
||||
|
||||
function handlePointerMove(event: PointerEvent): void {
|
||||
if (!dragging || disabled) {
|
||||
return;
|
||||
}
|
||||
seek(event);
|
||||
}
|
||||
|
||||
function handlePointerUp(event: PointerEvent): void {
|
||||
if (!dragging) {
|
||||
return;
|
||||
}
|
||||
dragging = false;
|
||||
(event.currentTarget as HTMLElement).releasePointerCapture?.(event.pointerId);
|
||||
}
|
||||
|
||||
function handleKeyDown(event: KeyboardEvent): void {
|
||||
if (disabled) {
|
||||
return;
|
||||
}
|
||||
const large = step * LARGE_STEP_MULTIPLIER;
|
||||
let next: number | undefined;
|
||||
switch (event.key) {
|
||||
case 'ArrowRight':
|
||||
case 'ArrowUp':
|
||||
next = value + step;
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
case 'ArrowDown':
|
||||
next = value - step;
|
||||
break;
|
||||
case 'PageUp':
|
||||
next = value + large;
|
||||
break;
|
||||
case 'PageDown':
|
||||
next = value - large;
|
||||
break;
|
||||
case 'Home':
|
||||
next = min;
|
||||
break;
|
||||
case 'End':
|
||||
next = max;
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
commit(next);
|
||||
}
|
||||
|
||||
const labelClasses = `font-mono text-2xs tabular-nums shrink-0
|
||||
text-subtle
|
||||
group-hover:text-neutral-700 dark:group-hover:text-neutral-300
|
||||
@@ -91,81 +208,101 @@ const thumbClasses = `block w-2.5 h-2.5 bg-brand
|
||||
{format(value)}
|
||||
</span>
|
||||
|
||||
<Slider.Root
|
||||
type="single"
|
||||
orientation="vertical"
|
||||
bind:value
|
||||
{min}
|
||||
{max}
|
||||
{step}
|
||||
{disabled}
|
||||
onValueChange={(v => onValueChange?.(v))}
|
||||
<div
|
||||
bind:this={trackEl}
|
||||
role="presentation"
|
||||
onpointerdown={handlePointerDown}
|
||||
onpointermove={handlePointerMove}
|
||||
onpointerup={handlePointerUp}
|
||||
onpointercancel={handlePointerUp}
|
||||
class="
|
||||
relative flex flex-col items-center select-none touch-none
|
||||
w-5 h-full grow cursor-row-resize
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
"
|
||||
class:opacity-50={disabled}
|
||||
class:cursor-not-allowed={disabled}
|
||||
>
|
||||
{#snippet children({ thumbItems })}
|
||||
<span
|
||||
class="
|
||||
bg-neutral-200 dark:bg-neutral-800
|
||||
relative grow w-px overflow-visible
|
||||
group-hover:bg-neutral-300 dark:group-hover:bg-neutral-700
|
||||
transition-colors
|
||||
"
|
||||
>
|
||||
<span
|
||||
class="
|
||||
bg-neutral-200 dark:bg-neutral-800
|
||||
relative grow w-px overflow-visible
|
||||
group-hover:bg-neutral-300 dark:group-hover:bg-neutral-700
|
||||
transition-colors
|
||||
"
|
||||
>
|
||||
<Slider.Range class="absolute bg-brand w-full" />
|
||||
</span>
|
||||
class="absolute bottom-0 left-0 bg-brand w-full"
|
||||
style="height: {percent}%"
|
||||
></span>
|
||||
</span>
|
||||
|
||||
{#each thumbItems as thumb (thumb)}
|
||||
<Slider.Thumb
|
||||
index={thumb.index}
|
||||
class={thumbClasses}
|
||||
aria-label="Value"
|
||||
/>
|
||||
{/each}
|
||||
{/snippet}
|
||||
</Slider.Root>
|
||||
<span
|
||||
role="slider"
|
||||
bind:this={thumbEl}
|
||||
tabindex={disabled ? -1 : 0}
|
||||
aria-label="Value"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemin={min}
|
||||
aria-valuemax={max}
|
||||
aria-valuenow={value}
|
||||
aria-valuetext={String(format(value))}
|
||||
aria-disabled={disabled ? 'true' : undefined}
|
||||
data-active={dragging ? '' : undefined}
|
||||
onkeydown={handleKeyDown}
|
||||
class="{thumbClasses} absolute left-1/2 -translate-x-1/2 translate-y-1/2"
|
||||
style="bottom: {percent}%"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex items-center gap-4 group w-full {className ?? ''}">
|
||||
<Slider.Root
|
||||
type="single"
|
||||
orientation="horizontal"
|
||||
bind:value
|
||||
{min}
|
||||
{max}
|
||||
{step}
|
||||
{disabled}
|
||||
onValueChange={(v => onValueChange?.(v))}
|
||||
<div
|
||||
bind:this={trackEl}
|
||||
role="presentation"
|
||||
onpointerdown={handlePointerDown}
|
||||
onpointermove={handlePointerMove}
|
||||
onpointerup={handlePointerUp}
|
||||
onpointercancel={handlePointerUp}
|
||||
class="
|
||||
relative flex items-center select-none touch-none
|
||||
w-full h-5 cursor-col-resize
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
"
|
||||
class:opacity-50={disabled}
|
||||
class:cursor-not-allowed={disabled}
|
||||
>
|
||||
{#snippet children({ thumbItems })}
|
||||
<span
|
||||
class="
|
||||
bg-neutral-200 dark:bg-neutral-800
|
||||
relative grow h-px overflow-visible
|
||||
group-hover:bg-neutral-300 dark:group-hover:bg-neutral-700
|
||||
transition-colors
|
||||
"
|
||||
>
|
||||
<span
|
||||
class="
|
||||
bg-neutral-200 dark:bg-neutral-800
|
||||
relative grow h-px overflow-visible
|
||||
group-hover:bg-neutral-300 dark:group-hover:bg-neutral-700
|
||||
transition-colors
|
||||
"
|
||||
>
|
||||
<Slider.Range class="absolute bg-brand h-full" />
|
||||
</span>
|
||||
class="absolute top-0 left-0 bg-brand h-full"
|
||||
style="width: {percent}%"
|
||||
></span>
|
||||
</span>
|
||||
|
||||
{#each thumbItems as thumb (thumb)}
|
||||
<Slider.Thumb
|
||||
index={thumb.index}
|
||||
class={thumbClasses}
|
||||
aria-label="Value"
|
||||
/>
|
||||
{/each}
|
||||
{/snippet}
|
||||
</Slider.Root>
|
||||
<span
|
||||
role="slider"
|
||||
bind:this={thumbEl}
|
||||
tabindex={disabled ? -1 : 0}
|
||||
aria-label="Value"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemin={min}
|
||||
aria-valuemax={max}
|
||||
aria-valuenow={value}
|
||||
aria-valuetext={String(format(value))}
|
||||
aria-disabled={disabled ? 'true' : undefined}
|
||||
data-active={dragging ? '' : undefined}
|
||||
onkeydown={handleKeyDown}
|
||||
class="{thumbClasses} absolute top-1/2 -translate-y-1/2 -translate-x-1/2"
|
||||
style="left: {percent}%"
|
||||
></span>
|
||||
</div>
|
||||
|
||||
<!-- Label: right of slider -->
|
||||
<span class="{labelClasses} w-12 text-right">
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import {
|
||||
fireEvent,
|
||||
render,
|
||||
screen,
|
||||
} from '@testing-library/svelte';
|
||||
@@ -60,3 +61,109 @@ describe('Slider', () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Keyboard', () => {
|
||||
it('increments by step on ArrowRight / ArrowUp', async () => {
|
||||
const onValueChange = vi.fn();
|
||||
render(Slider, { value: 50, step: 5, onValueChange });
|
||||
const thumb = screen.getByRole('slider');
|
||||
await fireEvent.keyDown(thumb, { key: 'ArrowRight' });
|
||||
expect(thumb).toHaveAttribute('aria-valuenow', '55');
|
||||
expect(onValueChange).toHaveBeenCalledWith(55);
|
||||
});
|
||||
|
||||
it('decrements by step on ArrowLeft / ArrowDown', async () => {
|
||||
render(Slider, { value: 50, step: 5 });
|
||||
const thumb = screen.getByRole('slider');
|
||||
await fireEvent.keyDown(thumb, { key: 'ArrowDown' });
|
||||
expect(thumb).toHaveAttribute('aria-valuenow', '45');
|
||||
});
|
||||
|
||||
it('jumps to min on Home and max on End', async () => {
|
||||
render(Slider, { value: 50, min: 10, max: 90 });
|
||||
const thumb = screen.getByRole('slider');
|
||||
await fireEvent.keyDown(thumb, { key: 'Home' });
|
||||
expect(thumb).toHaveAttribute('aria-valuenow', '10');
|
||||
await fireEvent.keyDown(thumb, { key: 'End' });
|
||||
expect(thumb).toHaveAttribute('aria-valuenow', '90');
|
||||
});
|
||||
|
||||
it('moves by step*10 on PageUp / PageDown', async () => {
|
||||
render(Slider, { value: 50, step: 2 });
|
||||
const thumb = screen.getByRole('slider');
|
||||
await fireEvent.keyDown(thumb, { key: 'PageUp' });
|
||||
expect(thumb).toHaveAttribute('aria-valuenow', '70');
|
||||
await fireEvent.keyDown(thumb, { key: 'PageDown' });
|
||||
expect(thumb).toHaveAttribute('aria-valuenow', '50');
|
||||
});
|
||||
|
||||
it('clamps at the bounds', async () => {
|
||||
render(Slider, { value: 98, max: 100, step: 5 });
|
||||
const thumb = screen.getByRole('slider');
|
||||
await fireEvent.keyDown(thumb, { key: 'End' });
|
||||
expect(thumb).toHaveAttribute('aria-valuenow', '100');
|
||||
});
|
||||
|
||||
it('does nothing when disabled', async () => {
|
||||
const onValueChange = vi.fn();
|
||||
render(Slider, { value: 50, disabled: true, onValueChange });
|
||||
const thumb = screen.getByRole('slider');
|
||||
await fireEvent.keyDown(thumb, { key: 'ArrowRight' });
|
||||
expect(thumb).toHaveAttribute('aria-valuenow', '50');
|
||||
expect(onValueChange).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Pointer', () => {
|
||||
/**
|
||||
* Force a deterministic track rect since jsdom has no layout.
|
||||
*/
|
||||
function mockTrackRect(container: HTMLElement) {
|
||||
const track = container.querySelector('[role="presentation"]') as HTMLElement;
|
||||
track.getBoundingClientRect = () =>
|
||||
({ left: 0, right: 200, top: 0, bottom: 20, width: 200, height: 20 }) as DOMRect;
|
||||
return track;
|
||||
}
|
||||
|
||||
it('seeks to the clicked position (click-to-seek)', async () => {
|
||||
const onValueChange = vi.fn();
|
||||
const { container } = render(Slider, { value: 0, min: 0, max: 100, onValueChange });
|
||||
const track = mockTrackRect(container);
|
||||
await fireEvent.pointerDown(track, { clientX: 100, clientY: 10, pointerId: 1 });
|
||||
expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '50');
|
||||
expect(onValueChange).toHaveBeenCalledWith(50);
|
||||
});
|
||||
|
||||
it('updates while dragging after pointerdown', async () => {
|
||||
const { container } = render(Slider, { value: 0, min: 0, max: 100 });
|
||||
const track = mockTrackRect(container);
|
||||
await fireEvent.pointerDown(track, { clientX: 50, clientY: 10, pointerId: 1 });
|
||||
await fireEvent.pointerMove(track, { clientX: 150, clientY: 10, pointerId: 1 });
|
||||
expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '75');
|
||||
});
|
||||
|
||||
it('ignores pointer when disabled', async () => {
|
||||
const { container } = render(Slider, { value: 0, disabled: true });
|
||||
const track = mockTrackRect(container);
|
||||
await fireEvent.pointerDown(track, { clientX: 100, clientY: 10, pointerId: 1 });
|
||||
expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '0');
|
||||
});
|
||||
|
||||
it('focuses the thumb on pointerdown so arrow keys work immediately', async () => {
|
||||
const { container } = render(Slider, { value: 0, min: 0, max: 100 });
|
||||
const track = container.querySelector('[role="presentation"]') as HTMLElement;
|
||||
track.getBoundingClientRect = () =>
|
||||
({ left: 0, right: 200, top: 0, bottom: 20, width: 200, height: 20 }) as DOMRect;
|
||||
await fireEvent.pointerDown(track, { clientX: 100, clientY: 10, pointerId: 1 });
|
||||
expect(screen.getByRole('slider')).toBe(document.activeElement);
|
||||
});
|
||||
|
||||
it('maps a vertical drag with the inverted axis (bottom→min, top→max)', async () => {
|
||||
const { container } = render(Slider, { value: 0, min: 0, max: 100, orientation: 'vertical' });
|
||||
const track = container.querySelector('[role="presentation"]') as HTMLElement;
|
||||
track.getBoundingClientRect = () =>
|
||||
({ left: 0, right: 20, top: 0, bottom: 200, width: 20, height: 200 }) as DOMRect;
|
||||
await fireEvent.pointerDown(track, { clientX: 10, clientY: 50, pointerId: 1 });
|
||||
expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '75');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
import {
|
||||
pointerToValue,
|
||||
snapToStep,
|
||||
} from './slider-math';
|
||||
|
||||
describe('snapToStep', () => {
|
||||
it('snaps a raw value to the nearest step on the grid', () => {
|
||||
expect(snapToStep(53, { min: 0, max: 100, step: 10 })).toBe(50);
|
||||
expect(snapToStep(56, { min: 0, max: 100, step: 10 })).toBe(60);
|
||||
});
|
||||
|
||||
it('clamps below min and above max', () => {
|
||||
expect(snapToStep(-20, { min: 0, max: 100, step: 1 })).toBe(0);
|
||||
expect(snapToStep(200, { min: 0, max: 100, step: 1 })).toBe(100);
|
||||
});
|
||||
|
||||
it('respects a non-zero min when snapping', () => {
|
||||
expect(snapToStep(13, { min: 10, max: 90, step: 5 })).toBe(15);
|
||||
});
|
||||
|
||||
it('preserves fractional step precision', () => {
|
||||
expect(snapToStep(1.34, { min: 0, max: 2, step: 0.05 })).toBe(1.35);
|
||||
expect(snapToStep(0.31, { min: 0, max: 1, step: 0.1 })).toBe(0.3);
|
||||
});
|
||||
});
|
||||
|
||||
describe('pointerToValue', () => {
|
||||
const rect = { left: 100, right: 300, top: 50, bottom: 250, width: 200, height: 200 } as DOMRect;
|
||||
|
||||
it('maps horizontal pointer position left→min, right→max', () => {
|
||||
const opts = { min: 0, max: 100, step: 1, orientation: 'horizontal' as const };
|
||||
expect(pointerToValue({ clientX: 100, clientY: 0 }, rect, opts)).toBe(0);
|
||||
expect(pointerToValue({ clientX: 200, clientY: 0 }, rect, opts)).toBe(50);
|
||||
expect(pointerToValue({ clientX: 300, clientY: 0 }, rect, opts)).toBe(100);
|
||||
});
|
||||
|
||||
it('inverts vertical: bottom→min, top→max', () => {
|
||||
const opts = { min: 0, max: 100, step: 1, orientation: 'vertical' as const };
|
||||
expect(pointerToValue({ clientX: 0, clientY: 250 }, rect, opts)).toBe(0);
|
||||
expect(pointerToValue({ clientX: 0, clientY: 150 }, rect, opts)).toBe(50);
|
||||
expect(pointerToValue({ clientX: 0, clientY: 50 }, rect, opts)).toBe(100);
|
||||
});
|
||||
|
||||
it('clamps when pointer is outside the track', () => {
|
||||
const opts = { min: 0, max: 100, step: 1, orientation: 'horizontal' as const };
|
||||
expect(pointerToValue({ clientX: 0, clientY: 0 }, rect, opts)).toBe(0);
|
||||
expect(pointerToValue({ clientX: 9999, clientY: 0 }, rect, opts)).toBe(100);
|
||||
});
|
||||
|
||||
it('returns min for a zero-size track without NaN', () => {
|
||||
const zero = { left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0 } as DOMRect;
|
||||
const opts = { min: 5, max: 95, step: 1, orientation: 'horizontal' as const };
|
||||
expect(pointerToValue({ clientX: 0, clientY: 0 }, zero, opts)).toBe(5);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,59 @@
|
||||
import {
|
||||
clampNumber,
|
||||
roundToStepPrecision,
|
||||
} from '$shared/lib/utils';
|
||||
|
||||
/**
|
||||
* Geometry/range options shared by the math helpers.
|
||||
*/
|
||||
type SliderMathOpts = {
|
||||
/**
|
||||
* Minimum value (inclusive)
|
||||
*/
|
||||
min: number;
|
||||
/**
|
||||
* Maximum value (inclusive)
|
||||
*/
|
||||
max: number;
|
||||
/**
|
||||
* Step increment
|
||||
*/
|
||||
step: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* Snap a raw value onto the step grid, then clamp to [min, max].
|
||||
*
|
||||
* Snapping is anchored to `min` so non-zero ranges land on valid stops.
|
||||
* `roundToStepPrecision` removes IEEE-754 drift from fractional steps.
|
||||
*/
|
||||
export function snapToStep(raw: number, { min, max, step }: SliderMathOpts): number {
|
||||
if (step <= 0) {
|
||||
return clampNumber(raw, min, max);
|
||||
}
|
||||
const snapped = min + Math.round((raw - min) / step) * step;
|
||||
return clampNumber(roundToStepPrecision(snapped, step), min, max);
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a pointer coordinate into a slider value.
|
||||
*
|
||||
* Horizontal maps left→min, right→max. Vertical is inverted so that
|
||||
* up→max, matching natural slider expectations. The DOMRect is passed in
|
||||
* to keep this pure and unit-testable without layout.
|
||||
*/
|
||||
export function pointerToValue(
|
||||
point: { clientX: number; clientY: number },
|
||||
rect: DOMRect,
|
||||
opts: SliderMathOpts & { orientation: 'horizontal' | 'vertical' },
|
||||
): number {
|
||||
const { min, max, orientation } = opts;
|
||||
const size = orientation === 'vertical' ? rect.height : rect.width;
|
||||
if (size <= 0) {
|
||||
return snapToStep(min, opts);
|
||||
}
|
||||
const ratio = orientation === 'vertical'
|
||||
? (rect.bottom - point.clientY) / size
|
||||
: (point.clientX - rect.left) / size;
|
||||
return snapToStep(min + clampNumber(ratio, 0, 1) * (max - min), opts);
|
||||
}
|
||||
@@ -104,6 +104,12 @@ export {
|
||||
*/
|
||||
default as PerspectivePlan,
|
||||
} from './PerspectivePlan/PerspectivePlan.svelte';
|
||||
export {
|
||||
/**
|
||||
* Anchored popover on the native Popover API
|
||||
*/
|
||||
default as Popover,
|
||||
} from './Popover/Popover.svelte';
|
||||
export {
|
||||
/**
|
||||
* Specialized input with search icon and clear state
|
||||
|
||||
Reference in New Issue
Block a user