@mmlogic/components 0.1.9 → 0.1.11
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 +196 -61
- package/dist/cjs/format-DBr-GTvS.js +308 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mosterdcomponents.cjs.js +1 -1
- package/dist/cjs/mrd-boolean-field_16.cjs.entry.js +108 -117
- package/dist/cjs/mrd-table.cjs.entry.js +318 -62
- package/dist/collection/components/mrd-field/mrd-field.js +26 -2
- package/dist/collection/components/mrd-file-field/mrd-file-field.js +70 -2
- package/dist/collection/components/mrd-file-field/mrd-file-field.scss +13 -0
- package/dist/collection/components/mrd-form/mrd-form.js +28 -1
- package/dist/collection/components/mrd-image-field/mrd-image-field.js +71 -2
- package/dist/collection/components/mrd-image-field/mrd-image-field.scss +26 -2
- package/dist/collection/components/mrd-table/mrd-table.js +386 -62
- package/dist/collection/components/mrd-table/mrd-table.scss +388 -0
- package/dist/collection/dev/app.js +48 -4
- package/dist/collection/dev/sprites.svg +55 -0
- package/dist/collection/utils/i18n.js +144 -0
- package/dist/components/i18n.js +1 -1
- package/dist/components/mrd-field2.js +1 -1
- package/dist/components/mrd-file-field2.js +1 -1
- package/dist/components/mrd-form.js +1 -1
- package/dist/components/mrd-image-field2.js +1 -1
- package/dist/components/mrd-table.js +1 -1
- package/dist/esm/format-EzhfM0uw.js +299 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mosterdcomponents.js +1 -1
- package/dist/esm/mrd-boolean-field_16.entry.js +82 -91
- package/dist/esm/mrd-table.entry.js +318 -62
- package/dist/mosterdcomponents/mosterdcomponents.esm.js +1 -1
- package/dist/mosterdcomponents/p-27f6947a.entry.js +1 -0
- package/dist/mosterdcomponents/p-EzhfM0uw.js +1 -0
- package/dist/mosterdcomponents/p-ca5f9919.entry.js +1 -0
- package/dist/types/components/mrd-field/mrd-field.d.ts +5 -0
- package/dist/types/components/mrd-file-field/mrd-file-field.d.ts +10 -0
- package/dist/types/components/mrd-form/mrd-form.d.ts +5 -0
- package/dist/types/components/mrd-image-field/mrd-image-field.d.ts +10 -0
- package/dist/types/components/mrd-table/mrd-table.d.ts +52 -18
- package/dist/types/components.d.ts +53 -3
- package/dist/types/utils/cell-renderer.d.ts +27 -0
- package/package.json +1 -1
- package/dist/cjs/format-CDw-zie_.js +0 -82
- package/dist/esm/format-Dt-aHxkM.js +0 -74
- package/dist/mosterdcomponents/p-2a8cb2eb.entry.js +0 -1
- package/dist/mosterdcomponents/p-Dt-aHxkM.js +0 -1
- package/dist/mosterdcomponents/p-baf08615.entry.js +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-_tsCCkAi.js';
|
|
2
|
+
import { p as parseLocalizedNumber, t, d as formatNumber } from './format-EzhfM0uw.js';
|
|
2
3
|
import { ClientLayoutItemFieldDataType, ClientLayoutItemType, ClientLayoutItemRelationDisplayType, ClientLayoutItemRelationEditBehavior } from './index.js';
|
|
3
|
-
import { p as parseLocalizedNumber, d as formatNumber } from './format-Dt-aHxkM.js';
|
|
4
4
|
|
|
5
5
|
const mrdBooleanFieldScss = () => `.sc-mrd-boolean-field-h{display:block}.mrd-boolean-field.sc-mrd-boolean-field{display:flex;align-items:center;width:100%}.mrd-boolean-field__toggle-label.sc-mrd-boolean-field{display:flex;align-items:center;gap:var(--mrd-space-3);cursor:pointer;user-select:none}.mrd-boolean-field__checkbox.sc-mrd-boolean-field{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.mrd-boolean-field__checkbox.sc-mrd-boolean-field:checked+.mrd-boolean-field__toggle.sc-mrd-boolean-field{background-color:var(--mrd-color-primary)}.mrd-boolean-field__checkbox.sc-mrd-boolean-field:checked+.mrd-boolean-field__toggle.sc-mrd-boolean-field::after{transform:translateX(20px)}.mrd-boolean-field__checkbox.sc-mrd-boolean-field:focus+.mrd-boolean-field__toggle.sc-mrd-boolean-field{box-shadow:var(--mrd-shadow-focus)}.mrd-boolean-field__checkbox.sc-mrd-boolean-field:disabled+.mrd-boolean-field__toggle.sc-mrd-boolean-field{opacity:0.5;cursor:not-allowed}.mrd-boolean-field__toggle.sc-mrd-boolean-field{position:relative;display:inline-block;width:44px;height:24px;background-color:var(--mrd-color-neutral-300);border-radius:var(--mrd-border-radius-full);transition:background-color var(--mrd-transition);flex-shrink:0}.mrd-boolean-field__toggle.sc-mrd-boolean-field::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;background-color:var(--mrd-color-white);border-radius:50%;transition:transform var(--mrd-transition);box-shadow:var(--mrd-shadow-sm)}.mrd-boolean-field__text.sc-mrd-boolean-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-800)}.mrd-boolean-field__text--required.sc-mrd-boolean-field::after{content:' *';color:var(--mrd-color-danger)}`;
|
|
6
6
|
|
|
@@ -33,87 +33,6 @@ const MrdBooleanField = class {
|
|
|
33
33
|
};
|
|
34
34
|
MrdBooleanField.style = mrdBooleanFieldScss();
|
|
35
35
|
|
|
36
|
-
const translations = {
|
|
37
|
-
nl: {
|
|
38
|
-
required: 'Dit veld is verplicht',
|
|
39
|
-
select_placeholder: 'Selecteer een optie',
|
|
40
|
-
search_placeholder: 'Zoeken...',
|
|
41
|
-
upload_file: 'Bestand uploaden',
|
|
42
|
-
choose_file: 'Bestand kiezen',
|
|
43
|
-
clear: 'Wissen',
|
|
44
|
-
today: 'Vandaag',
|
|
45
|
-
invalid_email: 'Voer een geldig e-mailadres in',
|
|
46
|
-
invalid_url: 'Voer een geldige URL in',
|
|
47
|
-
invalid_number: 'Voer een geldig getal in',
|
|
48
|
-
drop_file_here: 'Sleep bestand hierheen of',
|
|
49
|
-
browse: 'bladeren',
|
|
50
|
-
file_too_large: 'Bestand is te groot',
|
|
51
|
-
search_results: 'Zoekresultaten',
|
|
52
|
-
no_results: 'Geen resultaten gevonden',
|
|
53
|
-
loading: 'Laden...',
|
|
54
|
-
submit: 'Opslaan',
|
|
55
|
-
cancel: 'Annuleren',
|
|
56
|
-
remove: 'Verwijderen',
|
|
57
|
-
add: 'Toevoegen',
|
|
58
|
-
yes: 'Ja',
|
|
59
|
-
no: 'Nee',
|
|
60
|
-
},
|
|
61
|
-
en: {
|
|
62
|
-
required: 'This field is required',
|
|
63
|
-
select_placeholder: 'Select an option',
|
|
64
|
-
search_placeholder: 'Search...',
|
|
65
|
-
upload_file: 'Upload file',
|
|
66
|
-
choose_file: 'Choose file',
|
|
67
|
-
clear: 'Clear',
|
|
68
|
-
today: 'Today',
|
|
69
|
-
invalid_email: 'Please enter a valid email address',
|
|
70
|
-
invalid_url: 'Please enter a valid URL',
|
|
71
|
-
invalid_number: 'Please enter a valid number',
|
|
72
|
-
drop_file_here: 'Drop file here or',
|
|
73
|
-
browse: 'browse',
|
|
74
|
-
file_too_large: 'File is too large',
|
|
75
|
-
search_results: 'Search results',
|
|
76
|
-
no_results: 'No results found',
|
|
77
|
-
loading: 'Loading...',
|
|
78
|
-
submit: 'Save',
|
|
79
|
-
cancel: 'Cancel',
|
|
80
|
-
remove: 'Remove',
|
|
81
|
-
add: 'Add',
|
|
82
|
-
yes: 'Yes',
|
|
83
|
-
no: 'No',
|
|
84
|
-
},
|
|
85
|
-
ar: {
|
|
86
|
-
required: 'هذا الحقل مطلوب',
|
|
87
|
-
select_placeholder: 'اختر خياراً',
|
|
88
|
-
search_placeholder: 'بحث...',
|
|
89
|
-
upload_file: 'رفع ملف',
|
|
90
|
-
choose_file: 'اختر ملفاً',
|
|
91
|
-
clear: 'مسح',
|
|
92
|
-
today: 'اليوم',
|
|
93
|
-
invalid_email: 'يرجى إدخال عنوان بريد إلكتروني صحيح',
|
|
94
|
-
invalid_url: 'يرجى إدخال رابط صحيح',
|
|
95
|
-
invalid_number: 'يرجى إدخال رقم صحيح',
|
|
96
|
-
drop_file_here: 'اسحب الملف هنا أو',
|
|
97
|
-
browse: 'تصفح',
|
|
98
|
-
file_too_large: 'الملف كبير جداً',
|
|
99
|
-
search_results: 'نتائج البحث',
|
|
100
|
-
no_results: 'لم يتم العثور على نتائج',
|
|
101
|
-
loading: 'جار التحميل...',
|
|
102
|
-
submit: 'حفظ',
|
|
103
|
-
cancel: 'إلغاء',
|
|
104
|
-
remove: 'إزالة',
|
|
105
|
-
add: 'إضافة',
|
|
106
|
-
yes: 'نعم',
|
|
107
|
-
no: 'لا',
|
|
108
|
-
},
|
|
109
|
-
};
|
|
110
|
-
function t(key, locale) {
|
|
111
|
-
var _a, _b, _c;
|
|
112
|
-
const lang = locale.split('-')[0].toLowerCase();
|
|
113
|
-
const dict = (_a = translations[lang]) !== null && _a !== void 0 ? _a : translations['en'];
|
|
114
|
-
return (_c = (_b = dict[key]) !== null && _b !== void 0 ? _b : translations['en'][key]) !== null && _c !== void 0 ? _c : key;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
36
|
function validateRequired(value) {
|
|
118
37
|
if (value === null || value === undefined)
|
|
119
38
|
return false;
|
|
@@ -335,6 +254,7 @@ const MrdField = class {
|
|
|
335
254
|
this.mrdBlur = createEvent(this, "mrdBlur");
|
|
336
255
|
this.mrdSearch = createEvent(this, "mrdSearch");
|
|
337
256
|
this.mrdFetchAll = createEvent(this, "mrdFetchAll");
|
|
257
|
+
this.mrdUpload = createEvent(this, "mrdUpload");
|
|
338
258
|
this.locale = navigator.language;
|
|
339
259
|
this.handleChange = (e) => {
|
|
340
260
|
e.stopPropagation();
|
|
@@ -352,6 +272,10 @@ const MrdField = class {
|
|
|
352
272
|
e.stopPropagation();
|
|
353
273
|
this.mrdFetchAll.emit(e.detail);
|
|
354
274
|
};
|
|
275
|
+
this.handleUpload = (e) => {
|
|
276
|
+
e.stopPropagation();
|
|
277
|
+
this.mrdUpload.emit(e.detail);
|
|
278
|
+
};
|
|
355
279
|
}
|
|
356
280
|
render() {
|
|
357
281
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
|
|
@@ -399,24 +323,26 @@ const MrdField = class {
|
|
|
399
323
|
case ClientLayoutItemFieldDataType.LIST:
|
|
400
324
|
return (h(Host, null, h("mrd-list-field", Object.assign({}, commonProps, { value: (_0 = value) !== null && _0 !== void 0 ? _0 : '', multiple: (_1 = field.multiple) !== null && _1 !== void 0 ? _1 : false, listItems: (_2 = field.listItems) !== null && _2 !== void 0 ? _2 : [] }))));
|
|
401
325
|
case ClientLayoutItemFieldDataType.FILE:
|
|
402
|
-
return (h(Host, null, h("mrd-file-field", Object.assign({}, commonProps, { accept: (_3 = field.accept) !== null && _3 !== void 0 ? _3 : '', maxSize: (_4 = field.maxSize) !== null && _4 !== void 0 ? _4 : 0 }))));
|
|
326
|
+
return (h(Host, null, h("mrd-file-field", Object.assign({}, commonProps, { value: value, accept: (_3 = field.accept) !== null && _3 !== void 0 ? _3 : '', maxSize: (_4 = field.maxSize) !== null && _4 !== void 0 ? _4 : 0, onMrdUpload: this.handleUpload }))));
|
|
403
327
|
case ClientLayoutItemFieldDataType.IMAGE:
|
|
404
|
-
return (h(Host, null, h("mrd-image-field", Object.assign({}, commonProps, { accept: (_5 = field.accept) !== null && _5 !== void 0 ? _5 : 'image/*', maxSize: (_6 = field.maxSize) !== null && _6 !== void 0 ? _6 : 0 }))));
|
|
328
|
+
return (h(Host, null, h("mrd-image-field", Object.assign({}, commonProps, { value: value, accept: (_5 = field.accept) !== null && _5 !== void 0 ? _5 : 'image/*', maxSize: (_6 = field.maxSize) !== null && _6 !== void 0 ? _6 : 0, onMrdUpload: this.handleUpload }))));
|
|
405
329
|
default:
|
|
406
330
|
return h(Host, null);
|
|
407
331
|
}
|
|
408
332
|
}
|
|
409
333
|
};
|
|
410
334
|
|
|
411
|
-
const mrdFileFieldScss = () => `.sc-mrd-file-field-h{display:block}.mrd-file-field.sc-mrd-file-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-file-field__label.sc-mrd-file-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-file-field__label--required.sc-mrd-file-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-file-field__zone.sc-mrd-file-field{display:flex;align-items:center;justify-content:center;padding:var(--mrd-space-6);border:2px dashed var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);background-color:var(--mrd-color-neutral-50);cursor:pointer;transition:border-color var(--mrd-transition), background-color var(--mrd-transition);min-height:100px;position:relative}.mrd-file-field__zone.sc-mrd-file-field:hover{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-file-field__zone--dragging.sc-mrd-file-field{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-file-field__zone--error.sc-mrd-file-field{border-color:var(--mrd-border-color-error)}.mrd-file-field__zone--disabled.sc-mrd-file-field{opacity:0.6;cursor:not-allowed}.mrd-file-field__zone--disabled.sc-mrd-file-field:hover{border-color:var(--mrd-border-color);background-color:var(--mrd-color-neutral-50)}.mrd-file-field__input.sc-mrd-file-field{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;pointer-events:none}.mrd-file-field__prompt.sc-mrd-file-field{display:flex;flex-direction:column;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-file-field__upload-icon.sc-mrd-file-field{width:32px;height:32px;color:var(--mrd-color-neutral-400)}.mrd-file-field__browse.sc-mrd-file-field{color:var(--mrd-color-primary);font-weight:var(--mrd-font-weight-medium);text-decoration:underline}.mrd-file-field__selected.sc-mrd-file-field{display:flex;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-700)}.mrd-file-field__icon.sc-mrd-file-field{width:20px;height:20px;color:var(--mrd-color-primary);flex-shrink:0}.mrd-file-field__filename.sc-mrd-file-field{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.mrd-file-field__clear.sc-mrd-file-field{background:none;border:none;cursor:pointer;color:var(--mrd-color-neutral-400);font-size:var(--mrd-font-size-sm);padding:var(--mrd-space-1);border-radius:var(--mrd-border-radius-sm);line-height:1}.mrd-file-field__clear.sc-mrd-file-field:hover{color:var(--mrd-color-danger);background-color:var(--mrd-color-danger-light)}.mrd-file-field__error.sc-mrd-file-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
|
|
335
|
+
const mrdFileFieldScss = () => `.sc-mrd-file-field-h{display:block}.mrd-file-field.sc-mrd-file-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-file-field__label.sc-mrd-file-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-file-field__label--required.sc-mrd-file-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-file-field__zone.sc-mrd-file-field{display:flex;align-items:center;justify-content:center;padding:var(--mrd-space-6);border:2px dashed var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);background-color:var(--mrd-color-neutral-50);cursor:pointer;transition:border-color var(--mrd-transition), background-color var(--mrd-transition);min-height:100px;position:relative}.mrd-file-field__zone.sc-mrd-file-field:hover{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-file-field__zone--dragging.sc-mrd-file-field{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-file-field__zone--error.sc-mrd-file-field{border-color:var(--mrd-border-color-error)}.mrd-file-field__zone--disabled.sc-mrd-file-field{opacity:0.6;cursor:not-allowed}.mrd-file-field__zone--disabled.sc-mrd-file-field:hover{border-color:var(--mrd-border-color);background-color:var(--mrd-color-neutral-50)}.mrd-file-field__input.sc-mrd-file-field{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;pointer-events:none}.mrd-file-field__prompt.sc-mrd-file-field{display:flex;flex-direction:column;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-file-field__upload-icon.sc-mrd-file-field{width:32px;height:32px;color:var(--mrd-color-neutral-400)}.mrd-file-field__browse.sc-mrd-file-field{color:var(--mrd-color-primary);font-weight:var(--mrd-font-weight-medium);text-decoration:underline}.mrd-file-field__selected.sc-mrd-file-field{display:flex;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-700)}.mrd-file-field__icon.sc-mrd-file-field{width:20px;height:20px;color:var(--mrd-color-primary);flex-shrink:0}.mrd-file-field__filename.sc-mrd-file-field{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.mrd-file-field__clear.sc-mrd-file-field{background:none;border:none;cursor:pointer;color:var(--mrd-color-neutral-400);font-size:var(--mrd-font-size-sm);padding:var(--mrd-space-1);border-radius:var(--mrd-border-radius-sm);line-height:1}.mrd-file-field__clear.sc-mrd-file-field:hover{color:var(--mrd-color-danger);background-color:var(--mrd-color-danger-light)}.mrd-file-field__spinner.sc-mrd-file-field{display:inline-block;flex-shrink:0;width:18px;height:18px;border:2px solid var(--mrd-color-neutral-300);border-top-color:var(--mrd-color-primary);border-radius:50%;animation:mrd-file-spin 0.6s linear infinite}@keyframes mrd-file-spin{to{transform:rotate(360deg)}}.mrd-file-field__error.sc-mrd-file-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
|
|
412
336
|
|
|
413
337
|
const MrdFileField = class {
|
|
414
338
|
constructor(hostRef) {
|
|
415
339
|
registerInstance(this, hostRef);
|
|
416
340
|
this.mrdChange = createEvent(this, "mrdChange");
|
|
417
341
|
this.mrdBlur = createEvent(this, "mrdBlur");
|
|
342
|
+
this.mrdUpload = createEvent(this, "mrdUpload");
|
|
418
343
|
this.name = '';
|
|
419
344
|
this.label = '';
|
|
345
|
+
this.value = null;
|
|
420
346
|
this.required = false;
|
|
421
347
|
this.disabled = false;
|
|
422
348
|
this.locale = navigator.language;
|
|
@@ -424,6 +350,7 @@ const MrdFileField = class {
|
|
|
424
350
|
this.maxSize = 0; // bytes, 0 = no limit
|
|
425
351
|
this.fileName = '';
|
|
426
352
|
this.isDragging = false;
|
|
353
|
+
this.uploading = false;
|
|
427
354
|
this.error = '';
|
|
428
355
|
this.handleInputChange = (e) => {
|
|
429
356
|
var _a;
|
|
@@ -446,7 +373,7 @@ const MrdFileField = class {
|
|
|
446
373
|
};
|
|
447
374
|
this.handleZoneClick = () => {
|
|
448
375
|
var _a;
|
|
449
|
-
if (!this.disabled) {
|
|
376
|
+
if (!this.disabled && !this.uploading) {
|
|
450
377
|
(_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
|
|
451
378
|
}
|
|
452
379
|
};
|
|
@@ -454,14 +381,26 @@ const MrdFileField = class {
|
|
|
454
381
|
e.stopPropagation();
|
|
455
382
|
this.fileName = '';
|
|
456
383
|
this.error = '';
|
|
384
|
+
this.uploading = false;
|
|
457
385
|
if (this.fileInputRef)
|
|
458
386
|
this.fileInputRef.value = '';
|
|
459
387
|
this.mrdChange.emit({ name: this.name, value: null });
|
|
460
388
|
};
|
|
461
389
|
}
|
|
390
|
+
/** When the host provides a URI back via setFieldValue, the upload is done. */
|
|
391
|
+
valueChanged(newVal) {
|
|
392
|
+
if (typeof newVal === 'string' && newVal) {
|
|
393
|
+
this.uploading = false;
|
|
394
|
+
}
|
|
395
|
+
else if (!newVal) {
|
|
396
|
+
this.uploading = false;
|
|
397
|
+
this.fileName = '';
|
|
398
|
+
}
|
|
399
|
+
}
|
|
462
400
|
handleFile(file) {
|
|
463
401
|
if (!file) {
|
|
464
402
|
this.fileName = '';
|
|
403
|
+
this.uploading = false;
|
|
465
404
|
this.mrdChange.emit({ name: this.name, value: null });
|
|
466
405
|
return;
|
|
467
406
|
}
|
|
@@ -471,12 +410,26 @@ const MrdFileField = class {
|
|
|
471
410
|
}
|
|
472
411
|
this.error = '';
|
|
473
412
|
this.fileName = file.name;
|
|
413
|
+
this.uploading = true;
|
|
474
414
|
this.mrdChange.emit({ name: this.name, value: file });
|
|
415
|
+
this.mrdUpload.emit({ name: this.name, file });
|
|
475
416
|
}
|
|
476
417
|
render() {
|
|
418
|
+
const hasFile = this.uploading || (typeof this.value === 'string' && this.value) || this.fileName;
|
|
477
419
|
const hasError = !!this.error;
|
|
478
|
-
|
|
420
|
+
const zoneClass = [
|
|
421
|
+
'mrd-file-field__zone',
|
|
422
|
+
this.isDragging ? 'mrd-file-field__zone--dragging' : '',
|
|
423
|
+
hasError ? 'mrd-file-field__zone--error' : '',
|
|
424
|
+
this.disabled || this.uploading ? 'mrd-file-field__zone--disabled' : '',
|
|
425
|
+
].filter(Boolean).join(' ');
|
|
426
|
+
return (h(Host, { key: '2090102df8169226c1e66f87cbc837296e4b55d4' }, h("div", { key: '7a37a09df1bfa2eaf28ed04c806ad5f7c0337bb0', class: "mrd-file-field" }, this.label && (h("label", { key: '8f1fcb8adbb66b792be902c7c548e50db99b6a53', class: `mrd-file-field__label${this.required ? ' mrd-file-field__label--required' : ''}` }, this.label)), h("div", { key: '66d992298f537b24d69ce3ead3dd229f6d124f3d', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '95ba6560e71ee08c6b2526802727b29a18cdc454', ref: el => (this.fileInputRef = el), class: "mrd-file-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !hasFile, onChange: this.handleInputChange }), hasFile ? (h("div", { class: "mrd-file-field__selected" }, this.uploading ? (h("span", { class: "mrd-file-field__spinner", "aria-label": t('loading', this.locale) })) : (h("svg", { class: "mrd-file-field__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("polyline", { points: "14 2 14 8 20 8" }))), h("span", { class: "mrd-file-field__filename" }, this.fileName), !this.uploading && (h("button", { class: "mrd-file-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, "\u2715")))) : (h("div", { class: "mrd-file-field__prompt" }, h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { points: "16 16 12 12 8 16" }), h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-file-field__browse" }, t('browse', this.locale)))))), hasError && h("span", { key: 'a6020e63bebb01e31a980a903f81badd486585aa', class: "mrd-file-field__error" }, this.error))));
|
|
479
427
|
}
|
|
428
|
+
static get watchers() { return {
|
|
429
|
+
"value": [{
|
|
430
|
+
"valueChanged": 0
|
|
431
|
+
}]
|
|
432
|
+
}; }
|
|
480
433
|
};
|
|
481
434
|
MrdFileField.style = mrdFileFieldScss();
|
|
482
435
|
|
|
@@ -489,6 +442,7 @@ const MrdForm = class {
|
|
|
489
442
|
this.mrdCancel = createEvent(this, "mrdCancel");
|
|
490
443
|
this.mrdSearch = createEvent(this, "mrdSearch");
|
|
491
444
|
this.mrdFetchAll = createEvent(this, "mrdFetchAll");
|
|
445
|
+
this.mrdUpload = createEvent(this, "mrdUpload");
|
|
492
446
|
this.locale = navigator.language;
|
|
493
447
|
this.values = {};
|
|
494
448
|
/**
|
|
@@ -552,6 +506,10 @@ const MrdForm = class {
|
|
|
552
506
|
e.stopPropagation();
|
|
553
507
|
this.mrdFetchAll.emit(e.detail);
|
|
554
508
|
};
|
|
509
|
+
this.handleUpload = (e) => {
|
|
510
|
+
e.stopPropagation();
|
|
511
|
+
this.mrdUpload.emit(e.detail);
|
|
512
|
+
};
|
|
555
513
|
this.handleSubmit = (e) => {
|
|
556
514
|
e.preventDefault();
|
|
557
515
|
this.submitted = true;
|
|
@@ -715,6 +673,9 @@ const MrdForm = class {
|
|
|
715
673
|
if (item.type === ClientLayoutItemType.FIELD && item.field) {
|
|
716
674
|
const name = item.field.name;
|
|
717
675
|
const value = this.formValues[name];
|
|
676
|
+
// Skip file/image fields that are still uploading (value is a File object)
|
|
677
|
+
if (value instanceof File)
|
|
678
|
+
continue;
|
|
718
679
|
// Omit empty strings for optional fields
|
|
719
680
|
if (value !== '')
|
|
720
681
|
payload[name] = value !== null && value !== void 0 ? value : null;
|
|
@@ -744,7 +705,7 @@ const MrdForm = class {
|
|
|
744
705
|
}
|
|
745
706
|
const fieldName = (_d = (_b = (_a = item.field) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : (_c = item.relation) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '';
|
|
746
707
|
const fieldValue = this.formValues[fieldName];
|
|
747
|
-
return (h("div", { class: "mrd-form__field" }, h("mrd-field", { item: item, locale: this.locale, value: fieldValue, onMrdChange: this.handleFieldChange, onMrdBlur: this.handleFieldChange, onMrdSearch: this.handleSearch, onMrdFetchAll: this.handleFetchAll }), this.errors[fieldName] && (h("span", { class: "mrd-form__field-error" }, this.errors[fieldName]))));
|
|
708
|
+
return (h("div", { class: "mrd-form__field" }, h("mrd-field", { item: item, locale: this.locale, value: fieldValue, onMrdChange: this.handleFieldChange, onMrdBlur: this.handleFieldChange, onMrdSearch: this.handleSearch, onMrdFetchAll: this.handleFetchAll, onMrdUpload: this.handleUpload }), this.errors[fieldName] && (h("span", { class: "mrd-form__field-error" }, this.errors[fieldName]))));
|
|
748
709
|
});
|
|
749
710
|
}
|
|
750
711
|
render() {
|
|
@@ -802,15 +763,17 @@ const MrdHyperlinkField = class {
|
|
|
802
763
|
};
|
|
803
764
|
MrdHyperlinkField.style = mrdHyperlinkFieldScss();
|
|
804
765
|
|
|
805
|
-
const mrdImageFieldScss = () => `.sc-mrd-image-field-h{display:block}.mrd-image-field.sc-mrd-image-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-image-field__label.sc-mrd-image-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-image-field__label--required.sc-mrd-image-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-image-field__zone.sc-mrd-image-field{display:flex;align-items:center;justify-content:center;border:2px dashed var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);background-color:var(--mrd-color-neutral-50);cursor:pointer;transition:border-color var(--mrd-transition), background-color var(--mrd-transition);min-height:100px;position:relative}.mrd-image-field__zone.sc-mrd-image-field:hover{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-image-field__zone--dragging.sc-mrd-image-field{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-image-field__zone--error.sc-mrd-image-field{border-color:var(--mrd-border-color-error)}.mrd-image-field__zone--disabled.sc-mrd-image-field{opacity:0.6;cursor:not-allowed}.mrd-image-field__zone--disabled.sc-mrd-image-field:hover{border-color:var(--mrd-border-color);background-color:var(--mrd-color-neutral-50)}.mrd-image-field__input.sc-mrd-image-field{position:absolute;inset:0;opacity:0;width:100%;height:100%;pointer-events:none}.mrd-image-field__prompt.sc-mrd-image-field{display:flex;flex-direction:column;align-items:center;gap:var(--mrd-space-2);padding:var(--mrd-space-6);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-image-field__upload-icon.sc-mrd-image-field{width:40px;height:40px;color:var(--mrd-color-neutral-400)}.mrd-image-field__browse.sc-mrd-image-field{color:var(--mrd-color-primary);font-weight:var(--mrd-font-weight-medium);text-decoration:underline}.mrd-image-field__preview-container.sc-mrd-image-field{display:flex;align-items:center;gap:var(--mrd-space-4);padding:var(--mrd-space-4);width:100%}.mrd-image-field__preview-thumb.sc-mrd-image-field{flex-shrink:0;width:80px;height:80px;border-radius:var(--mrd-border-radius);overflow:hidden;border:var(--mrd-border-width) solid var(--mrd-border-color);background-color:var(--mrd-color-neutral-100)}.mrd-image-field__preview.sc-mrd-image-field{width:100%;height:100%;object-fit:cover;display:block}.mrd-image-field__preview-info.sc-mrd-image-field{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-image-field__preview-name.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrd-image-
|
|
766
|
+
const mrdImageFieldScss = () => `.sc-mrd-image-field-h{display:block}.mrd-image-field.sc-mrd-image-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-image-field__label.sc-mrd-image-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-image-field__label--required.sc-mrd-image-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-image-field__zone.sc-mrd-image-field{display:flex;align-items:center;justify-content:center;border:2px dashed var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);background-color:var(--mrd-color-neutral-50);cursor:pointer;transition:border-color var(--mrd-transition), background-color var(--mrd-transition);min-height:100px;position:relative}.mrd-image-field__zone.sc-mrd-image-field:hover{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-image-field__zone--dragging.sc-mrd-image-field{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-image-field__zone--error.sc-mrd-image-field{border-color:var(--mrd-border-color-error)}.mrd-image-field__zone--disabled.sc-mrd-image-field{opacity:0.6;cursor:not-allowed}.mrd-image-field__zone--disabled.sc-mrd-image-field:hover{border-color:var(--mrd-border-color);background-color:var(--mrd-color-neutral-50)}.mrd-image-field__input.sc-mrd-image-field{position:absolute;inset:0;opacity:0;width:100%;height:100%;pointer-events:none}.mrd-image-field__prompt.sc-mrd-image-field{display:flex;flex-direction:column;align-items:center;gap:var(--mrd-space-2);padding:var(--mrd-space-6);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-image-field__upload-icon.sc-mrd-image-field{width:40px;height:40px;color:var(--mrd-color-neutral-400)}.mrd-image-field__browse.sc-mrd-image-field{color:var(--mrd-color-primary);font-weight:var(--mrd-font-weight-medium);text-decoration:underline}.mrd-image-field__preview-container.sc-mrd-image-field{display:flex;align-items:center;gap:var(--mrd-space-4);padding:var(--mrd-space-4);width:100%}.mrd-image-field__preview-thumb.sc-mrd-image-field{flex-shrink:0;width:80px;height:80px;border-radius:var(--mrd-border-radius);overflow:hidden;border:var(--mrd-border-width) solid var(--mrd-border-color);background-color:var(--mrd-color-neutral-100)}.mrd-image-field__preview.sc-mrd-image-field{width:100%;height:100%;object-fit:cover;display:block}.mrd-image-field__preview-info.sc-mrd-image-field{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-image-field__preview-name.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrd-image-field__preview-overlay.sc-mrd-image-field{position:absolute;inset:0;background:rgb(255 255 255 / 0.7);display:flex;align-items:center;justify-content:center;border-radius:var(--mrd-border-radius)}.mrd-image-field__spinner.sc-mrd-image-field{display:inline-block;width:24px;height:24px;border:2px solid var(--mrd-color-neutral-300);border-top-color:var(--mrd-color-primary);border-radius:50%;animation:mrd-image-spin 0.6s linear infinite}@keyframes mrd-image-spin{to{transform:rotate(360deg)}}.mrd-image-field__upload-status.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500)}.mrd-image-field__clear.sc-mrd-image-field{flex-shrink:0;background-color:var(--mrd-color-white);color:var(--mrd-color-danger);border:var(--mrd-border-width) solid var(--mrd-color-danger);border-radius:var(--mrd-border-radius);padding:var(--mrd-space-1) var(--mrd-space-3);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);cursor:pointer;transition:background-color var(--mrd-transition), color var(--mrd-transition)}.mrd-image-field__clear.sc-mrd-image-field:hover{background-color:var(--mrd-color-danger);color:var(--mrd-color-white)}.mrd-image-field__error.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
|
|
806
767
|
|
|
807
768
|
const MrdImageField = class {
|
|
808
769
|
constructor(hostRef) {
|
|
809
770
|
registerInstance(this, hostRef);
|
|
810
771
|
this.mrdChange = createEvent(this, "mrdChange");
|
|
811
772
|
this.mrdBlur = createEvent(this, "mrdBlur");
|
|
773
|
+
this.mrdUpload = createEvent(this, "mrdUpload");
|
|
812
774
|
this.name = '';
|
|
813
775
|
this.label = '';
|
|
776
|
+
this.value = null;
|
|
814
777
|
this.required = false;
|
|
815
778
|
this.disabled = false;
|
|
816
779
|
this.locale = navigator.language;
|
|
@@ -819,6 +782,7 @@ const MrdImageField = class {
|
|
|
819
782
|
this.previewUrl = '';
|
|
820
783
|
this.fileName = '';
|
|
821
784
|
this.isDragging = false;
|
|
785
|
+
this.uploading = false;
|
|
822
786
|
this.error = '';
|
|
823
787
|
this.handleInputChange = (e) => {
|
|
824
788
|
var _a;
|
|
@@ -841,7 +805,7 @@ const MrdImageField = class {
|
|
|
841
805
|
};
|
|
842
806
|
this.handleZoneClick = () => {
|
|
843
807
|
var _a;
|
|
844
|
-
if (!this.disabled) {
|
|
808
|
+
if (!this.disabled && !this.uploading) {
|
|
845
809
|
(_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
|
|
846
810
|
}
|
|
847
811
|
};
|
|
@@ -850,15 +814,28 @@ const MrdImageField = class {
|
|
|
850
814
|
this.previewUrl = '';
|
|
851
815
|
this.fileName = '';
|
|
852
816
|
this.error = '';
|
|
817
|
+
this.uploading = false;
|
|
853
818
|
if (this.fileInputRef)
|
|
854
819
|
this.fileInputRef.value = '';
|
|
855
820
|
this.mrdChange.emit({ name: this.name, value: null });
|
|
856
821
|
};
|
|
857
822
|
}
|
|
823
|
+
/** When the host provides a URI back via setFieldValue, the upload is done. */
|
|
824
|
+
valueChanged(newVal) {
|
|
825
|
+
if (typeof newVal === 'string' && newVal) {
|
|
826
|
+
this.uploading = false;
|
|
827
|
+
}
|
|
828
|
+
else if (!newVal) {
|
|
829
|
+
this.uploading = false;
|
|
830
|
+
this.previewUrl = '';
|
|
831
|
+
this.fileName = '';
|
|
832
|
+
}
|
|
833
|
+
}
|
|
858
834
|
handleFile(file) {
|
|
859
835
|
if (!file) {
|
|
860
836
|
this.previewUrl = '';
|
|
861
837
|
this.fileName = '';
|
|
838
|
+
this.uploading = false;
|
|
862
839
|
this.mrdChange.emit({ name: this.name, value: null });
|
|
863
840
|
return;
|
|
864
841
|
}
|
|
@@ -872,6 +849,8 @@ const MrdImageField = class {
|
|
|
872
849
|
}
|
|
873
850
|
this.error = '';
|
|
874
851
|
this.fileName = file.name;
|
|
852
|
+
this.uploading = true;
|
|
853
|
+
// Show local preview immediately while upload is in progress
|
|
875
854
|
const reader = new FileReader();
|
|
876
855
|
reader.onload = (ev) => {
|
|
877
856
|
var _a;
|
|
@@ -879,11 +858,23 @@ const MrdImageField = class {
|
|
|
879
858
|
};
|
|
880
859
|
reader.readAsDataURL(file);
|
|
881
860
|
this.mrdChange.emit({ name: this.name, value: file });
|
|
861
|
+
this.mrdUpload.emit({ name: this.name, file });
|
|
882
862
|
}
|
|
883
863
|
render() {
|
|
884
864
|
const hasError = !!this.error;
|
|
885
|
-
|
|
865
|
+
const zoneClass = [
|
|
866
|
+
'mrd-image-field__zone',
|
|
867
|
+
this.isDragging ? 'mrd-image-field__zone--dragging' : '',
|
|
868
|
+
hasError ? 'mrd-image-field__zone--error' : '',
|
|
869
|
+
this.disabled || this.uploading ? 'mrd-image-field__zone--disabled' : '',
|
|
870
|
+
].filter(Boolean).join(' ');
|
|
871
|
+
return (h(Host, { key: '76b5a36a7f5a420ded3400c8a1481843363d1cbe' }, h("div", { key: '3544df84aaf427a25518bafe13d60cf89ed28537', class: "mrd-image-field" }, this.label && (h("label", { key: 'dca64c1600cb98526eb4b91a908106087f099ad1', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), h("div", { key: 'ce07f32126f0956e47ff6fc41ff231590e0503d3', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '660fbae5f730834c465522a11dd674fc8e50a54e', ref: el => (this.fileInputRef = el), class: "mrd-image-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !this.previewUrl, onChange: this.handleInputChange }), this.previewUrl ? (h("div", { class: "mrd-image-field__preview-container" }, h("div", { class: "mrd-image-field__preview-thumb" }, h("img", { class: "mrd-image-field__preview", src: this.previewUrl, alt: this.fileName }), this.uploading && h("div", { class: "mrd-image-field__preview-overlay" }, h("span", { class: "mrd-image-field__spinner" }))), h("div", { class: "mrd-image-field__preview-info" }, h("span", { class: "mrd-image-field__preview-name" }, this.fileName), this.uploading && (h("span", { class: "mrd-image-field__upload-status" }, t('loading', this.locale)))), !this.uploading && (h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, t('remove', this.locale))))) : (h("div", { class: "mrd-image-field__prompt" }, h("svg", { class: "mrd-image-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), h("polyline", { points: "21 15 16 10 5 21" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-image-field__browse" }, t('browse', this.locale)))))), hasError && h("span", { key: '9b8f9563fea63bd12c38f5c480e9cbd24106c3af', class: "mrd-image-field__error" }, this.error))));
|
|
886
872
|
}
|
|
873
|
+
static get watchers() { return {
|
|
874
|
+
"value": [{
|
|
875
|
+
"valueChanged": 0
|
|
876
|
+
}]
|
|
877
|
+
}; }
|
|
887
878
|
};
|
|
888
879
|
MrdImageField.style = mrdImageFieldScss();
|
|
889
880
|
|