@xlabs-store/core 0.0.1 → 0.0.3

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

@@ -38,10 +38,7 @@ export function registerDefaultComponents() {
             color: 'var(--x-text-secondary, #6b7280)',
             textAlign: align,
         };
-        const content = String(context.field.content ??
-            context.field.placeholder ??
-            context.field.label ??
-            '');
+        const content = String(context.field.content ?? context.field.placeholder ?? context.field.label ?? '');
         return (h("p", { style: style, "data-type": styleType, "data-ellipsis": ellipsis, "data-rows": ellipsisRows }, content));
     };
     const HrefCallback = (context) => {
@@ -53,16 +50,12 @@ export function registerDefaultComponents() {
         const href = context.field.href || context.field.value || '#';
         const target = context.field.target || '_self';
         const rel = context.field.rel || '';
-        const text = String(context.field.content ??
-            context.field.label ??
-            context.field.text ??
-            context.field.value ??
-            'Link');
+        const text = String(context.field.content ?? context.field.label ?? context.field.text ?? context.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 = (context) => {
         const align = context.field.align;
@@ -77,10 +70,7 @@ export function registerDefaultComponents() {
         const align = context.field.align;
         const src = context.field.src || context.field.value || '';
         const size = context.field.size || 64;
-        const circle = context.field.circle === undefined ||
-            context.field.circle
-            ? '50%'
-            : '0';
+        const circle = context.field.circle === undefined || context.field.circle ? '50%' : '0';
         const alt = context.field.alt || '';
         return (h("div", { style: { margin: '8px 0', textAlign: align } }, h("img", { src: src, alt: alt, style: {
                 width: `${size}px`,
@@ -112,7 +102,7 @@ export function registerDefaultComponents() {
         const fgColor = context.field.fgColor || '#000000';
         const includeMargin = !!context.field.includeMargin;
         const description = context.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,
@@ -135,19 +125,13 @@ export function registerDefaultComponents() {
             border: '1px solid var(--x-border, #e5e7eb)',
             borderRadius: '8px',
             margin: '8px 0',
-        } }, 'elements' in context.field && context.field.elements
-        ? context.bind(context.field.elements, context.field)
-        : null));
-    const ContainerCallback = (context) => (h("div", { style: { margin: '8px 0' } }, 'elements' in context.field && context.field.elements
-        ? context.bind(context.field.elements, context.field)
-        : null));
+        } }, 'elements' in context.field && context.field.elements ? context.bind(context.field.elements, context.field) : null));
+    const ContainerCallback = (context) => (h("div", { style: { margin: '8px 0' } }, 'elements' in context.field && context.field.elements ? context.bind(context.field.elements, context.field) : null));
     const GridCallback = (context) => (h("div", { style: {
             display: 'grid',
             gridTemplateColumns: `repeat(${context.field.columns || 2}, minmax(0, 1fr))`,
             gap: '15px',
-        } }, 'elements' in context.field && context.field.elements
-        ? context.bind(context.field.elements, context.field)
-        : null));
+        } }, 'elements' in context.field && context.field.elements ? context.bind(context.field.elements, context.field) : null));
     const MapsCallback = (context) => {
         const width = context.field.width || '100%';
         const height = context.field.height || 400;
@@ -169,13 +153,7 @@ export function registerDefaultComponents() {
                 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(context.field.label || 'Interactive Map')), center ? (h("div", { style: {
                 color: '#666',
                 fontSize: '12px',
@@ -189,24 +167,32 @@ export function registerDefaultComponents() {
     };
     const SelectCallback = (context) => {
         let { commonProps, onChange } = context.getCommonProps(context.field);
-        return (h("x-select", { ...commonProps, size: "middle", onXChange: onChange, options: context.field.options || [] }));
+        return h("x-select", { ...commonProps, size: "middle", onXChange: onChange, options: context.field.options || [] });
     };
     const RadioCallback = (context) => {
         const field = context.field;
+        const { commonProps, onChange } = context.getCommonProps(field);
         const options = field.options || [];
         const currentValue = field.control ? field.control.value : field.value;
-        let { onChange } = context.getCommonProps(field);
-        return (h("div", { style: { margin: '4px 0' } }, h("div", { style: { display: 'flex', gap: '10px', flexWrap: 'wrap' } }, options.length > 0 ? (options.map((opt, idx) => (h("x-radio", { key: `${field.name}-${idx}`, name: field.name, value: opt.value, disabled: opt.disabled || field.disabled || false, onXChange: onChange, checked: currentValue === opt.value }, String(opt.label))))) : (h("x-radio", { ...field, disabled: field.disabled, onXChange: onChange }, String(field.label))))));
+        const direction = field.direction || field.orientation || 'horizontal';
+        const placement = field.placement || 'end';
+        return (h("div", { style: { margin: '4px 0' } }, options.length > 0 ? (h("x-radio-group", { ...commonProps, options: options, value: currentValue, direction: direction, placement: placement, onXChange: onChange })) : (h("x-radio", { ...field, disabled: field.disabled, onXChange: onChange, checked: !!currentValue, placement: placement }, String(field.label || field.content || '')))));
     };
     const CheckboxCallback = (context) => {
         const field = context.field;
         const options = field.options || [];
         const currentValue = field.control ? field.control.value : field.value;
         const isArray = Array.isArray(currentValue);
-        let { onChange } = context.getCommonProps(field);
-        return (h("div", { style: { margin: '4px 0' } }, h("div", { style: { display: 'flex', gap: '10px', flexWrap: 'wrap' } }, options.length > 0 ? (options.map((opt, idx) => (h("x-checkbox", { key: `${field.name}-${idx}`, name: field.name, value: opt.value, disabled: opt.disabled || field.disabled || false, onXChange: onChange, checked: isArray
-                ? (currentValue || []).includes(opt.value)
-                : !!currentValue }, String(opt.label))))) : (h("x-checkbox", { ...field, disabled: field.disabled, onXChange: onChange }, String(field.label))))));
+        const { onChange } = context.getCommonProps(field);
+        const direction = field.direction || field.orientation || 'horizontal';
+        const placement = field.placement || 'end';
+        const containerStyle = {
+            display: 'flex',
+            gap: '10px',
+            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}`, name: field.name, value: opt.value, disabled: opt.disabled || field.disabled || false, onXChange: onChange, checked: isArray ? (currentValue || []).includes(opt.value) : !!currentValue, placement: opt.placement || placement }, String(opt.label))))) : (h("x-checkbox", { ...field, disabled: field.disabled, onXChange: onChange, checked: !!currentValue, placement: placement }, String(field.label || field.content || ''))))));
     };
     const DateLocaleCallback = (context) => {
         const field = context.field;
@@ -214,10 +200,13 @@ export function registerDefaultComponents() {
         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 = (context) => {
@@ -226,21 +215,13 @@ export function registerDefaultComponents() {
         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 }));
+        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 }));
     };
     const TimeCallback = (context) => {
         const field = context.field;
         let { commonProps, onChange } = context.getCommonProps(field);
         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' } : {}),
@@ -258,12 +239,8 @@ export function registerDefaultComponents() {
         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],
+                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],
             };
         }
         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 }));
@@ -279,17 +256,32 @@ export function registerDefaultComponents() {
     };
     const SwitchCallback = (context) => {
         let { commonProps, onChange } = context.getCommonProps(context.field);
-        return (h("x-switch", { ...commonProps, size: commonProps.size === 'middle' ? 'default' : commonProps.size, onXChange: onChange }));
+        return h("x-switch", { ...commonProps, size: commonProps.size === 'middle' ? 'default' : commonProps.size, onXChange: onChange });
     };
     const CaptchaCallback = (context) => {
         let { commonProps, onChange } = context.getCommonProps(context.field);
         const field = context.field;
-        return (h("x-captcha", { ...commonProps, onXChange: onChange, length: field.length, caseSensitive: field.caseSensitive, message: field.message, error: field.error }));
+        return (h("x-captcha", { ...commonProps, onXChange: onChange, length: field.length, caseSensitive: field.caseSensitive, message: field.message, error: field.error, ...{ 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 = (context) => {
         let { commonProps, onChange } = context.getCommonProps(context.field);
         const field = context.field;
-        return (h("x-address", { ...commonProps, value: field.control ? field.control.value : (field.defaultValue || {}), onXChange: onChange, placeholderProvince: field.placeholderProvince, placeholderDistrict: field.placeholderDistrict, placeholderWard: field.placeholderWard, ref: (el) => {
+        return (h("x-address", { ...commonProps, value: field.control ? field.control.value : field.defaultValue || {}, onXChange: onChange, placeholderProvince: field.placeholderProvince, placeholderDistrict: field.placeholderDistrict, placeholderWard: field.placeholderWard, ref: el => {
                 if (el && field.control) {
                     field.control.registerValidatorAsync(async () => {
                         const isValid = await el.validate();
@@ -300,22 +292,22 @@ export function registerDefaultComponents() {
     };
     const TreeselectCallback = (context) => {
         let { commonProps, onChange } = context.getCommonProps(context.field);
-        return (h("x-tree-select", { ...commonProps, onXChange: onChange, treeData: context.field.options || [], showCheckedStrategy: context.field.showCheckedStrategy }));
+        return h("x-tree-select", { ...commonProps, onXChange: onChange, treeData: context.field.options || [], showCheckedStrategy: context.field.showCheckedStrategy });
     };
     const TransferCallback = (context) => {
         const { commonProps, onChange } = context.getCommonProps(context.field);
         const f = context.field;
-        return (h("x-transfer", { ...commonProps, onXChange: onChange, dataSource: f.dataSource || [], targetKeys: f.control ? f.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, apiConfig: f.apiConfig }));
+        return (h("x-transfer", { ...commonProps, onXChange: onChange, dataSource: f.dataSource || [], targetKeys: f.control ? f.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, apiConfig: f.apiConfig }));
     };
     const CascaderCallback = (context) => {
         const { commonProps, onChange } = context.getCommonProps(context.field);
         const f = context.field;
-        return (h("x-cascader", { ...commonProps, onXChange: onChange, options: f.options || [], value: f.control ? f.control.value : (f.defaultValue || null), placeholder: f.placeholder || commonProps.placeholder, size: f.size || (commonProps.size === 'default' ? 'middle' : 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: f.control ? f.control.value : f.defaultValue || null, placeholder: f.placeholder || commonProps.placeholder, size: f.size || (commonProps.size === 'default' ? 'middle' : 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 = (context) => {
         const { commonProps, onChange } = context.getCommonProps(context.field);
         const f = context.field;
-        return (h("x-auto-complete", { ...commonProps, onXChange: onChange, options: f.options || [], value: f.control ? f.control.value : (f.defaultValue || ''), placeholder: f.placeholder || commonProps.placeholder, size: f.size || (commonProps.size === 'default' ? 'middle' : 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: f.control ? f.control.value : f.defaultValue || '', placeholder: f.placeholder || commonProps.placeholder, size: f.size || (commonProps.size === 'default' ? 'middle' : 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 = (context) => {
         let { commonProps, onChange } = context.getCommonProps(context.field);
@@ -341,16 +333,34 @@ export function registerDefaultComponents() {
         const label = field.content || field.label || '';
         const style = { textAlign: align, margin: '8px 0' };
         const variant = field.variant || (buttonType === 'submit' || buttonType === 'reset' ? 'primary' : buttonType);
-        const htmlType = htmlTypeProp
-            ? htmlTypeProp
-            : buttonType === 'submit'
-                ? 'submit'
-                : buttonType === 'reset'
-                    ? 'reset'
-                    : 'button';
-        const onClick = (event) => {
+        const htmlType = htmlTypeProp ? htmlTypeProp : buttonType === 'submit' ? 'submit' : buttonType === 'reset' ? 'reset' : 'button';
+        const onClick = async (event) => {
             if (htmlType === 'submit') {
-                if (context.builder.form.valid) {
+                // Run validation on all mapped controls (both sync and async)
+                if (context.builder && context.builder.form) {
+                    for (const [_key, fld] of Array.from(context.builder.form.mapping.entries())) {
+                        if (fld.control) {
+                            await fld.control.updateValueAndValidity({ emitEvent: false });
+                        }
+                    }
+                    await context.builder.form.updateValueAndValidity();
+                }
+                // Validate all captcha components in the DOM context
+                let allCaptchaValid = true;
+                const shadowRoot = context.el?.shadowRoot || document.querySelector('x-form-builder')?.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 (context.builder.form.valid && allCaptchaValid) {
                     context.emitSubmit({
                         value: context.builder.form.value,
                         builder: context.builder,
@@ -361,6 +371,16 @@ export function registerDefaultComponents() {
                 else {
                     context.builder.form.markAllAsTouched();
                     context.forceUpdate();
+                    // 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();
+                            }
+                        }
+                    }
                     context.emitError({
                         builder: context.builder,
                         event,
@@ -376,23 +396,24 @@ export function registerDefaultComponents() {
                 context.emitClick({ field, builder: context.builder, event });
             }
         };
-        return (h("div", { style: style }, h("x-button", { htmlType: htmlType, type: variant, shape: shape, size: size, onXClick: onClick, block: block, danger: danger, ghost: ghost, loading: loading, disabled: disabled }, icon ? (h("x-icon", { name: icon, slot: "icon", style: { marginRight: '8px' } })) : null, label)));
+        return (h("div", { style: style }, h("x-button", { htmlType: htmlType, type: variant, shape: shape, size: size, onXClick: onClick, block: block, danger: danger, ghost: ghost, loading: loading, disabled: disabled }, icon ? h("x-icon", { name: icon, slot: "icon", style: { marginRight: '8px' } }) : null, label)));
     };
     const TableCallback = (context) => {
-        const data = context.field.dataSource || [];
-        const columns = context.field.columns || [];
-        const bordered = !!context.field.bordered;
-        const loading = !!context.field.loading;
-        const size = context.field.size || 'default';
-        return (h("div", { style: { width: '100%', margin: '8px 0' }, "data-bordered": bordered, "data-loading": loading, "data-size": size }, h("table", { style: { width: '100%', borderCollapse: 'collapse' } }, h("thead", null, h("tr", null, columns.map((col) => (h("th", { key: col.key || col.dataIndex, style: {
-                textAlign: col.align || 'left',
-                borderBottom: '1px solid #e5e7eb',
-                padding: '8px',
-            } }, col.title))))), h("tbody", null, data.map((row, idx) => (h("tr", { key: idx }, columns.map((col) => (h("td", { key: col.key || col.dataIndex, style: {
-                textAlign: col.align || 'left',
-                borderBottom: '1px solid #f0f0f0',
-                padding: '8px',
-            } }, row[col.dataIndex]))))))))));
+        const f = context.field;
+        const data = f.dataSource || [];
+        const columns = f.columns || [];
+        const bordered = !!f.bordered;
+        const loading = !!f.loading;
+        const size = f.size || 'default';
+        const rowKey = f.rowKey || 'key';
+        const pagination = f.pagination !== undefined ? f.pagination : false;
+        const rowSelection = f.rowSelection;
+        const tableScroll = f.tableScroll;
+        const resizableColumns = !!f.resizableColumns;
+        const draggableColumns = !!f.draggableColumns;
+        const draggableRows = !!f.draggableRows;
+        const sticky = f.sticky;
+        return (h("div", { style: { width: '100%', margin: '8px 0' } }, h("x-table", { columns: columns, dataSource: data, bordered: bordered, loading: loading, size: size, rowKey: rowKey, pagination: pagination, rowSelection: rowSelection, tableScroll: tableScroll, resizableColumns: resizableColumns, draggableColumns: draggableColumns, draggableRows: draggableRows, sticky: sticky })));
     };
     FormRegistry.register('text', InputCallback);
     FormRegistry.register('email', InputCallback);

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

@@ -46,19 +46,40 @@ export class FormMapping extends FormGroup {
                     // Safely merge Maps
                     child_paths.forEach((v, k) => paths.set(k, v));
                 }
+                // 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);
+                            child_paths.forEach((v, k) => paths.set(k, v));
+                        }
+                    }
+                }
             }
             return paths;
         };
         // Support both 'elements' and 'fields' for compatibility
         const elements = this.schema?.elements || this.schema?.fields;
-        if (!elements || !Array.isArray(elements)) {
-            return new Map();
+        const actions = this.schema?.actions || [];
+        const paths = mappingRecursive(elements);
+        // Also map actions so they can be targeted by conditions
+        if (actions && Array.isArray(actions)) {
+            for (const action of actions) {
+                if (action.id) {
+                    this.mappingById.set(action.id, action);
+                    if (!action.id.startsWith('action-')) {
+                        paths.set(action.id, action);
+                    }
+                }
+            }
         }
-        return mappingRecursive(elements);
+        return paths;
     }
     toMappingObject() {
         const applyField = (root, field) => {
             const path = field.name;
+            if (!path)
+                return;
             const segments = path.split('.');
             let current = root;
             for (let i = 0; i < segments.length; i++) {
@@ -120,7 +141,7 @@ export class FormMapping extends FormGroup {
                         }
                         const { control } = Utils.builderFromControl(field);
                         this.validateOnUseApi(field);
-                        control.subscribe((value) => {
+                        control.subscribe(value => {
                             this.builder.callEvent('onFieldChange', field.name, value);
                         });
                         formArray.push(control);
@@ -149,10 +170,14 @@ export class FormMapping extends FormGroup {
                 const formGroup = root;
                 this.validateOnUseApi(field);
                 const { control } = Utils.builderFromControl(field);
-                control.subscribe((value) => {
+                control.subscribe(value => {
                     this.builder.callEvent('onFieldChange', field.name, value);
                 });
                 formGroup.addControl(key, control);
+                if (this.builder.showErrorCheckbox) {
+                    const errorControl = this.fb.control(false);
+                    formGroup.addControl(`isError_${field.name}`, errorControl);
+                }
             }
         }
     }
@@ -173,4 +198,54 @@ export class FormMapping extends FormGroup {
     }
     onSubmit() { }
     onReset() { }
+    get value() {
+        const val = super.value;
+        this.cleanSubmitData(val);
+        return val;
+    }
+    getRawValue() {
+        const val = super.getRawValue();
+        this.cleanSubmitData(val);
+        return val;
+    }
+    cleanSubmitData(obj) {
+        if (!obj)
+            return;
+        for (const [_key, field] of Array.from(this.mapping.entries())) {
+            if (field && field.submitData === false && field.name) {
+                this.deletePath(obj, field.name);
+            }
+        }
+    }
+    deletePath(obj, path) {
+        if (!obj || !path)
+            return;
+        const segments = path.split('.');
+        let current = obj;
+        for (let i = 0; i < segments.length - 1; i++) {
+            const seg = segments[i];
+            if (seg.endsWith('[]')) {
+                const key = seg.replace('[]', '');
+                const arr = current[key];
+                if (Array.isArray(arr)) {
+                    const subPath = segments.slice(i + 1).join('.');
+                    arr.forEach(item => this.deletePath(item, subPath));
+                }
+                return;
+            }
+            else {
+                current = current[seg];
+                if (!current)
+                    return;
+            }
+        }
+        const lastSeg = segments[segments.length - 1];
+        if (lastSeg.endsWith('[]')) {
+            const key = lastSeg.replace('[]', '');
+            delete current[key];
+        }
+        else {
+            delete current[lastSeg];
+        }
+    }
 }

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

@@ -0,0 +1,114 @@
+/**
+ * FormulaBuilder - Handles automatic calculations for number fields
+ * Support formulas like "$width * $height" or "$price * $quantity * (1 - $discount/100)"
+ */
+export class FormulaBuilder {
+    builder;
+    constructor(builder) {
+        this.builder = builder;
+        this.extract();
+    }
+    /**
+     * Scan schema for fields with formula property
+     */
+    extract() {
+        const fields = Array.from(this.builder.form.mapping.values());
+        fields.forEach(field => {
+            // We only support number type for now as requested
+            if (field.type === 'number' && field.formula) {
+                this.setupFormula(field);
+            }
+        });
+    }
+    /**
+     * Setup subscription and calculation for a field
+     */
+    setupFormula(field) {
+        const formula = field.formula;
+        const depNames = this.getDependencies(formula);
+        const recalculate = () => {
+            const values = this.getEvaluationValues();
+            const result = this.evaluate(formula, values);
+            const control = field.control;
+            if (control && control.value !== result) {
+                control.setValue(result);
+            }
+        };
+        // Track which fields we've already subscribed to for this formula
+        const subscribed = new Set();
+        depNames.forEach(name => {
+            if (subscribed.has(name))
+                return;
+            const depField = this.builder.form.mappingById.get(name) || this.builder.form.mapping.get(name);
+            if (depField && depField.control) {
+                depField.control.subscribe(() => {
+                    recalculate();
+                });
+                subscribed.add(name);
+            }
+        });
+        // Initial calculation
+        setTimeout(() => recalculate(), 0);
+    }
+    /**
+     * Extract field names/ids from formula (prefixed with $)
+     */
+    getDependencies(formula) {
+        // Matches $name or $$id
+        const matches = formula.match(/[\$]{1,2}[a-zA-Z0-9_-]+/g) || [];
+        return matches.map(m => m.replace(/^[\$]{1,2}/, ''));
+    }
+    /**
+     * Helper to get all current values for evaluation
+     */
+    getEvaluationValues() {
+        const values = {};
+        // Map values by both Name and ID to support both in formulas
+        this.builder.form.mappingById.forEach((field, id) => {
+            if (field.control) {
+                values[id] = field.control.value;
+            }
+        });
+        this.builder.form.mapping.forEach((field, name) => {
+            if (field.control) {
+                values[name] = field.control.value;
+            }
+        });
+        return values;
+    }
+    /**
+     * Evaluate the formula string
+     */
+    evaluate(formula, values) {
+        try {
+            let expression = formula;
+            const depNames = this.getDependencies(formula);
+            // Sort dependencies by length descending to avoid partial replacements
+            // e.g., if we have $val and $value, replace $value first.
+            depNames.sort((a, b) => b.length - a.length);
+            depNames.forEach(name => {
+                const val = values[name] !== undefined ? values[name] : 0;
+                // Match $name or $$name but only as whole words (handle non-word chars after name)
+                // We escape special regex characters in the name if any.
+                const escapedName = name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                const regex = new RegExp(`\\$[\\$]?${escapedName}(\\b|[^a-zA-Z0-9_-])`, 'g');
+                expression = expression.replace(regex, (_match, suffix) => {
+                    return String(val || 0) + (suffix || '');
+                });
+            });
+            // Basic safety: only allow numbers, math operators, dot, and parentheses
+            const safeExpression = expression.replace(/[^0-9\+\-\*\/\(\)\. ]/g, '');
+            if (!safeExpression.trim())
+                return 0;
+            // Use Function for execution
+            // eslint-disable-next-line no-new-func
+            const result = new Function(`return ${safeExpression}`)();
+            const numResult = Number(result);
+            return isFinite(numResult) ? numResult : 0;
+        }
+        catch (e) {
+            console.warn('Formula Evaluation Error:', e, 'Formula:', formula);
+            return 0;
+        }
+    }
+}

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

@@ -1,8 +1,10 @@
 import { ConditionBuilder } from "./condition-builder";
+import { FormulaBuilder } from "./formula-builder";
 import { FormMapping } from "./form-mapping";
 import { SchemaValidator } from "./schema-validator";
 export class SchemaBuilder {
     schema;
+    showErrorCheckbox = false;
     form;
     context = {};
     get fields() {
@@ -16,14 +18,17 @@ export class SchemaBuilder {
         return this;
     }
     conditions;
-    constructor(schema) {
+    formulas;
+    constructor(schema, options = {}) {
         this.schema = schema;
+        this.showErrorCheckbox = !!options.showErrorCheckbox;
         this.form = new FormMapping(this);
         const schemaErrors = SchemaValidator.validate(this.schema);
         if (schemaErrors.length > 0) {
             console.error('SchemaBuilder Error: The provided schema is invalid.', schemaErrors);
         }
         this.conditions = new ConditionBuilder(this);
+        this.formulas = new FormulaBuilder(this);
         this.callEvent('onInit');
     }
     callEvent(name, ...args) {
@@ -47,6 +52,6 @@ export class SchemaBuilder {
         return () => this._subscribers.delete(callback);
     }
     notifySubscribers() {
-        this._subscribers.forEach((callback) => callback(this.form.value));
+        this._subscribers.forEach(callback => callback(this.form.value));
     }
 }

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

@@ -40,7 +40,7 @@ export class SchemaValidator {
             }
         }
         else {
-            // Inputs and value fields should ideally have a name, but we won't strictly enforce it here 
+            // Inputs and value fields should ideally have a name, but we won't strictly enforce it here
             // since some fields like 'divider', 'heading' don't need a name.
             const displayOnlyTypes = ['divider', 'heading', 'paragraph', 'image', 'avatar', 'html', 'iframe'];
             if (!displayOnlyTypes.includes(field.type) && !field.name) {

package/dist/collection/components/x-form-builder/types/common/index.js

@@ -5,3 +5,4 @@ export * from './shared-interfaces';
 export * from './validation-types';
 export * from './condition-types';
 export * from './value-types';
+export * from './ui-types';