@xlabs-store/core 0.0.1 → 0.0.3

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

@@ -1,4 +1,4 @@
-import { h, } from "@stencil/core";
+import { h } from "@stencil/core";
 import { Utils } from "./utils/utils";
 import { SchemaBuilder } from "./services/schema/schema-builder";
 import { translate } from "../../locales/locale.service";
@@ -31,9 +31,12 @@ export class XFormBuilder {
         const settingValidationMessages = this.schema?.setting?.validateMessages || {};
         const defaultValidationMessages = Utils.messageValidator();
         const messages = Object.entries(errors).map(([errKey, errValue]) => {
-            const message = fieldValidationMessages[errKey] ||
+            let message = fieldValidationMessages[errKey] ||
                 settingValidationMessages[errKey] ||
                 defaultValidationMessages[errKey];
+            if (!message && errKey === 'captcha') {
+                message = field.message || field.error || 'Captcha is incorrect';
+            }
             return translate(message, {
                 ...errValue,
                 ...params,
@@ -43,14 +46,23 @@ export class XFormBuilder {
     }
     get mapping() {
         const InputCallback = (field) => {
-            const { commonProps, onChange } = this.getcommonProps(field);
+            const { commonProps, onChange, onPressEnter } = this.getcommonProps(field);
             const rerenderKey = field.id || field.name;
-            return (h("x-input", { key: rerenderKey, ...commonProps, type: field.type, value: field.control ? field.control.value : field.defaultValue || '', onXChange: onChange, onXBlur: () => field.control ? field.control.markAsTouched() : null }));
+            return (h("x-input", { key: rerenderKey, ...commonProps, type: field.type, value: field.control ? field.control.value : field.defaultValue || '', onXChange: onChange, onXPressEnter: onPressEnter, onXBlur: () => (field.control ? field.control.markAsTouched() : null) }));
         };
         const InputNumberCallback = (field) => {
-            const { commonProps, onChange } = this.getcommonProps(field);
+            const { commonProps, onChange: originalOnChange, onPressEnter } = this.getcommonProps(field);
             const f = field;
-            return (h("x-input-number", { ...commonProps, status: commonProps.status, min: f.min, max: f.max, step: f.step, precision: f.precision, controls: f.controls, stringMode: f.stringMode, onXChange: onChange }));
+            const maxLengthVal = f.maxLength ?? f.validators?.find(v => v.type === 'maxLength')?.value;
+            const onChange = (e) => {
+                const val = e.detail && typeof e.detail === 'object' && 'value' in e.detail ? e.detail.value : e.detail;
+                if (maxLengthVal !== undefined && val !== null && val !== undefined && String(val).length > maxLengthVal) {
+                    return;
+                }
+                originalOnChange(e);
+            };
+            const { minLength: _ml, maxLength: _xl, ...restProps } = commonProps;
+            return (h("x-input-number", { ...restProps, value: field.control ? field.control.value : field.defaultValue, status: commonProps.status, min: f.min, max: f.max, step: f.step, precision: f.precision, controls: f.controls, stringMode: f.stringMode, currency: f.currency, addonAfter: f.addonAfter, addonBefore: f.addonBefore, onXChange: onChange, onXPressEnter: onPressEnter }));
         };
         // Simple non-input renderers for remaining cases
         const DividerCallback = (field) => {
@@ -98,16 +110,12 @@ export class XFormBuilder {
             const href = field.href || field.value || '#';
             const target = field.target || '_self';
             const rel = field.rel || '';
-            const text = String(field.content ??
-                field.label ??
-                field.text ??
-                field.value ??
-                'Link');
+            const text = String(field.content ?? field.label ?? field.text ?? field.value ?? 'Link');
             const style = {
                 textAlign: align,
                 textDecoration: underline === false ? 'none' : 'underline',
             };
-            return (h("div", { style: style }, h("a", { href: href, target: target, rel: rel, "data-type": styleType, "data-ellipsis": ellipsis }, icon ? (h("i", { "data-icon": icon, style: { marginRight: '8px' } })) : null, h("span", null, text))));
+            return (h("div", { style: style }, h("a", { href: href, target: target, rel: rel, "data-type": styleType, "data-ellipsis": ellipsis }, icon ? h("i", { "data-icon": icon, style: { marginRight: '8px' } }) : null, h("span", null, text))));
         };
         const ImageCallback = (field) => {
             const align = field.align;
@@ -121,9 +129,7 @@ export class XFormBuilder {
             const align = field.align;
             const src = field.src || field.value || '';
             const size = field.size || 64;
-            const circle = field.circle === undefined || field.circle
-                ? '50%'
-                : '0';
+            const circle = field.circle === undefined || field.circle ? '50%' : '0';
             const alt = field.alt || '';
             return (h("div", { style: { margin: '8px 0', textAlign: align } }, h("img", { src: src, alt: alt, style: {
                     width: `${size}px`,
@@ -155,7 +161,7 @@ export class XFormBuilder {
             const fgColor = field.fgColor || '#000000';
             const includeMargin = !!field.includeMargin;
             const description = field.description;
-            return (h("div", { style: { width: '100%', margin: '8px 0', textAlign: align } }, h("div", { style: { display: 'inline-block' } }, label ? (h("div", { style: { marginBottom: '8px', fontWeight: '500' } }, String(label))) : null, h("div", { style: {
+            return (h("div", { style: { width: '100%', margin: '8px 0', textAlign: align } }, h("div", { style: { display: 'inline-block' } }, label ? h("div", { style: { marginBottom: '8px', fontWeight: '500' } }, String(label)) : null, h("div", { style: {
                     width: `${size}px`,
                     height: `${size}px`,
                     background: bgColor,
@@ -178,19 +184,22 @@ export class XFormBuilder {
                 border: '1px solid var(--x-border, #e5e7eb)',
                 borderRadius: '8px',
                 margin: '8px 0',
-            } }, 'elements' in field && field.elements
-            ? this.bind(field.elements, field)
-            : null));
-        const ContainerCallback = (field) => (h("div", { style: { margin: '8px 0' } }, 'elements' in field && field.elements
-            ? this.bind(field.elements, field)
-            : null));
+            } }, 'elements' in field && field.elements ? this.bind(field.elements, field) : null));
+        const ContainerCallback = (field) => (h("div", { style: { margin: '8px 0' } }, 'elements' in field && field.elements ? this.bind(field.elements, field) : null));
         const GridCallback = (field) => (h("div", { style: {
                 display: 'grid',
                 gridTemplateColumns: `repeat(${field.columns || 12}, minmax(0, 1fr))`,
                 gap: `${field.gap || 15}px`,
-            } }, 'elements' in field && field.elements
-            ? this.bind(field.elements, field)
-            : null));
+            } }, '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;
@@ -212,13 +221,7 @@ export class XFormBuilder {
                     alignItems: 'center',
                     justifyContent: 'center',
                     flexDirection: 'column',
-                    background: provider === 'google'
-                        ? '#e8f5e8'
-                        : provider === 'mapbox'
-                            ? '#f0f8ff'
-                            : provider === 'bing'
-                                ? '#fff7e6'
-                                : '#f0f0f0',
+                    background: provider === 'google' ? '#e8f5e8' : provider === 'mapbox' ? '#f0f8ff' : provider === 'bing' ? '#fff7e6' : '#f0f0f0',
                 } }, h("div", { style: { fontWeight: '500', marginBottom: '8px' } }, String(field.label || 'Interactive Map')), center ? (h("div", { style: {
                     color: '#666',
                     fontSize: '12px',
@@ -241,15 +244,13 @@ export class XFormBuilder {
         const RadioCallback = (field) => {
             const { commonProps, onChange } = this.getcommonProps(field);
             const f = field;
-            return (h("x-radio-group", { ...commonProps, value: field.control ? field.control.value : field.defaultValue, options: f.options || [], direction: f.direction || f.orientation || 'horizontal', onXChange: onChange }));
+            return (h("x-radio-group", { ...commonProps, value: field.control ? field.control.value : field.defaultValue, options: f.options || [], direction: f.direction || f.orientation || 'horizontal', placement: f.placement || 'end', onXChange: onChange }));
         };
         const CheckboxCallback = (field) => {
             const { commonProps, onChange } = this.getcommonProps(field);
             const f = field;
             const options = f.options || [];
-            const currentValue = field.control
-                ? field.control.value
-                : commonProps.defaultValue;
+            const currentValue = field.control ? field.control.value : commonProps.defaultValue;
             const isArray = Array.isArray(currentValue);
             const direction = f.direction || f.orientation || 'horizontal';
             const containerStyle = {
@@ -258,33 +259,26 @@ export class XFormBuilder {
                 flexWrap: 'wrap',
                 flexDirection: direction === 'vertical' ? 'column' : 'row',
             };
-            return (h("div", { style: { margin: '4px 0' } }, h("div", { style: containerStyle }, options.length > 0 ? (options.map((opt, idx) => (h("x-checkbox", { key: `${field.name}-${idx}`, ...commonProps, value: opt.value, disabled: opt.disabled || commonProps.disabled, onXChange: onChange, checked: isArray
-                    ? (currentValue || []).includes(opt.value)
-                    : currentValue === opt.value }, String(opt.label))))) : (h("x-checkbox", { ...commonProps, onXChange: onChange, checked: !!currentValue }, String(field.label))))));
+            return (h("div", { style: { margin: '4px 0' } }, h("div", { style: containerStyle }, options.length > 0 ? (options.map((opt, idx) => (h("x-checkbox", { key: `${field.name}-${idx}`, ...commonProps, value: opt.value, disabled: opt.disabled || commonProps.disabled, onXChange: onChange, checked: isArray ? (currentValue || []).includes(opt.value) : currentValue === opt.value, placement: opt.placement || f.placement || 'end' }, String(opt.label))))) : (h("x-checkbox", { ...commonProps, onXChange: onChange, checked: !!currentValue, placement: f.placement || 'end' }, String(field.label))))));
         };
         const DateLocaleCallback = (field) => {
             let { commonProps, onChange } = this.getcommonProps(field);
-            const minDate = field.min
-                ? new Date(field.min)
-                : undefined;
-            const maxDate = field.max
-                ? new Date(field.max)
-                : undefined;
+            const minDate = field.min ? new Date(field.min) : undefined;
+            const maxDate = field.max ? new Date(field.max) : undefined;
             const rawValue = field.control ? field.control.value : field.defaultValue;
-            return (h("x-date-picker", { ...commonProps, onXChange: onChange, picker: field.picker || 'date', format: field.format, placement: field.placement, minDate: minDate ? minDate.toISOString().split('T')[0] : undefined, maxDate: maxDate ? maxDate.toISOString().split('T')[0] : undefined, value: typeof rawValue === 'string'
+            const showTime = !!field.showTime;
+            return (h("x-date-picker", { ...commonProps, onXChange: onChange, picker: field.picker || 'date', format: field.format, placement: field.placement, showTime: showTime, minDate: minDate ? minDate.toISOString().split('T')[0] : undefined, maxDate: maxDate ? maxDate.toISOString().split('T')[0] : undefined, value: typeof rawValue === 'string'
                     ? rawValue
                     : rawValue instanceof Date
-                        ? rawValue.toISOString().split('T')[0]
+                        ? showTime
+                            ? rawValue.toISOString()
+                            : rawValue.toISOString().split('T')[0]
                         : '', size: commonProps.size }));
         };
         const DateTimeCallback = (field) => {
             let { commonProps, onChange } = this.getcommonProps(field);
-            const minDate = field.min
-                ? new Date(field.min)
-                : undefined;
-            const maxDate = field.max
-                ? new Date(field.max)
-                : undefined;
+            const minDate = field.min ? new Date(field.min) : undefined;
+            const maxDate = field.max ? new Date(field.max) : undefined;
             const rawValue = field.control ? field.control.value : field.defaultValue;
             return (h("x-date-picker", { ...commonProps, onXChange: onChange, picker: field.picker || 'date', format: field.format, placement: field.placement, showTime: true, minDate: minDate ? minDate.toISOString().split('T')[0] : undefined, maxDate: maxDate ? maxDate.toISOString().split('T')[0] : undefined, value: typeof rawValue === 'string' ? rawValue : rawValue instanceof Date ? rawValue.toISOString() : '', size: commonProps.size }));
         };
@@ -292,43 +286,64 @@ export class XFormBuilder {
             let { commonProps, onChange } = this.getcommonProps(field);
             // Ensure value is a string for x-time-picker
             const rawValue = field.control ? field.control.value : field.defaultValue;
-            const timeValue = rawValue instanceof Date
-                ? rawValue.toTimeString().split(' ')[0]
-                : typeof rawValue === 'string'
-                    ? rawValue
-                    : '';
+            const timeValue = rawValue instanceof Date ? rawValue.toTimeString().split(' ')[0] : typeof rawValue === 'string' ? rawValue : '';
             const wrapperStyle = {
                 margin: '8px 0',
-                ...(commonProps.disabled
-                    ? { pointerEvents: 'none', opacity: '0.5' }
-                    : {}),
+                ...(commonProps.disabled ? { pointerEvents: 'none', opacity: '0.5' } : {}),
             };
             return (h("div", { style: wrapperStyle }, h("x-time-picker", { ...commonProps, value: timeValue, onXChange: (e) => {
                     onChange(e);
                 } })));
         };
         const DateRangeCallback = (field) => {
-            let { commonProps, onChange } = this.getcommonProps(field);
-            const minDate = field.min
-                ? new Date(field.min)
-                : undefined;
-            const maxDate = field.max
-                ? new Date(field.max)
-                : undefined;
+            let { commonProps } = this.getcommonProps(field);
+            const f = field;
+            const minDate = f.min ? new Date(f.min) : undefined;
+            const maxDate = f.max ? new Date(f.max) : undefined;
             const rawValue = field.control ? field.control.value : field.defaultValue;
             let rangeValue = { start: null, end: null };
             if (Array.isArray(rawValue)) {
                 rangeValue = {
                     start: rawValue[0] instanceof Date ? rawValue[0].toISOString().split('T')[0] : rawValue[0],
-                    end: rawValue[1] instanceof Date ? rawValue[1].toISOString().split('T')[0] : rawValue[1]
+                    end: rawValue[1] instanceof Date ? rawValue[1].toISOString().split('T')[0] : rawValue[1],
                 };
             }
-            return (h("x-range-picker", { ...commonProps, placeholder: [field.placeholder || 'Start', field.placeholder || 'End'], onXChange: onChange, picker: field.picker || 'date', format: field.format, placement: field.placement, minDate: minDate ? minDate.toISOString().split('T')[0] : undefined, maxDate: maxDate ? maxDate.toISOString().split('T')[0] : undefined, value: rangeValue, size: commonProps.size, showTime: field.showTime }));
+            else if (rawValue && typeof rawValue === 'object' && ('start' in rawValue || 'end' in rawValue)) {
+                // Already a RangePickerValue { start, end } (e.g. after user has selected a range)
+                rangeValue = { start: rawValue.start ?? null, end: rawValue.end ?? null };
+            }
+            // Resolve placeholder: support array ["Start", "End"] or a single string
+            const ph = field.placeholder;
+            const startPh = Array.isArray(ph) ? (ph[0] ?? 'Start') : ph || 'Start';
+            const endPh = Array.isArray(ph) ? (ph[1] ?? 'End') : ph || 'End';
+            // Build custom onChange that stores the RangePickerValue object
+            const onRangeChange = (e) => {
+                const detail = e?.detail;
+                let val;
+                if (detail && typeof detail === 'object' && 'value' in detail) {
+                    // { value: { start, end }, dates, dateStrings }
+                    val = detail.value;
+                }
+                else {
+                    val = detail;
+                }
+                if (field.control) {
+                    field.control.setValue(val);
+                }
+                else {
+                    field.value = val;
+                }
+                this._tick++;
+            };
+            return (h("x-range-picker", { ...commonProps, placeholder: [startPh, endPh], onXChange: onRangeChange, picker: field.picker || 'date', format: field.format, placement: field.placement, minDate: minDate ? minDate.toISOString().split('T')[0] : undefined, maxDate: maxDate ? maxDate.toISOString().split('T')[0] : undefined, value: rangeValue, size: commonProps.size, showTime: field.showTime }));
         };
         const UploadCallback = (field) => {
             let { commonProps, onChange } = this.getcommonProps(field);
             const fieldData = field;
-            return (h("x-upload", { ...commonProps, onXChange: onChange, listType: fieldData.listType, multiple: fieldData.multiple, maxCount: fieldData.maxCount, accept: fieldData.accept, action: fieldData.action }));
+            const isPictureCard = fieldData.listType === 'picture-card' || fieldData.listType === 'picture-circle';
+            const isDrag = !!fieldData.drag;
+            const val = field.control ? field.control.value : field.defaultValue || [];
+            return (h("x-upload", { ...commonProps, onXChange: onChange, listType: fieldData.listType, multiple: fieldData.multiple, maxCount: fieldData.maxCount, accept: fieldData.accept, action: fieldData.action, drag: fieldData.drag, showUploadList: fieldData.showUploadList ?? true, maxFileSize: fieldData.maxSize ? fieldData.maxSize * 1024 * 1024 : undefined, fileList: val }, !isPictureCard && !isDrag && (h("x-button", null, h("x-icon", { slot: "icon", name: "upload" }), h("span", null, "Click to Upload")))));
         };
         const SliderCallback = (field) => {
             let { commonProps, onChange } = this.getcommonProps(field);
@@ -338,21 +353,36 @@ export class XFormBuilder {
         const SwitchCallback = (field) => {
             let { commonProps, onChange } = this.getcommonProps(field);
             const f = field;
-            return (h("x-switch", { ...commonProps, checked: field.control ? field.control.value : field.defaultValue, size: commonProps.size === 'middle' ? 'default' : commonProps.size, checkedChildren: f.checkedChildren, unCheckedChildren: f.unCheckedChildren, defaultChecked: f.defaultChecked, onXChange: onChange }));
+            return (h("x-switch", { ...commonProps, checked: field.control ? field.control.value : field.defaultValue, size: commonProps.size === 'middle' ? 'default' : commonProps.size, checkedChildren: f.checkedChildren, unCheckedChildren: f.unCheckedChildren, defaultChecked: f.defaultChecked, onXChange: onChange, onXClick: (e) => e.stopPropagation() }));
         };
         const CaptchaCallback = (field) => {
             let { commonProps, onChange } = this.getcommonProps(field);
             const f = field;
-            return (h("x-captcha", { ...commonProps, value: field.control ? field.control.value : (field.defaultValue || ''), length: f.length, caseSensitive: f.caseSensitive, message: f.message, onXChange: onChange }));
+            return (h("x-captcha", { ...commonProps, value: field.control ? field.control.value : field.defaultValue || '', length: f.length, caseSensitive: f.caseSensitive, message: f.message, onXChange: onChange, ...{ hideError: true }, ref: el => {
+                    if (field.control) {
+                        field.control._captchaEl = el;
+                        if (el && !field.control._captchaRegistered) {
+                            field.control._captchaRegistered = true;
+                            field.control.registerValidatorAsync(async () => {
+                                const currentEl = field.control._captchaEl;
+                                if (currentEl && currentEl.validate) {
+                                    const isValid = await currentEl.validate();
+                                    return isValid ? null : { captcha: true };
+                                }
+                                return null;
+                            });
+                        }
+                    }
+                } }));
         };
         const AddressCallback = (field) => {
             let { commonProps, onChange } = this.getcommonProps(field);
             const f = field;
-            return (h("x-address", { ...commonProps, value: field.control ? field.control.value : (field.defaultValue || EMPTY_OBJECT), onXChange: onChange, placeholderProvince: f.placeholderProvince, placeholderDistrict: f.placeholderDistrict, placeholderWard: f.placeholderWard, ...{
+            return (h("x-address", { ...commonProps, value: field.control ? field.control.value : field.defaultValue || EMPTY_OBJECT, onXChange: onChange, placeholderProvince: f.placeholderProvince, placeholderDistrict: f.placeholderDistrict, placeholderWard: f.placeholderWard, ...{
                     provincesData: f.provincesData,
                     districtsData: f.districtsData,
                     wardsData: f.wardsData,
-                }, ref: (el) => {
+                }, ref: el => {
                     if (el && field.control) {
                         field.control.registerValidatorAsync(async () => {
                             const isValid = await el.validate();
@@ -364,7 +394,7 @@ export class XFormBuilder {
         const RateCallback = (field) => {
             let { commonProps, onChange } = this.getcommonProps(field);
             const f = field;
-            return (h("x-rate", { ...commonProps, value: field.control ? field.control.value : (field.defaultValue || 0), count: f.count, allowHalf: f.allowHalf, allowClear: f.allowClear, character: f.character, onXChange: onChange }));
+            return (h("x-rate", { ...commonProps, value: field.control ? field.control.value : field.defaultValue || 0, count: f.count, allowHalf: f.allowHalf, allowClear: f.allowClear, character: f.character, onXChange: onChange }));
         };
         const TreeselectCallback = (field) => {
             const { commonProps, onChange } = this.getcommonProps(field);
@@ -374,17 +404,17 @@ export class XFormBuilder {
         const TransferCallback = (field) => {
             const { commonProps, onChange } = this.getcommonProps(field);
             const f = field;
-            return (h("x-transfer", { ...commonProps, onXChange: onChange, dataSource: f.dataSource || [], targetKeys: field.control ? field.control.value : (f.targetKeys || []), selectedKeys: f.selectedKeys, titles: f.titles, operations: f.operations, showSearch: f.showSearch, searchPlaceholder: f.searchPlaceholder, notFoundContent: f.notFoundContent, oneWay: f.oneWay, showSelectAll: f.showSelectAll, listWidth: f.listWidth, listHeight: f.listHeight, pagination: f.pagination, pageSize: f.pageSize }));
+            return (h("x-transfer", { ...commonProps, onXChange: onChange, dataSource: f.dataSource || [], targetKeys: field.control ? field.control.value : f.targetKeys || [], selectedKeys: f.selectedKeys, titles: f.titles, operations: f.operations, showSearch: f.showSearch, searchPlaceholder: f.searchPlaceholder, notFoundContent: f.notFoundContent, oneWay: f.oneWay, showSelectAll: f.showSelectAll, listWidth: f.listWidth, listHeight: f.listHeight, pagination: f.pagination, pageSize: f.pageSize }));
         };
         const CascaderCallback = (field) => {
             const { commonProps, onChange } = this.getcommonProps(field);
             const f = field;
-            return (h("x-cascader", { ...commonProps, onXChange: onChange, options: f.options || [], value: field.control ? field.control.value : (f.defaultValue || null), placeholder: f.placeholder || commonProps.placeholder, size: f.size || commonProps.size, variant: f.variant, placement: f.placement, status: commonProps.status || undefined, expandTrigger: f.expandTrigger, changeOnSelect: f.changeOnSelect, multiple: f.multiple, allowClear: f.allowClear ?? commonProps.allowClear, showSearch: f.showSearch, fieldNames: f.fieldNames, displaySeparator: f.displaySeparator, maxTagCount: f.maxTagCount, notFoundContent: f.notFoundContent, loading: f.loading }));
+            return (h("x-cascader", { ...commonProps, onXChange: onChange, options: f.options || [], value: field.control ? field.control.value : f.defaultValue || null, placeholder: f.placeholder || commonProps.placeholder, size: f.size || commonProps.size, variant: f.variant, placement: f.placement, status: commonProps.status || undefined, expandTrigger: f.expandTrigger, changeOnSelect: f.changeOnSelect, multiple: f.multiple, allowClear: f.allowClear ?? commonProps.allowClear, showSearch: f.showSearch, fieldNames: f.fieldNames, displaySeparator: f.displaySeparator, maxTagCount: f.maxTagCount, notFoundContent: f.notFoundContent, loading: f.loading }));
         };
         const AutoCompleteCallback = (field) => {
             const { commonProps, onChange } = this.getcommonProps(field);
             const f = field;
-            return (h("x-auto-complete", { ...commonProps, onXChange: onChange, options: f.options || [], value: field.control ? field.control.value : (f.defaultValue || ''), placeholder: f.placeholder || commonProps.placeholder, size: f.size || commonProps.size, variant: f.variant, placement: f.placement, status: (commonProps.status || undefined), allowClear: f.allowClear ?? commonProps.allowClear, backfill: f.backfill, defaultOpen: f.defaultOpen, filterOption: f.filterOption, notFoundContent: f.notFoundContent }));
+            return (h("x-auto-complete", { ...commonProps, onXChange: onChange, options: f.options || [], value: field.control ? field.control.value : f.defaultValue || '', placeholder: f.placeholder || commonProps.placeholder, size: f.size || commonProps.size, variant: f.variant, placement: f.placement, status: (commonProps.status || undefined), allowClear: f.allowClear ?? commonProps.allowClear, backfill: f.backfill, defaultOpen: f.defaultOpen, openOnFocus: f.openOnFocus, filterOption: f.filterOption, notFoundContent: f.notFoundContent }));
         };
         const ColorPickerCallback = (field) => {
             let { commonProps, onChange } = this.getcommonProps(field);
@@ -408,43 +438,13 @@ export class XFormBuilder {
             const disabled = !!f.disabled;
             const label = f.content || field.label || '';
             const style = { textAlign: align, margin: '8px 0' };
-            const htmlType = f.htmlType
-                ? f.htmlType
-                : (f.type === 'submit' || f.type === 'reset' ? f.type : 'button');
+            const htmlType = f.htmlType ? f.htmlType : f.type === 'submit' || f.type === 'reset' ? f.type : 'button';
             const onClick = async (event) => {
+                if (event && event.stopPropagation) {
+                    event.stopPropagation();
+                }
                 if (htmlType === 'submit') {
-                    // Validate all captcha components first
-                    let allCaptchaValid = true;
-                    const shadowRoot = this.el.shadowRoot;
-                    if (shadowRoot) {
-                        const captchas = shadowRoot.querySelectorAll('x-captcha');
-                        for (let i = 0; i < captchas.length; i++) {
-                            const captcha = captchas[i];
-                            if (captcha.validate) {
-                                const res = await captcha.validate();
-                                if (!res) {
-                                    allCaptchaValid = false;
-                                }
-                            }
-                        }
-                    }
-                    if (this.builder.form.valid && allCaptchaValid) {
-                        this.formSubmit.emit({
-                            value: this.builder.form.value,
-                            builder: this.builder,
-                            event,
-                            field,
-                        });
-                    }
-                    else {
-                        this.builder.form.markAllAsTouched();
-                        this._tick++;
-                        this.formError.emit({
-                            builder: this.builder,
-                            event,
-                            errors: this.builder.form.errors,
-                        });
-                    }
+                    await this.submit(event, field);
                 }
                 else if (htmlType === 'reset') {
                     this.builder.form.reset();
@@ -454,7 +454,7 @@ export class XFormBuilder {
                     this.xClick.emit({ field, builder: this.builder, event });
                 }
             };
-            return (h("div", { style: style }, h("x-button", { type: buttonType, shape: shape, size: size, block: block, danger: danger, ghost: ghost, loading: loading, disabled: disabled, htmlType: htmlType, onXClick: onClick }, icon && h("x-icon", { slot: 'icon', name: icon }), label)));
+            return (h("div", { style: style }, h("x-button", { type: buttonType, shape: shape, size: size, block: block, danger: danger, ghost: ghost, loading: loading, disabled: disabled, htmlType: htmlType, onXClick: onClick }, icon && h("x-icon", { slot: "icon", name: icon }), label)));
         };
         const TableCallback = (field) => {
             const { commonProps, onChange } = this.getcommonProps(field);
@@ -462,74 +462,250 @@ export class XFormBuilder {
             const columns = (f.columns || []).map(col => ({
                 ...col,
                 dataIndex: col.dataIndex || col.key,
-                slot: col.actions ? (col.slot || col.key || 'action') : col.slot
+                slot: col.actions ? col.slot || col.key || 'action' : col.slot,
             }));
-            return (h("x-table", { ...commonProps, columns: columns, dataSource: 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);
                     }
-                }, onXChange: (ev) => {
+                }, onXChange: ev => {
                     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 => {
-                const button = (h("x-button", { type: action.type === 'button' ? 'primary' : 'link', size: "small", danger: action.danger, onClick: (e) => {
+                } }, columns
+                .filter(col => col.actions)
+                .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({
                             action: action.onClick || action.label,
                             record,
-                            field: f
+                            field: f,
                         });
-                    } }, action.icon && h("x-icon", { slot: 'icon', name: action.icon }), action.label));
-                return action.tooltip ? (h("x-tooltip", { tooltipTitle: action.tooltip }, button)) : (button);
-            }))))))));
+                    } }, action.icon && h("x-icon", { slot: "icon", name: action.icon }), action.label));
+                return action.tooltip ? h("x-tooltip", { tooltipTitle: action.tooltip }, button) : button;
+            })))))));
+        };
+        const TabsCallback = (field) => {
+            const f = field;
+            const items = f.items || [];
+            const activeKey = f.activeKey || f.defaultActiveKey || (items.length > 0 ? items[0].key : undefined);
+            const onRename = (e) => {
+                const { key, label } = e.detail;
+                const item = items.find(i => i.key === key);
+                if (item) {
+                    item.label = label;
+                    this._tick++;
+                }
+            };
+            const onEdit = (e) => {
+                const { action, targetKey } = e.detail;
+                if (action === 'add') {
+                    const newKey = `tab-${Date.now()}`;
+                    items.push({
+                        key: newKey,
+                        label: `New Tab ${items.length + 1}`,
+                        elements: [],
+                    });
+                    this._tick++;
+                }
+                else if (action === 'remove') {
+                    const index = items.findIndex(i => i.key === targetKey);
+                    if (index !== -1) {
+                        items.splice(index, 1);
+                        this._tick++;
+                    }
+                }
+            };
+            const isEditMode = this.context && this.context.mode === 'edit';
+            const allowAdd = f.allowAdd !== undefined ? f.allowAdd : isEditMode;
+            const allowRemove = f.allowRemove !== undefined ? f.allowRemove : isEditMode;
+            const allowRename = f.allowRename !== undefined ? f.allowRename : isEditMode;
+            // Determine tabs type: if allowAdd or allowRemove is true, use editable-card
+            let tabsType = f.tabsType || 'line';
+            if (allowAdd || allowRemove) {
+                tabsType = 'editable-card';
+            }
+            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,
-            email: InputCallback,
-            password: InputCallback,
-            url: InputCallback,
-            number: InputNumberCallback,
-            textarea: InputCallback,
-            select: SelectCallback,
-            radio: RadioCallback,
-            checkbox: CheckboxCallback,
-            date: DateLocaleCallback,
-            datetime: DateTimeCallback,
-            time: TimeCallback,
-            file: UploadCallback,
-            slider: SliderCallback,
-            switch: SwitchCallback,
-            rate: RateCallback,
-            color: ColorPickerCallback,
-            tags: InputCallback,
-            range: InputCallback,
-            phone: InputCallback,
-            location: InputCallback,
+            'text': InputCallback,
+            'input': InputCallback,
+            'email': InputCallback,
+            'password': InputCallback,
+            'url': InputCallback,
+            'number': InputNumberCallback,
+            'textarea': InputCallback,
+            'select': SelectCallback,
+            'radio': RadioCallback,
+            'checkbox': CheckboxCallback,
+            'date': DateLocaleCallback,
+            'datetime': DateTimeCallback,
+            'time': TimeCallback,
+            'file': UploadCallback,
+            'slider': SliderCallback,
+            'switch': SwitchCallback,
+            'rate': RateCallback,
+            'color': ColorPickerCallback,
+            'tags': InputCallback,
+            'range': InputCallback,
+            'phone': InputCallback,
+            'location': InputCallback,
             'tree-select': TreeselectCallback,
-            transfer: TransferCallback,
-            cascader: CascaderCallback,
+            'transfer': TransferCallback,
+            'cascader': CascaderCallback,
             'auto-complete': AutoCompleteCallback,
-            daterange: DateRangeCallback,
-            divider: DividerCallback,
-            heading: HeadingCallback,
-            paragraph: ParagraphCallback,
-            image: ImageCallback,
-            captcha: CaptchaCallback,
-            address: AddressCallback,
-            avatar: AvatarCallback,
-            editor: EditorCallback,
-            button: ButtonCallback,
-            href: HrefCallback,
-            grid: GridCallback,
-            table: TableCallback,
-            maps: MapsCallback,
-            panel: PanelCallback,
-            container: ContainerCallback,
-            iframe: IframeCallback,
+            'daterange': DateRangeCallback,
+            'divider': DividerCallback,
+            'heading': HeadingCallback,
+            'paragraph': ParagraphCallback,
+            'image': ImageCallback,
+            'captcha': CaptchaCallback,
+            'address': AddressCallback,
+            'avatar': AvatarCallback,
+            'editor': EditorCallback,
+            'button': ButtonCallback,
+            'href': HrefCallback,
+            'grid': GridCallback,
+            'columns': ColumnsCallback,
+            'columns-3': ColumnsCallback,
+            'columns-4': ColumnsCallback,
+            'table': TableCallback,
+            'maps': MapsCallback,
+            'panel': PanelCallback,
+            'container': ContainerCallback,
+            'iframe': IframeCallback,
             '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())) {
+                if (fld.control) {
+                    await fld.control.updateValueAndValidity({ emitEvent: false });
+                }
+            }
+            await this.builder.form.updateValueAndValidity();
+        }
+        // Validate all captcha components first
+        let allCaptchaValid = true;
+        const shadowRoot = this.el.shadowRoot;
+        if (shadowRoot) {
+            const captchas = shadowRoot.querySelectorAll('x-captcha');
+            for (let i = 0; i < captchas.length; i++) {
+                const captcha = captchas[i];
+                if (captcha.validate) {
+                    const res = await captcha.validate();
+                    if (!res) {
+                        allCaptchaValid = false;
+                    }
+                }
+            }
+        }
+        if (this.builder.form.valid && allCaptchaValid && allDynamicValid) {
+            this.formSubmit.emit({
+                value: { ...this.builder.form.value, ...dynamicValues },
+                builder: this.builder,
+                event: event,
+                field,
+            });
+        }
+        else {
+            this.builder.form.markAllAsTouched();
+            this._tick++;
+            // Auto refresh captcha on submission failure
+            if (shadowRoot) {
+                const captchas = shadowRoot.querySelectorAll('x-captcha');
+                for (let i = 0; i < captchas.length; i++) {
+                    const captcha = captchas[i];
+                    if (captcha.refresh) {
+                        captcha.refresh();
+                    }
+                }
+            }
+            this.formError.emit({
+                builder: this.builder,
+                event: event,
+                errors: { ...this.builder.form.errors, ...dynamicErrors },
+            });
+        }
+    }
     schema;
+    showErrorCheckbox = false;
     getcommonProps(field) {
         const commonProps = {
             defaultValue: (field.defaultValue ?? field.defaultChecked ?? field.targetKeys),
@@ -546,7 +722,7 @@ export class XFormBuilder {
             disabled: field.disabled,
             readonly: field.readonly,
             size: (field.size || 'middle'),
-            placeholder: field.placeholder || '',
+            placeholder: field.placeholder,
             errorMessage: '',
             pattern: field.pattern,
         };
@@ -566,60 +742,118 @@ export class XFormBuilder {
             commonProps.maxLength = field.maxLength;
         }
         const onChange = (e) => {
-            const val = e.detail && typeof e.detail === 'object' && 'value' in e.detail
-                ? e.detail.value
-                : e.detail;
+            let val = e.detail && typeof e.detail === 'object' && 'value' in e.detail ? e.detail.value : e.detail;
+            if (val && typeof val === 'object' && 'fileList' in val) {
+                val = val.fileList;
+            }
             if (field.control) {
                 field.control.setValue(val);
             }
             else {
                 field.value = val;
             }
+            this.xChange.emit({
+                builder: this.builder,
+                event: e,
+                field: field,
+                value: this.builder ? this.builder.form.value : this.value,
+            });
             this._tick++;
         };
         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);
-                commonProps.errorMessage =
-                    messages.length > 0 ? messages[0] : 'Invalid value';
+                commonProps.errorMessage = messages.length > 0 ? messages[0] : 'Invalid value';
             }
         }
-        return { commonProps, onChange };
+        const onPressEnter = (e) => {
+            if (this.schema?.setting?.enterSubmit) {
+                this.submit(e, field);
+            }
+        };
+        return { commonProps, onChange, onPressEnter };
+    }
+    getStylesFromUI(ui) {
+        if (!ui || !ui.style)
+            return {};
+        const { margin, padding, ...rest } = ui.style;
+        const styles = { ...rest };
+        if (margin) {
+            if (margin.top !== undefined)
+                styles.marginTop = typeof margin.top === 'number' ? `${margin.top}px` : margin.top;
+            if (margin.bottom !== undefined)
+                styles.marginBottom = typeof margin.bottom === 'number' ? `${margin.bottom}px` : margin.bottom;
+            if (margin.left !== undefined)
+                styles.marginLeft = typeof margin.left === 'number' ? `${margin.left}px` : margin.left;
+            if (margin.right !== undefined)
+                styles.marginRight = typeof margin.right === 'number' ? `${margin.right}px` : margin.right;
+        }
+        if (padding) {
+            if (padding.top !== undefined)
+                styles.paddingTop = typeof padding.top === 'number' ? `${padding.top}px` : padding.top;
+            if (padding.bottom !== undefined)
+                styles.paddingBottom = typeof padding.bottom === 'number' ? `${padding.bottom}px` : padding.bottom;
+            if (padding.left !== undefined)
+                styles.paddingLeft = typeof padding.left === 'number' ? `${padding.left}px` : padding.left;
+            if (padding.right !== undefined)
+                styles.paddingRight = typeof padding.right === 'number' ? `${padding.right}px` : padding.right;
+        }
+        return styles;
     }
     _tick = 0;
     value;
     context = {};
     builder;
+    _isInternalChange = false;
     componentWillLoad() {
-        this.syncBuilder();
+        this.asyncBuilderForm(true);
     }
-    syncBuilder() {
-        this.asyncBuilderForm();
+    componentDidUpdate() {
+    }
+    disconnectedCallback() {
+    }
+    handleValueChange() {
+        if (this._isInternalChange)
+            return;
+        this.asyncBuilderForm(true);
+    }
+    handleSchemaChange() {
+        this.asyncBuilderForm(false);
     }
     isSyncing = false;
-    asyncBuilderForm() {
+    asyncBuilderForm(forcePropValue = false) {
         if (this.isSyncing)
             return;
         this.isSyncing = true;
         try {
+            // Lưu lại giá trị hiện tại của form trước khi cập nhật/xây dựng lại builder
+            const currentInternalValue = this.builder ? this.builder.form.value : this.value;
             if (this.schema && (!this.builder || this.schema !== this.builder.schema)) {
-                this.builder = new SchemaBuilder(this.schema);
+                this.builder = new SchemaBuilder(this.schema, { showErrorCheckbox: this.showErrorCheckbox });
                 this.builder.subscribe((value) => {
+                    this._isInternalChange = true;
                     this.value = value;
+                    this._isInternalChange = false;
                     this.valueChange.emit(value);
                     this.xChange.emit({
                         builder: this.builder,
                         event: null,
+                        value: value,
                     });
                     this._tick++;
                 });
             }
-            if (this.builder && this.value) {
-                this.builder.form.patchValue(this.value, { emitEvent: false });
+            // Luôn ưu tiên dùng giá trị mới nhất đang đúng context
+            // Nếu là forcePropValue (do @Watch('value') từ bên ngoài) thì lấy this.value
+            // Nếu là do schema/context change thì ưu tiên giữ lại giá trị đang nhập (currentInternalValue)
+            const effectiveValue = forcePropValue ? this.value : currentInternalValue || this.value;
+            if (this.builder && effectiveValue) {
+                this.builder.form.patchValue(effectiveValue, { emitEvent: false });
             }
             if (this.builder && this.context) {
                 this.builder.context = this.context;
@@ -627,6 +861,9 @@ export class XFormBuilder {
                     this.builder.conditions.checkAll();
                 }
             }
+            if (this.builder) {
+                this.builder.showErrorCheckbox = this.showErrorCheckbox;
+            }
             this._tick++;
         }
         finally {
@@ -650,8 +887,16 @@ export class XFormBuilder {
         }
         if (layoutType === 'inline') {
             return {
-                container: { display: 'flex', alignItems: 'center', gap: `${layout?.gap ?? gap}px` },
-                item: { marginBottom: '0' },
+                container: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: `${layout?.gap ?? gap}px`,
+                    overflowX: 'auto',
+                    flexWrap: 'nowrap',
+                    maxWidth: '100%',
+                    paddingBottom: '8px',
+                },
+                item: { marginBottom: '0', flexShrink: 0 },
             };
         }
         if (layoutType === 'grid') {
@@ -679,7 +924,7 @@ export class XFormBuilder {
         if (!elements || !Array.isArray(elements)) {
             return null;
         }
-        return elements.map((element) => {
+        return elements.map(element => {
             if (element.hidden) {
                 return null;
             }
@@ -688,21 +933,30 @@ export class XFormBuilder {
             const computedElement = {
                 ...element,
                 disabled: element.disabled || isParentDisabled,
-                readonly: element.readonly || isParentReadonly
+                readonly: element.readonly || isParentReadonly,
             };
             const Component = this.mapping[element.type];
-            const itemStyle = { marginBottom: '15px' };
+            const layoutConfig = this.schema.layout || this.schema.setting?.layout || 'vertical';
+            const layoutType = typeof layoutConfig === 'string' ? layoutConfig : layoutConfig?.type;
+            const uiStyle = this.getStylesFromUI(element.ui);
+            const itemStyle = { marginBottom: '15px', ...uiStyle };
             if (_parent?.type === 'grid') {
                 const span = element.span || 1;
                 itemStyle.gridColumn = `span ${span}`;
             }
+            else if (layoutType === 'horizontal' || layoutType === 'inline' || element.span) {
+                // Use 12-column grid for consistent spanning
+                const defaultSpan = layoutType === 'inline' ? 6 : 12;
+                const span = element.span || defaultSpan;
+                const widthPercent = (Number(span) / 12) * 100;
+                itemStyle.flex = `0 0 ${widthPercent}%`;
+                itemStyle.maxWidth = `${widthPercent}%`;
+            }
             if ('elements' in element) {
                 return (h("div", { key: element.id || element.name, style: itemStyle }, h(Component, { ...computedElement })));
             }
             const { commonProps } = this.getcommonProps(computedElement);
-            const layoutConfig = this.schema.layout || this.schema.setting?.layout || 'vertical';
-            const layoutType = typeof layoutConfig === 'string' ? layoutConfig : layoutConfig?.type;
-            const labelAlign = typeof layoutConfig === 'object' ? layoutConfig?.labelAlign : (this.schema.setting?.labelAlign || 'right');
+            const labelAlign = typeof layoutConfig === 'object' ? layoutConfig?.labelAlign || 'left' : this.schema.setting?.labelAlign || 'left';
             const labelCol = this.schema.setting?.labelCol;
             const wrapperCol = this.schema.setting?.wrapperCol;
             if (element.type === 'button') {
@@ -715,7 +969,31 @@ export class XFormBuilder {
                 }
                 return (h("div", { key: element.id || element.name, style: itemStyle }, h(Component, { ...buttonProps }, element.content)));
             }
-            return (h("x-form-item", { key: element.id || element.name, label: element.label, colon: element.colon, required: element.required || (Array.isArray(element.validators) && element.validators.some(v => v.type === 'required')), validateStatus: commonProps.status, help: commonProps.errorMessage || element.note, layout: layoutType, labelAlign: labelAlign, labelCol: labelCol, wrapperCol: wrapperCol, style: itemStyle }, h(Component, { ...computedElement })));
+            const isDataField = !['divider', 'heading', 'paragraph', 'image', 'avatar', 'grid', 'panel', 'container', 'iframe', 'qr-code', 'tabs', 'button', 'href'].includes(element.type);
+            const isError = !!this.builder?.form?.get(`isError_${element.name}`)?.value;
+            return (h("x-form-item", { key: element.id || element.name, label: this.showErrorCheckbox && isDataField && element.name ? null : element.label, colon: element.colon, required: element.required || (Array.isArray(element.validators) && element.validators.some(v => v.type === 'required')), validateStatus: isError ? 'error' : commonProps.status, help: commonProps.errorMessage || element.note, layout: layoutType, labelAlign: labelAlign, labelCol: labelCol, wrapperCol: wrapperCol, style: itemStyle }, this.showErrorCheckbox && isDataField && element.name && (h("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' } }, h("span", { style: {
+                    fontWeight: '600',
+                    color: isError ? '#ff4d4f' : 'rgba(0, 0, 0, 0.88)',
+                    fontSize: '14px'
+                } }, element.label, element.required && h("span", { style: { color: '#ff4d4f', marginLeft: '4px' } }, "*")), h("div", { style: { display: 'flex', alignItems: 'center', gap: '4px' } }, h("x-checkbox", { checked: isError, onXChange: (e) => {
+                    const val = !!e.detail.checked;
+                    const control = this.builder.form.get(`isError_${element.name}`);
+                    if (control) {
+                        control.setValue(val);
+                        this.xChange.emit({
+                            builder: this.builder,
+                            event: e,
+                            field: element,
+                            value: this.builder.form.value,
+                        });
+                    }
+                    this._tick++;
+                } }), h("span", { style: {
+                    fontSize: '12px',
+                    fontWeight: '700',
+                    color: isError ? '#ff4d4f' : 'rgba(0, 0, 0, 0.65)',
+                    textTransform: 'uppercase',
+                } }, "L\u1ED7i")))), h(Component, { ...computedElement, status: isError ? 'error' : computedElement.status })));
         });
     }
     render() {
@@ -728,9 +1006,7 @@ export class XFormBuilder {
             if (this.builder.form.is_custom_submit)
                 return null;
             const setting = this.schema.setting || {};
-            let actions = Array.isArray(this.schema.actions)
-                ? this.schema.actions
-                : [];
+            let actions = Array.isArray(this.schema.actions) ? this.schema.actions : [];
             // Ensure at least one submit action is present
             if (!actions || actions.length === 0) {
                 if (setting.showSubmitButton) {
@@ -756,7 +1032,11 @@ export class XFormBuilder {
                 textAlign: actionsAlign,
             };
             return (h("div", { style: containerStyle }, actions.map((action, idx) => {
-                const { label, type, ...rest } = action;
+                if (action.hidden) {
+                    return null;
+                }
+                const labelValue = action.content || action.label || '';
+                const { type, ...rest } = action;
                 const buttonProps = { ...rest };
                 if (type === 'submit' || type === 'reset') {
                     buttonProps.htmlType = type;
@@ -764,15 +1044,21 @@ export class XFormBuilder {
                 else if (type) {
                     buttonProps.type = type;
                 }
-                return (h("span", { style: { display: 'inline-block', marginLeft: idx ? '8px' : '0' }, key: action.id || `action-${idx}` }, h(ButtonComponent, { ...buttonProps }, label)));
+                const isBlock = !!buttonProps.block;
+                return (h("div", { style: {
+                        display: isBlock ? 'block' : 'inline-block',
+                        width: isBlock ? '100%' : 'auto',
+                        marginLeft: !isBlock && idx ? '8px' : '0',
+                        marginTop: isBlock && idx ? '8px' : '0',
+                    }, key: action.id || `action-${idx}` }, h(ButtonComponent, { ...buttonProps }, labelValue)));
             })));
         };
-        const form_template = (h("form", { noValidate: true, onSubmit: (e) => {
+        const form_template = (h("form", { noValidate: true, onSubmit: e => {
                 e.preventDefault();
                 e.stopPropagation();
             } }, h("div", { style: styles.container }, this.bind(this.schema?.elements)), renderActions()));
         if (this.schema.type === 'card') {
-            return (h("x-card", null, h("slot", { name: "title" }, this.schema.title && (h("x-typography-title", { level: 3 }, this.schema.title)), this.schema.description && (h("x-typography-text", null, this.schema.description))), form_template));
+            return (h("x-card", null, h("slot", { name: "title" }, this.schema.title && h("x-typography-title", { level: 3 }, this.schema.title), this.schema.description && h("x-typography-text", null, this.schema.description)), form_template));
         }
         return form_template;
     }
@@ -814,6 +1100,26 @@ export class XFormBuilder {
                 "getter": false,
                 "setter": false
             },
+            "showErrorCheckbox": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-error-checkbox",
+                "defaultValue": "false"
+            },
             "value": {
                 "type": "unknown",
                 "mutable": true,
@@ -880,7 +1186,7 @@ export class XFormBuilder {
                     "references": {
                         "XFormBuilderChangeDetail": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-form-builder/x-form-builder.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-form-builder/x-form-builder.tsx",
                             "id": "src/components/x-form-builder/x-form-builder.tsx::XFormBuilderChangeDetail"
                         }
                     }
@@ -901,7 +1207,7 @@ export class XFormBuilder {
                     "references": {
                         "XFormBuilderSubmitDetail": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-form-builder/x-form-builder.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-form-builder/x-form-builder.tsx",
                             "id": "src/components/x-form-builder/x-form-builder.tsx::XFormBuilderSubmitDetail"
                         }
                     }
@@ -922,7 +1228,7 @@ export class XFormBuilder {
                     "references": {
                         "XTableActionDetail": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-form-builder/x-form-builder.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-form-builder/x-form-builder.tsx",
                             "id": "src/components/x-form-builder/x-form-builder.tsx::XTableActionDetail"
                         }
                     }
@@ -943,7 +1249,7 @@ export class XFormBuilder {
                     "references": {
                         "XFormBuilderErrorDetail": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-form-builder/x-form-builder.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-form-builder/x-form-builder.tsx",
                             "id": "src/components/x-form-builder/x-form-builder.tsx::XFormBuilderErrorDetail"
                         }
                     }
@@ -979,7 +1285,7 @@ export class XFormBuilder {
                     "references": {
                         "XFormBuilderClickDetail": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-form-builder/x-form-builder.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-form-builder/x-form-builder.tsx",
                             "id": "src/components/x-form-builder/x-form-builder.tsx::XFormBuilderClickDetail"
                         }
                     }
@@ -1001,17 +1307,64 @@ export class XFormBuilder {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "submit": {
+                "complexType": {
+                    "signature": "(event?: Event, field?: FormField | FormAction) => Promise<void>",
+                    "parameters": [{
+                            "name": "event",
+                            "type": "Event",
+                            "docs": ""
+                        }, {
+                            "name": "field",
+                            "type": "FormField | FormAction",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event",
+                            "referenceLocation": "Event"
+                        },
+                        "FormField": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-form-builder/types/index.ts::FormField",
+                            "referenceLocation": "FormField"
+                        },
+                        "FormAction": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-form-builder/types/index.ts::FormAction",
+                            "referenceLocation": "FormAction"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "schema",
-                "methodName": "syncBuilder"
-            }, {
                 "propName": "value",
-                "methodName": "syncBuilder"
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "schema",
+                "methodName": "handleSchemaChange"
             }, {
                 "propName": "context",
-                "methodName": "syncBuilder"
+                "methodName": "handleSchemaChange"
             }];
     }
 }