@dorsk/tsumikit 0.18.6 → 0.18.8
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.
|
@@ -11,7 +11,12 @@
|
|
|
11
11
|
// `max` caps each column's width: instead of growing to fill the row (the
|
|
12
12
|
// default `1fr`), columns top out at `max` and the grid left-packs them
|
|
13
13
|
// (auto-fill + justify-content:start) so a 3-item and a 4-item section both
|
|
14
|
-
// show uniform fixed-width columns rather than stretching to fill.
|
|
14
|
+
// show uniform fixed-width columns rather than stretching to fill. Beware:
|
|
15
|
+
// auto-fill counts tracks by a definite `max`, so column count only grows
|
|
16
|
+
// when another `max`-wide track fits — a narrow container can end up with
|
|
17
|
+
// one capped column and dead space. `fill` keeps empty tracks (auto-fill)
|
|
18
|
+
// without capping width: tracks are counted by `min`, so density rises
|
|
19
|
+
// monotonically with space and sparse rows don't stretch to fill. `align`
|
|
15
20
|
// controls cross-axis alignment of items within their row; it defaults to
|
|
16
21
|
// `start` so cards don't stretch to the tallest sibling.
|
|
17
22
|
import type { Snippet } from 'svelte';
|
|
@@ -20,6 +25,7 @@
|
|
|
20
25
|
as = 'div',
|
|
21
26
|
min = '14rem',
|
|
22
27
|
max,
|
|
28
|
+
fill = false,
|
|
23
29
|
gap = 'var(--sp-4)',
|
|
24
30
|
maxCols,
|
|
25
31
|
align = 'start',
|
|
@@ -33,6 +39,10 @@
|
|
|
33
39
|
/** Maximum column width. When set, columns stop growing at this width and
|
|
34
40
|
* the grid left-packs uniform tracks instead of stretching to fill. */
|
|
35
41
|
max?: string;
|
|
42
|
+
/** Keep empty tracks (auto-fill) without capping column width: columns are
|
|
43
|
+
* counted by `min`, so count grows monotonically with available space and
|
|
44
|
+
* sparse rows don't stretch to fill. Ignored when `max` is set. */
|
|
45
|
+
fill?: boolean;
|
|
36
46
|
gap?: string;
|
|
37
47
|
maxCols?: number;
|
|
38
48
|
/** Cross-axis alignment of items in their row (align-items). Defaults to `start`. */
|
|
@@ -49,7 +59,7 @@
|
|
|
49
59
|
let track = $derived(max != null ? max : '1fr');
|
|
50
60
|
// auto-fill keeps capped tracks from stretching to fill the row; auto-fit
|
|
51
61
|
// (the default) collapses empty tracks so columns expand to use the space.
|
|
52
|
-
let mode = $derived(max != null ? 'auto-fill' : 'auto-fit');
|
|
62
|
+
let mode = $derived(max != null || fill ? 'auto-fill' : 'auto-fit');
|
|
53
63
|
// Left-pack capped grids by default so columns don't drift to fill the row.
|
|
54
64
|
let justifyValue = $derived(justify ?? (max != null ? 'start' : null));
|
|
55
65
|
|
|
@@ -5,6 +5,10 @@ type $$ComponentProps = {
|
|
|
5
5
|
/** Maximum column width. When set, columns stop growing at this width and
|
|
6
6
|
* the grid left-packs uniform tracks instead of stretching to fill. */
|
|
7
7
|
max?: string;
|
|
8
|
+
/** Keep empty tracks (auto-fill) without capping column width: columns are
|
|
9
|
+
* counted by `min`, so count grows monotonically with available space and
|
|
10
|
+
* sparse rows don't stretch to fill. Ignored when `max` is set. */
|
|
11
|
+
fill?: boolean;
|
|
8
12
|
gap?: string;
|
|
9
13
|
maxCols?: number;
|
|
10
14
|
/** Cross-axis alignment of items in their row (align-items). Defaults to `start`. */
|
|
@@ -48,7 +48,11 @@
|
|
|
48
48
|
<div class="empty empty-{tone} {compact ? 'empty-compact' : ''} {klass}" data-tsu="EmptyState" {...rest}>
|
|
49
49
|
{#if icon || iconChildren}
|
|
50
50
|
<span class="empty-chip" aria-hidden="true">
|
|
51
|
-
|
|
51
|
+
{#if iconChildren}
|
|
52
|
+
<Icon>{@render iconChildren()}</Icon>
|
|
53
|
+
{:else}
|
|
54
|
+
<Icon name={icon} />
|
|
55
|
+
{/if}
|
|
52
56
|
</span>
|
|
53
57
|
{/if}
|
|
54
58
|
<p class="empty-title">{title}</p>
|
package/package.json
CHANGED