@plastic-js/tsumiki 0.1.44 → 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.
- package/dist/components/Button.js +0 -1
- package/dist/components/DateInput.js +42 -9
- package/dist/components/Input.js +0 -1
- package/dist/components/Select.js +37 -7
- package/dist/components/SelectPc.js +0 -1
- package/dist/components/ToggleGroup.js +6 -0
- package/docs/api.md +1 -0
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import Icon from "./Icon.js";
|
|
|
3
3
|
import { expandCircular, makeWheel } from "./DateWheel.js";
|
|
4
4
|
import { Fragment, insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
|
|
5
5
|
import { css } from "@emotion/css";
|
|
6
|
-
import { createEffect, createSignal, splitProps } from "@plastic-js/plastic";
|
|
6
|
+
import { createEffect, createSignal, mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
|
|
7
7
|
//#region src/components/DateInput.jsx
|
|
8
8
|
var _tmpl4 = template("<div></div>");
|
|
9
9
|
var _tmpl3 = template("<div><div role=\"presentation\" aria-hidden=\"true\"></div><div role=\"dialog\" aria-label=\"Date picker\"><div><button type=\"button\">Cancel</button><span>Select Date</span><button type=\"button\">Done</button></div><div><div><div><span>Year</span><div><div></div><div></div></div></div><div><span>Month</span><div><div></div><div></div></div></div><div><span>Day</span><div><div></div><div></div></div></div></div></div></div></div>");
|
|
@@ -68,15 +68,11 @@ var triggerDisabledClass = css({
|
|
|
68
68
|
opacity: .4,
|
|
69
69
|
cursor: "not-allowed"
|
|
70
70
|
});
|
|
71
|
-
var
|
|
71
|
+
var triggerBaseClass = css({
|
|
72
72
|
width: "100%",
|
|
73
|
-
|
|
74
|
-
padding: "0 36px 0 var(--tsu-comp-padding-x-md)",
|
|
75
|
-
background: "var(--tsu-surface)",
|
|
73
|
+
background: "transparent",
|
|
76
74
|
border: "1px solid var(--tsu-accent-8)",
|
|
77
|
-
borderRadius: "var(--tsu-radius-l1-md)",
|
|
78
75
|
color: "var(--tsu-fg)",
|
|
79
|
-
fontSize: "var(--tsu-comp-font-size-md)",
|
|
80
76
|
fontFamily: "inherit",
|
|
81
77
|
outline: "none",
|
|
82
78
|
boxSizing: "border-box",
|
|
@@ -86,6 +82,38 @@ var triggerClass = css({
|
|
|
86
82
|
transition: "border-color var(--tsu-transition-fast), background-color var(--tsu-transition-fast)",
|
|
87
83
|
"&:hover:not(:disabled)": { borderColor: "var(--tsu-focus-border)" }
|
|
88
84
|
});
|
|
85
|
+
var triggerSizeClasses = {
|
|
86
|
+
xs: css({
|
|
87
|
+
height: "var(--tsu-comp-height-xs)",
|
|
88
|
+
padding: "0 36px 0 var(--tsu-comp-padding-x-xs)",
|
|
89
|
+
fontSize: "var(--tsu-comp-font-size-xs)",
|
|
90
|
+
borderRadius: "var(--tsu-radius-l1-xs)"
|
|
91
|
+
}),
|
|
92
|
+
sm: css({
|
|
93
|
+
height: "var(--tsu-comp-height-sm)",
|
|
94
|
+
padding: "0 36px 0 var(--tsu-comp-padding-x-sm)",
|
|
95
|
+
fontSize: "var(--tsu-comp-font-size-sm)",
|
|
96
|
+
borderRadius: "var(--tsu-radius-l1-sm)"
|
|
97
|
+
}),
|
|
98
|
+
md: css({
|
|
99
|
+
height: "var(--tsu-comp-height-md)",
|
|
100
|
+
padding: "0 36px 0 var(--tsu-comp-padding-x-md)",
|
|
101
|
+
fontSize: "var(--tsu-comp-font-size-md)",
|
|
102
|
+
borderRadius: "var(--tsu-radius-l1-md)"
|
|
103
|
+
}),
|
|
104
|
+
lg: css({
|
|
105
|
+
height: "var(--tsu-comp-height-lg)",
|
|
106
|
+
padding: "0 36px 0 var(--tsu-comp-padding-x-lg)",
|
|
107
|
+
fontSize: "var(--tsu-comp-font-size-lg)",
|
|
108
|
+
borderRadius: "var(--tsu-radius-l1-lg)"
|
|
109
|
+
}),
|
|
110
|
+
xl: css({
|
|
111
|
+
height: "var(--tsu-comp-height-xl)",
|
|
112
|
+
padding: "0 36px 0 var(--tsu-comp-padding-x-xl)",
|
|
113
|
+
fontSize: "var(--tsu-comp-font-size-xl)",
|
|
114
|
+
borderRadius: "var(--tsu-radius-l1-xl)"
|
|
115
|
+
})
|
|
116
|
+
};
|
|
89
117
|
var triggerPlaceholderClass = css({ color: "var(--tsu-neutral-11)" });
|
|
90
118
|
var triggerValueClass = css({ color: "var(--tsu-fg)" });
|
|
91
119
|
var calendarIconClass = css({
|
|
@@ -237,12 +265,17 @@ var mountWheel = (el, wheel) => {
|
|
|
237
265
|
el._wheel = wheel;
|
|
238
266
|
wheel.mount(el);
|
|
239
267
|
};
|
|
268
|
+
var read = (v) => typeof v === "function" ? v() : v;
|
|
240
269
|
var DateInput = (props = {}) => {
|
|
241
|
-
const [local] = splitProps(
|
|
270
|
+
const [local] = splitProps(mergeProps$1({
|
|
271
|
+
size: "md",
|
|
272
|
+
disabled: false
|
|
273
|
+
}, props), [
|
|
242
274
|
"value",
|
|
243
275
|
"onValueChange",
|
|
244
276
|
"placeholder",
|
|
245
277
|
"disabled",
|
|
278
|
+
"size",
|
|
246
279
|
"className"
|
|
247
280
|
]);
|
|
248
281
|
const open = createSignal(false);
|
|
@@ -298,7 +331,7 @@ var DateInput = (props = {}) => {
|
|
|
298
331
|
return () => {
|
|
299
332
|
const _el0 = _tmpl2.cloneNode(true);
|
|
300
333
|
insert(_el0, () => displayDate ? formatDateLabel(displayDate) : local.placeholder || "Select date");
|
|
301
|
-
setProp(_el0, "className", () => `${
|
|
334
|
+
setProp(_el0, "className", () => `${triggerBaseClass} ${triggerSizeClasses[read(local.size)]} ${displayDate ? triggerValueClass : triggerPlaceholderClass}`);
|
|
302
335
|
return _el0;
|
|
303
336
|
};
|
|
304
337
|
}, _el1);
|
package/dist/components/Input.js
CHANGED
|
@@ -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)",
|
package/docs/api.md
CHANGED
|
@@ -176,6 +176,7 @@ Mobile date picker built on the `DateWheel` utility.
|
|
|
176
176
|
| `onValueChange` | `(value) => void` | — | Called with the new ISO date. |
|
|
177
177
|
| `placeholder` | `string` | — | Placeholder text. |
|
|
178
178
|
| `disabled` | `boolean` | `false` | Disabled. |
|
|
179
|
+
| `size` | `string` | `md` | See size values. |
|
|
179
180
|
| `className` | `string` | — | Root class. |
|
|
180
181
|
|
|
181
182
|
### ColorPicker
|