litecms 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +746 -7
- package/dist/admin/CmsAdminLanding.d.ts +89 -0
- package/dist/admin/CmsAdminLanding.d.ts.map +1 -0
- package/dist/admin/CmsAdminLayout.d.ts +26 -3
- package/dist/admin/CmsAdminLayout.d.ts.map +1 -1
- package/dist/admin/CmsAdminPage.d.ts.map +1 -1
- package/dist/admin/CmsBlogAdmin.d.ts +37 -0
- package/dist/admin/CmsBlogAdmin.d.ts.map +1 -0
- package/dist/admin/config.d.ts +32 -0
- package/dist/admin/config.d.ts.map +1 -1
- package/dist/admin/config.js +16 -0
- package/dist/admin/exports.d.ts +5 -2
- package/dist/admin/exports.d.ts.map +1 -1
- package/dist/admin/exports.js +1467 -30
- package/dist/admin/language.d.ts +53 -0
- package/dist/admin/language.d.ts.map +1 -0
- package/dist/components/CmsAutoForm.d.ts.map +1 -1
- package/dist/components/CmsForm.d.ts.map +1 -1
- package/dist/components/CmsImageField.d.ts +2 -1
- package/dist/components/CmsImageField.d.ts.map +1 -1
- package/dist/components/CmsImagePickerModal.d.ts +21 -0
- package/dist/components/CmsImagePickerModal.d.ts.map +1 -0
- package/dist/components/CmsSimpleForm.d.ts.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +51 -190
- package/dist/index-c9btr14k.js +4422 -0
- package/dist/index-szreq4v9.js +12 -0
- package/dist/index-wmd953zf.js +11423 -0
- package/dist/index.js +6 -2
- package/dist/schema/index.js +2 -0
- package/dist/server/index.d.ts +301 -0
- package/dist/server/index.d.ts.map +1 -1
- package/dist/server/index.js +2585 -1
- package/dist/storage/index.js +2 -0
- package/package.json +13 -3
- package/dist/domain/index.d.ts +0 -1
- package/dist/domain/index.d.ts.map +0 -1
- package/dist/stores/index.d.ts +0 -1
- package/dist/stores/index.d.ts.map +0 -1
|
@@ -0,0 +1,4422 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
// src/admin/language.tsx
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { jsxDEV } from "react/jsx-dev-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__ */ jsxDEV(LanguageContext.Provider, {
|
|
206
|
+
value,
|
|
207
|
+
children
|
|
208
|
+
}, undefined, false, undefined, this);
|
|
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__ */ jsxDEV("div", {
|
|
223
|
+
className: "flex items-center gap-2",
|
|
224
|
+
children: [
|
|
225
|
+
/* @__PURE__ */ jsxDEV("span", {
|
|
226
|
+
className: "text-xs tracking-wide text-neutral-400",
|
|
227
|
+
children: [
|
|
228
|
+
t("language"),
|
|
229
|
+
":"
|
|
230
|
+
]
|
|
231
|
+
}, undefined, true, undefined, this),
|
|
232
|
+
/* @__PURE__ */ jsxDEV("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__ */ jsxDEV("option", {
|
|
238
|
+
value: "en",
|
|
239
|
+
children: "EN"
|
|
240
|
+
}, undefined, false, undefined, this),
|
|
241
|
+
/* @__PURE__ */ jsxDEV("option", {
|
|
242
|
+
value: "de",
|
|
243
|
+
children: "DE"
|
|
244
|
+
}, undefined, false, undefined, this)
|
|
245
|
+
]
|
|
246
|
+
}, undefined, true, undefined, this)
|
|
247
|
+
]
|
|
248
|
+
}, undefined, true, undefined, this);
|
|
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 { jsxDEV as jsxDEV2 } from "react/jsx-dev-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__ */ jsxDEV2("div", {
|
|
3752
|
+
className,
|
|
3753
|
+
children: [
|
|
3754
|
+
/* @__PURE__ */ jsxDEV2("label", {
|
|
3755
|
+
htmlFor: inputId,
|
|
3756
|
+
className: labelClassName ?? defaultLabelClass,
|
|
3757
|
+
children: [
|
|
3758
|
+
label,
|
|
3759
|
+
required && /* @__PURE__ */ jsxDEV2("span", {
|
|
3760
|
+
className: "text-red-500 ml-0.5",
|
|
3761
|
+
"aria-hidden": "true",
|
|
3762
|
+
children: "*"
|
|
3763
|
+
}, undefined, false, undefined, this)
|
|
3764
|
+
]
|
|
3765
|
+
}, undefined, true, undefined, this),
|
|
3766
|
+
/* @__PURE__ */ jsxDEV2("div", {
|
|
3767
|
+
className: "relative",
|
|
3768
|
+
children: type === "textarea" ? /* @__PURE__ */ jsxDEV2("textarea", {
|
|
3769
|
+
...commonProps,
|
|
3770
|
+
rows,
|
|
3771
|
+
className: cn(resolvedInputClass, errorBorderClass)
|
|
3772
|
+
}, undefined, false, undefined, this) : type === "select" ? /* @__PURE__ */ jsxDEV2("div", {
|
|
3773
|
+
className: "relative",
|
|
3774
|
+
children: [
|
|
3775
|
+
/* @__PURE__ */ jsxDEV2("select", {
|
|
3776
|
+
...commonProps,
|
|
3777
|
+
className: cn(resolvedInputClass, errorBorderClass),
|
|
3778
|
+
children: [
|
|
3779
|
+
/* @__PURE__ */ jsxDEV2("option", {
|
|
3780
|
+
value: "",
|
|
3781
|
+
className: "text-neutral-400",
|
|
3782
|
+
children: "Select..."
|
|
3783
|
+
}, undefined, false, undefined, this),
|
|
3784
|
+
options.map((opt) => /* @__PURE__ */ jsxDEV2("option", {
|
|
3785
|
+
value: opt.value,
|
|
3786
|
+
children: opt.label
|
|
3787
|
+
}, opt.value, false, undefined, this))
|
|
3788
|
+
]
|
|
3789
|
+
}, undefined, true, undefined, this),
|
|
3790
|
+
/* @__PURE__ */ jsxDEV2("div", {
|
|
3791
|
+
className: "pointer-events-none absolute inset-y-0 right-0 flex items-center text-neutral-400",
|
|
3792
|
+
children: /* @__PURE__ */ jsxDEV2("svg", {
|
|
3793
|
+
className: "h-4 w-4",
|
|
3794
|
+
fill: "none",
|
|
3795
|
+
stroke: "currentColor",
|
|
3796
|
+
viewBox: "0 0 24 24",
|
|
3797
|
+
children: /* @__PURE__ */ jsxDEV2("path", {
|
|
3798
|
+
strokeLinecap: "round",
|
|
3799
|
+
strokeLinejoin: "round",
|
|
3800
|
+
strokeWidth: "1.5",
|
|
3801
|
+
d: "M19 9l-7 7-7-7"
|
|
3802
|
+
}, undefined, false, undefined, this)
|
|
3803
|
+
}, undefined, false, undefined, this)
|
|
3804
|
+
}, undefined, false, undefined, this)
|
|
3805
|
+
]
|
|
3806
|
+
}, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV2("input", {
|
|
3807
|
+
...commonProps,
|
|
3808
|
+
type,
|
|
3809
|
+
inputMode: type === "number" ? "numeric" : undefined,
|
|
3810
|
+
className: cn(resolvedInputClass, errorBorderClass)
|
|
3811
|
+
}, undefined, false, undefined, this)
|
|
3812
|
+
}, undefined, false, undefined, this),
|
|
3813
|
+
helpText && !errorMessage && /* @__PURE__ */ jsxDEV2("p", {
|
|
3814
|
+
id: `${inputId}-help`,
|
|
3815
|
+
className: helpClassName ?? defaultHelpClass,
|
|
3816
|
+
children: helpText
|
|
3817
|
+
}, undefined, false, undefined, this),
|
|
3818
|
+
errorMessage && /* @__PURE__ */ jsxDEV2("p", {
|
|
3819
|
+
id: `${inputId}-error`,
|
|
3820
|
+
role: "alert",
|
|
3821
|
+
className: errorClassName ?? defaultErrorClass,
|
|
3822
|
+
children: errorMessage
|
|
3823
|
+
}, undefined, false, undefined, this)
|
|
3824
|
+
]
|
|
3825
|
+
}, undefined, true, undefined, this);
|
|
3826
|
+
}
|
|
3827
|
+
function CmsHiddenField({
|
|
3828
|
+
name,
|
|
3829
|
+
value
|
|
3830
|
+
}) {
|
|
3831
|
+
return /* @__PURE__ */ jsxDEV2("input", {
|
|
3832
|
+
type: "hidden",
|
|
3833
|
+
name,
|
|
3834
|
+
value
|
|
3835
|
+
}, undefined, false, undefined, this);
|
|
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__ */ jsxDEV2("div", {
|
|
3856
|
+
className,
|
|
3857
|
+
children: [
|
|
3858
|
+
/* @__PURE__ */ jsxDEV2("div", {
|
|
3859
|
+
className: "flex items-start gap-3",
|
|
3860
|
+
children: [
|
|
3861
|
+
/* @__PURE__ */ jsxDEV2("div", {
|
|
3862
|
+
className: "flex h-5 items-center",
|
|
3863
|
+
children: /* @__PURE__ */ jsxDEV2("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
|
+
}, undefined, false, undefined, this)
|
|
3872
|
+
}, undefined, false, undefined, this),
|
|
3873
|
+
/* @__PURE__ */ jsxDEV2("div", {
|
|
3874
|
+
className: "space-y-1",
|
|
3875
|
+
children: [
|
|
3876
|
+
/* @__PURE__ */ jsxDEV2("label", {
|
|
3877
|
+
htmlFor: inputId,
|
|
3878
|
+
className: labelClassName ?? "text-sm text-neutral-900 cursor-pointer",
|
|
3879
|
+
children: label
|
|
3880
|
+
}, undefined, false, undefined, this),
|
|
3881
|
+
helpText && /* @__PURE__ */ jsxDEV2("p", {
|
|
3882
|
+
id: `${inputId}-help`,
|
|
3883
|
+
className: helpClassName ?? "text-xs text-neutral-400",
|
|
3884
|
+
children: helpText
|
|
3885
|
+
}, undefined, false, undefined, this)
|
|
3886
|
+
]
|
|
3887
|
+
}, undefined, true, undefined, this)
|
|
3888
|
+
]
|
|
3889
|
+
}, undefined, true, undefined, this),
|
|
3890
|
+
errorMessage && /* @__PURE__ */ jsxDEV2("p", {
|
|
3891
|
+
id: `${inputId}-error`,
|
|
3892
|
+
role: "alert",
|
|
3893
|
+
className: errorClassName ?? defaultErrorClass,
|
|
3894
|
+
children: errorMessage
|
|
3895
|
+
}, undefined, false, undefined, this)
|
|
3896
|
+
]
|
|
3897
|
+
}, undefined, true, undefined, this);
|
|
3898
|
+
}
|
|
3899
|
+
|
|
3900
|
+
// src/components/CmsImagePickerModal.tsx
|
|
3901
|
+
import * as React3 from "react";
|
|
3902
|
+
import { jsxDEV as jsxDEV3, Fragment } from "react/jsx-dev-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__ */ jsxDEV3("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__ */ jsxDEV3("div", {
|
|
4054
|
+
className: "w-full max-w-3xl max-h-[85vh] flex flex-col bg-white border border-neutral-200",
|
|
4055
|
+
children: [
|
|
4056
|
+
/* @__PURE__ */ jsxDEV3("div", {
|
|
4057
|
+
className: "flex items-center justify-between px-6 py-4 border-b border-neutral-200",
|
|
4058
|
+
children: [
|
|
4059
|
+
/* @__PURE__ */ jsxDEV3("h2", {
|
|
4060
|
+
className: "text-sm font-medium tracking-wide text-neutral-900",
|
|
4061
|
+
children: t("selectImage")
|
|
4062
|
+
}, undefined, false, undefined, this),
|
|
4063
|
+
/* @__PURE__ */ jsxDEV3("button", {
|
|
4064
|
+
type: "button",
|
|
4065
|
+
onClick: onClose,
|
|
4066
|
+
className: "text-neutral-400 hover:text-neutral-900 transition-colors cursor-pointer",
|
|
4067
|
+
children: /* @__PURE__ */ jsxDEV3("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__ */ jsxDEV3("line", {
|
|
4075
|
+
x1: "18",
|
|
4076
|
+
y1: "6",
|
|
4077
|
+
x2: "6",
|
|
4078
|
+
y2: "18"
|
|
4079
|
+
}, undefined, false, undefined, this),
|
|
4080
|
+
/* @__PURE__ */ jsxDEV3("line", {
|
|
4081
|
+
x1: "6",
|
|
4082
|
+
y1: "6",
|
|
4083
|
+
x2: "18",
|
|
4084
|
+
y2: "18"
|
|
4085
|
+
}, undefined, false, undefined, this)
|
|
4086
|
+
]
|
|
4087
|
+
}, undefined, true, undefined, this)
|
|
4088
|
+
}, undefined, false, undefined, this)
|
|
4089
|
+
]
|
|
4090
|
+
}, undefined, true, undefined, this),
|
|
4091
|
+
/* @__PURE__ */ jsxDEV3("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__ */ jsxDEV3("div", {
|
|
4099
|
+
className: "flex flex-col items-center justify-center py-8 px-4",
|
|
4100
|
+
children: isUploading ? /* @__PURE__ */ jsxDEV3(Fragment, {
|
|
4101
|
+
children: [
|
|
4102
|
+
/* @__PURE__ */ jsxDEV3("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__ */ jsxDEV3("path", {
|
|
4109
|
+
d: "M21 12a9 9 0 1 1-6.219-8.56"
|
|
4110
|
+
}, undefined, false, undefined, this)
|
|
4111
|
+
}, undefined, false, undefined, this),
|
|
4112
|
+
/* @__PURE__ */ jsxDEV3("div", {
|
|
4113
|
+
className: "text-xs text-neutral-500 space-y-1",
|
|
4114
|
+
children: uploadProgress.map((p, i) => /* @__PURE__ */ jsxDEV3("div", {
|
|
4115
|
+
children: p
|
|
4116
|
+
}, i, false, undefined, this))
|
|
4117
|
+
}, undefined, false, undefined, this)
|
|
4118
|
+
]
|
|
4119
|
+
}, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV3(Fragment, {
|
|
4120
|
+
children: [
|
|
4121
|
+
/* @__PURE__ */ jsxDEV3("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__ */ jsxDEV3("path", {
|
|
4129
|
+
d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
|
|
4130
|
+
}, undefined, false, undefined, this),
|
|
4131
|
+
/* @__PURE__ */ jsxDEV3("polyline", {
|
|
4132
|
+
points: "17 8 12 3 7 8"
|
|
4133
|
+
}, undefined, false, undefined, this),
|
|
4134
|
+
/* @__PURE__ */ jsxDEV3("line", {
|
|
4135
|
+
x1: "12",
|
|
4136
|
+
y1: "3",
|
|
4137
|
+
x2: "12",
|
|
4138
|
+
y2: "15"
|
|
4139
|
+
}, undefined, false, undefined, this)
|
|
4140
|
+
]
|
|
4141
|
+
}, undefined, true, undefined, this),
|
|
4142
|
+
/* @__PURE__ */ jsxDEV3("span", {
|
|
4143
|
+
className: "text-sm text-neutral-500",
|
|
4144
|
+
children: isDragging ? t("dropImagesHere") : t("dragDropImages")
|
|
4145
|
+
}, undefined, false, undefined, this),
|
|
4146
|
+
/* @__PURE__ */ jsxDEV3("span", {
|
|
4147
|
+
className: "text-xs text-neutral-400 mt-1",
|
|
4148
|
+
children: [
|
|
4149
|
+
t("or"),
|
|
4150
|
+
" ",
|
|
4151
|
+
/* @__PURE__ */ jsxDEV3("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
|
+
}, undefined, false, undefined, this)
|
|
4157
|
+
]
|
|
4158
|
+
}, undefined, true, undefined, this)
|
|
4159
|
+
]
|
|
4160
|
+
}, undefined, true, undefined, this)
|
|
4161
|
+
}, undefined, false, undefined, this),
|
|
4162
|
+
/* @__PURE__ */ jsxDEV3("input", {
|
|
4163
|
+
ref: fileInputRef,
|
|
4164
|
+
type: "file",
|
|
4165
|
+
accept,
|
|
4166
|
+
multiple: true,
|
|
4167
|
+
onChange: handleFileSelect,
|
|
4168
|
+
className: "sr-only"
|
|
4169
|
+
}, undefined, false, undefined, this)
|
|
4170
|
+
]
|
|
4171
|
+
}, undefined, true, undefined, this),
|
|
4172
|
+
error && /* @__PURE__ */ jsxDEV3("div", {
|
|
4173
|
+
className: "mx-6 mt-2 text-xs text-red-600",
|
|
4174
|
+
children: error
|
|
4175
|
+
}, undefined, false, undefined, this),
|
|
4176
|
+
/* @__PURE__ */ jsxDEV3("div", {
|
|
4177
|
+
className: "flex-1 overflow-y-auto px-6 py-6 min-h-0",
|
|
4178
|
+
children: [
|
|
4179
|
+
/* @__PURE__ */ jsxDEV3("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
|
+
}, undefined, false, undefined, this),
|
|
4183
|
+
isLoading ? /* @__PURE__ */ jsxDEV3("div", {
|
|
4184
|
+
className: "flex items-center justify-center py-12",
|
|
4185
|
+
children: /* @__PURE__ */ jsxDEV3("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__ */ jsxDEV3("path", {
|
|
4192
|
+
d: "M21 12a9 9 0 1 1-6.219-8.56"
|
|
4193
|
+
}, undefined, false, undefined, this)
|
|
4194
|
+
}, undefined, false, undefined, this)
|
|
4195
|
+
}, undefined, false, undefined, this) : images.length === 0 ? /* @__PURE__ */ jsxDEV3("div", {
|
|
4196
|
+
className: "flex flex-col items-center justify-center py-12 text-neutral-400",
|
|
4197
|
+
children: /* @__PURE__ */ jsxDEV3("span", {
|
|
4198
|
+
className: "text-sm",
|
|
4199
|
+
children: t("noImagesYet")
|
|
4200
|
+
}, undefined, false, undefined, this)
|
|
4201
|
+
}, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3("div", {
|
|
4202
|
+
className: "grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-2",
|
|
4203
|
+
children: images.map((image) => /* @__PURE__ */ jsxDEV3("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__ */ jsxDEV3("img", {
|
|
4209
|
+
src: image.url,
|
|
4210
|
+
alt: image.key,
|
|
4211
|
+
className: "w-full h-full object-cover",
|
|
4212
|
+
loading: "lazy"
|
|
4213
|
+
}, undefined, false, undefined, this),
|
|
4214
|
+
selectedImage === image.url && /* @__PURE__ */ jsxDEV3("div", {
|
|
4215
|
+
className: "absolute inset-0 flex items-center justify-center bg-black/30",
|
|
4216
|
+
children: /* @__PURE__ */ jsxDEV3("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__ */ jsxDEV3("polyline", {
|
|
4223
|
+
points: "20 6 9 17 4 12"
|
|
4224
|
+
}, undefined, false, undefined, this)
|
|
4225
|
+
}, undefined, false, undefined, this)
|
|
4226
|
+
}, undefined, false, undefined, this)
|
|
4227
|
+
]
|
|
4228
|
+
}, image.key, true, undefined, this))
|
|
4229
|
+
}, undefined, false, undefined, this)
|
|
4230
|
+
]
|
|
4231
|
+
}, undefined, true, undefined, this),
|
|
4232
|
+
/* @__PURE__ */ jsxDEV3("div", {
|
|
4233
|
+
className: "flex items-center justify-between px-6 py-4 border-t border-neutral-200",
|
|
4234
|
+
children: [
|
|
4235
|
+
/* @__PURE__ */ jsxDEV3("span", {
|
|
4236
|
+
className: "text-xs text-neutral-400",
|
|
4237
|
+
children: selectedImage ? t("imageSelected") : t("noSelection")
|
|
4238
|
+
}, undefined, false, undefined, this),
|
|
4239
|
+
/* @__PURE__ */ jsxDEV3("div", {
|
|
4240
|
+
className: "flex items-center gap-6",
|
|
4241
|
+
children: [
|
|
4242
|
+
/* @__PURE__ */ jsxDEV3("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
|
+
}, undefined, false, undefined, this),
|
|
4248
|
+
/* @__PURE__ */ jsxDEV3("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
|
+
}, undefined, true, undefined, this)
|
|
4258
|
+
]
|
|
4259
|
+
}, undefined, true, undefined, this)
|
|
4260
|
+
]
|
|
4261
|
+
}, undefined, true, undefined, this)
|
|
4262
|
+
]
|
|
4263
|
+
}, undefined, true, undefined, this)
|
|
4264
|
+
}, undefined, false, undefined, this);
|
|
4265
|
+
}
|
|
4266
|
+
|
|
4267
|
+
// src/components/CmsImageField.tsx
|
|
4268
|
+
import * as React4 from "react";
|
|
4269
|
+
import { jsxDEV as jsxDEV4 } from "react/jsx-dev-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__ */ jsxDEV4("div", {
|
|
4317
|
+
className,
|
|
4318
|
+
children: [
|
|
4319
|
+
/* @__PURE__ */ jsxDEV4("input", {
|
|
4320
|
+
type: "hidden",
|
|
4321
|
+
...register(name)
|
|
4322
|
+
}, undefined, false, undefined, this),
|
|
4323
|
+
/* @__PURE__ */ jsxDEV4("label", {
|
|
4324
|
+
htmlFor: inputId,
|
|
4325
|
+
className: labelClassName ?? defaultLabelClass2,
|
|
4326
|
+
children: [
|
|
4327
|
+
label,
|
|
4328
|
+
required && /* @__PURE__ */ jsxDEV4("span", {
|
|
4329
|
+
className: "text-red-500 ml-0.5",
|
|
4330
|
+
"aria-hidden": "true",
|
|
4331
|
+
children: "*"
|
|
4332
|
+
}, undefined, false, undefined, this)
|
|
4333
|
+
]
|
|
4334
|
+
}, undefined, true, undefined, this),
|
|
4335
|
+
/* @__PURE__ */ jsxDEV4("div", {
|
|
4336
|
+
className: "border border-neutral-200 bg-neutral-50",
|
|
4337
|
+
children: currentValue ? /* @__PURE__ */ jsxDEV4("div", {
|
|
4338
|
+
className: "relative group",
|
|
4339
|
+
children: [
|
|
4340
|
+
/* @__PURE__ */ jsxDEV4("img", {
|
|
4341
|
+
src: currentValue,
|
|
4342
|
+
alt: `${label} preview`,
|
|
4343
|
+
className: "w-full h-48 object-cover"
|
|
4344
|
+
}, undefined, false, undefined, this),
|
|
4345
|
+
/* @__PURE__ */ jsxDEV4("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__ */ jsxDEV4("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
|
+
}, undefined, false, undefined, this),
|
|
4355
|
+
/* @__PURE__ */ jsxDEV4("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
|
+
}, undefined, false, undefined, this)
|
|
4362
|
+
]
|
|
4363
|
+
}, undefined, true, undefined, this)
|
|
4364
|
+
]
|
|
4365
|
+
}, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV4("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__ */ jsxDEV4("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__ */ jsxDEV4("rect", {
|
|
4377
|
+
x: "3",
|
|
4378
|
+
y: "3",
|
|
4379
|
+
width: "18",
|
|
4380
|
+
height: "18",
|
|
4381
|
+
rx: "0"
|
|
4382
|
+
}, undefined, false, undefined, this),
|
|
4383
|
+
/* @__PURE__ */ jsxDEV4("circle", {
|
|
4384
|
+
cx: "8.5",
|
|
4385
|
+
cy: "8.5",
|
|
4386
|
+
r: "1.5"
|
|
4387
|
+
}, undefined, false, undefined, this),
|
|
4388
|
+
/* @__PURE__ */ jsxDEV4("polyline", {
|
|
4389
|
+
points: "21 15 16 10 5 21"
|
|
4390
|
+
}, undefined, false, undefined, this)
|
|
4391
|
+
]
|
|
4392
|
+
}, undefined, true, undefined, this),
|
|
4393
|
+
/* @__PURE__ */ jsxDEV4("span", {
|
|
4394
|
+
className: "text-sm text-neutral-400",
|
|
4395
|
+
children: t("clickToSelectImage")
|
|
4396
|
+
}, undefined, false, undefined, this)
|
|
4397
|
+
]
|
|
4398
|
+
}, undefined, true, undefined, this)
|
|
4399
|
+
}, undefined, false, undefined, this),
|
|
4400
|
+
helpText && !errorMessage && /* @__PURE__ */ jsxDEV4("p", {
|
|
4401
|
+
id: `${inputId}-help`,
|
|
4402
|
+
className: helpClassName ?? defaultHelpClass2,
|
|
4403
|
+
children: helpText
|
|
4404
|
+
}, undefined, false, undefined, this),
|
|
4405
|
+
errorMessage && /* @__PURE__ */ jsxDEV4("p", {
|
|
4406
|
+
id: `${inputId}-error`,
|
|
4407
|
+
role: "alert",
|
|
4408
|
+
className: errorClassName ?? defaultErrorClass2,
|
|
4409
|
+
children: errorMessage
|
|
4410
|
+
}, undefined, false, undefined, this),
|
|
4411
|
+
isModalOpen && /* @__PURE__ */ jsxDEV4(CmsImagePickerModal, {
|
|
4412
|
+
storage,
|
|
4413
|
+
accept,
|
|
4414
|
+
onSelect: handleImageSelect,
|
|
4415
|
+
onClose: () => setIsModalOpen(false),
|
|
4416
|
+
currentValue
|
|
4417
|
+
}, undefined, false, undefined, this)
|
|
4418
|
+
]
|
|
4419
|
+
}, undefined, true, undefined, this);
|
|
4420
|
+
}
|
|
4421
|
+
|
|
4422
|
+
export { get, set, FormProvider, appendErrors, useForm, detectBrowserLanguage, translate, CmsLanguageProvider, useCmsLanguage, useCmsLanguageOptional, CmsLanguageSelector, groupPages, flattenValue, groupFields, CmsField, CmsHiddenField, CmsCheckbox, CmsImagePickerModal, CmsImageField };
|