@skiddph/prui 0.7.0 → 0.8.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/resource.d.ts +44 -1
- package/dist/app.js +1 -1
- package/dist/chunks/auth-shell-DQJ4UmUv.js +1208 -0
- package/dist/chunks/data-table-toolbar-B-5J2Ozl.js +736 -0
- package/dist/core/accordion.d.ts +16 -0
- package/dist/core/accordion.js +108 -0
- package/dist/core/alert.d.ts +20 -0
- package/dist/core/alert.js +63 -0
- package/dist/core/anchor.d.ts +35 -0
- package/dist/core/anchor.js +39 -0
- package/dist/core/breadcrumb.d.ts +30 -0
- package/dist/core/breadcrumb.js +67 -0
- package/dist/core/button.d.ts +8 -1
- package/dist/core/button.js +23 -18
- package/dist/core/calendar.d.ts +29 -0
- package/dist/core/calendar.js +180 -0
- package/dist/core/card.d.ts +5 -1
- package/dist/core/card.js +33 -29
- package/dist/core/checkbox.d.ts +19 -0
- package/dist/core/checkbox.js +55 -0
- package/dist/core/combobox.d.ts +32 -0
- package/dist/core/combobox.js +183 -0
- package/dist/core/date-picker.d.ts +41 -0
- package/dist/core/date-picker.js +202 -0
- package/dist/core/dialog.d.ts +8 -0
- package/dist/core/dialog.js +59 -61
- package/dist/core/drawer.d.ts +34 -0
- package/dist/core/drawer.js +129 -0
- package/dist/core/dropdown.d.ts +8 -4
- package/dist/core/dropdown.js +136 -51
- package/dist/core/file-upload.d.ts +28 -0
- package/dist/core/file-upload.js +111 -0
- package/dist/core/index.d.ts +21 -0
- package/dist/core/list-nav.d.ts +27 -0
- package/dist/core/list-nav.js +51 -0
- package/dist/core/modal.d.ts +14 -5
- package/dist/core/modal.js +163 -156
- package/dist/core/overlay.d.ts +93 -0
- package/dist/core/overlay.js +189 -0
- package/dist/core/popover.d.ts +29 -0
- package/dist/core/popover.js +124 -0
- package/dist/core/progress.d.ts +21 -0
- package/dist/core/progress.js +59 -0
- package/dist/core/radio.d.ts +20 -0
- package/dist/core/radio.js +115 -0
- package/dist/core/select.d.ts +6 -0
- package/dist/core/select.js +178 -97
- package/dist/core/skeleton.d.ts +20 -0
- package/dist/core/skeleton.js +41 -0
- package/dist/core/spinner.d.ts +15 -0
- package/dist/core/spinner.js +41 -0
- package/dist/core/tabs.js +82 -53
- package/dist/core/timeline.d.ts +22 -0
- package/dist/core/timeline.js +57 -0
- package/dist/core/toast.d.ts +36 -0
- package/dist/core/toast.js +123 -0
- package/dist/core/tooltip.d.ts +23 -0
- package/dist/core/tooltip.js +96 -0
- package/dist/core/tree-view.d.ts +34 -0
- package/dist/core/tree-view.js +133 -0
- package/dist/core.js +152 -62
- package/dist/data-table/data-table.d.ts +22 -1
- package/dist/data-table.js +1 -1
- package/dist/forms/form.d.ts +8 -0
- package/dist/forms.js +213 -200
- package/dist/i18n/index.d.ts +83 -0
- package/dist/i18n.js +99 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +256 -156
- package/dist/prui-utilities.css +1 -1
- package/dist/prui.css +111 -4
- package/dist/theme/base.css +110 -3
- package/dist/theme/index.d.ts +27 -0
- package/dist/theme.js +86 -58
- package/package.json +9 -2
- package/dist/chunks/auth-shell-BG5vx9eG.js +0 -1054
- package/dist/chunks/data-table-toolbar-BUy2EWPy.js +0 -581
package/dist/forms.js
CHANGED
|
@@ -1,304 +1,317 @@
|
|
|
1
1
|
import { jsx as v, jsxs as O } from "react/jsx-runtime";
|
|
2
|
-
import * as
|
|
3
|
-
import { Button as
|
|
4
|
-
import { Textarea as
|
|
5
|
-
import { Label as
|
|
6
|
-
import { Select as
|
|
7
|
-
import { Switch as
|
|
8
|
-
import { cn as
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
2
|
+
import * as p from "react";
|
|
3
|
+
import { Button as z } from "./core/button.js";
|
|
4
|
+
import { Textarea as W, Input as H } from "./core/input.js";
|
|
5
|
+
import { Label as J } from "./core/label.js";
|
|
6
|
+
import { Select as K } from "./core/select.js";
|
|
7
|
+
import { Switch as Q } from "./core/switch.js";
|
|
8
|
+
import { cn as N } from "./core/cn.js";
|
|
9
|
+
import { getPruiDictionary as U } from "./i18n.js";
|
|
10
|
+
const T = /* @__PURE__ */ new Map();
|
|
11
|
+
function X(e) {
|
|
12
|
+
return T.set(e.id, e), () => {
|
|
13
|
+
T.get(e.id) === e && T.delete(e.id);
|
|
13
14
|
};
|
|
14
15
|
}
|
|
15
|
-
function
|
|
16
|
-
return
|
|
16
|
+
function A(e) {
|
|
17
|
+
return T.get(e);
|
|
17
18
|
}
|
|
18
|
-
function
|
|
19
|
-
return [...
|
|
19
|
+
function pe() {
|
|
20
|
+
return [...T.keys()];
|
|
20
21
|
}
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
const Y = () => U(), M = (e, r) => e.replace(/\{(\w+)\}/g, (s, o) => String(r[o] ?? ""));
|
|
23
|
+
let R = !1;
|
|
24
|
+
function Z() {
|
|
25
|
+
var e;
|
|
26
|
+
R || typeof process < "u" && ((e = process.env) == null ? void 0 : e.NODE_ENV) === "test" || (R = !0, console.warn(
|
|
27
|
+
"[prui] The registry-driven <Form> from '@skiddph/prui/forms' is deprecated. Migrate to the schema-driven <Form> from '@skiddph/prui/app' — see the Forms page migration notes. This implementation keeps working and will not be removed before v2."
|
|
28
|
+
));
|
|
26
29
|
}
|
|
27
|
-
|
|
28
|
-
|
|
30
|
+
const q = p.createContext(null);
|
|
31
|
+
function ee() {
|
|
32
|
+
const e = p.useContext(q);
|
|
33
|
+
if (!e) throw new Error("Form components must be rendered inside <Form>.");
|
|
34
|
+
return e;
|
|
29
35
|
}
|
|
30
|
-
function
|
|
31
|
-
|
|
32
|
-
return r.required && _(t) ? `${r.label} is required.` : _(t) ? null : r.minLength !== void 0 && String(t).length < r.minLength ? `${r.label} must be at least ${r.minLength} characters.` : r.maxLength !== void 0 && String(t).length > r.maxLength ? `${r.label} must be at most ${r.maxLength} characters.` : r.min !== void 0 && typeof t == "number" && t < r.min ? `${r.label} must be ${r.min} or more.` : r.max !== void 0 && typeof t == "number" && t > r.max ? `${r.label} must be ${r.max} or less.` : r.pattern && !r.pattern.test(String(t)) ? r.patternMessage ?? `${r.label} has an invalid format.` : ((i = r.validate) == null ? void 0 : i.call(r, t, o)) ?? null;
|
|
36
|
+
function G(e) {
|
|
37
|
+
return e == null || e === "" || Array.isArray(e) && e.length === 0;
|
|
33
38
|
}
|
|
34
|
-
function
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
39
|
+
function _(e, r, s) {
|
|
40
|
+
var c;
|
|
41
|
+
const o = Y();
|
|
42
|
+
return r.required && G(e) ? M(o.requiredField, { label: r.label }) : G(e) ? null : r.minLength !== void 0 && String(e).length < r.minLength ? M(o.minLength, { label: r.label, min: r.minLength }) : r.maxLength !== void 0 && String(e).length > r.maxLength ? M(o.maxLength, { label: r.label, max: r.maxLength }) : r.min !== void 0 && typeof e == "number" && e < r.min ? M(o.minNumber, { label: r.label, min: r.min }) : r.max !== void 0 && typeof e == "number" && e > r.max ? M(o.maxNumber, { label: r.label, max: r.max }) : r.pattern && !r.pattern.test(String(e)) ? r.patternMessage ?? M(o.invalidFormat, { label: r.label }) : ((c = r.validate) == null ? void 0 : c.call(r, e, s)) ?? null;
|
|
43
|
+
}
|
|
44
|
+
function ge({ id: e, children: r, schema: s, initialValues: o = {}, onSubmit: c, onReset: g, validateOnChange: a = !0, className: h }) {
|
|
45
|
+
p.useEffect(() => {
|
|
46
|
+
Z();
|
|
47
|
+
}, []);
|
|
48
|
+
const [l, m] = p.useState({ ...o }), [w, b] = p.useState({}), [L, y] = p.useState(null), S = p.useRef(/* @__PURE__ */ new Map()), C = p.useRef(/* @__PURE__ */ new Set()), D = p.useRef({ ...o }), $ = () => {
|
|
49
|
+
let t = !0;
|
|
50
|
+
for (const [i, u] of S.current)
|
|
51
|
+
if (_(l[i], u, l) !== null) {
|
|
52
|
+
t = !1;
|
|
40
53
|
break;
|
|
41
54
|
}
|
|
42
|
-
|
|
43
|
-
const n = Object.keys(
|
|
44
|
-
return { isValid:
|
|
45
|
-
}, V = (
|
|
46
|
-
var
|
|
55
|
+
t && s && (s.safeParse(l).success || (t = !1));
|
|
56
|
+
const n = Object.keys(l).some((i) => l[i] !== D.current[i]) || Object.keys(D.current).length !== Object.keys(l).length;
|
|
57
|
+
return { isValid: t, isDirty: n, errorCount: Object.keys(w).length, values: { ...l } };
|
|
58
|
+
}, V = (t) => {
|
|
59
|
+
var i;
|
|
47
60
|
const n = {};
|
|
48
61
|
for (const [u, f] of S.current) {
|
|
49
|
-
const x =
|
|
62
|
+
const x = _(t[u], f, t);
|
|
50
63
|
x && (n[u] = x);
|
|
51
64
|
}
|
|
52
|
-
if (
|
|
53
|
-
const u =
|
|
65
|
+
if (s) {
|
|
66
|
+
const u = s.safeParse(t);
|
|
54
67
|
if (!u.success)
|
|
55
|
-
for (const f of ((
|
|
68
|
+
for (const f of ((i = u.error) == null ? void 0 : i.issues) ?? []) {
|
|
56
69
|
const x = String(f.path[0] ?? "");
|
|
57
70
|
x && !n[x] ? n[x] = f.message : x || (n.__form__ = f.message);
|
|
58
71
|
}
|
|
59
72
|
}
|
|
60
73
|
return n;
|
|
61
|
-
},
|
|
62
|
-
const
|
|
63
|
-
if (b(
|
|
74
|
+
}, I = async () => {
|
|
75
|
+
const t = V(l);
|
|
76
|
+
if (b(t), Object.keys(t).length > 0)
|
|
64
77
|
return y(null), !1;
|
|
65
78
|
y(null);
|
|
66
79
|
try {
|
|
67
|
-
return await (
|
|
80
|
+
return await (c == null ? void 0 : c({ ...l })), !0;
|
|
68
81
|
} catch (n) {
|
|
69
82
|
return y(n instanceof Error ? n.message : String(n)), !1;
|
|
70
83
|
}
|
|
84
|
+
}, E = () => {
|
|
85
|
+
m({ ...D.current }), b({}), y(null), g == null || g();
|
|
71
86
|
}, j = () => {
|
|
72
|
-
|
|
73
|
-
}, B = () => {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
for (const n of P.current) n(e);
|
|
78
|
-
}, $ = m.useMemo(
|
|
87
|
+
m({}), b({}), y(null);
|
|
88
|
+
}, F = (t, n) => m((i) => ({ ...i, [t]: n })), B = () => {
|
|
89
|
+
const t = $();
|
|
90
|
+
for (const n of C.current) n(t);
|
|
91
|
+
}, k = p.useMemo(
|
|
79
92
|
() => ({
|
|
80
|
-
id:
|
|
81
|
-
submit: async () =>
|
|
82
|
-
reset:
|
|
83
|
-
clear:
|
|
93
|
+
id: e,
|
|
94
|
+
submit: async () => I(),
|
|
95
|
+
reset: E,
|
|
96
|
+
clear: j,
|
|
84
97
|
setField: F,
|
|
85
|
-
getValue: (
|
|
86
|
-
getState: () =>
|
|
87
|
-
subscribe: (
|
|
98
|
+
getValue: (t) => l[t],
|
|
99
|
+
getState: () => $(),
|
|
100
|
+
subscribe: (t) => (C.current.add(t), () => C.current.delete(t))
|
|
88
101
|
}),
|
|
89
102
|
// eslint-disable-next-line react-hooks/exhaustive-deps -- the api closes over the latest render state
|
|
90
|
-
[
|
|
103
|
+
[e, l, w, s, c, g]
|
|
91
104
|
);
|
|
92
|
-
|
|
93
|
-
|
|
105
|
+
p.useEffect(() => X(k), [k]), p.useEffect(() => {
|
|
106
|
+
B();
|
|
94
107
|
});
|
|
95
|
-
const
|
|
96
|
-
id:
|
|
97
|
-
getValue: (
|
|
98
|
-
setValue: (
|
|
99
|
-
if (
|
|
100
|
-
const
|
|
101
|
-
if (
|
|
102
|
-
const u =
|
|
108
|
+
const P = {
|
|
109
|
+
id: e,
|
|
110
|
+
getValue: (t) => l[t],
|
|
111
|
+
setValue: (t, n) => {
|
|
112
|
+
if (m((i) => ({ ...i, [t]: n })), a) {
|
|
113
|
+
const i = S.current.get(t);
|
|
114
|
+
if (i) {
|
|
115
|
+
const u = _(n, i, { ...l, [t]: n });
|
|
103
116
|
b((f) => {
|
|
104
|
-
if (u) return { ...f, [
|
|
105
|
-
if (!(
|
|
117
|
+
if (u) return { ...f, [t]: u };
|
|
118
|
+
if (!(t in f)) return f;
|
|
106
119
|
const x = { ...f };
|
|
107
|
-
return delete x[
|
|
120
|
+
return delete x[t], x;
|
|
108
121
|
});
|
|
109
122
|
}
|
|
110
123
|
}
|
|
111
124
|
y(null);
|
|
112
125
|
},
|
|
113
|
-
registerField: (
|
|
114
|
-
unregisterField: (
|
|
115
|
-
errorFor: (
|
|
116
|
-
markTouched: (
|
|
117
|
-
const n = S.current.get(
|
|
126
|
+
registerField: (t, n) => S.current.set(t, n),
|
|
127
|
+
unregisterField: (t) => S.current.delete(t),
|
|
128
|
+
errorFor: (t) => w[t],
|
|
129
|
+
markTouched: (t) => {
|
|
130
|
+
const n = S.current.get(t);
|
|
118
131
|
if (n && a) {
|
|
119
|
-
const
|
|
132
|
+
const i = _(l[t], n, l);
|
|
120
133
|
b((u) => {
|
|
121
|
-
if (
|
|
122
|
-
if (!(
|
|
134
|
+
if (i) return { ...u, [t]: i };
|
|
135
|
+
if (!(t in u)) return u;
|
|
123
136
|
const f = { ...u };
|
|
124
|
-
return delete f[
|
|
137
|
+
return delete f[t], f;
|
|
125
138
|
});
|
|
126
139
|
}
|
|
127
140
|
},
|
|
128
|
-
formError:
|
|
141
|
+
formError: L
|
|
129
142
|
};
|
|
130
|
-
return /* @__PURE__ */ v(
|
|
143
|
+
return /* @__PURE__ */ v(q.Provider, { value: P, children: /* @__PURE__ */ v(
|
|
131
144
|
"form",
|
|
132
145
|
{
|
|
133
|
-
id:
|
|
134
|
-
className:
|
|
146
|
+
id: e,
|
|
147
|
+
className: N("prui-form flex flex-col gap-4", h),
|
|
135
148
|
noValidate: !0,
|
|
136
|
-
onSubmit: (
|
|
137
|
-
|
|
149
|
+
onSubmit: (t) => {
|
|
150
|
+
t.preventDefault(), I();
|
|
138
151
|
},
|
|
139
|
-
onReset: (
|
|
140
|
-
|
|
152
|
+
onReset: (t) => {
|
|
153
|
+
t.preventDefault(), E();
|
|
141
154
|
},
|
|
142
155
|
children: r
|
|
143
156
|
}
|
|
144
157
|
) });
|
|
145
158
|
}
|
|
146
|
-
const
|
|
147
|
-
function
|
|
148
|
-
const a = typeof
|
|
159
|
+
const te = { 1: "grid-cols-1", 2: "grid-cols-2", 3: "grid-cols-3", 4: "grid-cols-4" }, re = { 2: "sm:grid-cols-2", 3: "sm:grid-cols-3", 4: "sm:grid-cols-4" }, ne = { 2: "md:grid-cols-2", 3: "md:grid-cols-3", 4: "md:grid-cols-4" }, oe = { 2: "lg:grid-cols-2", 3: "lg:grid-cols-3", 4: "lg:grid-cols-4" };
|
|
160
|
+
function be({ label: e, description: r, columns: s = 1, gap: o = "md", children: c, className: g }) {
|
|
161
|
+
const a = typeof s == "number" ? { base: s } : s, h = a.base ?? 1, l = [
|
|
149
162
|
"grid",
|
|
150
|
-
|
|
151
|
-
a.sm && a.sm > 1 ?
|
|
152
|
-
a.md && a.md > 1 ?
|
|
153
|
-
a.lg && a.lg > 1 ?
|
|
154
|
-
].filter(Boolean),
|
|
163
|
+
te[h],
|
|
164
|
+
a.sm && a.sm > 1 ? re[a.sm] : null,
|
|
165
|
+
a.md && a.md > 1 ? ne[a.md] : null,
|
|
166
|
+
a.lg && a.lg > 1 ? oe[a.lg] : null
|
|
167
|
+
].filter(Boolean), m = o === "sm" ? "gap-x-2 gap-y-3" : o === "lg" ? "gap-x-6 gap-y-4" : "gap-x-4 gap-y-3";
|
|
155
168
|
return /* @__PURE__ */ O(
|
|
156
169
|
"div",
|
|
157
170
|
{
|
|
158
171
|
role: "group",
|
|
159
|
-
className:
|
|
172
|
+
className: N("prui-form-group rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-surface)] p-4", g),
|
|
160
173
|
children: [
|
|
161
|
-
|
|
174
|
+
e ? /* @__PURE__ */ v("div", { className: "text-sm font-semibold text-[var(--prui-fg)]", children: e }) : null,
|
|
162
175
|
r ? /* @__PURE__ */ v("div", { className: "mb-1 text-xs text-[var(--prui-dim)]", children: r }) : null,
|
|
163
|
-
/* @__PURE__ */ v("div", { className:
|
|
176
|
+
/* @__PURE__ */ v("div", { className: N(...l, m), children: c })
|
|
164
177
|
]
|
|
165
178
|
}
|
|
166
179
|
);
|
|
167
180
|
}
|
|
168
|
-
function
|
|
169
|
-
name:
|
|
170
|
-
label: r =
|
|
171
|
-
type:
|
|
172
|
-
placeholder:
|
|
173
|
-
required:
|
|
181
|
+
function xe({
|
|
182
|
+
name: e,
|
|
183
|
+
label: r = e,
|
|
184
|
+
type: s = "text",
|
|
185
|
+
placeholder: o,
|
|
186
|
+
required: c,
|
|
174
187
|
disabled: g,
|
|
175
188
|
readOnly: a,
|
|
176
189
|
autoFocus: h,
|
|
177
|
-
minLength:
|
|
178
|
-
maxLength:
|
|
190
|
+
minLength: l,
|
|
191
|
+
maxLength: m,
|
|
179
192
|
min: w,
|
|
180
193
|
max: b,
|
|
181
|
-
step:
|
|
194
|
+
step: L,
|
|
182
195
|
pattern: y,
|
|
183
196
|
patternMessage: S,
|
|
184
|
-
options:
|
|
185
|
-
rows:
|
|
186
|
-
help:
|
|
197
|
+
options: C,
|
|
198
|
+
rows: D = 3,
|
|
199
|
+
help: $,
|
|
187
200
|
message: V,
|
|
188
|
-
validate:
|
|
189
|
-
onChange:
|
|
190
|
-
className:
|
|
201
|
+
validate: I,
|
|
202
|
+
onChange: E,
|
|
203
|
+
className: j
|
|
191
204
|
}) {
|
|
192
|
-
const F =
|
|
193
|
-
|
|
194
|
-
const
|
|
195
|
-
F.setValue(
|
|
196
|
-
},
|
|
205
|
+
const F = ee();
|
|
206
|
+
p.useEffect(() => (F.registerField(e, { label: r, required: c, validate: I, minLength: l, maxLength: m, min: w, max: b, pattern: y, patternMessage: S }), () => F.unregisterField(e)), [e]);
|
|
207
|
+
const B = F.getValue(e), k = F.errorFor(e), P = (d) => {
|
|
208
|
+
F.setValue(e, d), E == null || E(d);
|
|
209
|
+
}, t = `prui-field-${F.id}-${e}`, n = `${t}-msg`, i = k ?? (V == null ? void 0 : V.message) ?? $, u = k ? "error" : V ? V.type ?? "info" : "help", f = {
|
|
197
210
|
error: "text-[var(--prui-danger)]",
|
|
198
211
|
warning: "text-[var(--prui-warn)]",
|
|
199
212
|
info: "text-[var(--prui-dim)]",
|
|
200
213
|
success: "text-[var(--prui-ok)]",
|
|
201
214
|
help: "text-[var(--prui-dim)]"
|
|
202
|
-
}[u], x =
|
|
203
|
-
|
|
215
|
+
}[u], x = s === "textarea" ? /* @__PURE__ */ v(
|
|
216
|
+
W,
|
|
204
217
|
{
|
|
205
|
-
id:
|
|
206
|
-
rows:
|
|
207
|
-
placeholder:
|
|
218
|
+
id: t,
|
|
219
|
+
rows: D,
|
|
220
|
+
placeholder: o,
|
|
208
221
|
disabled: g,
|
|
209
222
|
readOnly: a,
|
|
210
223
|
autoFocus: h,
|
|
211
|
-
minLength:
|
|
212
|
-
maxLength:
|
|
213
|
-
className:
|
|
214
|
-
value: String(
|
|
215
|
-
onChange: (
|
|
216
|
-
onBlur: () => F.markTouched(
|
|
217
|
-
"aria-invalid":
|
|
218
|
-
"aria-describedby":
|
|
224
|
+
minLength: l,
|
|
225
|
+
maxLength: m,
|
|
226
|
+
className: N("w-full", j),
|
|
227
|
+
value: String(B ?? ""),
|
|
228
|
+
onChange: (d) => P(d.target.value),
|
|
229
|
+
onBlur: () => F.markTouched(e),
|
|
230
|
+
"aria-invalid": k ? !0 : void 0,
|
|
231
|
+
"aria-describedby": i ? n : void 0
|
|
219
232
|
}
|
|
220
|
-
) :
|
|
221
|
-
|
|
233
|
+
) : s === "select" ? /* @__PURE__ */ v(
|
|
234
|
+
K,
|
|
222
235
|
{
|
|
223
|
-
id:
|
|
224
|
-
className:
|
|
225
|
-
options: (
|
|
226
|
-
placeholder:
|
|
236
|
+
id: t,
|
|
237
|
+
className: N("w-full", j),
|
|
238
|
+
options: (C ?? []).map((d) => ({ label: d.label, value: d.value, disabled: d.disabled })),
|
|
239
|
+
placeholder: o,
|
|
227
240
|
disabled: g,
|
|
228
|
-
value: String(
|
|
229
|
-
onChange: (
|
|
241
|
+
value: String(B ?? ""),
|
|
242
|
+
onChange: (d) => P(d),
|
|
230
243
|
"aria-label": r
|
|
231
244
|
}
|
|
232
|
-
) :
|
|
233
|
-
|
|
245
|
+
) : s === "switch" || s === "checkbox" ? /* @__PURE__ */ v(
|
|
246
|
+
Q,
|
|
234
247
|
{
|
|
235
|
-
id:
|
|
236
|
-
checked: !!
|
|
248
|
+
id: t,
|
|
249
|
+
checked: !!B,
|
|
237
250
|
disabled: g,
|
|
238
|
-
onChange: (
|
|
251
|
+
onChange: (d) => P(d),
|
|
239
252
|
"aria-label": r
|
|
240
253
|
}
|
|
241
254
|
) : /* @__PURE__ */ v(
|
|
242
|
-
|
|
255
|
+
H,
|
|
243
256
|
{
|
|
244
|
-
id:
|
|
245
|
-
type:
|
|
246
|
-
placeholder:
|
|
257
|
+
id: t,
|
|
258
|
+
type: s,
|
|
259
|
+
placeholder: o,
|
|
247
260
|
disabled: g,
|
|
248
261
|
readOnly: a,
|
|
249
262
|
autoFocus: h,
|
|
250
|
-
minLength:
|
|
251
|
-
maxLength:
|
|
263
|
+
minLength: l,
|
|
264
|
+
maxLength: m,
|
|
252
265
|
min: w,
|
|
253
266
|
max: b,
|
|
254
|
-
step:
|
|
267
|
+
step: L,
|
|
255
268
|
pattern: y == null ? void 0 : y.source,
|
|
256
|
-
className:
|
|
257
|
-
value: String(
|
|
258
|
-
onChange: (
|
|
259
|
-
onBlur: () => F.markTouched(
|
|
260
|
-
"aria-invalid":
|
|
261
|
-
"aria-describedby":
|
|
269
|
+
className: N("w-full", j),
|
|
270
|
+
value: String(B ?? ""),
|
|
271
|
+
onChange: (d) => P(s === "number" ? d.target.value === "" ? "" : Number(d.target.value) : d.target.value),
|
|
272
|
+
onBlur: () => F.markTouched(e),
|
|
273
|
+
"aria-invalid": k ? !0 : void 0,
|
|
274
|
+
"aria-describedby": i ? n : void 0
|
|
262
275
|
}
|
|
263
276
|
);
|
|
264
|
-
return /* @__PURE__ */ O("div", { className:
|
|
265
|
-
r ? /* @__PURE__ */ O(
|
|
277
|
+
return /* @__PURE__ */ O("div", { className: N("prui-form-input flex flex-col gap-1.5", j), "data-testid": `form-input-${e}`, children: [
|
|
278
|
+
r ? /* @__PURE__ */ O(J, { htmlFor: t, children: [
|
|
266
279
|
r,
|
|
267
|
-
|
|
280
|
+
c ? /* @__PURE__ */ v("span", { className: "ml-0.5 text-[var(--prui-danger)]", children: "*" }) : null
|
|
268
281
|
] }) : null,
|
|
269
282
|
x,
|
|
270
|
-
|
|
283
|
+
i ? /* @__PURE__ */ v("p", { id: n, className: N("text-xs", f), role: k ? "alert" : void 0, children: i }) : null
|
|
271
284
|
] });
|
|
272
285
|
}
|
|
273
|
-
function
|
|
274
|
-
const [r,
|
|
275
|
-
var
|
|
276
|
-
return ((
|
|
286
|
+
function se(e) {
|
|
287
|
+
const [r, s] = p.useState(() => {
|
|
288
|
+
var o;
|
|
289
|
+
return ((o = A(e)) == null ? void 0 : o.getState()) ?? null;
|
|
277
290
|
});
|
|
278
|
-
return
|
|
279
|
-
const
|
|
280
|
-
if (!
|
|
281
|
-
|
|
291
|
+
return p.useEffect(() => {
|
|
292
|
+
const o = A(e);
|
|
293
|
+
if (!o) {
|
|
294
|
+
s(null);
|
|
282
295
|
return;
|
|
283
296
|
}
|
|
284
|
-
return o
|
|
285
|
-
}, [
|
|
297
|
+
return s(o.getState()), o.subscribe((c) => s(c));
|
|
298
|
+
}, [e]), r;
|
|
286
299
|
}
|
|
287
|
-
function
|
|
288
|
-
const
|
|
300
|
+
function ve({ form: e, action: r = "submit", disableWhen: s = "never", variant: o, size: c, disabled: g, children: a, onClick: h, className: l }) {
|
|
301
|
+
const m = se(e), w = g || (s === "invalid" && m ? !m.isValid : !1) || (s === "pristine" && m ? !m.isDirty : !1);
|
|
289
302
|
return /* @__PURE__ */ v(
|
|
290
|
-
|
|
303
|
+
z,
|
|
291
304
|
{
|
|
292
305
|
type: "button",
|
|
293
|
-
variant:
|
|
294
|
-
size:
|
|
306
|
+
variant: o ?? "default",
|
|
307
|
+
size: c,
|
|
295
308
|
disabled: w,
|
|
296
|
-
className:
|
|
297
|
-
"data-testid": `form-button-${
|
|
309
|
+
className: l,
|
|
310
|
+
"data-testid": `form-button-${e}-${r}`,
|
|
298
311
|
onClick: () => {
|
|
299
|
-
const b =
|
|
312
|
+
const b = A(e);
|
|
300
313
|
if (!b) {
|
|
301
|
-
console.warn(`[prui] FormButton: no <Form id="${
|
|
314
|
+
console.warn(`[prui] FormButton: no <Form id="${e}"> is mounted.`);
|
|
302
315
|
return;
|
|
303
316
|
}
|
|
304
317
|
r === "submit" ? b.submit() : r === "reset" ? b.reset() : r === "clear" && b.clear(), h == null || h();
|
|
@@ -307,7 +320,7 @@ function ft({ form: t, action: r = "submit", disableWhen: o = "never", variant:
|
|
|
307
320
|
}
|
|
308
321
|
);
|
|
309
322
|
}
|
|
310
|
-
const
|
|
323
|
+
const ye = {
|
|
311
324
|
name: "Form",
|
|
312
325
|
props: [
|
|
313
326
|
{ name: "id", type: "string", default: null, control: "text" },
|
|
@@ -316,7 +329,7 @@ const mt = {
|
|
|
316
329
|
{ name: "onSubmit", type: "(values) => void | Promise<void>", default: null, control: "none" },
|
|
317
330
|
{ name: "validateOnChange", type: "boolean", default: "true", control: "boolean" }
|
|
318
331
|
]
|
|
319
|
-
},
|
|
332
|
+
}, he = {
|
|
320
333
|
name: "FormGroup",
|
|
321
334
|
props: [
|
|
322
335
|
{ name: "label", type: "string", default: null, control: "text" },
|
|
@@ -324,7 +337,7 @@ const mt = {
|
|
|
324
337
|
{ name: "columns", type: "number | { base?, sm?, md?, lg? }", default: "1", control: "number" },
|
|
325
338
|
{ name: "gap", type: "'sm' | 'md' | 'lg'", default: "'md'", control: "select", options: ["sm", "md", "lg"] }
|
|
326
339
|
]
|
|
327
|
-
},
|
|
340
|
+
}, Fe = {
|
|
328
341
|
name: "FormInput",
|
|
329
342
|
props: [
|
|
330
343
|
{ name: "name", type: "string", default: null, control: "text" },
|
|
@@ -336,7 +349,7 @@ const mt = {
|
|
|
336
349
|
{ name: "options", type: "{ label, value }[]", default: "select/switch only", control: "object" },
|
|
337
350
|
{ name: "validate", type: "(value, values) => string | null", default: null, control: "none" }
|
|
338
351
|
]
|
|
339
|
-
},
|
|
352
|
+
}, we = {
|
|
340
353
|
name: "FormButton",
|
|
341
354
|
props: [
|
|
342
355
|
{ name: "form", type: "string (id of the target <Form>)", default: null, control: "text" },
|
|
@@ -345,20 +358,20 @@ const mt = {
|
|
|
345
358
|
{ name: "variant", type: "ButtonVariant", default: "'default'", control: "select", options: ["primary", "default", "ghost", "danger", "outline", "soft", "link"] }
|
|
346
359
|
]
|
|
347
360
|
};
|
|
348
|
-
function
|
|
349
|
-
return
|
|
361
|
+
function Se(e) {
|
|
362
|
+
return A(e);
|
|
350
363
|
}
|
|
351
364
|
export {
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
365
|
+
ge as Form,
|
|
366
|
+
ve as FormButton,
|
|
367
|
+
be as FormGroup,
|
|
368
|
+
xe as FormInput,
|
|
369
|
+
we as formButtonPropsMeta,
|
|
370
|
+
he as formGroupPropsMeta,
|
|
371
|
+
pe as formIds,
|
|
372
|
+
Fe as formInputPropsMeta,
|
|
373
|
+
ye as formPropsMeta,
|
|
374
|
+
A as getFormApi,
|
|
375
|
+
X as registerForm,
|
|
376
|
+
Se as useFormApi
|
|
364
377
|
};
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
/**
|
|
3
|
+
* PRUI internationalization.
|
|
4
|
+
*
|
|
5
|
+
* Every user-facing string PRUI renders comes from a dictionary. The
|
|
6
|
+
* default dictionary is English; apps override it wholesale or per-key via
|
|
7
|
+
* <PruiProvider dictionary={...}> or setPruiDictionary(). Components read
|
|
8
|
+
* strings through usePruiI18n().t("key") so translations need no re-render
|
|
9
|
+
* wiring beyond the provider.
|
|
10
|
+
*/
|
|
11
|
+
export interface PruiDictionary {
|
|
12
|
+
close: string;
|
|
13
|
+
closeDialog: string;
|
|
14
|
+
cancel: string;
|
|
15
|
+
confirm: string;
|
|
16
|
+
delete: string;
|
|
17
|
+
save: string;
|
|
18
|
+
create: string;
|
|
19
|
+
edit: string;
|
|
20
|
+
loading: string;
|
|
21
|
+
commandPlaceholder: string;
|
|
22
|
+
commandNoMatches: string;
|
|
23
|
+
search: string;
|
|
24
|
+
noResults: string;
|
|
25
|
+
rowsPerPage: string;
|
|
26
|
+
page: string;
|
|
27
|
+
nextPage: string;
|
|
28
|
+
previousPage: string;
|
|
29
|
+
selectAllRows: string;
|
|
30
|
+
selectRow: string;
|
|
31
|
+
expandRow: string;
|
|
32
|
+
collapseRow: string;
|
|
33
|
+
yes: string;
|
|
34
|
+
no: string;
|
|
35
|
+
requiredField: string;
|
|
36
|
+
formErrorTitle: string;
|
|
37
|
+
invalidFormat: string;
|
|
38
|
+
minLength: string;
|
|
39
|
+
maxLength: string;
|
|
40
|
+
minNumber: string;
|
|
41
|
+
maxNumber: string;
|
|
42
|
+
newEntity: string;
|
|
43
|
+
editEntity: string;
|
|
44
|
+
searchEntity: string;
|
|
45
|
+
deleteConfirmMessage: string;
|
|
46
|
+
dismiss: string;
|
|
47
|
+
notifications: string;
|
|
48
|
+
mainNavigation: string;
|
|
49
|
+
openNavigation: string;
|
|
50
|
+
closeNavigation: string;
|
|
51
|
+
switchTheme: string;
|
|
52
|
+
expandSidebar: string;
|
|
53
|
+
collapseSidebar: string;
|
|
54
|
+
today: string;
|
|
55
|
+
clear: string;
|
|
56
|
+
apply: string;
|
|
57
|
+
dropFiles: string;
|
|
58
|
+
browseFiles: string;
|
|
59
|
+
removeFile: string;
|
|
60
|
+
of: string;
|
|
61
|
+
}
|
|
62
|
+
export declare const defaultDictionary: PruiDictionary;
|
|
63
|
+
/**
|
|
64
|
+
* Replace the active PRUI dictionary globally (no React context needed,
|
|
65
|
+
* useful outside components / at startup). Merge partials for per-key
|
|
66
|
+
* overrides.
|
|
67
|
+
*/
|
|
68
|
+
export declare function setPruiDictionary(dict: Partial<PruiDictionary>): void;
|
|
69
|
+
/** Reset to the built-in English dictionary. */
|
|
70
|
+
export declare function resetPruiDictionary(): void;
|
|
71
|
+
/** The active dictionary (readonly snapshot). */
|
|
72
|
+
export declare function getPruiDictionary(): Readonly<PruiDictionary>;
|
|
73
|
+
/** Provider that scopes a dictionary to a subtree. */
|
|
74
|
+
export declare function PruiProvider({ dictionary, children, }: {
|
|
75
|
+
dictionary?: Partial<PruiDictionary>;
|
|
76
|
+
children?: React.ReactNode;
|
|
77
|
+
}): React.JSX.Element;
|
|
78
|
+
export interface PruiI18n {
|
|
79
|
+
/** The active dictionary. */
|
|
80
|
+
t: Readonly<PruiDictionary>;
|
|
81
|
+
}
|
|
82
|
+
/** Read the active PRUI dictionary (falls back to the global one). */
|
|
83
|
+
export declare function usePruiI18n(): PruiI18n;
|