@mmlogic/components 0.1.0

package/dist/collection/components/mrd-file-field/mrd-file-field.js

@@ -0,0 +1,273 @@
+import { Host, h } from "@stencil/core";
+import { t } from "../../utils/i18n";
+export class MrdFileField {
+    constructor() {
+        this.name = '';
+        this.label = '';
+        this.required = false;
+        this.disabled = false;
+        this.locale = navigator.language;
+        this.accept = '';
+        this.maxSize = 0; // bytes, 0 = no limit
+        this.fileName = '';
+        this.isDragging = false;
+        this.error = '';
+        this.handleInputChange = (e) => {
+            var _a;
+            const files = e.target.files;
+            this.handleFile((_a = files === null || files === void 0 ? void 0 : files[0]) !== null && _a !== void 0 ? _a : null);
+        };
+        this.handleDragOver = (e) => {
+            e.preventDefault();
+            this.isDragging = true;
+        };
+        this.handleDragLeave = () => {
+            this.isDragging = false;
+        };
+        this.handleDrop = (e) => {
+            var _a, _b, _c;
+            e.preventDefault();
+            this.isDragging = false;
+            const file = (_c = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : null;
+            this.handleFile(file);
+        };
+        this.handleZoneClick = () => {
+            var _a;
+            if (!this.disabled) {
+                (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
+            }
+        };
+        this.handleClear = (e) => {
+            e.stopPropagation();
+            this.fileName = '';
+            this.error = '';
+            if (this.fileInputRef)
+                this.fileInputRef.value = '';
+            this.mrdChange.emit({ name: this.name, value: null });
+        };
+    }
+    handleFile(file) {
+        if (!file) {
+            this.fileName = '';
+            this.mrdChange.emit({ name: this.name, value: null });
+            return;
+        }
+        if (this.maxSize > 0 && file.size > this.maxSize) {
+            this.error = t('file_too_large', this.locale);
+            return;
+        }
+        this.error = '';
+        this.fileName = file.name;
+        this.mrdChange.emit({ name: this.name, value: file });
+    }
+    render() {
+        const hasError = !!this.error;
+        return (h(Host, { key: '6617c70edaf193c204a951ff8116d54742592f84' }, h("div", { key: '69a45446da411c1cfdadd9ee7051e3ceea95a2d2', class: "mrd-file-field" }, this.label && (h("label", { key: 'ca415565514c5a3829b1e4a446493916bd1b5b17', class: `mrd-file-field__label${this.required ? ' mrd-file-field__label--required' : ''}` }, this.label)), h("div", { key: 'abee0fc6a53c9f1266e6ed2d0ec8ab85a20a81ca', class: `mrd-file-field__zone${this.isDragging ? ' mrd-file-field__zone--dragging' : ''}${hasError ? ' mrd-file-field__zone--error' : ''}${this.disabled ? ' mrd-file-field__zone--disabled' : ''}`, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: 'c1dbca750d4115b7d8ea3dcd9ed3405ed11c93a2', ref: el => (this.fileInputRef = el), class: "mrd-file-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled, required: this.required && !this.fileName, onChange: this.handleInputChange }), this.fileName ? (h("div", { class: "mrd-file-field__selected" }, 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), 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: '91ef6a6240f139e161288cb812d17e13a619ec89', class: "mrd-file-field__error" }, this.error))));
+    }
+    static get is() { return "mrd-file-field"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-file-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-file-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "navigator.language"
+            },
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept",
+                "defaultValue": "''"
+            },
+            "maxSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-size",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "fileName": {},
+            "isDragging": {},
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdChange",
+                "name": "mrdChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; value: File | null }",
+                    "resolved": "{ name: string; value: File | null; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "mrdBlur",
+                "name": "mrdBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; value: File | null }",
+                    "resolved": "{ name: string; value: File | null; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/mrd-file-field/mrd-file-field.scss

@@ -0,0 +1,140 @@
+:host {
+  display: block;
+}
+
+.mrd-file-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+  width: 100%;
+}
+
+.mrd-file-field__label {
+  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::after {
+  content: ' *';
+  color: var(--mrd-color-danger);
+}
+
+.mrd-file-field__zone {
+  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:hover {
+  border-color: var(--mrd-color-primary);
+  background-color: var(--mrd-color-primary-light);
+}
+
+.mrd-file-field__zone--dragging {
+  border-color: var(--mrd-color-primary);
+  background-color: var(--mrd-color-primary-light);
+}
+
+.mrd-file-field__zone--error {
+  border-color: var(--mrd-border-color-error);
+}
+
+.mrd-file-field__zone--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.mrd-file-field__zone--disabled:hover {
+  border-color: var(--mrd-border-color);
+  background-color: var(--mrd-color-neutral-50);
+}
+
+.mrd-file-field__input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  pointer-events: none;
+}
+
+.mrd-file-field__prompt {
+  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 {
+  width: 32px;
+  height: 32px;
+  color: var(--mrd-color-neutral-400);
+}
+
+.mrd-file-field__browse {
+  color: var(--mrd-color-primary);
+  font-weight: var(--mrd-font-weight-medium);
+  text-decoration: underline;
+}
+
+.mrd-file-field__selected {
+  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 {
+  width: 20px;
+  height: 20px;
+  color: var(--mrd-color-primary);
+  flex-shrink: 0;
+}
+
+.mrd-file-field__filename {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 200px;
+}
+
+.mrd-file-field__clear {
+  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:hover {
+  color: var(--mrd-color-danger);
+  background-color: var(--mrd-color-danger-light);
+}
+
+.mrd-file-field__error {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-error-font-size);
+  color: var(--mrd-error-color);
+}

package/dist/collection/components/mrd-form/mrd-form.js

@@ -0,0 +1,245 @@
+import { Host, h } from "@stencil/core";
+import { ClientLayoutItemType } from "../../types";
+import { t } from "../../utils/i18n";
+import { validateRequired } from "../../utils/validation";
+export class MrdForm {
+    constructor() {
+        this.locale = navigator.language;
+        this.values = {};
+        this.formValues = {};
+        this.errors = {};
+        this.submitted = false;
+        this.handleFieldChange = (e) => {
+            const { name, value } = e.detail;
+            this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
+            if (this.errors[name]) {
+                this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
+            }
+        };
+        this.handleSearch = (e) => {
+            this.mrdSearch.emit(e.detail);
+        };
+        this.handleSubmit = (e) => {
+            e.preventDefault();
+            this.submitted = true;
+            if (this.validate()) {
+                this.mrdSubmit.emit(Object.assign({}, this.formValues));
+            }
+        };
+    }
+    componentWillLoad() {
+        var _a;
+        this.formValues = Object.assign({}, ((_a = this.values) !== null && _a !== void 0 ? _a : {}));
+    }
+    async setFieldValue(name, value) {
+        this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
+        if (this.errors[name]) {
+            this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
+        }
+    }
+    collectFields(items) {
+        const fields = [];
+        for (const item of items) {
+            if (item.type === ClientLayoutItemType.FIELD || item.type === ClientLayoutItemType.RELATION) {
+                fields.push(item);
+            }
+            if (item.items) {
+                fields.push(...this.collectFields(item.items));
+            }
+        }
+        return fields;
+    }
+    validate() {
+        var _a, _b, _c;
+        const newErrors = {};
+        const allFields = this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
+        for (const item of allFields) {
+            const def = (_c = item.field) !== null && _c !== void 0 ? _c : item.relation;
+            if (!def)
+                continue;
+            if (def.required && !validateRequired(this.formValues[def.name])) {
+                newErrors[def.name] = t('required', this.locale);
+            }
+        }
+        this.errors = newErrors;
+        return Object.keys(newErrors).length === 0;
+    }
+    renderItems(items) {
+        return items.map(item => {
+            var _a, _b, _c, _d;
+            if (item.type === ClientLayoutItemType.SECTION) {
+                return (h("fieldset", { class: "mrd-form__section" }, item.label && h("legend", { class: "mrd-form__section-legend" }, item.label), h("div", { class: "mrd-form__section-body" }, item.items && this.renderItems(item.items))));
+            }
+            if (item.type === ClientLayoutItemType.GROUP) {
+                return (h("div", { class: "mrd-form__group" }, item.label && h("div", { class: "mrd-form__group-label" }, item.label), h("div", { class: "mrd-form__group-body" }, item.items && this.renderItems(item.items))));
+            }
+            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 : '';
+            const fieldValue = this.formValues[fieldName];
+            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 }), this.errors[fieldName] && (h("span", { class: "mrd-form__field-error" }, this.errors[fieldName]))));
+        });
+    }
+    render() {
+        if (!this.layout) {
+            return h(Host, null);
+        }
+        const dir = this.locale.startsWith('ar') ? 'rtl' : 'ltr';
+        return (h(Host, null, h("form", { class: "mrd-form", dir: dir, onSubmit: this.handleSubmit, noValidate: true }, this.layout.title && h("h2", { class: "mrd-form__title" }, this.layout.title), h("div", { class: "mrd-form__body" }, this.renderItems(this.layout.items)), h("div", { class: "mrd-form__footer" }, h("button", { type: "submit", class: "mrd-form__submit" }, t('submit', this.locale))))));
+    }
+    static get is() { return "mrd-form"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-form.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "layout": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientLayout",
+                    "resolved": "ClientLayout",
+                    "references": {
+                        "ClientLayout": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::ClientLayout",
+                            "referenceLocation": "ClientLayout"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "navigator.language"
+            },
+            "values": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, unknown>",
+                    "resolved": "string | unknown",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "formValues": {},
+            "errors": {},
+            "submitted": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdSubmit",
+                "name": "mrdSubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Record<string, unknown>",
+                    "resolved": "string | unknown",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                }
+            }, {
+                "method": "mrdSearch",
+                "name": "mrdSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ query: string; relatedClass: string }",
+                    "resolved": "{ query: string; relatedClass: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFieldValue": {
+                "complexType": {
+                    "signature": "(name: string, value: unknown) => Promise<void>",
+                    "parameters": [{
+                            "name": "name",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "value",
+                            "type": "unknown",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}