@plastic-js/tsumiki 0.1.29 → 0.1.31
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.
- package/dist/components/FilterGroup.js +47 -22
- package/docs/api.md +1 -0
- package/package.json +1 -1
|
@@ -37,17 +37,30 @@ var sizeVars = {
|
|
|
37
37
|
"--_tg-radius": "var(--tsu-radius-l1-xl)"
|
|
38
38
|
}
|
|
39
39
|
};
|
|
40
|
-
var defaultStyle = {
|
|
41
|
-
|
|
40
|
+
var defaultStyle = {
|
|
41
|
+
"--_tg-border": "var(--tsu-accent-9)",
|
|
42
|
+
"--_fg-gap": "var(--tsu-spacing-sm)"
|
|
43
|
+
};
|
|
44
|
+
var rootClass = css({
|
|
45
|
+
display: "flex",
|
|
46
|
+
width: "100%",
|
|
47
|
+
alignItems: "center",
|
|
48
|
+
gap: "var(--_fg-gap, var(--tsu-spacing-sm))"
|
|
49
|
+
});
|
|
50
|
+
var stickyClass = css({
|
|
51
|
+
position: "sticky",
|
|
52
|
+
top: 0,
|
|
53
|
+
zIndex: "var(--tsu-z-dropdown)",
|
|
54
|
+
backgroundColor: "var(--tsu-bg)"
|
|
55
|
+
});
|
|
42
56
|
var allClass = css({
|
|
43
57
|
display: "flex",
|
|
44
58
|
alignItems: "center",
|
|
45
59
|
justifyContent: "center",
|
|
60
|
+
flexShrink: 0,
|
|
46
61
|
padding: "var(--_tg-padding-y, var(--tsu-comp-padding-y-md)) var(--_tg-padding-x, var(--tsu-comp-padding-x-md))",
|
|
47
62
|
border: "1px solid var(--_tg-border)",
|
|
48
|
-
|
|
49
|
-
borderTopLeftRadius: "var(--_tg-radius, var(--tsu-radius-l1-md))",
|
|
50
|
-
borderBottomLeftRadius: "var(--_tg-radius, var(--tsu-radius-l1-md))",
|
|
63
|
+
borderRadius: "var(--tsu-radius-round)",
|
|
51
64
|
background: "transparent",
|
|
52
65
|
color: "var(--tsu-neutral-11)",
|
|
53
66
|
fontSize: "var(--_tg-font-size, var(--tsu-comp-font-size-md))",
|
|
@@ -65,10 +78,20 @@ var allClass = css({
|
|
|
65
78
|
cursor: "not-allowed"
|
|
66
79
|
}
|
|
67
80
|
});
|
|
68
|
-
var
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
81
|
+
var groupClass = css({
|
|
82
|
+
border: "none",
|
|
83
|
+
overflowX: "auto",
|
|
84
|
+
overflowY: "hidden",
|
|
85
|
+
flex: "1 1 auto",
|
|
86
|
+
minWidth: 0,
|
|
87
|
+
gap: "var(--_fg-gap, var(--tsu-spacing-sm))"
|
|
88
|
+
});
|
|
89
|
+
var itemClass = css({
|
|
90
|
+
border: "1px solid var(--_tg-border)",
|
|
91
|
+
borderRadius: "var(--tsu-radius-round)",
|
|
92
|
+
flexShrink: 0,
|
|
93
|
+
"&:last-child": { border: "1px solid var(--_tg-border)" }
|
|
94
|
+
});
|
|
72
95
|
var FilterGroup = (props = {}) => {
|
|
73
96
|
const [local, rest] = splitProps(mergeProps$1({
|
|
74
97
|
size: "md",
|
|
@@ -82,10 +105,12 @@ var FilterGroup = (props = {}) => {
|
|
|
82
105
|
"allLabel",
|
|
83
106
|
"size",
|
|
84
107
|
"buttonClass",
|
|
85
|
-
"groupClass"
|
|
108
|
+
"groupClass",
|
|
109
|
+
"sticky"
|
|
86
110
|
]);
|
|
87
111
|
const value = () => access(local.value) ?? [];
|
|
88
112
|
const allActive = () => value().length === 0;
|
|
113
|
+
const sticky = () => access(local.sticky);
|
|
89
114
|
const emit = (val) => {
|
|
90
115
|
local.onValueChange?.(val);
|
|
91
116
|
};
|
|
@@ -95,15 +120,16 @@ var FilterGroup = (props = {}) => {
|
|
|
95
120
|
};
|
|
96
121
|
const handleChange = (value) => emit(value);
|
|
97
122
|
return jsx("div", mergeProps(rest, {
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
123
|
+
className: () => [
|
|
124
|
+
rootClass,
|
|
125
|
+
sticky() && stickyClass,
|
|
126
|
+
local.className
|
|
127
|
+
].filter(Boolean).join(" "),
|
|
128
|
+
style: () => ({
|
|
129
|
+
...defaultStyle,
|
|
130
|
+
...sizeVars[access(local.size)],
|
|
131
|
+
...typeof sticky() === "number" ? { top: `${sticky()}px` } : void 0
|
|
132
|
+
}),
|
|
107
133
|
children: [() => {
|
|
108
134
|
const _el0 = _tmpl.cloneNode(true);
|
|
109
135
|
insert(_el0, () => local.allLabel);
|
|
@@ -121,9 +147,8 @@ var FilterGroup = (props = {}) => {
|
|
|
121
147
|
},
|
|
122
148
|
onValueChange: handleChange,
|
|
123
149
|
get className() {
|
|
124
|
-
return local.groupClass;
|
|
150
|
+
return [groupClass, local.groupClass].filter(Boolean).join(" ");
|
|
125
151
|
},
|
|
126
|
-
style: tgStyle,
|
|
127
152
|
children: () => local.items.map((item) => jsx(ToggleGroupItem, mergeProps({
|
|
128
153
|
get key() {
|
|
129
154
|
return item.value;
|
|
@@ -135,7 +160,7 @@ var FilterGroup = (props = {}) => {
|
|
|
135
160
|
return item.disabled;
|
|
136
161
|
},
|
|
137
162
|
get className() {
|
|
138
|
-
return local.buttonClass;
|
|
163
|
+
return [itemClass, local.buttonClass].filter(Boolean).join(" ");
|
|
139
164
|
},
|
|
140
165
|
children: () => item.label
|
|
141
166
|
})))
|
package/docs/api.md
CHANGED
|
@@ -282,6 +282,7 @@ Multi-select filter bar built on `ToggleGroup`. Renders an "All" toggle; selecti
|
|
|
282
282
|
| `size` | `string` | `md` | See size values. |
|
|
283
283
|
| `buttonClass` | `string` | — | Class applied to every button. |
|
|
284
284
|
| `groupClass` | `string` | — | Class applied to the inner `ToggleGroup`. |
|
|
285
|
+
| `sticky` | `boolean \| number` | — | Sticky to the top of the scroll container; pass a number for a `top` offset in px. |
|
|
285
286
|
| `className` | `string` | — | Root class. |
|
|
286
287
|
|
|
287
288
|
### RadioGroup
|