@dorsk/tsumikit 0.7.0 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -49,7 +49,14 @@
|
|
|
49
49
|
<span class="metric-label">{label}</span>
|
|
50
50
|
{#if icon || iconChildren}
|
|
51
51
|
<span class="metric-chip" aria-hidden="true">
|
|
52
|
-
|
|
52
|
+
<!-- Only forward a children snippet when a custom icon was actually
|
|
53
|
+
provided; otherwise Icon's `children` branch always wins and the
|
|
54
|
+
registry `name` glyph never renders (empty chip). -->
|
|
55
|
+
{#if iconChildren}
|
|
56
|
+
<Icon name={icon}>{@render iconChildren()}</Icon>
|
|
57
|
+
{:else}
|
|
58
|
+
<Icon name={icon} />
|
|
59
|
+
{/if}
|
|
53
60
|
</span>
|
|
54
61
|
{/if}
|
|
55
62
|
</div>
|
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
export interface SegmentOption {
|
|
3
|
+
value: string;
|
|
4
|
+
/** Visible text. Optional in `icon` mode where the icon carries the meaning. */
|
|
5
|
+
label?: string;
|
|
6
|
+
/** Optional count badge rendered after the label (filter-pill use). */
|
|
7
|
+
count?: number;
|
|
8
|
+
/** Icon glyph — required for icon-toggle mode, optional alongside a label. */
|
|
9
|
+
icon?: import('../atoms/Icon.svelte').IconName;
|
|
10
|
+
/** Greyed out, not selectable, skipped by keyboard navigation. */
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
}
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<script lang="ts">
|
|
16
|
+
// Single-select segmented control. One token-driven row of options covering
|
|
17
|
+
// the two repeated redesign controls:
|
|
18
|
+
// • filter pills — label + optional count badge ("All 742 / Missing 120")
|
|
19
|
+
// • view toggle — compact icon-only buttons (grid / list)
|
|
20
|
+
// Implemented with `radiogroup`/`radio` semantics + roving tabindex so the
|
|
21
|
+
// browser-free keyboard model matches Tabs: ←/→ and Home/End move selection,
|
|
22
|
+
// Space/Enter (or click) activate. `value` is bindable.
|
|
23
|
+
import type { Snippet } from 'svelte';
|
|
24
|
+
import Icon from '../atoms/Icon.svelte';
|
|
25
|
+
|
|
26
|
+
let {
|
|
27
|
+
options,
|
|
28
|
+
value = $bindable(),
|
|
29
|
+
// `icon` packs the segments into compact square buttons (label hidden as an
|
|
30
|
+
// accessible name only); `pill` keeps the labelled filter-pill layout.
|
|
31
|
+
variant = 'pill',
|
|
32
|
+
size = 'md',
|
|
33
|
+
label = 'Options',
|
|
34
|
+
class: klass = '',
|
|
35
|
+
// Custom rendering per option (overrides the built-in label/count/icon).
|
|
36
|
+
option: optionSnippet
|
|
37
|
+
}: {
|
|
38
|
+
options: SegmentOption[];
|
|
39
|
+
value?: string;
|
|
40
|
+
variant?: 'pill' | 'icon';
|
|
41
|
+
size?: 'sm' | 'md';
|
|
42
|
+
label?: string;
|
|
43
|
+
class?: string;
|
|
44
|
+
option?: Snippet<[SegmentOption, boolean]>;
|
|
45
|
+
} = $props();
|
|
46
|
+
|
|
47
|
+
// Default to the first selectable option when no value is supplied.
|
|
48
|
+
$effect(() => {
|
|
49
|
+
if (value === undefined) {
|
|
50
|
+
const first = options.find((o) => !o.disabled);
|
|
51
|
+
if (first) value = first.value;
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
let listEl = $state<HTMLDivElement | null>(null);
|
|
56
|
+
const baseId = `seg-${Math.random().toString(36).slice(2, 8)}`;
|
|
57
|
+
|
|
58
|
+
function select(val: string, focus = false) {
|
|
59
|
+
if (options.find((o) => o.value === val)?.disabled) return;
|
|
60
|
+
value = val;
|
|
61
|
+
if (focus) {
|
|
62
|
+
queueMicrotask(() =>
|
|
63
|
+
listEl?.querySelector<HTMLButtonElement>(`#${baseId}-${val}`)?.focus()
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
// Step to the next non-disabled option in a direction, wrapping around.
|
|
68
|
+
function step(from: number, dir: 1 | -1): number {
|
|
69
|
+
const n = options.length;
|
|
70
|
+
for (let k = 1; k <= n; k++) {
|
|
71
|
+
const j = (((from + dir * k) % n) + n) % n;
|
|
72
|
+
if (!options[j].disabled) return j;
|
|
73
|
+
}
|
|
74
|
+
return from;
|
|
75
|
+
}
|
|
76
|
+
function onkeydown(e: KeyboardEvent) {
|
|
77
|
+
const i = options.findIndex((o) => o.value === value);
|
|
78
|
+
if (i < 0) return;
|
|
79
|
+
let next = i;
|
|
80
|
+
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = step(i, 1);
|
|
81
|
+
else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = step(i, -1);
|
|
82
|
+
else if (e.key === 'Home') next = options.findIndex((o) => !o.disabled);
|
|
83
|
+
else if (e.key === 'End')
|
|
84
|
+
next = options.length - 1 - [...options].reverse().findIndex((o) => !o.disabled);
|
|
85
|
+
else return;
|
|
86
|
+
e.preventDefault();
|
|
87
|
+
select(options[next].value, true);
|
|
88
|
+
}
|
|
89
|
+
</script>
|
|
90
|
+
|
|
91
|
+
<div
|
|
92
|
+
bind:this={listEl}
|
|
93
|
+
role="radiogroup"
|
|
94
|
+
aria-label={label}
|
|
95
|
+
tabindex="-1"
|
|
96
|
+
class="seg seg-{variant} seg-{size} {klass}"
|
|
97
|
+
{onkeydown}
|
|
98
|
+
>
|
|
99
|
+
{#each options as o (o.value)}
|
|
100
|
+
{@const selected = value === o.value}
|
|
101
|
+
<button
|
|
102
|
+
type="button"
|
|
103
|
+
id="{baseId}-{o.value}"
|
|
104
|
+
role="radio"
|
|
105
|
+
aria-checked={selected}
|
|
106
|
+
aria-label={variant === 'icon' && !o.label ? o.value : o.label}
|
|
107
|
+
tabindex={selected ? 0 : -1}
|
|
108
|
+
class="seg-item"
|
|
109
|
+
class:selected
|
|
110
|
+
disabled={o.disabled}
|
|
111
|
+
onclick={() => select(o.value)}
|
|
112
|
+
>
|
|
113
|
+
{#if optionSnippet}
|
|
114
|
+
{@render optionSnippet(o, selected)}
|
|
115
|
+
{:else}
|
|
116
|
+
{#if o.icon}<Icon name={o.icon} />{/if}
|
|
117
|
+
{#if o.label}<span class="seg-label">{o.label}</span>{/if}
|
|
118
|
+
{#if o.count !== undefined}<span class="seg-count">{o.count}</span>{/if}
|
|
119
|
+
{/if}
|
|
120
|
+
</button>
|
|
121
|
+
{/each}
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
<style>
|
|
125
|
+
.seg {
|
|
126
|
+
display: inline-flex;
|
|
127
|
+
align-items: center;
|
|
128
|
+
gap: var(--sp-1);
|
|
129
|
+
padding: 3px;
|
|
130
|
+
background: var(--bg-elevated-2);
|
|
131
|
+
border: 1px solid var(--border);
|
|
132
|
+
border-radius: var(--r-pill);
|
|
133
|
+
}
|
|
134
|
+
.seg-icon {
|
|
135
|
+
border-radius: var(--r-md);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.seg-item {
|
|
139
|
+
display: inline-flex;
|
|
140
|
+
align-items: center;
|
|
141
|
+
justify-content: center;
|
|
142
|
+
gap: var(--sp-2);
|
|
143
|
+
padding: 0.3rem var(--sp-3);
|
|
144
|
+
border: 0;
|
|
145
|
+
border-radius: var(--r-pill);
|
|
146
|
+
background: transparent;
|
|
147
|
+
color: var(--text-muted);
|
|
148
|
+
font-size: var(--fs-sm);
|
|
149
|
+
font-weight: var(--fw-medium);
|
|
150
|
+
line-height: 1.3;
|
|
151
|
+
white-space: nowrap;
|
|
152
|
+
cursor: pointer;
|
|
153
|
+
transition:
|
|
154
|
+
background 0.12s var(--ease),
|
|
155
|
+
color 0.12s var(--ease);
|
|
156
|
+
}
|
|
157
|
+
.seg-sm .seg-item {
|
|
158
|
+
padding: 0.2rem var(--sp-2);
|
|
159
|
+
font-size: var(--fs-xs);
|
|
160
|
+
}
|
|
161
|
+
.seg-icon .seg-item {
|
|
162
|
+
gap: 0;
|
|
163
|
+
padding: 0.35rem;
|
|
164
|
+
border-radius: var(--r-sm);
|
|
165
|
+
font-size: var(--fs-md);
|
|
166
|
+
}
|
|
167
|
+
.seg-icon.seg-sm .seg-item {
|
|
168
|
+
padding: 0.25rem;
|
|
169
|
+
font-size: var(--fs-sm);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.seg-item:hover:not(:disabled):not(.selected) {
|
|
173
|
+
color: var(--text);
|
|
174
|
+
background: var(--bg-elevated);
|
|
175
|
+
}
|
|
176
|
+
.seg-item.selected {
|
|
177
|
+
color: var(--text);
|
|
178
|
+
background: var(--bg);
|
|
179
|
+
box-shadow: var(--shadow-sm);
|
|
180
|
+
}
|
|
181
|
+
.seg-item:disabled {
|
|
182
|
+
opacity: 0.45;
|
|
183
|
+
cursor: not-allowed;
|
|
184
|
+
}
|
|
185
|
+
.seg-item:focus-visible {
|
|
186
|
+
outline: 2px solid var(--accent);
|
|
187
|
+
outline-offset: 2px;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.seg-count {
|
|
191
|
+
display: inline-flex;
|
|
192
|
+
align-items: center;
|
|
193
|
+
justify-content: center;
|
|
194
|
+
min-width: 1.25rem;
|
|
195
|
+
padding: 0 0.35rem;
|
|
196
|
+
border-radius: var(--r-pill);
|
|
197
|
+
background: var(--bg-elevated-2);
|
|
198
|
+
color: var(--text-faint);
|
|
199
|
+
font-size: 0.6875rem;
|
|
200
|
+
font-weight: var(--fw-semibold);
|
|
201
|
+
font-variant-numeric: tabular-nums;
|
|
202
|
+
transition:
|
|
203
|
+
background 0.12s var(--ease),
|
|
204
|
+
color 0.12s var(--ease);
|
|
205
|
+
}
|
|
206
|
+
.seg-item.selected .seg-count {
|
|
207
|
+
background: color-mix(in srgb, var(--accent) 18%, transparent);
|
|
208
|
+
color: var(--accent);
|
|
209
|
+
}
|
|
210
|
+
</style>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export interface SegmentOption {
|
|
2
|
+
value: string;
|
|
3
|
+
/** Visible text. Optional in `icon` mode where the icon carries the meaning. */
|
|
4
|
+
label?: string;
|
|
5
|
+
/** Optional count badge rendered after the label (filter-pill use). */
|
|
6
|
+
count?: number;
|
|
7
|
+
/** Icon glyph — required for icon-toggle mode, optional alongside a label. */
|
|
8
|
+
icon?: import('../atoms/Icon.svelte').IconName;
|
|
9
|
+
/** Greyed out, not selectable, skipped by keyboard navigation. */
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
}
|
|
12
|
+
import type { Snippet } from 'svelte';
|
|
13
|
+
type $$ComponentProps = {
|
|
14
|
+
options: SegmentOption[];
|
|
15
|
+
value?: string;
|
|
16
|
+
variant?: 'pill' | 'icon';
|
|
17
|
+
size?: 'sm' | 'md';
|
|
18
|
+
label?: string;
|
|
19
|
+
class?: string;
|
|
20
|
+
option?: Snippet<[SegmentOption, boolean]>;
|
|
21
|
+
};
|
|
22
|
+
declare const SegmentedControl: import("svelte").Component<$$ComponentProps, {}, "value">;
|
|
23
|
+
type SegmentedControl = ReturnType<typeof SegmentedControl>;
|
|
24
|
+
export default SegmentedControl;
|
package/dist/index.d.ts
CHANGED
|
@@ -38,6 +38,7 @@ export { default as Modal } from './components/molecules/Modal.svelte';
|
|
|
38
38
|
export { default as OptionButton } from './components/molecules/OptionButton.svelte';
|
|
39
39
|
export { default as Popover } from './components/molecules/Popover.svelte';
|
|
40
40
|
export { default as RadioGroup, type RadioOption, } from './components/molecules/RadioGroup.svelte';
|
|
41
|
+
export { default as SegmentedControl, type SegmentOption, } from './components/molecules/SegmentedControl.svelte';
|
|
41
42
|
export { default as SelectButton } from './components/molecules/SelectButton.svelte';
|
|
42
43
|
export { default as Tabs, type TabItem } from './components/molecules/Tabs.svelte';
|
|
43
44
|
export { default as ThemePicker } from './components/molecules/ThemePicker.svelte';
|
package/dist/index.js
CHANGED
|
@@ -48,6 +48,7 @@ export { default as Modal } from './components/molecules/Modal.svelte';
|
|
|
48
48
|
export { default as OptionButton } from './components/molecules/OptionButton.svelte';
|
|
49
49
|
export { default as Popover } from './components/molecules/Popover.svelte';
|
|
50
50
|
export { default as RadioGroup, } from './components/molecules/RadioGroup.svelte';
|
|
51
|
+
export { default as SegmentedControl, } from './components/molecules/SegmentedControl.svelte';
|
|
51
52
|
export { default as SelectButton } from './components/molecules/SelectButton.svelte';
|
|
52
53
|
export { default as Tabs } from './components/molecules/Tabs.svelte';
|
|
53
54
|
export { default as ThemePicker } from './components/molecules/ThemePicker.svelte';
|
package/package.json
CHANGED