framepexls-ui-lib 0.1.10 → 0.1.11
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/DateTimeField.js +14 -8
- package/dist/DateTimeField.mjs +14 -8
- package/dist/TimePopover.d.mts +0 -1
- package/dist/TimePopover.d.ts +0 -1
- package/dist/TimePopover.js +8 -0
- package/dist/TimePopover.mjs +8 -0
- package/dist/TimeRangeField.js +9 -4
- package/dist/TimeRangeField.mjs +9 -4
- package/package.json +1 -1
package/dist/DateTimeField.js
CHANGED
|
@@ -88,9 +88,18 @@ const withinBounds = (d, min, max) => {
|
|
|
88
88
|
}
|
|
89
89
|
return true;
|
|
90
90
|
};
|
|
91
|
+
const toAMPM = (hhmm) => {
|
|
92
|
+
const [hStr, mStr] = hhmm.split(":");
|
|
93
|
+
const H = parseInt(hStr != null ? hStr : "0", 10);
|
|
94
|
+
const M = parseInt(mStr != null ? mStr : "0", 10);
|
|
95
|
+
if (Number.isNaN(H) || Number.isNaN(M)) return hhmm;
|
|
96
|
+
const hr12 = H % 12 === 0 ? 12 : H % 12;
|
|
97
|
+
const mm = M < 10 ? `0${M}` : String(M);
|
|
98
|
+
return `${hr12}:${mm} ${H < 12 ? "AM" : "PM"}`;
|
|
99
|
+
};
|
|
91
100
|
const formatDisplayValue = (value, mode) => {
|
|
92
101
|
if (!value) return "";
|
|
93
|
-
if (mode === "time") return value;
|
|
102
|
+
if (mode === "time") return toAMPM(value);
|
|
94
103
|
const parsed = parseValueByType(value, mode);
|
|
95
104
|
if (!parsed) return value;
|
|
96
105
|
if (mode === "date") {
|
|
@@ -106,7 +115,8 @@ const formatDisplayValue = (value, mode) => {
|
|
|
106
115
|
month: "short",
|
|
107
116
|
year: "numeric",
|
|
108
117
|
hour: "2-digit",
|
|
109
|
-
minute: "2-digit"
|
|
118
|
+
minute: "2-digit",
|
|
119
|
+
hour12: true
|
|
110
120
|
});
|
|
111
121
|
} catch {
|
|
112
122
|
return fmtISODateTimeLocal(parsed);
|
|
@@ -258,7 +268,7 @@ function DateTimeField({
|
|
|
258
268
|
),
|
|
259
269
|
(type === "time" || type === "datetime-local") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2 border-t border-slate-100 px-3 py-2 text-sm dark:border-white/10", children: [
|
|
260
270
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
261
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
271
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
262
272
|
"button",
|
|
263
273
|
{
|
|
264
274
|
ref: timeBtnRef,
|
|
@@ -268,11 +278,7 @@ function DateTimeField({
|
|
|
268
278
|
"aria-haspopup": "dialog",
|
|
269
279
|
"aria-expanded": showTimePop,
|
|
270
280
|
title: "Editar hora",
|
|
271
|
-
children:
|
|
272
|
-
pad2(hh),
|
|
273
|
-
":",
|
|
274
|
-
pad2(mm)
|
|
275
|
-
]
|
|
281
|
+
children: toAMPM(`${pad2(hh)}:${pad2(mm)}`)
|
|
276
282
|
}
|
|
277
283
|
),
|
|
278
284
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
package/dist/DateTimeField.mjs
CHANGED
|
@@ -55,9 +55,18 @@ const withinBounds = (d, min, max) => {
|
|
|
55
55
|
}
|
|
56
56
|
return true;
|
|
57
57
|
};
|
|
58
|
+
const toAMPM = (hhmm) => {
|
|
59
|
+
const [hStr, mStr] = hhmm.split(":");
|
|
60
|
+
const H = parseInt(hStr != null ? hStr : "0", 10);
|
|
61
|
+
const M = parseInt(mStr != null ? mStr : "0", 10);
|
|
62
|
+
if (Number.isNaN(H) || Number.isNaN(M)) return hhmm;
|
|
63
|
+
const hr12 = H % 12 === 0 ? 12 : H % 12;
|
|
64
|
+
const mm = M < 10 ? `0${M}` : String(M);
|
|
65
|
+
return `${hr12}:${mm} ${H < 12 ? "AM" : "PM"}`;
|
|
66
|
+
};
|
|
58
67
|
const formatDisplayValue = (value, mode) => {
|
|
59
68
|
if (!value) return "";
|
|
60
|
-
if (mode === "time") return value;
|
|
69
|
+
if (mode === "time") return toAMPM(value);
|
|
61
70
|
const parsed = parseValueByType(value, mode);
|
|
62
71
|
if (!parsed) return value;
|
|
63
72
|
if (mode === "date") {
|
|
@@ -73,7 +82,8 @@ const formatDisplayValue = (value, mode) => {
|
|
|
73
82
|
month: "short",
|
|
74
83
|
year: "numeric",
|
|
75
84
|
hour: "2-digit",
|
|
76
|
-
minute: "2-digit"
|
|
85
|
+
minute: "2-digit",
|
|
86
|
+
hour12: true
|
|
77
87
|
});
|
|
78
88
|
} catch {
|
|
79
89
|
return fmtISODateTimeLocal(parsed);
|
|
@@ -225,7 +235,7 @@ function DateTimeField({
|
|
|
225
235
|
),
|
|
226
236
|
(type === "time" || type === "datetime-local") && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-slate-100 px-3 py-2 text-sm dark:border-white/10", children: [
|
|
227
237
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
228
|
-
/* @__PURE__ */
|
|
238
|
+
/* @__PURE__ */ jsx(
|
|
229
239
|
"button",
|
|
230
240
|
{
|
|
231
241
|
ref: timeBtnRef,
|
|
@@ -235,11 +245,7 @@ function DateTimeField({
|
|
|
235
245
|
"aria-haspopup": "dialog",
|
|
236
246
|
"aria-expanded": showTimePop,
|
|
237
247
|
title: "Editar hora",
|
|
238
|
-
children:
|
|
239
|
-
pad2(hh),
|
|
240
|
-
":",
|
|
241
|
-
pad2(mm)
|
|
242
|
-
]
|
|
248
|
+
children: toAMPM(`${pad2(hh)}:${pad2(mm)}`)
|
|
243
249
|
}
|
|
244
250
|
),
|
|
245
251
|
/* @__PURE__ */ jsx(
|
package/dist/TimePopover.d.mts
CHANGED
package/dist/TimePopover.d.ts
CHANGED
package/dist/TimePopover.js
CHANGED
|
@@ -129,6 +129,14 @@ function TimePopover({
|
|
|
129
129
|
className: "w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]",
|
|
130
130
|
children: [
|
|
131
131
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 text-sm font-medium text-slate-700 dark:text-slate-200", children: "Selecciona hora" }),
|
|
132
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 text-xs text-slate-500 dark:text-slate-300", children: [
|
|
133
|
+
"Vista: ",
|
|
134
|
+
(() => {
|
|
135
|
+
const hr12 = H % 12 === 0 ? 12 : H % 12;
|
|
136
|
+
const mm2 = M < 10 ? `0${M}` : String(M);
|
|
137
|
+
return `${hr12}:${mm2} ${H < 12 ? "AM" : "PM"}`;
|
|
138
|
+
})()
|
|
139
|
+
] }),
|
|
132
140
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
|
|
133
141
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-stretch gap-2", children: [
|
|
134
142
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
package/dist/TimePopover.mjs
CHANGED
|
@@ -94,6 +94,14 @@ function TimePopover({
|
|
|
94
94
|
className: "w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]",
|
|
95
95
|
children: [
|
|
96
96
|
/* @__PURE__ */ jsx("div", { className: "mb-2 text-sm font-medium text-slate-700 dark:text-slate-200", children: "Selecciona hora" }),
|
|
97
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-2 text-xs text-slate-500 dark:text-slate-300", children: [
|
|
98
|
+
"Vista: ",
|
|
99
|
+
(() => {
|
|
100
|
+
const hr12 = H % 12 === 0 ? 12 : H % 12;
|
|
101
|
+
const mm2 = M < 10 ? `0${M}` : String(M);
|
|
102
|
+
return `${hr12}:${mm2} ${H < 12 ? "AM" : "PM"}`;
|
|
103
|
+
})()
|
|
104
|
+
] }),
|
|
97
105
|
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
|
|
98
106
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-stretch gap-2", children: [
|
|
99
107
|
/* @__PURE__ */ jsx(
|
package/dist/TimeRangeField.js
CHANGED
|
@@ -78,10 +78,15 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
|
|
|
78
78
|
const el = portalId ? document.getElementById(portalId) : null;
|
|
79
79
|
setPortalRoot(el != null ? el : document.body);
|
|
80
80
|
}, [portal, portalId]);
|
|
81
|
+
const toAMPM = (hh, mm) => {
|
|
82
|
+
const hr12 = hh % 12 === 0 ? 12 : hh % 12;
|
|
83
|
+
const mm2 = mm < 10 ? `0${mm}` : String(mm);
|
|
84
|
+
return `${hr12}:${mm2} ${hh < 12 ? "AM" : "PM"}`;
|
|
85
|
+
};
|
|
81
86
|
const display = (0, import_react.useMemo)(() => {
|
|
82
87
|
var _a2;
|
|
83
|
-
const a = from ?
|
|
84
|
-
const b = to ?
|
|
88
|
+
const a = from ? toAMPM(from.hh, from.mm) : null;
|
|
89
|
+
const b = to ? toAMPM(to.hh, to.mm) : null;
|
|
85
90
|
if (!a && !b) return "";
|
|
86
91
|
if (a && b) return `${a} \u2013 ${b}`;
|
|
87
92
|
return (_a2 = a != null ? a : b) != null ? _a2 : "";
|
|
@@ -163,7 +168,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
|
|
|
163
168
|
className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 font-medium tracking-wide hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
|
|
164
169
|
onClick: () => setShowFromPop((v) => !v),
|
|
165
170
|
ref: fromBtnRef,
|
|
166
|
-
children: from ?
|
|
171
|
+
children: from ? toAMPM(from.hh, from.mm) : "--:--"
|
|
167
172
|
}
|
|
168
173
|
),
|
|
169
174
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -189,7 +194,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
|
|
|
189
194
|
className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 font-medium tracking-wide hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
|
|
190
195
|
onClick: () => setShowToPop((v) => !v),
|
|
191
196
|
ref: toBtnRef,
|
|
192
|
-
children: to ?
|
|
197
|
+
children: to ? toAMPM(to.hh, to.mm) : "--:--"
|
|
193
198
|
}
|
|
194
199
|
),
|
|
195
200
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
package/dist/TimeRangeField.mjs
CHANGED
|
@@ -45,10 +45,15 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
|
|
|
45
45
|
const el = portalId ? document.getElementById(portalId) : null;
|
|
46
46
|
setPortalRoot(el != null ? el : document.body);
|
|
47
47
|
}, [portal, portalId]);
|
|
48
|
+
const toAMPM = (hh, mm) => {
|
|
49
|
+
const hr12 = hh % 12 === 0 ? 12 : hh % 12;
|
|
50
|
+
const mm2 = mm < 10 ? `0${mm}` : String(mm);
|
|
51
|
+
return `${hr12}:${mm2} ${hh < 12 ? "AM" : "PM"}`;
|
|
52
|
+
};
|
|
48
53
|
const display = useMemo(() => {
|
|
49
54
|
var _a2;
|
|
50
|
-
const a = from ?
|
|
51
|
-
const b = to ?
|
|
55
|
+
const a = from ? toAMPM(from.hh, from.mm) : null;
|
|
56
|
+
const b = to ? toAMPM(to.hh, to.mm) : null;
|
|
52
57
|
if (!a && !b) return "";
|
|
53
58
|
if (a && b) return `${a} \u2013 ${b}`;
|
|
54
59
|
return (_a2 = a != null ? a : b) != null ? _a2 : "";
|
|
@@ -130,7 +135,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
|
|
|
130
135
|
className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 font-medium tracking-wide hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
|
|
131
136
|
onClick: () => setShowFromPop((v) => !v),
|
|
132
137
|
ref: fromBtnRef,
|
|
133
|
-
children: from ?
|
|
138
|
+
children: from ? toAMPM(from.hh, from.mm) : "--:--"
|
|
134
139
|
}
|
|
135
140
|
),
|
|
136
141
|
/* @__PURE__ */ jsx(
|
|
@@ -156,7 +161,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
|
|
|
156
161
|
className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 font-medium tracking-wide hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
|
|
157
162
|
onClick: () => setShowToPop((v) => !v),
|
|
158
163
|
ref: toBtnRef,
|
|
159
|
-
children: to ?
|
|
164
|
+
children: to ? toAMPM(to.hh, to.mm) : "--:--"
|
|
160
165
|
}
|
|
161
166
|
),
|
|
162
167
|
/* @__PURE__ */ jsx(
|