@spaethtech/svelte-ui 0.5.1-dev.27.5011e8e → 0.5.1-dev.28.7f45387
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import type { Snippet } from "svelte";
|
|
3
3
|
import type { Size } from "../types/sizes.js";
|
|
4
|
-
import { responsiveClasses, type Responsive } from "../types/responsive.js";
|
|
4
|
+
import { responsiveClasses, resolveScalar, type Responsive } from "../types/responsive.js";
|
|
5
5
|
import { gridColsClass, gapClass, type Columns, type Gap } from "./field-group.js";
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -47,8 +47,16 @@
|
|
|
47
47
|
const hasDesc = $derived(isSnippet(description) ? true : !!(description && String(description).trim()));
|
|
48
48
|
|
|
49
49
|
// Auto-placed CSS grid: each direct child (a Radio/Checkbox/Toggle label) is one cell — no
|
|
50
|
-
// per-child prop. `columns` sets the equal-width tracks; `gap` is the single density knob
|
|
51
|
-
|
|
50
|
+
// per-child prop. `columns` sets the equal-width tracks; `gap` is the single density knob and, when
|
|
51
|
+
// unset, scales with `size` (controls grow h-6/h-8/h-10, so the gap tracks them).
|
|
52
|
+
const sizeGap: Record<Size, Gap> = {
|
|
53
|
+
sm: { x: 4, y: 0.5 },
|
|
54
|
+
md: { x: 6, y: 1 },
|
|
55
|
+
lg: { x: 8, y: 2 },
|
|
56
|
+
};
|
|
57
|
+
const itemsClass = $derived(
|
|
58
|
+
`grid ${gridColsClass(columns)} ${gapClass(gap, sizeGap[resolveScalar(size, "md")])}`,
|
|
59
|
+
);
|
|
52
60
|
</script>
|
|
53
61
|
|
|
54
62
|
<fieldset class="m-0 flex min-w-0 flex-col gap-1 border-0 p-0 {cls}">
|
|
@@ -27,15 +27,15 @@ export function gridColsClass(columns) {
|
|
|
27
27
|
}
|
|
28
28
|
// Static literal maps (Tailwind-scannable via the shipped dist). Non-responsive — one gap per grid.
|
|
29
29
|
const GAP = {
|
|
30
|
-
"0": "gap-0", "1": "gap-1", "1.5": "gap-1.5", "2": "gap-2", "3": "gap-3",
|
|
30
|
+
"0": "gap-0", "0.5": "gap-0.5", "1": "gap-1", "1.5": "gap-1.5", "2": "gap-2", "3": "gap-3",
|
|
31
31
|
"4": "gap-4", "5": "gap-5", "6": "gap-6", "8": "gap-8",
|
|
32
32
|
};
|
|
33
33
|
const GAP_X = {
|
|
34
|
-
"0": "gap-x-0", "1": "gap-x-1", "1.5": "gap-x-1.5", "2": "gap-x-2", "3": "gap-x-3",
|
|
34
|
+
"0": "gap-x-0", "0.5": "gap-x-0.5", "1": "gap-x-1", "1.5": "gap-x-1.5", "2": "gap-x-2", "3": "gap-x-3",
|
|
35
35
|
"4": "gap-x-4", "5": "gap-x-5", "6": "gap-x-6", "8": "gap-x-8",
|
|
36
36
|
};
|
|
37
37
|
const GAP_Y = {
|
|
38
|
-
"0": "gap-y-0", "1": "gap-y-1", "1.5": "gap-y-1.5", "2": "gap-y-2", "3": "gap-y-3",
|
|
38
|
+
"0": "gap-y-0", "0.5": "gap-y-0.5", "1": "gap-y-1", "1.5": "gap-y-1.5", "2": "gap-y-2", "3": "gap-y-3",
|
|
39
39
|
"4": "gap-y-4", "5": "gap-y-5", "6": "gap-y-6", "8": "gap-y-8",
|
|
40
40
|
};
|
|
41
41
|
/** Resolve a `Gap` (or the fallback when unset) to `gap-*` / `gap-x-* gap-y-*` classes. */
|
package/docs/components.md
CHANGED
|
@@ -130,7 +130,8 @@ One wrapper for a set of Radios, Checkboxes, or Toggles under a shared legend (a
|
|
|
130
130
|
- **Location**: `src/lib/components/FieldGroup.svelte`
|
|
131
131
|
- **Props**: `label` (legend), `aside`, `description`, `error`, `required` (the shared field-chrome
|
|
132
132
|
vocabulary), `columns` (`number | { base, md, … }`, default `1` = stacked; higher = that many
|
|
133
|
-
equal auto-placed columns), `gap` (`number | { x, y }
|
|
133
|
+
equal auto-placed columns), `gap` (`number | { x, y }`; default scales with `size` —
|
|
134
|
+
`sm {x:4,y:0.5}` · `md {x:6,y:1}` · `lg {x:8,y:2}`), `size`,
|
|
134
135
|
`variant`, `disabled` (propagate to children), and for radio groups `value` (bindable) + `name`.
|
|
135
136
|
Children render their label inline; radios auto-share the group value/name via context.
|
|
136
137
|
|