@uzum-tech/ui 1.5.2 → 1.5.3

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

@@ -255,14 +255,14 @@ export default defineComponent({
             else {
                 upcomingValue = null;
             }
-            const { nTriggerFormChange, nTriggerFormInput } = formItem;
+            const { triggerFormChange, triggerFormInput } = formItem;
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props;
             if (onUpdateValue)
                 call(onUpdateValue, value);
             if (_onUpdateValue)
                 call(_onUpdateValue, value);
-            nTriggerFormChange();
-            nTriggerFormInput();
+            triggerFormChange();
+            triggerFormInput();
             uncontrolledValueRef.value = value;
         }
         function handleInputUpdateValue(value) {
@@ -273,7 +273,7 @@ export default 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) {
                     ;
@@ -285,8 +285,8 @@ export default defineComponent({
                     undoStack.splice(valueIndex + 1, undoStack.length, value);
                     valueIndexRef.value = valueIndex + 1;
                 }
-                nTriggerFormChange();
-                nTriggerFormInput();
+                triggerFormChange();
+                triggerFormInput();
             }
         }
         function undo() {

package/es/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/es/components.js

@@ -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/es/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/es/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/es/data-table/src/DataTable.js

@@ -13,7 +13,6 @@ import { useResizable } from './use-resizable';
 import { dataTableInjectionKey, dataTableProps } from './interface';
 import { useGroupHeader } from './use-group-header';
 import { useExpand } from './use-expand';
-import { processMaskedValue } from './use-mask';
 import style from './styles/index.cssr';
 export default defineComponent({
     name: 'DataTable',
@@ -93,7 +92,7 @@ export default 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') {
@@ -106,18 +105,12 @@ export default defineComponent({
                                 return Number(renderedValue) || 0;
                             });
                             const sum = values.reduce((sum, val) => sum + val, 0);
-                            const finalValue = mask
-                                ? 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
-                                ? processMaskedValue(String(sum), mask)
-                                : sum;
-                            summaryRow[key] = { value: finalValue };
+                            summaryRow[key] = { value: sum };
                         }
                     }
                     else {
@@ -320,6 +313,23 @@ export default 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 = computed(() => {

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

@@ -560,6 +560,7 @@ export default defineComponent({
                                     `${mergedClsPrefix}-data-table-td--last-row`,
                                 'editable' in column &&
                                     column.editable &&
+                                    !isSummary &&
                                     `${mergedClsPrefix}-data-table-td--editable`
                             ] }),
                             column.fixed && (h("div", { class: `${mergedClsPrefix}-data-table-td__shadow-holder` })),
@@ -596,7 +597,7 @@ export default defineComponent({
                         }))) : null));
                 }
                 else {
-                    if (this.loading) {
+                    if (this.loading || this.loadingSkeleton) {
                         return (h("table", { class: `${mergedClsPrefix}-data-table-table`, onMouseleave: handleMouseleaveTable, style: {
                                 tableLayout: this.mergedTableLayout
                             } },
@@ -615,7 +616,7 @@ export default defineComponent({
                 }
             }
         }));
-        if (this.empty) {
+        if (this.empty && !this.loadingSkeleton) {
             const createEmptyNode = () => (h("div", { class: [
                     `${mergedClsPrefix}-data-table-empty`,
                     this.loading && `${mergedClsPrefix}-data-table-empty--hide`

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

@@ -2913,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);
@@ -2932,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';
@@ -3138,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/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.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/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';