@uzum-tech/ui 2.0.1 → 2.0.2

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

@@ -15,8 +15,9 @@ const _utils_1 = require("../../_utils");
 const button_1 = require("../../button");
 const input_1 = require("../../input");
 const styles_1 = require("../styles");
-const input_number_cssr_1 = __importDefault(require("./styles/input-number.cssr"));
+const constants_1 = require("./constants");
 const utils_1 = require("./utils");
+const input_number_cssr_1 = __importDefault(require("./styles/input-number.cssr"));
 const HOLDING_CHANGE_THRESHOLD = 800;
 const HOLDING_CHANGE_INTERVAL = 100;
 exports.inputNumberProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { autofocus: Boolean, loading: {
@@ -46,6 +47,9 @@ exports.inputNumberProps = Object.assign(Object.assign({}, _mixins_1.useTheme.pr
     }, updateValueOnInput: {
         type: Boolean,
         default: true
+    }, type: {
+        type: String,
+        default: 'default'
     }, parse: Function, format: Function, precision: Number, status: String, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array], onClear: [Function, Array], 
     // deprecated
     onChange: [Function, Array] });
@@ -75,15 +79,11 @@ exports.default = (0, vue_1.defineComponent)({
         const controlledValueRef = (0, vue_1.toRef)(props, 'value');
         const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
         const displayedValueRef = (0, vue_1.ref)('');
-        const getPrecision = (value) => {
-            const fraction = String(value).split('.')[1];
-            return fraction ? fraction.length : 0;
-        };
         const getMaxPrecision = (currentValue) => {
             const precisions = [props.min, props.max, props.step, currentValue].map((value) => {
                 if (value === undefined)
                     return 0;
-                return getPrecision(value);
+                return (0, utils_1.getPrecision)(value);
             });
             return Math.max(...precisions);
         };
@@ -114,19 +114,55 @@ exports.default = (0, vue_1.defineComponent)({
             else
                 return null;
         });
+        const isAmountTypeRef = (0, vooks_1.useMemo)(() => props.type === 'amount');
+        const showButtonRef = (0, vooks_1.useMemo)(() => {
+            return isAmountTypeRef.value ? false : props.showButton;
+        });
+        const effectiveParse = (input) => {
+            if (props.parse)
+                return props.parse(input);
+            if (isAmountTypeRef.value)
+                return (0, utils_1.parseAmount)(input);
+            return (0, utils_1.parse)(input);
+        };
+        const effectiveFormat = (value, precision) => {
+            if (props.format && value !== undefined)
+                return props.format(value);
+            if (isAmountTypeRef.value)
+                return (0, utils_1.formatAmount)(value, precision);
+            return (0, utils_1.format)(value, precision);
+        };
+        const doUpdateValue = (value) => {
+            const { value: mergedValue } = mergedValueRef;
+            if (value === mergedValue) {
+                deriveDisplayedValueFromValue();
+                return;
+            }
+            const { 'onUpdate:value': _onUpdateValue, onUpdateValue, onChange } = props;
+            const { triggerFormInput, triggerFormChange } = formItem;
+            if (onChange)
+                (0, _utils_1.call)(onChange, value);
+            if (onUpdateValue)
+                (0, _utils_1.call)(onUpdateValue, value);
+            if (_onUpdateValue)
+                (0, _utils_1.call)(_onUpdateValue, value);
+            uncontrolledValueRef.value = value;
+            triggerFormInput();
+            triggerFormChange();
+        };
         const deriveValueFromDisplayedValue = ({ offset, doUpdateIfValid, fixPrecision, isInputing }) => {
             const { value: displayedValue } = displayedValueRef;
             if (isInputing && (0, utils_1.isWipValue)(displayedValue)) {
                 return false;
             }
-            const parsedValue = (props.parse || utils_1.parse)(displayedValue);
+            const parsedValue = effectiveParse(displayedValue);
             if (parsedValue === null) {
                 if (doUpdateIfValid)
                     doUpdateValue(null);
                 return null;
             }
             if ((0, utils_1.validator)(parsedValue)) {
-                const currentPrecision = getPrecision(parsedValue);
+                const currentPrecision = (0, utils_1.getPrecision)(parsedValue);
                 const { precision } = props;
                 if (precision !== undefined
                     && precision < currentPrecision
@@ -161,21 +197,8 @@ exports.default = (0, vue_1.defineComponent)({
         const deriveDisplayedValueFromValue = () => {
             const { value: mergedValue } = mergedValueRef;
             if ((0, utils_1.validator)(mergedValue)) {
-                const { format: formatProp, precision } = props;
-                if (formatProp) {
-                    displayedValueRef.value = formatProp(mergedValue);
-                }
-                else {
-                    if (mergedValue === null
-                        || precision === undefined
-                        // precision overflow
-                        || getPrecision(mergedValue) > precision) {
-                        displayedValueRef.value = (0, utils_1.format)(mergedValue, undefined);
-                    }
-                    else {
-                        displayedValueRef.value = (0, utils_1.format)(mergedValue, precision);
-                    }
-                }
+                const { precision } = props;
+                displayedValueRef.value = effectiveFormat(mergedValue, mergedValue === null ? undefined : precision);
             }
             else {
                 // null can pass the validator check
@@ -183,25 +206,62 @@ exports.default = (0, vue_1.defineComponent)({
                 displayedValueRef.value = String(mergedValue);
             }
         };
-        deriveDisplayedValueFromValue();
-        function doUpdateValue(value) {
-            const { value: mergedValue } = mergedValueRef;
-            if (value === mergedValue) {
-                deriveDisplayedValueFromValue();
+        const computeValueToFormat = (prev, derived) => {
+            if (derived !== false && derived !== null)
+                return derived;
+            if (!isAmountTypeRef.value)
+                return null;
+            const parsed = effectiveParse(prev);
+            if (parsed === null || Number.isNaN(parsed))
+                return null;
+            return parsed;
+        };
+        const setInputValueSelection = (value, selectionStart, selectionEnd) => {
+            var _a;
+            const inputElement = (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.inputElRef;
+            if (!inputElement)
                 return;
+            inputElement.value = value;
+            inputElement.setSelectionRange(selectionStart, selectionEnd);
+        };
+        const applyFormatted = (prev, valueNumber) => {
+            var _a, _b, _c;
+            const inputElement = (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.inputElRef;
+            const selectionStart = (_b = inputElement === null || inputElement === void 0 ? void 0 : inputElement.selectionStart) !== null && _b !== void 0 ? _b : prev.length;
+            const selectionEnd = (_c = inputElement === null || inputElement === void 0 ? void 0 : inputElement.selectionEnd) !== null && _c !== void 0 ? _c : selectionStart;
+            const newFormatted = effectiveFormat(valueNumber, props.precision);
+            displayedValueRef.value = newFormatted;
+            void (0, vue_1.nextTick)(() => {
+                const { start, end } = (0, utils_1.mapSelectionAfterFormat)(prev, newFormatted, selectionStart, selectionEnd);
+                inputElement === null || inputElement === void 0 ? void 0 : inputElement.setSelectionRange(start, end);
+            });
+        };
+        const restoreRejectedAmountInput = (prevDisplayedValue, attemptedDisplayedValue) => {
+            var _a, _b, _c;
+            const inputElement = (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.inputElRef;
+            const selectionStart = (_b = inputElement === null || inputElement === void 0 ? void 0 : inputElement.selectionStart) !== null && _b !== void 0 ? _b : attemptedDisplayedValue.length;
+            const selectionEnd = (_c = inputElement === null || inputElement === void 0 ? void 0 : inputElement.selectionEnd) !== null && _c !== void 0 ? _c : selectionStart;
+            const { start, end } = (0, utils_1.getRejectedSelectionRange)(prevDisplayedValue, attemptedDisplayedValue, selectionStart, selectionEnd);
+            displayedValueRef.value = prevDisplayedValue;
+            setInputValueSelection(prevDisplayedValue, start, end);
+            void (0, vue_1.nextTick)(() => {
+                setInputValueSelection(prevDisplayedValue, start, end);
+            });
+        };
+        const shouldRejectAmountInput = (value) => {
+            if (!(0, utils_1.isValidAmountInput)(value))
+                return true;
+            if (!(0, utils_1.isAmountInputWithinDigitLimit)(value, constants_1.MAX_AMOUNT_INPUT_DIGITS)) {
+                return true;
             }
-            const { 'onUpdate:value': _onUpdateValue, onUpdateValue, onChange } = props;
-            const { triggerFormInput, triggerFormChange } = formItem;
-            if (onChange)
-                (0, _utils_1.call)(onChange, value);
-            if (onUpdateValue)
-                (0, _utils_1.call)(onUpdateValue, value);
-            if (_onUpdateValue)
-                (0, _utils_1.call)(_onUpdateValue, value);
-            uncontrolledValueRef.value = value;
-            triggerFormInput();
-            triggerFormChange();
-        }
+            if (props.precision === undefined)
+                return false;
+            const parsedValue = effectiveParse(value);
+            return (parsedValue !== null &&
+                !Number.isNaN(parsedValue) &&
+                (0, utils_1.getPrecision)(parsedValue) > props.precision);
+        };
+        deriveDisplayedValueFromValue();
         const displayedValueInvalidRef = (0, vooks_1.useMemo)(() => {
             const derivedValue = deriveValueFromDisplayedValue({
                 offset: 0,
@@ -476,18 +536,35 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         }
+        const shouldTryFormat = () => props.updateValueOnInput &&
+            !props.format &&
+            !props.parse &&
+            (props.precision === undefined || isAmountTypeRef.value);
         function handleUpdateDisplayedValue(value) {
+            const prevDisplayedValue = displayedValueRef.value;
+            const prevFormatted = value;
+            if (isAmountTypeRef.value) {
+                if (shouldRejectAmountInput(value)) {
+                    restoreRejectedAmountInput(prevDisplayedValue, value);
+                    return;
+                }
+            }
             displayedValueRef.value = value;
-            if (props.updateValueOnInput
-                && !props.format
-                && !props.parse
-                && props.precision === undefined) {
-                deriveValueFromDisplayedValue({
-                    offset: 0,
-                    doUpdateIfValid: true,
-                    isInputing: true,
-                    fixPrecision: false
-                });
+            if (!shouldTryFormat())
+                return;
+            if (isAmountTypeRef.value) {
+                if ((0, utils_1.isRawWipValue)(prevFormatted))
+                    return;
+            }
+            const derived = deriveValueFromDisplayedValue({
+                offset: 0,
+                doUpdateIfValid: true,
+                isInputing: true,
+                fixPrecision: false
+            });
+            const valueToFormat = computeValueToFormat(prevFormatted, derived);
+            if (valueToFormat !== null && isAmountTypeRef.value) {
+                applyFormatted(prevFormatted, valueToFormat);
             }
         }
         (0, vue_1.watch)(mergedValueRef, () => {
@@ -501,7 +578,7 @@ exports.default = (0, vue_1.defineComponent)({
         const rtlEnabledRef = (0, use_rtl_1.useRtl)('InputNumber', mergedRtlRef, mergedClsPrefixRef);
         return Object.assign(Object.assign({}, exposedMethods), { rtlEnabled: rtlEnabledRef, inputInstRef,
             minusButtonInstRef,
-            addButtonInstRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, mergedPlaceholder: mergedPlaceholderRef, displayedValueInvalid: displayedValueInvalidRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, displayedValue: displayedValueRef, addable: addableRef, minusable: minusableRef, mergedStatus: mergedStatusRef, handleFocus,
+            addButtonInstRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, mergedPlaceholder: mergedPlaceholderRef, displayedValueInvalid: displayedValueInvalidRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, displayedValue: displayedValueRef, addable: addableRef, minusable: minusableRef, showButton: showButtonRef, mergedStatus: mergedStatusRef, handleFocus,
             handleBlur,
             handleClear,
             handleMouseDown,

package/lib/input-number/src/constants.d.ts

@@ -0,0 +1,14 @@
+export declare const MAX_AMOUNT_INPUT_DIGITS = 16;
+export declare enum InputNumberRegex {
+    INPUT_WIP_VALUE = "^(-)?\\d+.*(\\.|0)$",
+    INPUT_LEADING_DOT_WIP_VALUE = "^\\.\\d+$",
+    AMOUNT_INPUT = "^-?[\\d\\s]*\\.?\\d*$",
+    AMOUNT_VALUE = "^-?(?:\\d+(?:\\.\\d*)?|\\.\\d+)$",
+    AMOUNT_RAW_LEADING_DOT = "^-?\\.\\d*$",
+    WHITESPACE = "\\s",
+    NON_DIGIT = "\\D",
+    LEADING_ZEROS = "^0+(?=\\d)",
+    NON_ZERO_DIGIT = "[1-9]",
+    TRAILING_ZERO_FRACTION = "\\.?0+$",
+    THOUSANDS_SEPARATOR = "\\B(?=(\\d{3})+(?!\\d))"
+}

package/lib/input-number/src/constants.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputNumberRegex = exports.MAX_AMOUNT_INPUT_DIGITS = void 0;
+exports.MAX_AMOUNT_INPUT_DIGITS = 16;
+var InputNumberRegex;
+(function (InputNumberRegex) {
+    InputNumberRegex["INPUT_WIP_VALUE"] = "^(-)?\\d+.*(\\.|0)$";
+    InputNumberRegex["INPUT_LEADING_DOT_WIP_VALUE"] = "^\\.\\d+$";
+    InputNumberRegex["AMOUNT_INPUT"] = "^-?[\\d\\s]*\\.?\\d*$";
+    InputNumberRegex["AMOUNT_VALUE"] = "^-?(?:\\d+(?:\\.\\d*)?|\\.\\d+)$";
+    InputNumberRegex["AMOUNT_RAW_LEADING_DOT"] = "^-?\\.\\d*$";
+    InputNumberRegex["WHITESPACE"] = "\\s";
+    InputNumberRegex["NON_DIGIT"] = "\\D";
+    InputNumberRegex["LEADING_ZEROS"] = "^0+(?=\\d)";
+    InputNumberRegex["NON_ZERO_DIGIT"] = "[1-9]";
+    InputNumberRegex["TRAILING_ZERO_FRACTION"] = "\\.?0+$";
+    InputNumberRegex["THOUSANDS_SEPARATOR"] = "\\B(?=(\\d{3})+(?!\\d))";
+})(InputNumberRegex || (exports.InputNumberRegex = InputNumberRegex = {}));

package/lib/input-number/src/interface.d.ts

@@ -4,3 +4,7 @@ export interface InputNumberInst {
     blur: () => void;
     select: () => void;
 }
+export interface InputSelectionRange {
+    start: number;
+    end: number;
+}

package/lib/input-number/src/utils.d.ts

@@ -1,5 +1,17 @@
+import type { InputSelectionRange } from './interface';
 export declare function parse(value: string): number | null;
 export declare function isWipValue(value: string): boolean;
 export declare function validator(value: number | null): boolean;
 export declare function format(value: number | undefined | null, precision: number | undefined): string;
 export declare function parseNumber(number: number | null | undefined | string): number | null;
+export declare function getPrecision(value: string | number): number;
+export declare function stripAmountFormatting(value: string): string;
+export declare function isValidAmountInput(value: string): boolean;
+export declare function isAmountInputWithinDigitLimit(value: string, maxDigits?: number): boolean;
+export declare function getRejectedSelectionRange(prevDisplayedValue: string, attemptedDisplayedValue: string, selectionStart: number, selectionEnd: number): InputSelectionRange;
+export declare function parseAmount(input: string): number | null;
+export declare function formatAmount(value: number | undefined | null, precision: number | undefined): string;
+export declare function formattedToRawIndex(formatted: string, caret: number): number;
+export declare function rawIndexToCaret(formatted: string, rawIndex: number): number;
+export declare function isRawWipValue(formatted: string): boolean;
+export declare function mapSelectionAfterFormat(formatted: string, newFormatted: string, selectionStart: number, selectionEnd: number): InputSelectionRange;

package/lib/input-number/src/utils.js

@@ -5,6 +5,19 @@ exports.isWipValue = isWipValue;
 exports.validator = validator;
 exports.format = format;
 exports.parseNumber = parseNumber;
+exports.getPrecision = getPrecision;
+exports.stripAmountFormatting = stripAmountFormatting;
+exports.isValidAmountInput = isValidAmountInput;
+exports.isAmountInputWithinDigitLimit = isAmountInputWithinDigitLimit;
+exports.getRejectedSelectionRange = getRejectedSelectionRange;
+exports.parseAmount = parseAmount;
+exports.formatAmount = formatAmount;
+exports.formattedToRawIndex = formattedToRawIndex;
+exports.rawIndexToCaret = rawIndexToCaret;
+exports.isRawWipValue = isRawWipValue;
+exports.mapSelectionAfterFormat = mapSelectionAfterFormat;
+const constants_1 = require("./constants");
+const MAX_SAFE_INTEGER_LIMIT = String(Number.MAX_SAFE_INTEGER);
 // string => string (expected, not implemented)
 // string => number (legacy)
 function parse(value) {
@@ -19,7 +32,8 @@ function parse(value) {
 // when value includes `.`, ending with 0 and`.`, doesn't update, if 0 parse func will remove 0
 function isWipValue(value) {
     return (value.includes('.')
-        && (/^(-)?\d+.*(\.|0)$/.test(value) || /^\.\d+$/.test(value)));
+        && (new RegExp(constants_1.InputNumberRegex.INPUT_WIP_VALUE).test(value)
+            || new RegExp(constants_1.InputNumberRegex.INPUT_LEADING_DOT_WIP_VALUE).test(value)));
 }
 // string => boolean (expected, not implemented)
 // number => boolean (legacy)
@@ -53,3 +67,100 @@ function parseNumber(number) {
         }
     }
 }
+function getPrecision(value) {
+    const fraction = String(value).split('.')[1];
+    return fraction ? fraction.length : 0;
+}
+function stripAmountFormatting(value) {
+    return String(value)
+        .replace(new RegExp(constants_1.InputNumberRegex.WHITESPACE, 'g'), '')
+        .trim();
+}
+function isValidAmountInput(value) {
+    return value === '' || new RegExp(constants_1.InputNumberRegex.AMOUNT_INPUT).test(value);
+}
+function isAmountInputWithinDigitLimit(value, maxDigits = constants_1.MAX_AMOUNT_INPUT_DIGITS) {
+    return (value.replace(new RegExp(constants_1.InputNumberRegex.NON_DIGIT, 'g'), '').length
+        <= maxDigits);
+}
+function getRejectedSelectionRange(prevDisplayedValue, attemptedDisplayedValue, selectionStart, selectionEnd) {
+    const removedLength = Math.max(0, attemptedDisplayedValue.length - prevDisplayedValue.length);
+    return {
+        start: Math.min(prevDisplayedValue.length, Math.max(0, selectionStart - removedLength)),
+        end: Math.min(prevDisplayedValue.length, Math.max(0, selectionEnd - removedLength))
+    };
+}
+function exceedsMaxSafeAmountValue(numberString) {
+    const normalized = numberString.startsWith('-')
+        ? numberString.slice(1)
+        : numberString;
+    const [integerPart = '0', fractionPart = ''] = normalized.split('.');
+    const normalizedIntegerPart = integerPart.replace(new RegExp(constants_1.InputNumberRegex.LEADING_ZEROS), '');
+    return (normalizedIntegerPart.length > MAX_SAFE_INTEGER_LIMIT.length
+        || (normalizedIntegerPart.length === MAX_SAFE_INTEGER_LIMIT.length
+            && (normalizedIntegerPart > MAX_SAFE_INTEGER_LIMIT
+                || (normalizedIntegerPart === MAX_SAFE_INTEGER_LIMIT
+                    && new RegExp(constants_1.InputNumberRegex.NON_ZERO_DIGIT).test(fractionPart)))));
+}
+function parseAmount(input) {
+    if (input === undefined || input === null)
+        return null;
+    const numberString = stripAmountFormatting(input);
+    if (new RegExp(constants_1.InputNumberRegex.AMOUNT_VALUE).test(numberString)) {
+        if (exceedsMaxSafeAmountValue(numberString))
+            return Number.NaN;
+        return Number(numberString);
+    }
+    return numberString === '' ? null : Number.NaN;
+}
+function formatAmount(value, precision) {
+    if (value === undefined || value === null)
+        return '';
+    let stringValue = String(value);
+    if (precision !== undefined) {
+        stringValue = value
+            .toFixed(precision)
+            .replace(new RegExp(constants_1.InputNumberRegex.TRAILING_ZERO_FRACTION), '');
+    }
+    const negative = stringValue.startsWith('-');
+    if (negative)
+        stringValue = stringValue.slice(1);
+    const [integerPart, fractionPart] = stringValue.split('.');
+    const integerWithSeparator = integerPart.replace(new RegExp(constants_1.InputNumberRegex.THOUSANDS_SEPARATOR, 'g'), ' ');
+    return `${negative ? '-' : ''}${integerWithSeparator}${fractionPart ? `.${fractionPart}` : ''}`;
+}
+function formattedToRawIndex(formatted, caret) {
+    let raw = 0;
+    for (let i = 0; i < Math.min(caret, formatted.length); i++) {
+        if (formatted[i] !== ' ')
+            raw++;
+    }
+    return raw;
+}
+function rawIndexToCaret(formatted, rawIndex) {
+    if (rawIndex <= 0)
+        return 0;
+    let raw = 0;
+    for (let i = 0; i < formatted.length; i++) {
+        if (formatted[i] !== ' ')
+            raw++;
+        if (raw === rawIndex)
+            return i + 1;
+    }
+    return formatted.length;
+}
+function isRawWipValue(formatted) {
+    return isWipValue(stripAmountFormatting(formatted));
+}
+function mapSelectionAfterFormat(formatted, newFormatted, selectionStart, selectionEnd) {
+    const rawStart = formattedToRawIndex(formatted, selectionStart);
+    const rawEnd = formattedToRawIndex(formatted, selectionEnd);
+    const rawInput = stripAmountFormatting(formatted);
+    if (new RegExp(constants_1.InputNumberRegex.AMOUNT_RAW_LEADING_DOT).test(rawInput)) {
+        const { length } = newFormatted;
+        return { start: length, end: length };
+    }
+    const newStart = rawIndexToCaret(newFormatted, rawStart);
+    const newEnd = rawIndexToCaret(newFormatted, rawEnd);
+    return { start: newStart, end: newEnd };
+}

package/lib/mapping-card/src/MappingCardList.d.ts

@@ -12,6 +12,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly type: NumberConstructor;
         readonly default: 16;
     };
+    readonly emptyProps: import("vue").PropType<Partial<import("../../empty").EmptyProps>>;
 }>, {
     mergedClsPrefix: import("vue").Ref<string, string>;
     mergedPagination: import("vue").ComputedRef<PaginationProps | null>;
@@ -28,6 +29,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly type: NumberConstructor;
         readonly default: 16;
     };
+    readonly emptyProps: import("vue").PropType<Partial<import("../../empty").EmptyProps>>;
 }>> & Readonly<{}>, {
     readonly gap: number;
     readonly items: import("./interface").MappingCardProps[];

package/lib/mapping-card/src/MappingCardList.js

@@ -5,6 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
+const empty_1 = require("../../empty");
 const flex_1 = require("../../flex");
 const pagination_1 = require("../../pagination");
 const interface_1 = require("./interface");
@@ -26,11 +28,14 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { mergedClsPrefix, mergedPagination, gap, items } = this;
+        const { mergedClsPrefix, mergedPagination, gap, items, emptyProps, $slots } = this;
+        const isEmpty = !items.length;
         return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-mapping-card-list` },
-            (0, vue_1.h)(flex_1.UFlex, { vertical: true, size: gap, class: `${mergedClsPrefix}-mapping-card-list__items` }, {
-                default: () => items.map((item, index) => (0, vue_1.h)(MappingCard_1.default, Object.assign({ key: index }, item)))
-            }),
+            isEmpty ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-mapping-card-list__empty` }, (0, _utils_1.resolveSlot)($slots.empty, () => [
+                (0, vue_1.h)(empty_1.UEmpty, Object.assign({ size: "large" }, emptyProps))
+            ]))) : ((0, vue_1.h)(flex_1.UFlex, { vertical: true, size: gap, class: `${mergedClsPrefix}-mapping-card-list__items` }, {
+                default: () => items.map((item, index) => ((0, vue_1.h)(MappingCard_1.default, Object.assign({ key: index }, item))))
+            })),
             mergedPagination ? ((0, vue_1.h)(flex_1.UFlex, { justify: "flex-end", class: `${mergedClsPrefix}-mapping-card-list__pagination` }, {
                 default: () => (0, vue_1.h)(pagination_1.UPagination, Object.assign({}, mergedPagination))
             })) : null));

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

@@ -2,6 +2,7 @@ import type { PropType, VNodeChild } from 'vue';
 import type { BuiltinType, BuiltinTypeMap, ComponentConfig } from '../../_internal/component-renderer';
 import type { ExtractPublicPropTypes } from '../../_utils';
 import type { ButtonProps } from '../../button';
+import type { EmptyProps } from '../../empty';
 import type { IconProps } from '../../icon';
 import type { PaginationProps } from '../../pagination';
 import type { SwitchProps } from '../../switch';
@@ -55,6 +56,7 @@ export interface MappingCardListInterface {
     items?: MappingCardProps[];
     pagination?: PaginationProps | false;
     gap?: number;
+    emptyProps?: Partial<EmptyProps>;
 }
 export declare const mappingCardProps: {
     readonly title: PropType<MappingCardInterface["title"]>;
@@ -104,6 +106,7 @@ export declare const mappingCardListProps: {
         readonly type: NumberConstructor;
         readonly default: 16;
     };
+    readonly emptyProps: PropType<Partial<EmptyProps>>;
 };
 export type MappingCardProps = ExtractPublicPropTypes<typeof mappingCardProps>;
 export type MappingCardListProps = ExtractPublicPropTypes<typeof mappingCardListProps>;

package/lib/mapping-card/src/interface.js

@@ -48,5 +48,6 @@ exports.mappingCardListProps = {
     gap: {
         type: Number,
         default: 16
-    }
+    },
+    emptyProps: Object
 };

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

@@ -92,6 +92,13 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('mapping-card', `
  color: var(--u-arrow-color);
  font-size: 16px;
  flex-shrink: 0;
- `)]), (0, cssr_1.cB)('mapping-card-list', [(0, cssr_1.cE)('pagination', `
+ `)]), (0, cssr_1.cB)('mapping-card-list', `
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ height: 100%;
+ `, [(0, cssr_1.cE)('pagination', `
  margin-top: 16px;
+ `), (0, cssr_1.cE)('empty', `
+ margin: auto;
  `)])]);

package/lib/modal/src/BodyWrapper.d.ts

@@ -55,6 +55,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
+    contentClass: StringConstructor;
+    contentScrollable: BooleanConstructor;
+    contentStyle: PropType<import("vue").CSSProperties | string>;
+    headerStyle: PropType<import("vue").CSSProperties | string>;
+    headerExtraStyle: PropType<import("vue").CSSProperties | string>;
+    footerStyle: PropType<import("vue").CSSProperties | string>;
+    embedded: BooleanConstructor;
+    segmented: {
+        readonly type: PropType<boolean | import("../../card").CardSegmented>;
+        readonly default: false;
+    };
+    hoverable: BooleanConstructor;
+    role: StringConstructor;
+    tag: {
+        readonly type: PropType<keyof HTMLElementTagNameMap>;
+        readonly default: "div";
+    };
     show: {
         type: BooleanConstructor;
         required: true;
@@ -1283,6 +1300,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
+    contentClass: StringConstructor;
+    contentScrollable: BooleanConstructor;
+    contentStyle: PropType<import("vue").CSSProperties | string>;
+    headerStyle: PropType<import("vue").CSSProperties | string>;
+    headerExtraStyle: PropType<import("vue").CSSProperties | string>;
+    footerStyle: PropType<import("vue").CSSProperties | string>;
+    embedded: BooleanConstructor;
+    segmented: {
+        readonly type: PropType<boolean | import("../../card").CardSegmented>;
+        readonly default: false;
+    };
+    hoverable: BooleanConstructor;
+    role: StringConstructor;
+    tag: {
+        readonly type: PropType<keyof HTMLElementTagNameMap>;
+        readonly default: "div";
+    };
     show: {
         type: BooleanConstructor;
         required: true;
@@ -1310,8 +1344,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     type: "default" | "error" | "warning" | "success" | "info";
     size: "small" | "medium" | "large";
     loading: boolean;
+    tag: keyof HTMLElementTagNameMap;
     showIcon: boolean;
     closable: boolean;
+    contentScrollable: boolean;
+    embedded: boolean;
+    segmented: boolean | import("../../card").CardSegmented;
+    hoverable: boolean;
     draggable: boolean | ModalDraggableOptions;
     trapFocus: boolean;
     autoFocus: boolean;