@plastic-js/tsumiki 0.1.45 → 0.1.46
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.
|
@@ -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>");
|
|
@@ -19,17 +19,13 @@ var xSvg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"
|
|
|
19
19
|
var triggerClass = 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
26
|
background: "var(--tsu-surface)",
|
|
28
27
|
border: "1px solid var(--tsu-accent-8)",
|
|
29
|
-
borderRadius: "10px",
|
|
30
|
-
padding: "0 10px",
|
|
31
28
|
color: "var(--tsu-fg)",
|
|
32
|
-
fontSize: "15px",
|
|
33
29
|
fontFamily: "inherit",
|
|
34
30
|
textAlign: "left",
|
|
35
31
|
outline: "none",
|
|
@@ -43,6 +39,38 @@ var triggerClass = css({
|
|
|
43
39
|
cursor: "not-allowed"
|
|
44
40
|
}
|
|
45
41
|
});
|
|
42
|
+
var sizeClasses = {
|
|
43
|
+
xs: css({
|
|
44
|
+
height: "var(--tsu-comp-height-xs)",
|
|
45
|
+
padding: "0 var(--tsu-comp-padding-x-xs)",
|
|
46
|
+
fontSize: "var(--tsu-comp-font-size-xs)",
|
|
47
|
+
borderRadius: "var(--tsu-radius-l1-xs)"
|
|
48
|
+
}),
|
|
49
|
+
sm: css({
|
|
50
|
+
height: "var(--tsu-comp-height-sm)",
|
|
51
|
+
padding: "0 var(--tsu-comp-padding-x-sm)",
|
|
52
|
+
fontSize: "var(--tsu-comp-font-size-sm)",
|
|
53
|
+
borderRadius: "var(--tsu-radius-l1-sm)"
|
|
54
|
+
}),
|
|
55
|
+
md: css({
|
|
56
|
+
height: "var(--tsu-comp-height-md)",
|
|
57
|
+
padding: "0 var(--tsu-comp-padding-x-md)",
|
|
58
|
+
fontSize: "var(--tsu-comp-font-size-md)",
|
|
59
|
+
borderRadius: "var(--tsu-radius-l1-md)"
|
|
60
|
+
}),
|
|
61
|
+
lg: css({
|
|
62
|
+
height: "var(--tsu-comp-height-lg)",
|
|
63
|
+
padding: "0 var(--tsu-comp-padding-x-lg)",
|
|
64
|
+
fontSize: "var(--tsu-comp-font-size-lg)",
|
|
65
|
+
borderRadius: "var(--tsu-radius-l1-lg)"
|
|
66
|
+
}),
|
|
67
|
+
xl: css({
|
|
68
|
+
height: "var(--tsu-comp-height-xl)",
|
|
69
|
+
padding: "0 var(--tsu-comp-padding-x-xl)",
|
|
70
|
+
fontSize: "var(--tsu-comp-font-size-xl)",
|
|
71
|
+
borderRadius: "var(--tsu-radius-l1-xl)"
|
|
72
|
+
})
|
|
73
|
+
};
|
|
46
74
|
var triggerValueClass = css({
|
|
47
75
|
overflow: "hidden",
|
|
48
76
|
textOverflow: "ellipsis",
|
|
@@ -164,7 +192,7 @@ var read = (source) => {
|
|
|
164
192
|
return typeof source === "function" ? source() : source;
|
|
165
193
|
};
|
|
166
194
|
var Select = (props) => {
|
|
167
|
-
const [local, rest] = splitProps(props, [
|
|
195
|
+
const [local, rest] = splitProps(mergeProps$1({ size: "md" }, props), [
|
|
168
196
|
"value",
|
|
169
197
|
"onValueChange",
|
|
170
198
|
"items",
|
|
@@ -174,6 +202,7 @@ var Select = (props) => {
|
|
|
174
202
|
"onOpenChange",
|
|
175
203
|
"disabled",
|
|
176
204
|
"children",
|
|
205
|
+
"size",
|
|
177
206
|
"backdropClassName",
|
|
178
207
|
"backdropStyle",
|
|
179
208
|
"filter"
|
|
@@ -228,6 +257,7 @@ var Select = (props) => {
|
|
|
228
257
|
selectedItem,
|
|
229
258
|
setValue,
|
|
230
259
|
disabled: () => local.disabled ?? false,
|
|
260
|
+
size: () => read(local.size),
|
|
231
261
|
backdropClassName: local.backdropClassName,
|
|
232
262
|
backdropStyle: local.backdropStyle,
|
|
233
263
|
filter: local.filter,
|
|
@@ -248,7 +278,7 @@ var SelectTrigger = (props) => {
|
|
|
248
278
|
]);
|
|
249
279
|
return jsx("div", mergeProps(() => part("trigger"), {
|
|
250
280
|
get className() {
|
|
251
|
-
return `${triggerClass} ${local.className || ""}`;
|
|
281
|
+
return `${triggerClass} ${sizeClasses[ctx.size()] || ""} ${local.className || ""}`;
|
|
252
282
|
},
|
|
253
283
|
"data-disabled": () => ctx.disabled() ? "" : void 0,
|
|
254
284
|
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)",
|