@skiddph/prui 0.10.1 → 0.11.0
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/app.js +1 -1
- package/dist/chunks/{auth-shell-CAIorrrl.js → auth-shell-DBKlNZtl.js} +391 -380
- package/dist/core/drawer.js +46 -63
- package/dist/core/overlay.d.ts +12 -0
- package/dist/core/overlay.js +121 -96
- package/dist/index.js +1 -1
- package/dist/prui.css +5 -0
- package/dist/theme/base.css +5 -0
- package/package.json +1 -1
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
1
|
+
import { jsx as e, jsxs as p, Fragment as Pe } from "react/jsx-runtime";
|
|
2
2
|
import * as l from "react";
|
|
3
3
|
import { createPortal as ot } from "react-dom";
|
|
4
|
-
import { Routes as ct, Route as
|
|
4
|
+
import { Routes as ct, Route as Te, Navigate as ut, MemoryRouter as dt, BrowserRouter as mt, useLocation as Oe, useNavigate as De, Outlet as pt, Link as ft, NavLink as ht } from "react-router-dom";
|
|
5
5
|
import { ChevronsRight as bt, ChevronsLeft as vt, X as gt, Menu as xt, Search as yt, Palette as wt, ChevronDown as Nt, Pencil as kt, Trash2 as St, Plus as Tt, Clock as Ct } from "lucide-react";
|
|
6
6
|
import { cn as C } from "../core/cn.js";
|
|
7
7
|
import { Dropdown as Rt } from "../core/dropdown.js";
|
|
8
|
-
import { Button as
|
|
9
|
-
import { useOverlay as
|
|
10
|
-
import { endIndex as
|
|
11
|
-
import { resolveThemeName as
|
|
12
|
-
import { usePruiI18n as
|
|
13
|
-
import { Modal as
|
|
14
|
-
import { b as
|
|
15
|
-
import { Textarea as
|
|
16
|
-
import { Label as
|
|
17
|
-
import { Select as
|
|
18
|
-
import { Switch as
|
|
19
|
-
import { Card as
|
|
20
|
-
const
|
|
8
|
+
import { Button as U } from "../core/button.js";
|
|
9
|
+
import { useOverlay as Ae, useMountTransition as Et, Portal as ze, useOverlayStack as Mt, useEscapeKey as jt } from "../core/overlay.js";
|
|
10
|
+
import { endIndex as Pt, homeIndex as Ot, moveIndex as Ce } from "../core/list-nav.js";
|
|
11
|
+
import { resolveThemeName as Dt, themeMode as At, readPersistedTheme as zt, applyTheme as Re, listThemes as $t, clearAppliedTokens as Ft } from "../theme.js";
|
|
12
|
+
import { usePruiI18n as X } from "../i18n.js";
|
|
13
|
+
import { Modal as $e, confirmModal as It } from "../core/modal.js";
|
|
14
|
+
import { b as Lt, D as Kt, a as Bt } from "./data-table-toolbar-B-5J2Ozl.js";
|
|
15
|
+
import { Textarea as Ut, Input as ce } from "../core/input.js";
|
|
16
|
+
import { Label as Vt } from "../core/label.js";
|
|
17
|
+
import { Select as Fe } from "../core/select.js";
|
|
18
|
+
import { Switch as Ie } from "../core/switch.js";
|
|
19
|
+
import { Card as Le, CardHeader as Ke, CardDescription as Be, CardTitle as Ue, CardContent as Ve } from "../core/card.js";
|
|
20
|
+
const _t = [
|
|
21
21
|
{ path: "/login", name: "login" },
|
|
22
22
|
{ path: "/register", name: "register" },
|
|
23
23
|
{ path: "/forgot-password", name: "forgotPassword" },
|
|
24
24
|
{ path: "/reset-password", name: "resetPassword" },
|
|
25
25
|
{ path: "/otp", name: "otp" },
|
|
26
26
|
{ path: "/logout", name: "logout" }
|
|
27
|
-
],
|
|
27
|
+
], qt = [
|
|
28
28
|
{ path: "/404", name: "notFound" },
|
|
29
29
|
{ path: "/error", name: "error" },
|
|
30
30
|
{ path: "/profile", name: "profile" },
|
|
31
31
|
{ path: "/settings", name: "settings" },
|
|
32
32
|
{ path: "/admin-setup", name: "adminSetup" }
|
|
33
33
|
];
|
|
34
|
-
function
|
|
35
|
-
const
|
|
36
|
-
...
|
|
37
|
-
...o ?
|
|
34
|
+
function Ht({ mode: t, config: r, children: n }) {
|
|
35
|
+
const a = t === "auth" || t === "auth+utility", o = t === "utility" || t === "auth+utility", m = [
|
|
36
|
+
...a ? _t : [],
|
|
37
|
+
...o ? qt : []
|
|
38
38
|
], [d, T] = l.useState(null);
|
|
39
39
|
return l.useEffect(() => {
|
|
40
40
|
let k = !1;
|
|
@@ -43,32 +43,32 @@ function qt({ mode: t, config: a, children: n }) {
|
|
|
43
43
|
}), () => {
|
|
44
44
|
k = !0;
|
|
45
45
|
};
|
|
46
|
-
}, []), d ? /* @__PURE__ */
|
|
46
|
+
}, []), d ? /* @__PURE__ */ p(ct, { children: [
|
|
47
47
|
m.map(({ path: k, name: x }) => {
|
|
48
48
|
const y = d[x];
|
|
49
|
-
return y ? /* @__PURE__ */ e(
|
|
49
|
+
return y ? /* @__PURE__ */ e(Te, { path: k, element: /* @__PURE__ */ e(y, { ...(r == null ? void 0 : r[x]) ?? {} }) }, k) : null;
|
|
50
50
|
}),
|
|
51
51
|
n,
|
|
52
|
-
|
|
52
|
+
a ? /* @__PURE__ */ e(Te, { path: "*", element: /* @__PURE__ */ e(ut, { to: "/login", replace: !0 }) }) : null
|
|
53
53
|
] }) : /* @__PURE__ */ e("div", { className: "p-8 text-center text-sm text-[var(--prui-dim)]", children: "Loading…" });
|
|
54
54
|
}
|
|
55
|
-
const
|
|
56
|
-
() => Promise.resolve().then(() =>
|
|
55
|
+
const Xt = l.lazy(
|
|
56
|
+
() => Promise.resolve().then(() => cr).then((t) => ({ default: t.SessionTimeout }))
|
|
57
57
|
);
|
|
58
58
|
function Jt(t) {
|
|
59
|
-
const
|
|
59
|
+
const r = t !== !1, n = typeof t == "object" ? t : {}, a = n.persist !== !1, o = Dt(n.default ?? "control"), m = At(o), [d, T] = l.useState(() => (a ? zt() : null) ?? { theme: o, mode: m }), k = l.useCallback(
|
|
60
60
|
(x) => {
|
|
61
|
-
T(x),
|
|
61
|
+
T(x), Re({ theme: x.theme, mode: x.mode, storageKey: a ? "prui:theme" : null });
|
|
62
62
|
},
|
|
63
|
-
[
|
|
63
|
+
[a]
|
|
64
64
|
);
|
|
65
65
|
return l.useEffect(() => {
|
|
66
|
-
|
|
67
|
-
}, [d,
|
|
66
|
+
Re({ theme: d.theme, mode: d.mode, storageKey: a ? "prui:theme" : null });
|
|
67
|
+
}, [d, a]), { enabled: r, state: d, setTheme: k };
|
|
68
68
|
}
|
|
69
69
|
function Yt({ config: t }) {
|
|
70
|
-
const { enabled:
|
|
71
|
-
return
|
|
70
|
+
const { enabled: r, state: n, setTheme: a } = Jt(t), { t: o } = X();
|
|
71
|
+
return r ? /* @__PURE__ */ e(
|
|
72
72
|
Rt,
|
|
73
73
|
{
|
|
74
74
|
align: "end",
|
|
@@ -83,36 +83,36 @@ function Yt({ config: t }) {
|
|
|
83
83
|
children: /* @__PURE__ */ e(wt, { className: "h-4 w-4", "aria-hidden": !0 })
|
|
84
84
|
}
|
|
85
85
|
),
|
|
86
|
-
items:
|
|
86
|
+
items: $t().map((m) => ({
|
|
87
87
|
label: `${m}${m === n.theme ? " (active)" : ""}`,
|
|
88
88
|
onSelect: () => {
|
|
89
|
-
|
|
89
|
+
Ft(), a({ theme: m, mode: m === "daylight" ? "light" : "dark" });
|
|
90
90
|
}
|
|
91
91
|
}))
|
|
92
92
|
}
|
|
93
93
|
) : null;
|
|
94
94
|
}
|
|
95
|
-
function
|
|
96
|
-
return
|
|
95
|
+
function ie(t, r) {
|
|
96
|
+
return r === "/" ? t === "/" : t === r || t.startsWith(r + "/");
|
|
97
97
|
}
|
|
98
|
-
function Wt({ item: t, onNavigate:
|
|
98
|
+
function Wt({ item: t, onNavigate: r, expandAllOn: n, collapsed: a }) {
|
|
99
99
|
var O;
|
|
100
|
-
const { pathname: o } =
|
|
101
|
-
(v) => v.href ?
|
|
100
|
+
const { pathname: o } = Oe(), m = De(), d = (t.items ?? []).some(
|
|
101
|
+
(v) => v.href ? ie(o, v.href) : (v.items ?? []).some((i) => i.href && ie(o, i.href))
|
|
102
102
|
), [T, k] = l.useState(d || n !== void 0 && o === n);
|
|
103
103
|
l.useEffect(() => {
|
|
104
104
|
d && k(!0);
|
|
105
105
|
}, [d]);
|
|
106
|
-
const x = t.icon, [y,
|
|
106
|
+
const x = t.icon, [y, j] = l.useState(!1), [w, P] = l.useState(null), g = l.useRef(null), u = l.useRef(null), [b, R] = l.useState(-1), E = l.useCallback(() => {
|
|
107
107
|
var i, S;
|
|
108
|
-
|
|
108
|
+
j(!1), R(-1);
|
|
109
109
|
const v = document.activeElement;
|
|
110
110
|
v && ((i = u.current) != null && i.contains(v)) && ((S = g.current) == null || S.focus());
|
|
111
|
-
}, []), { setElement:
|
|
111
|
+
}, []), { setElement: z, isTop: A } = Mt(y);
|
|
112
112
|
if (jt(y, A, () => E()), l.useEffect(() => {
|
|
113
113
|
var v;
|
|
114
114
|
y && ((v = u.current) == null || v.focus());
|
|
115
|
-
}, [y]),
|
|
115
|
+
}, [y]), a) {
|
|
116
116
|
const v = [];
|
|
117
117
|
for (const c of t.items ?? [])
|
|
118
118
|
if ((O = c.items) != null && O.length) {
|
|
@@ -123,40 +123,40 @@ function Wt({ item: t, onNavigate: a, expandAllOn: n, collapsed: r }) {
|
|
|
123
123
|
var h;
|
|
124
124
|
const c = (h = g.current) == null ? void 0 : h.getBoundingClientRect();
|
|
125
125
|
if (c) {
|
|
126
|
-
const
|
|
126
|
+
const B = Math.min(v.length * 32 + 40, 320);
|
|
127
127
|
P({
|
|
128
128
|
left: c.right + 8,
|
|
129
|
-
top: Math.max(8, Math.min(c.top, window.innerHeight -
|
|
129
|
+
top: Math.max(8, Math.min(c.top, window.innerHeight - B - 8))
|
|
130
130
|
});
|
|
131
131
|
}
|
|
132
|
-
|
|
132
|
+
j((B) => !B);
|
|
133
133
|
}, N = (c) => {
|
|
134
|
-
var
|
|
134
|
+
var K, _;
|
|
135
135
|
R(c);
|
|
136
|
-
const h = (
|
|
136
|
+
const h = (K = u.current) == null ? void 0 : K.querySelectorAll("[role='menuitem']");
|
|
137
137
|
if (!h) return;
|
|
138
|
-
(
|
|
139
|
-
},
|
|
138
|
+
(_ = Array.from(h)[c]) == null || _.focus();
|
|
139
|
+
}, f = (c) => {
|
|
140
140
|
const h = i.length;
|
|
141
141
|
switch (c.key) {
|
|
142
142
|
case "ArrowDown":
|
|
143
|
-
c.preventDefault(), N(
|
|
143
|
+
c.preventDefault(), N(Ce(b, 1, h));
|
|
144
144
|
break;
|
|
145
145
|
case "ArrowUp":
|
|
146
|
-
c.preventDefault(), N(
|
|
146
|
+
c.preventDefault(), N(Ce(b, -1, h));
|
|
147
147
|
break;
|
|
148
148
|
case "Home":
|
|
149
|
-
c.preventDefault(), N(
|
|
149
|
+
c.preventDefault(), N(Ot(h));
|
|
150
150
|
break;
|
|
151
151
|
case "End":
|
|
152
|
-
c.preventDefault(), N(
|
|
152
|
+
c.preventDefault(), N(Pt(h));
|
|
153
153
|
break;
|
|
154
154
|
case "Tab":
|
|
155
155
|
E();
|
|
156
156
|
break;
|
|
157
157
|
}
|
|
158
158
|
};
|
|
159
|
-
return /* @__PURE__ */
|
|
159
|
+
return /* @__PURE__ */ p("li", { "data-testid": "nav-group", children: [
|
|
160
160
|
/* @__PURE__ */ e(
|
|
161
161
|
"button",
|
|
162
162
|
{
|
|
@@ -178,18 +178,18 @@ function Wt({ item: t, onNavigate: a, expandAllOn: n, collapsed: r }) {
|
|
|
178
178
|
}
|
|
179
179
|
),
|
|
180
180
|
y && w ? ot(
|
|
181
|
-
/* @__PURE__ */
|
|
181
|
+
/* @__PURE__ */ p(Pe, { children: [
|
|
182
182
|
/* @__PURE__ */ e("div", { className: "fixed inset-0 z-[var(--prui-z-flyout)]", onClick: () => E(), "data-testid": "rail-flyout-backdrop" }),
|
|
183
|
-
/* @__PURE__ */
|
|
183
|
+
/* @__PURE__ */ p(
|
|
184
184
|
"div",
|
|
185
185
|
{
|
|
186
186
|
ref: (c) => {
|
|
187
|
-
u.current = c,
|
|
187
|
+
u.current = c, z(c);
|
|
188
188
|
},
|
|
189
189
|
role: "menu",
|
|
190
190
|
"aria-label": t.label,
|
|
191
191
|
tabIndex: -1,
|
|
192
|
-
onKeyDown:
|
|
192
|
+
onKeyDown: f,
|
|
193
193
|
"data-testid": "rail-flyout",
|
|
194
194
|
className: "fixed z-[calc(var(--prui-z-flyout)+1)] flex w-56 max-h-80 flex-col overflow-y-auto rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-surface)] py-1.5 shadow-[var(--prui-shadow-lg)] outline-none",
|
|
195
195
|
style: { top: w.top, left: w.left },
|
|
@@ -205,10 +205,10 @@ function Wt({ item: t, onNavigate: a, expandAllOn: n, collapsed: r }) {
|
|
|
205
205
|
"data-testid": "rail-flyout-item",
|
|
206
206
|
className: C(
|
|
207
207
|
"flex cursor-pointer items-center rounded-[calc(var(--prui-radius)-1px)] px-3 py-1.5 text-left text-sm",
|
|
208
|
-
c.href &&
|
|
208
|
+
c.href && ie(o, c.href) ? "bg-[var(--prui-brand)]/15 text-[var(--prui-brand)]" : "text-[var(--prui-fg)] hover:bg-[var(--prui-raise)] focus-visible:bg-[var(--prui-raise)] outline-none"
|
|
209
209
|
),
|
|
210
210
|
onClick: () => {
|
|
211
|
-
E(),
|
|
211
|
+
E(), r == null || r(), c.href && m(c.href);
|
|
212
212
|
},
|
|
213
213
|
children: c.label
|
|
214
214
|
},
|
|
@@ -223,8 +223,8 @@ function Wt({ item: t, onNavigate: a, expandAllOn: n, collapsed: r }) {
|
|
|
223
223
|
) : null
|
|
224
224
|
] });
|
|
225
225
|
}
|
|
226
|
-
return /* @__PURE__ */
|
|
227
|
-
/* @__PURE__ */
|
|
226
|
+
return /* @__PURE__ */ p("li", { "data-testid": "nav-group", children: [
|
|
227
|
+
/* @__PURE__ */ p(
|
|
228
228
|
"button",
|
|
229
229
|
{
|
|
230
230
|
type: "button",
|
|
@@ -241,18 +241,18 @@ function Wt({ item: t, onNavigate: a, expandAllOn: n, collapsed: r }) {
|
|
|
241
241
|
]
|
|
242
242
|
}
|
|
243
243
|
),
|
|
244
|
-
T ? /* @__PURE__ */ e("ul", { className: "ml-4 mt-0.5 flex flex-col gap-0.5 border-l border-[var(--prui-line)] pl-2", children: (t.items ?? []).map((v) => /* @__PURE__ */ e(
|
|
244
|
+
T ? /* @__PURE__ */ e("ul", { className: "ml-4 mt-0.5 flex flex-col gap-0.5 border-l border-[var(--prui-line)] pl-2", children: (t.items ?? []).map((v) => /* @__PURE__ */ e(_e, { item: v, onNavigate: r, nested: !0, expandAllOn: n, collapsed: a }, v.href ?? v.label)) }) : null
|
|
245
245
|
] });
|
|
246
246
|
}
|
|
247
|
-
function
|
|
247
|
+
function Gt({ label: t }) {
|
|
248
248
|
return /* @__PURE__ */ e("li", { className: "px-2.5 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--prui-dim)]", "data-testid": "nav-subgroup", children: t });
|
|
249
249
|
}
|
|
250
|
-
function
|
|
251
|
-
return t.items && t.items.length > 0 ? /* @__PURE__ */ e(Wt, { item: t, onNavigate:
|
|
250
|
+
function _e({ item: t, onNavigate: r, nested: n, expandAllOn: a, collapsed: o }) {
|
|
251
|
+
return t.items && t.items.length > 0 ? /* @__PURE__ */ e(Wt, { item: t, onNavigate: r, expandAllOn: a, collapsed: o }) : t.heading || !t.href && !t.items ? o ? null : /* @__PURE__ */ e(Gt, { label: t.label }) : t.href ? /* @__PURE__ */ e("li", { children: /* @__PURE__ */ p(
|
|
252
252
|
ht,
|
|
253
253
|
{
|
|
254
254
|
to: t.href,
|
|
255
|
-
onClick:
|
|
255
|
+
onClick: r,
|
|
256
256
|
className: ({ isActive: m }) => C(
|
|
257
257
|
"flex items-center gap-2 rounded-[var(--prui-radius)] px-2.5 py-1.5 text-sm",
|
|
258
258
|
n && "pl-2.5",
|
|
@@ -265,46 +265,46 @@ function Ve({ item: t, onNavigate: a, nested: n, expandAllOn: r, collapsed: o })
|
|
|
265
265
|
}
|
|
266
266
|
) }) : null;
|
|
267
267
|
}
|
|
268
|
-
function
|
|
269
|
-
const { t: o } =
|
|
270
|
-
return /* @__PURE__ */ e("nav", { "aria-label": o.mainNavigation, className: "prui-app-nav", children: /* @__PURE__ */ e("ul", { className: "flex flex-col gap-0.5", children: t.map((m) => /* @__PURE__ */ e(
|
|
268
|
+
function Ee({ nav: t, onNavigate: r, expandAllOn: n, collapsed: a }) {
|
|
269
|
+
const { t: o } = X();
|
|
270
|
+
return /* @__PURE__ */ e("nav", { "aria-label": o.mainNavigation, className: "prui-app-nav", children: /* @__PURE__ */ e("ul", { className: "flex flex-col gap-0.5", children: t.map((m) => /* @__PURE__ */ e(_e, { item: m, onNavigate: r, expandAllOn: n, collapsed: a }, m.href ?? m.label)) }) });
|
|
271
271
|
}
|
|
272
|
-
function
|
|
272
|
+
function oe({ brand: t }) {
|
|
273
273
|
if (!t) return null;
|
|
274
|
-
const
|
|
274
|
+
const r = /* @__PURE__ */ p(Pe, { children: [
|
|
275
275
|
t.mark ? /* @__PURE__ */ e("img", { src: t.mark, alt: "", className: "h-6 w-6 rounded-[var(--prui-radius-1)] object-cover" }) : null,
|
|
276
276
|
/* @__PURE__ */ e("span", { className: "prui-nav-label truncate font-semibold text-[var(--prui-fg)]", children: t.name })
|
|
277
277
|
] }), n = "flex items-center gap-2 px-1 py-1 min-w-0";
|
|
278
|
-
return t.href === null ? /* @__PURE__ */ e("div", { className: n, children:
|
|
278
|
+
return t.href === null ? /* @__PURE__ */ e("div", { className: n, children: r }) : /* @__PURE__ */ e(ft, { to: t.href ?? "/", className: n, "aria-label": t.name, children: r });
|
|
279
279
|
}
|
|
280
|
-
function
|
|
280
|
+
function Qt({
|
|
281
281
|
open: t,
|
|
282
|
-
onOpenChange:
|
|
282
|
+
onOpenChange: r,
|
|
283
283
|
entries: n,
|
|
284
|
-
placeholder:
|
|
284
|
+
placeholder: a,
|
|
285
285
|
onNavigate: o
|
|
286
286
|
}) {
|
|
287
|
-
const { t: m } =
|
|
287
|
+
const { t: m } = X(), [d, T] = l.useState(""), [k, x] = l.useState(0), y = l.useRef(null), j = a ?? m.commandPlaceholder, w = l.useMemo(() => {
|
|
288
288
|
const u = d.trim().toLowerCase();
|
|
289
289
|
return u ? n.filter((b) => b.label.toLowerCase().includes(u)) : n;
|
|
290
290
|
}, [n, d]);
|
|
291
291
|
l.useEffect(() => x(0), [d]);
|
|
292
|
-
const { ref: P } =
|
|
292
|
+
const { ref: P } = Ae({
|
|
293
293
|
open: t,
|
|
294
|
-
onEscape: () =>
|
|
294
|
+
onEscape: () => r(!1),
|
|
295
295
|
initialFocus: y
|
|
296
296
|
}), g = (u) => {
|
|
297
|
-
|
|
297
|
+
r(!1), u.onSelect ? u.onSelect() : u.href && (o == null || o(u.href));
|
|
298
298
|
};
|
|
299
|
-
return t ? /* @__PURE__ */ e(
|
|
299
|
+
return t ? /* @__PURE__ */ e(ze, { children: /* @__PURE__ */ e("div", { ref: P, children: /* @__PURE__ */ e(
|
|
300
300
|
"div",
|
|
301
301
|
{
|
|
302
302
|
className: "prui-dialog-overlay fixed inset-0 z-[var(--prui-z-overlay)] flex items-start justify-center pt-24",
|
|
303
303
|
style: { backgroundColor: "var(--prui-scrim)" },
|
|
304
304
|
onMouseDown: (u) => {
|
|
305
|
-
u.target === u.currentTarget &&
|
|
305
|
+
u.target === u.currentTarget && r(!1);
|
|
306
306
|
},
|
|
307
|
-
children: /* @__PURE__ */
|
|
307
|
+
children: /* @__PURE__ */ p(
|
|
308
308
|
"div",
|
|
309
309
|
{
|
|
310
310
|
role: "dialog",
|
|
@@ -323,7 +323,7 @@ function Gt({
|
|
|
323
323
|
"aria-controls": "prui-palette-listbox",
|
|
324
324
|
"aria-label": "Command palette search",
|
|
325
325
|
"aria-activedescendant": w[k] ? `palette-option-${k}` : void 0,
|
|
326
|
-
placeholder:
|
|
326
|
+
placeholder: j,
|
|
327
327
|
value: d,
|
|
328
328
|
onChange: (u) => T(u.target.value),
|
|
329
329
|
onKeyDown: (u) => {
|
|
@@ -335,7 +335,7 @@ function Gt({
|
|
|
335
335
|
className: "w-full bg-transparent px-4 py-3 text-sm text-[var(--prui-fg)] placeholder:text-[var(--prui-dim)] outline-none border-b border-[var(--prui-line)] rounded-t-[var(--prui-radius)]"
|
|
336
336
|
}
|
|
337
337
|
),
|
|
338
|
-
/* @__PURE__ */ e("ul", { id: "prui-palette-listbox", role: "listbox", "aria-label": "Commands", className: "max-h-64 overflow-auto p-1", children: w.length === 0 ? /* @__PURE__ */ e("li", { className: "px-3 py-2 text-sm text-[var(--prui-dim)]", role: "option", "aria-selected": "false", "aria-disabled": "true", children: m.commandNoMatches }) : w.map((u, b) => /* @__PURE__ */
|
|
338
|
+
/* @__PURE__ */ e("ul", { id: "prui-palette-listbox", role: "listbox", "aria-label": "Commands", className: "max-h-64 overflow-auto p-1", children: w.length === 0 ? /* @__PURE__ */ e("li", { className: "px-3 py-2 text-sm text-[var(--prui-dim)]", role: "option", "aria-selected": "false", "aria-disabled": "true", children: m.commandNoMatches }) : w.map((u, b) => /* @__PURE__ */ p(
|
|
339
339
|
"li",
|
|
340
340
|
{
|
|
341
341
|
id: `palette-option-${b}`,
|
|
@@ -360,11 +360,11 @@ function Gt({
|
|
|
360
360
|
}
|
|
361
361
|
) }) }) : null;
|
|
362
362
|
}
|
|
363
|
-
function
|
|
363
|
+
function Zt(t) {
|
|
364
364
|
const {
|
|
365
|
-
brand:
|
|
365
|
+
brand: r,
|
|
366
366
|
nav: n = [],
|
|
367
|
-
search:
|
|
367
|
+
search: a = !0,
|
|
368
368
|
theme: o = !0,
|
|
369
369
|
auth: m = !1,
|
|
370
370
|
sidebar: d = {},
|
|
@@ -372,122 +372,133 @@ function Qt(t) {
|
|
|
372
372
|
pages: k,
|
|
373
373
|
pagesConfig: x,
|
|
374
374
|
expandAllOn: y,
|
|
375
|
-
layoutType:
|
|
375
|
+
layoutType: j = "A",
|
|
376
376
|
sidebarHeader: w,
|
|
377
377
|
sidebarFooter: P,
|
|
378
378
|
children: g
|
|
379
|
-
} = t, { t: u } =
|
|
379
|
+
} = t, { t: u } = X(), b = typeof a == "object" ? a : { enabled: a !== !1 }, R = b.enabled !== !1, E = b.hotkey ?? "/", z = d.collapsible !== !1, [A, O] = l.useState(d.defaultOpen === !0), [v, i] = l.useState(!0), [S, N] = l.useState(!1), f = Oe(), c = De(), h = l.useMemo(
|
|
380
380
|
() => m === !1 ? null : m === !0 ? {} : m,
|
|
381
381
|
[m]
|
|
382
|
-
),
|
|
382
|
+
), B = l.useCallback(() => {
|
|
383
383
|
h != null && h.onTimeout ? h.onTimeout() : c((h == null ? void 0 : h.loginPath) ?? "/login");
|
|
384
|
-
}, [h, c]),
|
|
385
|
-
const
|
|
386
|
-
for (const
|
|
387
|
-
if (
|
|
388
|
-
for (const F of
|
|
389
|
-
F.href &&
|
|
390
|
-
else
|
|
391
|
-
return
|
|
384
|
+
}, [h, c]), K = l.useMemo(() => {
|
|
385
|
+
const $ = [];
|
|
386
|
+
for (const M of n)
|
|
387
|
+
if (M.items)
|
|
388
|
+
for (const F of M.items)
|
|
389
|
+
F.href && $.push({ label: `${M.label} / ${F.label}`, href: F.href, group: M.label });
|
|
390
|
+
else M.href && $.push({ label: M.label, href: M.href });
|
|
391
|
+
return $;
|
|
392
392
|
}, [n]);
|
|
393
393
|
l.useEffect(() => {
|
|
394
394
|
if (!R) return;
|
|
395
|
-
const
|
|
396
|
-
const F =
|
|
397
|
-
|
|
395
|
+
const $ = (M) => {
|
|
396
|
+
const F = M.target, le = F && (F.tagName === "INPUT" || F.tagName === "TEXTAREA" || F.isContentEditable);
|
|
397
|
+
M.key === E && !le && !M.metaKey && !M.ctrlKey && !M.altKey && (M.preventDefault(), N(!0));
|
|
398
398
|
};
|
|
399
|
-
return document.addEventListener("keydown",
|
|
399
|
+
return document.addEventListener("keydown", $), () => document.removeEventListener("keydown", $);
|
|
400
400
|
}, [E, R]);
|
|
401
|
-
const
|
|
401
|
+
const _ = l.useRef(f.pathname);
|
|
402
402
|
l.useEffect(() => {
|
|
403
|
-
|
|
404
|
-
}, [
|
|
405
|
-
const
|
|
403
|
+
_.current !== f.pathname && (_.current = f.pathname, O(!1));
|
|
404
|
+
}, [f.pathname]);
|
|
405
|
+
const J = l.useRef(null), { ref: ae } = Ae({
|
|
406
406
|
open: A,
|
|
407
407
|
onEscape: () => O(!1),
|
|
408
|
-
initialFocus:
|
|
409
|
-
}),
|
|
410
|
-
return /* @__PURE__ */
|
|
408
|
+
initialFocus: J
|
|
409
|
+
}), { mounted: ne, shown: I } = Et(A), Y = d.width ?? 240, L = !v && j !== "D";
|
|
410
|
+
return /* @__PURE__ */ p(
|
|
411
411
|
"div",
|
|
412
412
|
{
|
|
413
413
|
className: "prui-app prui-shell min-h-dvh bg-[var(--prui-background)] text-[var(--prui-fg)]",
|
|
414
|
-
"data-layout":
|
|
415
|
-
"data-collapsed":
|
|
416
|
-
style: { "--prui-shell-sidebar":
|
|
414
|
+
"data-layout": j,
|
|
415
|
+
"data-collapsed": L ? "true" : void 0,
|
|
416
|
+
style: { "--prui-shell-sidebar": L ? "var(--prui-rail-width, 64px)" : `${Y}px` },
|
|
417
417
|
children: [
|
|
418
|
-
/* @__PURE__ */
|
|
419
|
-
/* @__PURE__ */ e("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto p-2 pt-4 scrollbar-thin", children: /* @__PURE__ */ e(
|
|
418
|
+
/* @__PURE__ */ p("aside", { "data-testid": "sidebar", className: "prui-shell-sidebar hidden md:flex md:flex-col md:min-h-0", children: [
|
|
419
|
+
/* @__PURE__ */ e("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto p-2 pt-4 scrollbar-thin", children: /* @__PURE__ */ e(Ee, { nav: n, expandAllOn: y, collapsed: L }) }),
|
|
420
420
|
P ? /* @__PURE__ */ e(
|
|
421
421
|
"div",
|
|
422
422
|
{
|
|
423
|
-
className: C("border-t border-[var(--prui-line)] p-2",
|
|
423
|
+
className: C("border-t border-[var(--prui-line)] p-2", L && "flex justify-center px-1"),
|
|
424
424
|
"data-testid": "sidebar-footer",
|
|
425
425
|
children: P
|
|
426
426
|
}
|
|
427
427
|
) : null,
|
|
428
|
-
|
|
429
|
-
|
|
428
|
+
j !== "D" ? /* @__PURE__ */ e("div", { className: "border-t border-[var(--prui-line)] p-2", children: /* @__PURE__ */ e(
|
|
429
|
+
U,
|
|
430
430
|
{
|
|
431
431
|
variant: "ghost",
|
|
432
432
|
size: "sm",
|
|
433
433
|
className: "w-full justify-center",
|
|
434
|
-
"aria-label":
|
|
434
|
+
"aria-label": L ? u.expandSidebar : u.collapseSidebar,
|
|
435
435
|
"data-testid": "sidebar-toggle",
|
|
436
|
-
onClick: () => i((
|
|
437
|
-
children:
|
|
436
|
+
onClick: () => i(($) => !$),
|
|
437
|
+
children: L ? /* @__PURE__ */ e(bt, { className: "h-4 w-4", "aria-hidden": !0 }) : /* @__PURE__ */ e(vt, { className: "h-4 w-4", "aria-hidden": !0 })
|
|
438
438
|
}
|
|
439
439
|
) }) : null
|
|
440
440
|
] }),
|
|
441
|
-
|
|
441
|
+
ne ? /* @__PURE__ */ e(ze, { children: /* @__PURE__ */ p("div", { ref: ae, className: "md:hidden fixed inset-0 z-[var(--prui-z-drawer)]", "data-testid": "mobile-drawer", children: [
|
|
442
442
|
/* @__PURE__ */ e(
|
|
443
443
|
"div",
|
|
444
444
|
{
|
|
445
|
-
className: "absolute inset-0",
|
|
446
|
-
style: {
|
|
445
|
+
className: "absolute inset-0 prui-drawer-overlay",
|
|
446
|
+
style: {
|
|
447
|
+
backgroundColor: "var(--prui-scrim)",
|
|
448
|
+
opacity: I ? 1 : 0,
|
|
449
|
+
transition: "opacity var(--prui-duration-slow) var(--prui-ease-out)"
|
|
450
|
+
},
|
|
447
451
|
onClick: () => O(!1),
|
|
448
452
|
"data-testid": "drawer-backdrop"
|
|
449
453
|
}
|
|
450
454
|
),
|
|
451
|
-
/* @__PURE__ */
|
|
455
|
+
/* @__PURE__ */ p(
|
|
452
456
|
"aside",
|
|
453
457
|
{
|
|
454
|
-
className: "absolute left-0 top-0 h-full w-64 overflow-y-auto border-r border-[var(--prui-line)] bg-[var(--prui-surface)] p-2",
|
|
458
|
+
className: "absolute left-0 top-0 h-full w-64 overflow-y-auto border-r border-[var(--prui-line)] bg-[var(--prui-surface)] p-2 prui-drawer-panel",
|
|
459
|
+
style: {
|
|
460
|
+
transform: I ? "translateX(0)" : "translateX(-100%)",
|
|
461
|
+
transition: "transform var(--prui-duration-slow) var(--prui-ease-out)"
|
|
462
|
+
},
|
|
455
463
|
role: "dialog",
|
|
456
464
|
"aria-modal": "true",
|
|
457
465
|
"aria-label": "Navigation",
|
|
458
466
|
children: [
|
|
459
|
-
/* @__PURE__ */
|
|
460
|
-
"
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
467
|
+
/* @__PURE__ */ p("div", { className: C("mb-2 flex h-10 items-center gap-2 px-1", r ? "justify-between" : "justify-end"), children: [
|
|
468
|
+
r ? /* @__PURE__ */ e("div", { className: "min-w-0", onClick: () => O(!1), children: /* @__PURE__ */ e(oe, { brand: r }) }) : null,
|
|
469
|
+
/* @__PURE__ */ e(
|
|
470
|
+
"button",
|
|
471
|
+
{
|
|
472
|
+
type: "button",
|
|
473
|
+
ref: J,
|
|
474
|
+
"aria-label": u.closeNavigation,
|
|
475
|
+
onClick: () => O(!1),
|
|
476
|
+
className: "rounded-[var(--prui-radius)] p-1 text-[var(--prui-dim)] hover:text-[var(--prui-fg)] cursor-pointer",
|
|
477
|
+
children: /* @__PURE__ */ e(gt, { className: "h-4 w-4", "aria-hidden": !0 })
|
|
478
|
+
}
|
|
479
|
+
)
|
|
480
|
+
] }),
|
|
481
|
+
/* @__PURE__ */ e(Ee, { nav: n, onNavigate: () => O(!1), expandAllOn: y, collapsed: !1 })
|
|
471
482
|
]
|
|
472
483
|
}
|
|
473
484
|
)
|
|
474
485
|
] }) }) : null,
|
|
475
|
-
|
|
486
|
+
j === "C" ? /* @__PURE__ */ e(
|
|
476
487
|
"div",
|
|
477
488
|
{
|
|
478
489
|
"data-testid": "sidebar-header",
|
|
479
490
|
className: "prui-shell-sidehead hidden h-14 items-center gap-2 border-b border-[var(--prui-line)] bg-[var(--prui-surface)] px-4 md:flex",
|
|
480
|
-
children: w ?? /* @__PURE__ */ e(
|
|
491
|
+
children: w ?? /* @__PURE__ */ e(oe, { brand: r })
|
|
481
492
|
}
|
|
482
493
|
) : null,
|
|
483
|
-
/* @__PURE__ */
|
|
494
|
+
/* @__PURE__ */ p(
|
|
484
495
|
"header",
|
|
485
496
|
{
|
|
486
497
|
"data-testid": "app-header",
|
|
487
498
|
className: "prui-shell-header sticky top-0 z-[var(--prui-z-header)] grid h-14 grid-cols-[1fr_auto_1fr] items-center gap-4 border-b border-[var(--prui-line)] bg-[var(--prui-surface)] px-4 md:px-6",
|
|
488
499
|
children: [
|
|
489
|
-
|
|
490
|
-
|
|
500
|
+
z ? /* @__PURE__ */ e(
|
|
501
|
+
U,
|
|
491
502
|
{
|
|
492
503
|
variant: "ghost",
|
|
493
504
|
size: "icon",
|
|
@@ -498,8 +509,8 @@ function Qt(t) {
|
|
|
498
509
|
children: /* @__PURE__ */ e(xt, { className: "h-4 w-4", "aria-hidden": !0 })
|
|
499
510
|
}
|
|
500
511
|
) : null,
|
|
501
|
-
/* @__PURE__ */ e("div", { className: "min-w-0 justify-self-start", children: /* @__PURE__ */ e(
|
|
502
|
-
R ? /* @__PURE__ */
|
|
512
|
+
/* @__PURE__ */ e("div", { className: "min-w-0 justify-self-start", children: /* @__PURE__ */ e(oe, { brand: r }) }),
|
|
513
|
+
R ? /* @__PURE__ */ p(
|
|
503
514
|
"button",
|
|
504
515
|
{
|
|
505
516
|
type: "button",
|
|
@@ -513,7 +524,7 @@ function Qt(t) {
|
|
|
513
524
|
]
|
|
514
525
|
}
|
|
515
526
|
) : null,
|
|
516
|
-
/* @__PURE__ */
|
|
527
|
+
/* @__PURE__ */ p("div", { className: "flex items-center gap-2 justify-self-end", children: [
|
|
517
528
|
T,
|
|
518
529
|
/* @__PURE__ */ e(Yt, { config: o })
|
|
519
530
|
] })
|
|
@@ -526,27 +537,27 @@ function Qt(t) {
|
|
|
526
537
|
"data-testid": "app-content",
|
|
527
538
|
tabIndex: 0,
|
|
528
539
|
className: "prui-shell-content min-h-0 flex-1 p-4 outline-none md:p-6",
|
|
529
|
-
children: k ? /* @__PURE__ */ e(
|
|
540
|
+
children: k ? /* @__PURE__ */ e(Ht, { mode: k, config: x, children: g }) : g ?? /* @__PURE__ */ e(pt, {})
|
|
530
541
|
}
|
|
531
542
|
),
|
|
532
543
|
h ? /* @__PURE__ */ e(l.Suspense, { fallback: null, children: /* @__PURE__ */ e(
|
|
533
|
-
|
|
544
|
+
Xt,
|
|
534
545
|
{
|
|
535
546
|
timeout: h.sessionTimeout,
|
|
536
547
|
warningTime: h.warningTime,
|
|
537
|
-
onTimeout:
|
|
548
|
+
onTimeout: B
|
|
538
549
|
}
|
|
539
550
|
) }) : null,
|
|
540
|
-
R ? /* @__PURE__ */ e(
|
|
551
|
+
R ? /* @__PURE__ */ e(Qt, { open: S, onOpenChange: N, entries: K, placeholder: b.placeholder, onNavigate: c }) : null
|
|
541
552
|
]
|
|
542
553
|
}
|
|
543
554
|
);
|
|
544
555
|
}
|
|
545
|
-
function
|
|
546
|
-
const { router:
|
|
547
|
-
return /* @__PURE__ */ e(
|
|
556
|
+
function Er(t) {
|
|
557
|
+
const { router: r = "browser", initialEntries: n } = t;
|
|
558
|
+
return /* @__PURE__ */ e(r === "memory" ? dt : mt, { initialEntries: n, children: /* @__PURE__ */ e(Zt, { ...t }) });
|
|
548
559
|
}
|
|
549
|
-
const
|
|
560
|
+
const Mr = {
|
|
550
561
|
name: "App",
|
|
551
562
|
props: [
|
|
552
563
|
{ name: "brand", type: "{ name, mark?, href? }", default: "undefined", control: "object" },
|
|
@@ -566,131 +577,131 @@ const Er = {
|
|
|
566
577
|
{ name: "children", type: "ReactNode", default: "Outlet", control: "none" }
|
|
567
578
|
]
|
|
568
579
|
};
|
|
569
|
-
function
|
|
580
|
+
function er(t) {
|
|
570
581
|
return Array.isArray(t) ? { fields: t } : t;
|
|
571
582
|
}
|
|
572
|
-
function
|
|
583
|
+
function tr(t) {
|
|
573
584
|
if (t)
|
|
574
|
-
return t.map((
|
|
585
|
+
return t.map((r) => typeof r == "string" || typeof r == "number" ? { label: String(r), value: String(r) } : r);
|
|
575
586
|
}
|
|
576
|
-
function
|
|
587
|
+
function Me(t, r) {
|
|
577
588
|
const n = {};
|
|
578
|
-
for (const
|
|
579
|
-
|
|
589
|
+
for (const a of t.fields)
|
|
590
|
+
r && a.name in r ? n[a.name] = r[a.name] : a.defaultValue !== void 0 ? n[a.name] = a.defaultValue : a.type === "boolean" ? n[a.name] = !1 : n[a.name] = "";
|
|
580
591
|
return n;
|
|
581
592
|
}
|
|
582
|
-
function
|
|
593
|
+
function rr({
|
|
583
594
|
schema: t,
|
|
584
|
-
initialValues:
|
|
595
|
+
initialValues: r,
|
|
585
596
|
defaultValues: n,
|
|
586
|
-
onSubmit:
|
|
597
|
+
onSubmit: a,
|
|
587
598
|
onCancel: o,
|
|
588
599
|
cancelLabel: m,
|
|
589
600
|
submitting: d = !1,
|
|
590
601
|
error: T,
|
|
591
602
|
className: k
|
|
592
603
|
}) {
|
|
593
|
-
const { t: x } =
|
|
604
|
+
const { t: x } = X(), y = l.useMemo(() => er(t), [t]), j = r ?? n, [w, P] = l.useState(() => Me(y, j)), [g, u] = l.useState({}), [b, R] = l.useState(null), [E, z] = l.useState(!1);
|
|
594
605
|
l.useEffect(() => {
|
|
595
|
-
P(
|
|
596
|
-
}, [JSON.stringify(y), JSON.stringify(
|
|
606
|
+
P(Me(y, j));
|
|
607
|
+
}, [JSON.stringify(y), JSON.stringify(j ?? {})]);
|
|
597
608
|
const A = (i, S) => {
|
|
598
609
|
P((N) => ({ ...N, [i]: S })), u((N) => {
|
|
599
610
|
if (!N[i]) return N;
|
|
600
|
-
const
|
|
601
|
-
return delete
|
|
611
|
+
const f = { ...N };
|
|
612
|
+
return delete f[i], f;
|
|
602
613
|
});
|
|
603
614
|
}, O = async (i) => {
|
|
604
615
|
var N;
|
|
605
616
|
i.preventDefault();
|
|
606
617
|
const S = {};
|
|
607
|
-
for (const
|
|
608
|
-
if (
|
|
609
|
-
const h = w[
|
|
610
|
-
(h === "" || h == null || Array.isArray(h) && h.length === 0) && (S[
|
|
618
|
+
for (const f of y.fields) {
|
|
619
|
+
if (f.required) {
|
|
620
|
+
const h = w[f.name];
|
|
621
|
+
(h === "" || h == null || Array.isArray(h) && h.length === 0) && (S[f.name] = x.requiredField.replace("{label}", f.label));
|
|
611
622
|
}
|
|
612
|
-
const c = (N =
|
|
613
|
-
c && (S[
|
|
623
|
+
const c = (N = f.validate) == null ? void 0 : N.call(f, w[f.name], w);
|
|
624
|
+
c && (S[f.name] = c);
|
|
614
625
|
}
|
|
615
626
|
if (u(S), !(Object.keys(S).length > 0)) {
|
|
616
627
|
R(null);
|
|
617
628
|
try {
|
|
618
|
-
const
|
|
619
|
-
|
|
620
|
-
} catch (
|
|
621
|
-
R(
|
|
629
|
+
const f = a == null ? void 0 : a({ ...w });
|
|
630
|
+
f && typeof f.then == "function" && (z(!0), await f);
|
|
631
|
+
} catch (f) {
|
|
632
|
+
R(f instanceof Error ? f.message : String(f));
|
|
622
633
|
} finally {
|
|
623
|
-
|
|
634
|
+
z(!1);
|
|
624
635
|
}
|
|
625
636
|
}
|
|
626
637
|
}, v = d || E;
|
|
627
|
-
return /* @__PURE__ */
|
|
638
|
+
return /* @__PURE__ */ p("form", { onSubmit: O, className: C("prui-form flex flex-col gap-4", k), noValidate: !0, children: [
|
|
628
639
|
/* @__PURE__ */ e("div", { className: C("grid gap-4", y.columns === 2 && "md:grid-cols-2"), children: y.fields.map((i) => {
|
|
629
640
|
const S = g[i.name], N = {
|
|
630
641
|
id: `prui-form-${i.name}`,
|
|
631
642
|
"aria-invalid": S ? !0 : void 0,
|
|
632
643
|
"aria-describedby": S ? `prui-form-${i.name}-error` : void 0
|
|
633
644
|
};
|
|
634
|
-
return /* @__PURE__ */
|
|
635
|
-
/* @__PURE__ */
|
|
645
|
+
return /* @__PURE__ */ p("div", { className: C("flex flex-col gap-1.5", i.colSpan === 2 && "md:col-span-2", i.className), children: [
|
|
646
|
+
/* @__PURE__ */ p(Vt, { htmlFor: N.id, children: [
|
|
636
647
|
i.label,
|
|
637
648
|
i.required ? /* @__PURE__ */ e("span", { className: "ml-0.5 text-[var(--prui-danger)]", children: "*" }) : null
|
|
638
649
|
] }),
|
|
639
650
|
i.type === "textarea" ? /* @__PURE__ */ e(
|
|
640
|
-
|
|
651
|
+
Ut,
|
|
641
652
|
{
|
|
642
653
|
...N,
|
|
643
654
|
placeholder: i.placeholder,
|
|
644
655
|
disabled: i.disabled || v,
|
|
645
656
|
value: String(w[i.name] ?? ""),
|
|
646
|
-
onChange: (
|
|
657
|
+
onChange: (f) => A(i.name, f.target.value)
|
|
647
658
|
}
|
|
648
659
|
) : i.type === "select" ? /* @__PURE__ */ e(
|
|
649
|
-
|
|
660
|
+
Fe,
|
|
650
661
|
{
|
|
651
662
|
...N,
|
|
652
|
-
options:
|
|
663
|
+
options: tr(i.options),
|
|
653
664
|
placeholder: i.placeholder,
|
|
654
665
|
disabled: i.disabled || v,
|
|
655
666
|
value: String(w[i.name] ?? ""),
|
|
656
|
-
onChange: (
|
|
667
|
+
onChange: (f) => A(i.name, f)
|
|
657
668
|
}
|
|
658
669
|
) : i.type === "date" ? /* @__PURE__ */ e(
|
|
659
|
-
|
|
670
|
+
ce,
|
|
660
671
|
{
|
|
661
672
|
...N,
|
|
662
673
|
type: "date",
|
|
663
674
|
placeholder: i.placeholder,
|
|
664
675
|
disabled: i.disabled || v,
|
|
665
676
|
value: String(w[i.name] ?? ""),
|
|
666
|
-
onChange: (
|
|
677
|
+
onChange: (f) => A(i.name, f.target.value)
|
|
667
678
|
}
|
|
668
679
|
) : i.type === "boolean" ? /* @__PURE__ */ e(
|
|
669
|
-
|
|
680
|
+
Ie,
|
|
670
681
|
{
|
|
671
682
|
...N,
|
|
672
683
|
disabled: i.disabled || v,
|
|
673
684
|
checked: !!w[i.name],
|
|
674
|
-
onChange: (
|
|
685
|
+
onChange: (f) => A(i.name, f)
|
|
675
686
|
}
|
|
676
687
|
) : /* @__PURE__ */ e(
|
|
677
|
-
|
|
688
|
+
ce,
|
|
678
689
|
{
|
|
679
690
|
...N,
|
|
680
691
|
type: i.type ?? "text",
|
|
681
692
|
placeholder: i.placeholder,
|
|
682
693
|
disabled: i.disabled || v,
|
|
683
694
|
value: String(w[i.name] ?? ""),
|
|
684
|
-
onChange: (
|
|
695
|
+
onChange: (f) => A(i.name, i.type === "number" ? f.target.value === "" ? "" : Number(f.target.value) : f.target.value)
|
|
685
696
|
}
|
|
686
697
|
),
|
|
687
698
|
S ? /* @__PURE__ */ e("p", { id: `prui-form-${i.name}-error`, role: "alert", className: "text-xs text-[var(--prui-danger)]", children: S }) : null
|
|
688
699
|
] }, i.name);
|
|
689
700
|
}) }),
|
|
690
701
|
T ?? b ? /* @__PURE__ */ e("p", { role: "alert", "data-testid": "form-error", className: "rounded-[var(--prui-radius)] border border-[var(--prui-danger)]/40 bg-[var(--prui-danger)]/10 px-3 py-2 text-sm text-[var(--prui-danger)]", children: T ?? b }) : null,
|
|
691
|
-
/* @__PURE__ */
|
|
692
|
-
o ? /* @__PURE__ */ e(
|
|
693
|
-
/* @__PURE__ */ e(
|
|
702
|
+
/* @__PURE__ */ p("div", { className: "flex items-center justify-end gap-2", children: [
|
|
703
|
+
o ? /* @__PURE__ */ e(U, { type: "button", variant: "ghost", onClick: o, disabled: v, children: m ?? x.cancel }) : null,
|
|
704
|
+
/* @__PURE__ */ e(U, { type: "submit", variant: "primary", loading: v, children: y.submitLabel ?? "Submit" })
|
|
694
705
|
] })
|
|
695
706
|
] });
|
|
696
707
|
}
|
|
@@ -705,30 +716,30 @@ const jr = {
|
|
|
705
716
|
{ name: "error", type: "string | null", default: "null", control: "text" }
|
|
706
717
|
]
|
|
707
718
|
};
|
|
708
|
-
function
|
|
719
|
+
function qe(t) {
|
|
709
720
|
if (t)
|
|
710
|
-
return t.map((
|
|
721
|
+
return t.map((r) => typeof r == "string" || typeof r == "number" ? { label: String(r), value: String(r) } : r);
|
|
711
722
|
}
|
|
712
|
-
function
|
|
713
|
-
return { fields: t.filter((
|
|
723
|
+
function ar(t, r) {
|
|
724
|
+
return { fields: t.filter((a) => a.formField !== !1 && !a.hidden).filter((a) => a.key !== "id" && a.key !== "actions").map((a) => {
|
|
714
725
|
var o;
|
|
715
726
|
return {
|
|
716
|
-
name:
|
|
717
|
-
label: typeof
|
|
718
|
-
type:
|
|
719
|
-
options: (o =
|
|
727
|
+
name: a.key,
|
|
728
|
+
label: typeof a.label == "string" ? a.label : a.key,
|
|
729
|
+
type: nr(a, r),
|
|
730
|
+
options: (o = qe(a.filterOptions ?? a.options)) == null ? void 0 : o.map((m) => ({ label: m.label, value: m.value })),
|
|
720
731
|
required: !1
|
|
721
732
|
};
|
|
722
|
-
}), submitLabel:
|
|
733
|
+
}), submitLabel: r ? "Save" : "Create" };
|
|
723
734
|
}
|
|
724
|
-
function
|
|
725
|
-
return t.filter === "select" ? "select" : typeof (
|
|
735
|
+
function nr(t, r) {
|
|
736
|
+
return t.filter === "select" ? "select" : typeof (r == null ? void 0 : r[t.key]) == "number" || t.filter === "number" || t.filter === "numberrange" || t.filter === "price" ? "number" : t.filter === "date" || t.filter === "daterange" ? "date" : "text";
|
|
726
737
|
}
|
|
727
|
-
function
|
|
738
|
+
function Pr({
|
|
728
739
|
name: t,
|
|
729
|
-
columns:
|
|
740
|
+
columns: r,
|
|
730
741
|
list: n,
|
|
731
|
-
create:
|
|
742
|
+
create: a,
|
|
732
743
|
update: o,
|
|
733
744
|
remove: m,
|
|
734
745
|
delete: d,
|
|
@@ -736,7 +747,7 @@ function Mr({
|
|
|
736
747
|
form: k,
|
|
737
748
|
formSchema: x,
|
|
738
749
|
rowKey: y,
|
|
739
|
-
searchPlaceholder:
|
|
750
|
+
searchPlaceholder: j,
|
|
740
751
|
pageSize: w,
|
|
741
752
|
state: P,
|
|
742
753
|
defaultState: g,
|
|
@@ -744,16 +755,16 @@ function Mr({
|
|
|
744
755
|
onPageChange: b,
|
|
745
756
|
onFilterChange: R,
|
|
746
757
|
onSortChange: E,
|
|
747
|
-
onSearchChange:
|
|
758
|
+
onSearchChange: z,
|
|
748
759
|
onPageSizeChange: A,
|
|
749
760
|
onSelectionChange: O,
|
|
750
761
|
selectable: v,
|
|
751
762
|
renderExpandedRow: i,
|
|
752
763
|
virtualized: S,
|
|
753
764
|
searchDebounce: N = 250,
|
|
754
|
-
className:
|
|
765
|
+
className: f
|
|
755
766
|
}) {
|
|
756
|
-
const { t: c } =
|
|
767
|
+
const { t: c } = X(), h = m ?? d, B = T ?? ["create", "edit", "delete"], K = (s) => B.includes(s) && (s === "create" ? !!a : s === "edit" ? !!o : !!h), _ = l.useMemo(
|
|
757
768
|
() => ({
|
|
758
769
|
page: 1,
|
|
759
770
|
pageSize: w ?? (g == null ? void 0 : g.pageSize) ?? 20,
|
|
@@ -765,185 +776,185 @@ function Mr({
|
|
|
765
776
|
}),
|
|
766
777
|
// eslint-disable-next-line react-hooks/exhaustive-deps -- defaults are read once
|
|
767
778
|
[]
|
|
768
|
-
), [
|
|
769
|
-
() => ({ ...
|
|
770
|
-
[
|
|
771
|
-
),
|
|
779
|
+
), [J, ae] = l.useState(_), ne = l.useMemo(
|
|
780
|
+
() => ({ ...J, ...Object.fromEntries(Object.entries(P ?? {}).filter(([, s]) => s !== void 0)) }),
|
|
781
|
+
[J, P]
|
|
782
|
+
), I = l.useCallback(
|
|
772
783
|
(s) => {
|
|
773
|
-
|
|
774
|
-
const
|
|
775
|
-
for (const [
|
|
776
|
-
|
|
777
|
-
const
|
|
778
|
-
return u == null || u(
|
|
784
|
+
ae((D) => {
|
|
785
|
+
const V = { ...D }, G = P;
|
|
786
|
+
for (const [Q, it] of Object.entries(s))
|
|
787
|
+
G && Q in G && G[Q] !== void 0 || (V[Q] = it);
|
|
788
|
+
const re = { ...V, ...Object.fromEntries(Object.entries(P ?? {}).filter(([, Q]) => Q !== void 0)) };
|
|
789
|
+
return u == null || u(re), V;
|
|
779
790
|
});
|
|
780
791
|
},
|
|
781
792
|
[P, u]
|
|
782
|
-
), { page:
|
|
793
|
+
), { page: Y, pageSize: L, search: $, filters: M, sort: F, selection: le, expandedRows: He } = ne, [Xe, ue] = l.useState([]), [de, me] = l.useState(null), [Je, pe] = l.useState([null]), [Ye, fe] = l.useState(!0), [he, be] = l.useState(null), [q, ve] = l.useState(null), [We, W] = l.useState(!1), [ge, xe] = l.useState(!1), [se, Ge] = l.useState($);
|
|
783
794
|
l.useEffect(() => {
|
|
784
|
-
const s = setTimeout(() => Ge(
|
|
795
|
+
const s = setTimeout(() => Ge($), N);
|
|
785
796
|
return () => clearTimeout(s);
|
|
786
|
-
}, [
|
|
787
|
-
const
|
|
788
|
-
|
|
797
|
+
}, [$, N]);
|
|
798
|
+
const ye = Je[Y - 1] ?? null, we = JSON.stringify(M), Z = l.useCallback(async () => {
|
|
799
|
+
fe(!0), be(null);
|
|
789
800
|
try {
|
|
790
|
-
const s = await n({ search:
|
|
791
|
-
|
|
801
|
+
const s = await n({ search: se, cursor: ye, pageSize: L, sort: F, filters: M });
|
|
802
|
+
ue(s.rows), me(s.nextCursor ?? s.cursor ?? null);
|
|
792
803
|
} catch (s) {
|
|
793
|
-
|
|
804
|
+
be(s instanceof Error ? s.message : String(s)), ue([]), me(null);
|
|
794
805
|
} finally {
|
|
795
|
-
|
|
806
|
+
fe(!1);
|
|
796
807
|
}
|
|
797
|
-
}, [
|
|
808
|
+
}, [se, ye, L, F, we, n]);
|
|
798
809
|
l.useEffect(() => {
|
|
799
|
-
|
|
800
|
-
}, [
|
|
801
|
-
|
|
802
|
-
}, [
|
|
810
|
+
Z();
|
|
811
|
+
}, [Z]), l.useEffect(() => {
|
|
812
|
+
I({ page: 1 }), pe([null]);
|
|
813
|
+
}, [se, L, we]);
|
|
803
814
|
const Qe = l.useMemo(
|
|
804
|
-
() =>
|
|
815
|
+
() => r.filter((s) => s.filter).map((s) => ({
|
|
805
816
|
key: s.key,
|
|
806
817
|
label: typeof s.label == "string" ? s.label : s.key,
|
|
807
818
|
type: s.filter === "numberrange" ? "number" : s.filter,
|
|
808
|
-
options:
|
|
819
|
+
options: qe(s.filterOptions ?? s.options)
|
|
809
820
|
})),
|
|
810
|
-
[
|
|
821
|
+
[r]
|
|
811
822
|
), Ze = (s, D) => {
|
|
812
|
-
const
|
|
813
|
-
|
|
823
|
+
const V = { ...M, [s]: D };
|
|
824
|
+
I({ filters: V }), R == null || R(V);
|
|
814
825
|
}, et = (s) => {
|
|
815
|
-
|
|
826
|
+
I({ search: s }), z == null || z(s);
|
|
816
827
|
}, tt = (s) => {
|
|
817
|
-
|
|
828
|
+
I({ sort: s }), E == null || E(s);
|
|
818
829
|
}, rt = (s, D) => {
|
|
819
830
|
if (D === "next") {
|
|
820
|
-
const
|
|
821
|
-
|
|
822
|
-
const
|
|
823
|
-
return
|
|
831
|
+
const V = de;
|
|
832
|
+
pe((G) => {
|
|
833
|
+
const re = [...G];
|
|
834
|
+
return re[s - 1] = V, re;
|
|
824
835
|
});
|
|
825
836
|
}
|
|
826
|
-
|
|
837
|
+
I({ page: s }), b == null || b(s);
|
|
827
838
|
}, at = l.useMemo(
|
|
828
839
|
() => [
|
|
829
|
-
...
|
|
830
|
-
...
|
|
840
|
+
...r.filter((s) => !s.hidden),
|
|
841
|
+
...K("edit") || K("delete") ? [
|
|
831
842
|
{
|
|
832
843
|
key: "actions",
|
|
833
844
|
label: "",
|
|
834
845
|
align: "right",
|
|
835
|
-
render: (s) => /* @__PURE__ */
|
|
836
|
-
|
|
846
|
+
render: (s) => /* @__PURE__ */ p("div", { className: "flex items-center justify-end gap-1", children: [
|
|
847
|
+
K("edit") ? /* @__PURE__ */ e(U, { variant: "ghost", size: "icon", "aria-label": "Edit", onClick: () => {
|
|
837
848
|
var D;
|
|
838
|
-
return (D =
|
|
849
|
+
return (D = ee.current) == null ? void 0 : D.call(ee, s);
|
|
839
850
|
}, "data-testid": "resource-edit", children: /* @__PURE__ */ e(kt, { className: "h-3.5 w-3.5", "aria-hidden": !0 }) }) : null,
|
|
840
|
-
|
|
851
|
+
K("delete") ? /* @__PURE__ */ e(U, { variant: "ghost", size: "icon", "aria-label": "Delete", disabled: ge, onClick: () => {
|
|
841
852
|
var D;
|
|
842
|
-
return void ((D =
|
|
853
|
+
return void ((D = te.current) == null ? void 0 : D.call(te, s));
|
|
843
854
|
}, "data-testid": "resource-delete", children: /* @__PURE__ */ e(St, { className: "h-3.5 w-3.5 text-[var(--prui-danger)]", "aria-hidden": !0 }) }) : null
|
|
844
855
|
] })
|
|
845
856
|
}
|
|
846
857
|
] : []
|
|
847
858
|
],
|
|
848
859
|
// eslint-disable-next-line react-hooks/exhaustive-deps -- can() depends only on the action functions
|
|
849
|
-
[
|
|
860
|
+
[r, a, o, h, ge]
|
|
850
861
|
), nt = () => {
|
|
851
|
-
|
|
852
|
-
},
|
|
853
|
-
|
|
854
|
-
},
|
|
855
|
-
if (!(!await
|
|
862
|
+
ve(null), W(!0);
|
|
863
|
+
}, Ne = (s) => {
|
|
864
|
+
ve(s), W(!0);
|
|
865
|
+
}, ke = async (s) => {
|
|
866
|
+
if (!(!await It({
|
|
856
867
|
title: `${c.delete} ${H}?`,
|
|
857
868
|
message: c.deleteConfirmMessage,
|
|
858
869
|
confirmText: c.delete,
|
|
859
870
|
cancelText: c.cancel,
|
|
860
871
|
type: "danger"
|
|
861
872
|
}) || !h)) {
|
|
862
|
-
|
|
873
|
+
xe(!0);
|
|
863
874
|
try {
|
|
864
|
-
await h(s), await
|
|
875
|
+
await h(s), await Z();
|
|
865
876
|
} finally {
|
|
866
|
-
|
|
877
|
+
xe(!1);
|
|
867
878
|
}
|
|
868
879
|
}
|
|
869
|
-
},
|
|
870
|
-
|
|
871
|
-
const
|
|
872
|
-
|
|
880
|
+
}, ee = l.useRef(Ne);
|
|
881
|
+
ee.current = Ne;
|
|
882
|
+
const te = l.useRef(ke);
|
|
883
|
+
te.current = ke;
|
|
873
884
|
const lt = l.useCallback(
|
|
874
885
|
(s, D) => String(y ? y(s, D) : s.id ?? D),
|
|
875
886
|
[y]
|
|
876
|
-
),
|
|
877
|
-
|
|
887
|
+
), Se = x ?? ar(r, q), st = q ? Object.fromEntries(
|
|
888
|
+
Se.fields.map((s) => [s.name, q[s.name] ?? ""])
|
|
878
889
|
) : void 0, H = t.replace(/s$/, "");
|
|
879
|
-
return /* @__PURE__ */
|
|
890
|
+
return /* @__PURE__ */ p("div", { className: C("prui-resource flex flex-col gap-2", f), "data-testid": "resource", children: [
|
|
880
891
|
/* @__PURE__ */ e("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ e("h1", { className: "text-xl font-semibold capitalize text-[var(--prui-fg)]", children: t }) }),
|
|
881
892
|
/* @__PURE__ */ e(
|
|
882
|
-
|
|
893
|
+
Lt,
|
|
883
894
|
{
|
|
884
|
-
searchPlaceholder:
|
|
885
|
-
searchValue:
|
|
895
|
+
searchPlaceholder: j ?? c.searchEntity.replace("{name}", t),
|
|
896
|
+
searchValue: $,
|
|
886
897
|
onSearchChange: et,
|
|
887
898
|
filters: Qe,
|
|
888
|
-
filterValues:
|
|
899
|
+
filterValues: M,
|
|
889
900
|
onFilterChange: Ze,
|
|
890
|
-
actions:
|
|
901
|
+
actions: K("create") ? /* @__PURE__ */ p(U, { variant: "primary", size: "sm", onClick: nt, "data-testid": "resource-create", children: [
|
|
891
902
|
/* @__PURE__ */ e(Tt, { className: "h-4 w-4", "aria-hidden": !0 }),
|
|
892
903
|
c.newEntity.replace("{name}", H)
|
|
893
904
|
] }) : void 0
|
|
894
905
|
}
|
|
895
906
|
),
|
|
896
|
-
|
|
907
|
+
he ? /* @__PURE__ */ e("div", { role: "alert", "data-testid": "resource-error", className: "rounded-[var(--prui-radius)] border border-[var(--prui-danger)]/40 bg-[var(--prui-danger)]/10 px-3 py-2 text-sm text-[var(--prui-danger)]", children: he }) : null,
|
|
897
908
|
/* @__PURE__ */ e(
|
|
898
|
-
|
|
909
|
+
Kt,
|
|
899
910
|
{
|
|
900
911
|
columns: at,
|
|
901
|
-
rows:
|
|
912
|
+
rows: Xe,
|
|
902
913
|
rowKey: lt,
|
|
903
|
-
sort:
|
|
914
|
+
sort: F,
|
|
904
915
|
onSortChange: tt,
|
|
905
|
-
loading:
|
|
916
|
+
loading: Ye,
|
|
906
917
|
selectable: v,
|
|
907
|
-
selectedRowKeys:
|
|
918
|
+
selectedRowKeys: le,
|
|
908
919
|
onSelectionChange: (s, D) => {
|
|
909
|
-
|
|
920
|
+
I({ selection: s }), O == null || O(s, D);
|
|
910
921
|
},
|
|
911
922
|
renderExpandedRow: i,
|
|
912
923
|
expandedRowKeys: He,
|
|
913
|
-
onExpandedRowsChange: (s) =>
|
|
924
|
+
onExpandedRowsChange: (s) => I({ expandedRows: s }),
|
|
914
925
|
virtualized: S
|
|
915
926
|
}
|
|
916
927
|
),
|
|
917
928
|
/* @__PURE__ */ e(
|
|
918
|
-
|
|
929
|
+
Bt,
|
|
919
930
|
{
|
|
920
|
-
page:
|
|
921
|
-
pageSize:
|
|
922
|
-
hasNextPage:
|
|
923
|
-
hasPreviousPage:
|
|
931
|
+
page: Y,
|
|
932
|
+
pageSize: L,
|
|
933
|
+
hasNextPage: de != null,
|
|
934
|
+
hasPreviousPage: Y > 1,
|
|
924
935
|
onPageChange: rt,
|
|
925
936
|
onPageSizeChange: (s) => {
|
|
926
|
-
|
|
937
|
+
I({ pageSize: s }), A == null || A(s);
|
|
927
938
|
}
|
|
928
939
|
}
|
|
929
940
|
),
|
|
930
|
-
/* @__PURE__ */
|
|
931
|
-
/* @__PURE__ */ e("div", { className: "px-8 pt-8 pb-2", children: /* @__PURE__ */ e("h2", { className: "text-lg font-semibold", style: { color: "var(--prui-fg)" }, children:
|
|
941
|
+
/* @__PURE__ */ p($e, { open: We, onClose: () => W(!1), size: "sm", ariaLabel: q ? c.editEntity.replace("{name}", H) : c.newEntity.replace("{name}", H), noPadding: !0, children: [
|
|
942
|
+
/* @__PURE__ */ e("div", { className: "px-8 pt-8 pb-2", children: /* @__PURE__ */ e("h2", { className: "text-lg font-semibold", style: { color: "var(--prui-fg)" }, children: q ? c.editEntity.replace("{name}", H) : c.newEntity.replace("{name}", H) }) }),
|
|
932
943
|
/* @__PURE__ */ e("div", { className: "px-8 pb-8", children: k ?? /* @__PURE__ */ e(
|
|
933
|
-
|
|
944
|
+
rr,
|
|
934
945
|
{
|
|
935
|
-
schema:
|
|
946
|
+
schema: Se,
|
|
936
947
|
initialValues: st,
|
|
937
948
|
onCancel: () => W(!1),
|
|
938
949
|
onSubmit: async (s) => {
|
|
939
|
-
|
|
950
|
+
q ? await (o == null ? void 0 : o(q, s)) : await (a == null ? void 0 : a(s)), W(!1), await Z();
|
|
940
951
|
}
|
|
941
952
|
}
|
|
942
953
|
) })
|
|
943
954
|
] })
|
|
944
955
|
] });
|
|
945
956
|
}
|
|
946
|
-
const
|
|
957
|
+
const Or = {
|
|
947
958
|
name: "Resource",
|
|
948
959
|
props: [
|
|
949
960
|
{ name: "name", type: "string", default: null, control: "text" },
|
|
@@ -972,18 +983,18 @@ const Pr = {
|
|
|
972
983
|
{ name: "searchDebounce", type: "number (ms)", default: "250", control: "number" }
|
|
973
984
|
]
|
|
974
985
|
};
|
|
975
|
-
function
|
|
976
|
-
return /* @__PURE__ */ e("div", { className: C("prui-stat-row grid gap-3 sm:grid-cols-2 lg:grid-cols-4",
|
|
986
|
+
function Dr({ items: t, className: r }) {
|
|
987
|
+
return /* @__PURE__ */ e("div", { className: C("prui-stat-row grid gap-3 sm:grid-cols-2 lg:grid-cols-4", r), children: t.map((n, a) => {
|
|
977
988
|
const o = n.icon;
|
|
978
|
-
return /* @__PURE__ */
|
|
979
|
-
/* @__PURE__ */
|
|
980
|
-
/* @__PURE__ */
|
|
989
|
+
return /* @__PURE__ */ p(Le, { "data-testid": "stat-card", children: [
|
|
990
|
+
/* @__PURE__ */ p(Ke, { className: "pb-2", children: [
|
|
991
|
+
/* @__PURE__ */ p(Be, { className: "flex items-center gap-1.5 text-xs", children: [
|
|
981
992
|
o ? /* @__PURE__ */ e(o, { className: "h-3.5 w-3.5", "aria-hidden": !0 }) : null,
|
|
982
993
|
n.label
|
|
983
994
|
] }),
|
|
984
|
-
/* @__PURE__ */ e(
|
|
995
|
+
/* @__PURE__ */ e(Ue, { className: "text-2xl", children: n.value })
|
|
985
996
|
] }),
|
|
986
|
-
n.delta ? /* @__PURE__ */ e(
|
|
997
|
+
n.delta ? /* @__PURE__ */ e(Ve, { className: "pb-3", children: /* @__PURE__ */ e(
|
|
987
998
|
"span",
|
|
988
999
|
{
|
|
989
1000
|
className: C(
|
|
@@ -995,106 +1006,106 @@ function Or({ items: t, className: a }) {
|
|
|
995
1006
|
children: n.delta
|
|
996
1007
|
}
|
|
997
1008
|
) }) : null
|
|
998
|
-
] }, `${n.label}-${
|
|
1009
|
+
] }, `${n.label}-${a}`);
|
|
999
1010
|
}) });
|
|
1000
1011
|
}
|
|
1001
|
-
const
|
|
1012
|
+
const Ar = {
|
|
1002
1013
|
name: "StatRow",
|
|
1003
1014
|
props: [
|
|
1004
1015
|
{ name: "items", type: "StatItem[]", default: null, control: "object" },
|
|
1005
1016
|
{ name: "className", type: "string", default: "undefined", control: "text" }
|
|
1006
1017
|
]
|
|
1007
1018
|
};
|
|
1008
|
-
function
|
|
1019
|
+
function lr(t) {
|
|
1009
1020
|
if (t)
|
|
1010
|
-
return t.map((
|
|
1021
|
+
return t.map((r) => typeof r == "string" || typeof r == "number" ? { label: String(r), value: String(r) } : r);
|
|
1011
1022
|
}
|
|
1012
|
-
function
|
|
1013
|
-
const { name:
|
|
1014
|
-
if (!n || !
|
|
1015
|
-
const m = `prui-settings-${
|
|
1023
|
+
function sr({ field: t }) {
|
|
1024
|
+
const { name: r, type: n, value: a, onChange: o } = t;
|
|
1025
|
+
if (!n || !r) return null;
|
|
1026
|
+
const m = `prui-settings-${r}`;
|
|
1016
1027
|
return n === "switch" ? /* @__PURE__ */ e("label", { className: "flex items-center gap-2", htmlFor: m, children: /* @__PURE__ */ e(
|
|
1017
|
-
|
|
1028
|
+
Ie,
|
|
1018
1029
|
{
|
|
1019
1030
|
id: m,
|
|
1020
|
-
checked: !!
|
|
1031
|
+
checked: !!a,
|
|
1021
1032
|
onChange: (d) => o == null ? void 0 : o(d),
|
|
1022
1033
|
"aria-label": t.label
|
|
1023
1034
|
}
|
|
1024
1035
|
) }) : n === "select" ? /* @__PURE__ */ e(
|
|
1025
|
-
|
|
1036
|
+
Fe,
|
|
1026
1037
|
{
|
|
1027
1038
|
id: m,
|
|
1028
1039
|
className: "w-56",
|
|
1029
|
-
options:
|
|
1030
|
-
value: String(
|
|
1040
|
+
options: lr(t.options) ?? [],
|
|
1041
|
+
value: String(a ?? ""),
|
|
1031
1042
|
onChange: (d) => o == null ? void 0 : o(Array.isArray(d) ? d.join(",") : d),
|
|
1032
1043
|
"aria-label": t.label
|
|
1033
1044
|
}
|
|
1034
1045
|
) : /* @__PURE__ */ e(
|
|
1035
|
-
|
|
1046
|
+
ce,
|
|
1036
1047
|
{
|
|
1037
1048
|
id: m,
|
|
1038
1049
|
type: n === "number" ? "number" : "text",
|
|
1039
1050
|
className: "h-8 w-56",
|
|
1040
|
-
value: String(
|
|
1051
|
+
value: String(a ?? ""),
|
|
1041
1052
|
onChange: (d) => o == null ? void 0 : o(n === "number" ? d.target.value === "" ? "" : Number(d.target.value) : d.target.value),
|
|
1042
1053
|
"aria-label": t.label
|
|
1043
1054
|
}
|
|
1044
1055
|
);
|
|
1045
1056
|
}
|
|
1046
|
-
function
|
|
1047
|
-
return /* @__PURE__ */
|
|
1057
|
+
function zr({ title: t = "Settings", sections: r, className: n }) {
|
|
1058
|
+
return /* @__PURE__ */ p("div", { className: C("prui-settings mx-auto flex w-full max-w-4xl flex-col gap-6", n), children: [
|
|
1048
1059
|
/* @__PURE__ */ e("h1", { className: "text-xl font-semibold text-[var(--prui-fg)]", children: t }),
|
|
1049
|
-
/* @__PURE__ */
|
|
1050
|
-
/* @__PURE__ */ e("nav", { "aria-label": "Settings sections", className: "md:w-56 md:shrink-0", children: /* @__PURE__ */ e("ul", { className: "flex flex-row flex-wrap gap-1 md:flex-col", children:
|
|
1060
|
+
/* @__PURE__ */ p("div", { className: "flex flex-col gap-6 md:flex-row", children: [
|
|
1061
|
+
/* @__PURE__ */ e("nav", { "aria-label": "Settings sections", className: "md:w-56 md:shrink-0", children: /* @__PURE__ */ e("ul", { className: "flex flex-row flex-wrap gap-1 md:flex-col", children: r.map((a) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
|
|
1051
1062
|
"a",
|
|
1052
1063
|
{
|
|
1053
|
-
href: `#settings-${
|
|
1064
|
+
href: `#settings-${a.id}`,
|
|
1054
1065
|
className: "block rounded-[var(--prui-radius)] px-2.5 py-1.5 text-sm text-[var(--prui-dim)] hover:bg-[var(--prui-raise)] hover:text-[var(--prui-fg)]",
|
|
1055
|
-
children:
|
|
1066
|
+
children: a.title ?? a.label ?? a.id
|
|
1056
1067
|
}
|
|
1057
|
-
) },
|
|
1058
|
-
/* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children:
|
|
1059
|
-
/* @__PURE__ */
|
|
1060
|
-
/* @__PURE__ */ e(
|
|
1061
|
-
|
|
1068
|
+
) }, a.id)) }) }),
|
|
1069
|
+
/* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: r.map((a) => /* @__PURE__ */ p(Le, { id: `settings-${a.id}`, "data-testid": "settings-section", children: [
|
|
1070
|
+
/* @__PURE__ */ p(Ke, { children: [
|
|
1071
|
+
/* @__PURE__ */ e(Ue, { children: a.title ?? a.label ?? a.id }),
|
|
1072
|
+
a.description ? /* @__PURE__ */ e(Be, { children: a.description }) : null
|
|
1062
1073
|
] }),
|
|
1063
|
-
/* @__PURE__ */ e(
|
|
1064
|
-
/* @__PURE__ */
|
|
1074
|
+
/* @__PURE__ */ e(Ve, { children: a.content ?? /* @__PURE__ */ e("dl", { className: "flex flex-col divide-y divide-[var(--prui-line)]", children: (a.fields ?? []).map((o, m) => /* @__PURE__ */ p("div", { className: "flex flex-col gap-2 py-3 first:pt-0 last:pb-0 sm:flex-row sm:items-center sm:justify-between", children: [
|
|
1075
|
+
/* @__PURE__ */ p("div", { className: "min-w-0", children: [
|
|
1065
1076
|
/* @__PURE__ */ e("dt", { className: "text-sm font-medium text-[var(--prui-fg)]", children: o.label }),
|
|
1066
1077
|
o.description ? /* @__PURE__ */ e("dd", { className: "text-xs text-[var(--prui-dim)]", children: o.description }) : null
|
|
1067
1078
|
] }),
|
|
1068
|
-
/* @__PURE__ */ e("div", { className: "shrink-0", children: o.control ?? /* @__PURE__ */ e(
|
|
1079
|
+
/* @__PURE__ */ e("div", { className: "shrink-0", children: o.control ?? /* @__PURE__ */ e(sr, { field: o }) })
|
|
1069
1080
|
] }, `${o.label}-${m}`)) }) })
|
|
1070
|
-
] },
|
|
1081
|
+
] }, a.id)) })
|
|
1071
1082
|
] })
|
|
1072
1083
|
] });
|
|
1073
1084
|
}
|
|
1074
|
-
const
|
|
1085
|
+
const $r = {
|
|
1075
1086
|
name: "Settings",
|
|
1076
1087
|
props: [
|
|
1077
1088
|
{ name: "title", type: "string", default: "'Settings'", control: "text" },
|
|
1078
1089
|
{ name: "sections", type: "SettingsSection[]", default: null, control: "object" }
|
|
1079
1090
|
]
|
|
1080
1091
|
}, je = ["mousedown", "keydown", "scroll", "touchstart", "click"];
|
|
1081
|
-
function
|
|
1092
|
+
function ir({
|
|
1082
1093
|
timeout: t = 15,
|
|
1083
|
-
warningTime:
|
|
1094
|
+
warningTime: r = 2,
|
|
1084
1095
|
onTimeout: n,
|
|
1085
|
-
onExtend:
|
|
1096
|
+
onExtend: a,
|
|
1086
1097
|
title: o = "Session expiring soon",
|
|
1087
1098
|
message: m = "Your session is about to expire due to inactivity."
|
|
1088
1099
|
}) {
|
|
1089
|
-
const d = Math.max(0, t) * 6e4, T = Math.min(Math.max(0,
|
|
1100
|
+
const d = Math.max(0, t) * 6e4, T = Math.min(Math.max(0, r) * 6e4, d), [k, x] = l.useState(!1), [y, j] = l.useState(T), w = l.useRef(null), P = l.useRef(null), g = l.useRef(null), u = l.useRef(!1), b = l.useCallback(() => {
|
|
1090
1101
|
for (const i of [w, P, g])
|
|
1091
1102
|
i.current != null && (clearInterval(i.current), clearTimeout(i.current), i.current = null);
|
|
1092
1103
|
}, []), R = l.useCallback(() => {
|
|
1093
1104
|
b(), x(!1), n == null || n();
|
|
1094
1105
|
}, [b, n]), E = l.useCallback(() => {
|
|
1095
1106
|
b(), x(!1), u.current = !1, w.current = window.setTimeout(() => {
|
|
1096
|
-
u.current = !0,
|
|
1097
|
-
|
|
1107
|
+
u.current = !0, j(T), x(!0), g.current = window.setInterval(() => {
|
|
1108
|
+
j((i) => i <= 1e3 ? (R(), 0) : i - 1e3);
|
|
1098
1109
|
}, 1e3);
|
|
1099
1110
|
}, d - T), P.current = window.setTimeout(R, d);
|
|
1100
1111
|
}, [b, R, d, T]);
|
|
@@ -1108,32 +1119,32 @@ function sr({
|
|
|
1108
1119
|
for (const S of je) document.removeEventListener(S, i);
|
|
1109
1120
|
};
|
|
1110
1121
|
}, [E, b]);
|
|
1111
|
-
const
|
|
1112
|
-
|
|
1122
|
+
const z = () => {
|
|
1123
|
+
a == null || a(), E();
|
|
1113
1124
|
}, A = Math.floor(y / 6e4), O = Math.floor(y % 6e4 / 1e3), v = `${A}:${String(O).padStart(2, "0")}`;
|
|
1114
|
-
return /* @__PURE__ */
|
|
1115
|
-
|
|
1125
|
+
return /* @__PURE__ */ p(
|
|
1126
|
+
$e,
|
|
1116
1127
|
{
|
|
1117
1128
|
open: k,
|
|
1118
|
-
onClose:
|
|
1129
|
+
onClose: z,
|
|
1119
1130
|
size: "sm",
|
|
1120
1131
|
ariaLabel: o,
|
|
1121
1132
|
children: [
|
|
1122
|
-
/* @__PURE__ */
|
|
1133
|
+
/* @__PURE__ */ p("div", { className: "flex flex-col items-center gap-1 px-8 pb-2 pt-8 text-center", children: [
|
|
1123
1134
|
/* @__PURE__ */ e("div", { className: "mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-[var(--prui-warn)]/15", children: /* @__PURE__ */ e(Ct, { className: "h-6 w-6 text-[var(--prui-warn)]", "aria-hidden": !0 }) }),
|
|
1124
1135
|
/* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-[var(--prui-fg)]", children: o }),
|
|
1125
1136
|
/* @__PURE__ */ e("p", { className: "text-sm text-[var(--prui-dim)]", children: m }),
|
|
1126
1137
|
/* @__PURE__ */ e("div", { className: "py-4 font-mono text-4xl font-bold text-[var(--prui-fg)]", "data-testid": "session-countdown", children: v })
|
|
1127
1138
|
] }),
|
|
1128
|
-
/* @__PURE__ */
|
|
1129
|
-
/* @__PURE__ */ e(
|
|
1130
|
-
/* @__PURE__ */ e(
|
|
1139
|
+
/* @__PURE__ */ p("div", { className: "flex flex-col gap-2 px-8 pb-8 sm:flex-row", children: [
|
|
1140
|
+
/* @__PURE__ */ e(U, { variant: "default", className: "flex-1", onClick: R, "data-testid": "session-logout", children: "Log out now" }),
|
|
1141
|
+
/* @__PURE__ */ e(U, { variant: "primary", className: "flex-1", onClick: z, "data-testid": "session-extend", children: "Continue session" })
|
|
1131
1142
|
] })
|
|
1132
1143
|
]
|
|
1133
1144
|
}
|
|
1134
1145
|
);
|
|
1135
1146
|
}
|
|
1136
|
-
const
|
|
1147
|
+
const or = {
|
|
1137
1148
|
name: "SessionTimeout",
|
|
1138
1149
|
props: [
|
|
1139
1150
|
{ name: "timeout", type: "number", default: "15", control: "number" },
|
|
@@ -1141,28 +1152,28 @@ const ir = {
|
|
|
1141
1152
|
{ name: "onTimeout", type: "() => void", default: null, control: "none" },
|
|
1142
1153
|
{ name: "onExtend", type: "() => void", default: null, control: "none" }
|
|
1143
1154
|
]
|
|
1144
|
-
},
|
|
1155
|
+
}, cr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1145
1156
|
__proto__: null,
|
|
1146
|
-
SessionTimeout:
|
|
1147
|
-
sessionTimeoutPropsMeta:
|
|
1157
|
+
SessionTimeout: ir,
|
|
1158
|
+
sessionTimeoutPropsMeta: or
|
|
1148
1159
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
1149
|
-
function
|
|
1150
|
-
return /* @__PURE__ */ e("div", { className: C("prui-auth-shell flex min-h-[100dvh] items-center justify-center bg-[var(--prui-background)] p-4", d), "data-testid": "auth-shell", children: /* @__PURE__ */
|
|
1151
|
-
n ? /* @__PURE__ */
|
|
1160
|
+
function Fr({ title: t, description: r, brand: n, width: a = "max-w-sm", footer: o, children: m, className: d }) {
|
|
1161
|
+
return /* @__PURE__ */ e("div", { className: C("prui-auth-shell flex min-h-[100dvh] items-center justify-center bg-[var(--prui-background)] p-4", d), "data-testid": "auth-shell", children: /* @__PURE__ */ p("div", { className: C("w-full", a), children: [
|
|
1162
|
+
n ? /* @__PURE__ */ p("div", { className: "mb-6 flex items-center justify-center gap-2", "data-testid": "auth-shell-brand", children: [
|
|
1152
1163
|
n.mark ? /* @__PURE__ */ e("img", { src: n.mark, alt: "", className: "h-8 w-8 rounded-[var(--prui-radius-1)] object-cover" }) : null,
|
|
1153
1164
|
/* @__PURE__ */ e("span", { className: "text-lg font-semibold text-[var(--prui-fg)]", children: n.name })
|
|
1154
1165
|
] }) : null,
|
|
1155
|
-
/* @__PURE__ */
|
|
1156
|
-
/* @__PURE__ */
|
|
1166
|
+
/* @__PURE__ */ p("div", { className: "rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-surface)] p-6", children: [
|
|
1167
|
+
/* @__PURE__ */ p("div", { className: "mb-4 flex flex-col gap-1 text-center", children: [
|
|
1157
1168
|
/* @__PURE__ */ e("h1", { className: "text-lg font-semibold text-[var(--prui-fg)]", children: t }),
|
|
1158
|
-
|
|
1169
|
+
r ? /* @__PURE__ */ e("p", { className: "text-sm text-[var(--prui-dim)]", children: r }) : null
|
|
1159
1170
|
] }),
|
|
1160
1171
|
m,
|
|
1161
1172
|
o ? /* @__PURE__ */ e("div", { className: "mt-4 text-center text-sm text-[var(--prui-dim)]", children: o }) : null
|
|
1162
1173
|
] })
|
|
1163
1174
|
] }) });
|
|
1164
1175
|
}
|
|
1165
|
-
const
|
|
1176
|
+
const Ir = {
|
|
1166
1177
|
name: "AuthShell",
|
|
1167
1178
|
props: [
|
|
1168
1179
|
{ name: "title", type: "string", default: null, control: "text" },
|
|
@@ -1174,23 +1185,23 @@ const Fr = {
|
|
|
1174
1185
|
]
|
|
1175
1186
|
};
|
|
1176
1187
|
export {
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1188
|
+
Er as A,
|
|
1189
|
+
Qt as C,
|
|
1190
|
+
rr as F,
|
|
1191
|
+
Pr as R,
|
|
1192
|
+
ir as S,
|
|
1193
|
+
Zt as a,
|
|
1194
|
+
Fr as b,
|
|
1195
|
+
Ht as c,
|
|
1196
|
+
zr as d,
|
|
1197
|
+
Ee as e,
|
|
1198
|
+
Dr as f,
|
|
1199
|
+
Mr as g,
|
|
1200
|
+
Ir as h,
|
|
1190
1201
|
jr as i,
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1202
|
+
$r as j,
|
|
1203
|
+
Ar as k,
|
|
1204
|
+
Or as r,
|
|
1205
|
+
or as s,
|
|
1195
1206
|
Jt as u
|
|
1196
1207
|
};
|