@plastic-js/tsumiki 0.1.45 → 0.1.47
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/Select.js +51 -11
- package/dist/components/ToggleGroup.js +6 -0
- package/docs/api.md +1 -0
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import BottomSheet from "./BottomSheet.js";
|
|
|
2
2
|
import Icon from "./Icon.js";
|
|
3
3
|
import { Fragment, insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
|
|
4
4
|
import { css } from "@emotion/css";
|
|
5
|
-
import { Loop, createContext, createEffect, createSignal, splitProps, useContext } from "@plastic-js/plastic";
|
|
5
|
+
import { Loop, createContext, createEffect, createSignal, mergeProps as mergeProps$1, splitProps, useContext } from "@plastic-js/plastic";
|
|
6
6
|
//#region src/components/Select.jsx
|
|
7
7
|
var _tmpl3 = template("<div>No results</div>");
|
|
8
8
|
var _tmpl2 = template("<button type=\"button\" aria-label=\"Clear search\"></button>");
|
|
@@ -16,20 +16,14 @@ var chevronDownSvg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" hei
|
|
|
16
16
|
var checkSvg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"/></svg>";
|
|
17
17
|
var searchSvg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"M21 21l-4.35-4.35\"/></svg>";
|
|
18
18
|
var xSvg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/></svg>";
|
|
19
|
-
var
|
|
19
|
+
var triggerBaseClass = css({
|
|
20
20
|
flexShrink: 0,
|
|
21
21
|
width: "100%",
|
|
22
|
-
height: "44px",
|
|
23
22
|
display: "flex",
|
|
24
23
|
alignItems: "center",
|
|
25
24
|
justifyContent: "space-between",
|
|
26
25
|
gap: "4px",
|
|
27
|
-
background: "var(--tsu-surface)",
|
|
28
|
-
border: "1px solid var(--tsu-accent-8)",
|
|
29
|
-
borderRadius: "10px",
|
|
30
|
-
padding: "0 10px",
|
|
31
26
|
color: "var(--tsu-fg)",
|
|
32
|
-
fontSize: "15px",
|
|
33
27
|
fontFamily: "inherit",
|
|
34
28
|
textAlign: "left",
|
|
35
29
|
outline: "none",
|
|
@@ -43,6 +37,45 @@ var triggerClass = css({
|
|
|
43
37
|
cursor: "not-allowed"
|
|
44
38
|
}
|
|
45
39
|
});
|
|
40
|
+
var triggerVariants = {
|
|
41
|
+
solid: css({
|
|
42
|
+
backgroundColor: "var(--tsu-surface)",
|
|
43
|
+
border: "1px solid transparent"
|
|
44
|
+
}),
|
|
45
|
+
outline: css({ border: "1px solid var(--tsu-accent-8)" })
|
|
46
|
+
};
|
|
47
|
+
var sizeClasses = {
|
|
48
|
+
xs: css({
|
|
49
|
+
height: "var(--tsu-comp-height-xs)",
|
|
50
|
+
padding: "0 var(--tsu-comp-padding-x-xs)",
|
|
51
|
+
fontSize: "var(--tsu-comp-font-size-xs)",
|
|
52
|
+
borderRadius: "var(--tsu-radius-l1-xs)"
|
|
53
|
+
}),
|
|
54
|
+
sm: css({
|
|
55
|
+
height: "var(--tsu-comp-height-sm)",
|
|
56
|
+
padding: "0 var(--tsu-comp-padding-x-sm)",
|
|
57
|
+
fontSize: "var(--tsu-comp-font-size-sm)",
|
|
58
|
+
borderRadius: "var(--tsu-radius-l1-sm)"
|
|
59
|
+
}),
|
|
60
|
+
md: css({
|
|
61
|
+
height: "var(--tsu-comp-height-md)",
|
|
62
|
+
padding: "0 var(--tsu-comp-padding-x-md)",
|
|
63
|
+
fontSize: "var(--tsu-comp-font-size-md)",
|
|
64
|
+
borderRadius: "var(--tsu-radius-l1-md)"
|
|
65
|
+
}),
|
|
66
|
+
lg: css({
|
|
67
|
+
height: "var(--tsu-comp-height-lg)",
|
|
68
|
+
padding: "0 var(--tsu-comp-padding-x-lg)",
|
|
69
|
+
fontSize: "var(--tsu-comp-font-size-lg)",
|
|
70
|
+
borderRadius: "var(--tsu-radius-l1-lg)"
|
|
71
|
+
}),
|
|
72
|
+
xl: css({
|
|
73
|
+
height: "var(--tsu-comp-height-xl)",
|
|
74
|
+
padding: "0 var(--tsu-comp-padding-x-xl)",
|
|
75
|
+
fontSize: "var(--tsu-comp-font-size-xl)",
|
|
76
|
+
borderRadius: "var(--tsu-radius-l1-xl)"
|
|
77
|
+
})
|
|
78
|
+
};
|
|
46
79
|
var triggerValueClass = css({
|
|
47
80
|
overflow: "hidden",
|
|
48
81
|
textOverflow: "ellipsis",
|
|
@@ -164,7 +197,10 @@ var read = (source) => {
|
|
|
164
197
|
return typeof source === "function" ? source() : source;
|
|
165
198
|
};
|
|
166
199
|
var Select = (props) => {
|
|
167
|
-
const [local, rest] = splitProps(
|
|
200
|
+
const [local, rest] = splitProps(mergeProps$1({
|
|
201
|
+
size: "md",
|
|
202
|
+
solid: false
|
|
203
|
+
}, props), [
|
|
168
204
|
"value",
|
|
169
205
|
"onValueChange",
|
|
170
206
|
"items",
|
|
@@ -174,9 +210,11 @@ var Select = (props) => {
|
|
|
174
210
|
"onOpenChange",
|
|
175
211
|
"disabled",
|
|
176
212
|
"children",
|
|
213
|
+
"size",
|
|
177
214
|
"backdropClassName",
|
|
178
215
|
"backdropStyle",
|
|
179
|
-
"filter"
|
|
216
|
+
"filter",
|
|
217
|
+
"solid"
|
|
180
218
|
]);
|
|
181
219
|
const open = (v) => {
|
|
182
220
|
if (v === void 0) return read(local.open);
|
|
@@ -228,6 +266,8 @@ var Select = (props) => {
|
|
|
228
266
|
selectedItem,
|
|
229
267
|
setValue,
|
|
230
268
|
disabled: () => local.disabled ?? false,
|
|
269
|
+
size: () => read(local.size),
|
|
270
|
+
solid: () => read(local.solid),
|
|
231
271
|
backdropClassName: local.backdropClassName,
|
|
232
272
|
backdropStyle: local.backdropStyle,
|
|
233
273
|
filter: local.filter,
|
|
@@ -248,7 +288,7 @@ var SelectTrigger = (props) => {
|
|
|
248
288
|
]);
|
|
249
289
|
return jsx("div", mergeProps(() => part("trigger"), {
|
|
250
290
|
get className() {
|
|
251
|
-
return `${
|
|
291
|
+
return `${triggerBaseClass} ${triggerVariants[ctx.solid() ? "solid" : "outline"]} ${sizeClasses[ctx.size()] || ""} ${local.className || ""}`;
|
|
252
292
|
},
|
|
253
293
|
"data-disabled": () => ctx.disabled() ? "" : void 0,
|
|
254
294
|
onClick: () => {
|
|
@@ -5,6 +5,7 @@ import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
|
|
|
5
5
|
//#region src/components/ToggleGroup.jsx
|
|
6
6
|
var rootClass = css({
|
|
7
7
|
display: "inline-flex",
|
|
8
|
+
height: "var(--_tg-height, var(--tsu-comp-height-md))",
|
|
8
9
|
border: "1px solid var(--_tg-border)",
|
|
9
10
|
borderRadius: "var(--_tg-radius, var(--tsu-radius-l1-md))",
|
|
10
11
|
overflow: "hidden",
|
|
@@ -37,30 +38,35 @@ var itemClass = css({
|
|
|
37
38
|
});
|
|
38
39
|
var sizeVars = {
|
|
39
40
|
xs: {
|
|
41
|
+
"--_tg-height": "var(--tsu-comp-height-xs)",
|
|
40
42
|
"--_tg-padding-y": "var(--tsu-comp-padding-y-xs)",
|
|
41
43
|
"--_tg-padding-x": "var(--tsu-comp-padding-x-xs)",
|
|
42
44
|
"--_tg-font-size": "var(--tsu-comp-font-size-xs)",
|
|
43
45
|
"--_tg-radius": "var(--tsu-radius-l1-xs)"
|
|
44
46
|
},
|
|
45
47
|
sm: {
|
|
48
|
+
"--_tg-height": "var(--tsu-comp-height-sm)",
|
|
46
49
|
"--_tg-padding-y": "var(--tsu-comp-padding-y-sm)",
|
|
47
50
|
"--_tg-padding-x": "var(--tsu-comp-padding-x-sm)",
|
|
48
51
|
"--_tg-font-size": "var(--tsu-comp-font-size-sm)",
|
|
49
52
|
"--_tg-radius": "var(--tsu-radius-l1-sm)"
|
|
50
53
|
},
|
|
51
54
|
md: {
|
|
55
|
+
"--_tg-height": "var(--tsu-comp-height-md)",
|
|
52
56
|
"--_tg-padding-y": "var(--tsu-comp-padding-y-md)",
|
|
53
57
|
"--_tg-padding-x": "var(--tsu-comp-padding-x-md)",
|
|
54
58
|
"--_tg-font-size": "var(--tsu-comp-font-size-md)",
|
|
55
59
|
"--_tg-radius": "var(--tsu-radius-l1-md)"
|
|
56
60
|
},
|
|
57
61
|
lg: {
|
|
62
|
+
"--_tg-height": "var(--tsu-comp-height-lg)",
|
|
58
63
|
"--_tg-padding-y": "var(--tsu-comp-padding-y-lg)",
|
|
59
64
|
"--_tg-padding-x": "var(--tsu-comp-padding-x-lg)",
|
|
60
65
|
"--_tg-font-size": "var(--tsu-comp-font-size-lg)",
|
|
61
66
|
"--_tg-radius": "var(--tsu-radius-l1-lg)"
|
|
62
67
|
},
|
|
63
68
|
xl: {
|
|
69
|
+
"--_tg-height": "var(--tsu-comp-height-xl)",
|
|
64
70
|
"--_tg-padding-y": "var(--tsu-comp-padding-y-xl)",
|
|
65
71
|
"--_tg-padding-x": "var(--tsu-comp-padding-x-xl)",
|
|
66
72
|
"--_tg-font-size": "var(--tsu-comp-font-size-xl)",
|
package/docs/api.md
CHANGED
|
@@ -329,6 +329,7 @@ Mobile-optimized bottom-sheet select (draggable sheet overlay).
|
|
|
329
329
|
| `open` | `(() => boolean)` | — | **Required** controlled open state. |
|
|
330
330
|
| `onOpenChange` | `(open) => void` | — | Open/close callback. |
|
|
331
331
|
| `disabled` | `boolean` | `false` | Disabled. |
|
|
332
|
+
| `solid` | `boolean` | `false` | Filled trigger variant instead of outline. |
|
|
332
333
|
| `filter` | `(item, query, itemToLabel) => boolean` | — | Custom filter for the search box. |
|
|
333
334
|
| `placeholder` | `string` | — | Trigger placeholder. |
|
|
334
335
|
| `backdropClassName` | `string` | — | Backdrop class. |
|