@xlabs-store/core 0.0.2 → 0.0.3

package/dist/collection/components/x-form-builder/utils/condition-engine.js

@@ -51,12 +51,26 @@ export 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));
@@ -64,7 +78,13 @@ export 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));
@@ -90,24 +110,46 @@ export 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:

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

@@ -191,6 +191,15 @@ export class XFormBuilder {
                 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 (h("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: `repeat(12, minmax(0, 1fr))`,
+                    gap: `${field.gap || 15}px`,
+                    width: '100%',
+                } }, items.map((item) => (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;
@@ -455,7 +464,16 @@ export class XFormBuilder {
                 dataIndex: col.dataIndex || col.key,
                 slot: col.actions ? col.slot || col.key || 'action' : col.slot,
             }));
-            return (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 (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);
                     }
@@ -463,7 +481,7 @@ export class XFormBuilder {
                     console.log('x-form-builder: Table changed:', ev.detail);
                 } }, columns
                 .filter(col => col.actions)
-                .map(col => (f.dataSource || []).map((record, index) => (h("div", { slot: `${col.slot}-${index}`, style: { display: 'flex', gap: '8px' } }, (col.actions || []).map(action => {
+                .map(col => (dataSource || []).map((record, index) => (h("div", { slot: `${col.slot}-${index}`, style: { display: 'flex', gap: '8px' } }, (col.actions || []).map(action => {
                 const button = (h("x-button", { type: action.type === 'button' ? 'primary' : 'link', size: "small", danger: action.danger, onClick: e => {
                         e.stopPropagation();
                         this.xTableAction.emit({
@@ -517,6 +535,29 @@ export class XFormBuilder {
             }
             return (h("x-tabs", { activeKey: activeKey, tabPlacement: f.tabPlacement || 'top', type: tabsType, editable: allowRename, hideAdd: !allowAdd, onXTabRename: onRename, onXEdit: onEdit }, items.map(item => (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 (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 });
+                        }
+                    }
+                } }, h("slot", { name: slotName }, 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'
+                } }, h("span", { style: { fontSize: '24px' } }, "\uD83E\uDDE9"), h("span", null, "Dynamic slot \"", slotName, "\" is empty or not configured")))));
+        };
         return {
             'text': InputCallback,
             'input': InputCallback,
@@ -556,6 +597,9 @@ export class XFormBuilder {
             'button': ButtonCallback,
             'href': HrefCallback,
             'grid': GridCallback,
+            'columns': ColumnsCallback,
+            'columns-3': ColumnsCallback,
+            'columns-4': ColumnsCallback,
             'table': TableCallback,
             'maps': MapsCallback,
             'panel': PanelCallback,
@@ -564,9 +608,50 @@ export class XFormBuilder {
             '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())) {
@@ -591,9 +676,9 @@ export class XFormBuilder {
                 }
             }
         }
-        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,
@@ -615,7 +700,7 @@ export class XFormBuilder {
             this.formError.emit({
                 builder: this.builder,
                 event: event,
-                errors: this.builder.form.errors,
+                errors: { ...this.builder.form.errors, ...dynamicErrors },
             });
         }
     }
@@ -678,7 +763,8 @@ export class XFormBuilder {
         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);
@@ -727,6 +813,10 @@ export class XFormBuilder {
     componentWillLoad() {
         this.asyncBuilderForm(true);
     }
+    componentDidUpdate() {
+    }
+    disconnectedCallback() {
+    }
     handleValueChange() {
         if (this._isInternalChange)
             return;