@cloudbase/weda-ui 3.4.16 → 3.5.1

package/dist/web/components/wd-input-number/number.js

@@ -0,0 +1,302 @@
+/* eslint-disable max-lines */
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+/**
+ * 两正数字符串比较
+ * @param v1
+ * @param v2
+ * @returns
+ */
+const comparePositive = (v1, v2) => {
+    var _a, _b, _c, _d;
+    const v1Split = `${v1}`.split('.');
+    const v2Split = `${v2}`.split('.');
+    // 整数部分长度不等，长的大
+    if (v1Split[0].length !== v2Split[0].length) {
+        return v1Split[0].length > v2Split[0].length ? 'gt' : 'lt';
+    }
+    // 整数部分长度相等，且不相同，则从高位往低位比较
+    if (v1Split[0] !== v2Split[0]) {
+        for (let i = 0; i < v1Split[0].length; i++) {
+            if (v1Split[0][i] !== v2Split[0][i]) {
+                return +v1Split[0][i] > +v2Split[0][i] ? 'gt' : 'lt';
+            }
+        }
+    }
+    // 整数部分相等，比较小数部分
+    const len = Math.max(((_a = v1Split[1]) === null || _a === void 0 ? void 0 : _a.length) || 0, ((_b = v2Split[1]) === null || _b === void 0 ? void 0 : _b.length) || 0);
+    for (let i = 0; i < len; i++) {
+        const v1Float = ((_c = v1Split[1]) === null || _c === void 0 ? void 0 : _c[i]) || 0;
+        const v2Float = ((_d = v2Split[1]) === null || _d === void 0 ? void 0 : _d[i]) || 0;
+        if (v1Float !== v2Float) {
+            return +v1Float > +v2Float ? 'gt' : 'lt';
+        }
+    }
+    return 'eq';
+};
+/**
+ * 数字字符串比较
+ * @param {*} v1
+ * @param {*} v2
+ * @returns
+ */
+const compareStrNum = (v1, v2) => {
+    v1 = `${v1}`;
+    v2 = `${v2}`;
+    // 负数 < 正数
+    if (v1.startsWith('-') && !v2.startsWith('-')) {
+        return 'lt';
+    }
+    // 正数 > 负数
+    if (!v1.startsWith('-') && v2.startsWith('-')) {
+        return 'gt';
+    }
+    // 两正数
+    if (!v1.startsWith('-') && !v2.startsWith('-')) {
+        return comparePositive(v1, v2);
+    }
+    // 两负数
+    if (v1.startsWith('-') && v2.startsWith('-')) {
+        return {
+            lt: 'gt',
+            gt: 'lt',
+            eq: 'eq',
+        }[comparePositive(v1.replace('-', ''), v2.replace('-', ''))];
+    }
+};
+/**
+ * 两正数字符串相减
+ * @param {*} v1
+ * @param {*} v2
+ * @returns
+ */
+const strNumMinusPositive = (v1, v2) => {
+    const v1Split = `${v1}`.split('.');
+    const v2Split = `${v2}`.split('.');
+    const v1Float = v1Split[1] || '';
+    const v2Float = v2Split[1] || '';
+    const maxFloatLen = Math.max(v1Float.length, v2Float.length);
+    let add = 0;
+    let res = '';
+    if (maxFloatLen > 0) {
+        for (let i = maxFloatLen - 1; i >= 0; i--) {
+            let temp = (+v1Float[i] || 0) - (+v2Float[i] || 0) + add;
+            if (temp < 0) {
+                temp = 10 + temp;
+                add = -1;
+            }
+            else {
+                add = 0;
+            }
+            res = `${temp}${res}`;
+        }
+        res = `.${res}`;
+    }
+    v1 = v1Split[0].split('').reverse();
+    v2 = v2Split[0].split('').reverse();
+    const maxLen = Math.max(v1.length, v2.length);
+    for (let i = 0; i < maxLen; i++) {
+        let temp = (+v1[i] || 0) - (+v2[i] || 0) + add;
+        if (temp < 0) {
+            temp = 10 + temp;
+            add = -1;
+        }
+        else {
+            add = 0;
+        }
+        res = `${temp}${res}`;
+    }
+    res = res.replace(/^0+/, '');
+    return res.startsWith('.') ? `0${res}` : res;
+};
+export const isNumber = (val) => typeof val === 'number' && !isNaN(val);
+export const getPercentUnit = (format) => { var _a; return ((_a = { percent: '%' }[format || '']) !== null && _a !== void 0 ? _a : ''); };
+/**
+ * 数字字符串相加
+ * @param {*} v1
+ * @param {*} v2
+ * @returns
+ */
+export const strNumPlus = (v1, v2) => {
+    const v1Split = `${v1}`.split('.');
+    const v2Split = `${v2}`.split('.');
+    const v1Float = v1Split[1] || '';
+    const v2Float = v2Split[1] || '';
+    const maxFloatLen = Math.max(v1Float.length, v2Float.length);
+    let add = 0;
+    let res = '';
+    if (maxFloatLen > 0) {
+        for (let i = maxFloatLen - 1; i >= 0; i--) {
+            const temp = (+v1Float[i] || 0) + (+v2Float[i] || 0) + add;
+            res = `${temp % 10}${res}`;
+            add = Math.floor(temp / 10);
+        }
+        res = `.${res}`;
+    }
+    v1 = v1Split[0].split('').reverse();
+    v2 = v2Split[0].split('').reverse();
+    const maxLen = Math.max(v1.length, v2.length);
+    for (let i = 0; i < maxLen; i++) {
+        const temp = (+v1[i] || 0) + (+v2[i] || 0) + add;
+        res = `${temp % 10}${res}`;
+        add = Math.floor(temp / 10);
+    }
+    res = `${add !== 0 ? add : ''}${res}`;
+    return res.startsWith('.') ? `0${res}` : res;
+};
+/**
+ * 数字字符串相减
+ * @param {*} v1
+ * @param {*} v2
+ * @returns
+ */
+export const strNumMinus = (v1, v2) => {
+    let res = '';
+    // 负数 - 正数
+    if (v1.startsWith('-') && !v2.startsWith('-')) {
+        res = `-${strNumPlus(v1.replace('-', ''), v2)}`;
+    }
+    // 正数 - 负数
+    if (!v1.startsWith('-') && v2.startsWith('-')) {
+        res = `${strNumPlus(v1, v2.replace('-', ''))}`;
+    }
+    // 正数 - 正数
+    if (!v1.startsWith('-') && !v2.startsWith('-')) {
+        const compare = compareStrNum(v1, v2);
+        if (compare === 'eq')
+            return '0';
+        res =
+            compare === 'gt'
+                ? strNumMinusPositive(v1, v2)
+                : `-${strNumMinusPositive(v2, v1)}`;
+    }
+    // 负数 - 负数 转成 正数 - 正数
+    if (v1.startsWith('-') && v2.startsWith('-')) {
+        res = strNumMinus(v2.replace('-', ''), v1.replace('-', ''));
+    }
+    return res.startsWith('.') ? `0${res}` : res;
+};
+/**
+ * 处理百分比
+ * @param {*} v
+ * @param {*} type
+ * @returns
+ */
+export const dealPercent = (v, type = 'add') => {
+    if (v === 'Infinity' || v == '-Infinity') {
+        return v;
+    }
+    let value = `${`${v}`.replace(/-/g, '')}`;
+    if (type === 'add') {
+        if (!/\./.test(`${value}`)) {
+            value = `${value}00`;
+        }
+        else {
+            const valueSplit = value.split('.');
+            value = `${valueSplit[0]}${valueSplit[1].slice(0, 2)}${valueSplit[1].length <= 1 ? '0' : ''}.${valueSplit[1].slice(2)}`;
+        }
+    }
+    if (type === 'del') {
+        if (!/\./.test(`${value}`)) {
+            const len = `${value}`.length;
+            value = `${value.slice(0, -2)}${len < 2 ? new Array(2 - len).fill(0).join('') : ''}.${len <= 1 ? '0' : ''}${value.slice(-2)}`;
+        }
+        else {
+            const valueSplit = value.split('.');
+            value = `${valueSplit[0].slice(0, -2)}.${valueSplit[0].length <= 1 ? '0' : ''}${valueSplit[0].slice(-2)}${valueSplit[1]}`;
+        }
+    }
+    value = value.startsWith('.') ? `0${value}` : value;
+    return `${`${v}`.startsWith('-') ? '-' : ''}${value}`;
+};
+/**
+ * 小数位处理
+ * @param {*} v
+ * @param {*} decimals
+ * @param {*} type
+ * @returns
+ */
+export const dealDecimals = (v, decimals, type) => {
+    var _a;
+    if (v === 'Infinity' || v === '-Infinity') {
+        return v;
+    }
+    let value = v;
+    if (type === 'percent') {
+        value = dealPercent(value, 'add');
+    }
+    else if (type === 'delPercent') {
+        value = dealPercent(value, 'del');
+    }
+    if (isNumber(decimals) && decimals >= 0) {
+        if (!/\./.test(`${value}`)) {
+            value = `${value}.${new Array(decimals).fill(0).join('')}`;
+        }
+        else {
+            const len = decimals - (((_a = `${value}`.split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) || 0);
+            if (len < 0) {
+                const res = `${value}`.slice(0, len);
+                if (+`${value}`.slice(len)[0] >= 5) {
+                    const minus = decimals >= 1
+                        ? `0.${new Array(decimals - 1).fill(0).join('')}1`
+                        : '1';
+                    value = strNumPlus(res, minus).replace(/\.$/, '');
+                }
+                else {
+                    value = res.replace(/\.$/, '');
+                }
+            }
+            else {
+                value = `${value}${new Array(len).fill(0).join('')}`;
+            }
+        }
+    }
+    value = value !== '0' ? value.replace(/^0+/, '') : value;
+    value = value.startsWith('.') ? `0${value}` : value;
+    value = value.endsWith('.') ? value.split('.')[0] : value;
+    return value;
+};
+/**
+ * 数字字符串相加
+ * @param {*} v1
+ * @param {*} v2
+ * @returns
+ */
+export const strNumAddCalc = (v1, v2) => {
+    let res = '';
+    // 负数 + 正数
+    if (v1.startsWith('-') && !v2.startsWith('-')) {
+        res = `${strNumMinus(v2, v1.replace('-', ''))}`;
+    }
+    // 正数 + 负数
+    if (!v1.startsWith('-') && v2.startsWith('-')) {
+        res = `${strNumMinus(v1, v2.replace('-', ''))}`;
+    }
+    // 正数 + 正数
+    if (!v1.startsWith('-') && !v2.startsWith('-')) {
+        res = `${strNumPlus(v1, v2)}`;
+    }
+    // 负数 + 负数 转成 正数 + 正数
+    if (v1.startsWith('-') && v2.startsWith('-')) {
+        res = `-${strNumPlus(v2.replace('-', ''), v1.replace('-', ''))}`;
+    }
+    return res.startsWith('.') ? `0${res}` : res;
+};
+/**
+ * 过滤掉字符串中与数字无关的字符
+ * @param value
+ * @returns
+ */
+export const filterDigit = (value) => {
+    value = value.replace(/ /g, '');
+    if (value !== 'Infinity' && value !== '-Infinity') {
+        const reg = new RegExp(`^\\D*(\\d*(?:\\.\\d{0,${Math.max(0, 10000)}})?).*$`, 'g');
+        const res = value.replace(reg, '$1');
+        if (value.startsWith('-')) {
+            value = `-${res}`;
+        }
+        else {
+            value = res;
+        }
+    }
+    return value === '-' ? '' : value;
+};

package/dist/web/components/wd-input-number/wd-input-number.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-input-number';
+export declare const WdInputNumber: React.ForwardRefExoticComponent<WdInputNumberProps & React.RefAttributes<any>>;
+export interface WdInputNumberProps extends CommonPropsType, DataType {
+    wrapClassName?: string;
+}

package/dist/web/components/wd-input-number/wd-input-number.js

@@ -0,0 +1,364 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable complexity */
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+/* eslint-disable max-lines */
+import { useImperativeHandle, forwardRef, useRef, useCallback, useMemo, useState, useEffect, } from 'react';
+import { useConfig } from '../../utils/config-context';
+import { WdIcon, WdButton } from '../index';
+import { WdFormItem } from '../wd-form-item';
+import { WdInputGroup } from '../wd-input-group';
+import { useFormInputTrait } from '../form-input-hooks';
+import { KEY_DOWN_CODE } from '../../utils/constant';
+import { useSize, useStringProp } from '../../utils/hooks/useFormLegacy';
+import { filterPropsWithOn, getUuid } from '../../utils/tool';
+import { useSyncValue } from '../../utils/hooks/useSyncValue';
+import { usePlatform } from '../../utils/platform';
+import classNames from '../../utils/classnames';
+import { dealDecimals, strNumAddCalc, isNumber, dealPercent, getPercentUnit, filterDigit, } from './number';
+const classRoot = 'input-number';
+const getHasClearIcon = (clearable, focus, disabled, readOnly, realValue) => clearable && focus && !disabled && !readOnly && isNumber(realValue);
+// const rules = [{ format: 'mobile', message: '手机校验失败' }];
+export const WdInputNumber = forwardRef(function WdInputNumber(props, ref) {
+    const [realValue, setRealValue] = useState(null); // 真实值
+    const [showValue, setShowValue] = useState(''); // 显示值
+    // 最大值，用于输入值比较
+    const max = useMemo(() => {
+        return Number(props.format === 'percent'
+            ? dealPercent(`${props.max}`, 'add')
+            : props.max);
+    }, [props.format, props.max]);
+    // 最小值，用于输入值比较
+    const min = useMemo(() => {
+        return Number(props.format === 'percent'
+            ? dealPercent(`${props.min}`, 'add')
+            : props.min);
+    }, [props.format, props.min]);
+    // 校验提示
+    const validMsgObj = useMemo(() => {
+        const percent = props.format === 'percent' ? '%' : '';
+        return {
+            max: `请输入小于等于${max}${percent}的数值`,
+            min: `请输入大于等于${min}${percent}的数值`,
+        };
+    }, [max, min, props.format]);
+    // 校验规则
+    const rules = useMemo(() => {
+        return [
+            {
+                v: props.max,
+                func: (value) => Number(value) <= props.max,
+                message: validMsgObj.max,
+            },
+            {
+                v: props.min,
+                func: (value) => Number(value) >= props.min,
+                message: validMsgObj.min,
+            },
+        ].filter((item) => isNumber(item.v));
+    }, [props.max, props.min, validMsgObj.max, validMsgObj.min]);
+    const wrapRef = useRef(null);
+    const { classPrefix } = useConfig();
+    const platform = usePlatform();
+    const size = useSize(props);
+    const [isInit, setIsInit] = useState(true); // 是否已初始化
+    const startWithOnProps = useMemo(() => filterPropsWithOn(props), [props]);
+    const { before, after } = useStringProp(props);
+    const inputId = useMemo(() => getUuid(), []);
+    const [innerHandle, setInnerHandle] = useState({}); // hook里挂出的属性
+    const { value, onChange: _onChange, disabled, readOnly, validateErrorMsg, validateState, visible, layout, initValidate, } = useFormInputTrait({
+        ...props,
+        rules,
+        value: realValue,
+        inputRef: ref,
+        setInnerHandle,
+    });
+    /**
+     * 获取显示在输入框的值，非真实值
+     */
+    const getShowValue = useCallback((value, type = '') => {
+        value = value === null || value === void 0 ? void 0 : value.replace(/ /g, '');
+        if (value === '' && !['plus', 'minus'].includes(type))
+            return '';
+        if (value === 'null' || value === 'undefined')
+            return '';
+        let validState = undefined;
+        let validMsg = '';
+        let res = `${value}`;
+        if (isNumber(value) && res.includes('e')) {
+            res = `${res.startsWith('-') ? '-' : ''}${res
+                .replace(/^-/, '')
+                .toLocaleString()}`;
+        }
+        res = res.replace(/,/g, '');
+        if (res !== 'Infinity' && res !== '-Infinity') {
+            if (type === 'plus') {
+                res = strNumAddCalc(res, `${props.step}`);
+            }
+            else if (type === 'minus') {
+                res = strNumAddCalc(res, `${-props.step}`);
+            }
+        }
+        if (isNumber(props.max) && Number(res) > max) {
+            validState = 'error';
+            validMsg = validMsgObj.max;
+            // res = `${max}`;
+            type = '';
+        }
+        if (isNumber(props.min) && Number(res) < min) {
+            validState = 'error';
+            validMsg = validMsgObj.min;
+            // res = `${min}`;
+            type = '';
+        }
+        res = dealDecimals(res, props.decimals, type);
+        // 千分符转换
+        if (props.thousandShow && res !== 'Infinity' && res !== '-Infinity') {
+            const temp = res.split('.');
+            res = `${temp[0].replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}${temp[1] ? `.${temp[1]}` : ''}`;
+        }
+        initValidate(validState, validMsg);
+        return res === 'NaN' ? '' : res;
+    }, [
+        initValidate,
+        max,
+        min,
+        props.decimals,
+        props.max,
+        props.min,
+        props.step,
+        props.thousandShow,
+        validMsgObj.max,
+        validMsgObj.min,
+    ]);
+    /**
+     * 获取真实值
+     */
+    const getRealValue = useCallback((value) => {
+        if (value === '')
+            return null;
+        const v = dealPercent(value, props.format === 'percent' ? 'del' : '');
+        return Number(v.replace(/,/g, ''));
+    }, [props.format]);
+    useEffect(() => {
+        const toShow = getShowValue(`${props.inputValue}`, props.format);
+        const toReal = getRealValue(toShow);
+        setShowValue(toShow);
+        setRealValue(toReal);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        // calcPercent,
+        getShowValue,
+        props.decimals,
+        props.format,
+        props.inputValue,
+        props.min,
+        props.max,
+        props.thousandShow,
+    ]);
+    const valueRef = useRef(value);
+    const [focus, setFocus] = useSyncValue(props.focus);
+    const hasClearIcon = getHasClearIcon(props.clearable, focus, disabled, readOnly, realValue);
+    const isRow = props.stepOption === 'both'; // 右侧调整只在pc端生效
+    const root = `${classPrefix}-${classRoot}`;
+    const inputWrap = `${classPrefix}-form-input-wrap`;
+    const prefixIconCls = `${root}__icon-before`;
+    const prefixCls = `${classPrefix}-form-input-wrap__before`;
+    const suffixCls = `${inputWrap}__after`;
+    const suffixIconCls = `${root}__icon-after`;
+    const contentCls = `${classPrefix}-form-input-wrap__content`;
+    const inputCls = classNames({
+        [`${classPrefix}-form-input-wrap__input`]: true,
+        [`${classPrefix}-form-input-wrap__input-row`]: isRow,
+    });
+    const cls = classNames(inputWrap, props.wrapClassName, `size-height-${size}`, {
+        [`${classPrefix}-input-number-input-number`]: true,
+        'is-disabled': disabled,
+        [`${classPrefix}-form-input-wrap`]: true,
+        'is-not-h5': true,
+        [`${classPrefix}-form-input-wrap--no-padding-right`]: !isRow,
+        [`${classPrefix}-form-input-wrap--no-border`]: !isRow && platform === 'h5',
+        [`${inputWrap}--no-radius-left`]: before,
+        [`${inputWrap}--no-radius-right`]: after,
+        [`${inputWrap}--no-radius`]: before && after,
+    });
+    const inputGroupCls = classNames({
+        'is-not-h5': true,
+        'input-number-step-right': props.stepOption !== 'both',
+        'size-width-hundred': platform === 'h5' || (props.block && props.stepOption !== 'both'),
+        [`size-height-${size}`]: true,
+        [`${classPrefix}-form-input-wrap__${classRoot}-right`]: !isRow,
+    });
+    const formItemProps = {
+        ...props,
+        validateErrorMsg,
+        validateState,
+        readOnly,
+        readValue: `${before} ${showValue}${getPercentUnit(props.format)} ${after}`,
+        disabled,
+        classRoot,
+        inputId,
+        layout,
+        testId: 'input-number',
+        className: classNames(props.className, root, {
+            [`${root}--row`]: isRow,
+        }),
+    };
+    const inputGroupProps = {
+        before,
+        after,
+        className: inputGroupCls,
+    };
+    // 是否可以递增
+    const stepPlusDisabled = useMemo(() => {
+        if (readOnly || disabled || props.status !== 'edit')
+            return true;
+        if (!isNumber(realValue) || !isNumber(props.max))
+            return false;
+        return +props.max <= +realValue;
+    }, [readOnly, disabled, props.status, realValue, props.max]);
+    // 是否可以递减
+    const stepMinusDisabled = useMemo(() => {
+        if (readOnly || disabled || props.status !== 'edit')
+            return true;
+        if (!isNumber(realValue) || !isNumber(props.min))
+            return false;
+        return +props.min >= +realValue;
+    }, [readOnly, disabled, props.status, realValue, props.min]);
+    /**
+     * 监听非输入引起的value变化，比如调用 setValue, clearValue
+     */
+    const updateValueByListen = () => {
+        if (valueRef.current === value) {
+            setIsInit(false);
+            return;
+        }
+        if (!isInit) {
+            setRealValue(value);
+            setShowValue(getShowValue(`${value}`, props.format));
+        }
+        // 初始化时同步真实值到表单
+        if (isNumber(realValue) && isInit) {
+            changeForm(realValue);
+        }
+        setIsInit(false);
+    };
+    useEffect(() => {
+        updateValueByListen();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    const changeForm = useCallback((val) => {
+        valueRef.current = val;
+        _onChange(val);
+    }, [_onChange]);
+    /**
+     * 显示值变化
+     * @param e
+     */
+    const onChange = (e) => {
+        const value = typeof e === 'string' ? e : e.target.value;
+        setShowValue(value);
+    };
+    /**
+     * 真实值变化
+     * @param e
+     * @param type
+     * @returns
+     */
+    const onRealChange = (e, type = '') => {
+        var _a, _b;
+        if (readOnly || disabled || props.status !== 'edit')
+            return realValue;
+        if (['plus', 'minus'].includes(type)) {
+            if (!isNumber(props.step) ||
+                (type === 'plus' && stepPlusDisabled) ||
+                (type === 'minus' && stepMinusDisabled))
+                return Number(showValue);
+        }
+        const toShow = getShowValue(filterDigit(showValue), type);
+        const toReal = getRealValue(toShow);
+        setShowValue(toShow);
+        setRealValue(toReal);
+        changeForm(toReal);
+        (_b = (_a = props.events) === null || _a === void 0 ? void 0 : _a.change) === null || _b === void 0 ? void 0 : _b.call(_a, { value: toReal }, { originEvent: e });
+        return toReal;
+    };
+    const onClear = (e) => {
+        var _a, _b, _c, _d;
+        const newValue = null;
+        setShowValue('');
+        setRealValue(newValue);
+        changeForm(newValue);
+        initValidate(undefined, '');
+        (_b = (_a = props.events) === null || _a === void 0 ? void 0 : _a.change) === null || _b === void 0 ? void 0 : _b.call(_a, { value: newValue }, { originEvent: e });
+        (_d = (_c = props.events) === null || _c === void 0 ? void 0 : _c.clear) === null || _d === void 0 ? void 0 : _d.call(_c, { originValue: realValue }, { originEvent: e });
+        e.preventDefault();
+    };
+    const onKeyDown = (e) => {
+        var _a;
+        if (e.key === 'enter' || e.keyCode === KEY_DOWN_CODE) {
+            (_a = props.events) === null || _a === void 0 ? void 0 : _a.confirm({ value: +e.target.value }, { originEvent: e });
+        }
+        if (e.key === 'e') {
+            e.preventDefault();
+        }
+    };
+    const onFocus = (e) => {
+        var _a;
+        const temp = e.target.value.replace(/,/g, '');
+        setShowValue(temp);
+        (_a = props.events) === null || _a === void 0 ? void 0 : _a.focus({ value: realValue }, { originEvent: e });
+        setFocus(true);
+    };
+    const onBlur = (e) => {
+        var _a;
+        const toReal = onRealChange(e);
+        (_a = props.events) === null || _a === void 0 ? void 0 : _a.blur({ value: toReal }, { originEvent: e });
+        setFocus(false);
+    };
+    useImperativeHandle(ref, () => ({
+        ...innerHandle,
+        name: props.name,
+        value,
+        label: props.label,
+        required: props.required,
+        visible,
+        disabled,
+        readOnly,
+        before,
+        after,
+        min: props.min,
+        max: props.max,
+        step: props.step,
+        format: props.format,
+    }), [
+        after,
+        before,
+        disabled,
+        innerHandle,
+        props.format,
+        props.label,
+        props.max,
+        props.min,
+        props.name,
+        props.required,
+        props.step,
+        readOnly,
+        value,
+        visible,
+    ]);
+    /**
+     * 获取后缀显示信息
+     * @param text
+     * @returns
+     */
+    const getAfterShow = (text) => {
+        if (!text)
+            return null;
+        return (_jsx("div", { className: `${text === '%'
+                ? `${classPrefix}-input-number__text-right-percent`
+                : ''}`, children: text }));
+    };
+    if (!visible)
+        return null;
+    return (_jsxs(WdFormItem, { ...formItemProps, children: [isRow && (_jsx(WdButton, { className: `${root}-btn size-${size} ${stepMinusDisabled ? 'is-disabled' : ''} ${root}-btn__before`, iconType: "icon-only", theme: "secondary", variant: "outline", icon: "td:remove", events: { tap: (e) => onRealChange(e, 'minus') } })), _jsx(WdInputGroup, { ...inputGroupProps, children: _jsxs("div", { className: cls, ref: wrapRef, onFocus: () => { var _a, _b; return (_b = (_a = wrapRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('is-focused'); }, onBlur: () => { var _a, _b; return (_b = (_a = wrapRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove('is-focused'); }, children: [props.prefixType && (_jsx("div", { className: prefixCls, children: _jsx(WdIcon, { size: size, name: props.prefixIcon, type: props.prefixType, src: props.prefixSrc, className: prefixIconCls }) })), _jsx("div", { className: contentCls, children: _jsx("input", { id: inputId, className: inputCls, type: "text", inputMode: "decimal", placeholder: props.placeholder, value: showValue, disabled: disabled, readOnly: readOnly, name: props.name, autoFocus: focus, autoComplete: "off", onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, "data-testid": "input-number__input", ...startWithOnProps }) }), getAfterShow(props.format === 'percent' ? '%' : ''), hasClearIcon && (_jsx("div", { className: suffixCls, children: _jsx(WdIcon, { className: `${classPrefix}-icon__trigger`, name: "td:close-circle-filled", onMouseDown: onClear }) })), !hasClearIcon && props.suffixType && (_jsx("div", { className: suffixCls, children: _jsx(WdIcon, { name: props.suffixIcon, type: props.suffixType, src: props.suffixSrc, className: suffixIconCls }) })), !isRow && platform !== 'h5' && (_jsxs("div", { className: `${root}-icon__right`, children: [_jsx("div", { className: `${root}-icon__right-item size-${size} ${stepPlusDisabled ? 'is-disabled' : ''} ${root}__increase`, onClick: (e) => onRealChange(e, 'plus'), children: _jsx(WdIcon, { name: "chevronup", size: "sm" }) }), _jsx("div", { className: `${root}-icon__right-item size-${size} ${stepMinusDisabled ? 'is-disabled' : ''} ${root}__decrease`, onClick: (e) => onRealChange(e, 'minus'), children: _jsx(WdIcon, { name: "chevrondown", size: "sm" }) })] }))] }) }), isRow && (_jsx(WdButton, { className: `${root}-btn size-${size}  ${stepPlusDisabled ? 'is-disabled' : ''} ${root}-btn__after`, iconType: "icon-only", theme: "secondary", variant: "outline", icon: "td:add", events: { tap: (e) => onRealChange(e, 'plus') } }))] }));
+});

package/dist/web/components/wd-input-phone/index.d.ts

@@ -0,0 +1,4 @@
+import { WdInputPhone } from './wd-input-phone';
+export { WdInputPhone } from './wd-input-phone';
+export type { WdInputPhoneProps } from './wd-input-phone';
+export default WdInputPhone;