@uzum-tech/ui 1.5.1 → 1.5.3

package/lib/cascader/src/Cascader.js

@@ -188,7 +188,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function doUpdateValue(value, option, optionPath) {
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue, onChange } = props;
-            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            const { triggerFormInput, triggerFormChange } = formItem;
             if (onUpdateValue) {
                 (0, _utils_1.call)(onUpdateValue, value, option, optionPath);
             }
@@ -199,8 +199,8 @@ exports.default = (0, vue_1.defineComponent)({
                 (0, _utils_1.call)(onChange, value, option, optionPath);
             }
             uncontrolledValueRef.value = value;
-            nTriggerFormInput();
-            nTriggerFormChange();
+            triggerFormInput();
+            triggerFormChange();
         }
         function updateKeyboardKey(key) {
             keyboardKeyRef.value = key;
@@ -377,17 +377,17 @@ exports.default = (0, vue_1.defineComponent)({
         // --- methods
         function doBlur(e) {
             const { onBlur } = props;
-            const { nTriggerFormBlur } = formItem;
+            const { triggerFormBlur } = formItem;
             if (onBlur)
                 (0, _utils_1.call)(onBlur, e);
-            nTriggerFormBlur();
+            triggerFormBlur();
         }
         function doFocus(e) {
             const { onFocus } = props;
-            const { nTriggerFormFocus } = formItem;
+            const { triggerFormFocus } = formItem;
             if (onFocus)
                 (0, _utils_1.call)(onFocus, e);
-            nTriggerFormFocus();
+            triggerFormFocus();
         }
         function focusSelectionInput() {
             var _a;

package/lib/checkbox/src/CheckboxGroup.js

@@ -52,7 +52,7 @@ exports.default = (0, vue_1.defineComponent)({
             return new Set();
         });
         function toggleCheckbox(checked, checkboxValue) {
-            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            const { triggerFormInput, triggerFormChange } = formItem;
             const { onChange, 'onUpdate:value': _onUpdateValue, onUpdateValue } = props;
             if (Array.isArray(mergedValueRef.value)) {
                 const groupValue = Array.from(mergedValueRef.value);
@@ -72,8 +72,8 @@ exports.default = (0, vue_1.defineComponent)({
                                 value: checkboxValue
                             });
                         }
-                        nTriggerFormInput();
-                        nTriggerFormChange();
+                        triggerFormInput();
+                        triggerFormChange();
                         uncontrolledValueRef.value = groupValue;
                         // deprecated
                         if (onChange)
@@ -98,8 +98,8 @@ exports.default = (0, vue_1.defineComponent)({
                         if (onChange)
                             (0, _utils_1.call)(onChange, groupValue); // deprecated
                         uncontrolledValueRef.value = groupValue;
-                        nTriggerFormInput();
-                        nTriggerFormChange();
+                        triggerFormInput();
+                        triggerFormChange();
                     }
                 }
             }
@@ -120,8 +120,8 @@ exports.default = (0, vue_1.defineComponent)({
                     if (onChange)
                         (0, _utils_1.call)(onChange, [checkboxValue]); // deprecated
                     uncontrolledValueRef.value = [checkboxValue];
-                    nTriggerFormInput();
-                    nTriggerFormChange();
+                    triggerFormInput();
+                    triggerFormChange();
                 }
                 else {
                     if (onUpdateValue) {
@@ -139,8 +139,8 @@ exports.default = (0, vue_1.defineComponent)({
                     if (onChange)
                         (0, _utils_1.call)(onChange, []); // deprecated
                     uncontrolledValueRef.value = [];
-                    nTriggerFormInput();
-                    nTriggerFormChange();
+                    triggerFormInput();
+                    triggerFormChange();
                 }
             }
         }

package/lib/color-picker/src/ColorPicker.js

@@ -261,14 +261,14 @@ exports.default = (0, vue_1.defineComponent)({
             else {
                 upcomingValue = null;
             }
-            const { nTriggerFormChange, nTriggerFormInput } = formItem;
+            const { triggerFormChange, triggerFormInput } = formItem;
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props;
             if (onUpdateValue)
                 (0, _utils_1.call)(onUpdateValue, value);
             if (_onUpdateValue)
                 (0, _utils_1.call)(_onUpdateValue, value);
-            nTriggerFormChange();
-            nTriggerFormInput();
+            triggerFormChange();
+            triggerFormInput();
             uncontrolledValueRef.value = value;
         }
         function handleInputUpdateValue(value) {
@@ -279,7 +279,7 @@ exports.default = (0, vue_1.defineComponent)({
             const { value } = mergedValueRef;
             // no value & only hue changes will complete with no value
             if (value) {
-                const { nTriggerFormChange, nTriggerFormInput } = formItem;
+                const { triggerFormChange, triggerFormInput } = formItem;
                 const { onComplete } = props;
                 if (onComplete) {
                     ;
@@ -291,8 +291,8 @@ exports.default = (0, vue_1.defineComponent)({
                     undoStack.splice(valueIndex + 1, undoStack.length, value);
                     valueIndexRef.value = valueIndex + 1;
                 }
-                nTriggerFormChange();
-                nTriggerFormInput();
+                triggerFormChange();
+                triggerFormInput();
             }
         }
         function undo() {

package/lib/components.d.ts

@@ -44,6 +44,7 @@ export * from './icon-wrapper';
 export * from './image';
 export * from './input';
 export * from './input-number';
+export * from './input-otp';
 export * from './layout';
 export * from './legacy-grid';
 export * from './legacy-transfer';

package/lib/components.js

@@ -60,6 +60,7 @@ __exportStar(require("./icon-wrapper"), exports);
 __exportStar(require("./image"), exports);
 __exportStar(require("./input"), exports);
 __exportStar(require("./input-number"), exports);
+__exportStar(require("./input-otp"), exports);
 __exportStar(require("./layout"), exports);
 __exportStar(require("./legacy-grid"), exports);
 __exportStar(require("./legacy-transfer"), exports);

package/lib/config-provider/src/internal-interface.d.ts

@@ -37,6 +37,7 @@ import type { IconWrapperTheme } from '../../icon-wrapper/styles';
 import type { ImageTheme } from '../../image/styles';
 import type { InputTheme } from '../../input/styles';
 import type { InputNumberTheme } from '../../input-number/styles';
+import type { InputOtpTheme } from '../../input-otp/styles';
 import type { LayoutTheme } from '../../layout/styles';
 import type { LegacyTransferTheme } from '../../legacy-transfer/styles';
 import type { ListTheme } from '../../list/styles';
@@ -190,6 +191,7 @@ export interface GlobalThemeWithoutCommon {
     InternalSelectMenu?: InternalSelectMenuTheme;
     InternalSelection?: InternalSelectionTheme;
     AccountOption?: AccountOptionTheme;
+    InputOtp?: InputOtpTheme;
 }
 export interface GlobalComponentConfig {
     Pagination?: {

package/lib/data-table/src/DataTable.d.ts

@@ -24,6 +24,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     readonly loading: BooleanConstructor;
+    readonly loadingSkeleton: BooleanConstructor;
     readonly bordered: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
@@ -2871,6 +2872,11 @@ declare const _default: import("vue").DefineComponent<{
     page: (page: number) => void;
     sort: (columnKey: import("./interface").ColumnKey, order: import("./interface").SortOrder) => void;
     scrollTo: import("../../scrollbar/src/Scrollbar").ScrollTo;
+    getData: () => {
+        data: import("./interface").InternalRowData[];
+        totalRows: import("./interface").InternalRowData | null;
+    };
+    getTotalRowData: () => import("./interface").InternalRowData | null;
     clearFilter: () => void;
     mainTableInstRef: import("vue").Ref<{
         getHeaderElement: () => HTMLElement | null;
@@ -4295,6 +4301,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     readonly loading: BooleanConstructor;
+    readonly loadingSkeleton: BooleanConstructor;
     readonly bordered: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
@@ -7145,6 +7152,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly virtualScroll: boolean;
     readonly tableLayout: "auto" | "fixed";
     readonly columns: import("./interface").TableColumns<any>;
+    readonly loadingSkeleton: boolean;
     readonly remote: boolean;
     readonly paginateSinglePage: boolean;
     readonly bottomBordered: boolean | undefined;

package/lib/data-table/src/DataTable.js

@@ -18,7 +18,6 @@ const use_resizable_1 = require("./use-resizable");
 const interface_1 = require("./interface");
 const use_group_header_1 = require("./use-group-header");
 const use_expand_1 = require("./use-expand");
-const use_mask_1 = require("./use-mask");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 exports.default = (0, vue_1.defineComponent)({
     name: 'DataTable',
@@ -98,7 +97,7 @@ exports.default = (0, vue_1.defineComponent)({
                         return;
                     if (!('totalRow' in col) || !col.totalRow)
                         return;
-                    const { key, totalRow, render, mask } = col;
+                    const { key, totalRow, render } = col;
                     if (!totalRow)
                         return;
                     if (totalRow.type === 'default') {
@@ -111,18 +110,12 @@ exports.default = (0, vue_1.defineComponent)({
                                 return Number(renderedValue) || 0;
                             });
                             const sum = values.reduce((sum, val) => sum + val, 0);
-                            const finalValue = mask
-                                ? (0, use_mask_1.processMaskedValue)(String(sum), mask)
-                                : sum;
-                            summaryRow[key] = { value: finalValue };
+                            summaryRow[key] = { value: sum };
                         }
                         else {
                             const values = pageData.map((row) => Number(row[key]) || 0);
                             const sum = values.reduce((sum, val) => sum + val, 0);
-                            const finalValue = mask
-                                ? (0, use_mask_1.processMaskedValue)(String(sum), mask)
-                                : sum;
-                            summaryRow[key] = { value: finalValue };
+                            summaryRow[key] = { value: sum };
                         }
                     }
                     else {
@@ -258,6 +251,7 @@ exports.default = (0, vue_1.defineComponent)({
             mergedSortStateRef,
             mergedFilterStateRef,
             loadingRef: (0, vue_1.toRef)(props, 'loading'),
+            loadingSkeletonRef: (0, vue_1.toRef)(props, 'loadingSkeleton'),
             rowClassNameRef: (0, vue_1.toRef)(props, 'rowClassName'),
             mergedCheckedRowKeySetRef,
             mergedExpandedRowKeysRef,
@@ -324,6 +318,23 @@ exports.default = (0, vue_1.defineComponent)({
             scrollTo: (arg0, arg1) => {
                 var _a;
                 (_a = mainTableInstRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(arg0, arg1);
+            },
+            getData: () => {
+                const originalData = props.data || [];
+                const totalRowData = autoSummaryRef.value && rawPaginatedDataRef.value
+                    ? autoSummaryRef.value(rawPaginatedDataRef.value)
+                    : null;
+                return {
+                    data: originalData,
+                    totalRows: totalRowData
+                };
+            },
+            getTotalRowData: () => {
+                if (autoSummaryRef.value && rawPaginatedDataRef.value) {
+                    const summaryResult = autoSummaryRef.value(rawPaginatedDataRef.value);
+                    return summaryResult;
+                }
+                return null;
             }
         };
         const cssVarsRef = (0, vue_1.computed)(() => {

package/lib/data-table/src/TableParts/Body.d.ts

@@ -1376,6 +1376,7 @@ declare const _default: import("vue").DefineComponent<{
     scrollX: import("vue").Ref<string | number | undefined>;
     cols: import("vue").Ref<ColItem[]>;
     loading: import("vue").Ref<boolean>;
+    loadingSkeleton: import("vue").Ref<boolean>;
     bodyShowHeaderOnly: import("vue").ComputedRef<boolean>;
     shouldDisplaySomeTablePart: import("vue").ComputedRef<boolean>;
     empty: import("vue").ComputedRef<boolean>;

package/lib/data-table/src/TableParts/Body.js

@@ -99,7 +99,7 @@ exports.default = (0, vue_1.defineComponent)({
         bodyStyle: Object
     },
     setup(props) {
-        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell
+        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, loadingSkeletonRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         const scrollbarInstRef = (0, vue_1.ref)(null);
@@ -309,7 +309,7 @@ exports.default = (0, vue_1.defineComponent)({
             componentId,
             scrollbarInstRef,
             virtualListRef,
-            emptyElRef, summary: summaryRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, scrollX: scrollXRef, cols: colsRef, loading: loadingRef, bodyShowHeaderOnly: bodyShowHeaderOnlyRef, shouldDisplaySomeTablePart: shouldDisplaySomeTablePartRef, empty: emptyRef, paginatedDataAndInfo: (0, vue_1.computed)(() => {
+            emptyElRef, summary: summaryRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, scrollX: scrollXRef, cols: colsRef, loading: loadingRef, loadingSkeleton: loadingSkeletonRef, bodyShowHeaderOnly: bodyShowHeaderOnlyRef, shouldDisplaySomeTablePart: shouldDisplaySomeTablePartRef, empty: emptyRef, paginatedDataAndInfo: (0, vue_1.computed)(() => {
                 const { value: striped } = stripedRef;
                 let hasChildren = false;
                 const data = paginatedDataRef.value.map(striped
@@ -565,6 +565,7 @@ exports.default = (0, vue_1.defineComponent)({
                                     `${mergedClsPrefix}-data-table-td--last-row`,
                                 'editable' in column &&
                                     column.editable &&
+                                    !isSummary &&
                                     `${mergedClsPrefix}-data-table-td--editable`
                             ] }),
                             column.fixed && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-td__shadow-holder` })),
@@ -596,12 +597,12 @@ exports.default = (0, vue_1.defineComponent)({
                         } },
                         (0, vue_1.h)("colgroup", null, cols.map((col) => ((0, vue_1.h)("col", { key: col.key, style: col.style })))),
                         this.showHeader ? (0, vue_1.h)(Header_1.default, { discrete: false }) : null,
-                        this.loading ? ((0, vue_1.h)(BodySkeleton_1.default, null)) : !this.empty ? ((0, vue_1.h)("tbody", { "data-u-id": componentId, class: `${mergedClsPrefix}-data-table-tbody` }, displayedData.map((rowInfo, displayedRowIndex) => {
+                        this.loadingSkeleton ? ((0, vue_1.h)(BodySkeleton_1.default, null)) : !this.empty ? ((0, vue_1.h)("tbody", { "data-u-id": componentId, class: `${mergedClsPrefix}-data-table-tbody` }, displayedData.map((rowInfo, displayedRowIndex) => {
                             return renderRow(rowInfo, displayedRowIndex, false);
                         }))) : null));
                 }
                 else {
-                    if (this.loading) {
+                    if (this.loading || this.loadingSkeleton) {
                         return ((0, vue_1.h)("table", { class: `${mergedClsPrefix}-data-table-table`, onMouseleave: handleMouseleaveTable, style: {
                                 tableLayout: this.mergedTableLayout
                             } },
@@ -620,7 +621,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         }));
-        if (this.empty) {
+        if (this.empty && !this.loadingSkeleton) {
             const createEmptyNode = () => ((0, vue_1.h)("div", { class: [
                     `${mergedClsPrefix}-data-table-empty`,
                     this.loading && `${mergedClsPrefix}-data-table-empty--hide`

package/lib/data-table/src/TableParts/Cell.js

@@ -4,6 +4,7 @@ const vue_1 = require("vue");
 const lodash_es_1 = require("lodash-es");
 const ellipsis_1 = require("../../../ellipsis");
 const use_mask_1 = require("../use-mask");
+const utils_1 = require("../utils");
 exports.default = (0, vue_1.defineComponent)({
     name: 'DataTableCell',
     emits: ['edit'],
@@ -35,7 +36,10 @@ exports.default = (0, vue_1.defineComponent)({
         var _a;
         const { isSummary, column, row, renderCell } = this;
         let cell;
-        const { render, key, ellipsis, editable, mask } = column;
+        let { mask } = column;
+        const { render, key, ellipsis, editable, numeric } = column;
+        if (numeric && !mask)
+            mask = utils_1.defaultNumericMask;
         if (render && !isSummary) {
             let cellValue = render(row, this.index);
             if (mask && cellValue !== null && cellValue !== undefined) {
@@ -47,37 +51,95 @@ exports.default = (0, vue_1.defineComponent)({
         }
         else if (editable && !isSummary) {
             const { placeholder } = column;
-            let initialValue = String(row[key] || '');
-            if (mask && initialValue) {
-                initialValue = (0, use_mask_1.processMaskedValue)(initialValue, mask);
-            }
+            const rawValue = String(row[key] || '');
+            const displayValue = mask ? (0, use_mask_1.processMaskedValue)(rawValue, mask) : rawValue;
+            const isEditingRef = { current: false };
             const inputProps = {
                 class: `${this.clsPrefix}-data-table-editable-input`,
-                value: initialValue,
+                value: displayValue,
                 placeholder: placeholder || '',
+                onFocus: (e) => {
+                    const input = e.target;
+                    isEditingRef.current = true;
+                    input.value = rawValue;
+                },
+                onKeyDown: (e) => {
+                    if (mask && typeof mask === 'function' && isEditingRef.current) {
+                        const input = e.target;
+                        input.value = rawValue;
+                    }
+                },
                 onInput: (e) => {
-                    const value = e.target.value;
-                    if (mask) {
-                        const { processedValue, displayValue } = (0, use_mask_1.processInputWithMask)(value, mask);
-                        setTimeout(() => {
-                            const input = e.target;
-                            if (input.value !== displayValue) {
-                                const cursorPos = input.selectionStart || 0;
-                                input.value = displayValue;
-                                input.setSelectionRange(cursorPos, cursorPos);
+                    const input = e.target;
+                    const value = input.value;
+                    if (mask && typeof mask === 'function' && !isEditingRef.current) {
+                        isEditingRef.current = true;
+                    }
+                    if (mask && typeof mask === 'function' && isEditingRef.current) {
+                        const rawValue = value.replace(/\$/g, '').replace(/[^\d.,]/g, '');
+                        input.value = rawValue;
+                        let processedValue = rawValue;
+                        if (numeric && rawValue !== '') {
+                            const cleanValue = rawValue
+                                .replace(/[^\d.,]/g, '')
+                                .replace(',', '.');
+                            const numValue = Number(cleanValue);
+                            if (!isNaN(numValue)) {
+                                processedValue = numValue;
                             }
-                        });
+                        }
                         this.$emit('edit', processedValue, row, key);
+                        void Promise.resolve().then(() => {
+                            if (isEditingRef.current && input.value !== rawValue) {
+                                input.value = rawValue;
+                            }
+                        });
+                        return;
+                    }
+                    let processedValue = value;
+                    if (numeric && value !== '') {
+                        const cleanValue = value.replace(/[^\d.,]/g, '').replace(',', '.');
+                        const numValue = Number(cleanValue);
+                        if (!isNaN(numValue)) {
+                            processedValue = numValue;
+                        }
                     }
-                    else {
-                        this.$emit('edit', value, row, key);
+                    this.$emit('edit', processedValue, row, key);
+                },
+                onKeyUp: (e) => {
+                    if (mask && typeof mask === 'function' && isEditingRef.current) {
+                        const input = e.target;
+                        input.value = rawValue;
+                    }
+                },
+                onChange: (e) => {
+                    if (mask && typeof mask === 'function' && isEditingRef.current) {
+                        const input = e.target;
+                        setTimeout(() => {
+                            if (isEditingRef.current && input.value !== rawValue) {
+                                input.value = rawValue;
+                            }
+                        }, 0);
+                        setTimeout(() => {
+                            if (isEditingRef.current && input.value !== rawValue) {
+                                input.value = rawValue;
+                            }
+                        }, 10);
+                    }
+                },
+                onBlur: (e) => {
+                    isEditingRef.current = false;
+                    if (mask) {
+                        const input = e.target;
+                        let currentValue = input.value;
+                        if (numeric && currentValue !== '') {
+                            currentValue = currentValue.replace(',', '.');
+                        }
+                        const maskedValue = (0, use_mask_1.processMaskedValue)(currentValue, mask);
+                        input.value = maskedValue;
                     }
                 }
             };
-            if (mask) {
-                inputProps['data-mask'] =
-                    typeof mask === 'string' ? mask : JSON.stringify(mask);
-            }
             cell = (0, vue_1.h)('input', inputProps);
         }
         else {

package/lib/data-table/src/interface.d.ts

@@ -34,6 +34,7 @@ export declare const dataTableProps: {
         readonly default: () => never[];
     };
     readonly loading: BooleanConstructor;
+    readonly loadingSkeleton: BooleanConstructor;
     readonly bordered: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -2912,6 +2913,10 @@ export interface CommonColumnInfo<T = InternalRowData> {
     cellProps?: (rowData: T, rowIndex: number) => HTMLAttributes;
     visible?: boolean;
 }
+export interface TableColumnMaskObject {
+    postProcess: (value: string) => string;
+}
+export type TableColumnMask = string | ((value: string) => string) | TableColumnMaskObject;
 export type TableColumnTitle = string | ((column: TableBaseColumn) => VNodeChild);
 export type TableExpandColumnTitle = string | ((column: TableExpandColumn) => VNodeChild);
 export type TableColumnGroupTitle = string | ((column: TableColumnGroup) => VNodeChild);
@@ -2931,18 +2936,14 @@ export type TableBaseColumn<T = InternalRowData> = {
     type?: never;
     key: ColumnKey;
     editable?: boolean;
-    mask?: string | ((value: string) => string) | {
-        postProcess: (value: string) => string;
-    };
+    mask?: TableColumnMask;
+    numeric?: boolean;
     placeholder?: string;
     totalRow?: {
         type: 'sum' | 'default' | 'diff' | 'multiply' | 'divide' | 'percentage' | 'function';
         value?: string;
         fields?: string[];
         function?: (values: number[]) => number;
-        mask?: string | ((value: string) => string) | {
-            postProcess: (value: string) => string;
-        };
     };
     tree?: boolean;
     sorter?: boolean | Sorter<T> | 'default';
@@ -3035,6 +3036,7 @@ export interface DataTableInjection {
     mergedSortStateRef: Ref<SortState[]>;
     mergedFilterStateRef: Ref<FilterState>;
     loadingRef: Ref<boolean>;
+    loadingSkeletonRef: Ref<boolean>;
     rowClassNameRef: Ref<string | CreateRowClassName | undefined>;
     mergedCheckedRowKeySetRef: Ref<Set<RowKey>>;
     mergedInderminateRowKeySetRef: Ref<Set<RowKey>>;
@@ -3136,6 +3138,11 @@ export interface DataTableInst {
     page: (page: number) => void;
     sort: (columnKey: ColumnKey, order: SortOrder) => void;
     scrollTo: ScrollTo;
+    getData: () => {
+        data: InternalRowData[];
+        totalRows: InternalRowData | null;
+    };
+    getTotalRowData: () => InternalRowData | null;
     /** @deprecated it but just leave it here, it does no harm */
     clearFilter: () => void;
 }

package/lib/data-table/src/interface.js

@@ -17,7 +17,7 @@ exports.dataTableProps = Object.assign(Object.assign({}, _mixins_1.useTheme.prop
     }, rowClassName: [String, Function], rowProps: Function, rowKey: Function, summary: [Function], data: {
         type: Array,
         default: () => []
-    }, loading: Boolean, bordered: {
+    }, loading: Boolean, loadingSkeleton: Boolean, bordered: {
         type: Boolean,
         default: undefined
     }, bottomBordered: {

package/lib/data-table/src/styles/index.cssr.js

@@ -301,19 +301,21 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  `), (0, cssr_1.cM)('editable', `
  cursor: pointer;
  position: relative;
- 
+ padding: 0;
  .u-data-table-editable-input {
  appearance: none;
  text-align: right;
  border: none;
  background: none;
  outline: none;
- padding: 0;
+ box-sizing: border-box;
+ padding: var(--u-td-padding);
  margin: 0;
  font: inherit;
  color: inherit;
  box-shadow: none;
- width: '100%';
+ height: 100%;
+ width: 100%;
  }
  `), fixedColumnStyle]), (0, cssr_1.cB)('data-table-empty', `
  box-sizing: border-box;

package/lib/data-table/src/use-mask.d.ts

@@ -1,10 +1,7 @@
+import { TableColumnMask } from './interface';
 export declare function applyMask(value: string, mask: string): string;
-export declare function processMaskedValue(value: string | number, mask: string | ((value: string) => string) | {
-    postProcess: (value: string) => string;
-}): string;
-export declare function processInputWithMask(value: string, mask: string | ((value: string) => string) | {
-    postProcess: (value: string) => string;
-}): {
+export declare function processMaskedValue(value: string | number, mask: TableColumnMask): string;
+export declare function processInputWithMask(value: string, mask: TableColumnMask): {
     processedValue: string | number;
     displayValue: string;
 };

package/lib/data-table/src/utils.d.ts

@@ -1,11 +1,12 @@
 import type { CSSProperties } from 'vue';
-import type { SortOrder, TableBaseColumn, InternalRowData, SortOrderFlag, SortState, CreateRowClassName, TableSelectionColumn, TableColumn, TableExpandColumn } from './interface';
+import type { SortOrder, TableBaseColumn, InternalRowData, SortOrderFlag, SortState, CreateRowClassName, TableSelectionColumn, TableColumn, TableExpandColumn, TableColumnMaskObject } from './interface';
 export declare const SELECTION_COL_WIDTH = 40;
 export declare const EXPAND_COL_WIDTH = 40;
 export declare const REGEX: {
     ONLY_DIGITS: RegExp;
     ONLY_NUMERIC_AND_DOT: RegExp;
 };
+export declare const defaultNumericMask: TableColumnMaskObject;
 export declare function getNumberColWidth(col: TableColumn): number | undefined;
 export declare function getStringColWidth(col: TableColumn): string | undefined;
 export declare function getColKey(col: TableColumn): string | number;

package/lib/data-table/src/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.REGEX = exports.EXPAND_COL_WIDTH = exports.SELECTION_COL_WIDTH = void 0;
+exports.defaultNumericMask = exports.REGEX = exports.EXPAND_COL_WIDTH = exports.SELECTION_COL_WIDTH = void 0;
 exports.getNumberColWidth = getNumberColWidth;
 exports.getStringColWidth = getStringColWidth;
 exports.getColKey = getColKey;
@@ -23,6 +23,19 @@ exports.REGEX = {
     ONLY_DIGITS: /\D/g,
     ONLY_NUMERIC_AND_DOT: /[^\d.]/g
 };
+exports.defaultNumericMask = {
+    postProcess: (value) => {
+        if (!value)
+            return '';
+        const isNegative = value.trim().startsWith('-');
+        const cleaned = value.replace(/[^\d.]/g, '');
+        const [intPartRaw, decimalPartRaw = ''] = cleaned.split('.', 2);
+        const intPart = intPartRaw.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+        const decimalPart = decimalPartRaw.slice(0, 2);
+        const result = cleaned.includes('.') ? `${intPart}.${decimalPart}` : intPart;
+        return isNegative ? `-${result}` : result;
+    }
+};
 function getNumberColWidth(col) {
     if (col.type === 'selection') {
         return col.width === undefined ? exports.SELECTION_COL_WIDTH : (0, seemly_1.depx)(col.width);