@xlabs-store/core 0.0.2 → 0.0.3

package/dist/cjs/index.cjs.js

@@ -2,8 +2,8 @@
 
 var notificationService = require('./notification-service-v7LRmTyh.js');
 var modalService = require('./modal-service-FQpCPk_L.js');
-var schemaBuilder = require('./schema-builder-BKX4QdTc.js');
-var icons = require('./icons-DJ-kuboh.js');
+var schemaBuilder = require('./schema-builder-DAwDwgIM.js');
+var icons = require('./icons-BfHE2jcr.js');
 require('./portal-controller-DJft2QkA.js');
 require('./locale.service-DT6E8Rzd.js');
 

package/dist/cjs/{schema-builder-BKX4QdTc.js → schema-builder-DAwDwgIM.js}

@@ -92,12 +92,26 @@ function evaluateCondition(condition, formValues, context) {
     const result = (() => {
         switch (operator) {
             case 'equals':
+                if ((typeof actualValue === 'string' && typeof expectedValue === 'number') ||
+                    (typeof actualValue === 'number' && typeof expectedValue === 'string')) {
+                    return String(actualValue) === String(expectedValue);
+                }
                 return actualValue === expectedValue;
             case 'notEquals':
+                if ((typeof actualValue === 'string' && typeof expectedValue === 'number') ||
+                    (typeof actualValue === 'number' && typeof expectedValue === 'string')) {
+                    return String(actualValue) !== String(expectedValue);
+                }
                 return actualValue !== expectedValue;
             case 'contains':
                 if (Array.isArray(actualValue)) {
-                    return actualValue.includes(expectedValue);
+                    return actualValue.some(item => {
+                        if ((typeof item === 'string' && typeof expectedValue === 'number') ||
+                            (typeof item === 'number' && typeof expectedValue === 'string')) {
+                            return String(item) === String(expectedValue);
+                        }
+                        return item === expectedValue;
+                    });
                 }
                 if (typeof actualValue === 'string') {
                     return actualValue.includes(String(expectedValue));
@@ -105,7 +119,13 @@ function evaluateCondition(condition, formValues, context) {
                 return false;
             case 'notContains':
                 if (Array.isArray(actualValue)) {
-                    return !actualValue.includes(expectedValue);
+                    return !actualValue.some(item => {
+                        if ((typeof item === 'string' && typeof expectedValue === 'number') ||
+                            (typeof item === 'number' && typeof expectedValue === 'string')) {
+                            return String(item) === String(expectedValue);
+                        }
+                        return item === expectedValue;
+                    });
                 }
                 if (typeof actualValue === 'string') {
                     return !actualValue.includes(String(expectedValue));
@@ -131,24 +151,46 @@ function evaluateCondition(condition, formValues, context) {
                 return String(actualValue).endsWith(String(expectedValue));
             case 'in':
                 if (Array.isArray(expectedValue)) {
-                    return expectedValue.includes(actualValue);
+                    return expectedValue.some(item => {
+                        if ((typeof item === 'string' && typeof actualValue === 'number') ||
+                            (typeof item === 'number' && typeof actualValue === 'string')) {
+                            return String(item) === String(actualValue);
+                        }
+                        return item === actualValue;
+                    });
                 }
                 if (typeof expectedValue === 'string') {
                     return expectedValue
                         .split(',')
                         .map(v => v.trim())
-                        .includes(String(actualValue));
+                        .some(item => {
+                        if (typeof actualValue === 'number') {
+                            return item === String(actualValue);
+                        }
+                        return item === actualValue;
+                    });
                 }
                 return false;
             case 'notIn':
                 if (Array.isArray(expectedValue)) {
-                    return !expectedValue.includes(actualValue);
+                    return !expectedValue.some(item => {
+                        if ((typeof item === 'string' && typeof actualValue === 'number') ||
+                            (typeof item === 'number' && typeof actualValue === 'string')) {
+                            return String(item) === String(actualValue);
+                        }
+                        return item === actualValue;
+                    });
                 }
                 if (typeof expectedValue === 'string') {
                     return !expectedValue
                         .split(',')
                         .map(v => v.trim())
-                        .includes(String(actualValue));
+                        .some(item => {
+                        if (typeof actualValue === 'number') {
+                            return item === String(actualValue);
+                        }
+                        return item === actualValue;
+                    });
                 }
                 return true;
             default:
@@ -179,16 +221,30 @@ class ConditionOperators {
     }
     equals(option, field, value) {
         value = ValueUtil.detect(field, value);
+        if ((typeof value === 'string' && typeof option.value === 'number') ||
+            (typeof value === 'number' && typeof option.value === 'string')) {
+            return String(value) === String(option.value);
+        }
         return option.value === value;
     }
     notEquals(option, field, value) {
         value = ValueUtil.detect(field, value);
+        if ((typeof value === 'string' && typeof option.value === 'number') ||
+            (typeof value === 'number' && typeof option.value === 'string')) {
+            return String(value) !== String(option.value);
+        }
         return option.value !== value;
     }
     contains(option, field, value) {
         value = ValueUtil.detect(field, value);
         if (Array.isArray(value)) {
-            return value.includes(option.value);
+            return value.some(item => {
+                if ((typeof item === 'string' && typeof option.value === 'number') ||
+                    (typeof item === 'number' && typeof option.value === 'string')) {
+                    return String(item) === String(option.value);
+                }
+                return item === option.value;
+            });
         }
         if (typeof value === 'string') {
             return value.includes(String(option.value));
@@ -222,7 +278,13 @@ class ConditionOperators {
     notContains(option, field, value) {
         value = ValueUtil.detect(field, value);
         if (Array.isArray(value)) {
-            return !value.includes(option.value);
+            return !value.some(item => {
+                if ((typeof item === 'string' && typeof option.value === 'number') ||
+                    (typeof item === 'number' && typeof option.value === 'string')) {
+                    return String(item) === String(option.value);
+                }
+                return item === option.value;
+            });
         }
         if (typeof value === 'string') {
             return !value.includes(String(option.value));
@@ -262,26 +324,48 @@ class ConditionOperators {
     in(option, field, value) {
         value = ValueUtil.detect(field, value);
         if (Array.isArray(option.value)) {
-            return option.value.includes(value);
+            return option.value.some(item => {
+                if ((typeof item === 'string' && typeof value === 'number') ||
+                    (typeof item === 'number' && typeof value === 'string')) {
+                    return String(item) === String(value);
+                }
+                return item === value;
+            });
         }
         if (typeof option.value === 'string') {
             return option.value
                 .split(',')
                 .map(v => v.trim())
-                .includes(String(value));
+                .some(item => {
+                if (typeof value === 'number') {
+                    return item === String(value);
+                }
+                return item === value;
+            });
         }
         return false;
     }
     notIn(option, field, value) {
         value = ValueUtil.detect(field, value);
         if (Array.isArray(option.value)) {
-            return !option.value.includes(value);
+            return !option.value.some(item => {
+                if ((typeof item === 'string' && typeof value === 'number') ||
+                    (typeof item === 'number' && typeof value === 'string')) {
+                    return String(item) === String(value);
+                }
+                return item === value;
+            });
         }
         if (typeof option.value === 'string') {
             return !option.value
                 .split(',')
                 .map(v => v.trim())
-                .includes(String(value));
+                .some(item => {
+                if (typeof value === 'number') {
+                    return item === String(value);
+                }
+                return item === value;
+            });
         }
         return true;
     }
@@ -1403,8 +1487,8 @@ class FormMapping extends FormGroup {
                     // Safely merge Maps
                     child_paths.forEach((v, k) => paths.set(k, v));
                 }
-                // Support tabs mapping recursively
-                if (field.type === 'tabs' && field.items && Array.isArray(field.items)) {
+                // Support tabs and columns mapping recursively
+                if ((field.type === 'tabs' || String(field.type).startsWith('columns-')) && field.items && Array.isArray(field.items)) {
                     for (const item of field.items) {
                         if (item && Array.isArray(item.elements)) {
                             const child_paths = mappingRecursive(item.elements);

package/dist/cjs/x-address_51.cjs.entry.js

@@ -4,7 +4,7 @@ var index = require('./index-Cy2P_ln3.js');
 var portalController = require('./portal-controller-DJft2QkA.js');
 var config = require('./config-BYR5qIIZ.js');
 var locale_service = require('./locale.service-DT6E8Rzd.js');
-var schemaBuilder = require('./schema-builder-BKX4QdTc.js');
+var schemaBuilder = require('./schema-builder-DAwDwgIM.js');
 var abstractControl = require('./abstract-control-JI4_szTV.js');
 var tree_service = require('./tree.service-u0qqS1Qh.js');
 
@@ -10265,6 +10265,15 @@ const XFormBuilder = class {
                 gridTemplateColumns: `repeat(${field.columns || 12}, minmax(0, 1fr))`,
                 gap: `${field.gap || 15}px`,
             } }, 'elements' in field && field.elements ? this.bind(field.elements, field) : null));
+        const ColumnsCallback = (field) => {
+            const items = field.items || [];
+            return (index.h("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: `repeat(12, minmax(0, 1fr))`,
+                    gap: `${field.gap || 15}px`,
+                    width: '100%',
+                } }, items.map((item) => (index.h("div", { style: { gridColumn: `span ${item.span || 12}` }, key: item.key }, item.elements ? this.bind(item.elements, field) : null)))));
+        };
         const MapsCallback = (field) => {
             const width = field.width || '100%';
             const height = field.height || 400;
@@ -10529,7 +10538,16 @@ const XFormBuilder = class {
                 dataIndex: col.dataIndex || col.key,
                 slot: col.actions ? col.slot || col.key || 'action' : col.slot,
             }));
-            return (index.h("x-table", { ...commonProps, columns: columns, dataSource: (field.control ? field.control.value : f.dataSource) || [], rowKey: f.rowKey || 'id', tableTitle: f.tableTitle, pagination: f.pagination, tableScroll: f.tableScroll, rowSelection: f.rowSelection, size: f.size, bordered: f.bordered, loading: f.loading, showHeader: f.showHeader, emptyText: f.emptyText, resizableColumns: f.resizableColumns, draggableColumns: f.draggableColumns, draggableRows: f.draggableRows, sticky: f.sticky, onXSelectionChange: ev => {
+            const controlVal = field.control?.value;
+            const isValArrayOfObjects = Array.isArray(controlVal) && controlVal.length > 0 && typeof controlVal[0] === 'object';
+            const dataSource = isValArrayOfObjects ? controlVal : (f.dataSource || []);
+            const rowSelection = f.rowSelection
+                ? {
+                    ...f.rowSelection,
+                    selectedRowKeys: Array.isArray(controlVal) && !isValArrayOfObjects ? controlVal : [],
+                }
+                : undefined;
+            return (index.h("x-table", { ...commonProps, columns: columns, dataSource: dataSource, rowKey: f.rowKey || 'id', tableTitle: f.tableTitle, pagination: f.pagination, tableScroll: f.tableScroll, rowSelection: rowSelection, size: f.size, bordered: f.bordered, loading: f.loading, showHeader: f.showHeader, emptyText: f.emptyText, resizableColumns: f.resizableColumns, draggableColumns: f.draggableColumns, draggableRows: f.draggableRows, sticky: f.sticky, onXSelectionChange: ev => {
                     if (f.rowSelection) {
                         onChange(ev.detail.selectedRowKeys);
                     }
@@ -10537,7 +10555,7 @@ const XFormBuilder = class {
                     console.log('x-form-builder: Table changed:', ev.detail);
                 } }, columns
                 .filter(col => col.actions)
-                .map(col => (f.dataSource || []).map((record, index$1) => (index.h("div", { slot: `${col.slot}-${index$1}`, style: { display: 'flex', gap: '8px' } }, (col.actions || []).map(action => {
+                .map(col => (dataSource || []).map((record, index$1) => (index.h("div", { slot: `${col.slot}-${index$1}`, style: { display: 'flex', gap: '8px' } }, (col.actions || []).map(action => {
                 const button = (index.h("x-button", { type: action.type === 'button' ? 'primary' : 'link', size: "small", danger: action.danger, onClick: e => {
                         e.stopPropagation();
                         this.xTableAction.emit({
@@ -10591,6 +10609,29 @@ const XFormBuilder = class {
             }
             return (index.h("x-tabs", { activeKey: activeKey, tabPlacement: f.tabPlacement || 'top', type: tabsType, editable: allowRename, hideAdd: !allowAdd, onXTabRename: onRename, onXEdit: onEdit }, items.map(item => (index.h("x-tab-pane", { key: item.key, paneKey: item.key, tab: item.label, disabled: item.disabled, icon: item.icon, closable: allowRemove && item.closable !== false }, this.bind(item.elements, field))))));
         };
+        const DynamicCallback = (field) => {
+            const slotName = field.meta?.slot || field.metadata?.slot || field.name;
+            return (index.h("div", { class: "x-dynamic-field-container", ...{
+                    onXChange: (e) => {
+                        if (field.control && e.detail && 'value' in e.detail) {
+                            field.control.setValue(e.detail.value, { emitEvent: false });
+                        }
+                    }
+                } }, index.h("slot", { name: slotName }, index.h("div", { style: {
+                    height: '300px',
+                    width: '100%',
+                    border: '1px dashed #d1d5db',
+                    borderRadius: '8px',
+                    backgroundColor: '#f9fafb',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    color: '#9ca3af',
+                    fontSize: '13px',
+                    gap: '8px'
+                } }, index.h("span", { style: { fontSize: '24px' } }, "\uD83E\uDDE9"), index.h("span", null, "Dynamic slot \"", slotName, "\" is empty or not configured")))));
+        };
         return {
             'text': InputCallback,
             'input': InputCallback,
@@ -10630,6 +10671,9 @@ const XFormBuilder = class {
             'button': ButtonCallback,
             'href': HrefCallback,
             'grid': GridCallback,
+            'columns': ColumnsCallback,
+            'columns-3': ColumnsCallback,
+            'columns-4': ColumnsCallback,
             'table': TableCallback,
             'maps': MapsCallback,
             'panel': PanelCallback,
@@ -10638,9 +10682,50 @@ const XFormBuilder = class {
             'qr-code': QRCodeCallback,
             'tabs': TabsCallback,
             'range-picker': DateRangeCallback,
+            'dynamic': DynamicCallback,
         };
     }
     async submit(event, field) {
+        // Gather values from dynamic slots first
+        let dynamicValues = {};
+        let allDynamicValid = true;
+        let dynamicErrors = {};
+        if (this.builder && this.builder.form) {
+            const dynamicFields = Array.from(this.builder.form.mapping.values()).filter(f => f.type === 'dynamic');
+            for (const dField of dynamicFields) {
+                const slotName = dField.meta?.slot || dField.metadata?.slot || dField.name;
+                // Search for slotted elements in light DOM (children of this.el)
+                const slottedElement = Array.from(this.el.children).find(child => child.getAttribute('slot') === slotName);
+                if (slottedElement) {
+                    let val = slottedElement.value;
+                    if (val === undefined && dField.control) {
+                        val = dField.control.value;
+                    }
+                    // Update internal control so built-in validators (like required) pass
+                    if (dField.control && val !== undefined) {
+                        dField.control.setValue(val, { emitEvent: false });
+                    }
+                    // Check if it has a validate method
+                    if (typeof slottedElement.validate === 'function') {
+                        const res = await slottedElement.validate(val);
+                        if (res) {
+                            allDynamicValid = false;
+                            dynamicErrors[dField.name] = res;
+                            slottedElement.validationState = {
+                                status: 'invalid',
+                                errorMessage: typeof res === 'object' ? Object.values(res)[0] : 'Invalid',
+                                errors: res
+                            };
+                        }
+                        else {
+                            slottedElement.validationState = { status: 'valid', errors: null, errorMessage: '' };
+                        }
+                    }
+                    // Merge value
+                    dynamicValues[dField.name] = val;
+                }
+            }
+        }
         // Validate all mapped controls (both sync and async) first to ensure errors are updated
         if (this.builder && this.builder.form) {
             for (const [_key, fld] of Array.from(this.builder.form.mapping.entries())) {
@@ -10665,9 +10750,9 @@ const XFormBuilder = class {
                 }
             }
         }
-        if (this.builder.form.valid && allCaptchaValid) {
+        if (this.builder.form.valid && allCaptchaValid && allDynamicValid) {
             this.formSubmit.emit({
-                value: this.builder.form.value,
+                value: { ...this.builder.form.value, ...dynamicValues },
                 builder: this.builder,
                 event: event,
                 field,
@@ -10689,7 +10774,7 @@ const XFormBuilder = class {
             this.formError.emit({
                 builder: this.builder,
                 event: event,
-                errors: this.builder.form.errors,
+                errors: { ...this.builder.form.errors, ...dynamicErrors },
             });
         }
     }
@@ -10752,7 +10837,8 @@ const XFormBuilder = class {
         const control = field.control;
         if (control && this.builder && control.touched) {
             commonProps.status = undefined;
-            if (control.invalid) {
+            // Bỏ qua hiển thị lỗi nội bộ của x-form-builder cho các trường dynamic vì client tự quản lý
+            if (control.invalid && field.type !== 'dynamic') {
                 commonProps.status = 'error';
                 const errors = control.errors ?? {};
                 const messages = this.getMessageValidator(field, errors);
@@ -10801,6 +10887,10 @@ const XFormBuilder = class {
     componentWillLoad() {
         this.asyncBuilderForm(true);
     }
+    componentDidUpdate() {
+    }
+    disconnectedCallback() {
+    }
     handleValueChange() {
         if (this._isInternalChange)
             return;
@@ -20499,6 +20589,9 @@ const XTable = class {
         if (column.maxWidth) {
             style.maxWidth = `${column.maxWidth}px`;
         }
+        if (column.width) {
+            style.width = typeof column.width === 'number' ? `${column.width}px` : column.width;
+        }
         // Sticky
         // Find the leaf columns to determine sticky offsets
         const leaves = ColumnUtil.getFlattenColumns([column]);
@@ -20691,6 +20784,9 @@ const XTable = class {
             cellContent = column.render ? column.render(value, record, index$1) : value;
         }
         const style = {};
+        if (column.width) {
+            style.width = typeof column.width === 'number' ? `${column.width}px` : column.width;
+        }
         // Sticky
         const key = column.key || column.dataIndex;
         const isFixedLeft = column.fixed === 'left' || column.fixed === true;
@@ -20893,10 +20989,17 @@ const XTable = class {
      */
     render() {
         const scrollStyle = {};
+        const innerTableStyle = {};
         if (this.tableScroll?.x) {
             scrollStyle.overflowX = 'auto';
             if (typeof this.tableScroll.x === 'number') {
-                scrollStyle.minWidth = `${this.tableScroll.x}px`;
+                innerTableStyle.minWidth = `${this.tableScroll.x}px`;
+            }
+            else if (typeof this.tableScroll.x === 'string') {
+                innerTableStyle.minWidth = this.tableScroll.x;
+            }
+            else if (this.tableScroll.x === true) {
+                innerTableStyle.minWidth = 'max-content';
             }
         }
         if (this.tableScroll?.y) {
@@ -20924,17 +21027,18 @@ const XTable = class {
             total,
             startIndex,
         });
-        return (index.h(index.Host, { key: 'eaf4a6cf70d130e87188308bfd7bfb562cd01ba7', class: {
+        return (index.h(index.Host, { key: '76c750528d53df24f767afdc0d53e90c901f113f', class: {
                 'x-table': true,
                 'x-table-bordered': this.bordered,
                 'x-table-loading': this.loading,
                 [`x-table-${this.size}`]: true,
                 'x-table-sticky': !!this.sticky || !!this.tableScroll?.y,
                 [this.classNames?.root || '']: !!this.classNames?.root,
-            }, style: this.styles?.root }, index.h("div", { key: '96dc817e5ed149fda58e1e775ad9321cc667841c', class: "x-table-wrapper" }, this.renderTitle(), topPagination && this.renderPagination('top'), index.h("div", { key: 'a746ceefce9e30cd3f856ff61e9f84299ca211cc', class: "x-table-container" }, this.loading && (index.h("div", { key: 'c65e55ba96dc9ff93630c1cdf7fc5c7da76b18ae', class: "x-table-loading-overlay" }, index.h("x-spin", { key: 'd86580a956df1ee08c58454eb519f2cb78a16b8b' }))), index.h("div", { key: 'c526fe4cae8ce289d266ed97109d0fb57f3c48b3', class: "x-table-content", style: scrollStyle }, index.h("table", { key: '8e4ce3903cf364956c08ff0395a354edbb7ee536', style: {
+            }, style: this.styles?.root }, index.h("div", { key: '5af6bb4b50f3e790f1eb15d1c15c262f4ff8ea29', class: "x-table-wrapper" }, this.renderTitle(), topPagination && this.renderPagination('top'), index.h("div", { key: '71578d15387263765f1ef603520d2e7b668c1476', class: "x-table-container" }, this.loading && (index.h("div", { key: '17eaf05d5f7884e606a26c5ee64ad23bb495e0af', class: "x-table-loading-overlay" }, index.h("x-spin", { key: '69fe0249701f71a9dab737d54e6c848fdbce9111' }))), index.h("div", { key: '37d0f9e25159256389c8b137236ffd20c2575a88', class: "x-table-content", style: scrollStyle }, index.h("table", { key: '511af98bedf1b8fc0a2b2f1a07fb22b9d7d4675a', style: {
                 ...tableStyle,
+                ...innerTableStyle,
                 tableLayout: this.resizeState || this.internalColumns.some(c => c.width) ? 'fixed' : this.tableLayout,
-            } }, this.renderColGroup(), this.renderHeader(stickyOffsets), this.renderBody(stickyOffsets)))), (bottomPagination || this.tableFooter) && (index.h("div", { key: '7e012c2a718b535225d3b9f9a2e1639bbb5bf23e', class: "x-table-footer-pagination" }, this.renderFooter(), bottomPagination && this.renderPagination('bottom'))))));
+            } }, this.renderColGroup(), this.renderHeader(stickyOffsets), this.renderBody(stickyOffsets)))), (bottomPagination || this.tableFooter) && (index.h("div", { key: '3bd5751883e4d30519d81cc6ade817c0a13951cc', class: "x-table-footer-pagination" }, this.renderFooter(), bottomPagination && this.renderPagination('bottom'))))));
     }
     static get watchers() { return {
         "rowKey": [{

package/dist/cjs/x-icon-picker-dropdown-content.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Cy2P_ln3.js');
-var icons = require('./icons-DJ-kuboh.js');
+var icons = require('./icons-BfHE2jcr.js');
 var locale_service = require('./locale.service-DT6E8Rzd.js');
 
 const iconPickerDropdownContentCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-text-processing:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',     'Noto Color Emoji';--x-font-family-code:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:block}.x-icon-picker-panel{width:var(--x-input-icon-panel-width, 300px);background-color:var(--x-input-icon-bg, var(--x-control-bg, var(--x-color-bg-container, #ffffff)));border-radius:var(--x-input-icon-item-border-radius, var(--x-border-radius));-webkit-box-shadow:var(--x-box-shadow);box-shadow:var(--x-box-shadow);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;position:relative;z-index:1050}.x-icon-picker-panel.x-date-picker-dropdown-hidden{display:none}.x-icon-picker-search{padding:8px 8px 0}.x-icon-picker-body{height:var(--x-input-icon-panel-height, 320px);overflow-y:auto;padding:8px 8px 4px}.x-icon-picker-body::-webkit-scrollbar{width:5px}.x-icon-picker-body::-webkit-scrollbar-thumb{background-color:var(--x-border-color-split);border-radius:4px}.x-icon-picker-body::-webkit-scrollbar-track{background:transparent}.x-icon-picker-group{margin-bottom:8px}.x-icon-picker-group:last-of-type{margin-bottom:0}.x-icon-picker-group-header{font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--x-text-color-secondary);padding:4px 2px 6px;line-height:1;border-bottom:1px solid var(--x-border-color-split);margin-bottom:6px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.x-icon-picker-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(36px, 1fr));gap:3px}.x-icon-picker-item{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:36px;width:100%;font-size:20px;border-radius:var(--x-border-radius-sm);cursor:pointer;-webkit-transition:background-color 0.15s ease, color 0.15s ease;transition:background-color 0.15s ease, color 0.15s ease;color:var(--x-text-color);overflow:hidden;white-space:nowrap}.x-icon-picker-item x-icon{max-width:100%;max-height:100%;overflow:hidden;pointer-events:none}.x-icon-picker-item:hover{background-color:var(--x-input-icon-item-hover-bg, var(--x-control-item-bg-hover));color:var(--x-primary-color)}.x-icon-picker-item-selected{background-color:var(--x-input-icon-item-active-bg, var(--x-control-item-bg-active));color:var(--x-input-icon-item-active-color, var(--x-primary-color))}.x-icon-picker-item-selected:hover{background-color:var(--x-input-icon-item-active-bg, var(--x-control-item-bg-active))}.x-icon-picker-empty{display:-ms-flexbox;display:flex;width:100%;height:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-height:120px}.x-icon-picker-sentinel{height:40px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-top:4px}.x-icon-picker-loading{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;opacity:0.5}.x-icon-picker-footer{font-size:11px;color:var(--x-text-color-quaternary, var(--x-text-color-secondary));text-align:center;padding:6px 4px 4px;border-top:1px solid var(--x-border-color-split);margin-top:6px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}`;

package/dist/collection/components/x-form-builder/services/schema/condition-builder.js

@@ -21,16 +21,30 @@ export class ConditionOperators {
     }
     equals(option, field, value) {
         value = ValueUtil.detect(field, value);
+        if ((typeof value === 'string' && typeof option.value === 'number') ||
+            (typeof value === 'number' && typeof option.value === 'string')) {
+            return String(value) === String(option.value);
+        }
         return option.value === value;
     }
     notEquals(option, field, value) {
         value = ValueUtil.detect(field, value);
+        if ((typeof value === 'string' && typeof option.value === 'number') ||
+            (typeof value === 'number' && typeof option.value === 'string')) {
+            return String(value) !== String(option.value);
+        }
         return option.value !== value;
     }
     contains(option, field, value) {
         value = ValueUtil.detect(field, value);
         if (Array.isArray(value)) {
-            return value.includes(option.value);
+            return value.some(item => {
+                if ((typeof item === 'string' && typeof option.value === 'number') ||
+                    (typeof item === 'number' && typeof option.value === 'string')) {
+                    return String(item) === String(option.value);
+                }
+                return item === option.value;
+            });
         }
         if (typeof value === 'string') {
             return value.includes(String(option.value));
@@ -64,7 +78,13 @@ export class ConditionOperators {
     notContains(option, field, value) {
         value = ValueUtil.detect(field, value);
         if (Array.isArray(value)) {
-            return !value.includes(option.value);
+            return !value.some(item => {
+                if ((typeof item === 'string' && typeof option.value === 'number') ||
+                    (typeof item === 'number' && typeof option.value === 'string')) {
+                    return String(item) === String(option.value);
+                }
+                return item === option.value;
+            });
         }
         if (typeof value === 'string') {
             return !value.includes(String(option.value));
@@ -104,26 +124,48 @@ export class ConditionOperators {
     in(option, field, value) {
         value = ValueUtil.detect(field, value);
         if (Array.isArray(option.value)) {
-            return option.value.includes(value);
+            return option.value.some(item => {
+                if ((typeof item === 'string' && typeof value === 'number') ||
+                    (typeof item === 'number' && typeof value === 'string')) {
+                    return String(item) === String(value);
+                }
+                return item === value;
+            });
         }
         if (typeof option.value === 'string') {
             return option.value
                 .split(',')
                 .map(v => v.trim())
-                .includes(String(value));
+                .some(item => {
+                if (typeof value === 'number') {
+                    return item === String(value);
+                }
+                return item === value;
+            });
         }
         return false;
     }
     notIn(option, field, value) {
         value = ValueUtil.detect(field, value);
         if (Array.isArray(option.value)) {
-            return !option.value.includes(value);
+            return !option.value.some(item => {
+                if ((typeof item === 'string' && typeof value === 'number') ||
+                    (typeof item === 'number' && typeof value === 'string')) {
+                    return String(item) === String(value);
+                }
+                return item === value;
+            });
         }
         if (typeof option.value === 'string') {
             return !option.value
                 .split(',')
                 .map(v => v.trim())
-                .includes(String(value));
+                .some(item => {
+                if (typeof value === 'number') {
+                    return item === String(value);
+                }
+                return item === value;
+            });
         }
         return true;
     }

package/dist/collection/components/x-form-builder/services/schema/form-mapping.js

@@ -46,8 +46,8 @@ export class FormMapping extends FormGroup {
                     // Safely merge Maps
                     child_paths.forEach((v, k) => paths.set(k, v));
                 }
-                // Support tabs mapping recursively
-                if (field.type === 'tabs' && field.items && Array.isArray(field.items)) {
+                // Support tabs and columns mapping recursively
+                if ((field.type === 'tabs' || String(field.type).startsWith('columns-')) && field.items && Array.isArray(field.items)) {
                     for (const item of field.items) {
                         if (item && Array.isArray(item.elements)) {
                             const child_paths = mappingRecursive(item.elements);