@uzum-tech/ui 1.3.1 → 1.4.0

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

@@ -68,7 +68,7 @@ export declare const dataTableProps: {
     readonly stickyExpandedRows: BooleanConstructor;
     readonly virtualScroll: BooleanConstructor;
     readonly tableLayout: {
-        readonly type: PropType<"fixed" | "auto">;
+        readonly type: PropType<"auto" | "fixed">;
         readonly default: "auto";
     };
     readonly allowCheckingNotLoaded: BooleanConstructor;
@@ -86,7 +86,7 @@ export declare const dataTableProps: {
     };
     readonly flexHeight: BooleanConstructor;
     readonly summaryPlacement: {
-        readonly type: PropType<"bottom" | "top">;
+        readonly type: PropType<"top" | "bottom">;
         readonly default: "bottom";
     };
     readonly paginationBehaviorOnFilter: {
@@ -101,10 +101,10 @@ export declare const dataTableProps: {
         readonly default: {};
     };
     readonly onLoad: PropType<DataTableOnLoad>;
-    readonly 'onUpdate:page': PropType<MaybeArray<(page: number) => void> | undefined>;
-    readonly onUpdatePage: PropType<MaybeArray<(page: number) => void> | undefined>;
-    readonly 'onUpdate:pageSize': PropType<MaybeArray<(pageSize: number) => void> | undefined>;
-    readonly onUpdatePageSize: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
+    readonly 'onUpdate:page': PropType<PaginationProps["onUpdate:page"]>;
+    readonly onUpdatePage: PropType<PaginationProps["onUpdate:page"]>;
+    readonly 'onUpdate:pageSize': PropType<PaginationProps["onUpdate:pageSize"]>;
+    readonly onUpdatePageSize: PropType<PaginationProps["onUpdate:pageSize"]>;
     readonly 'onUpdate:sorter': PropType<MaybeArray<OnUpdateSorter>>;
     readonly onUpdateSorter: PropType<MaybeArray<OnUpdateSorter>>;
     readonly 'onUpdate:filters': PropType<MaybeArray<OnUpdateFilters>>;
@@ -114,8 +114,8 @@ export declare const dataTableProps: {
     readonly 'onUpdate:expandedRowKeys': PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
     readonly onUpdateExpandedRowKeys: PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
     readonly onScroll: PropType<(e: Event) => void>;
-    readonly onPageChange: PropType<MaybeArray<(page: number) => void> | undefined>;
-    readonly onPageSizeChange: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
+    readonly onPageChange: PropType<PaginationProps["onUpdate:page"]>;
+    readonly onPageSizeChange: PropType<PaginationProps["onUpdate:pageSize"]>;
     readonly onSorterChange: PropType<MaybeArray<OnUpdateSorter> | undefined>;
     readonly onFiltersChange: PropType<MaybeArray<OnUpdateFilters> | undefined>;
     readonly onCheckedRowKeysChange: PropType<MaybeArray<OnUpdateCheckedRowKeys> | undefined>;
@@ -155,6 +155,9 @@ export declare const dataTableProps: {
         tdTextColor: string;
         thTextColor: string;
         thFontWeight: string;
+        thSubColor: string;
+        thSubFontWeight: string;
+        thSubFontSize: string;
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
@@ -733,12 +736,18 @@ export declare const dataTableProps: {
                         iconSizeMedium: string;
                         iconSizeLarge: string;
                         iconSizeHuge: string;
-                        fontSizeSmall: string;
-                        fontSizeMedium: string;
-                        fontSizeLarge: string;
-                        fontSizeHuge: string;
-                        textColor: string;
+                        titleFontSizeSmall: string;
+                        titleFontSizeMedium: string;
+                        titleFontSizeLarge: string;
+                        titleFontSizeHuge: string;
+                        descriptionFontSizeSmall: string;
+                        descriptionFontSizeMedium: string;
+                        descriptionFontSizeLarge: string;
+                        descriptionFontSizeHuge: string;
+                        titleColor: string;
+                        descriptionColor: string;
                         iconColor: string;
+                        iconBgColor: string;
                         extraTextColor: string;
                     }, any>;
                 }>;
@@ -866,12 +875,18 @@ export declare const dataTableProps: {
                         iconSizeMedium: string;
                         iconSizeLarge: string;
                         iconSizeHuge: string;
-                        fontSizeSmall: string;
-                        fontSizeMedium: string;
-                        fontSizeLarge: string;
-                        fontSizeHuge: string;
-                        textColor: string;
+                        titleFontSizeSmall: string;
+                        titleFontSizeMedium: string;
+                        titleFontSizeLarge: string;
+                        titleFontSizeHuge: string;
+                        descriptionFontSizeSmall: string;
+                        descriptionFontSizeMedium: string;
+                        descriptionFontSizeLarge: string;
+                        descriptionFontSizeHuge: string;
+                        titleColor: string;
+                        descriptionColor: string;
                         iconColor: string;
+                        iconBgColor: string;
                         extraTextColor: string;
                     }, any>;
                 }>;
@@ -886,12 +901,18 @@ export declare const dataTableProps: {
             iconSizeMedium: string;
             iconSizeLarge: string;
             iconSizeHuge: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
-            fontSizeHuge: string;
-            textColor: string;
+            titleFontSizeSmall: string;
+            titleFontSizeMedium: string;
+            titleFontSizeLarge: string;
+            titleFontSizeHuge: string;
+            descriptionFontSizeSmall: string;
+            descriptionFontSizeMedium: string;
+            descriptionFontSizeLarge: string;
+            descriptionFontSizeHuge: string;
+            titleColor: string;
+            descriptionColor: string;
             iconColor: string;
+            iconBgColor: string;
             extraTextColor: string;
         }, any>;
         Popover: import("../../_mixins").Theme<"Popover", {
@@ -1050,6 +1071,9 @@ export declare const dataTableProps: {
         tdTextColor: string;
         thTextColor: string;
         thFontWeight: string;
+        thSubColor: string;
+        thSubFontWeight: string;
+        thSubFontSize: string;
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
@@ -1628,12 +1652,18 @@ export declare const dataTableProps: {
                         iconSizeMedium: string;
                         iconSizeLarge: string;
                         iconSizeHuge: string;
-                        fontSizeSmall: string;
-                        fontSizeMedium: string;
-                        fontSizeLarge: string;
-                        fontSizeHuge: string;
-                        textColor: string;
+                        titleFontSizeSmall: string;
+                        titleFontSizeMedium: string;
+                        titleFontSizeLarge: string;
+                        titleFontSizeHuge: string;
+                        descriptionFontSizeSmall: string;
+                        descriptionFontSizeMedium: string;
+                        descriptionFontSizeLarge: string;
+                        descriptionFontSizeHuge: string;
+                        titleColor: string;
+                        descriptionColor: string;
                         iconColor: string;
+                        iconBgColor: string;
                         extraTextColor: string;
                     }, any>;
                 }>;
@@ -1761,12 +1791,18 @@ export declare const dataTableProps: {
                         iconSizeMedium: string;
                         iconSizeLarge: string;
                         iconSizeHuge: string;
-                        fontSizeSmall: string;
-                        fontSizeMedium: string;
-                        fontSizeLarge: string;
-                        fontSizeHuge: string;
-                        textColor: string;
+                        titleFontSizeSmall: string;
+                        titleFontSizeMedium: string;
+                        titleFontSizeLarge: string;
+                        titleFontSizeHuge: string;
+                        descriptionFontSizeSmall: string;
+                        descriptionFontSizeMedium: string;
+                        descriptionFontSizeLarge: string;
+                        descriptionFontSizeHuge: string;
+                        titleColor: string;
+                        descriptionColor: string;
                         iconColor: string;
+                        iconBgColor: string;
                         extraTextColor: string;
                     }, any>;
                 }>;
@@ -1781,12 +1817,18 @@ export declare const dataTableProps: {
             iconSizeMedium: string;
             iconSizeLarge: string;
             iconSizeHuge: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
-            fontSizeHuge: string;
-            textColor: string;
+            titleFontSizeSmall: string;
+            titleFontSizeMedium: string;
+            titleFontSizeLarge: string;
+            titleFontSizeHuge: string;
+            descriptionFontSizeSmall: string;
+            descriptionFontSizeMedium: string;
+            descriptionFontSizeLarge: string;
+            descriptionFontSizeHuge: string;
+            titleColor: string;
+            descriptionColor: string;
             iconColor: string;
+            iconBgColor: string;
             extraTextColor: string;
         }, any>;
         Popover: import("../../_mixins").Theme<"Popover", {
@@ -1945,6 +1987,9 @@ export declare const dataTableProps: {
         tdTextColor: string;
         thTextColor: string;
         thFontWeight: string;
+        thSubColor: string;
+        thSubFontWeight: string;
+        thSubFontSize: string;
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
@@ -2523,12 +2568,18 @@ export declare const dataTableProps: {
                         iconSizeMedium: string;
                         iconSizeLarge: string;
                         iconSizeHuge: string;
-                        fontSizeSmall: string;
-                        fontSizeMedium: string;
-                        fontSizeLarge: string;
-                        fontSizeHuge: string;
-                        textColor: string;
+                        titleFontSizeSmall: string;
+                        titleFontSizeMedium: string;
+                        titleFontSizeLarge: string;
+                        titleFontSizeHuge: string;
+                        descriptionFontSizeSmall: string;
+                        descriptionFontSizeMedium: string;
+                        descriptionFontSizeLarge: string;
+                        descriptionFontSizeHuge: string;
+                        titleColor: string;
+                        descriptionColor: string;
                         iconColor: string;
+                        iconBgColor: string;
                         extraTextColor: string;
                     }, any>;
                 }>;
@@ -2656,12 +2707,18 @@ export declare const dataTableProps: {
                         iconSizeMedium: string;
                         iconSizeLarge: string;
                         iconSizeHuge: string;
-                        fontSizeSmall: string;
-                        fontSizeMedium: string;
-                        fontSizeLarge: string;
-                        fontSizeHuge: string;
-                        textColor: string;
+                        titleFontSizeSmall: string;
+                        titleFontSizeMedium: string;
+                        titleFontSizeLarge: string;
+                        titleFontSizeHuge: string;
+                        descriptionFontSizeSmall: string;
+                        descriptionFontSizeMedium: string;
+                        descriptionFontSizeLarge: string;
+                        descriptionFontSizeHuge: string;
+                        titleColor: string;
+                        descriptionColor: string;
                         iconColor: string;
+                        iconBgColor: string;
                         extraTextColor: string;
                     }, any>;
                 }>;
@@ -2676,12 +2733,18 @@ export declare const dataTableProps: {
             iconSizeMedium: string;
             iconSizeLarge: string;
             iconSizeHuge: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
-            fontSizeHuge: string;
-            textColor: string;
+            titleFontSizeSmall: string;
+            titleFontSizeMedium: string;
+            titleFontSizeLarge: string;
+            titleFontSizeHuge: string;
+            descriptionFontSizeSmall: string;
+            descriptionFontSizeMedium: string;
+            descriptionFontSizeLarge: string;
+            descriptionFontSizeHuge: string;
+            titleColor: string;
+            descriptionColor: string;
             iconColor: string;
+            iconBgColor: string;
             extraTextColor: string;
         }, any>;
         Popover: import("../../_mixins").Theme<"Popover", {
@@ -2841,12 +2904,14 @@ export interface CommonColumnInfo<T = InternalRowData> {
     titleAlign?: 'left' | 'center' | 'right';
     ellipsis?: Ellipsis;
     cellProps?: (rowData: T, rowIndex: number) => HTMLAttributes;
+    visible?: boolean;
 }
 export type TableColumnTitle = string | ((column: TableBaseColumn) => VNodeChild);
 export type TableExpandColumnTitle = string | ((column: TableExpandColumn) => VNodeChild);
 export type TableColumnGroupTitle = string | ((column: TableColumnGroup) => VNodeChild);
 export type TableColumnGroup<T = InternalRowData> = {
     title?: TableColumnGroupTitle;
+    subtitle?: string;
     type?: never;
     key: ColumnKey;
     children: Array<TableBaseColumn<T>>;
@@ -2855,9 +2920,24 @@ export type TableColumnGroup<T = InternalRowData> = {
 } & CommonColumnInfo<T>;
 export type TableBaseColumn<T = InternalRowData> = {
     title?: TableColumnTitle;
+    subtitle?: string;
     titleColSpan?: number;
     type?: never;
     key: ColumnKey;
+    editable?: boolean;
+    mask?: string | ((value: string) => string) | {
+        postProcess: (value: string) => string;
+    };
+    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';
     defaultSortOrder?: SortOrder;
@@ -2904,6 +2984,7 @@ export type Expandable<T = InternalRowData> = (row: T) => boolean;
 export interface TableExpandColumn<T = InternalRowData> extends Omit<TableSelectionColumn<T>, 'type'> {
     type: 'expand';
     title?: TableExpandColumnTitle;
+    subtitle?: string;
     renderExpand: RenderExpand<T>;
     expandable?: Expandable<T>;
 }
@@ -2994,6 +3075,7 @@ export interface DataTableInjection {
     syncScrollState: (deltaX?: number, deltaY?: number) => void;
     setHeaderScrollLeft: (scrollLeft: number) => void;
     renderCell: Ref<undefined | ((value: any, rowData: object, column: TableBaseColumn) => VNodeChild)>;
+    handleEdit: (value: any, row: any, key: string) => void;
 }
 export declare const dataTableInjectionKey: import("vue").InjectionKey<DataTableInjection>;
 export interface MainTableInjection {

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

@@ -47,6 +47,9 @@ const fixedColumnStyle = createFixedColumnStyle();
 // --u-loading-size
 // --u-loading-color
 // --u-opacity-loading
+// --u-th-sub-color
+// --u-th-sub-font-weight
+// --u-th-sub-font-size
 // --u-fixed-box-shadow used in Body.tsx
 // --indent-offset for ellipsis & expand trigger
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
@@ -142,7 +145,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  margin: calc(var(--u-th-padding) * -1);
  padding: var(--u-th-padding);
  box-sizing: border-box;
- `), (0, cssr_1.cM)('disabled', null, [(0, cssr_1.cB)('data-table-td', 'color: var(--u-td-opacity-disabled);')]), (0, cssr_1.cM)('striped', 'background-color: var(--u-merged-td-color-striped);', [(0, cssr_1.cB)('data-table-td', 'background-color: var(--u-merged-td-color-striped);')]), (0, cssr_1.cNotM)('summary', [(0, cssr_1.c)('&:hover', 'background-color: var(--u-merged-td-color-hover);', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('data-table-td', 'background-color: var(--u-merged-td-color-hover);')])])])]), (0, cssr_1.cB)('data-table-th', `
+ `), (0, cssr_1.cM)('disabled', null, [(0, cssr_1.cB)('data-table-td', 'color: var(--u-td-opacity-disabled);')]), (0, cssr_1.cM)('striped', 'background-color: var(--u-merged-td-color-striped);', [(0, cssr_1.cB)('data-table-td', 'background-color: var(--u-merged-td-color-striped);')]), (0, cssr_1.c)('&:hover', 'background-color: var(--u-merged-td-color-hover);', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('data-table-td', 'background-color: var(--u-merged-td-color-hover);')])]), (0, cssr_1.c)('&:has(.u-data-table-td--editable:hover)', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('data-table-td', 'background-color: var(--u-merged-td-color);', [(0, cssr_1.cM)('editable', [(0, cssr_1.c)('&:hover', 'background-color: var(--u-merged-td-color-hover);')])])])])]), (0, cssr_1.cB)('data-table-th', `
  padding: var(--u-th-padding);
  position: relative;
  height: var(--u-th-height);
@@ -173,6 +176,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  `, [(0, cssr_1.cE)('title', `
  flex: 1;
  min-width: 0;
+ `), (0, cssr_1.cE)('subtitle', `
+ color: var(--u-th-sub-color);
+ font-weight: var(--u-th-sub-font-weight);
+ font-size: var(--u-th-sub-font-size);
  `)]), (0, cssr_1.cE)('ellipsis', `
  display: inline-block;
  vertical-align: bottom;
@@ -291,6 +298,23 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  `), (0, cssr_1.cM)('selection, expand', `
  text-align: center;
  line-height: 0;
+ `), (0, cssr_1.cM)('editable', `
+ cursor: pointer;
+ position: relative;
+ 
+ .u-data-table-editable-input {
+ appearance: none;
+ text-align: right;
+ border: none;
+ background: none;
+ outline: none;
+ padding: 0;
+ margin: 0;
+ font: inherit;
+ color: inherit;
+ box-shadow: none;
+ width: '100%';
+ }
  `), fixedColumnStyle]), (0, cssr_1.cB)('data-table-empty', `
  box-sizing: border-box;
  padding: var(--u-empty-padding);

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

@@ -12,7 +12,7 @@ export declare function useCheck(props: DataTableSetupProps, data: {
     someRowsCheckedRef: ComputedRef<boolean>;
     allRowsCheckedRef: ComputedRef<boolean>;
     headerCheckboxDisabledRef: ComputedRef<boolean>;
-    doUpdateCheckedRowKeys: (keys: RowKey[], row: RowData | undefined, action: 'check' | 'uncheck' | 'checkAll' | 'uncheckAll') => void;
+    doUpdateCheckedRowKeys: (keys: RowKey[], row: RowData | undefined, action: "check" | "uncheck" | "checkAll" | "uncheckAll") => void;
     doCheckAll: (checkWholeTable?: boolean) => void;
     doUncheckAll: (checkWholeTable?: boolean) => void;
     doCheck: (rowKey: RowKey | RowKey[], single: boolean | undefined, rowInfo: RowData) => void;

package/lib/data-table/src/use-check.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCheck = void 0;
+exports.useCheck = useCheck;
 const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
@@ -150,4 +150,3 @@ function useCheck(props, data) {
         doUncheck
     };
 }
-exports.useCheck = useCheck;

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

@@ -3,7 +3,7 @@ import type { TreeMate } from 'treemate';
 import type { Expandable, InternalRowData, RowKey, DataTableSetupProps } from './interface';
 export declare function useExpand(props: DataTableSetupProps, treeMateRef: Ref<TreeMate<InternalRowData, InternalRowData, InternalRowData>>): {
     stickyExpandedRowsRef: Ref<boolean>;
-    mergedExpandedRowKeysRef: import("vue").ComputedRef<import("treemate").Key[]>;
+    mergedExpandedRowKeysRef: import("vue").ComputedRef<RowKey[]>;
     renderExpandRef: import("vue").ComputedRef<import("./interface").RenderExpand<any> | undefined>;
     expandableRef: import("vue").ComputedRef<Expandable<any> | undefined>;
     doUpdateExpandedRowKeys: (expandedKeys: RowKey[]) => void;

package/lib/data-table/src/use-expand.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useExpand = void 0;
+exports.useExpand = useExpand;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const _utils_1 = require("../../_utils");
@@ -62,4 +62,3 @@ function useExpand(props, treeMateRef) {
         doUpdateExpandedRowKeys
     };
 }
-exports.useExpand = useExpand;

package/lib/data-table/src/use-group-header.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGroupHeader = void 0;
+exports.useGroupHeader = useGroupHeader;
 const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
 const utils_1 = require("./utils");
@@ -18,6 +18,8 @@ function getRowsAndCols(columns, getResizableWidth) {
             maxDepth = currentDepth;
         }
         for (const column of columns) {
+            if (column.visible === false)
+                continue;
             if ('children' in column) {
                 ensureMaxDepth(column.children, currentDepth + 1);
             }
@@ -42,6 +44,8 @@ function getRowsAndCols(columns, getResizableWidth) {
         let hideUntilIndex = 0;
         columns.forEach((column, index) => {
             var _a;
+            if (column.visible === false)
+                return;
             if ('children' in column) {
                 // do not allow colSpan > 1 for non-leaf th
                 // we will execute the calculation logic
@@ -105,4 +109,3 @@ function useGroupHeader(props, getResizableWidth) {
         dataRelatedColsRef: (0, vue_1.computed)(() => rowsAndCols.value.dataRelatedCols)
     };
 }
-exports.useGroupHeader = useGroupHeader;

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

@@ -0,0 +1,10 @@
+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;
+}): {
+    processedValue: string | number;
+    displayValue: string;
+};

package/lib/data-table/src/use-mask.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyMask = applyMask;
+exports.processMaskedValue = processMaskedValue;
+exports.processInputWithMask = processInputWithMask;
+const utils_1 = require("./utils");
+function applyMask(value, mask) {
+    if (!mask)
+        return value;
+    if (!value || value.trim() === '')
+        return '';
+    const cleanValue = value.replace(utils_1.REGEX.ONLY_DIGITS, '');
+    if (!cleanValue)
+        return '';
+    let result = '';
+    let valueIndex = 0;
+    for (let i = 0; i < mask.length && valueIndex < cleanValue.length; i++) {
+        if (mask[i] === '#') {
+            result += cleanValue[valueIndex];
+            valueIndex++;
+        }
+        else {
+            result += mask[i];
+        }
+    }
+    return result;
+}
+function processMaskedValue(value, mask) {
+    if (!mask || value === null || value === undefined) {
+        return String(value);
+    }
+    const stringValue = String(value);
+    if (typeof mask === 'function') {
+        return mask(stringValue);
+    }
+    else if (typeof mask === 'object' && mask.postProcess) {
+        return mask.postProcess(stringValue);
+    }
+    else if (typeof mask === 'string') {
+        return applyMask(stringValue, mask);
+    }
+    return stringValue;
+}
+function processInputWithMask(value, mask) {
+    if (!mask) {
+        return { processedValue: value, displayValue: value };
+    }
+    if (typeof mask === 'function') {
+        const processedValue = mask(value);
+        return { processedValue, displayValue: processedValue };
+    }
+    else if (typeof mask === 'object' && mask.postProcess) {
+        const displayValue = mask.postProcess(value);
+        const cleanValue = value.replace(utils_1.REGEX.ONLY_DIGITS, '');
+        const processedValue = cleanValue ? parseFloat(cleanValue) : 0;
+        return { processedValue, displayValue };
+    }
+    else if (typeof mask === 'string') {
+        const displayValue = applyMask(value, mask);
+        return { processedValue: value, displayValue };
+    }
+    return { processedValue: value, displayValue: value };
+}

package/lib/data-table/src/use-resizable.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useResizable = void 0;
+exports.useResizable = useResizable;
 const vue_1 = require("vue");
 const utils_1 = require("./utils");
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
@@ -23,4 +23,3 @@ function useResizable() {
         clearResizableWidth
     };
 }
-exports.useResizable = useResizable;

package/lib/data-table/src/use-scroll.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useScroll = void 0;
+exports.useScroll = useScroll;
 const seemly_1 = require("seemly");
 const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
@@ -226,4 +226,3 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
         setHeaderScrollLeft
     };
 }
-exports.useScroll = useScroll;

package/lib/data-table/src/use-sorter.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSorter = void 0;
+exports.useSorter = useSorter;
 const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
 const utils_1 = require("./utils");
@@ -192,4 +192,3 @@ function useSorter(props, { dataRelatedColsRef, filteredDataRef }) {
         deriveNextSorter
     };
 }
-exports.useSorter = useSorter;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTableData = void 0;
+exports.useTableData = useTableData;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const treemate_1 = require("treemate");
@@ -328,4 +328,3 @@ function useTableData(props, { dataRelatedColsRef }) {
         sort
     };
 }
-exports.useTableData = useTableData;

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

@@ -2,6 +2,10 @@ import type { CSSProperties } from 'vue';
 import type { SortOrder, TableBaseColumn, InternalRowData, SortOrderFlag, SortState, CreateRowClassName, TableSelectionColumn, TableColumn, TableExpandColumn } 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 function getNumberColWidth(col: TableColumn): number | undefined;
 export declare function getStringColWidth(col: TableColumn): string | undefined;
 export declare function getColKey(col: TableColumn): string | number;