@base-framework/ui 1.0.265 → 1.0.266
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Div as
|
|
2
|
-
import { Atom as c, Component as C, Html as L, Dom as oe, base as
|
|
1
|
+
import { Div as n, H5 as J, P as m, I as p, Li as U, Span as i, Ul as V, Button as f, OnState as x, Label as R, H2 as v, Form as K, Header as I, Footer as A, A as q, H3 as Q, Checkbox as X, Input as w, Img as Z, Nav as ee, UseParent as H, Time as te, Dialog as se } from "@base-framework/atoms";
|
|
2
|
+
import { Atom as c, Component as C, Html as L, Dom as oe, base as ne, Data as $, Builder as Y, Jot as k, Events as le, DateTime as F } from "@base-framework/base";
|
|
3
3
|
import { P as S, b as re, R as ae } from "./range-calendar-BxLjYfrT.js";
|
|
4
4
|
import { C as ie, F as ce, a as y } from "./veil-tVDPinrr.js";
|
|
5
5
|
import { B as h, I as g } from "./buttons-Cm9etaEG.js";
|
|
@@ -32,14 +32,14 @@ const M = {
|
|
|
32
32
|
bgColor: "bg-muted/10",
|
|
33
33
|
iconColor: "text-muted-foreground"
|
|
34
34
|
}
|
|
35
|
-
}, fe = (e, t) =>
|
|
35
|
+
}, fe = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
|
|
36
36
|
p({ html: e })
|
|
37
37
|
]), me = (e) => J({ class: "font-semibold" }, e), pe = (e) => m({ class: "text-sm text-muted-foreground" }, e), kt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
|
|
38
|
-
const { borderColor:
|
|
39
|
-
return
|
|
38
|
+
const { borderColor: l, bgColor: r, iconColor: a } = M[o] || M.default;
|
|
39
|
+
return n({ class: `flex items-start p-4 border rounded-lg ${r} ${l}` }, [
|
|
40
40
|
// Icon and content
|
|
41
41
|
s && fe(s, a),
|
|
42
|
-
|
|
42
|
+
n({ class: "flex flex-col" }, [
|
|
43
43
|
me(e),
|
|
44
44
|
pe(t)
|
|
45
45
|
])
|
|
@@ -66,7 +66,7 @@ class ge extends C {
|
|
|
66
66
|
L.removeElement(t);
|
|
67
67
|
return;
|
|
68
68
|
}
|
|
69
|
-
oe.addClass(t, s),
|
|
69
|
+
oe.addClass(t, s), ne.on("animationend", t, (o) => L.removeElement(t));
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
const be = (e) => i({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), xe = (e) => i({ class: "flex w-4 h-4", html: e }), we = (e) => i({ class: "flex-auto" }, e), ye = (e, t) => U({
|
|
@@ -78,8 +78,8 @@ const be = (e) => i({ class: "ml-auto text-xs tracking-widest opacity-60" }, e),
|
|
|
78
78
|
e.shortcut && be(e.shortcut)
|
|
79
79
|
]), ve = (e, t) => V({ class: "grid gap-2" }, [
|
|
80
80
|
e.map((s) => ye(s, t))
|
|
81
|
-
]), Ce = (e) =>
|
|
82
|
-
|
|
81
|
+
]), Ce = (e) => n({ class: "w-full z-10" }, [
|
|
82
|
+
n({
|
|
83
83
|
class: "max-h-60 border rounded-md overflow-y-auto p-1 grid gap-2 divide-y divide-border",
|
|
84
84
|
for: ["groups", (t) => ve(t, e)]
|
|
85
85
|
})
|
|
@@ -92,7 +92,7 @@ const be = (e) => i({ class: "ml-auto text-xs tracking-widest opacity-60" }, e),
|
|
|
92
92
|
}, [
|
|
93
93
|
e && i(e),
|
|
94
94
|
t && p({ html: t })
|
|
95
|
-
]), Se = ({ onSelect: e }) =>
|
|
95
|
+
]), Se = ({ onSelect: e }) => n([
|
|
96
96
|
x(
|
|
97
97
|
"open",
|
|
98
98
|
(t, s, o) => t ? new S({
|
|
@@ -157,7 +157,7 @@ class St extends C {
|
|
|
157
157
|
* @returns {object}
|
|
158
158
|
*/
|
|
159
159
|
render() {
|
|
160
|
-
return
|
|
160
|
+
return n({ class: "relative" }, [
|
|
161
161
|
ke({
|
|
162
162
|
label: this.label,
|
|
163
163
|
icon: this.icon,
|
|
@@ -167,15 +167,15 @@ class St extends C {
|
|
|
167
167
|
]);
|
|
168
168
|
}
|
|
169
169
|
}
|
|
170
|
-
const De = c((e, t) =>
|
|
170
|
+
const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), Ie = c((e, t) => R({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), $e = c((e, t) => m({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Te = c((e, t) => m({ ...e, class: "text-sm text-destructive" }, t)), Dt = c((e, t = []) => ie({ class: "space-y-0", margin: "m-0", padding: "p-0" }, [
|
|
171
171
|
e.title && v({ class: "text-lg font-semibold py-4 px-6" }, e.title),
|
|
172
172
|
e.description && m({ class: "text-sm text-muted-foreground pb-4 px-6 max-w-[700px]" }, e.description),
|
|
173
173
|
...t
|
|
174
174
|
])), It = c((e, t = []) => ce({ label: e.label, description: e.description, class: "py-4 px-6", border: e.border }, [
|
|
175
|
-
|
|
175
|
+
n({ class: "flex flex-col space-y-6" }, t)
|
|
176
176
|
])), $t = c((e, t = []) => {
|
|
177
177
|
const s = e.border ? "border-t" : "";
|
|
178
|
-
return
|
|
178
|
+
return n({ ...e, class: `flex flex-col pb-4 px-6 space-y-4 ${s} ${e.class || ""}` }, t);
|
|
179
179
|
}), Be = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", _ = (e, t, s) => e.map((o) => !o || (o.children && o.children.length > 0 && (o.children = _(o.children, t, s)), !o.required) ? o : Be(o) ? {
|
|
180
180
|
...o,
|
|
181
181
|
aria: {
|
|
@@ -184,15 +184,15 @@ const De = c((e, t) => l({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
|
|
|
184
184
|
invalid: s,
|
|
185
185
|
input: t
|
|
186
186
|
} : o), Fe = c((e, t) => {
|
|
187
|
-
const
|
|
187
|
+
const l = _(t, (r) => {
|
|
188
188
|
r.target.checkValidity() && e.setError(null);
|
|
189
189
|
}, (r) => {
|
|
190
190
|
e.setError(r.target.validationMessage);
|
|
191
191
|
});
|
|
192
|
-
return
|
|
192
|
+
return n({
|
|
193
193
|
...e,
|
|
194
194
|
class: "w-full"
|
|
195
|
-
},
|
|
195
|
+
}, l);
|
|
196
196
|
}), Tt = y(
|
|
197
197
|
{
|
|
198
198
|
/**
|
|
@@ -214,20 +214,20 @@ const De = c((e, t) => l({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
|
|
|
214
214
|
* @returns {object}
|
|
215
215
|
*/
|
|
216
216
|
render() {
|
|
217
|
-
const e = this.name, t = this.getId(`${e}`), { label: s, description: o } = this,
|
|
217
|
+
const e = this.name, t = this.getId(`${e}`), { label: s, description: o } = this, l = (r) => {
|
|
218
218
|
this.state.error = r, this.state.hasError = !!r;
|
|
219
219
|
};
|
|
220
|
-
return
|
|
220
|
+
return n({ class: "flex flex-auto space-y-4" }, [
|
|
221
221
|
De([
|
|
222
222
|
Ie({ htmlFor: t }, s),
|
|
223
223
|
Fe({
|
|
224
224
|
id: t,
|
|
225
225
|
name: e,
|
|
226
226
|
value: this.state.value,
|
|
227
|
-
setError:
|
|
227
|
+
setError: l
|
|
228
228
|
}, this.children),
|
|
229
229
|
o && $e({ id: this.getId("description") }, o),
|
|
230
|
-
|
|
230
|
+
n({ onState: ["error", (r) => r && Te(r)] })
|
|
231
231
|
])
|
|
232
232
|
]);
|
|
233
233
|
}
|
|
@@ -236,16 +236,16 @@ const De = c((e, t) => l({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
|
|
|
236
236
|
e.target.checkValidity() && (e.preventDefault(), s && s(e, t));
|
|
237
237
|
}, W = c(
|
|
238
238
|
(e, t) => K({ ...e, submit: (s, o) => Ae(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
|
|
239
|
-
), Bt = c((e, t) =>
|
|
239
|
+
), Bt = c((e, t) => n({ ...e, class: `space-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), Ft = c((e, t = []) => n({ class: "space-y-3 py-4" }, [
|
|
240
240
|
e.title && v({ class: "font-semibold" }, e.title),
|
|
241
241
|
...t
|
|
242
|
-
])), At = (e, t) =>
|
|
242
|
+
])), At = (e, t) => n({ class: "flex justify-between" }, [
|
|
243
243
|
i({ class: "text-muted-foreground" }, e),
|
|
244
244
|
i(t)
|
|
245
|
-
]), Lt = (e, t) =>
|
|
245
|
+
]), Lt = (e, t) => n({ class: "flex" }, [
|
|
246
246
|
i({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
|
|
247
247
|
i(t)
|
|
248
|
-
]), Le = ({ title: e, description: t, back: s, icon: o, options:
|
|
248
|
+
]), Le = ({ title: e, description: t, back: s, icon: o, options: l = [] }) => I({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
|
|
249
249
|
/**
|
|
250
250
|
* Back Button
|
|
251
251
|
*/
|
|
@@ -253,18 +253,18 @@ const De = c((e, t) => l({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
|
|
|
253
253
|
/**
|
|
254
254
|
* Icon
|
|
255
255
|
*/
|
|
256
|
-
o &&
|
|
256
|
+
o && n({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [g(o)]),
|
|
257
257
|
/**
|
|
258
258
|
* Title and Description
|
|
259
259
|
*/
|
|
260
|
-
|
|
261
|
-
|
|
260
|
+
n({ class: "flex flex-auto flex-row justify-between w-full ml-2 gap-2" }, [
|
|
261
|
+
n({ class: "flex flex-auto flex-col" }, [
|
|
262
262
|
v({ class: "text-lg font-semibold m-0 truncate" }, e),
|
|
263
|
-
t &&
|
|
263
|
+
t && n({ class: "text-sm text-muted-foreground truncate" }, t)
|
|
264
264
|
]),
|
|
265
|
-
...
|
|
265
|
+
...l
|
|
266
266
|
])
|
|
267
|
-
]), Pe = c((e, t) =>
|
|
267
|
+
]), Pe = c((e, t) => n({
|
|
268
268
|
popover: "manual",
|
|
269
269
|
class: `modal m-auto top-0 right-0 bottom-0 left-0 fixed z-20 grid w-full h-full max-h-screen gap-2 lg:border bg-background text-foreground shadow-xl break-words p-0 ${e.class}`,
|
|
270
270
|
click: (s, o) => {
|
|
@@ -273,7 +273,7 @@ const De = c((e, t) => l({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
|
|
|
273
273
|
}, [
|
|
274
274
|
W({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col space-y-4", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
|
|
275
275
|
Le(e),
|
|
276
|
-
|
|
276
|
+
n({ class: "modal-body flex flex-grow flex-col overflow-y-auto py-0 px-6 z-0" }, t),
|
|
277
277
|
A({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
|
|
278
278
|
])
|
|
279
279
|
])), Me = (e) => Y.render(e, app.root);
|
|
@@ -300,9 +300,9 @@ class Pt extends C {
|
|
|
300
300
|
description: o,
|
|
301
301
|
options: this.headerOptions(),
|
|
302
302
|
buttons: this.getButtons(),
|
|
303
|
-
onSubmit: (
|
|
303
|
+
onSubmit: (l) => {
|
|
304
304
|
let r = !0;
|
|
305
|
-
this.onSubmit && (r = this.onSubmit(
|
|
305
|
+
this.onSubmit && (r = this.onSubmit(l)), r !== !1 && this.destroy();
|
|
306
306
|
},
|
|
307
307
|
icon: this.icon,
|
|
308
308
|
back: this.back ?? !1,
|
|
@@ -469,7 +469,7 @@ const N = {
|
|
|
469
469
|
class: `pullRightIn bg-popover text-popover-foreground relative flex flex-auto flex-col justify-start shadow-lg pointer-events-auto p-4 border rounded-md min-w-[340px] max-w-[450px] mt-4 ${t}`,
|
|
470
470
|
href: e,
|
|
471
471
|
role: "alert"
|
|
472
|
-
}, s)), Ee = c(({ close: e, class: t }, s) =>
|
|
472
|
+
}, s)), Ee = c(({ close: e, class: t }, s) => n({
|
|
473
473
|
class: `pullRightIn bg-popover text-popover-foreground relative flex flex-auto flex-col justify-start shadow-lg pointer-events-auto p-4 border rounded-md min-w-[340px] max-w-[450px] mt-4 ${t}`,
|
|
474
474
|
click: () => e(),
|
|
475
475
|
role: "alert"
|
|
@@ -497,9 +497,9 @@ class je extends ge {
|
|
|
497
497
|
* @returns {object}
|
|
498
498
|
*/
|
|
499
499
|
render() {
|
|
500
|
-
const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(),
|
|
501
|
-
return
|
|
502
|
-
href:
|
|
500
|
+
const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), l = this.href || null, r = this.getChildren(o);
|
|
501
|
+
return l ? ze({
|
|
502
|
+
href: l,
|
|
503
503
|
class: `${t} ${s}`
|
|
504
504
|
}, r) : Ee({
|
|
505
505
|
close: this.close.bind(this),
|
|
@@ -531,7 +531,7 @@ class je extends ge {
|
|
|
531
531
|
*/
|
|
532
532
|
getButtons() {
|
|
533
533
|
return [
|
|
534
|
-
|
|
534
|
+
n({ class: "flex flex-row mt-6 gap-2" }, [
|
|
535
535
|
this.secondary && h({ variant: "outline", click: () => this.secondaryAction && this.secondaryAction() }, this.secondary),
|
|
536
536
|
this.primary && h({ click: () => this.primaryAction && this.primaryAction() }, this.primary)
|
|
537
537
|
])
|
|
@@ -545,10 +545,10 @@ class je extends ge {
|
|
|
545
545
|
*/
|
|
546
546
|
getChildren(t) {
|
|
547
547
|
return [
|
|
548
|
-
|
|
548
|
+
n({ class: "flex items-start" }, [
|
|
549
549
|
this.icon && p({ class: `mr-4 ${t}`, html: this.icon }),
|
|
550
|
-
|
|
551
|
-
|
|
550
|
+
n({ class: "flex flex-auto flex-col" }, [
|
|
551
|
+
n({ class: "flex flex-auto flex-row items-center w-full pr-12" }, [
|
|
552
552
|
this.title && Ne(this.title)
|
|
553
553
|
]),
|
|
554
554
|
m({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
|
|
@@ -581,7 +581,7 @@ class Mt extends C {
|
|
|
581
581
|
* @returns {object}
|
|
582
582
|
*/
|
|
583
583
|
render() {
|
|
584
|
-
return
|
|
584
|
+
return n({ class: "notification-container pointer-events-none inset-auto bg-transparent backdrop:bg-transparent overflow-visible fixed bottom-[80px] right-0 z-50 p-5", popover: "manual" }, [
|
|
585
585
|
new ue({
|
|
586
586
|
cache: "list",
|
|
587
587
|
key: "id",
|
|
@@ -613,8 +613,8 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
613
613
|
class: 'text-sm gap-1 font-medium leading-none disabled:cursor-not-allowed disabled:opacity-70 flex flex-col items-center justify-between rounded-md border-2 bg-popover p-4 hover:bg-accent hover:text-accent-foreground data-[state="active"]:border-primary [&:has([data-state="active"])]:border-primary',
|
|
614
614
|
onState: ["method", { active: e }],
|
|
615
615
|
dataSet: ["method", ["state", e, "active"]],
|
|
616
|
-
click: (o, { state:
|
|
617
|
-
|
|
616
|
+
click: (o, { state: l }) => {
|
|
617
|
+
l.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Ue(e);
|
|
618
618
|
}
|
|
619
619
|
}, [
|
|
620
620
|
g(s),
|
|
@@ -636,8 +636,8 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
636
636
|
* @returns {object}
|
|
637
637
|
*/
|
|
638
638
|
render() {
|
|
639
|
-
return
|
|
640
|
-
|
|
639
|
+
return n({ class: "flex flex-auto flex-col" }, [
|
|
640
|
+
n({ class: "grid grid-cols-3 gap-4" }, [
|
|
641
641
|
T({ label: "System", value: "system", icon: u.adjustments.horizontal }),
|
|
642
642
|
T({ label: "Light", value: "light", icon: u.sun }),
|
|
643
643
|
T({ label: "Dark", value: "dark", icon: u.moon })
|
|
@@ -717,9 +717,9 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
717
717
|
OFFLINE: "bg-gray-500",
|
|
718
718
|
BUSY: "bg-red-500",
|
|
719
719
|
AWAY: "bg-yellow-500"
|
|
720
|
-
}, Ve = (e = "") => (e = e.toUpperCase(), b[e] || b.OFFLINE), Et = (e) =>
|
|
720
|
+
}, Ve = (e = "") => (e = e.toUpperCase(), b[e] || b.OFFLINE), Et = (e) => n({
|
|
721
721
|
class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Ve(e)}`
|
|
722
|
-
}), jt = ({ propName: e = "status" } = {}) =>
|
|
722
|
+
}), jt = ({ propName: e = "status" } = {}) => n({
|
|
723
723
|
class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
|
|
724
724
|
onSet: [e, {
|
|
725
725
|
[b.ONLINE]: D.ONLINE,
|
|
@@ -747,7 +747,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
747
747
|
*/
|
|
748
748
|
openFileBrowse() {
|
|
749
749
|
const e = this.input;
|
|
750
|
-
e && (e.value = "",
|
|
750
|
+
e && (e.value = "", le.trigger("click", e));
|
|
751
751
|
},
|
|
752
752
|
/**
|
|
753
753
|
* Get the URL for the uploaded file.
|
|
@@ -765,7 +765,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
765
765
|
*/
|
|
766
766
|
render() {
|
|
767
767
|
const e = "logo-upload", t = this.onChange || null;
|
|
768
|
-
return
|
|
768
|
+
return n({ class: "flex-none items-center" }, [
|
|
769
769
|
w({
|
|
770
770
|
id: e,
|
|
771
771
|
cache: "input",
|
|
@@ -773,12 +773,12 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
773
773
|
accept: "image/*",
|
|
774
774
|
class: "hidden",
|
|
775
775
|
change: (s) => {
|
|
776
|
-
var
|
|
777
|
-
const o = (
|
|
776
|
+
var l;
|
|
777
|
+
const o = (l = s.target.files) == null ? void 0 : l[0];
|
|
778
778
|
o && t && (this.state.loaded = !1, t(o, this.parent), this.src = this.getFileUrl(o), this.state.loaded = !0);
|
|
779
779
|
}
|
|
780
780
|
}),
|
|
781
|
-
|
|
781
|
+
n({
|
|
782
782
|
class: "relative w-32 h-32 rounded-full border flex items-center justify-center cursor-pointer hover:bg-muted transition-colors duration-150 overflow-hidden group",
|
|
783
783
|
click: (s) => {
|
|
784
784
|
s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
|
|
@@ -795,7 +795,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
795
795
|
class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
|
|
796
796
|
}, [
|
|
797
797
|
g(u.upload),
|
|
798
|
-
|
|
798
|
+
n("Upload logo")
|
|
799
799
|
])
|
|
800
800
|
)
|
|
801
801
|
])
|
|
@@ -814,7 +814,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
814
814
|
class: "mx-3 text-muted-foreground",
|
|
815
815
|
"aria-hidden": !0,
|
|
816
816
|
size: "xs"
|
|
817
|
-
}, u.chevron.single.right), He = (e) =>
|
|
817
|
+
}, u.chevron.single.right), He = (e) => n({ class: "flex items-center" }, [
|
|
818
818
|
e.href ? Re(e.href, e.label) : i(e.label),
|
|
819
819
|
e.separator && qe()
|
|
820
820
|
]), Ut = k(
|
|
@@ -843,7 +843,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
843
843
|
class: "flex items-center space-x-1 text-sm"
|
|
844
844
|
},
|
|
845
845
|
[
|
|
846
|
-
|
|
846
|
+
n({
|
|
847
847
|
role: "list",
|
|
848
848
|
class: "flex items-center",
|
|
849
849
|
for: ["items", (t, s) => He({
|
|
@@ -865,15 +865,15 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
865
865
|
"2xl": "h-16 w-16",
|
|
866
866
|
"3xl": "h-24 w-24",
|
|
867
867
|
default: "h-4 w-4"
|
|
868
|
-
}, Ye = (e) => E[e] || E.default, _e = ({ index: e, size: t }) =>
|
|
868
|
+
}, Ye = (e) => E[e] || E.default, _e = ({ index: e, size: t }) => n({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
|
|
869
869
|
i({
|
|
870
870
|
class: "block w-full h-full rounded-full transition-colors",
|
|
871
871
|
onSet: ["activeIndex", {
|
|
872
872
|
"bg-primary": e,
|
|
873
873
|
"shadow-md": e
|
|
874
874
|
}],
|
|
875
|
-
click: (s, { data: o, onClick:
|
|
876
|
-
o.activeIndex = e,
|
|
875
|
+
click: (s, { data: o, onClick: l }) => {
|
|
876
|
+
o.activeIndex = e, l && l(e);
|
|
877
877
|
}
|
|
878
878
|
})
|
|
879
879
|
]), We = (e, t) => Array.from({ length: e }, (s, o) => _e({
|
|
@@ -902,10 +902,10 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
902
902
|
*/
|
|
903
903
|
render() {
|
|
904
904
|
const e = this.gap || "gap-2", t = Ye(this.size || "sm"), s = We(this.data.count, t);
|
|
905
|
-
return
|
|
905
|
+
return n(
|
|
906
906
|
{ class: "flex justify-center items-center py-2" },
|
|
907
907
|
[
|
|
908
|
-
|
|
908
|
+
n({ class: `flex ${e}` }, s)
|
|
909
909
|
]
|
|
910
910
|
);
|
|
911
911
|
}
|
|
@@ -927,15 +927,15 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
927
927
|
}, [
|
|
928
928
|
e.icon && i({ class: "mr-2 flex items-baseline" }, [g({ size: "xs" }, e.icon)]),
|
|
929
929
|
i({ class: "text-base font-normal" }, e.label)
|
|
930
|
-
]), Ke = (e, t) =>
|
|
930
|
+
]), Ke = (e, t) => n({ class: "w-full border rounded-md" }, [
|
|
931
931
|
V({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Je(s, e, t)] })
|
|
932
|
-
]), Qe = ({ onSelect: e, state: t }) =>
|
|
932
|
+
]), Qe = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
|
|
933
933
|
x(
|
|
934
934
|
"open",
|
|
935
|
-
(s, o,
|
|
935
|
+
(s, o, l) => s ? new S({
|
|
936
936
|
cache: "dropdown",
|
|
937
|
-
parent:
|
|
938
|
-
button:
|
|
937
|
+
parent: l,
|
|
938
|
+
button: l.button
|
|
939
939
|
}, [
|
|
940
940
|
Ke(e, t)
|
|
941
941
|
]) : null
|
|
@@ -1019,7 +1019,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
1019
1019
|
*/
|
|
1020
1020
|
render() {
|
|
1021
1021
|
const e = this.class || "", t = this.maxWidth || "max-w-[250px]", s = this.width || "w-full";
|
|
1022
|
-
return
|
|
1022
|
+
return n({ class: `relative ${s} flex flex-auto flex-col ${t} ${e}` }, [
|
|
1023
1023
|
// @ts-ignore
|
|
1024
1024
|
Ge({ toggleDropdown: this.toggleDropdown.bind(this) }),
|
|
1025
1025
|
Qe({
|
|
@@ -1056,8 +1056,8 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
1056
1056
|
icon: u.circlePlus,
|
|
1057
1057
|
click: e,
|
|
1058
1058
|
ariaLabel: "Increment"
|
|
1059
|
-
}), et = ({ bind: e, min: t, max: s, readonly: o = !1 }) => H(({ state:
|
|
1060
|
-
value: ["[[count]]",
|
|
1059
|
+
}), et = ({ bind: e, min: t, max: s, readonly: o = !1 }) => H(({ state: l }) => w({
|
|
1060
|
+
value: ["[[count]]", l],
|
|
1061
1061
|
bind: e,
|
|
1062
1062
|
blur: (r, { state: a }) => {
|
|
1063
1063
|
let d = parseInt(r.target.value, 10);
|
|
@@ -1091,7 +1091,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
1091
1091
|
*/
|
|
1092
1092
|
render() {
|
|
1093
1093
|
const e = this.class ?? "";
|
|
1094
|
-
return
|
|
1094
|
+
return n({ class: `flex flex-auto items-center justify-between space-x-4 p-4 ${e}` }, [
|
|
1095
1095
|
Xe({ click: () => this.state.decrement("count") }),
|
|
1096
1096
|
et({
|
|
1097
1097
|
bind: this.bind,
|
|
@@ -1119,14 +1119,14 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
1119
1119
|
p({ html: u.calendar.days })
|
|
1120
1120
|
]), ot = ({ handleDateSelect: e, blockPriorDates: t }) => x(
|
|
1121
1121
|
"open",
|
|
1122
|
-
(s, o,
|
|
1122
|
+
(s, o, l) => s ? new S({
|
|
1123
1123
|
cache: "dropdown",
|
|
1124
|
-
parent:
|
|
1125
|
-
button:
|
|
1124
|
+
parent: l,
|
|
1125
|
+
button: l.panel,
|
|
1126
1126
|
size: "fit"
|
|
1127
1127
|
}, [
|
|
1128
1128
|
new re({
|
|
1129
|
-
selectedDate:
|
|
1129
|
+
selectedDate: l.state.selectedDate,
|
|
1130
1130
|
selectedCallBack: e,
|
|
1131
1131
|
blockPriorDates: t
|
|
1132
1132
|
})
|
|
@@ -1162,7 +1162,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
1162
1162
|
const e = (s, { state: o }) => o.toggle("open"), t = (s) => {
|
|
1163
1163
|
this.state.selectedDate = s, this.state.open = !1, this.input.value = s, typeof this.onChange == "function" && this.onChange(s);
|
|
1164
1164
|
};
|
|
1165
|
-
return
|
|
1165
|
+
return n({ class: "relative w-full max-w-[320px]" }, [
|
|
1166
1166
|
st({
|
|
1167
1167
|
toggleOpen: e,
|
|
1168
1168
|
bind: this.bind,
|
|
@@ -1175,16 +1175,16 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
1175
1175
|
]);
|
|
1176
1176
|
}
|
|
1177
1177
|
}
|
|
1178
|
-
),
|
|
1178
|
+
), nt = ({ bind: e, required: t }) => w({
|
|
1179
1179
|
cache: "input",
|
|
1180
1180
|
class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
|
|
1181
1181
|
bind: e,
|
|
1182
1182
|
required: t
|
|
1183
|
-
}),
|
|
1183
|
+
}), lt = ({ bind: e, required: t, toggleOpen: s }) => f({
|
|
1184
1184
|
class: "relative flex items-center gap-2 w-full justify-between border bg-input hover:bg-muted rounded-md h-10 px-4 py-2",
|
|
1185
1185
|
click: s
|
|
1186
1186
|
}, [
|
|
1187
|
-
|
|
1187
|
+
nt({ bind: e, required: t }),
|
|
1188
1188
|
H(({ state: o }) => [
|
|
1189
1189
|
i(P.date(["[[start]]", o], "Start Date")),
|
|
1190
1190
|
i(" - "),
|
|
@@ -1193,15 +1193,15 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
1193
1193
|
p({ html: u.calendar.days })
|
|
1194
1194
|
]), rt = ({ handleDateSelect: e, blockPriorDates: t }) => x(
|
|
1195
1195
|
"open",
|
|
1196
|
-
(s, o,
|
|
1196
|
+
(s, o, l) => s ? new S({
|
|
1197
1197
|
cache: "dropdown",
|
|
1198
|
-
parent:
|
|
1199
|
-
button:
|
|
1198
|
+
parent: l,
|
|
1199
|
+
button: l.panel,
|
|
1200
1200
|
size: "xl"
|
|
1201
1201
|
}, [
|
|
1202
1202
|
new ae({
|
|
1203
|
-
startDate:
|
|
1204
|
-
endDate:
|
|
1203
|
+
startDate: l.state.start,
|
|
1204
|
+
endDate: l.state.end,
|
|
1205
1205
|
onRangeSelect: e,
|
|
1206
1206
|
blockPriorDates: t
|
|
1207
1207
|
})
|
|
@@ -1241,8 +1241,8 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
1241
1241
|
const e = (s, { state: o }) => o.toggle("open"), t = (s, o) => {
|
|
1242
1242
|
this.state.start = s, this.state.end = o, this.state.open = !1, this.input.value = `${s}-${o}`, typeof this.onChange == "function" && this.onChange({ start: s, end: o }, this.parent);
|
|
1243
1243
|
};
|
|
1244
|
-
return
|
|
1245
|
-
|
|
1244
|
+
return n({ class: "relative w-full max-w-[320px]" }, [
|
|
1245
|
+
lt({
|
|
1246
1246
|
toggleOpen: e,
|
|
1247
1247
|
bind: this.bind,
|
|
1248
1248
|
required: this.required
|
|
@@ -1258,8 +1258,8 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
|
|
|
1258
1258
|
new he({
|
|
1259
1259
|
dateTime: e,
|
|
1260
1260
|
filter: s || ((o) => {
|
|
1261
|
-
const
|
|
1262
|
-
return F.getTimeFrame(
|
|
1261
|
+
const l = F.getLocalTime(o, !0, !1, t);
|
|
1262
|
+
return F.getTimeFrame(l);
|
|
1263
1263
|
})
|
|
1264
1264
|
})
|
|
1265
1265
|
]);
|
|
@@ -1286,11 +1286,11 @@ function it({ bind: e, required: t, toggleOpen: s }) {
|
|
|
1286
1286
|
]
|
|
1287
1287
|
);
|
|
1288
1288
|
}
|
|
1289
|
-
function B({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad:
|
|
1290
|
-
return
|
|
1289
|
+
function B({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: l = !1 }) {
|
|
1290
|
+
return n(
|
|
1291
1291
|
{ class: "flex flex-col max-h-[200px] overflow-y-auto" },
|
|
1292
1292
|
e.map((r) => {
|
|
1293
|
-
let a =
|
|
1293
|
+
let a = l ? r.toString().padStart(2, "0") : r.toString();
|
|
1294
1294
|
return f({
|
|
1295
1295
|
text: a,
|
|
1296
1296
|
class: "hover:bg-muted/50 rounded-md px-2 py-1",
|
|
@@ -1311,15 +1311,15 @@ function ct({ handleTimeSelect: e }) {
|
|
|
1311
1311
|
size: "fit"
|
|
1312
1312
|
},
|
|
1313
1313
|
[
|
|
1314
|
-
|
|
1314
|
+
n(
|
|
1315
1315
|
{ class: "flex flex-auto flex-col border rounded-md shadow-md" },
|
|
1316
1316
|
[
|
|
1317
|
-
|
|
1317
|
+
n(
|
|
1318
1318
|
{ class: "grid grid-cols-3 gap-2 p-4 text-center max-h-[220px] min-w-[240px]" },
|
|
1319
1319
|
[
|
|
1320
1320
|
// Hours column
|
|
1321
1321
|
B({
|
|
1322
|
-
items: Array.from({ length: 12 }, (
|
|
1322
|
+
items: Array.from({ length: 12 }, (l, r) => r + 1),
|
|
1323
1323
|
handleTimeSelect: e,
|
|
1324
1324
|
state: o.state,
|
|
1325
1325
|
stateValue: "hour",
|
|
@@ -1327,7 +1327,7 @@ function ct({ handleTimeSelect: e }) {
|
|
|
1327
1327
|
}),
|
|
1328
1328
|
// Minutes column
|
|
1329
1329
|
B({
|
|
1330
|
-
items: Array.from({ length: 60 }, (
|
|
1330
|
+
items: Array.from({ length: 60 }, (l, r) => r),
|
|
1331
1331
|
handleTimeSelect: e,
|
|
1332
1332
|
state: o.state,
|
|
1333
1333
|
stateValue: "minute",
|
|
@@ -1354,7 +1354,7 @@ function j(e) {
|
|
|
1354
1354
|
const t = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)?$/i, s = e.match(t);
|
|
1355
1355
|
if (!s)
|
|
1356
1356
|
return { hour: null, minute: null, meridian: null };
|
|
1357
|
-
let [, o,
|
|
1357
|
+
let [, o, l, , r] = s, a = parseInt(o, 10), d = parseInt(l, 10);
|
|
1358
1358
|
return a < 0 || a > 23 || d < 0 || d > 59 ? { hour: null, minute: null, meridian: null } : (r ? (r = r.toUpperCase(), r === "PM" && a < 12 ? a += 12 : r === "AM" && a === 12 && (a = 12)) : a === 0 ? (r = "AM", a = 12) : a < 12 ? r = "AM" : a === 12 ? r = "PM" : (r = "PM", a -= 12), {
|
|
1359
1359
|
hour: a.toString().padStart(2, "0"),
|
|
1360
1360
|
minute: d.toString().padStart(2, "0"),
|
|
@@ -1400,13 +1400,13 @@ const Wt = y(
|
|
|
1400
1400
|
* @returns {object}
|
|
1401
1401
|
*/
|
|
1402
1402
|
render() {
|
|
1403
|
-
const e = (s, { state: o }) => o.toggle("open"), t = ({ hour: s, minute: o, meridian:
|
|
1404
|
-
if (s && (this.state.hour = s), o && (this.state.minute = o),
|
|
1403
|
+
const e = (s, { state: o }) => o.toggle("open"), t = ({ hour: s, minute: o, meridian: l }) => {
|
|
1404
|
+
if (s && (this.state.hour = s), o && (this.state.minute = o), l && (this.state.meridian = l), this.state.hour && this.state.minute && this.state.meridian) {
|
|
1405
1405
|
const r = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
|
|
1406
1406
|
this.state.selectedTime = r, this.state.open = !1, this.input.value = r, typeof this.change == "function" && this.change(r);
|
|
1407
1407
|
}
|
|
1408
1408
|
};
|
|
1409
|
-
return
|
|
1409
|
+
return n(
|
|
1410
1410
|
{ class: "relative w-full max-w-[320px]" },
|
|
1411
1411
|
[
|
|
1412
1412
|
it({
|
|
@@ -1421,7 +1421,7 @@ const Wt = y(
|
|
|
1421
1421
|
);
|
|
1422
1422
|
}
|
|
1423
1423
|
}
|
|
1424
|
-
), dt = (e, t) =>
|
|
1424
|
+
), dt = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
|
|
1425
1425
|
g({ size: "lg" }, e)
|
|
1426
1426
|
]), ut = ({ title: e }) => I({ class: "flex flex-auto items-center" }, [
|
|
1427
1427
|
v({ class: "text-lg font-semibold" }, e)
|
|
@@ -1434,14 +1434,14 @@ const Wt = y(
|
|
|
1434
1434
|
aria: { expanded: ["open"] }
|
|
1435
1435
|
},
|
|
1436
1436
|
[
|
|
1437
|
-
|
|
1437
|
+
n({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
|
|
1438
1438
|
// Icon and content
|
|
1439
1439
|
e.icon && dt(e.icon, e.iconColor),
|
|
1440
|
-
|
|
1441
|
-
|
|
1440
|
+
n({ class: "flex flex-auto flex-col gap-4" }, [
|
|
1441
|
+
n({ class: "flex flex-auto flex-col space-y-2" }, [
|
|
1442
1442
|
ut(e),
|
|
1443
1443
|
e.description && m({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, e.description),
|
|
1444
|
-
|
|
1444
|
+
n({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, t)
|
|
1445
1445
|
]),
|
|
1446
1446
|
e.buttons && A({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:space-x-2" }, e.buttons)
|
|
1447
1447
|
])
|
|
@@ -1491,13 +1491,13 @@ class mt extends C {
|
|
|
1491
1491
|
render() {
|
|
1492
1492
|
const t = (d) => {
|
|
1493
1493
|
d.target === this.panel && this.close();
|
|
1494
|
-
}, { borderColor: s, bgColor: o, iconColor:
|
|
1494
|
+
}, { borderColor: s, bgColor: o, iconColor: l } = O[this.type] || O.default, r = `${this.getMainClass()} ${o} ${s}`, a = this.title || "Dialog Title";
|
|
1495
1495
|
return ht({
|
|
1496
1496
|
class: r,
|
|
1497
1497
|
title: a,
|
|
1498
1498
|
click: t,
|
|
1499
1499
|
icon: this.icon,
|
|
1500
|
-
iconColor:
|
|
1500
|
+
iconColor: l,
|
|
1501
1501
|
description: this.description,
|
|
1502
1502
|
buttons: this.getButtons()
|
|
1503
1503
|
}, this.children);
|
|
@@ -1577,11 +1577,11 @@ class Gt extends mt {
|
|
|
1577
1577
|
this.confirmed && this.confirmed(), this.close();
|
|
1578
1578
|
}
|
|
1579
1579
|
}
|
|
1580
|
-
const Jt = c((e, t = []) =>
|
|
1580
|
+
const Jt = c((e, t = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
|
|
1581
1581
|
W({ class: "flex flex-auto flex-col" }, [
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
e.icon &&
|
|
1582
|
+
n({ class: "flex flex-auto flex-col space-y-4" }, [
|
|
1583
|
+
n({ class: "flex flex-auto items-center justify-center" }, [
|
|
1584
|
+
e.icon && n({ class: "w-16 h-16 mb-2 text-primary" }, [
|
|
1585
1585
|
g(e.icon)
|
|
1586
1586
|
])
|
|
1587
1587
|
]),
|
package/dist/index.es.js
CHANGED
|
@@ -3,7 +3,7 @@ import { B as d, I as g, L as C } from "./buttons-Cm9etaEG.js";
|
|
|
3
3
|
import { C as T, F as D, V as I, a as b } from "./veil-tVDPinrr.js";
|
|
4
4
|
import { C as F, d as P, D as B, c as k, E as M, F as f, H as x, I as N, M as v, N as y, P as h, R as L, T as W, a as H, b as A, U as R, W as w } from "./inputs-DscqfC6k.js";
|
|
5
5
|
import { Icons as G } from "./icons.es.js";
|
|
6
|
-
import { A as E, B as V, C as j, w as q, J, y as z, z as K, E as Q, G as _, D as X, m as Y, n as Z, O as $, K as aa, v as ea, c as sa, a as oa, b as ta, Q as ra, l as na, g as la, i as ia, h as pa, j as ma, e as ua, k as da, F as ga, d as Ca, f as ca, L as Ta, x as Da, M as Ia, o as ba, N as Sa, P as Fa, s as Pa, t as Ba, S as ka, q as Ma, r as fa, T as xa, H as Na, I as va, p as ya, u as ha } from "./empty-state-
|
|
6
|
+
import { A as E, B as V, C as j, w as q, J, y as z, z as K, E as Q, G as _, D as X, m as Y, n as Z, O as $, K as aa, v as ea, c as sa, a as oa, b as ta, Q as ra, l as na, g as la, i as ia, h as pa, j as ma, e as ua, k as da, F as ga, d as Ca, f as ca, L as Ta, x as Da, M as Ia, o as ba, N as Sa, P as Fa, s as Pa, t as Ba, S as ka, q as Ma, r as fa, T as xa, H as Na, I as va, p as ya, u as ha } from "./empty-state-Dp-xCh69.js";
|
|
7
7
|
import { A as Wa, b as Ha, C as Aa, D as Ra, a as wa, F as Ua, M as Ga, P as Oa, R as Ea, c as Va, g as ja, p as qa } from "./range-calendar-BxLjYfrT.js";
|
|
8
8
|
import { B as za, p as Ka, C as Qa, j as _a, D as Xa, m as Ya, k as Za, H as $a, I as ae, N as ee, O as se, P as oe, S as te, n as re, o as ne, t as le, s as ie, q as pe, r as me, T as ue, l as de, U as ge, W as Ce, f as ce, h as Te, i as De, c as Ie, d as be, b as Se, e as Fe, a as Pe, g as Be } from "./signature-panel-obojbki5.js";
|
|
9
9
|
import { B as Me, I as fe, M as xe, d as Ne, e as ve, g as ye, N as he, b as Le, a as We, f as He, P as Ae, c as Re, S as we, T as Ue } from "./mobile-nav-wrapper-Dj67Pb8l.js";
|
package/dist/molecules.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { A as s, B as t, C as r, w as e, J as i, y as n, z as m, E as l, G as C, D as d, m as S, n as p, O as u, K as D, v as c, c as g, a as F, b as T, Q as P, l as A, g as f, i as w, h as I, j as b, e as y, k as B, F as M, d as k, f as x, L, x as v, M as E, o as N, N as R, P as U, s as h, t as G, S as O, q as j, r as q, T as z, H, I as J, p as K, u as Q } from "./empty-state-
|
|
1
|
+
import { A as s, B as t, C as r, w as e, J as i, y as n, z as m, E as l, G as C, D as d, m as S, n as p, O as u, K as D, v as c, c as g, a as F, b as T, Q as P, l as A, g as f, i as w, h as I, j as b, e as y, k as B, F as M, d as k, f as x, L, x as v, M as E, o as N, N as R, P as U, s as h, t as G, S as O, q as j, r as q, T as z, H, I as J, p as K, u as Q } from "./empty-state-Dp-xCh69.js";
|
|
2
2
|
import { A as V, P as W, g as X } from "./range-calendar-BxLjYfrT.js";
|
|
3
3
|
export {
|
|
4
4
|
s as Alert,
|
package/package.json
CHANGED