@plastic-js/tsumiki 0.1.44 → 0.1.45
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.
|
@@ -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
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
|