@uzum-tech/ui 1.5.2 → 1.5.4

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

@@ -1,7 +1,8 @@
 import { h, defineComponent } from 'vue';
 import { get } from 'lodash-es';
 import { UEllipsis } from '../../../ellipsis';
-import { processMaskedValue, processInputWithMask } from '../use-mask';
+import { processMaskedValue } from '../use-mask';
+import { defaultNumericMask } from '../utils';
 export default defineComponent({
     name: 'DataTableCell',
     emits: ['edit'],
@@ -33,7 +34,10 @@ export default 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 = defaultNumericMask;
         if (render && !isSummary) {
             let cellValue = render(row, this.index);
             if (mask && cellValue !== null && cellValue !== undefined) {
@@ -45,37 +49,95 @@ export default defineComponent({
         }
         else if (editable && !isSummary) {
             const { placeholder } = column;
-            let initialValue = String(row[key] || '');
-            if (mask && initialValue) {
-                initialValue = processMaskedValue(initialValue, mask);
-            }
+            const rawValue = String(row[key] || '');
+            const displayValue = mask ? 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 } = 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 = processMaskedValue(currentValue, mask);
+                        input.value = maskedValue;
                     }
                 }
             };
-            if (mask) {
-                inputProps['data-mask'] =
-                    typeof mask === 'string' ? mask : JSON.stringify(mask);
-            }
             cell = h('input', inputProps);
         }
         else {

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

@@ -9,6 +9,7 @@ import type { PaginationProps } from '../../pagination';
 import type { DataTableTheme } from '../styles';
 import type { RowItem, ColItem } from './use-group-header';
 import type { BaseLoadingExposedProps } from '../../_internal';
+import type { EmptyProps } from '../../empty';
 export declare const dataTableProps: {
     readonly onUnstableColumnResize: PropType<(resizedWidth: number, limitedWidth: number, column: TableBaseColumn, getColumnWidth: (key: ColumnKey) => number | undefined) => void>;
     readonly pagination: {
@@ -101,6 +102,7 @@ export declare const dataTableProps: {
         readonly type: PropType<BaseLoadingExposedProps>;
         readonly default: {};
     };
+    readonly emptyProps: PropType<Partial<EmptyProps>>;
     readonly onLoad: PropType<DataTableOnLoad>;
     readonly 'onUpdate:page': PropType<PaginationProps["onUpdate:page"]>;
     readonly onUpdatePage: PropType<PaginationProps["onUpdate:page"]>;
@@ -2913,6 +2915,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);
@@ -2932,18 +2938,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';
@@ -3083,6 +3085,7 @@ export interface DataTableInjection {
     syncScrollState: (deltaX?: number, deltaY?: number) => void;
     setHeaderScrollLeft: (scrollLeft: number) => void;
     renderCell: Ref<undefined | ((value: any, rowData: object, column: TableBaseColumn) => VNodeChild)>;
+    emptyPropsRef: Ref<Partial<EmptyProps> | undefined>;
     handleEdit: (value: any, row: any, key: string) => void;
 }
 export declare const dataTableInjectionKey: import("vue").InjectionKey<DataTableInjection>;
@@ -3138,6 +3141,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/es/data-table/src/interface.js

@@ -50,7 +50,7 @@ export const dataTableProps = Object.assign(Object.assign({}, useTheme.props), {
     }, paginationBehaviorOnFilter: {
         type: String,
         default: 'current'
-    }, scrollbarProps: Object, renderCell: Function, renderExpandIcon: Function, spinProps: { type: Object, default: {} }, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
+    }, scrollbarProps: Object, renderCell: Function, renderExpandIcon: Function, spinProps: { type: Object, default: {} }, emptyProps: Object, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
     // deprecated
     onPageChange: [Function, Array], onPageSizeChange: [Function, Array], onSorterChange: [Function, Array], onFiltersChange: [Function, Array], onCheckedRowKeysChange: [Function, Array] });
 export const dataTableInjectionKey = createInjectionKey('u-data-table');

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

@@ -296,19 +296,21 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('data-table-loading
  `), 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]), cB('data-table-empty', `
  box-sizing: border-box;

package/es/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/es/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/es/data-table/src/utils.js

@@ -6,6 +6,19 @@ export const REGEX = {
     ONLY_DIGITS: /\D/g,
     ONLY_NUMERIC_AND_DOT: /[^\d.]/g
 };
+export const 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;
+    }
+};
 export function getNumberColWidth(col) {
     if (col.type === 'selection') {
         return col.width === undefined ? SELECTION_COL_WIDTH : depx(col.width);

package/es/date-picker/src/DatePicker.js

@@ -281,7 +281,7 @@ export default defineComponent({
                     return;
             }
             const { 'onUpdate:value': _onUpdateValue, onUpdateValue, onChange } = props;
-            const { nTriggerFormChange, nTriggerFormInput } = formItem;
+            const { triggerFormChange, triggerFormInput } = formItem;
             const formattedValue = getFormattedValue(value);
             if (options.doConfirm) {
                 doConfirm(value, formattedValue);
@@ -296,8 +296,8 @@ export default defineComponent({
                 call(onChange, value, formattedValue);
             uncontrolledValueRef.value = value;
             doUpdateFormattedValue(formattedValue, value);
-            nTriggerFormChange();
-            nTriggerFormInput();
+            triggerFormChange();
+            triggerFormInput();
         }
         function doClear() {
             const { onClear } = props;
@@ -310,17 +310,17 @@ export default defineComponent({
         }
         function doFocus(e) {
             const { onFocus } = props;
-            const { nTriggerFormFocus } = formItem;
+            const { triggerFormFocus } = formItem;
             if (onFocus)
                 call(onFocus, e);
-            nTriggerFormFocus();
+            triggerFormFocus();
         }
         function doBlur(e) {
             const { onBlur } = props;
-            const { nTriggerFormBlur } = formItem;
+            const { triggerFormBlur } = formItem;
             if (onBlur)
                 call(onBlur, e);
-            nTriggerFormBlur();
+            triggerFormBlur();
         }
         function doUpdateShow(show) {
             const { 'onUpdate:show': _onUpdateShow, onUpdateShow } = props;

package/es/dialog/src/DialogProvider.d.ts

@@ -283,6 +283,9 @@ export declare const UDialogProvider: import("vue").DefineComponent<{
                     scrollbarHeight: string;
                     scrollbarBorderRadius: string;
                     opacityDisabled: string;
+                    brand150: string;
+                    brand350: string;
+                    brand550: string;
                     brandPrimary50: string;
                     brandPrimary100: string;
                     brandPrimary200: string;
@@ -639,6 +642,9 @@ export declare const UDialogProvider: import("vue").DefineComponent<{
                     scrollbarHeight: string;
                     scrollbarBorderRadius: string;
                     opacityDisabled: string;
+                    brand150: string;
+                    brand350: string;
+                    brand550: string;
                     brandPrimary50: string;
                     brandPrimary100: string;
                     brandPrimary200: string;

package/es/dynamic-tags/src/DynamicTags.d.ts

@@ -349,6 +349,7 @@ export declare const dynamicTagsProps: {
             textColorPressedCheckable: string;
             textColorChecked: string;
             colorCheckable: string;
+            colorCheckableOutline: string;
             colorHoverCheckable: string;
             colorPressedCheckable: string;
             colorChecked: string;
@@ -736,6 +737,7 @@ export declare const dynamicTagsProps: {
             textColorPressedCheckable: string;
             textColorChecked: string;
             colorCheckable: string;
+            colorCheckableOutline: string;
             colorHoverCheckable: string;
             colorPressedCheckable: string;
             colorChecked: string;
@@ -1123,6 +1125,7 @@ export declare const dynamicTagsProps: {
             textColorPressedCheckable: string;
             textColorChecked: string;
             colorCheckable: string;
+            colorCheckableOutline: string;
             colorHoverCheckable: string;
             colorPressedCheckable: string;
             colorChecked: string;
@@ -1548,6 +1551,7 @@ declare const _default: import("vue").DefineComponent<{
             textColorPressedCheckable: string;
             textColorChecked: string;
             colorCheckable: string;
+            colorCheckableOutline: string;
             colorHoverCheckable: string;
             colorPressedCheckable: string;
             colorChecked: string;
@@ -1935,6 +1939,7 @@ declare const _default: import("vue").DefineComponent<{
             textColorPressedCheckable: string;
             textColorChecked: string;
             colorCheckable: string;
+            colorCheckableOutline: string;
             colorHoverCheckable: string;
             colorPressedCheckable: string;
             colorChecked: string;
@@ -2322,6 +2327,7 @@ declare const _default: import("vue").DefineComponent<{
             textColorPressedCheckable: string;
             textColorChecked: string;
             colorCheckable: string;
+            colorCheckableOutline: string;
             colorHoverCheckable: string;
             colorPressedCheckable: string;
             colorChecked: string;
@@ -2742,6 +2748,7 @@ declare const _default: import("vue").DefineComponent<{
                 textColorPressedCheckable: string;
                 textColorChecked: string;
                 colorCheckable: string;
+                colorCheckableOutline: string;
                 colorHoverCheckable: string;
                 colorPressedCheckable: string;
                 colorChecked: string;
@@ -3194,6 +3201,7 @@ declare const _default: import("vue").DefineComponent<{
             textColorPressedCheckable: string;
             textColorChecked: string;
             colorCheckable: string;
+            colorCheckableOutline: string;
             colorHoverCheckable: string;
             colorPressedCheckable: string;
             colorChecked: string;
@@ -3581,6 +3589,7 @@ declare const _default: import("vue").DefineComponent<{
             textColorPressedCheckable: string;
             textColorChecked: string;
             colorCheckable: string;
+            colorCheckableOutline: string;
             colorHoverCheckable: string;
             colorPressedCheckable: string;
             colorChecked: string;
@@ -3968,6 +3977,7 @@ declare const _default: import("vue").DefineComponent<{
             textColorPressedCheckable: string;
             textColorChecked: string;
             colorCheckable: string;
+            colorCheckableOutline: string;
             colorHoverCheckable: string;
             colorPressedCheckable: string;
             colorChecked: string;

package/es/dynamic-tags/src/DynamicTags.js

@@ -61,7 +61,7 @@ export default defineComponent({
         });
         function doChange(value) {
             const { onChange, 'onUpdate:value': _onUpdateValue, onUpdateValue } = props;
-            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            const { triggerFormInput, triggerFormChange } = formItem;
             if (onChange)
                 call(onChange, value);
             if (onUpdateValue)
@@ -69,8 +69,8 @@ export default defineComponent({
             if (_onUpdateValue)
                 call(_onUpdateValue, value);
             uncontrolledValueRef.value = value;
-            nTriggerFormInput();
-            nTriggerFormChange();
+            triggerFormInput();
+            triggerFormChange();
         }
         function handleCloseClick(index) {
             const tags = mergedValueRef.value.slice(0);

package/es/dynamic-tags/styles/light.d.ts

@@ -309,6 +309,7 @@ declare const dynamicTagsLight: import("../../_mixins").Theme<"DynamicTags", {
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;

package/es/input/src/Input.js

@@ -244,7 +244,7 @@ export default defineComponent({
         const vm = getCurrentInstance().proxy;
         function doUpdateValue(value) {
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue, onInput } = props;
-            const { nTriggerFormInput } = formItem;
+            const { triggerFormInput } = formItem;
             if (onUpdateValue)
                 call(onUpdateValue, value);
             if (_onUpdateValue)
@@ -252,30 +252,30 @@ export default defineComponent({
             if (onInput)
                 call(onInput, value);
             uncontrolledValueRef.value = value;
-            nTriggerFormInput();
+            triggerFormInput();
             emitDebouncedInput(value);
         }
         function doChange(value) {
             const { onChange } = props;
-            const { nTriggerFormChange } = formItem;
+            const { triggerFormChange } = formItem;
             if (onChange)
                 call(onChange, value);
             uncontrolledValueRef.value = value;
-            nTriggerFormChange();
+            triggerFormChange();
         }
         function doBlur(e) {
             const { onBlur } = props;
-            const { nTriggerFormBlur } = formItem;
+            const { triggerFormBlur } = formItem;
             if (onBlur)
                 call(onBlur, e);
-            nTriggerFormBlur();
+            triggerFormBlur();
         }
         function doFocus(e) {
             const { onFocus } = props;
-            const { nTriggerFormFocus } = formItem;
+            const { triggerFormFocus } = formItem;
             if (onFocus)
                 call(onFocus, e);
-            nTriggerFormFocus();
+            triggerFormFocus();
         }
         function doClear(e) {
             const { onClear } = props;

package/es/input-number/src/InputNumber.js

@@ -114,7 +114,7 @@ export default defineComponent({
                 return;
             }
             const { 'onUpdate:value': _onUpdateValue, onUpdateValue, onChange } = props;
-            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            const { triggerFormInput, triggerFormChange } = formItem;
             if (onChange)
                 call(onChange, value);
             if (onUpdateValue)
@@ -122,8 +122,8 @@ export default defineComponent({
             if (_onUpdateValue)
                 call(_onUpdateValue, value);
             uncontrolledValueRef.value = value;
-            nTriggerFormInput();
-            nTriggerFormChange();
+            triggerFormInput();
+            triggerFormChange();
         };
         const deriveValueFromDisplayedValue = ({ offset, doUpdateIfValid, fixPrecision, isInputing }) => {
             const { value: displayedValue } = displayedValueRef;
@@ -234,10 +234,10 @@ export default defineComponent({
         });
         function doFocus(e) {
             const { onFocus } = props;
-            const { nTriggerFormFocus } = formItem;
+            const { triggerFormFocus } = formItem;
             if (onFocus)
                 call(onFocus, e);
-            nTriggerFormFocus();
+            triggerFormFocus();
         }
         function doBlur(e) {
             var _a, _b;
@@ -272,10 +272,10 @@ export default defineComponent({
                 deriveDisplayedValueFromValue();
             }
             const { onBlur } = props;
-            const { nTriggerFormBlur } = formItem;
+            const { triggerFormBlur } = formItem;
             if (onBlur)
                 call(onBlur, e);
-            nTriggerFormBlur();
+            triggerFormBlur();
             // User may change value in blur callback, we make sure it will be
             // displayed. Sometimes mergedValue won't be viewed as changed
             void nextTick(() => {

package/es/input-otp/index.d.ts

@@ -0,0 +1,3 @@
+export { inputOtpProps, default as UInputOtp } from './src/InputOtp';
+export type { InputOtpProps } from './src/InputOtp';
+export type * from './src/public-types';

package/es/input-otp/index.js

@@ -0,0 +1 @@
+export { inputOtpProps, default as UInputOtp } from './src/InputOtp';