@uzum-tech/ui 1.5.2 → 1.5.3

package/lib/avatar/src/Avatar.d.ts

@@ -28,6 +28,8 @@ export declare const avatarProps: {
     readonly imgProps: PropType<ImgHTMLAttributes>;
     readonly disabled: BooleanConstructor;
     readonly loading: BooleanConstructor;
+    readonly iconColor: StringConstructor;
+    readonly iconSize: PropType<string | number>;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
@@ -98,6 +100,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly imgProps: PropType<ImgHTMLAttributes>;
     readonly disabled: BooleanConstructor;
     readonly loading: BooleanConstructor;
+    readonly iconColor: StringConstructor;
+    readonly iconSize: PropType<string | number>;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
@@ -191,6 +195,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly imgProps: PropType<ImgHTMLAttributes>;
     readonly disabled: BooleanConstructor;
     readonly loading: BooleanConstructor;
+    readonly iconColor: StringConstructor;
+    readonly iconSize: PropType<string | number>;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;

package/lib/avatar/src/Avatar.js

@@ -24,7 +24,7 @@ exports.avatarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, bordered: {
         type: Boolean,
         default: undefined
-    }, onError: Function, fallbackSrc: String, intersectionObserverOptions: Object, lazy: Boolean, onLoad: Function, renderPlaceholder: Function, renderFallback: Function, imgProps: Object, disabled: Boolean, loading: Boolean });
+    }, onError: Function, fallbackSrc: String, intersectionObserverOptions: Object, lazy: Boolean, onLoad: Function, renderPlaceholder: Function, renderFallback: Function, imgProps: Object, disabled: Boolean, loading: Boolean, iconColor: String, iconSize: [String, Number] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Avatar',
     props: exports.avatarProps,
@@ -109,6 +109,12 @@ exports.default = (0, vue_1.defineComponent)({
             const getBackgroundColor = (color) => {
                 return props.disabled || size === 'small' ? 'rgba(0,0,0,0)' : color;
             };
+            const resolveSize = (value, fallback) => {
+                if (value === undefined)
+                    return fallback;
+                value = String(value);
+                return /^\d+$/.test(value) ? `${value}px` : value;
+            };
             return {
                 '--u-font-size': fontSize,
                 '--u-font-weight': fontWeight,
@@ -116,10 +122,10 @@ exports.default = (0, vue_1.defineComponent)({
                 '--u-border-radius': round ? '50%' : borderRadius,
                 '--u-color': getBackgroundColor(color),
                 '--u-text-color': textColor,
-                '--u-icon-color': iconColor,
+                '--u-icon-color': props.iconColor || iconColor,
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-merged-size': `var(--u-avatar-size-override, ${height})`,
-                '--u-icon-size': iconSize
+                '--u-icon-size': resolveSize(props.iconSize, iconSize)
             };
         });
         const themeClassHandle = inlineThemeDisabled

package/lib/card-list/src/CardList.js

@@ -69,7 +69,7 @@ exports.default = (0, vue_1.defineComponent)({
         return (0, vue_1.h)(Grid_1.default, Object.assign({ class: [`${mergedClsPrefix}-card-list`, themeClass], style: cssVars, cols,
             xGap,
             yGap }, gridProps), () => items.map((card, idx) => (0, vue_1.h)(GridItem_1.default, { key: idx, span: card.span || 1 }, () => [
-            (0, vue_1.h)(CardListItem_1.default, Object.assign(Object.assign({ title: card.title, subtitle: card.subtitle, items: card.items, direction: card.direction, dropdown: card.dropdown }, cardProps), { renderDivider: showDivider ? renderDivider : () => null }))
+            (0, vue_1.h)(CardListItem_1.default, Object.assign(Object.assign({ title: card.title, subtitle: card.subtitle, items: card.items, direction: card.direction, embedded: card.embedded, dropdown: card.dropdown }, cardProps), { renderDivider: showDivider ? renderDivider : () => null }))
         ])));
     }
 });

package/lib/card-list/src/CardListItem.d.ts

@@ -13,6 +13,10 @@ declare const cardListItemProps: {
         readonly default: "horizontal";
     };
     readonly dropdown: BooleanConstructor;
+    readonly embedded: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
     readonly renderDivider: PropType<({ index, count, direction }: {
         index: number;
         count: number;
@@ -32,6 +36,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "horizontal";
     };
     readonly dropdown: BooleanConstructor;
+    readonly embedded: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
     readonly renderDivider: PropType<({ index, count, direction }: {
         index: number;
         count: number;
@@ -58,6 +66,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "horizontal";
     };
     readonly dropdown: BooleanConstructor;
+    readonly embedded: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
     readonly renderDivider: PropType<({ index, count, direction }: {
         index: number;
         count: number;
@@ -66,5 +78,6 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     readonly direction: "vertical" | "horizontal";
     readonly dropdown: boolean;
+    readonly embedded: boolean;
 }, {}>;
 export default _default;

package/lib/card-list/src/CardListItem.js

@@ -17,6 +17,10 @@ const cardListItemProps = {
         default: 'horizontal'
     },
     dropdown: Boolean,
+    embedded: {
+        type: Boolean,
+        default: false
+    },
     renderDivider: Function
 };
 exports.default = (0, vue_1.defineComponent)({
@@ -63,7 +67,10 @@ exports.default = (0, vue_1.defineComponent)({
         const isGrouped = !this.dropdown &&
             (this.direction === 'horizontal' || this.direction === 'vertical');
         const isDropdown = this.dropdown;
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item`, onClick: isDropdown && items.length ? this.toggle : undefined, ref: "selfRef" },
+        return ((0, vue_1.h)("div", { class: [
+                `${mergedClsPrefix}-card-list-item`,
+                this.embedded && `${mergedClsPrefix}-card-list-item--embedded`
+            ], onClick: isDropdown && items.length ? this.toggle : undefined, ref: "selfRef" },
             isDropdown && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__wrapper` },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__wrapper-content` },
                     this.title && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__title` }, this.title)),
@@ -79,7 +86,7 @@ exports.default = (0, vue_1.defineComponent)({
             isGrouped && items.length > 0 && ((0, vue_1.h)("div", { class: [
                     `${mergedClsPrefix}-card-list-item__items`,
                     this.direction,
-                    this.direction === 'vertical' &&
+                    this.direction === 'horizontal' &&
                         `${mergedClsPrefix}-card-list-item__items--grid`
                 ] }, items.map((item, idx) => [
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__item`, key: idx },
@@ -95,10 +102,10 @@ exports.default = (0, vue_1.defineComponent)({
                         : (0, vue_1.h)('div', {
                             class: [
                                 `${mergedClsPrefix}-card-list-item__divider`,
-                                this.direction === 'vertical'
+                                this.direction === 'horizontal'
                                     ? `${mergedClsPrefix}-card-list-item__divider--vertical`
                                     : `${mergedClsPrefix}-card-list-item__divider--horizontal`,
-                                this.direction === 'vertical' &&
+                                this.direction === 'horizontal' &&
                                     `${mergedClsPrefix}-card-list-item__divider--grid`
                             ]
                         }))

package/lib/card-list/src/interface.d.ts

@@ -4,6 +4,7 @@ export interface ListItemOptions {
     subtitle?: Primitive;
     span?: number;
     dropdown?: boolean;
+    embedded?: boolean;
     items?: Array<{
         title?: Primitive;
         content?: Primitive;

package/lib/card-list/src/styles/index.cssr.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 exports.default = (0, cssr_1.cB)('card-list-item', [(0, cssr_1.c)('&', {
   padding: '16px',
-  backgroundColor: 'var(--u-color-embedded)',
   borderRadius: 'var(--u-border-radius)',
-  boxShadow: 'var(--u-box-shadow)',
   display: 'flex',
   flexDirection: 'column',
   gap: '8px',
   position: 'relative'
-}), (0, cssr_1.cB)('card-list-item__title', {
+}, [(0, cssr_1.cM)('embedded', {
+  backgroundColor: 'var(--u-color-embedded)'
+})]), (0, cssr_1.cB)('card-list-item__title', {
   fontSize: 'var(--u-title-font-size)',
   lineHeight: 'var(--u-title-line-height)',
   fontWeight: 'var(--u-title-font-weight)',
@@ -27,10 +27,10 @@ exports.default = (0, cssr_1.cB)('card-list-item', [(0, cssr_1.c)('&', {
   display: 'flex',
   gap: '0'
 }, [(0, cssr_1.c)('&.horizontal', {
-  flexDirection: 'column'
-}), (0, cssr_1.c)('&.vertical', {
   flexDirection: 'row',
   alignItems: 'stretch'
+}), (0, cssr_1.c)('&.vertical', {
+  flexDirection: 'column'
 })]), (0, cssr_1.cB)('card-list-item__items--grid', {
   display: 'grid',
   gridAutoFlow: 'column',

package/lib/card-list/styles/light.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.self = void 0;
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { textSecondary, textPrimary, fontWeight, fontWeightBold, fontBodyLarge, fontBodyMedium, lineHeightBodyMedium, borderRadiusLarge, containerSecondary, shadowDepth2, elementsQuinary, elementsSecondary } = vars;
+    const { textSecondary, textPrimary, fontWeight, fontWeightBold, fontBodyLarge, fontBodyMedium, lineHeightBodyMedium, borderRadiusLarge, containerSecondary, shadowDepth2, elementsQuaternary, elementsSecondary } = vars;
     return {
         textColor: textSecondary,
         textLineHeight: lineHeightBodyMedium,
@@ -17,7 +17,7 @@ const self = (vars) => {
         borderRadius: borderRadiusLarge,
         boxShadow: shadowDepth2,
         colorEmbedded: containerSecondary,
-        dividerColor: elementsQuinary,
+        dividerColor: elementsQuaternary,
         dropDownBgColor: elementsSecondary
     };
 };

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

@@ -2872,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;

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 {
@@ -325,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.js

@@ -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` })),
@@ -601,7 +602,7 @@ exports.default = (0, vue_1.defineComponent)({
                         }))) : 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 {