litecms 0.2.1 → 0.2.3
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/README.md +26 -1
- package/dist/admin/CmsBlogAdmin.d.ts.map +1 -1
- package/dist/admin/exports.js +470 -469
- package/dist/components/index.js +55 -55
- package/dist/index-xscpb89q.js +4422 -0
- package/dist/index.js +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,4422 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
// src/admin/language.tsx
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
var translations = {
|
|
6
|
+
en: {
|
|
7
|
+
viewSite: "View site",
|
|
8
|
+
signOut: "Sign out",
|
|
9
|
+
language: "Language",
|
|
10
|
+
dashboard: "Dashboard",
|
|
11
|
+
pages: "Pages",
|
|
12
|
+
cmsNotConfigured: "CMS not configured",
|
|
13
|
+
cmsNotConfiguredDesc: "Please configure the CMS to get started editing content.",
|
|
14
|
+
modulePages: "Website Content",
|
|
15
|
+
modulePagesDesc: "Edit pages, text, and images on your website",
|
|
16
|
+
moduleEmail: "Email",
|
|
17
|
+
moduleEmailDesc: "Manage email templates and campaigns",
|
|
18
|
+
moduleAnalytics: "Analytics",
|
|
19
|
+
moduleAnalyticsDesc: "View visitor statistics and insights",
|
|
20
|
+
comingSoon: "Coming soon",
|
|
21
|
+
save: "Save",
|
|
22
|
+
saving: "Saving...",
|
|
23
|
+
reset: "Reset",
|
|
24
|
+
changesSaved: "Changes saved successfully.",
|
|
25
|
+
savedSuccessfully: "Saved successfully!",
|
|
26
|
+
saveChanges: "Save changes",
|
|
27
|
+
selectImage: "Select Image",
|
|
28
|
+
clickToSelectImage: "Click to select image",
|
|
29
|
+
replace: "Replace",
|
|
30
|
+
remove: "Remove",
|
|
31
|
+
dragDropImages: "Drag & drop images",
|
|
32
|
+
dropImagesHere: "Drop images here",
|
|
33
|
+
or: "or",
|
|
34
|
+
browse: "browse",
|
|
35
|
+
library: "Library",
|
|
36
|
+
loading: "Loading...",
|
|
37
|
+
noImagesYet: "No images yet",
|
|
38
|
+
imageSelected: "Image selected",
|
|
39
|
+
noSelection: "No selection",
|
|
40
|
+
cancel: "Cancel",
|
|
41
|
+
select: "Select",
|
|
42
|
+
moduleBlog: "Blog",
|
|
43
|
+
moduleBlogDesc: "Write and manage blog posts",
|
|
44
|
+
blogPosts: "Blog Posts",
|
|
45
|
+
blogNewPost: "New Post",
|
|
46
|
+
blogNoPostsYet: "No posts yet",
|
|
47
|
+
blogCreateFirstPost: "Create your first blog post to get started.",
|
|
48
|
+
blogUntitled: "Untitled",
|
|
49
|
+
blogDraft: "Draft",
|
|
50
|
+
blogPublished: "Published",
|
|
51
|
+
blogTitle: "Title",
|
|
52
|
+
blogSlug: "Slug",
|
|
53
|
+
blogExcerpt: "Excerpt",
|
|
54
|
+
blogCoverImage: "Cover Image",
|
|
55
|
+
blogContent: "Content",
|
|
56
|
+
blogTags: "Tags",
|
|
57
|
+
blogAuthor: "Author",
|
|
58
|
+
blogSaveDraft: "Save Draft",
|
|
59
|
+
blogPublish: "Publish",
|
|
60
|
+
blogUnpublish: "Unpublish",
|
|
61
|
+
blogDelete: "Delete",
|
|
62
|
+
blogPreview: "Preview",
|
|
63
|
+
blogEditor: "Editor",
|
|
64
|
+
blogPreviewPlaceholder: "Start typing to see preview...",
|
|
65
|
+
blogSaving: "Saving...",
|
|
66
|
+
blogDeleting: "Deleting...",
|
|
67
|
+
blogConfirmDelete: "Are you sure you want to delete this post?",
|
|
68
|
+
blogTagsHelp: "Comma-separated tags",
|
|
69
|
+
blogSlugHelp: "URL-friendly identifier",
|
|
70
|
+
blogInsertImage: "Insert image",
|
|
71
|
+
blogEnterImageUrl: "Enter image URL:",
|
|
72
|
+
blogEnterImageAlt: "Enter alt text (optional):",
|
|
73
|
+
blogImageUploadFailed: "Failed to upload image",
|
|
74
|
+
blogDropImageHere: "Drop image here...",
|
|
75
|
+
blogUploading: "Uploading...",
|
|
76
|
+
blogBackToList: "Back to posts",
|
|
77
|
+
blogUpdate: "Update"
|
|
78
|
+
},
|
|
79
|
+
de: {
|
|
80
|
+
viewSite: "Seite ansehen",
|
|
81
|
+
signOut: "Abmelden",
|
|
82
|
+
language: "Sprache",
|
|
83
|
+
dashboard: "Dashboard",
|
|
84
|
+
pages: "Seiten",
|
|
85
|
+
cmsNotConfigured: "CMS nicht konfiguriert",
|
|
86
|
+
cmsNotConfiguredDesc: "Bitte konfiguriere das CMS, um mit der Bearbeitung zu beginnen.",
|
|
87
|
+
modulePages: "Website-Inhalte",
|
|
88
|
+
modulePagesDesc: "Seiten, Texte und Bilder auf deiner Website bearbeiten",
|
|
89
|
+
moduleEmail: "E-Mail",
|
|
90
|
+
moduleEmailDesc: "E-Mail-Vorlagen und Kampagnen verwalten",
|
|
91
|
+
moduleAnalytics: "Statistiken",
|
|
92
|
+
moduleAnalyticsDesc: "Besucherstatistiken und Einblicke anzeigen",
|
|
93
|
+
comingSoon: "Demnächst",
|
|
94
|
+
save: "Speichern",
|
|
95
|
+
saving: "Speichern...",
|
|
96
|
+
reset: "Zurücksetzen",
|
|
97
|
+
changesSaved: "Änderungen erfolgreich gespeichert.",
|
|
98
|
+
savedSuccessfully: "Erfolgreich gespeichert!",
|
|
99
|
+
saveChanges: "Änderungen speichern",
|
|
100
|
+
selectImage: "Bild auswählen",
|
|
101
|
+
clickToSelectImage: "Klicken um Bild auszuwählen",
|
|
102
|
+
replace: "Ersetzen",
|
|
103
|
+
remove: "Entfernen",
|
|
104
|
+
dragDropImages: "Bilder hierher ziehen",
|
|
105
|
+
dropImagesHere: "Bilder hier ablegen",
|
|
106
|
+
or: "oder",
|
|
107
|
+
browse: "durchsuchen",
|
|
108
|
+
library: "Bibliothek",
|
|
109
|
+
loading: "Laden...",
|
|
110
|
+
noImagesYet: "Noch keine Bilder",
|
|
111
|
+
imageSelected: "Bild ausgewählt",
|
|
112
|
+
noSelection: "Keine Auswahl",
|
|
113
|
+
cancel: "Abbrechen",
|
|
114
|
+
select: "Auswählen",
|
|
115
|
+
moduleBlog: "Blog",
|
|
116
|
+
moduleBlogDesc: "Blogbeiträge schreiben und verwalten",
|
|
117
|
+
blogPosts: "Blogbeiträge",
|
|
118
|
+
blogNewPost: "Neuer Beitrag",
|
|
119
|
+
blogNoPostsYet: "Noch keine Beiträge",
|
|
120
|
+
blogCreateFirstPost: "Erstelle deinen ersten Blogbeitrag.",
|
|
121
|
+
blogUntitled: "Ohne Titel",
|
|
122
|
+
blogDraft: "Entwurf",
|
|
123
|
+
blogPublished: "Veröffentlicht",
|
|
124
|
+
blogTitle: "Titel",
|
|
125
|
+
blogSlug: "Slug",
|
|
126
|
+
blogExcerpt: "Auszug",
|
|
127
|
+
blogCoverImage: "Titelbild",
|
|
128
|
+
blogContent: "Inhalt",
|
|
129
|
+
blogTags: "Tags",
|
|
130
|
+
blogAuthor: "Autor",
|
|
131
|
+
blogSaveDraft: "Entwurf speichern",
|
|
132
|
+
blogPublish: "Veröffentlichen",
|
|
133
|
+
blogUnpublish: "Zurückziehen",
|
|
134
|
+
blogDelete: "Löschen",
|
|
135
|
+
blogPreview: "Vorschau",
|
|
136
|
+
blogEditor: "Editor",
|
|
137
|
+
blogPreviewPlaceholder: "Beginne zu tippen für die Vorschau...",
|
|
138
|
+
blogSaving: "Speichern...",
|
|
139
|
+
blogDeleting: "Löschen...",
|
|
140
|
+
blogConfirmDelete: "Bist du sicher, dass du diesen Beitrag löschen möchtest?",
|
|
141
|
+
blogTagsHelp: "Komma-getrennte Tags",
|
|
142
|
+
blogSlugHelp: "URL-freundliche Kennung",
|
|
143
|
+
blogInsertImage: "Bild einfügen",
|
|
144
|
+
blogEnterImageUrl: "Bild-URL eingeben:",
|
|
145
|
+
blogEnterImageAlt: "Alt-Text eingeben (optional):",
|
|
146
|
+
blogImageUploadFailed: "Bild-Upload fehlgeschlagen",
|
|
147
|
+
blogDropImageHere: "Bild hier ablegen...",
|
|
148
|
+
blogUploading: "Hochladen...",
|
|
149
|
+
blogBackToList: "Zurück zur Liste",
|
|
150
|
+
blogUpdate: "Aktualisieren"
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
function detectBrowserLanguage() {
|
|
154
|
+
if (typeof navigator === "undefined")
|
|
155
|
+
return "en";
|
|
156
|
+
const browserLang = navigator.language || navigator.userLanguage || "en";
|
|
157
|
+
return browserLang.toLowerCase().startsWith("de") ? "de" : "en";
|
|
158
|
+
}
|
|
159
|
+
function translate(language, key) {
|
|
160
|
+
return translations[language][key] ?? key;
|
|
161
|
+
}
|
|
162
|
+
var LanguageContext = React.createContext(null);
|
|
163
|
+
function CmsLanguageProvider({
|
|
164
|
+
languageEndpoint = "/api/admin/language",
|
|
165
|
+
children
|
|
166
|
+
}) {
|
|
167
|
+
const [language, setLanguageState] = React.useState(() => detectBrowserLanguage());
|
|
168
|
+
const [isLoading, setIsLoading] = React.useState(true);
|
|
169
|
+
const initialLoadDone = React.useRef(false);
|
|
170
|
+
React.useEffect(() => {
|
|
171
|
+
if (initialLoadDone.current)
|
|
172
|
+
return;
|
|
173
|
+
initialLoadDone.current = true;
|
|
174
|
+
const loadLanguage = async () => {
|
|
175
|
+
try {
|
|
176
|
+
const response = await fetch(languageEndpoint);
|
|
177
|
+
if (response.ok) {
|
|
178
|
+
const data = await response.json();
|
|
179
|
+
if (data.language && (data.language === "en" || data.language === "de")) {
|
|
180
|
+
setLanguageState(data.language);
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
} catch (error) {
|
|
184
|
+
console.warn("[litecms] Failed to load language preference:", error);
|
|
185
|
+
} finally {
|
|
186
|
+
setIsLoading(false);
|
|
187
|
+
}
|
|
188
|
+
};
|
|
189
|
+
loadLanguage();
|
|
190
|
+
}, [languageEndpoint]);
|
|
191
|
+
const setLanguage = React.useCallback(async (newLang) => {
|
|
192
|
+
setLanguageState(newLang);
|
|
193
|
+
try {
|
|
194
|
+
await fetch(languageEndpoint, {
|
|
195
|
+
method: "POST",
|
|
196
|
+
headers: { "Content-Type": "application/json" },
|
|
197
|
+
body: JSON.stringify({ language: newLang })
|
|
198
|
+
});
|
|
199
|
+
} catch (error) {
|
|
200
|
+
console.warn("[litecms] Failed to save language preference:", error);
|
|
201
|
+
}
|
|
202
|
+
}, [languageEndpoint]);
|
|
203
|
+
const t = React.useCallback((key) => translate(language, key), [language]);
|
|
204
|
+
const value = React.useMemo(() => ({ language, setLanguage, t, isLoading }), [language, setLanguage, t, isLoading]);
|
|
205
|
+
return /* @__PURE__ */ jsx(LanguageContext.Provider, {
|
|
206
|
+
value,
|
|
207
|
+
children
|
|
208
|
+
});
|
|
209
|
+
}
|
|
210
|
+
function useCmsLanguage() {
|
|
211
|
+
const context = React.useContext(LanguageContext);
|
|
212
|
+
if (!context) {
|
|
213
|
+
throw new Error("useCmsLanguage must be used within a CmsLanguageProvider");
|
|
214
|
+
}
|
|
215
|
+
return context;
|
|
216
|
+
}
|
|
217
|
+
function useCmsLanguageOptional() {
|
|
218
|
+
return React.useContext(LanguageContext);
|
|
219
|
+
}
|
|
220
|
+
function CmsLanguageSelector() {
|
|
221
|
+
const { language, setLanguage, t } = useCmsLanguage();
|
|
222
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
223
|
+
className: "flex items-center gap-2",
|
|
224
|
+
children: [
|
|
225
|
+
/* @__PURE__ */ jsxs("span", {
|
|
226
|
+
className: "text-xs tracking-wide text-neutral-400",
|
|
227
|
+
children: [
|
|
228
|
+
t("language"),
|
|
229
|
+
":"
|
|
230
|
+
]
|
|
231
|
+
}),
|
|
232
|
+
/* @__PURE__ */ jsxs("select", {
|
|
233
|
+
value: language,
|
|
234
|
+
onChange: (e) => setLanguage(e.target.value),
|
|
235
|
+
className: "text-xs bg-transparent text-neutral-400 hover:text-neutral-900 transition-colors cursor-pointer border-none outline-none focus:ring-0 p-0",
|
|
236
|
+
children: [
|
|
237
|
+
/* @__PURE__ */ jsx("option", {
|
|
238
|
+
value: "en",
|
|
239
|
+
children: "EN"
|
|
240
|
+
}),
|
|
241
|
+
/* @__PURE__ */ jsx("option", {
|
|
242
|
+
value: "de",
|
|
243
|
+
children: "DE"
|
|
244
|
+
})
|
|
245
|
+
]
|
|
246
|
+
})
|
|
247
|
+
]
|
|
248
|
+
});
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
// node_modules/react-hook-form/dist/index.esm.mjs
|
|
252
|
+
import React2 from "react";
|
|
253
|
+
var isCheckBoxInput = (element) => element.type === "checkbox";
|
|
254
|
+
var isDateObject = (value) => value instanceof Date;
|
|
255
|
+
var isNullOrUndefined = (value) => value == null;
|
|
256
|
+
var isObjectType = (value) => typeof value === "object";
|
|
257
|
+
var isObject = (value) => !isNullOrUndefined(value) && !Array.isArray(value) && isObjectType(value) && !isDateObject(value);
|
|
258
|
+
var getEventValue = (event) => isObject(event) && event.target ? isCheckBoxInput(event.target) ? event.target.checked : event.target.value : event;
|
|
259
|
+
var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/)) || name;
|
|
260
|
+
var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
|
|
261
|
+
var isPlainObject = (tempObject) => {
|
|
262
|
+
const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
|
|
263
|
+
return isObject(prototypeCopy) && prototypeCopy.hasOwnProperty("isPrototypeOf");
|
|
264
|
+
};
|
|
265
|
+
var isWeb = typeof window !== "undefined" && typeof window.HTMLElement !== "undefined" && typeof document !== "undefined";
|
|
266
|
+
function cloneObject(data) {
|
|
267
|
+
if (data instanceof Date) {
|
|
268
|
+
return new Date(data);
|
|
269
|
+
}
|
|
270
|
+
const isFileListInstance = typeof FileList !== "undefined" && data instanceof FileList;
|
|
271
|
+
if (isWeb && (data instanceof Blob || isFileListInstance)) {
|
|
272
|
+
return data;
|
|
273
|
+
}
|
|
274
|
+
const isArray = Array.isArray(data);
|
|
275
|
+
if (!isArray && !(isObject(data) && isPlainObject(data))) {
|
|
276
|
+
return data;
|
|
277
|
+
}
|
|
278
|
+
const copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
|
|
279
|
+
for (const key in data) {
|
|
280
|
+
if (Object.prototype.hasOwnProperty.call(data, key)) {
|
|
281
|
+
copy[key] = cloneObject(data[key]);
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
return copy;
|
|
285
|
+
}
|
|
286
|
+
var isKey = (value) => /^\w*$/.test(value);
|
|
287
|
+
var isUndefined = (val) => val === undefined;
|
|
288
|
+
var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
|
|
289
|
+
var stringToPath = (input) => compact(input.replace(/["|']|\]/g, "").split(/\.|\[/));
|
|
290
|
+
var get = (object, path, defaultValue) => {
|
|
291
|
+
if (!path || !isObject(object)) {
|
|
292
|
+
return defaultValue;
|
|
293
|
+
}
|
|
294
|
+
const result = (isKey(path) ? [path] : stringToPath(path)).reduce((result2, key) => isNullOrUndefined(result2) ? result2 : result2[key], object);
|
|
295
|
+
return isUndefined(result) || result === object ? isUndefined(object[path]) ? defaultValue : object[path] : result;
|
|
296
|
+
};
|
|
297
|
+
var isBoolean = (value) => typeof value === "boolean";
|
|
298
|
+
var isFunction = (value) => typeof value === "function";
|
|
299
|
+
var set = (object, path, value) => {
|
|
300
|
+
let index = -1;
|
|
301
|
+
const tempPath = isKey(path) ? [path] : stringToPath(path);
|
|
302
|
+
const length = tempPath.length;
|
|
303
|
+
const lastIndex = length - 1;
|
|
304
|
+
while (++index < length) {
|
|
305
|
+
const key = tempPath[index];
|
|
306
|
+
let newValue = value;
|
|
307
|
+
if (index !== lastIndex) {
|
|
308
|
+
const objValue = object[key];
|
|
309
|
+
newValue = isObject(objValue) || Array.isArray(objValue) ? objValue : !isNaN(+tempPath[index + 1]) ? [] : {};
|
|
310
|
+
}
|
|
311
|
+
if (key === "__proto__" || key === "constructor" || key === "prototype") {
|
|
312
|
+
return;
|
|
313
|
+
}
|
|
314
|
+
object[key] = newValue;
|
|
315
|
+
object = object[key];
|
|
316
|
+
}
|
|
317
|
+
};
|
|
318
|
+
var EVENTS = {
|
|
319
|
+
BLUR: "blur",
|
|
320
|
+
FOCUS_OUT: "focusout",
|
|
321
|
+
CHANGE: "change"
|
|
322
|
+
};
|
|
323
|
+
var VALIDATION_MODE = {
|
|
324
|
+
onBlur: "onBlur",
|
|
325
|
+
onChange: "onChange",
|
|
326
|
+
onSubmit: "onSubmit",
|
|
327
|
+
onTouched: "onTouched",
|
|
328
|
+
all: "all"
|
|
329
|
+
};
|
|
330
|
+
var INPUT_VALIDATION_RULES = {
|
|
331
|
+
max: "max",
|
|
332
|
+
min: "min",
|
|
333
|
+
maxLength: "maxLength",
|
|
334
|
+
minLength: "minLength",
|
|
335
|
+
pattern: "pattern",
|
|
336
|
+
required: "required",
|
|
337
|
+
validate: "validate"
|
|
338
|
+
};
|
|
339
|
+
var HookFormControlContext = React2.createContext(null);
|
|
340
|
+
HookFormControlContext.displayName = "HookFormControlContext";
|
|
341
|
+
var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
|
|
342
|
+
const result = {
|
|
343
|
+
defaultValues: control._defaultValues
|
|
344
|
+
};
|
|
345
|
+
for (const key in formState) {
|
|
346
|
+
Object.defineProperty(result, key, {
|
|
347
|
+
get: () => {
|
|
348
|
+
const _key = key;
|
|
349
|
+
if (control._proxyFormState[_key] !== VALIDATION_MODE.all) {
|
|
350
|
+
control._proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;
|
|
351
|
+
}
|
|
352
|
+
localProxyFormState && (localProxyFormState[_key] = true);
|
|
353
|
+
return formState[_key];
|
|
354
|
+
}
|
|
355
|
+
});
|
|
356
|
+
}
|
|
357
|
+
return result;
|
|
358
|
+
};
|
|
359
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React2.useLayoutEffect : React2.useEffect;
|
|
360
|
+
var isString = (value) => typeof value === "string";
|
|
361
|
+
var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
|
|
362
|
+
if (isString(names)) {
|
|
363
|
+
isGlobal && _names.watch.add(names);
|
|
364
|
+
return get(formValues, names, defaultValue);
|
|
365
|
+
}
|
|
366
|
+
if (Array.isArray(names)) {
|
|
367
|
+
return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName), get(formValues, fieldName)));
|
|
368
|
+
}
|
|
369
|
+
isGlobal && (_names.watchAll = true);
|
|
370
|
+
return formValues;
|
|
371
|
+
};
|
|
372
|
+
var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
|
|
373
|
+
function deepEqual(object1, object2, _internal_visited = new WeakSet) {
|
|
374
|
+
if (isPrimitive(object1) || isPrimitive(object2)) {
|
|
375
|
+
return Object.is(object1, object2);
|
|
376
|
+
}
|
|
377
|
+
if (isDateObject(object1) && isDateObject(object2)) {
|
|
378
|
+
return Object.is(object1.getTime(), object2.getTime());
|
|
379
|
+
}
|
|
380
|
+
const keys1 = Object.keys(object1);
|
|
381
|
+
const keys2 = Object.keys(object2);
|
|
382
|
+
if (keys1.length !== keys2.length) {
|
|
383
|
+
return false;
|
|
384
|
+
}
|
|
385
|
+
if (_internal_visited.has(object1) || _internal_visited.has(object2)) {
|
|
386
|
+
return true;
|
|
387
|
+
}
|
|
388
|
+
_internal_visited.add(object1);
|
|
389
|
+
_internal_visited.add(object2);
|
|
390
|
+
for (const key of keys1) {
|
|
391
|
+
const val1 = object1[key];
|
|
392
|
+
if (!keys2.includes(key)) {
|
|
393
|
+
return false;
|
|
394
|
+
}
|
|
395
|
+
if (key !== "ref") {
|
|
396
|
+
const val2 = object2[key];
|
|
397
|
+
if (isDateObject(val1) && isDateObject(val2) || isObject(val1) && isObject(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual(val1, val2, _internal_visited) : !Object.is(val1, val2)) {
|
|
398
|
+
return false;
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
return true;
|
|
403
|
+
}
|
|
404
|
+
var HookFormContext = React2.createContext(null);
|
|
405
|
+
HookFormContext.displayName = "HookFormContext";
|
|
406
|
+
var useFormContext = () => React2.useContext(HookFormContext);
|
|
407
|
+
var FormProvider = (props) => {
|
|
408
|
+
const { children, watch, getValues, getFieldState, setError, clearErrors, setValue, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe } = props;
|
|
409
|
+
return React2.createElement(HookFormContext.Provider, { value: React2.useMemo(() => ({
|
|
410
|
+
watch,
|
|
411
|
+
getValues,
|
|
412
|
+
getFieldState,
|
|
413
|
+
setError,
|
|
414
|
+
clearErrors,
|
|
415
|
+
setValue,
|
|
416
|
+
trigger,
|
|
417
|
+
formState,
|
|
418
|
+
resetField,
|
|
419
|
+
reset,
|
|
420
|
+
handleSubmit,
|
|
421
|
+
unregister,
|
|
422
|
+
control,
|
|
423
|
+
register,
|
|
424
|
+
setFocus,
|
|
425
|
+
subscribe
|
|
426
|
+
}), [
|
|
427
|
+
clearErrors,
|
|
428
|
+
control,
|
|
429
|
+
formState,
|
|
430
|
+
getFieldState,
|
|
431
|
+
getValues,
|
|
432
|
+
handleSubmit,
|
|
433
|
+
register,
|
|
434
|
+
reset,
|
|
435
|
+
resetField,
|
|
436
|
+
setError,
|
|
437
|
+
setFocus,
|
|
438
|
+
setValue,
|
|
439
|
+
subscribe,
|
|
440
|
+
trigger,
|
|
441
|
+
unregister,
|
|
442
|
+
watch
|
|
443
|
+
]) }, React2.createElement(HookFormControlContext.Provider, { value: control }, children));
|
|
444
|
+
};
|
|
445
|
+
var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria ? {
|
|
446
|
+
...errors[name],
|
|
447
|
+
types: {
|
|
448
|
+
...errors[name] && errors[name].types ? errors[name].types : {},
|
|
449
|
+
[type]: message || true
|
|
450
|
+
}
|
|
451
|
+
} : {};
|
|
452
|
+
var convertToArrayPayload = (value) => Array.isArray(value) ? value : [value];
|
|
453
|
+
var createSubject = () => {
|
|
454
|
+
let _observers = [];
|
|
455
|
+
const next = (value) => {
|
|
456
|
+
for (const observer of _observers) {
|
|
457
|
+
observer.next && observer.next(value);
|
|
458
|
+
}
|
|
459
|
+
};
|
|
460
|
+
const subscribe = (observer) => {
|
|
461
|
+
_observers.push(observer);
|
|
462
|
+
return {
|
|
463
|
+
unsubscribe: () => {
|
|
464
|
+
_observers = _observers.filter((o) => o !== observer);
|
|
465
|
+
}
|
|
466
|
+
};
|
|
467
|
+
};
|
|
468
|
+
const unsubscribe = () => {
|
|
469
|
+
_observers = [];
|
|
470
|
+
};
|
|
471
|
+
return {
|
|
472
|
+
get observers() {
|
|
473
|
+
return _observers;
|
|
474
|
+
},
|
|
475
|
+
next,
|
|
476
|
+
subscribe,
|
|
477
|
+
unsubscribe
|
|
478
|
+
};
|
|
479
|
+
};
|
|
480
|
+
function extractFormValues(fieldsState, formValues) {
|
|
481
|
+
const values = {};
|
|
482
|
+
for (const key in fieldsState) {
|
|
483
|
+
if (fieldsState.hasOwnProperty(key)) {
|
|
484
|
+
const fieldState = fieldsState[key];
|
|
485
|
+
const fieldValue = formValues[key];
|
|
486
|
+
if (fieldState && isObject(fieldState) && fieldValue) {
|
|
487
|
+
const nestedFieldsState = extractFormValues(fieldState, fieldValue);
|
|
488
|
+
if (isObject(nestedFieldsState)) {
|
|
489
|
+
values[key] = nestedFieldsState;
|
|
490
|
+
}
|
|
491
|
+
} else if (fieldsState[key]) {
|
|
492
|
+
values[key] = fieldValue;
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
}
|
|
496
|
+
return values;
|
|
497
|
+
}
|
|
498
|
+
var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
|
|
499
|
+
var isFileInput = (element) => element.type === "file";
|
|
500
|
+
var isHTMLElement = (value) => {
|
|
501
|
+
if (!isWeb) {
|
|
502
|
+
return false;
|
|
503
|
+
}
|
|
504
|
+
const owner = value ? value.ownerDocument : 0;
|
|
505
|
+
return value instanceof (owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement);
|
|
506
|
+
};
|
|
507
|
+
var isMultipleSelect = (element) => element.type === `select-multiple`;
|
|
508
|
+
var isRadioInput = (element) => element.type === "radio";
|
|
509
|
+
var isRadioOrCheckbox = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
|
|
510
|
+
var live = (ref) => isHTMLElement(ref) && ref.isConnected;
|
|
511
|
+
function baseGet(object, updatePath) {
|
|
512
|
+
const length = updatePath.slice(0, -1).length;
|
|
513
|
+
let index = 0;
|
|
514
|
+
while (index < length) {
|
|
515
|
+
object = isUndefined(object) ? index++ : object[updatePath[index++]];
|
|
516
|
+
}
|
|
517
|
+
return object;
|
|
518
|
+
}
|
|
519
|
+
function isEmptyArray(obj) {
|
|
520
|
+
for (const key in obj) {
|
|
521
|
+
if (obj.hasOwnProperty(key) && !isUndefined(obj[key])) {
|
|
522
|
+
return false;
|
|
523
|
+
}
|
|
524
|
+
}
|
|
525
|
+
return true;
|
|
526
|
+
}
|
|
527
|
+
function unset(object, path) {
|
|
528
|
+
const paths = Array.isArray(path) ? path : isKey(path) ? [path] : stringToPath(path);
|
|
529
|
+
const childObject = paths.length === 1 ? object : baseGet(object, paths);
|
|
530
|
+
const index = paths.length - 1;
|
|
531
|
+
const key = paths[index];
|
|
532
|
+
if (childObject) {
|
|
533
|
+
delete childObject[key];
|
|
534
|
+
}
|
|
535
|
+
if (index !== 0 && (isObject(childObject) && isEmptyObject(childObject) || Array.isArray(childObject) && isEmptyArray(childObject))) {
|
|
536
|
+
unset(object, paths.slice(0, -1));
|
|
537
|
+
}
|
|
538
|
+
return object;
|
|
539
|
+
}
|
|
540
|
+
var objectHasFunction = (data) => {
|
|
541
|
+
for (const key in data) {
|
|
542
|
+
if (isFunction(data[key])) {
|
|
543
|
+
return true;
|
|
544
|
+
}
|
|
545
|
+
}
|
|
546
|
+
return false;
|
|
547
|
+
};
|
|
548
|
+
function isTraversable(value) {
|
|
549
|
+
return Array.isArray(value) || isObject(value) && !objectHasFunction(value);
|
|
550
|
+
}
|
|
551
|
+
function markFieldsDirty(data, fields = {}) {
|
|
552
|
+
for (const key in data) {
|
|
553
|
+
const value = data[key];
|
|
554
|
+
if (isTraversable(value)) {
|
|
555
|
+
fields[key] = Array.isArray(value) ? [] : {};
|
|
556
|
+
markFieldsDirty(value, fields[key]);
|
|
557
|
+
} else if (!isUndefined(value)) {
|
|
558
|
+
fields[key] = true;
|
|
559
|
+
}
|
|
560
|
+
}
|
|
561
|
+
return fields;
|
|
562
|
+
}
|
|
563
|
+
function getDirtyFields(data, formValues, dirtyFieldsFromValues) {
|
|
564
|
+
if (!dirtyFieldsFromValues) {
|
|
565
|
+
dirtyFieldsFromValues = markFieldsDirty(formValues);
|
|
566
|
+
}
|
|
567
|
+
for (const key in data) {
|
|
568
|
+
const value = data[key];
|
|
569
|
+
if (isTraversable(value)) {
|
|
570
|
+
if (isUndefined(formValues) || isPrimitive(dirtyFieldsFromValues[key])) {
|
|
571
|
+
dirtyFieldsFromValues[key] = markFieldsDirty(value, Array.isArray(value) ? [] : {});
|
|
572
|
+
} else {
|
|
573
|
+
getDirtyFields(value, isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
|
|
574
|
+
}
|
|
575
|
+
} else {
|
|
576
|
+
const formValue = formValues[key];
|
|
577
|
+
dirtyFieldsFromValues[key] = !deepEqual(value, formValue);
|
|
578
|
+
}
|
|
579
|
+
}
|
|
580
|
+
return dirtyFieldsFromValues;
|
|
581
|
+
}
|
|
582
|
+
var defaultResult = {
|
|
583
|
+
value: false,
|
|
584
|
+
isValid: false
|
|
585
|
+
};
|
|
586
|
+
var validResult = { value: true, isValid: true };
|
|
587
|
+
var getCheckboxValue = (options) => {
|
|
588
|
+
if (Array.isArray(options)) {
|
|
589
|
+
if (options.length > 1) {
|
|
590
|
+
const values = options.filter((option) => option && option.checked && !option.disabled).map((option) => option.value);
|
|
591
|
+
return { value: values, isValid: !!values.length };
|
|
592
|
+
}
|
|
593
|
+
return options[0].checked && !options[0].disabled ? options[0].attributes && !isUndefined(options[0].attributes.value) ? isUndefined(options[0].value) || options[0].value === "" ? validResult : { value: options[0].value, isValid: true } : validResult : defaultResult;
|
|
594
|
+
}
|
|
595
|
+
return defaultResult;
|
|
596
|
+
};
|
|
597
|
+
var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isUndefined(value) ? value : valueAsNumber ? value === "" ? NaN : value ? +value : value : valueAsDate && isString(value) ? new Date(value) : setValueAs ? setValueAs(value) : value;
|
|
598
|
+
var defaultReturn = {
|
|
599
|
+
isValid: false,
|
|
600
|
+
value: null
|
|
601
|
+
};
|
|
602
|
+
var getRadioValue = (options) => Array.isArray(options) ? options.reduce((previous, option) => option && option.checked && !option.disabled ? {
|
|
603
|
+
isValid: true,
|
|
604
|
+
value: option.value
|
|
605
|
+
} : previous, defaultReturn) : defaultReturn;
|
|
606
|
+
function getFieldValue(_f) {
|
|
607
|
+
const ref = _f.ref;
|
|
608
|
+
if (isFileInput(ref)) {
|
|
609
|
+
return ref.files;
|
|
610
|
+
}
|
|
611
|
+
if (isRadioInput(ref)) {
|
|
612
|
+
return getRadioValue(_f.refs).value;
|
|
613
|
+
}
|
|
614
|
+
if (isMultipleSelect(ref)) {
|
|
615
|
+
return [...ref.selectedOptions].map(({ value }) => value);
|
|
616
|
+
}
|
|
617
|
+
if (isCheckBoxInput(ref)) {
|
|
618
|
+
return getCheckboxValue(_f.refs).value;
|
|
619
|
+
}
|
|
620
|
+
return getFieldValueAs(isUndefined(ref.value) ? _f.ref.value : ref.value, _f);
|
|
621
|
+
}
|
|
622
|
+
var getResolverOptions = (fieldsNames, _fields, criteriaMode, shouldUseNativeValidation) => {
|
|
623
|
+
const fields = {};
|
|
624
|
+
for (const name of fieldsNames) {
|
|
625
|
+
const field = get(_fields, name);
|
|
626
|
+
field && set(fields, name, field._f);
|
|
627
|
+
}
|
|
628
|
+
return {
|
|
629
|
+
criteriaMode,
|
|
630
|
+
names: [...fieldsNames],
|
|
631
|
+
fields,
|
|
632
|
+
shouldUseNativeValidation
|
|
633
|
+
};
|
|
634
|
+
};
|
|
635
|
+
var isRegex = (value) => value instanceof RegExp;
|
|
636
|
+
var getRuleValue = (rule) => isUndefined(rule) ? rule : isRegex(rule) ? rule.source : isObject(rule) ? isRegex(rule.value) ? rule.value.source : rule.value : rule;
|
|
637
|
+
var getValidationModes = (mode) => ({
|
|
638
|
+
isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
|
|
639
|
+
isOnBlur: mode === VALIDATION_MODE.onBlur,
|
|
640
|
+
isOnChange: mode === VALIDATION_MODE.onChange,
|
|
641
|
+
isOnAll: mode === VALIDATION_MODE.all,
|
|
642
|
+
isOnTouch: mode === VALIDATION_MODE.onTouched
|
|
643
|
+
});
|
|
644
|
+
var ASYNC_FUNCTION = "AsyncFunction";
|
|
645
|
+
var hasPromiseValidation = (fieldReference) => !!fieldReference && !!fieldReference.validate && !!(isFunction(fieldReference.validate) && fieldReference.validate.constructor.name === ASYNC_FUNCTION || isObject(fieldReference.validate) && Object.values(fieldReference.validate).find((validateFunction) => validateFunction.constructor.name === ASYNC_FUNCTION));
|
|
646
|
+
var hasValidation = (options) => options.mount && (options.required || options.min || options.max || options.maxLength || options.minLength || options.pattern || options.validate);
|
|
647
|
+
var isWatched = (name, _names, isBlurEvent) => !isBlurEvent && (_names.watchAll || _names.watch.has(name) || [..._names.watch].some((watchName) => name.startsWith(watchName) && /^\.\w+/.test(name.slice(watchName.length))));
|
|
648
|
+
var iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
|
|
649
|
+
for (const key of fieldsNames || Object.keys(fields)) {
|
|
650
|
+
const field = get(fields, key);
|
|
651
|
+
if (field) {
|
|
652
|
+
const { _f, ...currentField } = field;
|
|
653
|
+
if (_f) {
|
|
654
|
+
if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {
|
|
655
|
+
return true;
|
|
656
|
+
} else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {
|
|
657
|
+
return true;
|
|
658
|
+
} else {
|
|
659
|
+
if (iterateFieldsByAction(currentField, action)) {
|
|
660
|
+
break;
|
|
661
|
+
}
|
|
662
|
+
}
|
|
663
|
+
} else if (isObject(currentField)) {
|
|
664
|
+
if (iterateFieldsByAction(currentField, action)) {
|
|
665
|
+
break;
|
|
666
|
+
}
|
|
667
|
+
}
|
|
668
|
+
}
|
|
669
|
+
}
|
|
670
|
+
return;
|
|
671
|
+
};
|
|
672
|
+
function schemaErrorLookup(errors, _fields, name) {
|
|
673
|
+
const error = get(errors, name);
|
|
674
|
+
if (error || isKey(name)) {
|
|
675
|
+
return {
|
|
676
|
+
error,
|
|
677
|
+
name
|
|
678
|
+
};
|
|
679
|
+
}
|
|
680
|
+
const names = name.split(".");
|
|
681
|
+
while (names.length) {
|
|
682
|
+
const fieldName = names.join(".");
|
|
683
|
+
const field = get(_fields, fieldName);
|
|
684
|
+
const foundError = get(errors, fieldName);
|
|
685
|
+
if (field && !Array.isArray(field) && name !== fieldName) {
|
|
686
|
+
return { name };
|
|
687
|
+
}
|
|
688
|
+
if (foundError && foundError.type) {
|
|
689
|
+
return {
|
|
690
|
+
name: fieldName,
|
|
691
|
+
error: foundError
|
|
692
|
+
};
|
|
693
|
+
}
|
|
694
|
+
if (foundError && foundError.root && foundError.root.type) {
|
|
695
|
+
return {
|
|
696
|
+
name: `${fieldName}.root`,
|
|
697
|
+
error: foundError.root
|
|
698
|
+
};
|
|
699
|
+
}
|
|
700
|
+
names.pop();
|
|
701
|
+
}
|
|
702
|
+
return {
|
|
703
|
+
name
|
|
704
|
+
};
|
|
705
|
+
}
|
|
706
|
+
var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {
|
|
707
|
+
updateFormState(formStateData);
|
|
708
|
+
const { name, ...formState } = formStateData;
|
|
709
|
+
return isEmptyObject(formState) || Object.keys(formState).length >= Object.keys(_proxyFormState).length || Object.keys(formState).find((key) => _proxyFormState[key] === (!isRoot || VALIDATION_MODE.all));
|
|
710
|
+
};
|
|
711
|
+
var shouldSubscribeByName = (name, signalName, exact) => !name || !signalName || name === signalName || convertToArrayPayload(name).some((currentName) => currentName && (exact ? currentName === signalName : currentName.startsWith(signalName) || signalName.startsWith(currentName)));
|
|
712
|
+
var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode) => {
|
|
713
|
+
if (mode.isOnAll) {
|
|
714
|
+
return false;
|
|
715
|
+
} else if (!isSubmitted && mode.isOnTouch) {
|
|
716
|
+
return !(isTouched || isBlurEvent);
|
|
717
|
+
} else if (isSubmitted ? reValidateMode.isOnBlur : mode.isOnBlur) {
|
|
718
|
+
return !isBlurEvent;
|
|
719
|
+
} else if (isSubmitted ? reValidateMode.isOnChange : mode.isOnChange) {
|
|
720
|
+
return isBlurEvent;
|
|
721
|
+
}
|
|
722
|
+
return true;
|
|
723
|
+
};
|
|
724
|
+
var unsetEmptyArray = (ref, name) => !compact(get(ref, name)).length && unset(ref, name);
|
|
725
|
+
var updateFieldArrayRootError = (errors, error, name) => {
|
|
726
|
+
const fieldArrayErrors = convertToArrayPayload(get(errors, name));
|
|
727
|
+
set(fieldArrayErrors, "root", error[name]);
|
|
728
|
+
set(errors, name, fieldArrayErrors);
|
|
729
|
+
return errors;
|
|
730
|
+
};
|
|
731
|
+
function getValidateError(result, ref, type = "validate") {
|
|
732
|
+
if (isString(result) || Array.isArray(result) && result.every(isString) || isBoolean(result) && !result) {
|
|
733
|
+
return {
|
|
734
|
+
type,
|
|
735
|
+
message: isString(result) ? result : "",
|
|
736
|
+
ref
|
|
737
|
+
};
|
|
738
|
+
}
|
|
739
|
+
}
|
|
740
|
+
var getValueAndMessage = (validationData) => isObject(validationData) && !isRegex(validationData) ? validationData : {
|
|
741
|
+
value: validationData,
|
|
742
|
+
message: ""
|
|
743
|
+
};
|
|
744
|
+
var validateField = async (field, disabledFieldNames, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
|
|
745
|
+
const { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount } = field._f;
|
|
746
|
+
const inputValue = get(formValues, name);
|
|
747
|
+
if (!mount || disabledFieldNames.has(name)) {
|
|
748
|
+
return {};
|
|
749
|
+
}
|
|
750
|
+
const inputRef = refs ? refs[0] : ref;
|
|
751
|
+
const setCustomValidity = (message) => {
|
|
752
|
+
if (shouldUseNativeValidation && inputRef.reportValidity) {
|
|
753
|
+
inputRef.setCustomValidity(isBoolean(message) ? "" : message || "");
|
|
754
|
+
inputRef.reportValidity();
|
|
755
|
+
}
|
|
756
|
+
};
|
|
757
|
+
const error = {};
|
|
758
|
+
const isRadio = isRadioInput(ref);
|
|
759
|
+
const isCheckBox = isCheckBoxInput(ref);
|
|
760
|
+
const isRadioOrCheckbox2 = isRadio || isCheckBox;
|
|
761
|
+
const isEmpty = (valueAsNumber || isFileInput(ref)) && isUndefined(ref.value) && isUndefined(inputValue) || isHTMLElement(ref) && ref.value === "" || inputValue === "" || Array.isArray(inputValue) && !inputValue.length;
|
|
762
|
+
const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
|
|
763
|
+
const getMinMaxMessage = (exceedMax, maxLengthMessage, minLengthMessage, maxType = INPUT_VALIDATION_RULES.maxLength, minType = INPUT_VALIDATION_RULES.minLength) => {
|
|
764
|
+
const message = exceedMax ? maxLengthMessage : minLengthMessage;
|
|
765
|
+
error[name] = {
|
|
766
|
+
type: exceedMax ? maxType : minType,
|
|
767
|
+
message,
|
|
768
|
+
ref,
|
|
769
|
+
...appendErrorsCurry(exceedMax ? maxType : minType, message)
|
|
770
|
+
};
|
|
771
|
+
};
|
|
772
|
+
if (isFieldArray ? !Array.isArray(inputValue) || !inputValue.length : required && (!isRadioOrCheckbox2 && (isEmpty || isNullOrUndefined(inputValue)) || isBoolean(inputValue) && !inputValue || isCheckBox && !getCheckboxValue(refs).isValid || isRadio && !getRadioValue(refs).isValid)) {
|
|
773
|
+
const { value, message } = isString(required) ? { value: !!required, message: required } : getValueAndMessage(required);
|
|
774
|
+
if (value) {
|
|
775
|
+
error[name] = {
|
|
776
|
+
type: INPUT_VALIDATION_RULES.required,
|
|
777
|
+
message,
|
|
778
|
+
ref: inputRef,
|
|
779
|
+
...appendErrorsCurry(INPUT_VALIDATION_RULES.required, message)
|
|
780
|
+
};
|
|
781
|
+
if (!validateAllFieldCriteria) {
|
|
782
|
+
setCustomValidity(message);
|
|
783
|
+
return error;
|
|
784
|
+
}
|
|
785
|
+
}
|
|
786
|
+
}
|
|
787
|
+
if (!isEmpty && (!isNullOrUndefined(min) || !isNullOrUndefined(max))) {
|
|
788
|
+
let exceedMax;
|
|
789
|
+
let exceedMin;
|
|
790
|
+
const maxOutput = getValueAndMessage(max);
|
|
791
|
+
const minOutput = getValueAndMessage(min);
|
|
792
|
+
if (!isNullOrUndefined(inputValue) && !isNaN(inputValue)) {
|
|
793
|
+
const valueNumber = ref.valueAsNumber || (inputValue ? +inputValue : inputValue);
|
|
794
|
+
if (!isNullOrUndefined(maxOutput.value)) {
|
|
795
|
+
exceedMax = valueNumber > maxOutput.value;
|
|
796
|
+
}
|
|
797
|
+
if (!isNullOrUndefined(minOutput.value)) {
|
|
798
|
+
exceedMin = valueNumber < minOutput.value;
|
|
799
|
+
}
|
|
800
|
+
} else {
|
|
801
|
+
const valueDate = ref.valueAsDate || new Date(inputValue);
|
|
802
|
+
const convertTimeToDate = (time) => new Date(new Date().toDateString() + " " + time);
|
|
803
|
+
const isTime = ref.type == "time";
|
|
804
|
+
const isWeek = ref.type == "week";
|
|
805
|
+
if (isString(maxOutput.value) && inputValue) {
|
|
806
|
+
exceedMax = isTime ? convertTimeToDate(inputValue) > convertTimeToDate(maxOutput.value) : isWeek ? inputValue > maxOutput.value : valueDate > new Date(maxOutput.value);
|
|
807
|
+
}
|
|
808
|
+
if (isString(minOutput.value) && inputValue) {
|
|
809
|
+
exceedMin = isTime ? convertTimeToDate(inputValue) < convertTimeToDate(minOutput.value) : isWeek ? inputValue < minOutput.value : valueDate < new Date(minOutput.value);
|
|
810
|
+
}
|
|
811
|
+
}
|
|
812
|
+
if (exceedMax || exceedMin) {
|
|
813
|
+
getMinMaxMessage(!!exceedMax, maxOutput.message, minOutput.message, INPUT_VALIDATION_RULES.max, INPUT_VALIDATION_RULES.min);
|
|
814
|
+
if (!validateAllFieldCriteria) {
|
|
815
|
+
setCustomValidity(error[name].message);
|
|
816
|
+
return error;
|
|
817
|
+
}
|
|
818
|
+
}
|
|
819
|
+
}
|
|
820
|
+
if ((maxLength || minLength) && !isEmpty && (isString(inputValue) || isFieldArray && Array.isArray(inputValue))) {
|
|
821
|
+
const maxLengthOutput = getValueAndMessage(maxLength);
|
|
822
|
+
const minLengthOutput = getValueAndMessage(minLength);
|
|
823
|
+
const exceedMax = !isNullOrUndefined(maxLengthOutput.value) && inputValue.length > +maxLengthOutput.value;
|
|
824
|
+
const exceedMin = !isNullOrUndefined(minLengthOutput.value) && inputValue.length < +minLengthOutput.value;
|
|
825
|
+
if (exceedMax || exceedMin) {
|
|
826
|
+
getMinMaxMessage(exceedMax, maxLengthOutput.message, minLengthOutput.message);
|
|
827
|
+
if (!validateAllFieldCriteria) {
|
|
828
|
+
setCustomValidity(error[name].message);
|
|
829
|
+
return error;
|
|
830
|
+
}
|
|
831
|
+
}
|
|
832
|
+
}
|
|
833
|
+
if (pattern && !isEmpty && isString(inputValue)) {
|
|
834
|
+
const { value: patternValue, message } = getValueAndMessage(pattern);
|
|
835
|
+
if (isRegex(patternValue) && !inputValue.match(patternValue)) {
|
|
836
|
+
error[name] = {
|
|
837
|
+
type: INPUT_VALIDATION_RULES.pattern,
|
|
838
|
+
message,
|
|
839
|
+
ref,
|
|
840
|
+
...appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message)
|
|
841
|
+
};
|
|
842
|
+
if (!validateAllFieldCriteria) {
|
|
843
|
+
setCustomValidity(message);
|
|
844
|
+
return error;
|
|
845
|
+
}
|
|
846
|
+
}
|
|
847
|
+
}
|
|
848
|
+
if (validate) {
|
|
849
|
+
if (isFunction(validate)) {
|
|
850
|
+
const result = await validate(inputValue, formValues);
|
|
851
|
+
const validateError = getValidateError(result, inputRef);
|
|
852
|
+
if (validateError) {
|
|
853
|
+
error[name] = {
|
|
854
|
+
...validateError,
|
|
855
|
+
...appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message)
|
|
856
|
+
};
|
|
857
|
+
if (!validateAllFieldCriteria) {
|
|
858
|
+
setCustomValidity(validateError.message);
|
|
859
|
+
return error;
|
|
860
|
+
}
|
|
861
|
+
}
|
|
862
|
+
} else if (isObject(validate)) {
|
|
863
|
+
let validationResult = {};
|
|
864
|
+
for (const key in validate) {
|
|
865
|
+
if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
|
|
866
|
+
break;
|
|
867
|
+
}
|
|
868
|
+
const validateError = getValidateError(await validate[key](inputValue, formValues), inputRef, key);
|
|
869
|
+
if (validateError) {
|
|
870
|
+
validationResult = {
|
|
871
|
+
...validateError,
|
|
872
|
+
...appendErrorsCurry(key, validateError.message)
|
|
873
|
+
};
|
|
874
|
+
setCustomValidity(validateError.message);
|
|
875
|
+
if (validateAllFieldCriteria) {
|
|
876
|
+
error[name] = validationResult;
|
|
877
|
+
}
|
|
878
|
+
}
|
|
879
|
+
}
|
|
880
|
+
if (!isEmptyObject(validationResult)) {
|
|
881
|
+
error[name] = {
|
|
882
|
+
ref: inputRef,
|
|
883
|
+
...validationResult
|
|
884
|
+
};
|
|
885
|
+
if (!validateAllFieldCriteria) {
|
|
886
|
+
return error;
|
|
887
|
+
}
|
|
888
|
+
}
|
|
889
|
+
}
|
|
890
|
+
}
|
|
891
|
+
setCustomValidity(true);
|
|
892
|
+
return error;
|
|
893
|
+
};
|
|
894
|
+
var defaultOptions = {
|
|
895
|
+
mode: VALIDATION_MODE.onSubmit,
|
|
896
|
+
reValidateMode: VALIDATION_MODE.onChange,
|
|
897
|
+
shouldFocusError: true
|
|
898
|
+
};
|
|
899
|
+
function createFormControl(props = {}) {
|
|
900
|
+
let _options = {
|
|
901
|
+
...defaultOptions,
|
|
902
|
+
...props
|
|
903
|
+
};
|
|
904
|
+
let _formState = {
|
|
905
|
+
submitCount: 0,
|
|
906
|
+
isDirty: false,
|
|
907
|
+
isReady: false,
|
|
908
|
+
isLoading: isFunction(_options.defaultValues),
|
|
909
|
+
isValidating: false,
|
|
910
|
+
isSubmitted: false,
|
|
911
|
+
isSubmitting: false,
|
|
912
|
+
isSubmitSuccessful: false,
|
|
913
|
+
isValid: false,
|
|
914
|
+
touchedFields: {},
|
|
915
|
+
dirtyFields: {},
|
|
916
|
+
validatingFields: {},
|
|
917
|
+
errors: _options.errors || {},
|
|
918
|
+
disabled: _options.disabled || false
|
|
919
|
+
};
|
|
920
|
+
let _fields = {};
|
|
921
|
+
let _defaultValues = isObject(_options.defaultValues) || isObject(_options.values) ? cloneObject(_options.defaultValues || _options.values) || {} : {};
|
|
922
|
+
let _formValues = _options.shouldUnregister ? {} : cloneObject(_defaultValues);
|
|
923
|
+
let _state = {
|
|
924
|
+
action: false,
|
|
925
|
+
mount: false,
|
|
926
|
+
watch: false,
|
|
927
|
+
keepIsValid: false
|
|
928
|
+
};
|
|
929
|
+
let _names = {
|
|
930
|
+
mount: new Set,
|
|
931
|
+
disabled: new Set,
|
|
932
|
+
unMount: new Set,
|
|
933
|
+
array: new Set,
|
|
934
|
+
watch: new Set
|
|
935
|
+
};
|
|
936
|
+
let delayErrorCallback;
|
|
937
|
+
let timer = 0;
|
|
938
|
+
const defaultProxyFormState = {
|
|
939
|
+
isDirty: false,
|
|
940
|
+
dirtyFields: false,
|
|
941
|
+
validatingFields: false,
|
|
942
|
+
touchedFields: false,
|
|
943
|
+
isValidating: false,
|
|
944
|
+
isValid: false,
|
|
945
|
+
errors: false
|
|
946
|
+
};
|
|
947
|
+
const _proxyFormState = {
|
|
948
|
+
...defaultProxyFormState
|
|
949
|
+
};
|
|
950
|
+
let _proxySubscribeFormState = {
|
|
951
|
+
..._proxyFormState
|
|
952
|
+
};
|
|
953
|
+
const _subjects = {
|
|
954
|
+
array: createSubject(),
|
|
955
|
+
state: createSubject()
|
|
956
|
+
};
|
|
957
|
+
const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
|
|
958
|
+
const debounce = (callback) => (wait) => {
|
|
959
|
+
clearTimeout(timer);
|
|
960
|
+
timer = setTimeout(callback, wait);
|
|
961
|
+
};
|
|
962
|
+
const _setValid = async (shouldUpdateValid) => {
|
|
963
|
+
if (_state.keepIsValid) {
|
|
964
|
+
return;
|
|
965
|
+
}
|
|
966
|
+
if (!_options.disabled && (_proxyFormState.isValid || _proxySubscribeFormState.isValid || shouldUpdateValid)) {
|
|
967
|
+
let isValid;
|
|
968
|
+
if (_options.resolver) {
|
|
969
|
+
isValid = isEmptyObject((await _runSchema()).errors);
|
|
970
|
+
_updateIsValidating();
|
|
971
|
+
} else {
|
|
972
|
+
isValid = await executeBuiltInValidation(_fields, true);
|
|
973
|
+
}
|
|
974
|
+
if (isValid !== _formState.isValid) {
|
|
975
|
+
_subjects.state.next({
|
|
976
|
+
isValid
|
|
977
|
+
});
|
|
978
|
+
}
|
|
979
|
+
}
|
|
980
|
+
};
|
|
981
|
+
const _updateIsValidating = (names, isValidating) => {
|
|
982
|
+
if (!_options.disabled && (_proxyFormState.isValidating || _proxyFormState.validatingFields || _proxySubscribeFormState.isValidating || _proxySubscribeFormState.validatingFields)) {
|
|
983
|
+
(names || Array.from(_names.mount)).forEach((name) => {
|
|
984
|
+
if (name) {
|
|
985
|
+
isValidating ? set(_formState.validatingFields, name, isValidating) : unset(_formState.validatingFields, name);
|
|
986
|
+
}
|
|
987
|
+
});
|
|
988
|
+
_subjects.state.next({
|
|
989
|
+
validatingFields: _formState.validatingFields,
|
|
990
|
+
isValidating: !isEmptyObject(_formState.validatingFields)
|
|
991
|
+
});
|
|
992
|
+
}
|
|
993
|
+
};
|
|
994
|
+
const _setFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
|
|
995
|
+
if (args && method && !_options.disabled) {
|
|
996
|
+
_state.action = true;
|
|
997
|
+
if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
|
|
998
|
+
const fieldValues = method(get(_fields, name), args.argA, args.argB);
|
|
999
|
+
shouldSetValues && set(_fields, name, fieldValues);
|
|
1000
|
+
}
|
|
1001
|
+
if (shouldUpdateFieldsAndState && Array.isArray(get(_formState.errors, name))) {
|
|
1002
|
+
const errors = method(get(_formState.errors, name), args.argA, args.argB);
|
|
1003
|
+
shouldSetValues && set(_formState.errors, name, errors);
|
|
1004
|
+
unsetEmptyArray(_formState.errors, name);
|
|
1005
|
+
}
|
|
1006
|
+
if ((_proxyFormState.touchedFields || _proxySubscribeFormState.touchedFields) && shouldUpdateFieldsAndState && Array.isArray(get(_formState.touchedFields, name))) {
|
|
1007
|
+
const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
|
|
1008
|
+
shouldSetValues && set(_formState.touchedFields, name, touchedFields);
|
|
1009
|
+
}
|
|
1010
|
+
if (_proxyFormState.dirtyFields || _proxySubscribeFormState.dirtyFields) {
|
|
1011
|
+
_formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
|
|
1012
|
+
}
|
|
1013
|
+
_subjects.state.next({
|
|
1014
|
+
name,
|
|
1015
|
+
isDirty: _getDirty(name, values),
|
|
1016
|
+
dirtyFields: _formState.dirtyFields,
|
|
1017
|
+
errors: _formState.errors,
|
|
1018
|
+
isValid: _formState.isValid
|
|
1019
|
+
});
|
|
1020
|
+
} else {
|
|
1021
|
+
set(_formValues, name, values);
|
|
1022
|
+
}
|
|
1023
|
+
};
|
|
1024
|
+
const updateErrors = (name, error) => {
|
|
1025
|
+
set(_formState.errors, name, error);
|
|
1026
|
+
_subjects.state.next({
|
|
1027
|
+
errors: _formState.errors
|
|
1028
|
+
});
|
|
1029
|
+
};
|
|
1030
|
+
const _setErrors = (errors) => {
|
|
1031
|
+
_formState.errors = errors;
|
|
1032
|
+
_subjects.state.next({
|
|
1033
|
+
errors: _formState.errors,
|
|
1034
|
+
isValid: false
|
|
1035
|
+
});
|
|
1036
|
+
};
|
|
1037
|
+
const updateValidAndValue = (name, shouldSkipSetValueAs, value, ref) => {
|
|
1038
|
+
const field = get(_fields, name);
|
|
1039
|
+
if (field) {
|
|
1040
|
+
const defaultValue = get(_formValues, name, isUndefined(value) ? get(_defaultValues, name) : value);
|
|
1041
|
+
isUndefined(defaultValue) || ref && ref.defaultChecked || shouldSkipSetValueAs ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f)) : setFieldValue(name, defaultValue);
|
|
1042
|
+
_state.mount && !_state.action && _setValid();
|
|
1043
|
+
}
|
|
1044
|
+
};
|
|
1045
|
+
const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
|
|
1046
|
+
let shouldUpdateField = false;
|
|
1047
|
+
let isPreviousDirty = false;
|
|
1048
|
+
const output = {
|
|
1049
|
+
name
|
|
1050
|
+
};
|
|
1051
|
+
if (!_options.disabled) {
|
|
1052
|
+
if (!isBlurEvent || shouldDirty) {
|
|
1053
|
+
if (_proxyFormState.isDirty || _proxySubscribeFormState.isDirty) {
|
|
1054
|
+
isPreviousDirty = _formState.isDirty;
|
|
1055
|
+
_formState.isDirty = output.isDirty = _getDirty();
|
|
1056
|
+
shouldUpdateField = isPreviousDirty !== output.isDirty;
|
|
1057
|
+
}
|
|
1058
|
+
const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
|
|
1059
|
+
isPreviousDirty = !!get(_formState.dirtyFields, name);
|
|
1060
|
+
isCurrentFieldPristine ? unset(_formState.dirtyFields, name) : set(_formState.dirtyFields, name, true);
|
|
1061
|
+
output.dirtyFields = _formState.dirtyFields;
|
|
1062
|
+
shouldUpdateField = shouldUpdateField || (_proxyFormState.dirtyFields || _proxySubscribeFormState.dirtyFields) && isPreviousDirty !== !isCurrentFieldPristine;
|
|
1063
|
+
}
|
|
1064
|
+
if (isBlurEvent) {
|
|
1065
|
+
const isPreviousFieldTouched = get(_formState.touchedFields, name);
|
|
1066
|
+
if (!isPreviousFieldTouched) {
|
|
1067
|
+
set(_formState.touchedFields, name, isBlurEvent);
|
|
1068
|
+
output.touchedFields = _formState.touchedFields;
|
|
1069
|
+
shouldUpdateField = shouldUpdateField || (_proxyFormState.touchedFields || _proxySubscribeFormState.touchedFields) && isPreviousFieldTouched !== isBlurEvent;
|
|
1070
|
+
}
|
|
1071
|
+
}
|
|
1072
|
+
shouldUpdateField && shouldRender && _subjects.state.next(output);
|
|
1073
|
+
}
|
|
1074
|
+
return shouldUpdateField ? output : {};
|
|
1075
|
+
};
|
|
1076
|
+
const shouldRenderByError = (name, isValid, error, fieldState) => {
|
|
1077
|
+
const previousFieldError = get(_formState.errors, name);
|
|
1078
|
+
const shouldUpdateValid = (_proxyFormState.isValid || _proxySubscribeFormState.isValid) && isBoolean(isValid) && _formState.isValid !== isValid;
|
|
1079
|
+
if (_options.delayError && error) {
|
|
1080
|
+
delayErrorCallback = debounce(() => updateErrors(name, error));
|
|
1081
|
+
delayErrorCallback(_options.delayError);
|
|
1082
|
+
} else {
|
|
1083
|
+
clearTimeout(timer);
|
|
1084
|
+
delayErrorCallback = null;
|
|
1085
|
+
error ? set(_formState.errors, name, error) : unset(_formState.errors, name);
|
|
1086
|
+
}
|
|
1087
|
+
if ((error ? !deepEqual(previousFieldError, error) : previousFieldError) || !isEmptyObject(fieldState) || shouldUpdateValid) {
|
|
1088
|
+
const updatedFormState = {
|
|
1089
|
+
...fieldState,
|
|
1090
|
+
...shouldUpdateValid && isBoolean(isValid) ? { isValid } : {},
|
|
1091
|
+
errors: _formState.errors,
|
|
1092
|
+
name
|
|
1093
|
+
};
|
|
1094
|
+
_formState = {
|
|
1095
|
+
..._formState,
|
|
1096
|
+
...updatedFormState
|
|
1097
|
+
};
|
|
1098
|
+
_subjects.state.next(updatedFormState);
|
|
1099
|
+
}
|
|
1100
|
+
};
|
|
1101
|
+
const _runSchema = async (name) => {
|
|
1102
|
+
_updateIsValidating(name, true);
|
|
1103
|
+
const result = await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
|
|
1104
|
+
return result;
|
|
1105
|
+
};
|
|
1106
|
+
const executeSchemaAndUpdateState = async (names) => {
|
|
1107
|
+
const { errors } = await _runSchema(names);
|
|
1108
|
+
_updateIsValidating(names);
|
|
1109
|
+
if (names) {
|
|
1110
|
+
for (const name of names) {
|
|
1111
|
+
const error = get(errors, name);
|
|
1112
|
+
error ? set(_formState.errors, name, error) : unset(_formState.errors, name);
|
|
1113
|
+
}
|
|
1114
|
+
} else {
|
|
1115
|
+
_formState.errors = errors;
|
|
1116
|
+
}
|
|
1117
|
+
return errors;
|
|
1118
|
+
};
|
|
1119
|
+
const executeBuiltInValidation = async (fields, shouldOnlyCheckValid, context = {
|
|
1120
|
+
valid: true
|
|
1121
|
+
}) => {
|
|
1122
|
+
for (const name in fields) {
|
|
1123
|
+
const field = fields[name];
|
|
1124
|
+
if (field) {
|
|
1125
|
+
const { _f, ...fieldValue } = field;
|
|
1126
|
+
if (_f) {
|
|
1127
|
+
const isFieldArrayRoot = _names.array.has(_f.name);
|
|
1128
|
+
const isPromiseFunction = field._f && hasPromiseValidation(field._f);
|
|
1129
|
+
if (isPromiseFunction && _proxyFormState.validatingFields) {
|
|
1130
|
+
_updateIsValidating([_f.name], true);
|
|
1131
|
+
}
|
|
1132
|
+
const fieldError = await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
|
|
1133
|
+
if (isPromiseFunction && _proxyFormState.validatingFields) {
|
|
1134
|
+
_updateIsValidating([_f.name]);
|
|
1135
|
+
}
|
|
1136
|
+
if (fieldError[_f.name]) {
|
|
1137
|
+
context.valid = false;
|
|
1138
|
+
if (shouldOnlyCheckValid || props.shouldUseNativeValidation) {
|
|
1139
|
+
break;
|
|
1140
|
+
}
|
|
1141
|
+
}
|
|
1142
|
+
!shouldOnlyCheckValid && (get(fieldError, _f.name) ? isFieldArrayRoot ? updateFieldArrayRootError(_formState.errors, fieldError, _f.name) : set(_formState.errors, _f.name, fieldError[_f.name]) : unset(_formState.errors, _f.name));
|
|
1143
|
+
}
|
|
1144
|
+
!isEmptyObject(fieldValue) && await executeBuiltInValidation(fieldValue, shouldOnlyCheckValid, context);
|
|
1145
|
+
}
|
|
1146
|
+
}
|
|
1147
|
+
return context.valid;
|
|
1148
|
+
};
|
|
1149
|
+
const _removeUnmounted = () => {
|
|
1150
|
+
for (const name of _names.unMount) {
|
|
1151
|
+
const field = get(_fields, name);
|
|
1152
|
+
field && (field._f.refs ? field._f.refs.every((ref) => !live(ref)) : !live(field._f.ref)) && unregister(name);
|
|
1153
|
+
}
|
|
1154
|
+
_names.unMount = new Set;
|
|
1155
|
+
};
|
|
1156
|
+
const _getDirty = (name, data) => !_options.disabled && (name && data && set(_formValues, name, data), !deepEqual(getValues(), _defaultValues));
|
|
1157
|
+
const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
|
|
1158
|
+
..._state.mount ? _formValues : isUndefined(defaultValue) ? _defaultValues : isString(names) ? { [names]: defaultValue } : defaultValue
|
|
1159
|
+
}, isGlobal, defaultValue);
|
|
1160
|
+
const _getFieldArray = (name) => compact(get(_state.mount ? _formValues : _defaultValues, name, _options.shouldUnregister ? get(_defaultValues, name, []) : []));
|
|
1161
|
+
const setFieldValue = (name, value, options = {}) => {
|
|
1162
|
+
const field = get(_fields, name);
|
|
1163
|
+
let fieldValue = value;
|
|
1164
|
+
if (field) {
|
|
1165
|
+
const fieldReference = field._f;
|
|
1166
|
+
if (fieldReference) {
|
|
1167
|
+
!fieldReference.disabled && set(_formValues, name, getFieldValueAs(value, fieldReference));
|
|
1168
|
+
fieldValue = isHTMLElement(fieldReference.ref) && isNullOrUndefined(value) ? "" : value;
|
|
1169
|
+
if (isMultipleSelect(fieldReference.ref)) {
|
|
1170
|
+
[...fieldReference.ref.options].forEach((optionRef) => optionRef.selected = fieldValue.includes(optionRef.value));
|
|
1171
|
+
} else if (fieldReference.refs) {
|
|
1172
|
+
if (isCheckBoxInput(fieldReference.ref)) {
|
|
1173
|
+
fieldReference.refs.forEach((checkboxRef) => {
|
|
1174
|
+
if (!checkboxRef.defaultChecked || !checkboxRef.disabled) {
|
|
1175
|
+
if (Array.isArray(fieldValue)) {
|
|
1176
|
+
checkboxRef.checked = !!fieldValue.find((data) => data === checkboxRef.value);
|
|
1177
|
+
} else {
|
|
1178
|
+
checkboxRef.checked = fieldValue === checkboxRef.value || !!fieldValue;
|
|
1179
|
+
}
|
|
1180
|
+
}
|
|
1181
|
+
});
|
|
1182
|
+
} else {
|
|
1183
|
+
fieldReference.refs.forEach((radioRef) => radioRef.checked = radioRef.value === fieldValue);
|
|
1184
|
+
}
|
|
1185
|
+
} else if (isFileInput(fieldReference.ref)) {
|
|
1186
|
+
fieldReference.ref.value = "";
|
|
1187
|
+
} else {
|
|
1188
|
+
fieldReference.ref.value = fieldValue;
|
|
1189
|
+
if (!fieldReference.ref.type) {
|
|
1190
|
+
_subjects.state.next({
|
|
1191
|
+
name,
|
|
1192
|
+
values: cloneObject(_formValues)
|
|
1193
|
+
});
|
|
1194
|
+
}
|
|
1195
|
+
}
|
|
1196
|
+
}
|
|
1197
|
+
}
|
|
1198
|
+
(options.shouldDirty || options.shouldTouch) && updateTouchAndDirty(name, fieldValue, options.shouldTouch, options.shouldDirty, true);
|
|
1199
|
+
options.shouldValidate && trigger(name);
|
|
1200
|
+
};
|
|
1201
|
+
const setValues = (name, value, options) => {
|
|
1202
|
+
for (const fieldKey in value) {
|
|
1203
|
+
if (!value.hasOwnProperty(fieldKey)) {
|
|
1204
|
+
return;
|
|
1205
|
+
}
|
|
1206
|
+
const fieldValue = value[fieldKey];
|
|
1207
|
+
const fieldName = name + "." + fieldKey;
|
|
1208
|
+
const field = get(_fields, fieldName);
|
|
1209
|
+
(_names.array.has(name) || isObject(fieldValue) || field && !field._f) && !isDateObject(fieldValue) ? setValues(fieldName, fieldValue, options) : setFieldValue(fieldName, fieldValue, options);
|
|
1210
|
+
}
|
|
1211
|
+
};
|
|
1212
|
+
const setValue = (name, value, options = {}) => {
|
|
1213
|
+
const field = get(_fields, name);
|
|
1214
|
+
const isFieldArray = _names.array.has(name);
|
|
1215
|
+
const cloneValue = cloneObject(value);
|
|
1216
|
+
set(_formValues, name, cloneValue);
|
|
1217
|
+
if (isFieldArray) {
|
|
1218
|
+
_subjects.array.next({
|
|
1219
|
+
name,
|
|
1220
|
+
values: cloneObject(_formValues)
|
|
1221
|
+
});
|
|
1222
|
+
if ((_proxyFormState.isDirty || _proxyFormState.dirtyFields || _proxySubscribeFormState.isDirty || _proxySubscribeFormState.dirtyFields) && options.shouldDirty) {
|
|
1223
|
+
_subjects.state.next({
|
|
1224
|
+
name,
|
|
1225
|
+
dirtyFields: getDirtyFields(_defaultValues, _formValues),
|
|
1226
|
+
isDirty: _getDirty(name, cloneValue)
|
|
1227
|
+
});
|
|
1228
|
+
}
|
|
1229
|
+
} else {
|
|
1230
|
+
field && !field._f && !isNullOrUndefined(cloneValue) ? setValues(name, cloneValue, options) : setFieldValue(name, cloneValue, options);
|
|
1231
|
+
}
|
|
1232
|
+
if (isWatched(name, _names)) {
|
|
1233
|
+
_subjects.state.next({
|
|
1234
|
+
..._formState,
|
|
1235
|
+
name,
|
|
1236
|
+
values: cloneObject(_formValues)
|
|
1237
|
+
});
|
|
1238
|
+
} else {
|
|
1239
|
+
_subjects.state.next({
|
|
1240
|
+
name: _state.mount ? name : undefined,
|
|
1241
|
+
values: cloneObject(_formValues)
|
|
1242
|
+
});
|
|
1243
|
+
}
|
|
1244
|
+
};
|
|
1245
|
+
const onChange = async (event) => {
|
|
1246
|
+
_state.mount = true;
|
|
1247
|
+
const target = event.target;
|
|
1248
|
+
let name = target.name;
|
|
1249
|
+
let isFieldValueUpdated = true;
|
|
1250
|
+
const field = get(_fields, name);
|
|
1251
|
+
const _updateIsFieldValueUpdated = (fieldValue) => {
|
|
1252
|
+
isFieldValueUpdated = Number.isNaN(fieldValue) || isDateObject(fieldValue) && isNaN(fieldValue.getTime()) || deepEqual(fieldValue, get(_formValues, name, fieldValue));
|
|
1253
|
+
};
|
|
1254
|
+
const validationModeBeforeSubmit = getValidationModes(_options.mode);
|
|
1255
|
+
const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
|
|
1256
|
+
if (field) {
|
|
1257
|
+
let error;
|
|
1258
|
+
let isValid;
|
|
1259
|
+
const fieldValue = target.type ? getFieldValue(field._f) : getEventValue(event);
|
|
1260
|
+
const isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
|
|
1261
|
+
const shouldSkipValidation = !hasValidation(field._f) && !_options.resolver && !get(_formState.errors, name) && !field._f.deps || skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, validationModeAfterSubmit, validationModeBeforeSubmit);
|
|
1262
|
+
const watched = isWatched(name, _names, isBlurEvent);
|
|
1263
|
+
set(_formValues, name, fieldValue);
|
|
1264
|
+
if (isBlurEvent) {
|
|
1265
|
+
if (!target || !target.readOnly) {
|
|
1266
|
+
field._f.onBlur && field._f.onBlur(event);
|
|
1267
|
+
delayErrorCallback && delayErrorCallback(0);
|
|
1268
|
+
}
|
|
1269
|
+
} else if (field._f.onChange) {
|
|
1270
|
+
field._f.onChange(event);
|
|
1271
|
+
}
|
|
1272
|
+
const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent);
|
|
1273
|
+
const shouldRender = !isEmptyObject(fieldState) || watched;
|
|
1274
|
+
!isBlurEvent && _subjects.state.next({
|
|
1275
|
+
name,
|
|
1276
|
+
type: event.type,
|
|
1277
|
+
values: cloneObject(_formValues)
|
|
1278
|
+
});
|
|
1279
|
+
if (shouldSkipValidation) {
|
|
1280
|
+
if (_proxyFormState.isValid || _proxySubscribeFormState.isValid) {
|
|
1281
|
+
if (_options.mode === "onBlur") {
|
|
1282
|
+
if (isBlurEvent) {
|
|
1283
|
+
_setValid();
|
|
1284
|
+
}
|
|
1285
|
+
} else if (!isBlurEvent) {
|
|
1286
|
+
_setValid();
|
|
1287
|
+
}
|
|
1288
|
+
}
|
|
1289
|
+
return shouldRender && _subjects.state.next({ name, ...watched ? {} : fieldState });
|
|
1290
|
+
}
|
|
1291
|
+
!isBlurEvent && watched && _subjects.state.next({ ..._formState });
|
|
1292
|
+
if (_options.resolver) {
|
|
1293
|
+
const { errors } = await _runSchema([name]);
|
|
1294
|
+
_updateIsValidating([name]);
|
|
1295
|
+
_updateIsFieldValueUpdated(fieldValue);
|
|
1296
|
+
if (isFieldValueUpdated) {
|
|
1297
|
+
const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
|
|
1298
|
+
const errorLookupResult = schemaErrorLookup(errors, _fields, previousErrorLookupResult.name || name);
|
|
1299
|
+
error = errorLookupResult.error;
|
|
1300
|
+
name = errorLookupResult.name;
|
|
1301
|
+
isValid = isEmptyObject(errors);
|
|
1302
|
+
}
|
|
1303
|
+
} else {
|
|
1304
|
+
_updateIsValidating([name], true);
|
|
1305
|
+
error = (await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
|
|
1306
|
+
_updateIsValidating([name]);
|
|
1307
|
+
_updateIsFieldValueUpdated(fieldValue);
|
|
1308
|
+
if (isFieldValueUpdated) {
|
|
1309
|
+
if (error) {
|
|
1310
|
+
isValid = false;
|
|
1311
|
+
} else if (_proxyFormState.isValid || _proxySubscribeFormState.isValid) {
|
|
1312
|
+
isValid = await executeBuiltInValidation(_fields, true);
|
|
1313
|
+
}
|
|
1314
|
+
}
|
|
1315
|
+
}
|
|
1316
|
+
if (isFieldValueUpdated) {
|
|
1317
|
+
field._f.deps && (!Array.isArray(field._f.deps) || field._f.deps.length > 0) && trigger(field._f.deps);
|
|
1318
|
+
shouldRenderByError(name, isValid, error, fieldState);
|
|
1319
|
+
}
|
|
1320
|
+
}
|
|
1321
|
+
};
|
|
1322
|
+
const _focusInput = (ref, key) => {
|
|
1323
|
+
if (get(_formState.errors, key) && ref.focus) {
|
|
1324
|
+
ref.focus();
|
|
1325
|
+
return 1;
|
|
1326
|
+
}
|
|
1327
|
+
return;
|
|
1328
|
+
};
|
|
1329
|
+
const trigger = async (name, options = {}) => {
|
|
1330
|
+
let isValid;
|
|
1331
|
+
let validationResult;
|
|
1332
|
+
const fieldNames = convertToArrayPayload(name);
|
|
1333
|
+
if (_options.resolver) {
|
|
1334
|
+
const errors = await executeSchemaAndUpdateState(isUndefined(name) ? name : fieldNames);
|
|
1335
|
+
isValid = isEmptyObject(errors);
|
|
1336
|
+
validationResult = name ? !fieldNames.some((name2) => get(errors, name2)) : isValid;
|
|
1337
|
+
} else if (name) {
|
|
1338
|
+
validationResult = (await Promise.all(fieldNames.map(async (fieldName) => {
|
|
1339
|
+
const field = get(_fields, fieldName);
|
|
1340
|
+
return await executeBuiltInValidation(field && field._f ? { [fieldName]: field } : field);
|
|
1341
|
+
}))).every(Boolean);
|
|
1342
|
+
!(!validationResult && !_formState.isValid) && _setValid();
|
|
1343
|
+
} else {
|
|
1344
|
+
validationResult = isValid = await executeBuiltInValidation(_fields);
|
|
1345
|
+
}
|
|
1346
|
+
_subjects.state.next({
|
|
1347
|
+
...!isString(name) || (_proxyFormState.isValid || _proxySubscribeFormState.isValid) && isValid !== _formState.isValid ? {} : { name },
|
|
1348
|
+
..._options.resolver || !name ? { isValid } : {},
|
|
1349
|
+
errors: _formState.errors
|
|
1350
|
+
});
|
|
1351
|
+
options.shouldFocus && !validationResult && iterateFieldsByAction(_fields, _focusInput, name ? fieldNames : _names.mount);
|
|
1352
|
+
return validationResult;
|
|
1353
|
+
};
|
|
1354
|
+
const getValues = (fieldNames, config) => {
|
|
1355
|
+
let values = {
|
|
1356
|
+
..._state.mount ? _formValues : _defaultValues
|
|
1357
|
+
};
|
|
1358
|
+
if (config) {
|
|
1359
|
+
values = extractFormValues(config.dirtyFields ? _formState.dirtyFields : _formState.touchedFields, values);
|
|
1360
|
+
}
|
|
1361
|
+
return isUndefined(fieldNames) ? values : isString(fieldNames) ? get(values, fieldNames) : fieldNames.map((name) => get(values, name));
|
|
1362
|
+
};
|
|
1363
|
+
const getFieldState = (name, formState) => ({
|
|
1364
|
+
invalid: !!get((formState || _formState).errors, name),
|
|
1365
|
+
isDirty: !!get((formState || _formState).dirtyFields, name),
|
|
1366
|
+
error: get((formState || _formState).errors, name),
|
|
1367
|
+
isValidating: !!get(_formState.validatingFields, name),
|
|
1368
|
+
isTouched: !!get((formState || _formState).touchedFields, name)
|
|
1369
|
+
});
|
|
1370
|
+
const clearErrors = (name) => {
|
|
1371
|
+
name && convertToArrayPayload(name).forEach((inputName) => unset(_formState.errors, inputName));
|
|
1372
|
+
_subjects.state.next({
|
|
1373
|
+
errors: name ? _formState.errors : {}
|
|
1374
|
+
});
|
|
1375
|
+
};
|
|
1376
|
+
const setError = (name, error, options) => {
|
|
1377
|
+
const ref = (get(_fields, name, { _f: {} })._f || {}).ref;
|
|
1378
|
+
const currentError = get(_formState.errors, name) || {};
|
|
1379
|
+
const { ref: currentRef, message, type, ...restOfErrorTree } = currentError;
|
|
1380
|
+
set(_formState.errors, name, {
|
|
1381
|
+
...restOfErrorTree,
|
|
1382
|
+
...error,
|
|
1383
|
+
ref
|
|
1384
|
+
});
|
|
1385
|
+
_subjects.state.next({
|
|
1386
|
+
name,
|
|
1387
|
+
errors: _formState.errors,
|
|
1388
|
+
isValid: false
|
|
1389
|
+
});
|
|
1390
|
+
options && options.shouldFocus && ref && ref.focus && ref.focus();
|
|
1391
|
+
};
|
|
1392
|
+
const watch = (name, defaultValue) => isFunction(name) ? _subjects.state.subscribe({
|
|
1393
|
+
next: (payload) => ("values" in payload) && name(_getWatch(undefined, defaultValue), payload)
|
|
1394
|
+
}) : _getWatch(name, defaultValue, true);
|
|
1395
|
+
const _subscribe = (props2) => _subjects.state.subscribe({
|
|
1396
|
+
next: (formState) => {
|
|
1397
|
+
if (shouldSubscribeByName(props2.name, formState.name, props2.exact) && shouldRenderFormState(formState, props2.formState || _proxyFormState, _setFormState, props2.reRenderRoot)) {
|
|
1398
|
+
props2.callback({
|
|
1399
|
+
values: { ..._formValues },
|
|
1400
|
+
..._formState,
|
|
1401
|
+
...formState,
|
|
1402
|
+
defaultValues: _defaultValues
|
|
1403
|
+
});
|
|
1404
|
+
}
|
|
1405
|
+
}
|
|
1406
|
+
}).unsubscribe;
|
|
1407
|
+
const subscribe = (props2) => {
|
|
1408
|
+
_state.mount = true;
|
|
1409
|
+
_proxySubscribeFormState = {
|
|
1410
|
+
..._proxySubscribeFormState,
|
|
1411
|
+
...props2.formState
|
|
1412
|
+
};
|
|
1413
|
+
return _subscribe({
|
|
1414
|
+
...props2,
|
|
1415
|
+
formState: {
|
|
1416
|
+
...defaultProxyFormState,
|
|
1417
|
+
...props2.formState
|
|
1418
|
+
}
|
|
1419
|
+
});
|
|
1420
|
+
};
|
|
1421
|
+
const unregister = (name, options = {}) => {
|
|
1422
|
+
for (const fieldName of name ? convertToArrayPayload(name) : _names.mount) {
|
|
1423
|
+
_names.mount.delete(fieldName);
|
|
1424
|
+
_names.array.delete(fieldName);
|
|
1425
|
+
if (!options.keepValue) {
|
|
1426
|
+
unset(_fields, fieldName);
|
|
1427
|
+
unset(_formValues, fieldName);
|
|
1428
|
+
}
|
|
1429
|
+
!options.keepError && unset(_formState.errors, fieldName);
|
|
1430
|
+
!options.keepDirty && unset(_formState.dirtyFields, fieldName);
|
|
1431
|
+
!options.keepTouched && unset(_formState.touchedFields, fieldName);
|
|
1432
|
+
!options.keepIsValidating && unset(_formState.validatingFields, fieldName);
|
|
1433
|
+
!_options.shouldUnregister && !options.keepDefaultValue && unset(_defaultValues, fieldName);
|
|
1434
|
+
}
|
|
1435
|
+
_subjects.state.next({
|
|
1436
|
+
values: cloneObject(_formValues)
|
|
1437
|
+
});
|
|
1438
|
+
_subjects.state.next({
|
|
1439
|
+
..._formState,
|
|
1440
|
+
...!options.keepDirty ? {} : { isDirty: _getDirty() }
|
|
1441
|
+
});
|
|
1442
|
+
!options.keepIsValid && _setValid();
|
|
1443
|
+
};
|
|
1444
|
+
const _setDisabledField = ({ disabled, name }) => {
|
|
1445
|
+
if (isBoolean(disabled) && _state.mount || !!disabled || _names.disabled.has(name)) {
|
|
1446
|
+
const wasDisabled = _names.disabled.has(name);
|
|
1447
|
+
const isDisabled = !!disabled;
|
|
1448
|
+
const disabledStateChanged = wasDisabled !== isDisabled;
|
|
1449
|
+
disabled ? _names.disabled.add(name) : _names.disabled.delete(name);
|
|
1450
|
+
disabledStateChanged && _state.mount && !_state.action && _setValid();
|
|
1451
|
+
}
|
|
1452
|
+
};
|
|
1453
|
+
const register = (name, options = {}) => {
|
|
1454
|
+
let field = get(_fields, name);
|
|
1455
|
+
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
|
|
1456
|
+
set(_fields, name, {
|
|
1457
|
+
...field || {},
|
|
1458
|
+
_f: {
|
|
1459
|
+
...field && field._f ? field._f : { ref: { name } },
|
|
1460
|
+
name,
|
|
1461
|
+
mount: true,
|
|
1462
|
+
...options
|
|
1463
|
+
}
|
|
1464
|
+
});
|
|
1465
|
+
_names.mount.add(name);
|
|
1466
|
+
if (field) {
|
|
1467
|
+
_setDisabledField({
|
|
1468
|
+
disabled: isBoolean(options.disabled) ? options.disabled : _options.disabled,
|
|
1469
|
+
name
|
|
1470
|
+
});
|
|
1471
|
+
} else {
|
|
1472
|
+
updateValidAndValue(name, true, options.value);
|
|
1473
|
+
}
|
|
1474
|
+
return {
|
|
1475
|
+
...disabledIsDefined ? { disabled: options.disabled || _options.disabled } : {},
|
|
1476
|
+
..._options.progressive ? {
|
|
1477
|
+
required: !!options.required,
|
|
1478
|
+
min: getRuleValue(options.min),
|
|
1479
|
+
max: getRuleValue(options.max),
|
|
1480
|
+
minLength: getRuleValue(options.minLength),
|
|
1481
|
+
maxLength: getRuleValue(options.maxLength),
|
|
1482
|
+
pattern: getRuleValue(options.pattern)
|
|
1483
|
+
} : {},
|
|
1484
|
+
name,
|
|
1485
|
+
onChange,
|
|
1486
|
+
onBlur: onChange,
|
|
1487
|
+
ref: (ref) => {
|
|
1488
|
+
if (ref) {
|
|
1489
|
+
register(name, options);
|
|
1490
|
+
field = get(_fields, name);
|
|
1491
|
+
const fieldRef = isUndefined(ref.value) ? ref.querySelectorAll ? ref.querySelectorAll("input,select,textarea")[0] || ref : ref : ref;
|
|
1492
|
+
const radioOrCheckbox = isRadioOrCheckbox(fieldRef);
|
|
1493
|
+
const refs = field._f.refs || [];
|
|
1494
|
+
if (radioOrCheckbox ? refs.find((option) => option === fieldRef) : fieldRef === field._f.ref) {
|
|
1495
|
+
return;
|
|
1496
|
+
}
|
|
1497
|
+
set(_fields, name, {
|
|
1498
|
+
_f: {
|
|
1499
|
+
...field._f,
|
|
1500
|
+
...radioOrCheckbox ? {
|
|
1501
|
+
refs: [
|
|
1502
|
+
...refs.filter(live),
|
|
1503
|
+
fieldRef,
|
|
1504
|
+
...Array.isArray(get(_defaultValues, name)) ? [{}] : []
|
|
1505
|
+
],
|
|
1506
|
+
ref: { type: fieldRef.type, name }
|
|
1507
|
+
} : { ref: fieldRef }
|
|
1508
|
+
}
|
|
1509
|
+
});
|
|
1510
|
+
updateValidAndValue(name, false, undefined, fieldRef);
|
|
1511
|
+
} else {
|
|
1512
|
+
field = get(_fields, name, {});
|
|
1513
|
+
if (field._f) {
|
|
1514
|
+
field._f.mount = false;
|
|
1515
|
+
}
|
|
1516
|
+
(_options.shouldUnregister || options.shouldUnregister) && !(isNameInFieldArray(_names.array, name) && _state.action) && _names.unMount.add(name);
|
|
1517
|
+
}
|
|
1518
|
+
}
|
|
1519
|
+
};
|
|
1520
|
+
};
|
|
1521
|
+
const _focusError = () => _options.shouldFocusError && iterateFieldsByAction(_fields, _focusInput, _names.mount);
|
|
1522
|
+
const _disableForm = (disabled) => {
|
|
1523
|
+
if (isBoolean(disabled)) {
|
|
1524
|
+
_subjects.state.next({ disabled });
|
|
1525
|
+
iterateFieldsByAction(_fields, (ref, name) => {
|
|
1526
|
+
const currentField = get(_fields, name);
|
|
1527
|
+
if (currentField) {
|
|
1528
|
+
ref.disabled = currentField._f.disabled || disabled;
|
|
1529
|
+
if (Array.isArray(currentField._f.refs)) {
|
|
1530
|
+
currentField._f.refs.forEach((inputRef) => {
|
|
1531
|
+
inputRef.disabled = currentField._f.disabled || disabled;
|
|
1532
|
+
});
|
|
1533
|
+
}
|
|
1534
|
+
}
|
|
1535
|
+
}, 0, false);
|
|
1536
|
+
}
|
|
1537
|
+
};
|
|
1538
|
+
const handleSubmit = (onValid, onInvalid) => async (e) => {
|
|
1539
|
+
let onValidError = undefined;
|
|
1540
|
+
if (e) {
|
|
1541
|
+
e.preventDefault && e.preventDefault();
|
|
1542
|
+
e.persist && e.persist();
|
|
1543
|
+
}
|
|
1544
|
+
let fieldValues = cloneObject(_formValues);
|
|
1545
|
+
_subjects.state.next({
|
|
1546
|
+
isSubmitting: true
|
|
1547
|
+
});
|
|
1548
|
+
if (_options.resolver) {
|
|
1549
|
+
const { errors, values } = await _runSchema();
|
|
1550
|
+
_updateIsValidating();
|
|
1551
|
+
_formState.errors = errors;
|
|
1552
|
+
fieldValues = cloneObject(values);
|
|
1553
|
+
} else {
|
|
1554
|
+
await executeBuiltInValidation(_fields);
|
|
1555
|
+
}
|
|
1556
|
+
if (_names.disabled.size) {
|
|
1557
|
+
for (const name of _names.disabled) {
|
|
1558
|
+
unset(fieldValues, name);
|
|
1559
|
+
}
|
|
1560
|
+
}
|
|
1561
|
+
unset(_formState.errors, "root");
|
|
1562
|
+
if (isEmptyObject(_formState.errors)) {
|
|
1563
|
+
_subjects.state.next({
|
|
1564
|
+
errors: {}
|
|
1565
|
+
});
|
|
1566
|
+
try {
|
|
1567
|
+
await onValid(fieldValues, e);
|
|
1568
|
+
} catch (error) {
|
|
1569
|
+
onValidError = error;
|
|
1570
|
+
}
|
|
1571
|
+
} else {
|
|
1572
|
+
if (onInvalid) {
|
|
1573
|
+
await onInvalid({ ..._formState.errors }, e);
|
|
1574
|
+
}
|
|
1575
|
+
_focusError();
|
|
1576
|
+
setTimeout(_focusError);
|
|
1577
|
+
}
|
|
1578
|
+
_subjects.state.next({
|
|
1579
|
+
isSubmitted: true,
|
|
1580
|
+
isSubmitting: false,
|
|
1581
|
+
isSubmitSuccessful: isEmptyObject(_formState.errors) && !onValidError,
|
|
1582
|
+
submitCount: _formState.submitCount + 1,
|
|
1583
|
+
errors: _formState.errors
|
|
1584
|
+
});
|
|
1585
|
+
if (onValidError) {
|
|
1586
|
+
throw onValidError;
|
|
1587
|
+
}
|
|
1588
|
+
};
|
|
1589
|
+
const resetField = (name, options = {}) => {
|
|
1590
|
+
if (get(_fields, name)) {
|
|
1591
|
+
if (isUndefined(options.defaultValue)) {
|
|
1592
|
+
setValue(name, cloneObject(get(_defaultValues, name)));
|
|
1593
|
+
} else {
|
|
1594
|
+
setValue(name, options.defaultValue);
|
|
1595
|
+
set(_defaultValues, name, cloneObject(options.defaultValue));
|
|
1596
|
+
}
|
|
1597
|
+
if (!options.keepTouched) {
|
|
1598
|
+
unset(_formState.touchedFields, name);
|
|
1599
|
+
}
|
|
1600
|
+
if (!options.keepDirty) {
|
|
1601
|
+
unset(_formState.dirtyFields, name);
|
|
1602
|
+
_formState.isDirty = options.defaultValue ? _getDirty(name, cloneObject(get(_defaultValues, name))) : _getDirty();
|
|
1603
|
+
}
|
|
1604
|
+
if (!options.keepError) {
|
|
1605
|
+
unset(_formState.errors, name);
|
|
1606
|
+
_proxyFormState.isValid && _setValid();
|
|
1607
|
+
}
|
|
1608
|
+
_subjects.state.next({ ..._formState });
|
|
1609
|
+
}
|
|
1610
|
+
};
|
|
1611
|
+
const _reset = (formValues, keepStateOptions = {}) => {
|
|
1612
|
+
const updatedValues = formValues ? cloneObject(formValues) : _defaultValues;
|
|
1613
|
+
const cloneUpdatedValues = cloneObject(updatedValues);
|
|
1614
|
+
const isEmptyResetValues = isEmptyObject(formValues);
|
|
1615
|
+
const values = isEmptyResetValues ? _defaultValues : cloneUpdatedValues;
|
|
1616
|
+
if (!keepStateOptions.keepDefaultValues) {
|
|
1617
|
+
_defaultValues = updatedValues;
|
|
1618
|
+
}
|
|
1619
|
+
if (!keepStateOptions.keepValues) {
|
|
1620
|
+
if (keepStateOptions.keepDirtyValues) {
|
|
1621
|
+
const fieldsToCheck = new Set([
|
|
1622
|
+
..._names.mount,
|
|
1623
|
+
...Object.keys(getDirtyFields(_defaultValues, _formValues))
|
|
1624
|
+
]);
|
|
1625
|
+
for (const fieldName of Array.from(fieldsToCheck)) {
|
|
1626
|
+
const isDirty = get(_formState.dirtyFields, fieldName);
|
|
1627
|
+
const existingValue = get(_formValues, fieldName);
|
|
1628
|
+
const newValue = get(values, fieldName);
|
|
1629
|
+
if (isDirty && !isUndefined(existingValue)) {
|
|
1630
|
+
set(values, fieldName, existingValue);
|
|
1631
|
+
} else if (!isDirty && !isUndefined(newValue)) {
|
|
1632
|
+
setValue(fieldName, newValue);
|
|
1633
|
+
}
|
|
1634
|
+
}
|
|
1635
|
+
} else {
|
|
1636
|
+
if (isWeb && isUndefined(formValues)) {
|
|
1637
|
+
for (const name of _names.mount) {
|
|
1638
|
+
const field = get(_fields, name);
|
|
1639
|
+
if (field && field._f) {
|
|
1640
|
+
const fieldReference = Array.isArray(field._f.refs) ? field._f.refs[0] : field._f.ref;
|
|
1641
|
+
if (isHTMLElement(fieldReference)) {
|
|
1642
|
+
const form = fieldReference.closest("form");
|
|
1643
|
+
if (form) {
|
|
1644
|
+
form.reset();
|
|
1645
|
+
break;
|
|
1646
|
+
}
|
|
1647
|
+
}
|
|
1648
|
+
}
|
|
1649
|
+
}
|
|
1650
|
+
}
|
|
1651
|
+
if (keepStateOptions.keepFieldsRef) {
|
|
1652
|
+
for (const fieldName of _names.mount) {
|
|
1653
|
+
setValue(fieldName, get(values, fieldName));
|
|
1654
|
+
}
|
|
1655
|
+
} else {
|
|
1656
|
+
_fields = {};
|
|
1657
|
+
}
|
|
1658
|
+
}
|
|
1659
|
+
_formValues = _options.shouldUnregister ? keepStateOptions.keepDefaultValues ? cloneObject(_defaultValues) : {} : cloneObject(values);
|
|
1660
|
+
_subjects.array.next({
|
|
1661
|
+
values: { ...values }
|
|
1662
|
+
});
|
|
1663
|
+
_subjects.state.next({
|
|
1664
|
+
values: { ...values }
|
|
1665
|
+
});
|
|
1666
|
+
}
|
|
1667
|
+
_names = {
|
|
1668
|
+
mount: keepStateOptions.keepDirtyValues ? _names.mount : new Set,
|
|
1669
|
+
unMount: new Set,
|
|
1670
|
+
array: new Set,
|
|
1671
|
+
disabled: new Set,
|
|
1672
|
+
watch: new Set,
|
|
1673
|
+
watchAll: false,
|
|
1674
|
+
focus: ""
|
|
1675
|
+
};
|
|
1676
|
+
_state.mount = !_proxyFormState.isValid || !!keepStateOptions.keepIsValid || !!keepStateOptions.keepDirtyValues || !_options.shouldUnregister && !isEmptyObject(values);
|
|
1677
|
+
_state.watch = !!_options.shouldUnregister;
|
|
1678
|
+
_state.keepIsValid = !!keepStateOptions.keepIsValid;
|
|
1679
|
+
_state.action = false;
|
|
1680
|
+
if (!keepStateOptions.keepErrors) {
|
|
1681
|
+
_formState.errors = {};
|
|
1682
|
+
}
|
|
1683
|
+
_subjects.state.next({
|
|
1684
|
+
submitCount: keepStateOptions.keepSubmitCount ? _formState.submitCount : 0,
|
|
1685
|
+
isDirty: isEmptyResetValues ? false : keepStateOptions.keepDirty ? _formState.isDirty : !!(keepStateOptions.keepDefaultValues && !deepEqual(formValues, _defaultValues)),
|
|
1686
|
+
isSubmitted: keepStateOptions.keepIsSubmitted ? _formState.isSubmitted : false,
|
|
1687
|
+
dirtyFields: isEmptyResetValues ? {} : keepStateOptions.keepDirtyValues ? keepStateOptions.keepDefaultValues && _formValues ? getDirtyFields(_defaultValues, _formValues) : _formState.dirtyFields : keepStateOptions.keepDefaultValues && formValues ? getDirtyFields(_defaultValues, formValues) : keepStateOptions.keepDirty ? _formState.dirtyFields : {},
|
|
1688
|
+
touchedFields: keepStateOptions.keepTouched ? _formState.touchedFields : {},
|
|
1689
|
+
errors: keepStateOptions.keepErrors ? _formState.errors : {},
|
|
1690
|
+
isSubmitSuccessful: keepStateOptions.keepIsSubmitSuccessful ? _formState.isSubmitSuccessful : false,
|
|
1691
|
+
isSubmitting: false,
|
|
1692
|
+
defaultValues: _defaultValues
|
|
1693
|
+
});
|
|
1694
|
+
};
|
|
1695
|
+
const reset = (formValues, keepStateOptions) => _reset(isFunction(formValues) ? formValues(_formValues) : formValues, { ..._options.resetOptions, ...keepStateOptions });
|
|
1696
|
+
const setFocus = (name, options = {}) => {
|
|
1697
|
+
const field = get(_fields, name);
|
|
1698
|
+
const fieldReference = field && field._f;
|
|
1699
|
+
if (fieldReference) {
|
|
1700
|
+
const fieldRef = fieldReference.refs ? fieldReference.refs[0] : fieldReference.ref;
|
|
1701
|
+
if (fieldRef.focus) {
|
|
1702
|
+
setTimeout(() => {
|
|
1703
|
+
fieldRef.focus();
|
|
1704
|
+
options.shouldSelect && isFunction(fieldRef.select) && fieldRef.select();
|
|
1705
|
+
});
|
|
1706
|
+
}
|
|
1707
|
+
}
|
|
1708
|
+
};
|
|
1709
|
+
const _setFormState = (updatedFormState) => {
|
|
1710
|
+
_formState = {
|
|
1711
|
+
..._formState,
|
|
1712
|
+
...updatedFormState
|
|
1713
|
+
};
|
|
1714
|
+
};
|
|
1715
|
+
const _resetDefaultValues = () => isFunction(_options.defaultValues) && _options.defaultValues().then((values) => {
|
|
1716
|
+
reset(values, _options.resetOptions);
|
|
1717
|
+
_subjects.state.next({
|
|
1718
|
+
isLoading: false
|
|
1719
|
+
});
|
|
1720
|
+
});
|
|
1721
|
+
const methods = {
|
|
1722
|
+
control: {
|
|
1723
|
+
register,
|
|
1724
|
+
unregister,
|
|
1725
|
+
getFieldState,
|
|
1726
|
+
handleSubmit,
|
|
1727
|
+
setError,
|
|
1728
|
+
_subscribe,
|
|
1729
|
+
_runSchema,
|
|
1730
|
+
_updateIsValidating,
|
|
1731
|
+
_focusError,
|
|
1732
|
+
_getWatch,
|
|
1733
|
+
_getDirty,
|
|
1734
|
+
_setValid,
|
|
1735
|
+
_setFieldArray,
|
|
1736
|
+
_setDisabledField,
|
|
1737
|
+
_setErrors,
|
|
1738
|
+
_getFieldArray,
|
|
1739
|
+
_reset,
|
|
1740
|
+
_resetDefaultValues,
|
|
1741
|
+
_removeUnmounted,
|
|
1742
|
+
_disableForm,
|
|
1743
|
+
_subjects,
|
|
1744
|
+
_proxyFormState,
|
|
1745
|
+
get _fields() {
|
|
1746
|
+
return _fields;
|
|
1747
|
+
},
|
|
1748
|
+
get _formValues() {
|
|
1749
|
+
return _formValues;
|
|
1750
|
+
},
|
|
1751
|
+
get _state() {
|
|
1752
|
+
return _state;
|
|
1753
|
+
},
|
|
1754
|
+
set _state(value) {
|
|
1755
|
+
_state = value;
|
|
1756
|
+
},
|
|
1757
|
+
get _defaultValues() {
|
|
1758
|
+
return _defaultValues;
|
|
1759
|
+
},
|
|
1760
|
+
get _names() {
|
|
1761
|
+
return _names;
|
|
1762
|
+
},
|
|
1763
|
+
set _names(value) {
|
|
1764
|
+
_names = value;
|
|
1765
|
+
},
|
|
1766
|
+
get _formState() {
|
|
1767
|
+
return _formState;
|
|
1768
|
+
},
|
|
1769
|
+
get _options() {
|
|
1770
|
+
return _options;
|
|
1771
|
+
},
|
|
1772
|
+
set _options(value) {
|
|
1773
|
+
_options = {
|
|
1774
|
+
..._options,
|
|
1775
|
+
...value
|
|
1776
|
+
};
|
|
1777
|
+
}
|
|
1778
|
+
},
|
|
1779
|
+
subscribe,
|
|
1780
|
+
trigger,
|
|
1781
|
+
register,
|
|
1782
|
+
handleSubmit,
|
|
1783
|
+
watch,
|
|
1784
|
+
setValue,
|
|
1785
|
+
getValues,
|
|
1786
|
+
reset,
|
|
1787
|
+
resetField,
|
|
1788
|
+
clearErrors,
|
|
1789
|
+
unregister,
|
|
1790
|
+
setError,
|
|
1791
|
+
setFocus,
|
|
1792
|
+
getFieldState
|
|
1793
|
+
};
|
|
1794
|
+
return {
|
|
1795
|
+
...methods,
|
|
1796
|
+
formControl: methods
|
|
1797
|
+
};
|
|
1798
|
+
}
|
|
1799
|
+
function useForm(props = {}) {
|
|
1800
|
+
const _formControl = React2.useRef(undefined);
|
|
1801
|
+
const _values = React2.useRef(undefined);
|
|
1802
|
+
const [formState, updateFormState] = React2.useState({
|
|
1803
|
+
isDirty: false,
|
|
1804
|
+
isValidating: false,
|
|
1805
|
+
isLoading: isFunction(props.defaultValues),
|
|
1806
|
+
isSubmitted: false,
|
|
1807
|
+
isSubmitting: false,
|
|
1808
|
+
isSubmitSuccessful: false,
|
|
1809
|
+
isValid: false,
|
|
1810
|
+
submitCount: 0,
|
|
1811
|
+
dirtyFields: {},
|
|
1812
|
+
touchedFields: {},
|
|
1813
|
+
validatingFields: {},
|
|
1814
|
+
errors: props.errors || {},
|
|
1815
|
+
disabled: props.disabled || false,
|
|
1816
|
+
isReady: false,
|
|
1817
|
+
defaultValues: isFunction(props.defaultValues) ? undefined : props.defaultValues
|
|
1818
|
+
});
|
|
1819
|
+
if (!_formControl.current) {
|
|
1820
|
+
if (props.formControl) {
|
|
1821
|
+
_formControl.current = {
|
|
1822
|
+
...props.formControl,
|
|
1823
|
+
formState
|
|
1824
|
+
};
|
|
1825
|
+
if (props.defaultValues && !isFunction(props.defaultValues)) {
|
|
1826
|
+
props.formControl.reset(props.defaultValues, props.resetOptions);
|
|
1827
|
+
}
|
|
1828
|
+
} else {
|
|
1829
|
+
const { formControl, ...rest } = createFormControl(props);
|
|
1830
|
+
_formControl.current = {
|
|
1831
|
+
...rest,
|
|
1832
|
+
formState
|
|
1833
|
+
};
|
|
1834
|
+
}
|
|
1835
|
+
}
|
|
1836
|
+
const control = _formControl.current.control;
|
|
1837
|
+
control._options = props;
|
|
1838
|
+
useIsomorphicLayoutEffect(() => {
|
|
1839
|
+
const sub = control._subscribe({
|
|
1840
|
+
formState: control._proxyFormState,
|
|
1841
|
+
callback: () => updateFormState({ ...control._formState }),
|
|
1842
|
+
reRenderRoot: true
|
|
1843
|
+
});
|
|
1844
|
+
updateFormState((data) => ({
|
|
1845
|
+
...data,
|
|
1846
|
+
isReady: true
|
|
1847
|
+
}));
|
|
1848
|
+
control._formState.isReady = true;
|
|
1849
|
+
return sub;
|
|
1850
|
+
}, [control]);
|
|
1851
|
+
React2.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
|
|
1852
|
+
React2.useEffect(() => {
|
|
1853
|
+
if (props.mode) {
|
|
1854
|
+
control._options.mode = props.mode;
|
|
1855
|
+
}
|
|
1856
|
+
if (props.reValidateMode) {
|
|
1857
|
+
control._options.reValidateMode = props.reValidateMode;
|
|
1858
|
+
}
|
|
1859
|
+
}, [control, props.mode, props.reValidateMode]);
|
|
1860
|
+
React2.useEffect(() => {
|
|
1861
|
+
if (props.errors) {
|
|
1862
|
+
control._setErrors(props.errors);
|
|
1863
|
+
control._focusError();
|
|
1864
|
+
}
|
|
1865
|
+
}, [control, props.errors]);
|
|
1866
|
+
React2.useEffect(() => {
|
|
1867
|
+
props.shouldUnregister && control._subjects.state.next({
|
|
1868
|
+
values: control._getWatch()
|
|
1869
|
+
});
|
|
1870
|
+
}, [control, props.shouldUnregister]);
|
|
1871
|
+
React2.useEffect(() => {
|
|
1872
|
+
if (control._proxyFormState.isDirty) {
|
|
1873
|
+
const isDirty = control._getDirty();
|
|
1874
|
+
if (isDirty !== formState.isDirty) {
|
|
1875
|
+
control._subjects.state.next({
|
|
1876
|
+
isDirty
|
|
1877
|
+
});
|
|
1878
|
+
}
|
|
1879
|
+
}
|
|
1880
|
+
}, [control, formState.isDirty]);
|
|
1881
|
+
React2.useEffect(() => {
|
|
1882
|
+
var _a;
|
|
1883
|
+
if (props.values && !deepEqual(props.values, _values.current)) {
|
|
1884
|
+
control._reset(props.values, {
|
|
1885
|
+
keepFieldsRef: true,
|
|
1886
|
+
...control._options.resetOptions
|
|
1887
|
+
});
|
|
1888
|
+
if (!((_a = control._options.resetOptions) === null || _a === undefined ? undefined : _a.keepIsValid)) {
|
|
1889
|
+
control._setValid();
|
|
1890
|
+
}
|
|
1891
|
+
_values.current = props.values;
|
|
1892
|
+
updateFormState((state) => ({ ...state }));
|
|
1893
|
+
} else {
|
|
1894
|
+
control._resetDefaultValues();
|
|
1895
|
+
}
|
|
1896
|
+
}, [control, props.values]);
|
|
1897
|
+
React2.useEffect(() => {
|
|
1898
|
+
if (!control._state.mount) {
|
|
1899
|
+
control._setValid();
|
|
1900
|
+
control._state.mount = true;
|
|
1901
|
+
}
|
|
1902
|
+
if (control._state.watch) {
|
|
1903
|
+
control._state.watch = false;
|
|
1904
|
+
control._subjects.state.next({ ...control._formState });
|
|
1905
|
+
}
|
|
1906
|
+
control._removeUnmounted();
|
|
1907
|
+
});
|
|
1908
|
+
_formControl.current.formState = React2.useMemo(() => getProxyFormState(formState, control), [control, formState]);
|
|
1909
|
+
return _formControl.current;
|
|
1910
|
+
}
|
|
1911
|
+
|
|
1912
|
+
// node_modules/clsx/dist/clsx.mjs
|
|
1913
|
+
function r(e) {
|
|
1914
|
+
var t, f, n = "";
|
|
1915
|
+
if (typeof e == "string" || typeof e == "number")
|
|
1916
|
+
n += e;
|
|
1917
|
+
else if (typeof e == "object")
|
|
1918
|
+
if (Array.isArray(e)) {
|
|
1919
|
+
var o = e.length;
|
|
1920
|
+
for (t = 0;t < o; t++)
|
|
1921
|
+
e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
1922
|
+
} else
|
|
1923
|
+
for (f in e)
|
|
1924
|
+
e[f] && (n && (n += " "), n += f);
|
|
1925
|
+
return n;
|
|
1926
|
+
}
|
|
1927
|
+
function clsx() {
|
|
1928
|
+
for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
|
|
1929
|
+
(e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
1930
|
+
return n;
|
|
1931
|
+
}
|
|
1932
|
+
|
|
1933
|
+
// node_modules/tailwind-merge/dist/bundle-mjs.mjs
|
|
1934
|
+
var concatArrays = (array1, array2) => {
|
|
1935
|
+
const combinedArray = new Array(array1.length + array2.length);
|
|
1936
|
+
for (let i = 0;i < array1.length; i++) {
|
|
1937
|
+
combinedArray[i] = array1[i];
|
|
1938
|
+
}
|
|
1939
|
+
for (let i = 0;i < array2.length; i++) {
|
|
1940
|
+
combinedArray[array1.length + i] = array2[i];
|
|
1941
|
+
}
|
|
1942
|
+
return combinedArray;
|
|
1943
|
+
};
|
|
1944
|
+
var createClassValidatorObject = (classGroupId, validator) => ({
|
|
1945
|
+
classGroupId,
|
|
1946
|
+
validator
|
|
1947
|
+
});
|
|
1948
|
+
var createClassPartObject = (nextPart = new Map, validators = null, classGroupId) => ({
|
|
1949
|
+
nextPart,
|
|
1950
|
+
validators,
|
|
1951
|
+
classGroupId
|
|
1952
|
+
});
|
|
1953
|
+
var CLASS_PART_SEPARATOR = "-";
|
|
1954
|
+
var EMPTY_CONFLICTS = [];
|
|
1955
|
+
var ARBITRARY_PROPERTY_PREFIX = "arbitrary..";
|
|
1956
|
+
var createClassGroupUtils = (config) => {
|
|
1957
|
+
const classMap = createClassMap(config);
|
|
1958
|
+
const {
|
|
1959
|
+
conflictingClassGroups,
|
|
1960
|
+
conflictingClassGroupModifiers
|
|
1961
|
+
} = config;
|
|
1962
|
+
const getClassGroupId = (className) => {
|
|
1963
|
+
if (className.startsWith("[") && className.endsWith("]")) {
|
|
1964
|
+
return getGroupIdForArbitraryProperty(className);
|
|
1965
|
+
}
|
|
1966
|
+
const classParts = className.split(CLASS_PART_SEPARATOR);
|
|
1967
|
+
const startIndex = classParts[0] === "" && classParts.length > 1 ? 1 : 0;
|
|
1968
|
+
return getGroupRecursive(classParts, startIndex, classMap);
|
|
1969
|
+
};
|
|
1970
|
+
const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
|
|
1971
|
+
if (hasPostfixModifier) {
|
|
1972
|
+
const modifierConflicts = conflictingClassGroupModifiers[classGroupId];
|
|
1973
|
+
const baseConflicts = conflictingClassGroups[classGroupId];
|
|
1974
|
+
if (modifierConflicts) {
|
|
1975
|
+
if (baseConflicts) {
|
|
1976
|
+
return concatArrays(baseConflicts, modifierConflicts);
|
|
1977
|
+
}
|
|
1978
|
+
return modifierConflicts;
|
|
1979
|
+
}
|
|
1980
|
+
return baseConflicts || EMPTY_CONFLICTS;
|
|
1981
|
+
}
|
|
1982
|
+
return conflictingClassGroups[classGroupId] || EMPTY_CONFLICTS;
|
|
1983
|
+
};
|
|
1984
|
+
return {
|
|
1985
|
+
getClassGroupId,
|
|
1986
|
+
getConflictingClassGroupIds
|
|
1987
|
+
};
|
|
1988
|
+
};
|
|
1989
|
+
var getGroupRecursive = (classParts, startIndex, classPartObject) => {
|
|
1990
|
+
const classPathsLength = classParts.length - startIndex;
|
|
1991
|
+
if (classPathsLength === 0) {
|
|
1992
|
+
return classPartObject.classGroupId;
|
|
1993
|
+
}
|
|
1994
|
+
const currentClassPart = classParts[startIndex];
|
|
1995
|
+
const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
|
|
1996
|
+
if (nextClassPartObject) {
|
|
1997
|
+
const result = getGroupRecursive(classParts, startIndex + 1, nextClassPartObject);
|
|
1998
|
+
if (result)
|
|
1999
|
+
return result;
|
|
2000
|
+
}
|
|
2001
|
+
const validators = classPartObject.validators;
|
|
2002
|
+
if (validators === null) {
|
|
2003
|
+
return;
|
|
2004
|
+
}
|
|
2005
|
+
const classRest = startIndex === 0 ? classParts.join(CLASS_PART_SEPARATOR) : classParts.slice(startIndex).join(CLASS_PART_SEPARATOR);
|
|
2006
|
+
const validatorsLength = validators.length;
|
|
2007
|
+
for (let i = 0;i < validatorsLength; i++) {
|
|
2008
|
+
const validatorObj = validators[i];
|
|
2009
|
+
if (validatorObj.validator(classRest)) {
|
|
2010
|
+
return validatorObj.classGroupId;
|
|
2011
|
+
}
|
|
2012
|
+
}
|
|
2013
|
+
return;
|
|
2014
|
+
};
|
|
2015
|
+
var getGroupIdForArbitraryProperty = (className) => className.slice(1, -1).indexOf(":") === -1 ? undefined : (() => {
|
|
2016
|
+
const content = className.slice(1, -1);
|
|
2017
|
+
const colonIndex = content.indexOf(":");
|
|
2018
|
+
const property = content.slice(0, colonIndex);
|
|
2019
|
+
return property ? ARBITRARY_PROPERTY_PREFIX + property : undefined;
|
|
2020
|
+
})();
|
|
2021
|
+
var createClassMap = (config) => {
|
|
2022
|
+
const {
|
|
2023
|
+
theme,
|
|
2024
|
+
classGroups
|
|
2025
|
+
} = config;
|
|
2026
|
+
return processClassGroups(classGroups, theme);
|
|
2027
|
+
};
|
|
2028
|
+
var processClassGroups = (classGroups, theme) => {
|
|
2029
|
+
const classMap = createClassPartObject();
|
|
2030
|
+
for (const classGroupId in classGroups) {
|
|
2031
|
+
const group = classGroups[classGroupId];
|
|
2032
|
+
processClassesRecursively(group, classMap, classGroupId, theme);
|
|
2033
|
+
}
|
|
2034
|
+
return classMap;
|
|
2035
|
+
};
|
|
2036
|
+
var processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
|
|
2037
|
+
const len = classGroup.length;
|
|
2038
|
+
for (let i = 0;i < len; i++) {
|
|
2039
|
+
const classDefinition = classGroup[i];
|
|
2040
|
+
processClassDefinition(classDefinition, classPartObject, classGroupId, theme);
|
|
2041
|
+
}
|
|
2042
|
+
};
|
|
2043
|
+
var processClassDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
|
|
2044
|
+
if (typeof classDefinition === "string") {
|
|
2045
|
+
processStringDefinition(classDefinition, classPartObject, classGroupId);
|
|
2046
|
+
return;
|
|
2047
|
+
}
|
|
2048
|
+
if (typeof classDefinition === "function") {
|
|
2049
|
+
processFunctionDefinition(classDefinition, classPartObject, classGroupId, theme);
|
|
2050
|
+
return;
|
|
2051
|
+
}
|
|
2052
|
+
processObjectDefinition(classDefinition, classPartObject, classGroupId, theme);
|
|
2053
|
+
};
|
|
2054
|
+
var processStringDefinition = (classDefinition, classPartObject, classGroupId) => {
|
|
2055
|
+
const classPartObjectToEdit = classDefinition === "" ? classPartObject : getPart(classPartObject, classDefinition);
|
|
2056
|
+
classPartObjectToEdit.classGroupId = classGroupId;
|
|
2057
|
+
};
|
|
2058
|
+
var processFunctionDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
|
|
2059
|
+
if (isThemeGetter(classDefinition)) {
|
|
2060
|
+
processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
|
|
2061
|
+
return;
|
|
2062
|
+
}
|
|
2063
|
+
if (classPartObject.validators === null) {
|
|
2064
|
+
classPartObject.validators = [];
|
|
2065
|
+
}
|
|
2066
|
+
classPartObject.validators.push(createClassValidatorObject(classGroupId, classDefinition));
|
|
2067
|
+
};
|
|
2068
|
+
var processObjectDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
|
|
2069
|
+
const entries = Object.entries(classDefinition);
|
|
2070
|
+
const len = entries.length;
|
|
2071
|
+
for (let i = 0;i < len; i++) {
|
|
2072
|
+
const [key, value] = entries[i];
|
|
2073
|
+
processClassesRecursively(value, getPart(classPartObject, key), classGroupId, theme);
|
|
2074
|
+
}
|
|
2075
|
+
};
|
|
2076
|
+
var getPart = (classPartObject, path) => {
|
|
2077
|
+
let current = classPartObject;
|
|
2078
|
+
const parts = path.split(CLASS_PART_SEPARATOR);
|
|
2079
|
+
const len = parts.length;
|
|
2080
|
+
for (let i = 0;i < len; i++) {
|
|
2081
|
+
const part = parts[i];
|
|
2082
|
+
let next = current.nextPart.get(part);
|
|
2083
|
+
if (!next) {
|
|
2084
|
+
next = createClassPartObject();
|
|
2085
|
+
current.nextPart.set(part, next);
|
|
2086
|
+
}
|
|
2087
|
+
current = next;
|
|
2088
|
+
}
|
|
2089
|
+
return current;
|
|
2090
|
+
};
|
|
2091
|
+
var isThemeGetter = (func) => ("isThemeGetter" in func) && func.isThemeGetter === true;
|
|
2092
|
+
var createLruCache = (maxCacheSize) => {
|
|
2093
|
+
if (maxCacheSize < 1) {
|
|
2094
|
+
return {
|
|
2095
|
+
get: () => {
|
|
2096
|
+
return;
|
|
2097
|
+
},
|
|
2098
|
+
set: () => {}
|
|
2099
|
+
};
|
|
2100
|
+
}
|
|
2101
|
+
let cacheSize = 0;
|
|
2102
|
+
let cache = Object.create(null);
|
|
2103
|
+
let previousCache = Object.create(null);
|
|
2104
|
+
const update = (key, value) => {
|
|
2105
|
+
cache[key] = value;
|
|
2106
|
+
cacheSize++;
|
|
2107
|
+
if (cacheSize > maxCacheSize) {
|
|
2108
|
+
cacheSize = 0;
|
|
2109
|
+
previousCache = cache;
|
|
2110
|
+
cache = Object.create(null);
|
|
2111
|
+
}
|
|
2112
|
+
};
|
|
2113
|
+
return {
|
|
2114
|
+
get(key) {
|
|
2115
|
+
let value = cache[key];
|
|
2116
|
+
if (value !== undefined) {
|
|
2117
|
+
return value;
|
|
2118
|
+
}
|
|
2119
|
+
if ((value = previousCache[key]) !== undefined) {
|
|
2120
|
+
update(key, value);
|
|
2121
|
+
return value;
|
|
2122
|
+
}
|
|
2123
|
+
},
|
|
2124
|
+
set(key, value) {
|
|
2125
|
+
if (key in cache) {
|
|
2126
|
+
cache[key] = value;
|
|
2127
|
+
} else {
|
|
2128
|
+
update(key, value);
|
|
2129
|
+
}
|
|
2130
|
+
}
|
|
2131
|
+
};
|
|
2132
|
+
};
|
|
2133
|
+
var IMPORTANT_MODIFIER = "!";
|
|
2134
|
+
var MODIFIER_SEPARATOR = ":";
|
|
2135
|
+
var EMPTY_MODIFIERS = [];
|
|
2136
|
+
var createResultObject = (modifiers, hasImportantModifier, baseClassName, maybePostfixModifierPosition, isExternal) => ({
|
|
2137
|
+
modifiers,
|
|
2138
|
+
hasImportantModifier,
|
|
2139
|
+
baseClassName,
|
|
2140
|
+
maybePostfixModifierPosition,
|
|
2141
|
+
isExternal
|
|
2142
|
+
});
|
|
2143
|
+
var createParseClassName = (config) => {
|
|
2144
|
+
const {
|
|
2145
|
+
prefix,
|
|
2146
|
+
experimentalParseClassName
|
|
2147
|
+
} = config;
|
|
2148
|
+
let parseClassName = (className) => {
|
|
2149
|
+
const modifiers = [];
|
|
2150
|
+
let bracketDepth = 0;
|
|
2151
|
+
let parenDepth = 0;
|
|
2152
|
+
let modifierStart = 0;
|
|
2153
|
+
let postfixModifierPosition;
|
|
2154
|
+
const len = className.length;
|
|
2155
|
+
for (let index = 0;index < len; index++) {
|
|
2156
|
+
const currentCharacter = className[index];
|
|
2157
|
+
if (bracketDepth === 0 && parenDepth === 0) {
|
|
2158
|
+
if (currentCharacter === MODIFIER_SEPARATOR) {
|
|
2159
|
+
modifiers.push(className.slice(modifierStart, index));
|
|
2160
|
+
modifierStart = index + 1;
|
|
2161
|
+
continue;
|
|
2162
|
+
}
|
|
2163
|
+
if (currentCharacter === "/") {
|
|
2164
|
+
postfixModifierPosition = index;
|
|
2165
|
+
continue;
|
|
2166
|
+
}
|
|
2167
|
+
}
|
|
2168
|
+
if (currentCharacter === "[")
|
|
2169
|
+
bracketDepth++;
|
|
2170
|
+
else if (currentCharacter === "]")
|
|
2171
|
+
bracketDepth--;
|
|
2172
|
+
else if (currentCharacter === "(")
|
|
2173
|
+
parenDepth++;
|
|
2174
|
+
else if (currentCharacter === ")")
|
|
2175
|
+
parenDepth--;
|
|
2176
|
+
}
|
|
2177
|
+
const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.slice(modifierStart);
|
|
2178
|
+
let baseClassName = baseClassNameWithImportantModifier;
|
|
2179
|
+
let hasImportantModifier = false;
|
|
2180
|
+
if (baseClassNameWithImportantModifier.endsWith(IMPORTANT_MODIFIER)) {
|
|
2181
|
+
baseClassName = baseClassNameWithImportantModifier.slice(0, -1);
|
|
2182
|
+
hasImportantModifier = true;
|
|
2183
|
+
} else if (baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER)) {
|
|
2184
|
+
baseClassName = baseClassNameWithImportantModifier.slice(1);
|
|
2185
|
+
hasImportantModifier = true;
|
|
2186
|
+
}
|
|
2187
|
+
const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : undefined;
|
|
2188
|
+
return createResultObject(modifiers, hasImportantModifier, baseClassName, maybePostfixModifierPosition);
|
|
2189
|
+
};
|
|
2190
|
+
if (prefix) {
|
|
2191
|
+
const fullPrefix = prefix + MODIFIER_SEPARATOR;
|
|
2192
|
+
const parseClassNameOriginal = parseClassName;
|
|
2193
|
+
parseClassName = (className) => className.startsWith(fullPrefix) ? parseClassNameOriginal(className.slice(fullPrefix.length)) : createResultObject(EMPTY_MODIFIERS, false, className, undefined, true);
|
|
2194
|
+
}
|
|
2195
|
+
if (experimentalParseClassName) {
|
|
2196
|
+
const parseClassNameOriginal = parseClassName;
|
|
2197
|
+
parseClassName = (className) => experimentalParseClassName({
|
|
2198
|
+
className,
|
|
2199
|
+
parseClassName: parseClassNameOriginal
|
|
2200
|
+
});
|
|
2201
|
+
}
|
|
2202
|
+
return parseClassName;
|
|
2203
|
+
};
|
|
2204
|
+
var createSortModifiers = (config) => {
|
|
2205
|
+
const modifierWeights = new Map;
|
|
2206
|
+
config.orderSensitiveModifiers.forEach((mod, index) => {
|
|
2207
|
+
modifierWeights.set(mod, 1e6 + index);
|
|
2208
|
+
});
|
|
2209
|
+
return (modifiers) => {
|
|
2210
|
+
const result = [];
|
|
2211
|
+
let currentSegment = [];
|
|
2212
|
+
for (let i = 0;i < modifiers.length; i++) {
|
|
2213
|
+
const modifier = modifiers[i];
|
|
2214
|
+
const isArbitrary = modifier[0] === "[";
|
|
2215
|
+
const isOrderSensitive = modifierWeights.has(modifier);
|
|
2216
|
+
if (isArbitrary || isOrderSensitive) {
|
|
2217
|
+
if (currentSegment.length > 0) {
|
|
2218
|
+
currentSegment.sort();
|
|
2219
|
+
result.push(...currentSegment);
|
|
2220
|
+
currentSegment = [];
|
|
2221
|
+
}
|
|
2222
|
+
result.push(modifier);
|
|
2223
|
+
} else {
|
|
2224
|
+
currentSegment.push(modifier);
|
|
2225
|
+
}
|
|
2226
|
+
}
|
|
2227
|
+
if (currentSegment.length > 0) {
|
|
2228
|
+
currentSegment.sort();
|
|
2229
|
+
result.push(...currentSegment);
|
|
2230
|
+
}
|
|
2231
|
+
return result;
|
|
2232
|
+
};
|
|
2233
|
+
};
|
|
2234
|
+
var createConfigUtils = (config) => ({
|
|
2235
|
+
cache: createLruCache(config.cacheSize),
|
|
2236
|
+
parseClassName: createParseClassName(config),
|
|
2237
|
+
sortModifiers: createSortModifiers(config),
|
|
2238
|
+
...createClassGroupUtils(config)
|
|
2239
|
+
});
|
|
2240
|
+
var SPLIT_CLASSES_REGEX = /\s+/;
|
|
2241
|
+
var mergeClassList = (classList, configUtils) => {
|
|
2242
|
+
const {
|
|
2243
|
+
parseClassName,
|
|
2244
|
+
getClassGroupId,
|
|
2245
|
+
getConflictingClassGroupIds,
|
|
2246
|
+
sortModifiers
|
|
2247
|
+
} = configUtils;
|
|
2248
|
+
const classGroupsInConflict = [];
|
|
2249
|
+
const classNames = classList.trim().split(SPLIT_CLASSES_REGEX);
|
|
2250
|
+
let result = "";
|
|
2251
|
+
for (let index = classNames.length - 1;index >= 0; index -= 1) {
|
|
2252
|
+
const originalClassName = classNames[index];
|
|
2253
|
+
const {
|
|
2254
|
+
isExternal,
|
|
2255
|
+
modifiers,
|
|
2256
|
+
hasImportantModifier,
|
|
2257
|
+
baseClassName,
|
|
2258
|
+
maybePostfixModifierPosition
|
|
2259
|
+
} = parseClassName(originalClassName);
|
|
2260
|
+
if (isExternal) {
|
|
2261
|
+
result = originalClassName + (result.length > 0 ? " " + result : result);
|
|
2262
|
+
continue;
|
|
2263
|
+
}
|
|
2264
|
+
let hasPostfixModifier = !!maybePostfixModifierPosition;
|
|
2265
|
+
let classGroupId = getClassGroupId(hasPostfixModifier ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
|
|
2266
|
+
if (!classGroupId) {
|
|
2267
|
+
if (!hasPostfixModifier) {
|
|
2268
|
+
result = originalClassName + (result.length > 0 ? " " + result : result);
|
|
2269
|
+
continue;
|
|
2270
|
+
}
|
|
2271
|
+
classGroupId = getClassGroupId(baseClassName);
|
|
2272
|
+
if (!classGroupId) {
|
|
2273
|
+
result = originalClassName + (result.length > 0 ? " " + result : result);
|
|
2274
|
+
continue;
|
|
2275
|
+
}
|
|
2276
|
+
hasPostfixModifier = false;
|
|
2277
|
+
}
|
|
2278
|
+
const variantModifier = modifiers.length === 0 ? "" : modifiers.length === 1 ? modifiers[0] : sortModifiers(modifiers).join(":");
|
|
2279
|
+
const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
|
|
2280
|
+
const classId = modifierId + classGroupId;
|
|
2281
|
+
if (classGroupsInConflict.indexOf(classId) > -1) {
|
|
2282
|
+
continue;
|
|
2283
|
+
}
|
|
2284
|
+
classGroupsInConflict.push(classId);
|
|
2285
|
+
const conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier);
|
|
2286
|
+
for (let i = 0;i < conflictGroups.length; ++i) {
|
|
2287
|
+
const group = conflictGroups[i];
|
|
2288
|
+
classGroupsInConflict.push(modifierId + group);
|
|
2289
|
+
}
|
|
2290
|
+
result = originalClassName + (result.length > 0 ? " " + result : result);
|
|
2291
|
+
}
|
|
2292
|
+
return result;
|
|
2293
|
+
};
|
|
2294
|
+
var twJoin = (...classLists) => {
|
|
2295
|
+
let index = 0;
|
|
2296
|
+
let argument;
|
|
2297
|
+
let resolvedValue;
|
|
2298
|
+
let string = "";
|
|
2299
|
+
while (index < classLists.length) {
|
|
2300
|
+
if (argument = classLists[index++]) {
|
|
2301
|
+
if (resolvedValue = toValue(argument)) {
|
|
2302
|
+
string && (string += " ");
|
|
2303
|
+
string += resolvedValue;
|
|
2304
|
+
}
|
|
2305
|
+
}
|
|
2306
|
+
}
|
|
2307
|
+
return string;
|
|
2308
|
+
};
|
|
2309
|
+
var toValue = (mix) => {
|
|
2310
|
+
if (typeof mix === "string") {
|
|
2311
|
+
return mix;
|
|
2312
|
+
}
|
|
2313
|
+
let resolvedValue;
|
|
2314
|
+
let string = "";
|
|
2315
|
+
for (let k = 0;k < mix.length; k++) {
|
|
2316
|
+
if (mix[k]) {
|
|
2317
|
+
if (resolvedValue = toValue(mix[k])) {
|
|
2318
|
+
string && (string += " ");
|
|
2319
|
+
string += resolvedValue;
|
|
2320
|
+
}
|
|
2321
|
+
}
|
|
2322
|
+
}
|
|
2323
|
+
return string;
|
|
2324
|
+
};
|
|
2325
|
+
var createTailwindMerge = (createConfigFirst, ...createConfigRest) => {
|
|
2326
|
+
let configUtils;
|
|
2327
|
+
let cacheGet;
|
|
2328
|
+
let cacheSet;
|
|
2329
|
+
let functionToCall;
|
|
2330
|
+
const initTailwindMerge = (classList) => {
|
|
2331
|
+
const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
|
|
2332
|
+
configUtils = createConfigUtils(config);
|
|
2333
|
+
cacheGet = configUtils.cache.get;
|
|
2334
|
+
cacheSet = configUtils.cache.set;
|
|
2335
|
+
functionToCall = tailwindMerge;
|
|
2336
|
+
return tailwindMerge(classList);
|
|
2337
|
+
};
|
|
2338
|
+
const tailwindMerge = (classList) => {
|
|
2339
|
+
const cachedResult = cacheGet(classList);
|
|
2340
|
+
if (cachedResult) {
|
|
2341
|
+
return cachedResult;
|
|
2342
|
+
}
|
|
2343
|
+
const result = mergeClassList(classList, configUtils);
|
|
2344
|
+
cacheSet(classList, result);
|
|
2345
|
+
return result;
|
|
2346
|
+
};
|
|
2347
|
+
functionToCall = initTailwindMerge;
|
|
2348
|
+
return (...args) => functionToCall(twJoin(...args));
|
|
2349
|
+
};
|
|
2350
|
+
var fallbackThemeArr = [];
|
|
2351
|
+
var fromTheme = (key) => {
|
|
2352
|
+
const themeGetter = (theme) => theme[key] || fallbackThemeArr;
|
|
2353
|
+
themeGetter.isThemeGetter = true;
|
|
2354
|
+
return themeGetter;
|
|
2355
|
+
};
|
|
2356
|
+
var arbitraryValueRegex = /^\[(?:(\w[\w-]*):)?(.+)\]$/i;
|
|
2357
|
+
var arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i;
|
|
2358
|
+
var fractionRegex = /^\d+\/\d+$/;
|
|
2359
|
+
var tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
|
|
2360
|
+
var lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/;
|
|
2361
|
+
var colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/;
|
|
2362
|
+
var shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
|
|
2363
|
+
var imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
|
|
2364
|
+
var isFraction = (value) => fractionRegex.test(value);
|
|
2365
|
+
var isNumber = (value) => !!value && !Number.isNaN(Number(value));
|
|
2366
|
+
var isInteger = (value) => !!value && Number.isInteger(Number(value));
|
|
2367
|
+
var isPercent = (value) => value.endsWith("%") && isNumber(value.slice(0, -1));
|
|
2368
|
+
var isTshirtSize = (value) => tshirtUnitRegex.test(value);
|
|
2369
|
+
var isAny = () => true;
|
|
2370
|
+
var isLengthOnly = (value) => lengthUnitRegex.test(value) && !colorFunctionRegex.test(value);
|
|
2371
|
+
var isNever = () => false;
|
|
2372
|
+
var isShadow = (value) => shadowRegex.test(value);
|
|
2373
|
+
var isImage = (value) => imageRegex.test(value);
|
|
2374
|
+
var isAnyNonArbitrary = (value) => !isArbitraryValue(value) && !isArbitraryVariable(value);
|
|
2375
|
+
var isArbitrarySize = (value) => getIsArbitraryValue(value, isLabelSize, isNever);
|
|
2376
|
+
var isArbitraryValue = (value) => arbitraryValueRegex.test(value);
|
|
2377
|
+
var isArbitraryLength = (value) => getIsArbitraryValue(value, isLabelLength, isLengthOnly);
|
|
2378
|
+
var isArbitraryNumber = (value) => getIsArbitraryValue(value, isLabelNumber, isNumber);
|
|
2379
|
+
var isArbitraryPosition = (value) => getIsArbitraryValue(value, isLabelPosition, isNever);
|
|
2380
|
+
var isArbitraryImage = (value) => getIsArbitraryValue(value, isLabelImage, isImage);
|
|
2381
|
+
var isArbitraryShadow = (value) => getIsArbitraryValue(value, isLabelShadow, isShadow);
|
|
2382
|
+
var isArbitraryVariable = (value) => arbitraryVariableRegex.test(value);
|
|
2383
|
+
var isArbitraryVariableLength = (value) => getIsArbitraryVariable(value, isLabelLength);
|
|
2384
|
+
var isArbitraryVariableFamilyName = (value) => getIsArbitraryVariable(value, isLabelFamilyName);
|
|
2385
|
+
var isArbitraryVariablePosition = (value) => getIsArbitraryVariable(value, isLabelPosition);
|
|
2386
|
+
var isArbitraryVariableSize = (value) => getIsArbitraryVariable(value, isLabelSize);
|
|
2387
|
+
var isArbitraryVariableImage = (value) => getIsArbitraryVariable(value, isLabelImage);
|
|
2388
|
+
var isArbitraryVariableShadow = (value) => getIsArbitraryVariable(value, isLabelShadow, true);
|
|
2389
|
+
var getIsArbitraryValue = (value, testLabel, testValue) => {
|
|
2390
|
+
const result = arbitraryValueRegex.exec(value);
|
|
2391
|
+
if (result) {
|
|
2392
|
+
if (result[1]) {
|
|
2393
|
+
return testLabel(result[1]);
|
|
2394
|
+
}
|
|
2395
|
+
return testValue(result[2]);
|
|
2396
|
+
}
|
|
2397
|
+
return false;
|
|
2398
|
+
};
|
|
2399
|
+
var getIsArbitraryVariable = (value, testLabel, shouldMatchNoLabel = false) => {
|
|
2400
|
+
const result = arbitraryVariableRegex.exec(value);
|
|
2401
|
+
if (result) {
|
|
2402
|
+
if (result[1]) {
|
|
2403
|
+
return testLabel(result[1]);
|
|
2404
|
+
}
|
|
2405
|
+
return shouldMatchNoLabel;
|
|
2406
|
+
}
|
|
2407
|
+
return false;
|
|
2408
|
+
};
|
|
2409
|
+
var isLabelPosition = (label) => label === "position" || label === "percentage";
|
|
2410
|
+
var isLabelImage = (label) => label === "image" || label === "url";
|
|
2411
|
+
var isLabelSize = (label) => label === "length" || label === "size" || label === "bg-size";
|
|
2412
|
+
var isLabelLength = (label) => label === "length";
|
|
2413
|
+
var isLabelNumber = (label) => label === "number";
|
|
2414
|
+
var isLabelFamilyName = (label) => label === "family-name";
|
|
2415
|
+
var isLabelShadow = (label) => label === "shadow";
|
|
2416
|
+
var getDefaultConfig = () => {
|
|
2417
|
+
const themeColor = fromTheme("color");
|
|
2418
|
+
const themeFont = fromTheme("font");
|
|
2419
|
+
const themeText = fromTheme("text");
|
|
2420
|
+
const themeFontWeight = fromTheme("font-weight");
|
|
2421
|
+
const themeTracking = fromTheme("tracking");
|
|
2422
|
+
const themeLeading = fromTheme("leading");
|
|
2423
|
+
const themeBreakpoint = fromTheme("breakpoint");
|
|
2424
|
+
const themeContainer = fromTheme("container");
|
|
2425
|
+
const themeSpacing = fromTheme("spacing");
|
|
2426
|
+
const themeRadius = fromTheme("radius");
|
|
2427
|
+
const themeShadow = fromTheme("shadow");
|
|
2428
|
+
const themeInsetShadow = fromTheme("inset-shadow");
|
|
2429
|
+
const themeTextShadow = fromTheme("text-shadow");
|
|
2430
|
+
const themeDropShadow = fromTheme("drop-shadow");
|
|
2431
|
+
const themeBlur = fromTheme("blur");
|
|
2432
|
+
const themePerspective = fromTheme("perspective");
|
|
2433
|
+
const themeAspect = fromTheme("aspect");
|
|
2434
|
+
const themeEase = fromTheme("ease");
|
|
2435
|
+
const themeAnimate = fromTheme("animate");
|
|
2436
|
+
const scaleBreak = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"];
|
|
2437
|
+
const scalePosition = () => [
|
|
2438
|
+
"center",
|
|
2439
|
+
"top",
|
|
2440
|
+
"bottom",
|
|
2441
|
+
"left",
|
|
2442
|
+
"right",
|
|
2443
|
+
"top-left",
|
|
2444
|
+
"left-top",
|
|
2445
|
+
"top-right",
|
|
2446
|
+
"right-top",
|
|
2447
|
+
"bottom-right",
|
|
2448
|
+
"right-bottom",
|
|
2449
|
+
"bottom-left",
|
|
2450
|
+
"left-bottom"
|
|
2451
|
+
];
|
|
2452
|
+
const scalePositionWithArbitrary = () => [...scalePosition(), isArbitraryVariable, isArbitraryValue];
|
|
2453
|
+
const scaleOverflow = () => ["auto", "hidden", "clip", "visible", "scroll"];
|
|
2454
|
+
const scaleOverscroll = () => ["auto", "contain", "none"];
|
|
2455
|
+
const scaleUnambiguousSpacing = () => [isArbitraryVariable, isArbitraryValue, themeSpacing];
|
|
2456
|
+
const scaleInset = () => [isFraction, "full", "auto", ...scaleUnambiguousSpacing()];
|
|
2457
|
+
const scaleGridTemplateColsRows = () => [isInteger, "none", "subgrid", isArbitraryVariable, isArbitraryValue];
|
|
2458
|
+
const scaleGridColRowStartAndEnd = () => ["auto", {
|
|
2459
|
+
span: ["full", isInteger, isArbitraryVariable, isArbitraryValue]
|
|
2460
|
+
}, isInteger, isArbitraryVariable, isArbitraryValue];
|
|
2461
|
+
const scaleGridColRowStartOrEnd = () => [isInteger, "auto", isArbitraryVariable, isArbitraryValue];
|
|
2462
|
+
const scaleGridAutoColsRows = () => ["auto", "min", "max", "fr", isArbitraryVariable, isArbitraryValue];
|
|
2463
|
+
const scaleAlignPrimaryAxis = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"];
|
|
2464
|
+
const scaleAlignSecondaryAxis = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"];
|
|
2465
|
+
const scaleMargin = () => ["auto", ...scaleUnambiguousSpacing()];
|
|
2466
|
+
const scaleSizing = () => [isFraction, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...scaleUnambiguousSpacing()];
|
|
2467
|
+
const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue];
|
|
2468
|
+
const scaleBgPosition = () => [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition, {
|
|
2469
|
+
position: [isArbitraryVariable, isArbitraryValue]
|
|
2470
|
+
}];
|
|
2471
|
+
const scaleBgRepeat = () => ["no-repeat", {
|
|
2472
|
+
repeat: ["", "x", "y", "space", "round"]
|
|
2473
|
+
}];
|
|
2474
|
+
const scaleBgSize = () => ["auto", "cover", "contain", isArbitraryVariableSize, isArbitrarySize, {
|
|
2475
|
+
size: [isArbitraryVariable, isArbitraryValue]
|
|
2476
|
+
}];
|
|
2477
|
+
const scaleGradientStopPosition = () => [isPercent, isArbitraryVariableLength, isArbitraryLength];
|
|
2478
|
+
const scaleRadius = () => [
|
|
2479
|
+
"",
|
|
2480
|
+
"none",
|
|
2481
|
+
"full",
|
|
2482
|
+
themeRadius,
|
|
2483
|
+
isArbitraryVariable,
|
|
2484
|
+
isArbitraryValue
|
|
2485
|
+
];
|
|
2486
|
+
const scaleBorderWidth = () => ["", isNumber, isArbitraryVariableLength, isArbitraryLength];
|
|
2487
|
+
const scaleLineStyle = () => ["solid", "dashed", "dotted", "double"];
|
|
2488
|
+
const scaleBlendMode = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
|
|
2489
|
+
const scaleMaskImagePosition = () => [isNumber, isPercent, isArbitraryVariablePosition, isArbitraryPosition];
|
|
2490
|
+
const scaleBlur = () => [
|
|
2491
|
+
"",
|
|
2492
|
+
"none",
|
|
2493
|
+
themeBlur,
|
|
2494
|
+
isArbitraryVariable,
|
|
2495
|
+
isArbitraryValue
|
|
2496
|
+
];
|
|
2497
|
+
const scaleRotate = () => ["none", isNumber, isArbitraryVariable, isArbitraryValue];
|
|
2498
|
+
const scaleScale = () => ["none", isNumber, isArbitraryVariable, isArbitraryValue];
|
|
2499
|
+
const scaleSkew = () => [isNumber, isArbitraryVariable, isArbitraryValue];
|
|
2500
|
+
const scaleTranslate = () => [isFraction, "full", ...scaleUnambiguousSpacing()];
|
|
2501
|
+
return {
|
|
2502
|
+
cacheSize: 500,
|
|
2503
|
+
theme: {
|
|
2504
|
+
animate: ["spin", "ping", "pulse", "bounce"],
|
|
2505
|
+
aspect: ["video"],
|
|
2506
|
+
blur: [isTshirtSize],
|
|
2507
|
+
breakpoint: [isTshirtSize],
|
|
2508
|
+
color: [isAny],
|
|
2509
|
+
container: [isTshirtSize],
|
|
2510
|
+
"drop-shadow": [isTshirtSize],
|
|
2511
|
+
ease: ["in", "out", "in-out"],
|
|
2512
|
+
font: [isAnyNonArbitrary],
|
|
2513
|
+
"font-weight": ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"],
|
|
2514
|
+
"inset-shadow": [isTshirtSize],
|
|
2515
|
+
leading: ["none", "tight", "snug", "normal", "relaxed", "loose"],
|
|
2516
|
+
perspective: ["dramatic", "near", "normal", "midrange", "distant", "none"],
|
|
2517
|
+
radius: [isTshirtSize],
|
|
2518
|
+
shadow: [isTshirtSize],
|
|
2519
|
+
spacing: ["px", isNumber],
|
|
2520
|
+
text: [isTshirtSize],
|
|
2521
|
+
"text-shadow": [isTshirtSize],
|
|
2522
|
+
tracking: ["tighter", "tight", "normal", "wide", "wider", "widest"]
|
|
2523
|
+
},
|
|
2524
|
+
classGroups: {
|
|
2525
|
+
aspect: [{
|
|
2526
|
+
aspect: ["auto", "square", isFraction, isArbitraryValue, isArbitraryVariable, themeAspect]
|
|
2527
|
+
}],
|
|
2528
|
+
container: ["container"],
|
|
2529
|
+
columns: [{
|
|
2530
|
+
columns: [isNumber, isArbitraryValue, isArbitraryVariable, themeContainer]
|
|
2531
|
+
}],
|
|
2532
|
+
"break-after": [{
|
|
2533
|
+
"break-after": scaleBreak()
|
|
2534
|
+
}],
|
|
2535
|
+
"break-before": [{
|
|
2536
|
+
"break-before": scaleBreak()
|
|
2537
|
+
}],
|
|
2538
|
+
"break-inside": [{
|
|
2539
|
+
"break-inside": ["auto", "avoid", "avoid-page", "avoid-column"]
|
|
2540
|
+
}],
|
|
2541
|
+
"box-decoration": [{
|
|
2542
|
+
"box-decoration": ["slice", "clone"]
|
|
2543
|
+
}],
|
|
2544
|
+
box: [{
|
|
2545
|
+
box: ["border", "content"]
|
|
2546
|
+
}],
|
|
2547
|
+
display: ["block", "inline-block", "inline", "flex", "inline-flex", "table", "inline-table", "table-caption", "table-cell", "table-column", "table-column-group", "table-footer-group", "table-header-group", "table-row-group", "table-row", "flow-root", "grid", "inline-grid", "contents", "list-item", "hidden"],
|
|
2548
|
+
sr: ["sr-only", "not-sr-only"],
|
|
2549
|
+
float: [{
|
|
2550
|
+
float: ["right", "left", "none", "start", "end"]
|
|
2551
|
+
}],
|
|
2552
|
+
clear: [{
|
|
2553
|
+
clear: ["left", "right", "both", "none", "start", "end"]
|
|
2554
|
+
}],
|
|
2555
|
+
isolation: ["isolate", "isolation-auto"],
|
|
2556
|
+
"object-fit": [{
|
|
2557
|
+
object: ["contain", "cover", "fill", "none", "scale-down"]
|
|
2558
|
+
}],
|
|
2559
|
+
"object-position": [{
|
|
2560
|
+
object: scalePositionWithArbitrary()
|
|
2561
|
+
}],
|
|
2562
|
+
overflow: [{
|
|
2563
|
+
overflow: scaleOverflow()
|
|
2564
|
+
}],
|
|
2565
|
+
"overflow-x": [{
|
|
2566
|
+
"overflow-x": scaleOverflow()
|
|
2567
|
+
}],
|
|
2568
|
+
"overflow-y": [{
|
|
2569
|
+
"overflow-y": scaleOverflow()
|
|
2570
|
+
}],
|
|
2571
|
+
overscroll: [{
|
|
2572
|
+
overscroll: scaleOverscroll()
|
|
2573
|
+
}],
|
|
2574
|
+
"overscroll-x": [{
|
|
2575
|
+
"overscroll-x": scaleOverscroll()
|
|
2576
|
+
}],
|
|
2577
|
+
"overscroll-y": [{
|
|
2578
|
+
"overscroll-y": scaleOverscroll()
|
|
2579
|
+
}],
|
|
2580
|
+
position: ["static", "fixed", "absolute", "relative", "sticky"],
|
|
2581
|
+
inset: [{
|
|
2582
|
+
inset: scaleInset()
|
|
2583
|
+
}],
|
|
2584
|
+
"inset-x": [{
|
|
2585
|
+
"inset-x": scaleInset()
|
|
2586
|
+
}],
|
|
2587
|
+
"inset-y": [{
|
|
2588
|
+
"inset-y": scaleInset()
|
|
2589
|
+
}],
|
|
2590
|
+
start: [{
|
|
2591
|
+
start: scaleInset()
|
|
2592
|
+
}],
|
|
2593
|
+
end: [{
|
|
2594
|
+
end: scaleInset()
|
|
2595
|
+
}],
|
|
2596
|
+
top: [{
|
|
2597
|
+
top: scaleInset()
|
|
2598
|
+
}],
|
|
2599
|
+
right: [{
|
|
2600
|
+
right: scaleInset()
|
|
2601
|
+
}],
|
|
2602
|
+
bottom: [{
|
|
2603
|
+
bottom: scaleInset()
|
|
2604
|
+
}],
|
|
2605
|
+
left: [{
|
|
2606
|
+
left: scaleInset()
|
|
2607
|
+
}],
|
|
2608
|
+
visibility: ["visible", "invisible", "collapse"],
|
|
2609
|
+
z: [{
|
|
2610
|
+
z: [isInteger, "auto", isArbitraryVariable, isArbitraryValue]
|
|
2611
|
+
}],
|
|
2612
|
+
basis: [{
|
|
2613
|
+
basis: [isFraction, "full", "auto", themeContainer, ...scaleUnambiguousSpacing()]
|
|
2614
|
+
}],
|
|
2615
|
+
"flex-direction": [{
|
|
2616
|
+
flex: ["row", "row-reverse", "col", "col-reverse"]
|
|
2617
|
+
}],
|
|
2618
|
+
"flex-wrap": [{
|
|
2619
|
+
flex: ["nowrap", "wrap", "wrap-reverse"]
|
|
2620
|
+
}],
|
|
2621
|
+
flex: [{
|
|
2622
|
+
flex: [isNumber, isFraction, "auto", "initial", "none", isArbitraryValue]
|
|
2623
|
+
}],
|
|
2624
|
+
grow: [{
|
|
2625
|
+
grow: ["", isNumber, isArbitraryVariable, isArbitraryValue]
|
|
2626
|
+
}],
|
|
2627
|
+
shrink: [{
|
|
2628
|
+
shrink: ["", isNumber, isArbitraryVariable, isArbitraryValue]
|
|
2629
|
+
}],
|
|
2630
|
+
order: [{
|
|
2631
|
+
order: [isInteger, "first", "last", "none", isArbitraryVariable, isArbitraryValue]
|
|
2632
|
+
}],
|
|
2633
|
+
"grid-cols": [{
|
|
2634
|
+
"grid-cols": scaleGridTemplateColsRows()
|
|
2635
|
+
}],
|
|
2636
|
+
"col-start-end": [{
|
|
2637
|
+
col: scaleGridColRowStartAndEnd()
|
|
2638
|
+
}],
|
|
2639
|
+
"col-start": [{
|
|
2640
|
+
"col-start": scaleGridColRowStartOrEnd()
|
|
2641
|
+
}],
|
|
2642
|
+
"col-end": [{
|
|
2643
|
+
"col-end": scaleGridColRowStartOrEnd()
|
|
2644
|
+
}],
|
|
2645
|
+
"grid-rows": [{
|
|
2646
|
+
"grid-rows": scaleGridTemplateColsRows()
|
|
2647
|
+
}],
|
|
2648
|
+
"row-start-end": [{
|
|
2649
|
+
row: scaleGridColRowStartAndEnd()
|
|
2650
|
+
}],
|
|
2651
|
+
"row-start": [{
|
|
2652
|
+
"row-start": scaleGridColRowStartOrEnd()
|
|
2653
|
+
}],
|
|
2654
|
+
"row-end": [{
|
|
2655
|
+
"row-end": scaleGridColRowStartOrEnd()
|
|
2656
|
+
}],
|
|
2657
|
+
"grid-flow": [{
|
|
2658
|
+
"grid-flow": ["row", "col", "dense", "row-dense", "col-dense"]
|
|
2659
|
+
}],
|
|
2660
|
+
"auto-cols": [{
|
|
2661
|
+
"auto-cols": scaleGridAutoColsRows()
|
|
2662
|
+
}],
|
|
2663
|
+
"auto-rows": [{
|
|
2664
|
+
"auto-rows": scaleGridAutoColsRows()
|
|
2665
|
+
}],
|
|
2666
|
+
gap: [{
|
|
2667
|
+
gap: scaleUnambiguousSpacing()
|
|
2668
|
+
}],
|
|
2669
|
+
"gap-x": [{
|
|
2670
|
+
"gap-x": scaleUnambiguousSpacing()
|
|
2671
|
+
}],
|
|
2672
|
+
"gap-y": [{
|
|
2673
|
+
"gap-y": scaleUnambiguousSpacing()
|
|
2674
|
+
}],
|
|
2675
|
+
"justify-content": [{
|
|
2676
|
+
justify: [...scaleAlignPrimaryAxis(), "normal"]
|
|
2677
|
+
}],
|
|
2678
|
+
"justify-items": [{
|
|
2679
|
+
"justify-items": [...scaleAlignSecondaryAxis(), "normal"]
|
|
2680
|
+
}],
|
|
2681
|
+
"justify-self": [{
|
|
2682
|
+
"justify-self": ["auto", ...scaleAlignSecondaryAxis()]
|
|
2683
|
+
}],
|
|
2684
|
+
"align-content": [{
|
|
2685
|
+
content: ["normal", ...scaleAlignPrimaryAxis()]
|
|
2686
|
+
}],
|
|
2687
|
+
"align-items": [{
|
|
2688
|
+
items: [...scaleAlignSecondaryAxis(), {
|
|
2689
|
+
baseline: ["", "last"]
|
|
2690
|
+
}]
|
|
2691
|
+
}],
|
|
2692
|
+
"align-self": [{
|
|
2693
|
+
self: ["auto", ...scaleAlignSecondaryAxis(), {
|
|
2694
|
+
baseline: ["", "last"]
|
|
2695
|
+
}]
|
|
2696
|
+
}],
|
|
2697
|
+
"place-content": [{
|
|
2698
|
+
"place-content": scaleAlignPrimaryAxis()
|
|
2699
|
+
}],
|
|
2700
|
+
"place-items": [{
|
|
2701
|
+
"place-items": [...scaleAlignSecondaryAxis(), "baseline"]
|
|
2702
|
+
}],
|
|
2703
|
+
"place-self": [{
|
|
2704
|
+
"place-self": ["auto", ...scaleAlignSecondaryAxis()]
|
|
2705
|
+
}],
|
|
2706
|
+
p: [{
|
|
2707
|
+
p: scaleUnambiguousSpacing()
|
|
2708
|
+
}],
|
|
2709
|
+
px: [{
|
|
2710
|
+
px: scaleUnambiguousSpacing()
|
|
2711
|
+
}],
|
|
2712
|
+
py: [{
|
|
2713
|
+
py: scaleUnambiguousSpacing()
|
|
2714
|
+
}],
|
|
2715
|
+
ps: [{
|
|
2716
|
+
ps: scaleUnambiguousSpacing()
|
|
2717
|
+
}],
|
|
2718
|
+
pe: [{
|
|
2719
|
+
pe: scaleUnambiguousSpacing()
|
|
2720
|
+
}],
|
|
2721
|
+
pt: [{
|
|
2722
|
+
pt: scaleUnambiguousSpacing()
|
|
2723
|
+
}],
|
|
2724
|
+
pr: [{
|
|
2725
|
+
pr: scaleUnambiguousSpacing()
|
|
2726
|
+
}],
|
|
2727
|
+
pb: [{
|
|
2728
|
+
pb: scaleUnambiguousSpacing()
|
|
2729
|
+
}],
|
|
2730
|
+
pl: [{
|
|
2731
|
+
pl: scaleUnambiguousSpacing()
|
|
2732
|
+
}],
|
|
2733
|
+
m: [{
|
|
2734
|
+
m: scaleMargin()
|
|
2735
|
+
}],
|
|
2736
|
+
mx: [{
|
|
2737
|
+
mx: scaleMargin()
|
|
2738
|
+
}],
|
|
2739
|
+
my: [{
|
|
2740
|
+
my: scaleMargin()
|
|
2741
|
+
}],
|
|
2742
|
+
ms: [{
|
|
2743
|
+
ms: scaleMargin()
|
|
2744
|
+
}],
|
|
2745
|
+
me: [{
|
|
2746
|
+
me: scaleMargin()
|
|
2747
|
+
}],
|
|
2748
|
+
mt: [{
|
|
2749
|
+
mt: scaleMargin()
|
|
2750
|
+
}],
|
|
2751
|
+
mr: [{
|
|
2752
|
+
mr: scaleMargin()
|
|
2753
|
+
}],
|
|
2754
|
+
mb: [{
|
|
2755
|
+
mb: scaleMargin()
|
|
2756
|
+
}],
|
|
2757
|
+
ml: [{
|
|
2758
|
+
ml: scaleMargin()
|
|
2759
|
+
}],
|
|
2760
|
+
"space-x": [{
|
|
2761
|
+
"space-x": scaleUnambiguousSpacing()
|
|
2762
|
+
}],
|
|
2763
|
+
"space-x-reverse": ["space-x-reverse"],
|
|
2764
|
+
"space-y": [{
|
|
2765
|
+
"space-y": scaleUnambiguousSpacing()
|
|
2766
|
+
}],
|
|
2767
|
+
"space-y-reverse": ["space-y-reverse"],
|
|
2768
|
+
size: [{
|
|
2769
|
+
size: scaleSizing()
|
|
2770
|
+
}],
|
|
2771
|
+
w: [{
|
|
2772
|
+
w: [themeContainer, "screen", ...scaleSizing()]
|
|
2773
|
+
}],
|
|
2774
|
+
"min-w": [{
|
|
2775
|
+
"min-w": [
|
|
2776
|
+
themeContainer,
|
|
2777
|
+
"screen",
|
|
2778
|
+
"none",
|
|
2779
|
+
...scaleSizing()
|
|
2780
|
+
]
|
|
2781
|
+
}],
|
|
2782
|
+
"max-w": [{
|
|
2783
|
+
"max-w": [
|
|
2784
|
+
themeContainer,
|
|
2785
|
+
"screen",
|
|
2786
|
+
"none",
|
|
2787
|
+
"prose",
|
|
2788
|
+
{
|
|
2789
|
+
screen: [themeBreakpoint]
|
|
2790
|
+
},
|
|
2791
|
+
...scaleSizing()
|
|
2792
|
+
]
|
|
2793
|
+
}],
|
|
2794
|
+
h: [{
|
|
2795
|
+
h: ["screen", "lh", ...scaleSizing()]
|
|
2796
|
+
}],
|
|
2797
|
+
"min-h": [{
|
|
2798
|
+
"min-h": ["screen", "lh", "none", ...scaleSizing()]
|
|
2799
|
+
}],
|
|
2800
|
+
"max-h": [{
|
|
2801
|
+
"max-h": ["screen", "lh", ...scaleSizing()]
|
|
2802
|
+
}],
|
|
2803
|
+
"font-size": [{
|
|
2804
|
+
text: ["base", themeText, isArbitraryVariableLength, isArbitraryLength]
|
|
2805
|
+
}],
|
|
2806
|
+
"font-smoothing": ["antialiased", "subpixel-antialiased"],
|
|
2807
|
+
"font-style": ["italic", "not-italic"],
|
|
2808
|
+
"font-weight": [{
|
|
2809
|
+
font: [themeFontWeight, isArbitraryVariable, isArbitraryNumber]
|
|
2810
|
+
}],
|
|
2811
|
+
"font-stretch": [{
|
|
2812
|
+
"font-stretch": ["ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded", isPercent, isArbitraryValue]
|
|
2813
|
+
}],
|
|
2814
|
+
"font-family": [{
|
|
2815
|
+
font: [isArbitraryVariableFamilyName, isArbitraryValue, themeFont]
|
|
2816
|
+
}],
|
|
2817
|
+
"fvn-normal": ["normal-nums"],
|
|
2818
|
+
"fvn-ordinal": ["ordinal"],
|
|
2819
|
+
"fvn-slashed-zero": ["slashed-zero"],
|
|
2820
|
+
"fvn-figure": ["lining-nums", "oldstyle-nums"],
|
|
2821
|
+
"fvn-spacing": ["proportional-nums", "tabular-nums"],
|
|
2822
|
+
"fvn-fraction": ["diagonal-fractions", "stacked-fractions"],
|
|
2823
|
+
tracking: [{
|
|
2824
|
+
tracking: [themeTracking, isArbitraryVariable, isArbitraryValue]
|
|
2825
|
+
}],
|
|
2826
|
+
"line-clamp": [{
|
|
2827
|
+
"line-clamp": [isNumber, "none", isArbitraryVariable, isArbitraryNumber]
|
|
2828
|
+
}],
|
|
2829
|
+
leading: [{
|
|
2830
|
+
leading: [
|
|
2831
|
+
themeLeading,
|
|
2832
|
+
...scaleUnambiguousSpacing()
|
|
2833
|
+
]
|
|
2834
|
+
}],
|
|
2835
|
+
"list-image": [{
|
|
2836
|
+
"list-image": ["none", isArbitraryVariable, isArbitraryValue]
|
|
2837
|
+
}],
|
|
2838
|
+
"list-style-position": [{
|
|
2839
|
+
list: ["inside", "outside"]
|
|
2840
|
+
}],
|
|
2841
|
+
"list-style-type": [{
|
|
2842
|
+
list: ["disc", "decimal", "none", isArbitraryVariable, isArbitraryValue]
|
|
2843
|
+
}],
|
|
2844
|
+
"text-alignment": [{
|
|
2845
|
+
text: ["left", "center", "right", "justify", "start", "end"]
|
|
2846
|
+
}],
|
|
2847
|
+
"placeholder-color": [{
|
|
2848
|
+
placeholder: scaleColor()
|
|
2849
|
+
}],
|
|
2850
|
+
"text-color": [{
|
|
2851
|
+
text: scaleColor()
|
|
2852
|
+
}],
|
|
2853
|
+
"text-decoration": ["underline", "overline", "line-through", "no-underline"],
|
|
2854
|
+
"text-decoration-style": [{
|
|
2855
|
+
decoration: [...scaleLineStyle(), "wavy"]
|
|
2856
|
+
}],
|
|
2857
|
+
"text-decoration-thickness": [{
|
|
2858
|
+
decoration: [isNumber, "from-font", "auto", isArbitraryVariable, isArbitraryLength]
|
|
2859
|
+
}],
|
|
2860
|
+
"text-decoration-color": [{
|
|
2861
|
+
decoration: scaleColor()
|
|
2862
|
+
}],
|
|
2863
|
+
"underline-offset": [{
|
|
2864
|
+
"underline-offset": [isNumber, "auto", isArbitraryVariable, isArbitraryValue]
|
|
2865
|
+
}],
|
|
2866
|
+
"text-transform": ["uppercase", "lowercase", "capitalize", "normal-case"],
|
|
2867
|
+
"text-overflow": ["truncate", "text-ellipsis", "text-clip"],
|
|
2868
|
+
"text-wrap": [{
|
|
2869
|
+
text: ["wrap", "nowrap", "balance", "pretty"]
|
|
2870
|
+
}],
|
|
2871
|
+
indent: [{
|
|
2872
|
+
indent: scaleUnambiguousSpacing()
|
|
2873
|
+
}],
|
|
2874
|
+
"vertical-align": [{
|
|
2875
|
+
align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", isArbitraryVariable, isArbitraryValue]
|
|
2876
|
+
}],
|
|
2877
|
+
whitespace: [{
|
|
2878
|
+
whitespace: ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces"]
|
|
2879
|
+
}],
|
|
2880
|
+
break: [{
|
|
2881
|
+
break: ["normal", "words", "all", "keep"]
|
|
2882
|
+
}],
|
|
2883
|
+
wrap: [{
|
|
2884
|
+
wrap: ["break-word", "anywhere", "normal"]
|
|
2885
|
+
}],
|
|
2886
|
+
hyphens: [{
|
|
2887
|
+
hyphens: ["none", "manual", "auto"]
|
|
2888
|
+
}],
|
|
2889
|
+
content: [{
|
|
2890
|
+
content: ["none", isArbitraryVariable, isArbitraryValue]
|
|
2891
|
+
}],
|
|
2892
|
+
"bg-attachment": [{
|
|
2893
|
+
bg: ["fixed", "local", "scroll"]
|
|
2894
|
+
}],
|
|
2895
|
+
"bg-clip": [{
|
|
2896
|
+
"bg-clip": ["border", "padding", "content", "text"]
|
|
2897
|
+
}],
|
|
2898
|
+
"bg-origin": [{
|
|
2899
|
+
"bg-origin": ["border", "padding", "content"]
|
|
2900
|
+
}],
|
|
2901
|
+
"bg-position": [{
|
|
2902
|
+
bg: scaleBgPosition()
|
|
2903
|
+
}],
|
|
2904
|
+
"bg-repeat": [{
|
|
2905
|
+
bg: scaleBgRepeat()
|
|
2906
|
+
}],
|
|
2907
|
+
"bg-size": [{
|
|
2908
|
+
bg: scaleBgSize()
|
|
2909
|
+
}],
|
|
2910
|
+
"bg-image": [{
|
|
2911
|
+
bg: ["none", {
|
|
2912
|
+
linear: [{
|
|
2913
|
+
to: ["t", "tr", "r", "br", "b", "bl", "l", "tl"]
|
|
2914
|
+
}, isInteger, isArbitraryVariable, isArbitraryValue],
|
|
2915
|
+
radial: ["", isArbitraryVariable, isArbitraryValue],
|
|
2916
|
+
conic: [isInteger, isArbitraryVariable, isArbitraryValue]
|
|
2917
|
+
}, isArbitraryVariableImage, isArbitraryImage]
|
|
2918
|
+
}],
|
|
2919
|
+
"bg-color": [{
|
|
2920
|
+
bg: scaleColor()
|
|
2921
|
+
}],
|
|
2922
|
+
"gradient-from-pos": [{
|
|
2923
|
+
from: scaleGradientStopPosition()
|
|
2924
|
+
}],
|
|
2925
|
+
"gradient-via-pos": [{
|
|
2926
|
+
via: scaleGradientStopPosition()
|
|
2927
|
+
}],
|
|
2928
|
+
"gradient-to-pos": [{
|
|
2929
|
+
to: scaleGradientStopPosition()
|
|
2930
|
+
}],
|
|
2931
|
+
"gradient-from": [{
|
|
2932
|
+
from: scaleColor()
|
|
2933
|
+
}],
|
|
2934
|
+
"gradient-via": [{
|
|
2935
|
+
via: scaleColor()
|
|
2936
|
+
}],
|
|
2937
|
+
"gradient-to": [{
|
|
2938
|
+
to: scaleColor()
|
|
2939
|
+
}],
|
|
2940
|
+
rounded: [{
|
|
2941
|
+
rounded: scaleRadius()
|
|
2942
|
+
}],
|
|
2943
|
+
"rounded-s": [{
|
|
2944
|
+
"rounded-s": scaleRadius()
|
|
2945
|
+
}],
|
|
2946
|
+
"rounded-e": [{
|
|
2947
|
+
"rounded-e": scaleRadius()
|
|
2948
|
+
}],
|
|
2949
|
+
"rounded-t": [{
|
|
2950
|
+
"rounded-t": scaleRadius()
|
|
2951
|
+
}],
|
|
2952
|
+
"rounded-r": [{
|
|
2953
|
+
"rounded-r": scaleRadius()
|
|
2954
|
+
}],
|
|
2955
|
+
"rounded-b": [{
|
|
2956
|
+
"rounded-b": scaleRadius()
|
|
2957
|
+
}],
|
|
2958
|
+
"rounded-l": [{
|
|
2959
|
+
"rounded-l": scaleRadius()
|
|
2960
|
+
}],
|
|
2961
|
+
"rounded-ss": [{
|
|
2962
|
+
"rounded-ss": scaleRadius()
|
|
2963
|
+
}],
|
|
2964
|
+
"rounded-se": [{
|
|
2965
|
+
"rounded-se": scaleRadius()
|
|
2966
|
+
}],
|
|
2967
|
+
"rounded-ee": [{
|
|
2968
|
+
"rounded-ee": scaleRadius()
|
|
2969
|
+
}],
|
|
2970
|
+
"rounded-es": [{
|
|
2971
|
+
"rounded-es": scaleRadius()
|
|
2972
|
+
}],
|
|
2973
|
+
"rounded-tl": [{
|
|
2974
|
+
"rounded-tl": scaleRadius()
|
|
2975
|
+
}],
|
|
2976
|
+
"rounded-tr": [{
|
|
2977
|
+
"rounded-tr": scaleRadius()
|
|
2978
|
+
}],
|
|
2979
|
+
"rounded-br": [{
|
|
2980
|
+
"rounded-br": scaleRadius()
|
|
2981
|
+
}],
|
|
2982
|
+
"rounded-bl": [{
|
|
2983
|
+
"rounded-bl": scaleRadius()
|
|
2984
|
+
}],
|
|
2985
|
+
"border-w": [{
|
|
2986
|
+
border: scaleBorderWidth()
|
|
2987
|
+
}],
|
|
2988
|
+
"border-w-x": [{
|
|
2989
|
+
"border-x": scaleBorderWidth()
|
|
2990
|
+
}],
|
|
2991
|
+
"border-w-y": [{
|
|
2992
|
+
"border-y": scaleBorderWidth()
|
|
2993
|
+
}],
|
|
2994
|
+
"border-w-s": [{
|
|
2995
|
+
"border-s": scaleBorderWidth()
|
|
2996
|
+
}],
|
|
2997
|
+
"border-w-e": [{
|
|
2998
|
+
"border-e": scaleBorderWidth()
|
|
2999
|
+
}],
|
|
3000
|
+
"border-w-t": [{
|
|
3001
|
+
"border-t": scaleBorderWidth()
|
|
3002
|
+
}],
|
|
3003
|
+
"border-w-r": [{
|
|
3004
|
+
"border-r": scaleBorderWidth()
|
|
3005
|
+
}],
|
|
3006
|
+
"border-w-b": [{
|
|
3007
|
+
"border-b": scaleBorderWidth()
|
|
3008
|
+
}],
|
|
3009
|
+
"border-w-l": [{
|
|
3010
|
+
"border-l": scaleBorderWidth()
|
|
3011
|
+
}],
|
|
3012
|
+
"divide-x": [{
|
|
3013
|
+
"divide-x": scaleBorderWidth()
|
|
3014
|
+
}],
|
|
3015
|
+
"divide-x-reverse": ["divide-x-reverse"],
|
|
3016
|
+
"divide-y": [{
|
|
3017
|
+
"divide-y": scaleBorderWidth()
|
|
3018
|
+
}],
|
|
3019
|
+
"divide-y-reverse": ["divide-y-reverse"],
|
|
3020
|
+
"border-style": [{
|
|
3021
|
+
border: [...scaleLineStyle(), "hidden", "none"]
|
|
3022
|
+
}],
|
|
3023
|
+
"divide-style": [{
|
|
3024
|
+
divide: [...scaleLineStyle(), "hidden", "none"]
|
|
3025
|
+
}],
|
|
3026
|
+
"border-color": [{
|
|
3027
|
+
border: scaleColor()
|
|
3028
|
+
}],
|
|
3029
|
+
"border-color-x": [{
|
|
3030
|
+
"border-x": scaleColor()
|
|
3031
|
+
}],
|
|
3032
|
+
"border-color-y": [{
|
|
3033
|
+
"border-y": scaleColor()
|
|
3034
|
+
}],
|
|
3035
|
+
"border-color-s": [{
|
|
3036
|
+
"border-s": scaleColor()
|
|
3037
|
+
}],
|
|
3038
|
+
"border-color-e": [{
|
|
3039
|
+
"border-e": scaleColor()
|
|
3040
|
+
}],
|
|
3041
|
+
"border-color-t": [{
|
|
3042
|
+
"border-t": scaleColor()
|
|
3043
|
+
}],
|
|
3044
|
+
"border-color-r": [{
|
|
3045
|
+
"border-r": scaleColor()
|
|
3046
|
+
}],
|
|
3047
|
+
"border-color-b": [{
|
|
3048
|
+
"border-b": scaleColor()
|
|
3049
|
+
}],
|
|
3050
|
+
"border-color-l": [{
|
|
3051
|
+
"border-l": scaleColor()
|
|
3052
|
+
}],
|
|
3053
|
+
"divide-color": [{
|
|
3054
|
+
divide: scaleColor()
|
|
3055
|
+
}],
|
|
3056
|
+
"outline-style": [{
|
|
3057
|
+
outline: [...scaleLineStyle(), "none", "hidden"]
|
|
3058
|
+
}],
|
|
3059
|
+
"outline-offset": [{
|
|
3060
|
+
"outline-offset": [isNumber, isArbitraryVariable, isArbitraryValue]
|
|
3061
|
+
}],
|
|
3062
|
+
"outline-w": [{
|
|
3063
|
+
outline: ["", isNumber, isArbitraryVariableLength, isArbitraryLength]
|
|
3064
|
+
}],
|
|
3065
|
+
"outline-color": [{
|
|
3066
|
+
outline: scaleColor()
|
|
3067
|
+
}],
|
|
3068
|
+
shadow: [{
|
|
3069
|
+
shadow: [
|
|
3070
|
+
"",
|
|
3071
|
+
"none",
|
|
3072
|
+
themeShadow,
|
|
3073
|
+
isArbitraryVariableShadow,
|
|
3074
|
+
isArbitraryShadow
|
|
3075
|
+
]
|
|
3076
|
+
}],
|
|
3077
|
+
"shadow-color": [{
|
|
3078
|
+
shadow: scaleColor()
|
|
3079
|
+
}],
|
|
3080
|
+
"inset-shadow": [{
|
|
3081
|
+
"inset-shadow": ["none", themeInsetShadow, isArbitraryVariableShadow, isArbitraryShadow]
|
|
3082
|
+
}],
|
|
3083
|
+
"inset-shadow-color": [{
|
|
3084
|
+
"inset-shadow": scaleColor()
|
|
3085
|
+
}],
|
|
3086
|
+
"ring-w": [{
|
|
3087
|
+
ring: scaleBorderWidth()
|
|
3088
|
+
}],
|
|
3089
|
+
"ring-w-inset": ["ring-inset"],
|
|
3090
|
+
"ring-color": [{
|
|
3091
|
+
ring: scaleColor()
|
|
3092
|
+
}],
|
|
3093
|
+
"ring-offset-w": [{
|
|
3094
|
+
"ring-offset": [isNumber, isArbitraryLength]
|
|
3095
|
+
}],
|
|
3096
|
+
"ring-offset-color": [{
|
|
3097
|
+
"ring-offset": scaleColor()
|
|
3098
|
+
}],
|
|
3099
|
+
"inset-ring-w": [{
|
|
3100
|
+
"inset-ring": scaleBorderWidth()
|
|
3101
|
+
}],
|
|
3102
|
+
"inset-ring-color": [{
|
|
3103
|
+
"inset-ring": scaleColor()
|
|
3104
|
+
}],
|
|
3105
|
+
"text-shadow": [{
|
|
3106
|
+
"text-shadow": ["none", themeTextShadow, isArbitraryVariableShadow, isArbitraryShadow]
|
|
3107
|
+
}],
|
|
3108
|
+
"text-shadow-color": [{
|
|
3109
|
+
"text-shadow": scaleColor()
|
|
3110
|
+
}],
|
|
3111
|
+
opacity: [{
|
|
3112
|
+
opacity: [isNumber, isArbitraryVariable, isArbitraryValue]
|
|
3113
|
+
}],
|
|
3114
|
+
"mix-blend": [{
|
|
3115
|
+
"mix-blend": [...scaleBlendMode(), "plus-darker", "plus-lighter"]
|
|
3116
|
+
}],
|
|
3117
|
+
"bg-blend": [{
|
|
3118
|
+
"bg-blend": scaleBlendMode()
|
|
3119
|
+
}],
|
|
3120
|
+
"mask-clip": [{
|
|
3121
|
+
"mask-clip": ["border", "padding", "content", "fill", "stroke", "view"]
|
|
3122
|
+
}, "mask-no-clip"],
|
|
3123
|
+
"mask-composite": [{
|
|
3124
|
+
mask: ["add", "subtract", "intersect", "exclude"]
|
|
3125
|
+
}],
|
|
3126
|
+
"mask-image-linear-pos": [{
|
|
3127
|
+
"mask-linear": [isNumber]
|
|
3128
|
+
}],
|
|
3129
|
+
"mask-image-linear-from-pos": [{
|
|
3130
|
+
"mask-linear-from": scaleMaskImagePosition()
|
|
3131
|
+
}],
|
|
3132
|
+
"mask-image-linear-to-pos": [{
|
|
3133
|
+
"mask-linear-to": scaleMaskImagePosition()
|
|
3134
|
+
}],
|
|
3135
|
+
"mask-image-linear-from-color": [{
|
|
3136
|
+
"mask-linear-from": scaleColor()
|
|
3137
|
+
}],
|
|
3138
|
+
"mask-image-linear-to-color": [{
|
|
3139
|
+
"mask-linear-to": scaleColor()
|
|
3140
|
+
}],
|
|
3141
|
+
"mask-image-t-from-pos": [{
|
|
3142
|
+
"mask-t-from": scaleMaskImagePosition()
|
|
3143
|
+
}],
|
|
3144
|
+
"mask-image-t-to-pos": [{
|
|
3145
|
+
"mask-t-to": scaleMaskImagePosition()
|
|
3146
|
+
}],
|
|
3147
|
+
"mask-image-t-from-color": [{
|
|
3148
|
+
"mask-t-from": scaleColor()
|
|
3149
|
+
}],
|
|
3150
|
+
"mask-image-t-to-color": [{
|
|
3151
|
+
"mask-t-to": scaleColor()
|
|
3152
|
+
}],
|
|
3153
|
+
"mask-image-r-from-pos": [{
|
|
3154
|
+
"mask-r-from": scaleMaskImagePosition()
|
|
3155
|
+
}],
|
|
3156
|
+
"mask-image-r-to-pos": [{
|
|
3157
|
+
"mask-r-to": scaleMaskImagePosition()
|
|
3158
|
+
}],
|
|
3159
|
+
"mask-image-r-from-color": [{
|
|
3160
|
+
"mask-r-from": scaleColor()
|
|
3161
|
+
}],
|
|
3162
|
+
"mask-image-r-to-color": [{
|
|
3163
|
+
"mask-r-to": scaleColor()
|
|
3164
|
+
}],
|
|
3165
|
+
"mask-image-b-from-pos": [{
|
|
3166
|
+
"mask-b-from": scaleMaskImagePosition()
|
|
3167
|
+
}],
|
|
3168
|
+
"mask-image-b-to-pos": [{
|
|
3169
|
+
"mask-b-to": scaleMaskImagePosition()
|
|
3170
|
+
}],
|
|
3171
|
+
"mask-image-b-from-color": [{
|
|
3172
|
+
"mask-b-from": scaleColor()
|
|
3173
|
+
}],
|
|
3174
|
+
"mask-image-b-to-color": [{
|
|
3175
|
+
"mask-b-to": scaleColor()
|
|
3176
|
+
}],
|
|
3177
|
+
"mask-image-l-from-pos": [{
|
|
3178
|
+
"mask-l-from": scaleMaskImagePosition()
|
|
3179
|
+
}],
|
|
3180
|
+
"mask-image-l-to-pos": [{
|
|
3181
|
+
"mask-l-to": scaleMaskImagePosition()
|
|
3182
|
+
}],
|
|
3183
|
+
"mask-image-l-from-color": [{
|
|
3184
|
+
"mask-l-from": scaleColor()
|
|
3185
|
+
}],
|
|
3186
|
+
"mask-image-l-to-color": [{
|
|
3187
|
+
"mask-l-to": scaleColor()
|
|
3188
|
+
}],
|
|
3189
|
+
"mask-image-x-from-pos": [{
|
|
3190
|
+
"mask-x-from": scaleMaskImagePosition()
|
|
3191
|
+
}],
|
|
3192
|
+
"mask-image-x-to-pos": [{
|
|
3193
|
+
"mask-x-to": scaleMaskImagePosition()
|
|
3194
|
+
}],
|
|
3195
|
+
"mask-image-x-from-color": [{
|
|
3196
|
+
"mask-x-from": scaleColor()
|
|
3197
|
+
}],
|
|
3198
|
+
"mask-image-x-to-color": [{
|
|
3199
|
+
"mask-x-to": scaleColor()
|
|
3200
|
+
}],
|
|
3201
|
+
"mask-image-y-from-pos": [{
|
|
3202
|
+
"mask-y-from": scaleMaskImagePosition()
|
|
3203
|
+
}],
|
|
3204
|
+
"mask-image-y-to-pos": [{
|
|
3205
|
+
"mask-y-to": scaleMaskImagePosition()
|
|
3206
|
+
}],
|
|
3207
|
+
"mask-image-y-from-color": [{
|
|
3208
|
+
"mask-y-from": scaleColor()
|
|
3209
|
+
}],
|
|
3210
|
+
"mask-image-y-to-color": [{
|
|
3211
|
+
"mask-y-to": scaleColor()
|
|
3212
|
+
}],
|
|
3213
|
+
"mask-image-radial": [{
|
|
3214
|
+
"mask-radial": [isArbitraryVariable, isArbitraryValue]
|
|
3215
|
+
}],
|
|
3216
|
+
"mask-image-radial-from-pos": [{
|
|
3217
|
+
"mask-radial-from": scaleMaskImagePosition()
|
|
3218
|
+
}],
|
|
3219
|
+
"mask-image-radial-to-pos": [{
|
|
3220
|
+
"mask-radial-to": scaleMaskImagePosition()
|
|
3221
|
+
}],
|
|
3222
|
+
"mask-image-radial-from-color": [{
|
|
3223
|
+
"mask-radial-from": scaleColor()
|
|
3224
|
+
}],
|
|
3225
|
+
"mask-image-radial-to-color": [{
|
|
3226
|
+
"mask-radial-to": scaleColor()
|
|
3227
|
+
}],
|
|
3228
|
+
"mask-image-radial-shape": [{
|
|
3229
|
+
"mask-radial": ["circle", "ellipse"]
|
|
3230
|
+
}],
|
|
3231
|
+
"mask-image-radial-size": [{
|
|
3232
|
+
"mask-radial": [{
|
|
3233
|
+
closest: ["side", "corner"],
|
|
3234
|
+
farthest: ["side", "corner"]
|
|
3235
|
+
}]
|
|
3236
|
+
}],
|
|
3237
|
+
"mask-image-radial-pos": [{
|
|
3238
|
+
"mask-radial-at": scalePosition()
|
|
3239
|
+
}],
|
|
3240
|
+
"mask-image-conic-pos": [{
|
|
3241
|
+
"mask-conic": [isNumber]
|
|
3242
|
+
}],
|
|
3243
|
+
"mask-image-conic-from-pos": [{
|
|
3244
|
+
"mask-conic-from": scaleMaskImagePosition()
|
|
3245
|
+
}],
|
|
3246
|
+
"mask-image-conic-to-pos": [{
|
|
3247
|
+
"mask-conic-to": scaleMaskImagePosition()
|
|
3248
|
+
}],
|
|
3249
|
+
"mask-image-conic-from-color": [{
|
|
3250
|
+
"mask-conic-from": scaleColor()
|
|
3251
|
+
}],
|
|
3252
|
+
"mask-image-conic-to-color": [{
|
|
3253
|
+
"mask-conic-to": scaleColor()
|
|
3254
|
+
}],
|
|
3255
|
+
"mask-mode": [{
|
|
3256
|
+
mask: ["alpha", "luminance", "match"]
|
|
3257
|
+
}],
|
|
3258
|
+
"mask-origin": [{
|
|
3259
|
+
"mask-origin": ["border", "padding", "content", "fill", "stroke", "view"]
|
|
3260
|
+
}],
|
|
3261
|
+
"mask-position": [{
|
|
3262
|
+
mask: scaleBgPosition()
|
|
3263
|
+
}],
|
|
3264
|
+
"mask-repeat": [{
|
|
3265
|
+
mask: scaleBgRepeat()
|
|
3266
|
+
}],
|
|
3267
|
+
"mask-size": [{
|
|
3268
|
+
mask: scaleBgSize()
|
|
3269
|
+
}],
|
|
3270
|
+
"mask-type": [{
|
|
3271
|
+
"mask-type": ["alpha", "luminance"]
|
|
3272
|
+
}],
|
|
3273
|
+
"mask-image": [{
|
|
3274
|
+
mask: ["none", isArbitraryVariable, isArbitraryValue]
|
|
3275
|
+
}],
|
|
3276
|
+
filter: [{
|
|
3277
|
+
filter: [
|
|
3278
|
+
"",
|
|
3279
|
+
"none",
|
|
3280
|
+
isArbitraryVariable,
|
|
3281
|
+
isArbitraryValue
|
|
3282
|
+
]
|
|
3283
|
+
}],
|
|
3284
|
+
blur: [{
|
|
3285
|
+
blur: scaleBlur()
|
|
3286
|
+
}],
|
|
3287
|
+
brightness: [{
|
|
3288
|
+
brightness: [isNumber, isArbitraryVariable, isArbitraryValue]
|
|
3289
|
+
}],
|
|
3290
|
+
contrast: [{
|
|
3291
|
+
contrast: [isNumber, isArbitraryVariable, isArbitraryValue]
|
|
3292
|
+
}],
|
|
3293
|
+
"drop-shadow": [{
|
|
3294
|
+
"drop-shadow": [
|
|
3295
|
+
"",
|
|
3296
|
+
"none",
|
|
3297
|
+
themeDropShadow,
|
|
3298
|
+
isArbitraryVariableShadow,
|
|
3299
|
+
isArbitraryShadow
|
|
3300
|
+
]
|
|
3301
|
+
}],
|
|
3302
|
+
"drop-shadow-color": [{
|
|
3303
|
+
"drop-shadow": scaleColor()
|
|
3304
|
+
}],
|
|
3305
|
+
grayscale: [{
|
|
3306
|
+
grayscale: ["", isNumber, isArbitraryVariable, isArbitraryValue]
|
|
3307
|
+
}],
|
|
3308
|
+
"hue-rotate": [{
|
|
3309
|
+
"hue-rotate": [isNumber, isArbitraryVariable, isArbitraryValue]
|
|
3310
|
+
}],
|
|
3311
|
+
invert: [{
|
|
3312
|
+
invert: ["", isNumber, isArbitraryVariable, isArbitraryValue]
|
|
3313
|
+
}],
|
|
3314
|
+
saturate: [{
|
|
3315
|
+
saturate: [isNumber, isArbitraryVariable, isArbitraryValue]
|
|
3316
|
+
}],
|
|
3317
|
+
sepia: [{
|
|
3318
|
+
sepia: ["", isNumber, isArbitraryVariable, isArbitraryValue]
|
|
3319
|
+
}],
|
|
3320
|
+
"backdrop-filter": [{
|
|
3321
|
+
"backdrop-filter": [
|
|
3322
|
+
"",
|
|
3323
|
+
"none",
|
|
3324
|
+
isArbitraryVariable,
|
|
3325
|
+
isArbitraryValue
|
|
3326
|
+
]
|
|
3327
|
+
}],
|
|
3328
|
+
"backdrop-blur": [{
|
|
3329
|
+
"backdrop-blur": scaleBlur()
|
|
3330
|
+
}],
|
|
3331
|
+
"backdrop-brightness": [{
|
|
3332
|
+
"backdrop-brightness": [isNumber, isArbitraryVariable, isArbitraryValue]
|
|
3333
|
+
}],
|
|
3334
|
+
"backdrop-contrast": [{
|
|
3335
|
+
"backdrop-contrast": [isNumber, isArbitraryVariable, isArbitraryValue]
|
|
3336
|
+
}],
|
|
3337
|
+
"backdrop-grayscale": [{
|
|
3338
|
+
"backdrop-grayscale": ["", isNumber, isArbitraryVariable, isArbitraryValue]
|
|
3339
|
+
}],
|
|
3340
|
+
"backdrop-hue-rotate": [{
|
|
3341
|
+
"backdrop-hue-rotate": [isNumber, isArbitraryVariable, isArbitraryValue]
|
|
3342
|
+
}],
|
|
3343
|
+
"backdrop-invert": [{
|
|
3344
|
+
"backdrop-invert": ["", isNumber, isArbitraryVariable, isArbitraryValue]
|
|
3345
|
+
}],
|
|
3346
|
+
"backdrop-opacity": [{
|
|
3347
|
+
"backdrop-opacity": [isNumber, isArbitraryVariable, isArbitraryValue]
|
|
3348
|
+
}],
|
|
3349
|
+
"backdrop-saturate": [{
|
|
3350
|
+
"backdrop-saturate": [isNumber, isArbitraryVariable, isArbitraryValue]
|
|
3351
|
+
}],
|
|
3352
|
+
"backdrop-sepia": [{
|
|
3353
|
+
"backdrop-sepia": ["", isNumber, isArbitraryVariable, isArbitraryValue]
|
|
3354
|
+
}],
|
|
3355
|
+
"border-collapse": [{
|
|
3356
|
+
border: ["collapse", "separate"]
|
|
3357
|
+
}],
|
|
3358
|
+
"border-spacing": [{
|
|
3359
|
+
"border-spacing": scaleUnambiguousSpacing()
|
|
3360
|
+
}],
|
|
3361
|
+
"border-spacing-x": [{
|
|
3362
|
+
"border-spacing-x": scaleUnambiguousSpacing()
|
|
3363
|
+
}],
|
|
3364
|
+
"border-spacing-y": [{
|
|
3365
|
+
"border-spacing-y": scaleUnambiguousSpacing()
|
|
3366
|
+
}],
|
|
3367
|
+
"table-layout": [{
|
|
3368
|
+
table: ["auto", "fixed"]
|
|
3369
|
+
}],
|
|
3370
|
+
caption: [{
|
|
3371
|
+
caption: ["top", "bottom"]
|
|
3372
|
+
}],
|
|
3373
|
+
transition: [{
|
|
3374
|
+
transition: ["", "all", "colors", "opacity", "shadow", "transform", "none", isArbitraryVariable, isArbitraryValue]
|
|
3375
|
+
}],
|
|
3376
|
+
"transition-behavior": [{
|
|
3377
|
+
transition: ["normal", "discrete"]
|
|
3378
|
+
}],
|
|
3379
|
+
duration: [{
|
|
3380
|
+
duration: [isNumber, "initial", isArbitraryVariable, isArbitraryValue]
|
|
3381
|
+
}],
|
|
3382
|
+
ease: [{
|
|
3383
|
+
ease: ["linear", "initial", themeEase, isArbitraryVariable, isArbitraryValue]
|
|
3384
|
+
}],
|
|
3385
|
+
delay: [{
|
|
3386
|
+
delay: [isNumber, isArbitraryVariable, isArbitraryValue]
|
|
3387
|
+
}],
|
|
3388
|
+
animate: [{
|
|
3389
|
+
animate: ["none", themeAnimate, isArbitraryVariable, isArbitraryValue]
|
|
3390
|
+
}],
|
|
3391
|
+
backface: [{
|
|
3392
|
+
backface: ["hidden", "visible"]
|
|
3393
|
+
}],
|
|
3394
|
+
perspective: [{
|
|
3395
|
+
perspective: [themePerspective, isArbitraryVariable, isArbitraryValue]
|
|
3396
|
+
}],
|
|
3397
|
+
"perspective-origin": [{
|
|
3398
|
+
"perspective-origin": scalePositionWithArbitrary()
|
|
3399
|
+
}],
|
|
3400
|
+
rotate: [{
|
|
3401
|
+
rotate: scaleRotate()
|
|
3402
|
+
}],
|
|
3403
|
+
"rotate-x": [{
|
|
3404
|
+
"rotate-x": scaleRotate()
|
|
3405
|
+
}],
|
|
3406
|
+
"rotate-y": [{
|
|
3407
|
+
"rotate-y": scaleRotate()
|
|
3408
|
+
}],
|
|
3409
|
+
"rotate-z": [{
|
|
3410
|
+
"rotate-z": scaleRotate()
|
|
3411
|
+
}],
|
|
3412
|
+
scale: [{
|
|
3413
|
+
scale: scaleScale()
|
|
3414
|
+
}],
|
|
3415
|
+
"scale-x": [{
|
|
3416
|
+
"scale-x": scaleScale()
|
|
3417
|
+
}],
|
|
3418
|
+
"scale-y": [{
|
|
3419
|
+
"scale-y": scaleScale()
|
|
3420
|
+
}],
|
|
3421
|
+
"scale-z": [{
|
|
3422
|
+
"scale-z": scaleScale()
|
|
3423
|
+
}],
|
|
3424
|
+
"scale-3d": ["scale-3d"],
|
|
3425
|
+
skew: [{
|
|
3426
|
+
skew: scaleSkew()
|
|
3427
|
+
}],
|
|
3428
|
+
"skew-x": [{
|
|
3429
|
+
"skew-x": scaleSkew()
|
|
3430
|
+
}],
|
|
3431
|
+
"skew-y": [{
|
|
3432
|
+
"skew-y": scaleSkew()
|
|
3433
|
+
}],
|
|
3434
|
+
transform: [{
|
|
3435
|
+
transform: [isArbitraryVariable, isArbitraryValue, "", "none", "gpu", "cpu"]
|
|
3436
|
+
}],
|
|
3437
|
+
"transform-origin": [{
|
|
3438
|
+
origin: scalePositionWithArbitrary()
|
|
3439
|
+
}],
|
|
3440
|
+
"transform-style": [{
|
|
3441
|
+
transform: ["3d", "flat"]
|
|
3442
|
+
}],
|
|
3443
|
+
translate: [{
|
|
3444
|
+
translate: scaleTranslate()
|
|
3445
|
+
}],
|
|
3446
|
+
"translate-x": [{
|
|
3447
|
+
"translate-x": scaleTranslate()
|
|
3448
|
+
}],
|
|
3449
|
+
"translate-y": [{
|
|
3450
|
+
"translate-y": scaleTranslate()
|
|
3451
|
+
}],
|
|
3452
|
+
"translate-z": [{
|
|
3453
|
+
"translate-z": scaleTranslate()
|
|
3454
|
+
}],
|
|
3455
|
+
"translate-none": ["translate-none"],
|
|
3456
|
+
accent: [{
|
|
3457
|
+
accent: scaleColor()
|
|
3458
|
+
}],
|
|
3459
|
+
appearance: [{
|
|
3460
|
+
appearance: ["none", "auto"]
|
|
3461
|
+
}],
|
|
3462
|
+
"caret-color": [{
|
|
3463
|
+
caret: scaleColor()
|
|
3464
|
+
}],
|
|
3465
|
+
"color-scheme": [{
|
|
3466
|
+
scheme: ["normal", "dark", "light", "light-dark", "only-dark", "only-light"]
|
|
3467
|
+
}],
|
|
3468
|
+
cursor: [{
|
|
3469
|
+
cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", isArbitraryVariable, isArbitraryValue]
|
|
3470
|
+
}],
|
|
3471
|
+
"field-sizing": [{
|
|
3472
|
+
"field-sizing": ["fixed", "content"]
|
|
3473
|
+
}],
|
|
3474
|
+
"pointer-events": [{
|
|
3475
|
+
"pointer-events": ["auto", "none"]
|
|
3476
|
+
}],
|
|
3477
|
+
resize: [{
|
|
3478
|
+
resize: ["none", "", "y", "x"]
|
|
3479
|
+
}],
|
|
3480
|
+
"scroll-behavior": [{
|
|
3481
|
+
scroll: ["auto", "smooth"]
|
|
3482
|
+
}],
|
|
3483
|
+
"scroll-m": [{
|
|
3484
|
+
"scroll-m": scaleUnambiguousSpacing()
|
|
3485
|
+
}],
|
|
3486
|
+
"scroll-mx": [{
|
|
3487
|
+
"scroll-mx": scaleUnambiguousSpacing()
|
|
3488
|
+
}],
|
|
3489
|
+
"scroll-my": [{
|
|
3490
|
+
"scroll-my": scaleUnambiguousSpacing()
|
|
3491
|
+
}],
|
|
3492
|
+
"scroll-ms": [{
|
|
3493
|
+
"scroll-ms": scaleUnambiguousSpacing()
|
|
3494
|
+
}],
|
|
3495
|
+
"scroll-me": [{
|
|
3496
|
+
"scroll-me": scaleUnambiguousSpacing()
|
|
3497
|
+
}],
|
|
3498
|
+
"scroll-mt": [{
|
|
3499
|
+
"scroll-mt": scaleUnambiguousSpacing()
|
|
3500
|
+
}],
|
|
3501
|
+
"scroll-mr": [{
|
|
3502
|
+
"scroll-mr": scaleUnambiguousSpacing()
|
|
3503
|
+
}],
|
|
3504
|
+
"scroll-mb": [{
|
|
3505
|
+
"scroll-mb": scaleUnambiguousSpacing()
|
|
3506
|
+
}],
|
|
3507
|
+
"scroll-ml": [{
|
|
3508
|
+
"scroll-ml": scaleUnambiguousSpacing()
|
|
3509
|
+
}],
|
|
3510
|
+
"scroll-p": [{
|
|
3511
|
+
"scroll-p": scaleUnambiguousSpacing()
|
|
3512
|
+
}],
|
|
3513
|
+
"scroll-px": [{
|
|
3514
|
+
"scroll-px": scaleUnambiguousSpacing()
|
|
3515
|
+
}],
|
|
3516
|
+
"scroll-py": [{
|
|
3517
|
+
"scroll-py": scaleUnambiguousSpacing()
|
|
3518
|
+
}],
|
|
3519
|
+
"scroll-ps": [{
|
|
3520
|
+
"scroll-ps": scaleUnambiguousSpacing()
|
|
3521
|
+
}],
|
|
3522
|
+
"scroll-pe": [{
|
|
3523
|
+
"scroll-pe": scaleUnambiguousSpacing()
|
|
3524
|
+
}],
|
|
3525
|
+
"scroll-pt": [{
|
|
3526
|
+
"scroll-pt": scaleUnambiguousSpacing()
|
|
3527
|
+
}],
|
|
3528
|
+
"scroll-pr": [{
|
|
3529
|
+
"scroll-pr": scaleUnambiguousSpacing()
|
|
3530
|
+
}],
|
|
3531
|
+
"scroll-pb": [{
|
|
3532
|
+
"scroll-pb": scaleUnambiguousSpacing()
|
|
3533
|
+
}],
|
|
3534
|
+
"scroll-pl": [{
|
|
3535
|
+
"scroll-pl": scaleUnambiguousSpacing()
|
|
3536
|
+
}],
|
|
3537
|
+
"snap-align": [{
|
|
3538
|
+
snap: ["start", "end", "center", "align-none"]
|
|
3539
|
+
}],
|
|
3540
|
+
"snap-stop": [{
|
|
3541
|
+
snap: ["normal", "always"]
|
|
3542
|
+
}],
|
|
3543
|
+
"snap-type": [{
|
|
3544
|
+
snap: ["none", "x", "y", "both"]
|
|
3545
|
+
}],
|
|
3546
|
+
"snap-strictness": [{
|
|
3547
|
+
snap: ["mandatory", "proximity"]
|
|
3548
|
+
}],
|
|
3549
|
+
touch: [{
|
|
3550
|
+
touch: ["auto", "none", "manipulation"]
|
|
3551
|
+
}],
|
|
3552
|
+
"touch-x": [{
|
|
3553
|
+
"touch-pan": ["x", "left", "right"]
|
|
3554
|
+
}],
|
|
3555
|
+
"touch-y": [{
|
|
3556
|
+
"touch-pan": ["y", "up", "down"]
|
|
3557
|
+
}],
|
|
3558
|
+
"touch-pz": ["touch-pinch-zoom"],
|
|
3559
|
+
select: [{
|
|
3560
|
+
select: ["none", "text", "all", "auto"]
|
|
3561
|
+
}],
|
|
3562
|
+
"will-change": [{
|
|
3563
|
+
"will-change": ["auto", "scroll", "contents", "transform", isArbitraryVariable, isArbitraryValue]
|
|
3564
|
+
}],
|
|
3565
|
+
fill: [{
|
|
3566
|
+
fill: ["none", ...scaleColor()]
|
|
3567
|
+
}],
|
|
3568
|
+
"stroke-w": [{
|
|
3569
|
+
stroke: [isNumber, isArbitraryVariableLength, isArbitraryLength, isArbitraryNumber]
|
|
3570
|
+
}],
|
|
3571
|
+
stroke: [{
|
|
3572
|
+
stroke: ["none", ...scaleColor()]
|
|
3573
|
+
}],
|
|
3574
|
+
"forced-color-adjust": [{
|
|
3575
|
+
"forced-color-adjust": ["auto", "none"]
|
|
3576
|
+
}]
|
|
3577
|
+
},
|
|
3578
|
+
conflictingClassGroups: {
|
|
3579
|
+
overflow: ["overflow-x", "overflow-y"],
|
|
3580
|
+
overscroll: ["overscroll-x", "overscroll-y"],
|
|
3581
|
+
inset: ["inset-x", "inset-y", "start", "end", "top", "right", "bottom", "left"],
|
|
3582
|
+
"inset-x": ["right", "left"],
|
|
3583
|
+
"inset-y": ["top", "bottom"],
|
|
3584
|
+
flex: ["basis", "grow", "shrink"],
|
|
3585
|
+
gap: ["gap-x", "gap-y"],
|
|
3586
|
+
p: ["px", "py", "ps", "pe", "pt", "pr", "pb", "pl"],
|
|
3587
|
+
px: ["pr", "pl"],
|
|
3588
|
+
py: ["pt", "pb"],
|
|
3589
|
+
m: ["mx", "my", "ms", "me", "mt", "mr", "mb", "ml"],
|
|
3590
|
+
mx: ["mr", "ml"],
|
|
3591
|
+
my: ["mt", "mb"],
|
|
3592
|
+
size: ["w", "h"],
|
|
3593
|
+
"font-size": ["leading"],
|
|
3594
|
+
"fvn-normal": ["fvn-ordinal", "fvn-slashed-zero", "fvn-figure", "fvn-spacing", "fvn-fraction"],
|
|
3595
|
+
"fvn-ordinal": ["fvn-normal"],
|
|
3596
|
+
"fvn-slashed-zero": ["fvn-normal"],
|
|
3597
|
+
"fvn-figure": ["fvn-normal"],
|
|
3598
|
+
"fvn-spacing": ["fvn-normal"],
|
|
3599
|
+
"fvn-fraction": ["fvn-normal"],
|
|
3600
|
+
"line-clamp": ["display", "overflow"],
|
|
3601
|
+
rounded: ["rounded-s", "rounded-e", "rounded-t", "rounded-r", "rounded-b", "rounded-l", "rounded-ss", "rounded-se", "rounded-ee", "rounded-es", "rounded-tl", "rounded-tr", "rounded-br", "rounded-bl"],
|
|
3602
|
+
"rounded-s": ["rounded-ss", "rounded-es"],
|
|
3603
|
+
"rounded-e": ["rounded-se", "rounded-ee"],
|
|
3604
|
+
"rounded-t": ["rounded-tl", "rounded-tr"],
|
|
3605
|
+
"rounded-r": ["rounded-tr", "rounded-br"],
|
|
3606
|
+
"rounded-b": ["rounded-br", "rounded-bl"],
|
|
3607
|
+
"rounded-l": ["rounded-tl", "rounded-bl"],
|
|
3608
|
+
"border-spacing": ["border-spacing-x", "border-spacing-y"],
|
|
3609
|
+
"border-w": ["border-w-x", "border-w-y", "border-w-s", "border-w-e", "border-w-t", "border-w-r", "border-w-b", "border-w-l"],
|
|
3610
|
+
"border-w-x": ["border-w-r", "border-w-l"],
|
|
3611
|
+
"border-w-y": ["border-w-t", "border-w-b"],
|
|
3612
|
+
"border-color": ["border-color-x", "border-color-y", "border-color-s", "border-color-e", "border-color-t", "border-color-r", "border-color-b", "border-color-l"],
|
|
3613
|
+
"border-color-x": ["border-color-r", "border-color-l"],
|
|
3614
|
+
"border-color-y": ["border-color-t", "border-color-b"],
|
|
3615
|
+
translate: ["translate-x", "translate-y", "translate-none"],
|
|
3616
|
+
"translate-none": ["translate", "translate-x", "translate-y", "translate-z"],
|
|
3617
|
+
"scroll-m": ["scroll-mx", "scroll-my", "scroll-ms", "scroll-me", "scroll-mt", "scroll-mr", "scroll-mb", "scroll-ml"],
|
|
3618
|
+
"scroll-mx": ["scroll-mr", "scroll-ml"],
|
|
3619
|
+
"scroll-my": ["scroll-mt", "scroll-mb"],
|
|
3620
|
+
"scroll-p": ["scroll-px", "scroll-py", "scroll-ps", "scroll-pe", "scroll-pt", "scroll-pr", "scroll-pb", "scroll-pl"],
|
|
3621
|
+
"scroll-px": ["scroll-pr", "scroll-pl"],
|
|
3622
|
+
"scroll-py": ["scroll-pt", "scroll-pb"],
|
|
3623
|
+
touch: ["touch-x", "touch-y", "touch-pz"],
|
|
3624
|
+
"touch-x": ["touch"],
|
|
3625
|
+
"touch-y": ["touch"],
|
|
3626
|
+
"touch-pz": ["touch"]
|
|
3627
|
+
},
|
|
3628
|
+
conflictingClassGroupModifiers: {
|
|
3629
|
+
"font-size": ["leading"]
|
|
3630
|
+
},
|
|
3631
|
+
orderSensitiveModifiers: ["*", "**", "after", "backdrop", "before", "details-content", "file", "first-letter", "first-line", "marker", "placeholder", "selection"]
|
|
3632
|
+
};
|
|
3633
|
+
};
|
|
3634
|
+
var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
|
|
3635
|
+
|
|
3636
|
+
// src/shared/utils.ts
|
|
3637
|
+
function cn(...inputs) {
|
|
3638
|
+
return twMerge(clsx(inputs));
|
|
3639
|
+
}
|
|
3640
|
+
function groupPages(pages) {
|
|
3641
|
+
const groups = new Map;
|
|
3642
|
+
for (const page of pages) {
|
|
3643
|
+
const groupName = page.group ?? null;
|
|
3644
|
+
if (!groups.has(groupName)) {
|
|
3645
|
+
groups.set(groupName, { name: groupName, pages: [] });
|
|
3646
|
+
}
|
|
3647
|
+
groups.get(groupName).pages.push({
|
|
3648
|
+
slug: page.slug,
|
|
3649
|
+
title: page.title,
|
|
3650
|
+
icon: page.icon
|
|
3651
|
+
});
|
|
3652
|
+
}
|
|
3653
|
+
return Array.from(groups.values()).sort((a, b) => {
|
|
3654
|
+
if (a.name === null)
|
|
3655
|
+
return -1;
|
|
3656
|
+
if (b.name === null)
|
|
3657
|
+
return 1;
|
|
3658
|
+
return a.name.localeCompare(b.name);
|
|
3659
|
+
});
|
|
3660
|
+
}
|
|
3661
|
+
function getNestedError(errors, path) {
|
|
3662
|
+
const parts = path.split(".");
|
|
3663
|
+
let current = errors;
|
|
3664
|
+
for (const part of parts) {
|
|
3665
|
+
if (current && typeof current === "object" && part in current) {
|
|
3666
|
+
current = current[part];
|
|
3667
|
+
} else {
|
|
3668
|
+
return;
|
|
3669
|
+
}
|
|
3670
|
+
}
|
|
3671
|
+
return current;
|
|
3672
|
+
}
|
|
3673
|
+
function flattenValue(key, value, result = []) {
|
|
3674
|
+
if (value === null || value === undefined) {
|
|
3675
|
+
return result;
|
|
3676
|
+
}
|
|
3677
|
+
if (Array.isArray(value)) {
|
|
3678
|
+
value.forEach((item, index) => {
|
|
3679
|
+
flattenValue(`${key}[${index}]`, item, result);
|
|
3680
|
+
});
|
|
3681
|
+
} else if (typeof value === "object") {
|
|
3682
|
+
for (const [subKey, subValue] of Object.entries(value)) {
|
|
3683
|
+
flattenValue(`${key}.${subKey}`, subValue, result);
|
|
3684
|
+
}
|
|
3685
|
+
} else {
|
|
3686
|
+
result.push([key, String(value)]);
|
|
3687
|
+
}
|
|
3688
|
+
return result;
|
|
3689
|
+
}
|
|
3690
|
+
function groupFields(fields) {
|
|
3691
|
+
const groups = new Map;
|
|
3692
|
+
for (const field of fields) {
|
|
3693
|
+
const groupName = field.meta.group ?? null;
|
|
3694
|
+
if (!groups.has(groupName)) {
|
|
3695
|
+
groups.set(groupName, { name: groupName, fields: [] });
|
|
3696
|
+
}
|
|
3697
|
+
groups.get(groupName).fields.push(field);
|
|
3698
|
+
}
|
|
3699
|
+
return Array.from(groups.values()).sort((a, b) => {
|
|
3700
|
+
if (a.name === null)
|
|
3701
|
+
return -1;
|
|
3702
|
+
if (b.name === null)
|
|
3703
|
+
return 1;
|
|
3704
|
+
return a.name.localeCompare(b.name);
|
|
3705
|
+
});
|
|
3706
|
+
}
|
|
3707
|
+
|
|
3708
|
+
// src/components/CmsField.tsx
|
|
3709
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
3710
|
+
var defaultInputClass = "w-full px-4 py-2.5 text-sm bg-white border border-neutral-200 text-neutral-900 placeholder:text-neutral-300 outline-none hover:border-neutral-300 focus:border-neutral-900 transition-colors";
|
|
3711
|
+
var defaultTextareaClass = cn(defaultInputClass, "min-h-[120px] resize-y py-3");
|
|
3712
|
+
var defaultSelectClass = "w-full px-4 py-2.5 text-sm bg-white border border-neutral-200 text-neutral-900 outline-none hover:border-neutral-300 focus:border-neutral-900 transition-colors appearance-none cursor-pointer";
|
|
3713
|
+
var defaultLabelClass = "text-xs font-medium uppercase tracking-widest text-neutral-400 mb-3 block";
|
|
3714
|
+
var defaultErrorClass = "text-xs mt-2 text-red-600";
|
|
3715
|
+
var defaultHelpClass = "text-xs mt-2 text-neutral-400";
|
|
3716
|
+
var defaultCheckboxClass = "h-4 w-4 border border-neutral-300 bg-transparent focus:ring-0 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 transition-colors cursor-pointer accent-neutral-900";
|
|
3717
|
+
function CmsField({
|
|
3718
|
+
name,
|
|
3719
|
+
label,
|
|
3720
|
+
type = "text",
|
|
3721
|
+
placeholder,
|
|
3722
|
+
helpText,
|
|
3723
|
+
options = [],
|
|
3724
|
+
rows = 4,
|
|
3725
|
+
required = false,
|
|
3726
|
+
disabled = false,
|
|
3727
|
+
className = "space-y-1",
|
|
3728
|
+
inputClassName,
|
|
3729
|
+
labelClassName,
|
|
3730
|
+
errorClassName,
|
|
3731
|
+
helpClassName
|
|
3732
|
+
}) {
|
|
3733
|
+
const {
|
|
3734
|
+
register,
|
|
3735
|
+
formState: { errors }
|
|
3736
|
+
} = useFormContext();
|
|
3737
|
+
const error = name.includes(".") ? getNestedError(errors, name) : errors[name];
|
|
3738
|
+
const errorMessage = error?.message;
|
|
3739
|
+
const inputId = `cms-field-${name.replace(/\./g, "-")}`;
|
|
3740
|
+
const registerOptions = type === "number" ? { valueAsNumber: true } : undefined;
|
|
3741
|
+
const commonProps = {
|
|
3742
|
+
id: inputId,
|
|
3743
|
+
placeholder,
|
|
3744
|
+
disabled,
|
|
3745
|
+
"aria-invalid": !!error,
|
|
3746
|
+
"aria-describedby": errorMessage ? `${inputId}-error` : helpText ? `${inputId}-help` : undefined,
|
|
3747
|
+
...register(name, registerOptions)
|
|
3748
|
+
};
|
|
3749
|
+
const resolvedInputClass = inputClassName ?? (type === "textarea" ? defaultTextareaClass : type === "select" ? defaultSelectClass : defaultInputClass);
|
|
3750
|
+
const errorBorderClass = errorMessage ? "border-red-400 focus:border-red-600" : "";
|
|
3751
|
+
return /* @__PURE__ */ jsxs2("div", {
|
|
3752
|
+
className,
|
|
3753
|
+
children: [
|
|
3754
|
+
/* @__PURE__ */ jsxs2("label", {
|
|
3755
|
+
htmlFor: inputId,
|
|
3756
|
+
className: labelClassName ?? defaultLabelClass,
|
|
3757
|
+
children: [
|
|
3758
|
+
label,
|
|
3759
|
+
required && /* @__PURE__ */ jsx2("span", {
|
|
3760
|
+
className: "text-red-500 ml-0.5",
|
|
3761
|
+
"aria-hidden": "true",
|
|
3762
|
+
children: "*"
|
|
3763
|
+
})
|
|
3764
|
+
]
|
|
3765
|
+
}),
|
|
3766
|
+
/* @__PURE__ */ jsx2("div", {
|
|
3767
|
+
className: "relative",
|
|
3768
|
+
children: type === "textarea" ? /* @__PURE__ */ jsx2("textarea", {
|
|
3769
|
+
...commonProps,
|
|
3770
|
+
rows,
|
|
3771
|
+
className: cn(resolvedInputClass, errorBorderClass)
|
|
3772
|
+
}) : type === "select" ? /* @__PURE__ */ jsxs2("div", {
|
|
3773
|
+
className: "relative",
|
|
3774
|
+
children: [
|
|
3775
|
+
/* @__PURE__ */ jsxs2("select", {
|
|
3776
|
+
...commonProps,
|
|
3777
|
+
className: cn(resolvedInputClass, errorBorderClass),
|
|
3778
|
+
children: [
|
|
3779
|
+
/* @__PURE__ */ jsx2("option", {
|
|
3780
|
+
value: "",
|
|
3781
|
+
className: "text-neutral-400",
|
|
3782
|
+
children: "Select..."
|
|
3783
|
+
}),
|
|
3784
|
+
options.map((opt) => /* @__PURE__ */ jsx2("option", {
|
|
3785
|
+
value: opt.value,
|
|
3786
|
+
children: opt.label
|
|
3787
|
+
}, opt.value))
|
|
3788
|
+
]
|
|
3789
|
+
}),
|
|
3790
|
+
/* @__PURE__ */ jsx2("div", {
|
|
3791
|
+
className: "pointer-events-none absolute inset-y-0 right-0 flex items-center text-neutral-400",
|
|
3792
|
+
children: /* @__PURE__ */ jsx2("svg", {
|
|
3793
|
+
className: "h-4 w-4",
|
|
3794
|
+
fill: "none",
|
|
3795
|
+
stroke: "currentColor",
|
|
3796
|
+
viewBox: "0 0 24 24",
|
|
3797
|
+
children: /* @__PURE__ */ jsx2("path", {
|
|
3798
|
+
strokeLinecap: "round",
|
|
3799
|
+
strokeLinejoin: "round",
|
|
3800
|
+
strokeWidth: "1.5",
|
|
3801
|
+
d: "M19 9l-7 7-7-7"
|
|
3802
|
+
})
|
|
3803
|
+
})
|
|
3804
|
+
})
|
|
3805
|
+
]
|
|
3806
|
+
}) : /* @__PURE__ */ jsx2("input", {
|
|
3807
|
+
...commonProps,
|
|
3808
|
+
type,
|
|
3809
|
+
inputMode: type === "number" ? "numeric" : undefined,
|
|
3810
|
+
className: cn(resolvedInputClass, errorBorderClass)
|
|
3811
|
+
})
|
|
3812
|
+
}),
|
|
3813
|
+
helpText && !errorMessage && /* @__PURE__ */ jsx2("p", {
|
|
3814
|
+
id: `${inputId}-help`,
|
|
3815
|
+
className: helpClassName ?? defaultHelpClass,
|
|
3816
|
+
children: helpText
|
|
3817
|
+
}),
|
|
3818
|
+
errorMessage && /* @__PURE__ */ jsx2("p", {
|
|
3819
|
+
id: `${inputId}-error`,
|
|
3820
|
+
role: "alert",
|
|
3821
|
+
className: errorClassName ?? defaultErrorClass,
|
|
3822
|
+
children: errorMessage
|
|
3823
|
+
})
|
|
3824
|
+
]
|
|
3825
|
+
});
|
|
3826
|
+
}
|
|
3827
|
+
function CmsHiddenField({
|
|
3828
|
+
name,
|
|
3829
|
+
value
|
|
3830
|
+
}) {
|
|
3831
|
+
return /* @__PURE__ */ jsx2("input", {
|
|
3832
|
+
type: "hidden",
|
|
3833
|
+
name,
|
|
3834
|
+
value
|
|
3835
|
+
});
|
|
3836
|
+
}
|
|
3837
|
+
function CmsCheckbox({
|
|
3838
|
+
name,
|
|
3839
|
+
label,
|
|
3840
|
+
helpText,
|
|
3841
|
+
disabled = false,
|
|
3842
|
+
className = "space-y-2",
|
|
3843
|
+
inputClassName,
|
|
3844
|
+
labelClassName,
|
|
3845
|
+
errorClassName,
|
|
3846
|
+
helpClassName
|
|
3847
|
+
}) {
|
|
3848
|
+
const {
|
|
3849
|
+
register,
|
|
3850
|
+
formState: { errors }
|
|
3851
|
+
} = useFormContext();
|
|
3852
|
+
const error = name.includes(".") ? getNestedError(errors, name) : errors[name];
|
|
3853
|
+
const errorMessage = error?.message;
|
|
3854
|
+
const inputId = `cms-checkbox-${name.replace(/\./g, "-")}`;
|
|
3855
|
+
return /* @__PURE__ */ jsxs2("div", {
|
|
3856
|
+
className,
|
|
3857
|
+
children: [
|
|
3858
|
+
/* @__PURE__ */ jsxs2("div", {
|
|
3859
|
+
className: "flex items-start gap-3",
|
|
3860
|
+
children: [
|
|
3861
|
+
/* @__PURE__ */ jsx2("div", {
|
|
3862
|
+
className: "flex h-5 items-center",
|
|
3863
|
+
children: /* @__PURE__ */ jsx2("input", {
|
|
3864
|
+
type: "checkbox",
|
|
3865
|
+
id: inputId,
|
|
3866
|
+
disabled,
|
|
3867
|
+
"aria-invalid": !!error,
|
|
3868
|
+
"aria-describedby": errorMessage ? `${inputId}-error` : undefined,
|
|
3869
|
+
className: inputClassName ?? defaultCheckboxClass,
|
|
3870
|
+
...register(name)
|
|
3871
|
+
})
|
|
3872
|
+
}),
|
|
3873
|
+
/* @__PURE__ */ jsxs2("div", {
|
|
3874
|
+
className: "space-y-1",
|
|
3875
|
+
children: [
|
|
3876
|
+
/* @__PURE__ */ jsx2("label", {
|
|
3877
|
+
htmlFor: inputId,
|
|
3878
|
+
className: labelClassName ?? "text-sm text-neutral-900 cursor-pointer",
|
|
3879
|
+
children: label
|
|
3880
|
+
}),
|
|
3881
|
+
helpText && /* @__PURE__ */ jsx2("p", {
|
|
3882
|
+
id: `${inputId}-help`,
|
|
3883
|
+
className: helpClassName ?? "text-xs text-neutral-400",
|
|
3884
|
+
children: helpText
|
|
3885
|
+
})
|
|
3886
|
+
]
|
|
3887
|
+
})
|
|
3888
|
+
]
|
|
3889
|
+
}),
|
|
3890
|
+
errorMessage && /* @__PURE__ */ jsx2("p", {
|
|
3891
|
+
id: `${inputId}-error`,
|
|
3892
|
+
role: "alert",
|
|
3893
|
+
className: errorClassName ?? defaultErrorClass,
|
|
3894
|
+
children: errorMessage
|
|
3895
|
+
})
|
|
3896
|
+
]
|
|
3897
|
+
});
|
|
3898
|
+
}
|
|
3899
|
+
|
|
3900
|
+
// src/components/CmsImagePickerModal.tsx
|
|
3901
|
+
import * as React3 from "react";
|
|
3902
|
+
import { jsx as jsx3, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
|
|
3903
|
+
function CmsImagePickerModal({
|
|
3904
|
+
storage,
|
|
3905
|
+
accept = "image/*",
|
|
3906
|
+
onSelect,
|
|
3907
|
+
onClose,
|
|
3908
|
+
currentValue
|
|
3909
|
+
}) {
|
|
3910
|
+
const langContext = useCmsLanguageOptional();
|
|
3911
|
+
const t = langContext?.t ?? ((key) => {
|
|
3912
|
+
const fallback = {
|
|
3913
|
+
replace: "Replace",
|
|
3914
|
+
remove: "Remove",
|
|
3915
|
+
clickToSelectImage: "Click to select image",
|
|
3916
|
+
selectImage: "Select Image",
|
|
3917
|
+
dragDropImages: "Drag & drop images",
|
|
3918
|
+
dropImagesHere: "Drop images here",
|
|
3919
|
+
or: "or",
|
|
3920
|
+
browse: "browse",
|
|
3921
|
+
library: "Library",
|
|
3922
|
+
loading: "Loading...",
|
|
3923
|
+
noImagesYet: "No images yet",
|
|
3924
|
+
imageSelected: "Image selected",
|
|
3925
|
+
noSelection: "No selection",
|
|
3926
|
+
cancel: "Cancel",
|
|
3927
|
+
select: "Select"
|
|
3928
|
+
};
|
|
3929
|
+
return fallback[key] ?? key;
|
|
3930
|
+
});
|
|
3931
|
+
const [images, setImages] = React3.useState([]);
|
|
3932
|
+
const [isLoading, setIsLoading] = React3.useState(true);
|
|
3933
|
+
const [isUploading, setIsUploading] = React3.useState(false);
|
|
3934
|
+
const [uploadProgress, setUploadProgress] = React3.useState([]);
|
|
3935
|
+
const [error, setError] = React3.useState(null);
|
|
3936
|
+
const [isDragging, setIsDragging] = React3.useState(false);
|
|
3937
|
+
const [selectedImage, setSelectedImage] = React3.useState(currentValue || null);
|
|
3938
|
+
const fileInputRef = React3.useRef(null);
|
|
3939
|
+
const dropZoneRef = React3.useRef(null);
|
|
3940
|
+
React3.useEffect(() => {
|
|
3941
|
+
if (storage?.listEndpoint) {
|
|
3942
|
+
fetchImages();
|
|
3943
|
+
} else {
|
|
3944
|
+
setIsLoading(false);
|
|
3945
|
+
}
|
|
3946
|
+
}, [storage?.listEndpoint]);
|
|
3947
|
+
const fetchImages = async () => {
|
|
3948
|
+
if (!storage?.listEndpoint)
|
|
3949
|
+
return;
|
|
3950
|
+
try {
|
|
3951
|
+
const response = await fetch(storage.listEndpoint);
|
|
3952
|
+
if (response.ok) {
|
|
3953
|
+
const data = await response.json();
|
|
3954
|
+
const sortedImages = (data.files || []).sort((a, b) => {
|
|
3955
|
+
const dateA = a.lastModified ? new Date(a.lastModified).getTime() : 0;
|
|
3956
|
+
const dateB = b.lastModified ? new Date(b.lastModified).getTime() : 0;
|
|
3957
|
+
return dateB - dateA;
|
|
3958
|
+
});
|
|
3959
|
+
setImages(sortedImages);
|
|
3960
|
+
}
|
|
3961
|
+
} catch (err) {
|
|
3962
|
+
console.error("[litecms] Failed to fetch images:", err);
|
|
3963
|
+
} finally {
|
|
3964
|
+
setIsLoading(false);
|
|
3965
|
+
}
|
|
3966
|
+
};
|
|
3967
|
+
const uploadFiles = async (files) => {
|
|
3968
|
+
if (!storage?.uploadEndpoint)
|
|
3969
|
+
return;
|
|
3970
|
+
const fileArray = Array.from(files).filter((f) => f.type.startsWith("image/"));
|
|
3971
|
+
if (fileArray.length === 0) {
|
|
3972
|
+
setError("Please select image files only");
|
|
3973
|
+
return;
|
|
3974
|
+
}
|
|
3975
|
+
setIsUploading(true);
|
|
3976
|
+
setError(null);
|
|
3977
|
+
setUploadProgress([]);
|
|
3978
|
+
const uploadedUrls = [];
|
|
3979
|
+
for (let i = 0;i < fileArray.length; i++) {
|
|
3980
|
+
const file = fileArray[i];
|
|
3981
|
+
setUploadProgress((prev) => [...prev, `Uploading ${file.name}...`]);
|
|
3982
|
+
try {
|
|
3983
|
+
const formData = new FormData;
|
|
3984
|
+
formData.append("file", file);
|
|
3985
|
+
const response = await fetch(storage.uploadEndpoint, {
|
|
3986
|
+
method: "POST",
|
|
3987
|
+
body: formData
|
|
3988
|
+
});
|
|
3989
|
+
if (!response.ok) {
|
|
3990
|
+
const errorData = await response.json().catch(() => ({}));
|
|
3991
|
+
throw new Error(errorData.error || `Failed to upload ${file.name}`);
|
|
3992
|
+
}
|
|
3993
|
+
const data = await response.json();
|
|
3994
|
+
uploadedUrls.push(data.url);
|
|
3995
|
+
setUploadProgress((prev) => prev.map((p, idx) => idx === i ? `✓ ${file.name}` : p));
|
|
3996
|
+
} catch (err) {
|
|
3997
|
+
console.error("[litecms] Upload error:", err);
|
|
3998
|
+
setUploadProgress((prev) => prev.map((p, idx) => idx === i ? `✗ ${file.name} failed` : p));
|
|
3999
|
+
}
|
|
4000
|
+
}
|
|
4001
|
+
setIsUploading(false);
|
|
4002
|
+
await fetchImages();
|
|
4003
|
+
if (uploadedUrls.length > 0) {
|
|
4004
|
+
setSelectedImage(uploadedUrls[uploadedUrls.length - 1]);
|
|
4005
|
+
}
|
|
4006
|
+
setTimeout(() => setUploadProgress([]), 2000);
|
|
4007
|
+
};
|
|
4008
|
+
const handleDragOver = (e) => {
|
|
4009
|
+
e.preventDefault();
|
|
4010
|
+
e.stopPropagation();
|
|
4011
|
+
setIsDragging(true);
|
|
4012
|
+
};
|
|
4013
|
+
const handleDragLeave = (e) => {
|
|
4014
|
+
e.preventDefault();
|
|
4015
|
+
e.stopPropagation();
|
|
4016
|
+
if (dropZoneRef.current && !dropZoneRef.current.contains(e.relatedTarget)) {
|
|
4017
|
+
setIsDragging(false);
|
|
4018
|
+
}
|
|
4019
|
+
};
|
|
4020
|
+
const handleDrop = (e) => {
|
|
4021
|
+
e.preventDefault();
|
|
4022
|
+
e.stopPropagation();
|
|
4023
|
+
setIsDragging(false);
|
|
4024
|
+
const files = e.dataTransfer.files;
|
|
4025
|
+
if (files.length > 0) {
|
|
4026
|
+
uploadFiles(files);
|
|
4027
|
+
}
|
|
4028
|
+
};
|
|
4029
|
+
const handleFileSelect = (e) => {
|
|
4030
|
+
const files = e.target.files;
|
|
4031
|
+
if (files && files.length > 0) {
|
|
4032
|
+
uploadFiles(files);
|
|
4033
|
+
}
|
|
4034
|
+
e.target.value = "";
|
|
4035
|
+
};
|
|
4036
|
+
const handleConfirm = () => {
|
|
4037
|
+
if (selectedImage) {
|
|
4038
|
+
onSelect(selectedImage);
|
|
4039
|
+
}
|
|
4040
|
+
};
|
|
4041
|
+
React3.useEffect(() => {
|
|
4042
|
+
const handleKeyDown = (e) => {
|
|
4043
|
+
if (e.key === "Escape") {
|
|
4044
|
+
onClose();
|
|
4045
|
+
}
|
|
4046
|
+
};
|
|
4047
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
4048
|
+
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
4049
|
+
}, [onClose]);
|
|
4050
|
+
return /* @__PURE__ */ jsx3("div", {
|
|
4051
|
+
className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60",
|
|
4052
|
+
onClick: (e) => e.target === e.currentTarget && onClose(),
|
|
4053
|
+
children: /* @__PURE__ */ jsxs3("div", {
|
|
4054
|
+
className: "w-full max-w-3xl max-h-[85vh] flex flex-col bg-white border border-neutral-200",
|
|
4055
|
+
children: [
|
|
4056
|
+
/* @__PURE__ */ jsxs3("div", {
|
|
4057
|
+
className: "flex items-center justify-between px-6 py-4 border-b border-neutral-200",
|
|
4058
|
+
children: [
|
|
4059
|
+
/* @__PURE__ */ jsx3("h2", {
|
|
4060
|
+
className: "text-sm font-medium tracking-wide text-neutral-900",
|
|
4061
|
+
children: t("selectImage")
|
|
4062
|
+
}),
|
|
4063
|
+
/* @__PURE__ */ jsx3("button", {
|
|
4064
|
+
type: "button",
|
|
4065
|
+
onClick: onClose,
|
|
4066
|
+
className: "text-neutral-400 hover:text-neutral-900 transition-colors cursor-pointer",
|
|
4067
|
+
children: /* @__PURE__ */ jsxs3("svg", {
|
|
4068
|
+
className: "w-5 h-5",
|
|
4069
|
+
viewBox: "0 0 24 24",
|
|
4070
|
+
fill: "none",
|
|
4071
|
+
stroke: "currentColor",
|
|
4072
|
+
strokeWidth: "1.5",
|
|
4073
|
+
children: [
|
|
4074
|
+
/* @__PURE__ */ jsx3("line", {
|
|
4075
|
+
x1: "18",
|
|
4076
|
+
y1: "6",
|
|
4077
|
+
x2: "6",
|
|
4078
|
+
y2: "18"
|
|
4079
|
+
}),
|
|
4080
|
+
/* @__PURE__ */ jsx3("line", {
|
|
4081
|
+
x1: "6",
|
|
4082
|
+
y1: "6",
|
|
4083
|
+
x2: "18",
|
|
4084
|
+
y2: "18"
|
|
4085
|
+
})
|
|
4086
|
+
]
|
|
4087
|
+
})
|
|
4088
|
+
})
|
|
4089
|
+
]
|
|
4090
|
+
}),
|
|
4091
|
+
/* @__PURE__ */ jsxs3("div", {
|
|
4092
|
+
ref: dropZoneRef,
|
|
4093
|
+
className: `mx-6 mt-6 border transition-colors ${isDragging ? "border-neutral-900 bg-neutral-50" : "border-neutral-200 border-dashed"}`,
|
|
4094
|
+
onDragOver: handleDragOver,
|
|
4095
|
+
onDragLeave: handleDragLeave,
|
|
4096
|
+
onDrop: handleDrop,
|
|
4097
|
+
children: [
|
|
4098
|
+
/* @__PURE__ */ jsx3("div", {
|
|
4099
|
+
className: "flex flex-col items-center justify-center py-8 px-4",
|
|
4100
|
+
children: isUploading ? /* @__PURE__ */ jsxs3(Fragment, {
|
|
4101
|
+
children: [
|
|
4102
|
+
/* @__PURE__ */ jsx3("svg", {
|
|
4103
|
+
className: "w-6 h-6 mb-2 animate-spin text-neutral-400",
|
|
4104
|
+
viewBox: "0 0 24 24",
|
|
4105
|
+
fill: "none",
|
|
4106
|
+
stroke: "currentColor",
|
|
4107
|
+
strokeWidth: "1.5",
|
|
4108
|
+
children: /* @__PURE__ */ jsx3("path", {
|
|
4109
|
+
d: "M21 12a9 9 0 1 1-6.219-8.56"
|
|
4110
|
+
})
|
|
4111
|
+
}),
|
|
4112
|
+
/* @__PURE__ */ jsx3("div", {
|
|
4113
|
+
className: "text-xs text-neutral-500 space-y-1",
|
|
4114
|
+
children: uploadProgress.map((p, i) => /* @__PURE__ */ jsx3("div", {
|
|
4115
|
+
children: p
|
|
4116
|
+
}, i))
|
|
4117
|
+
})
|
|
4118
|
+
]
|
|
4119
|
+
}) : /* @__PURE__ */ jsxs3(Fragment, {
|
|
4120
|
+
children: [
|
|
4121
|
+
/* @__PURE__ */ jsxs3("svg", {
|
|
4122
|
+
className: "w-6 h-6 mb-2 text-neutral-300",
|
|
4123
|
+
viewBox: "0 0 24 24",
|
|
4124
|
+
fill: "none",
|
|
4125
|
+
stroke: "currentColor",
|
|
4126
|
+
strokeWidth: "1",
|
|
4127
|
+
children: [
|
|
4128
|
+
/* @__PURE__ */ jsx3("path", {
|
|
4129
|
+
d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
|
|
4130
|
+
}),
|
|
4131
|
+
/* @__PURE__ */ jsx3("polyline", {
|
|
4132
|
+
points: "17 8 12 3 7 8"
|
|
4133
|
+
}),
|
|
4134
|
+
/* @__PURE__ */ jsx3("line", {
|
|
4135
|
+
x1: "12",
|
|
4136
|
+
y1: "3",
|
|
4137
|
+
x2: "12",
|
|
4138
|
+
y2: "15"
|
|
4139
|
+
})
|
|
4140
|
+
]
|
|
4141
|
+
}),
|
|
4142
|
+
/* @__PURE__ */ jsx3("span", {
|
|
4143
|
+
className: "text-sm text-neutral-500",
|
|
4144
|
+
children: isDragging ? t("dropImagesHere") : t("dragDropImages")
|
|
4145
|
+
}),
|
|
4146
|
+
/* @__PURE__ */ jsxs3("span", {
|
|
4147
|
+
className: "text-xs text-neutral-400 mt-1",
|
|
4148
|
+
children: [
|
|
4149
|
+
t("or"),
|
|
4150
|
+
" ",
|
|
4151
|
+
/* @__PURE__ */ jsx3("button", {
|
|
4152
|
+
type: "button",
|
|
4153
|
+
onClick: () => fileInputRef.current?.click(),
|
|
4154
|
+
className: "text-neutral-900 border-b border-neutral-900 cursor-pointer",
|
|
4155
|
+
children: t("browse")
|
|
4156
|
+
})
|
|
4157
|
+
]
|
|
4158
|
+
})
|
|
4159
|
+
]
|
|
4160
|
+
})
|
|
4161
|
+
}),
|
|
4162
|
+
/* @__PURE__ */ jsx3("input", {
|
|
4163
|
+
ref: fileInputRef,
|
|
4164
|
+
type: "file",
|
|
4165
|
+
accept,
|
|
4166
|
+
multiple: true,
|
|
4167
|
+
onChange: handleFileSelect,
|
|
4168
|
+
className: "sr-only"
|
|
4169
|
+
})
|
|
4170
|
+
]
|
|
4171
|
+
}),
|
|
4172
|
+
error && /* @__PURE__ */ jsx3("div", {
|
|
4173
|
+
className: "mx-6 mt-2 text-xs text-red-600",
|
|
4174
|
+
children: error
|
|
4175
|
+
}),
|
|
4176
|
+
/* @__PURE__ */ jsxs3("div", {
|
|
4177
|
+
className: "flex-1 overflow-y-auto px-6 py-6 min-h-0",
|
|
4178
|
+
children: [
|
|
4179
|
+
/* @__PURE__ */ jsx3("h3", {
|
|
4180
|
+
className: "text-xs font-medium uppercase tracking-widest text-neutral-400 mb-4",
|
|
4181
|
+
children: isLoading ? t("loading") : `${t("library")} (${images.length})`
|
|
4182
|
+
}),
|
|
4183
|
+
isLoading ? /* @__PURE__ */ jsx3("div", {
|
|
4184
|
+
className: "flex items-center justify-center py-12",
|
|
4185
|
+
children: /* @__PURE__ */ jsx3("svg", {
|
|
4186
|
+
className: "w-6 h-6 animate-spin text-neutral-400",
|
|
4187
|
+
viewBox: "0 0 24 24",
|
|
4188
|
+
fill: "none",
|
|
4189
|
+
stroke: "currentColor",
|
|
4190
|
+
strokeWidth: "1.5",
|
|
4191
|
+
children: /* @__PURE__ */ jsx3("path", {
|
|
4192
|
+
d: "M21 12a9 9 0 1 1-6.219-8.56"
|
|
4193
|
+
})
|
|
4194
|
+
})
|
|
4195
|
+
}) : images.length === 0 ? /* @__PURE__ */ jsx3("div", {
|
|
4196
|
+
className: "flex flex-col items-center justify-center py-12 text-neutral-400",
|
|
4197
|
+
children: /* @__PURE__ */ jsx3("span", {
|
|
4198
|
+
className: "text-sm",
|
|
4199
|
+
children: t("noImagesYet")
|
|
4200
|
+
})
|
|
4201
|
+
}) : /* @__PURE__ */ jsx3("div", {
|
|
4202
|
+
className: "grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-2",
|
|
4203
|
+
children: images.map((image) => /* @__PURE__ */ jsxs3("button", {
|
|
4204
|
+
type: "button",
|
|
4205
|
+
onClick: () => setSelectedImage(image.url),
|
|
4206
|
+
className: `relative aspect-square overflow-hidden transition-all cursor-pointer ${selectedImage === image.url ? "ring-2 ring-neutral-900 ring-offset-2" : "hover:opacity-80"}`,
|
|
4207
|
+
children: [
|
|
4208
|
+
/* @__PURE__ */ jsx3("img", {
|
|
4209
|
+
src: image.url,
|
|
4210
|
+
alt: image.key,
|
|
4211
|
+
className: "w-full h-full object-cover",
|
|
4212
|
+
loading: "lazy"
|
|
4213
|
+
}),
|
|
4214
|
+
selectedImage === image.url && /* @__PURE__ */ jsx3("div", {
|
|
4215
|
+
className: "absolute inset-0 flex items-center justify-center bg-black/30",
|
|
4216
|
+
children: /* @__PURE__ */ jsx3("svg", {
|
|
4217
|
+
className: "w-6 h-6 text-white",
|
|
4218
|
+
viewBox: "0 0 24 24",
|
|
4219
|
+
fill: "none",
|
|
4220
|
+
stroke: "currentColor",
|
|
4221
|
+
strokeWidth: "2",
|
|
4222
|
+
children: /* @__PURE__ */ jsx3("polyline", {
|
|
4223
|
+
points: "20 6 9 17 4 12"
|
|
4224
|
+
})
|
|
4225
|
+
})
|
|
4226
|
+
})
|
|
4227
|
+
]
|
|
4228
|
+
}, image.key))
|
|
4229
|
+
})
|
|
4230
|
+
]
|
|
4231
|
+
}),
|
|
4232
|
+
/* @__PURE__ */ jsxs3("div", {
|
|
4233
|
+
className: "flex items-center justify-between px-6 py-4 border-t border-neutral-200",
|
|
4234
|
+
children: [
|
|
4235
|
+
/* @__PURE__ */ jsx3("span", {
|
|
4236
|
+
className: "text-xs text-neutral-400",
|
|
4237
|
+
children: selectedImage ? t("imageSelected") : t("noSelection")
|
|
4238
|
+
}),
|
|
4239
|
+
/* @__PURE__ */ jsxs3("div", {
|
|
4240
|
+
className: "flex items-center gap-6",
|
|
4241
|
+
children: [
|
|
4242
|
+
/* @__PURE__ */ jsx3("button", {
|
|
4243
|
+
type: "button",
|
|
4244
|
+
onClick: onClose,
|
|
4245
|
+
className: "text-sm text-neutral-400 hover:text-neutral-900 transition-colors cursor-pointer",
|
|
4246
|
+
children: t("cancel")
|
|
4247
|
+
}),
|
|
4248
|
+
/* @__PURE__ */ jsxs3("button", {
|
|
4249
|
+
type: "button",
|
|
4250
|
+
onClick: handleConfirm,
|
|
4251
|
+
disabled: !selectedImage,
|
|
4252
|
+
className: "text-sm text-neutral-900 border-b border-neutral-900 pb-0.5 hover:pb-1 transition-all disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer",
|
|
4253
|
+
children: [
|
|
4254
|
+
t("select"),
|
|
4255
|
+
" →"
|
|
4256
|
+
]
|
|
4257
|
+
})
|
|
4258
|
+
]
|
|
4259
|
+
})
|
|
4260
|
+
]
|
|
4261
|
+
})
|
|
4262
|
+
]
|
|
4263
|
+
})
|
|
4264
|
+
});
|
|
4265
|
+
}
|
|
4266
|
+
|
|
4267
|
+
// src/components/CmsImageField.tsx
|
|
4268
|
+
import * as React4 from "react";
|
|
4269
|
+
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
4270
|
+
var defaultLabelClass2 = "text-xs font-medium uppercase tracking-widest text-neutral-400 mb-3 block";
|
|
4271
|
+
var defaultErrorClass2 = "text-xs mt-2 text-red-600";
|
|
4272
|
+
var defaultHelpClass2 = "text-xs mt-2 text-neutral-400";
|
|
4273
|
+
function CmsImageField({
|
|
4274
|
+
name,
|
|
4275
|
+
label,
|
|
4276
|
+
helpText,
|
|
4277
|
+
required = false,
|
|
4278
|
+
disabled = false,
|
|
4279
|
+
accept = "image/*",
|
|
4280
|
+
className = "space-y-1",
|
|
4281
|
+
labelClassName,
|
|
4282
|
+
errorClassName,
|
|
4283
|
+
helpClassName,
|
|
4284
|
+
storage
|
|
4285
|
+
}) {
|
|
4286
|
+
const {
|
|
4287
|
+
register,
|
|
4288
|
+
setValue,
|
|
4289
|
+
watch,
|
|
4290
|
+
formState: { errors }
|
|
4291
|
+
} = useFormContext();
|
|
4292
|
+
const [isModalOpen, setIsModalOpen] = React4.useState(false);
|
|
4293
|
+
const currentValue = watch(name);
|
|
4294
|
+
const error = errors[name];
|
|
4295
|
+
const errorMessage = error?.message;
|
|
4296
|
+
const inputId = `cms-image-${name.replace(/\./g, "-")}`;
|
|
4297
|
+
const langContext = useCmsLanguageOptional();
|
|
4298
|
+
const t = langContext?.t ?? ((key) => {
|
|
4299
|
+
const fallback = {
|
|
4300
|
+
replace: "Replace",
|
|
4301
|
+
remove: "Remove",
|
|
4302
|
+
clickToSelectImage: "Click to select image"
|
|
4303
|
+
};
|
|
4304
|
+
return fallback[key] ?? key;
|
|
4305
|
+
});
|
|
4306
|
+
const handleImageSelect = (url) => {
|
|
4307
|
+
setValue(name, url, {
|
|
4308
|
+
shouldValidate: true,
|
|
4309
|
+
shouldDirty: true
|
|
4310
|
+
});
|
|
4311
|
+
setIsModalOpen(false);
|
|
4312
|
+
};
|
|
4313
|
+
const handleClear = () => {
|
|
4314
|
+
setValue(name, "", { shouldValidate: true, shouldDirty: true });
|
|
4315
|
+
};
|
|
4316
|
+
return /* @__PURE__ */ jsxs4("div", {
|
|
4317
|
+
className,
|
|
4318
|
+
children: [
|
|
4319
|
+
/* @__PURE__ */ jsx4("input", {
|
|
4320
|
+
type: "hidden",
|
|
4321
|
+
...register(name)
|
|
4322
|
+
}),
|
|
4323
|
+
/* @__PURE__ */ jsxs4("label", {
|
|
4324
|
+
htmlFor: inputId,
|
|
4325
|
+
className: labelClassName ?? defaultLabelClass2,
|
|
4326
|
+
children: [
|
|
4327
|
+
label,
|
|
4328
|
+
required && /* @__PURE__ */ jsx4("span", {
|
|
4329
|
+
className: "text-red-500 ml-0.5",
|
|
4330
|
+
"aria-hidden": "true",
|
|
4331
|
+
children: "*"
|
|
4332
|
+
})
|
|
4333
|
+
]
|
|
4334
|
+
}),
|
|
4335
|
+
/* @__PURE__ */ jsx4("div", {
|
|
4336
|
+
className: "border border-neutral-200 bg-neutral-50",
|
|
4337
|
+
children: currentValue ? /* @__PURE__ */ jsxs4("div", {
|
|
4338
|
+
className: "relative group",
|
|
4339
|
+
children: [
|
|
4340
|
+
/* @__PURE__ */ jsx4("img", {
|
|
4341
|
+
src: currentValue,
|
|
4342
|
+
alt: `${label} preview`,
|
|
4343
|
+
className: "w-full h-48 object-cover"
|
|
4344
|
+
}),
|
|
4345
|
+
/* @__PURE__ */ jsxs4("div", {
|
|
4346
|
+
className: "absolute inset-0 flex items-center justify-center gap-4 opacity-0 group-hover:opacity-100 transition-opacity bg-black/50",
|
|
4347
|
+
children: [
|
|
4348
|
+
/* @__PURE__ */ jsx4("button", {
|
|
4349
|
+
type: "button",
|
|
4350
|
+
onClick: () => setIsModalOpen(true),
|
|
4351
|
+
disabled,
|
|
4352
|
+
className: "text-xs tracking-wide text-white border-b border-white pb-0.5 hover:pb-1 transition-all cursor-pointer",
|
|
4353
|
+
children: t("replace")
|
|
4354
|
+
}),
|
|
4355
|
+
/* @__PURE__ */ jsx4("button", {
|
|
4356
|
+
type: "button",
|
|
4357
|
+
onClick: handleClear,
|
|
4358
|
+
disabled,
|
|
4359
|
+
className: "text-xs tracking-wide text-white/70 hover:text-white transition-colors cursor-pointer",
|
|
4360
|
+
children: t("remove")
|
|
4361
|
+
})
|
|
4362
|
+
]
|
|
4363
|
+
})
|
|
4364
|
+
]
|
|
4365
|
+
}) : /* @__PURE__ */ jsxs4("div", {
|
|
4366
|
+
className: "flex flex-col items-center justify-center py-12 px-4 cursor-pointer transition-colors hover:bg-neutral-100",
|
|
4367
|
+
onClick: () => !disabled && setIsModalOpen(true),
|
|
4368
|
+
children: [
|
|
4369
|
+
/* @__PURE__ */ jsxs4("svg", {
|
|
4370
|
+
className: "w-8 h-8 mb-3 text-neutral-300",
|
|
4371
|
+
viewBox: "0 0 24 24",
|
|
4372
|
+
fill: "none",
|
|
4373
|
+
stroke: "currentColor",
|
|
4374
|
+
strokeWidth: "1",
|
|
4375
|
+
children: [
|
|
4376
|
+
/* @__PURE__ */ jsx4("rect", {
|
|
4377
|
+
x: "3",
|
|
4378
|
+
y: "3",
|
|
4379
|
+
width: "18",
|
|
4380
|
+
height: "18",
|
|
4381
|
+
rx: "0"
|
|
4382
|
+
}),
|
|
4383
|
+
/* @__PURE__ */ jsx4("circle", {
|
|
4384
|
+
cx: "8.5",
|
|
4385
|
+
cy: "8.5",
|
|
4386
|
+
r: "1.5"
|
|
4387
|
+
}),
|
|
4388
|
+
/* @__PURE__ */ jsx4("polyline", {
|
|
4389
|
+
points: "21 15 16 10 5 21"
|
|
4390
|
+
})
|
|
4391
|
+
]
|
|
4392
|
+
}),
|
|
4393
|
+
/* @__PURE__ */ jsx4("span", {
|
|
4394
|
+
className: "text-sm text-neutral-400",
|
|
4395
|
+
children: t("clickToSelectImage")
|
|
4396
|
+
})
|
|
4397
|
+
]
|
|
4398
|
+
})
|
|
4399
|
+
}),
|
|
4400
|
+
helpText && !errorMessage && /* @__PURE__ */ jsx4("p", {
|
|
4401
|
+
id: `${inputId}-help`,
|
|
4402
|
+
className: helpClassName ?? defaultHelpClass2,
|
|
4403
|
+
children: helpText
|
|
4404
|
+
}),
|
|
4405
|
+
errorMessage && /* @__PURE__ */ jsx4("p", {
|
|
4406
|
+
id: `${inputId}-error`,
|
|
4407
|
+
role: "alert",
|
|
4408
|
+
className: errorClassName ?? defaultErrorClass2,
|
|
4409
|
+
children: errorMessage
|
|
4410
|
+
}),
|
|
4411
|
+
isModalOpen && /* @__PURE__ */ jsx4(CmsImagePickerModal, {
|
|
4412
|
+
storage,
|
|
4413
|
+
accept,
|
|
4414
|
+
onSelect: handleImageSelect,
|
|
4415
|
+
onClose: () => setIsModalOpen(false),
|
|
4416
|
+
currentValue
|
|
4417
|
+
})
|
|
4418
|
+
]
|
|
4419
|
+
});
|
|
4420
|
+
}
|
|
4421
|
+
|
|
4422
|
+
export { get, set, FormProvider, appendErrors, useForm, detectBrowserLanguage, translate, CmsLanguageProvider, useCmsLanguage, useCmsLanguageOptional, CmsLanguageSelector, groupPages, flattenValue, groupFields, CmsField, CmsHiddenField, CmsCheckbox, CmsImagePickerModal, CmsImageField };
|