@xlabs-store/core 0.0.1

package/dist/collection/components/x-form-item/x-form-item.js

@@ -0,0 +1,538 @@
+import { Host, h } from "@stencil/core";
+import { FormControl } from "../../utils/form/core/form-control";
+export class XFormItem {
+    el;
+    /**
+     * Label text
+     * @example
+     * <x-form-item label="Email"></x-form-item>
+     */
+    label;
+    /**
+     * The validation status. If not provided, it will be automatically inferred from the form control.
+     * @example
+     * <x-form-item validateStatus="error"></x-form-item>
+     */
+    validateStatus;
+    /**
+     * The help message. If not provided, it will be automatically inferred from the form control errors.
+     * @example
+     * <x-form-item help="Required"></x-form-item>
+     */
+    help;
+    /**
+     * Whether to show the required mark. If not provided, it will be automatically inferred from the form control validators.
+     * @example
+     * <x-form-item required label="Name"></x-form-item>
+     */
+    required = false;
+    /**
+     * Whether to show the colon after label
+     * @example
+     * <x-form-item colon={false} label="Name"></x-form-item>
+     */
+    colon = true;
+    /**
+     * Whether to show the feedback icon
+     * @example
+     * <x-form-item hasFeedback validateStatus="success"></x-form-item>
+     */
+    hasFeedback = false;
+    /**
+     * Label column layout (e.g. span)
+     * @example
+     * <x-form-item labelCol="span: 6"></x-form-item>
+     */
+    labelCol;
+    /**
+     * Wrapper column layout
+     * @example
+     * <x-form-item wrapperCol="span: 18"></x-form-item>
+     */
+    wrapperCol;
+    /**
+     * Label alignment in horizontal layout
+     */
+    labelAlign;
+    /**
+     * Form layout (overrides parent x-form layout)
+     */
+    layout;
+    /**
+     * Field name for form binding
+     */
+    name;
+    /**
+     * Props of children node, for example checkbox should be 'checked'
+     */
+    valuePropName = 'value';
+    /**
+     * Extra prompt message
+     */
+    extra;
+    control;
+    status;
+    errorMessage;
+    parentLayout;
+    parentColon;
+    parentHideRequiredMark;
+    parentLabelAlign;
+    formEl = null;
+    unsubscribe = null;
+    observer = null;
+    nameChanged() {
+        this.connectControl();
+    }
+    componentWillLoad() {
+        this.formEl = this.el.closest('x-form');
+        if (this.formEl) {
+            this.syncParentProps();
+            this.setupObserver();
+        }
+        this.connectControl();
+    }
+    syncParentProps() {
+        if (this.formEl) {
+            this.parentLayout = this.formEl.getAttribute('layout') || this.formEl.layout || 'horizontal';
+            this.parentColon = this.formEl.getAttribute('colon') !== 'false' && this.formEl.colon !== false;
+            this.parentHideRequiredMark = this.formEl.getAttribute('hide-required-mark') === 'true' || this.formEl.hideRequiredMark === true;
+            this.parentLabelAlign = this.formEl.labelAlign || 'right';
+        }
+    }
+    setupObserver() {
+        if (this.formEl && !this.observer) {
+            this.observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    if (mutation.type === 'attributes' && (mutation.attributeName === 'layout' ||
+                        mutation.attributeName === 'colon' ||
+                        mutation.attributeName === 'hide-required-mark')) {
+                        this.syncParentProps();
+                    }
+                });
+            });
+            this.observer.observe(this.formEl, { attributes: true });
+        }
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    connectControl() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+        if (this.formEl && this.formEl.form && this.name) {
+            let control = this.formEl.form.get(this.name);
+            if (!control) {
+                // Self-registration: create a control if it doesn't exist
+                const initialValue = this.formEl.initialValues?.[this.name];
+                control = new FormControl(initialValue);
+                this.formEl.form.addControl(this.name, control);
+            }
+            if (control) {
+                this.control = control;
+                this.syncState(control);
+                this.unsubscribe = control.stateChanges(() => {
+                    this.syncState(control);
+                });
+                // Update child component value
+                this.updateChildValue(control.value);
+            }
+        }
+    }
+    syncState(control) {
+        if (control.touched || control.dirty) {
+            this.validateStatus = control.invalid ? 'error' : (control.pending ? 'validating' : 'success');
+            if (control.errors && !this.help) {
+                this.errorMessage = Object.values(control.errors)[0];
+            }
+            else {
+                this.errorMessage = '';
+            }
+        }
+        const internalControl = control;
+        const validators = (internalControl._validators || internalControl.validators || []);
+        const isRequired = Array.isArray(validators) && validators.some((v) => v.name === 'required' ||
+            (v.toString && v.toString().includes('required')) ||
+            (v.validator && v.validator.name === 'required'));
+        if (isRequired && !this.required) {
+            this.required = true;
+        }
+    }
+    updateChildValue(value) {
+        const input = this.el.querySelector('x-input, x-input-number, x-select, x-checkbox, x-switch');
+        if (input && input[this.valuePropName] !== value) {
+            input[this.valuePropName] = value;
+        }
+    }
+    handleControlChange = (ev) => {
+        if (this.control && this.name) {
+            const detail = ev.detail;
+            const value = detail?.[this.valuePropName] !== undefined
+                ? detail[this.valuePropName]
+                : (detail?.value !== undefined ? detail.value : ev.target[this.valuePropName]);
+            this.control.setValue(value);
+            this.control.markAsDirty();
+        }
+    };
+    handleControlBlur = () => {
+        if (this.control) {
+            this.control.markAsTouched();
+        }
+    };
+    componentDidLoad() {
+        // Listen to changes from child inputs
+        this.el.addEventListener('xChange', this.handleControlChange);
+        this.el.addEventListener('xBlur', this.handleControlBlur);
+    }
+    render() {
+        const displayHelp = this.help || this.errorMessage;
+        const layout = this.layout || this.parentLayout || 'horizontal';
+        const isHorizontal = layout === 'horizontal';
+        const isVertical = layout === 'vertical';
+        const isInline = layout === 'inline';
+        const showColon = this.el.hasAttribute('colon') ? this.colon : this.parentColon;
+        const hideMark = this.parentHideRequiredMark;
+        return (h(Host, { key: '9e53e5534b7091f5041150f831adec589cffa581', class: {
+                'x-form-item': true,
+                'x-form-item-with-help': !!displayHelp,
+                'x-form-item-has-error': this.validateStatus === 'error',
+                'x-form-item-has-warning': this.validateStatus === 'warning',
+                'x-form-item-has-success': this.validateStatus === 'success',
+                'x-form-item-validating': this.validateStatus === 'validating',
+                'x-form-item-has-feedback': this.hasFeedback,
+                'x-form-item-horizontal': isHorizontal,
+                'x-form-item-vertical': isVertical,
+                'x-form-item-inline': isInline,
+            } }, h("div", { key: 'c5dd09be09f559f986fb4d36c70f5c391622b107', class: "x-form-item-row" }, this.label && (h("div", { key: 'f77d9c4d9b5241a540546b9d674178f375e92c6d', class: {
+                'x-form-item-label': true,
+                ...(typeof this.labelCol === 'string' ? { [this.labelCol]: true } : {}),
+                [`x-form-item-label-${this.labelAlign || this.parentLabelAlign || 'right'}`]: true
+            }, style: typeof this.labelCol === 'object' && this.labelCol?.span ? {
+                flex: `0 0 ${(this.labelCol.span / 24) * 100}%`,
+                maxWidth: `${(this.labelCol.span / 24) * 100}%`
+            } : {} }, h("label", { key: 'e4464d27147d1cee39619ad37cb7c5a6f9cb3139', class: {
+                'x-form-item-required': this.required && !hideMark,
+                'x-form-item-no-colon': !showColon
+            }, title: this.label }, this.label))), h("div", { key: '508207d8171598a5d2122eddc91ab9ddbedb8494', class: {
+                'x-form-item-control': true,
+                ...(typeof this.wrapperCol === 'string' ? { [this.wrapperCol]: true } : {})
+            }, style: typeof this.wrapperCol === 'object' && this.wrapperCol?.span ? {
+                flex: `0 0 ${(this.wrapperCol.span / 24) * 100}%`,
+                maxWidth: `${(this.wrapperCol.span / 24) * 100}%`
+            } : {} }, h("div", { key: 'b47d5161aaf6f42cd47781118b11094c599e240b', class: "x-form-item-control-input" }, h("div", { key: '3437bb735c66cafb7c463f7be885f19470fdf137', class: "x-form-item-control-input-content" }, h("slot", { key: '7f8b3ce874b4281e3a3f9eec36fe1f2a7a772a44' })), this.hasFeedback && this.validateStatus && (h("span", { key: '4e032dde91980865acc598ecb093d293f1188fa7', class: "x-form-item-children-icon" }, this.validateStatus === 'success' && (h("span", { key: 'b7af17e662a03db206209e6ac5fbb8e43630d2d5', role: "img", "aria-label": "check-circle", class: "anticon anticon-check-circle" }, h("svg", { key: '14772b5dbf639304b9fc6dc3fc64355a45ca880d', viewBox: "64 64 896 896", focusable: "false", "data-icon": "check-circle", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '1f5f902d9fd9cca98d5c6e0858a98bafcc346ae5', d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z" })))), this.validateStatus === 'error' && (h("span", { key: 'a26ddb33d965813b3b07c20579f96ea37a5ea5b7', role: "img", "aria-label": "close-circle", class: "anticon anticon-close-circle" }, h("svg", { key: 'c5a5ecb10bcbbb892a339747122e8245f0f19543', viewBox: "64 64 896 896", focusable: "false", "data-icon": "close-circle", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '5ad8e00a4a77691849eaede2b8a23baaf029805f', d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z" })))), this.validateStatus === 'warning' && (h("span", { key: '7ebd6dd058a5c99ac84a9d2941d89638b2b1e52a', role: "img", "aria-label": "exclamation-circle", class: "anticon anticon-exclamation-circle" }, h("svg", { key: 'b3e076d376e5b977fa8a7a3aeed8e827d393e340', viewBox: "64 64 896 896", focusable: "false", "data-icon": "exclamation-circle", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '57965d3b6febe5754bff10a1971e2a6f7e6f742c', d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" })))), this.validateStatus === 'validating' && (h("span", { key: 'c6f937df1576cf819f82b781a51b4251327e58d0', role: "img", "aria-label": "loading", class: "anticon anticon-loading" }, h("svg", { key: '0ddc19bd99b81eb8d9cbfeef27713a84738821bc', viewBox: "0 0 1024 1024", focusable: "false", "data-icon": "loading", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true", class: "anticon-spin" }, h("path", { key: '4170c00b2eb78bca579c05afcde8c6f74b2534f6', d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" }))))))), displayHelp && (h("div", { key: 'c0fee0d5924b829c6e83fdde04e6f6b8083763c6', class: "x-form-item-explain" }, h("div", { key: '95dfa6a1a8d9643934e09c13ec7266fd8e824df4', role: "alert" }, displayHelp))), this.extra && (h("div", { key: 'b71cc65d15e1eae8ce0a904d0db956c0f549dcce', class: "x-form-item-extra" }, this.extra))))));
+    }
+    static get is() { return "x-form-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-form-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-form-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-form-item label=\"Email\"></x-form-item>"
+                        }],
+                    "text": "Label text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "validateStatus": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'success' | 'warning' | 'error' | 'validating'",
+                    "resolved": "\"error\" | \"success\" | \"validating\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-form-item validateStatus=\"error\"></x-form-item>"
+                        }],
+                    "text": "The validation status. If not provided, it will be automatically inferred from the form control."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "validate-status"
+            },
+            "help": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-form-item help=\"Required\"></x-form-item>"
+                        }],
+                    "text": "The help message. If not provided, it will be automatically inferred from the form control errors."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "help"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-form-item required label=\"Name\"></x-form-item>"
+                        }],
+                    "text": "Whether to show the required mark. If not provided, it will be automatically inferred from the form control validators."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "colon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-form-item colon={false} label=\"Name\"></x-form-item>"
+                        }],
+                    "text": "Whether to show the colon after label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "colon",
+                "defaultValue": "true"
+            },
+            "hasFeedback": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-form-item hasFeedback validateStatus=\"success\"></x-form-item>"
+                        }],
+                    "text": "Whether to show the feedback icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-feedback",
+                "defaultValue": "false"
+            },
+            "labelCol": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-form-item labelCol=\"span: 6\"></x-form-item>"
+                        }],
+                    "text": "Label column layout (e.g. span)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-col"
+            },
+            "wrapperCol": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-form-item wrapperCol=\"span: 18\"></x-form-item>"
+                        }],
+                    "text": "Wrapper column layout"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "wrapper-col"
+            },
+            "labelAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right' | 'center'",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label alignment in horizontal layout"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-align"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical' | 'inline'",
+                    "resolved": "\"horizontal\" | \"inline\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Form layout (overrides parent x-form layout)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field name for form binding"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "valuePropName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Props of children node, for example checkbox should be 'checked'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value-prop-name",
+                "defaultValue": "'value'"
+            },
+            "extra": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Extra prompt message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "extra"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "control": {},
+            "status": {},
+            "errorMessage": {},
+            "parentLayout": {},
+            "parentColon": {},
+            "parentHideRequiredMark": {},
+            "parentLabelAlign": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "name",
+                "methodName": "nameChanged"
+            }];
+    }
+}