@cloudbase/weda-ui 3.5.2 → 3.6.0

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

@@ -6,6 +6,7 @@ import type { DataType, EventsType } from '../../../configs/components/wd-input'
  */
 export declare const WdInput: React.ForwardRefExoticComponent<CommonPropsType & import("type-fest").Simplify<{
     label?: string;
+    template?: string;
     name?: string;
     type?: string;
     required?: boolean;
@@ -15,64 +16,66 @@ export declare const WdInput: React.ForwardRefExoticComponent<CommonPropsType &
     placeholder?: string;
     status?: string;
     layout?: string;
-    block?: boolean;
     after?: string;
     focus?: boolean;
-    requiredFlag?: boolean;
-    labelVisible?: boolean;
-    inputValue?: string;
-    password?: boolean;
-    clearable?: boolean;
-    counterVisible?: boolean;
     before?: string;
-    labelWidth?: string;
-    labelAlign?: string;
-    labelWrap?: boolean;
-    labelTips?: string;
-    isUnionValue?: boolean;
     prefixType?: string;
     prefixIcon?: string;
     prefixSrc?: string;
     suffixType?: string;
     suffixIcon?: string;
     suffixSrc?: string;
+    labelWidth?: string;
+    inputValue?: string;
+    labelVisible?: boolean;
+    labelAlign?: string;
+    labelWrap?: boolean;
+    labelTips?: string;
+    isNickNameType?: boolean;
+    cursorSpacing?: number;
+    clearable?: boolean;
+    isUnionValue?: boolean;
+    password?: boolean;
+    counterVisible?: boolean;
     borderedH5?: boolean;
     borderedPc?: boolean;
-    isNickNameType?: boolean;
     rules?: {
         pattern?: string;
         message: string;
         format: string;
     }[];
+    requiredFlag?: boolean;
     requiredMsg?: string;
+    isConvert?: boolean;
 }> & import("type-fest").Simplify<import("../../../configs/type-utils").StaticEventsType<[{
-    readonly name: "change";
-    readonly title: "值改变";
-    readonly detail: import("@sinclair/typebox").TObject<{
+    name: string;
+    title: string;
+    detail: import("@sinclair/typebox").TObject<{
         value: import("@sinclair/typebox").TString;
     }>;
+    description: string;
 }, {
-    readonly name: "focus";
-    readonly title: "聚焦";
-    readonly detail: import("@sinclair/typebox").TObject<{
+    name: string;
+    title: string;
+    detail: import("@sinclair/typebox").TObject<{
         value: import("@sinclair/typebox").TString;
     }>;
 }, {
-    readonly name: "blur";
-    readonly title: "失焦";
-    readonly detail: import("@sinclair/typebox").TObject<{
+    name: string;
+    title: string;
+    detail: import("@sinclair/typebox").TObject<{
         value: import("@sinclair/typebox").TString;
     }>;
 }, {
-    readonly name: "confirm";
-    readonly title: "确认";
-    readonly detail: import("@sinclair/typebox").TObject<{
+    name: string;
+    title: string;
+    detail: import("@sinclair/typebox").TObject<{
         value: import("@sinclair/typebox").TString;
     }>;
 }, {
-    readonly name: "clear";
-    readonly title: "清除内容";
-    readonly detail: import("@sinclair/typebox").TObject<{
+    name: string;
+    title: string;
+    detail: import("@sinclair/typebox").TObject<{
         originValue: import("@sinclair/typebox").TString;
     }>;
 }]>> & {

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

@@ -5,22 +5,25 @@ import { WdFormItem, WdInputGroup } from '../wd-form-item';
 import { useFormInputTrait } from '../form-input-hooks';
 import { WdIcon } from '../wd-icon';
 import { filterPropsWithOn, getUuid } from '../../utils/tool';
-import { FORM_MAX_LENGTH, KEY_DOWN_CODE } from '../../utils/constant';
+import { KEY_DOWN_CODE } from '../../utils/constant';
 import classNames from '../../utils/classnames';
 import { useSyncValue } from '../../utils/hooks/useSyncValue';
-import { useSize, useRules, converValueFix, converInputValue, useStringProp, useBlock, useIconSize, } from '../../utils/hooks/useFormLegacy';
+import { useSize, useRules, converValueFix, converInputValue, useStringProp, convertIconSize, } from '../../utils/hooks/useFormLegacy';
 import { useConfig } from '../../utils/config-context';
 import isEqual from 'lodash.isequal';
+import { X_RUNTIME_DEFAULT } from '../../../configs/type-utils/x-runtime-default';
+import { usePlatform } from '../../utils/platform';
 const inputTypes = { idcard: 'text', digit: 'number' };
 /**
  * 标准化：单行输入组件
  */
 export const WdInput = forwardRef(function WdInput(props, ref) {
-    const { name, password = false, type = 'text', placeholder = '请输入', focus: _focus = false, maxLength = FORM_MAX_LENGTH, clearable = false, events, isUnionValue = true, prefixType, prefixIcon, prefixSrc, suffixType, suffixIcon, suffixSrc, classRoot = 'input', wrapClassName = '', counterVisible, label, required, inputPattern, } = props;
+    const { name, password = X_RUNTIME_DEFAULT.password, type = X_RUNTIME_DEFAULT.type, placeholder, focus: _focus = X_RUNTIME_DEFAULT.focus, maxLength = X_RUNTIME_DEFAULT.maxLength, clearable = X_RUNTIME_DEFAULT.clearable, events, isUnionValue = X_RUNTIME_DEFAULT.isUnionValue, prefixType, prefixIcon, prefixSrc = X_RUNTIME_DEFAULT.prefixSrc, suffixType, suffixIcon, suffixSrc = X_RUNTIME_DEFAULT.suffixSrc, classRoot = 'input', wrapClassName = '', counterVisible = X_RUNTIME_DEFAULT.counterVisible, label, required = X_RUNTIME_DEFAULT.required, inputPattern, template, isConvert = true, } = props;
+    const zhRef = useRef(false); // 判断是否输入中文
     const { before, after, inputValue } = useStringProp(props);
     const [innerHandle, setInnerHandle] = useState({}); // hook里挂出的属性
     const [currentInputValue, setCurrentInputValue] = useSyncValue(inputValue); // 监听inputValue
-    const formValue = useMemo(() => converValueFix(inputValue, before, after, type, isUnionValue), [inputValue, before, after, type, isUnionValue]);
+    const formValue = useMemo(() => converValueFix(inputValue, before, after, type, isUnionValue, isConvert), [inputValue, before, after, type, isUnionValue, isConvert]);
     const rules = useRules(props); // 含前后缀和必填时，仅对输入框校验
     const traitProps = {
         ...props,
@@ -30,12 +33,11 @@ export const WdInput = forwardRef(function WdInput(props, ref) {
         setInnerHandle,
     };
     const { value, // 代表组件值，含前后缀
-    onChange: _onChange, disabled, readOnly, validateErrorMsg, validateState, visible, layout, } = useFormInputTrait(traitProps);
+    onChange: _onChange, disabled, readOnly, validateErrorMsg, validateState, visible, } = useFormInputTrait(traitProps);
     const wrapRef = useRef(null);
     const valueRef = useRef(value);
     const size = useSize(props);
-    const iconSize = useIconSize(props);
-    const block = useBlock(props);
+    const iconSize = convertIconSize(size);
     const { classPrefix } = useConfig();
     const startWithOnProps = useMemo(() => filterPropsWithOn(props), [props]);
     const inputId = useMemo(() => getUuid(), []);
@@ -51,14 +53,16 @@ export const WdInput = forwardRef(function WdInput(props, ref) {
     const prefixIconCls = `${root}__icon-before`;
     const suffixCls = `${inputWrap}__after`;
     const suffixIconCls = `${root}__icon-after`;
-    const cls = classNames(inputWrap, wrapClassName, `size-width-${size} size-font-${size}`, `${root}-${classRoot}`, `size-height-${size}`, {
-        'size-width-hundred': block,
+    const cls = classNames(inputWrap, wrapClassName, `size-width-${size} size-font-${size}`, `${root}-${classRoot}`, `size-height-${size}`, `${classPrefix}-form-inherit--font`, {
+        'size-width-hundred': true,
         'is-disabled': disabled,
         [`${inputWrap}--no-radius-left`]: before,
         [`${inputWrap}--no-radius-right`]: after,
         [`${inputWrap}--no-radius`]: before && after,
     });
     const countCls = `${classPrefix}-input__limit-number`;
+    const platform = usePlatform();
+    const isH5 = platform === 'h5';
     useEffect(() => {
         if (isEqual(valueRef.current, value))
             return; // 监听非输入引起的value变化，比如调用 setValue, clearValue
@@ -72,22 +76,21 @@ export const WdInput = forwardRef(function WdInput(props, ref) {
     }, [_onChange]);
     // 包装值，避免每次输入全部参数
     const converValueFixWrap = (val) => {
-        return converValueFix(val, before, after, type, isUnionValue);
+        return converValueFix(val, before, after, type, isUnionValue, isConvert);
     };
     const onChange = (e) => {
         var _a;
         const text = typeof e === 'string' ? e : e.target.value;
-        if (maxLength > 0 && text.length > maxLength) {
-            return;
-        }
         const reg = new RegExp(inputPattern);
         if (inputPattern && !reg.test(text)) {
             return;
         }
         setCurrentInputValue(text);
-        const newValue = converValueFixWrap(text);
-        changeForm(newValue);
-        (_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: newValue }, { originEvent: e });
+        if (!zhRef.current) {
+            const newValue = converValueFixWrap(text);
+            changeForm(newValue);
+            (_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: newValue }, { originEvent: e });
+        }
     };
     const onClear = (e) => {
         var _a, _b;
@@ -114,6 +117,13 @@ export const WdInput = forwardRef(function WdInput(props, ref) {
         events.blur({ value: converValueFixWrap(e.target.value) }, { originEvent: e });
         setFocus(false);
     };
+    const handleZhStart = () => {
+        zhRef.current = true;
+    };
+    const handleZhEnd = (e) => {
+        zhRef.current = false;
+        onChange(e);
+    };
     useImperativeHandle(ref, () => ({
         ...innerHandle,
         name,
@@ -139,7 +149,6 @@ export const WdInput = forwardRef(function WdInput(props, ref) {
     ]);
     const formItemProps = {
         ...props,
-        block,
         validateErrorMsg,
         validateState,
         readOnly,
@@ -147,10 +156,15 @@ export const WdInput = forwardRef(function WdInput(props, ref) {
         disabled,
         classRoot,
         inputId,
-        layout,
+        layout: props.layout,
+        readBeforeAfter: !isUnionValue,
     };
-    const inputGroupProps = { before, after, block, classRoot, size };
+    const inputGroupProps = { before, after, classRoot, size };
     if (!visible)
         return null;
-    return (_jsx(WdFormItem, { ...formItemProps, children: _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: [prefixType && (_jsx("div", { className: prefixCls, children: _jsx(WdIcon, { size: iconSize, name: prefixIcon, type: prefixType, src: prefixSrc, className: prefixIconCls }) })), _jsx("div", { className: contentCls, children: _jsx("input", { id: inputId, className: inputCls, type: inputType, placeholder: placeholder, value: currentInputValue !== null && currentInputValue !== void 0 ? currentInputValue : '', disabled: disabled, name: name, autoFocus: focus, autoComplete: "off", maxLength: maxLength, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, ...startWithOnProps }) }), hasClearIcon && (_jsx("div", { className: suffixCls, children: _jsx(WdIcon, { size: iconSize, className: `${classPrefix}-icon__trigger`, name: "td:close-circle-filled", onMouseDown: onClear }) })), !hasClearIcon && suffixType && (_jsx("div", { className: suffixCls, children: _jsx(WdIcon, { size: iconSize, name: suffixIcon, type: suffixType, src: suffixSrc, className: suffixIconCls }) })), counterVisible && (_jsxs("span", { className: countCls, children: [counter, "/", maxLength] }))] }) }) }));
+    return (_jsx(WdFormItem, { ...formItemProps, children: _jsx(WdInputGroup, { ...inputGroupProps, children: _jsxs("div", { className: `${cls} ${template === 'greySearchBox'
+                    ? 'wd-input-input-search template search-box color-grey is-pc-bordered'
+                    : ''} ${template === 'whiteSearchBox'
+                    ? 'wd-input-input-search template search-box color-white is-pc-bordered'
+                    : ''} ${isH5 ? 'is-h5-borderless' : ''}`, 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: [prefixType && (_jsx("div", { className: prefixCls, children: _jsx(WdIcon, { size: iconSize, name: prefixIcon, type: prefixType, src: prefixSrc, className: prefixIconCls }) })), _jsx("div", { className: contentCls, children: _jsx("input", { id: inputId, className: inputCls, type: inputType, placeholder: placeholder, value: currentInputValue !== null && currentInputValue !== void 0 ? currentInputValue : '', disabled: disabled, name: name, autoFocus: focus, autoComplete: "off", maxLength: maxLength, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onCompositionStart: handleZhStart, onCompositionEnd: handleZhEnd, ...startWithOnProps }) }), hasClearIcon && (_jsx("div", { className: suffixCls, children: _jsx(WdIcon, { size: iconSize, className: `${classPrefix}-icon__trigger`, name: "td:close-circle-filled", onMouseDown: onClear }) })), !hasClearIcon && suffixType && (_jsx("div", { className: suffixCls, children: _jsx(WdIcon, { size: iconSize, name: suffixIcon, type: suffixType, src: suffixSrc, className: suffixIconCls }) })), counterVisible && (_jsxs("span", { className: countCls, children: [counter, "/", maxLength] }))] }) }) }));
 });

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

@@ -6,6 +6,7 @@ import type { DataType, EventsType } from '../../../configs/components/wd-input-
  */
 export declare const WdInputEmail: React.ForwardRefExoticComponent<CommonPropsType & import("type-fest").Simplify<{
     label?: string;
+    template?: string;
     name?: string;
     required?: boolean;
     extra?: string;
@@ -14,57 +15,59 @@ export declare const WdInputEmail: React.ForwardRefExoticComponent<CommonPropsTy
     placeholder?: string;
     status?: string;
     layout?: string;
-    block?: boolean;
     after?: string;
     focus?: boolean;
-    requiredFlag?: boolean;
-    labelVisible?: boolean;
-    inputValue?: string;
-    clearable?: boolean;
-    counterVisible?: boolean;
     before?: string;
-    labelWidth?: string;
-    labelAlign?: string;
-    labelWrap?: boolean;
-    labelTips?: string;
-    isUnionValue?: boolean;
     prefixType?: string;
     prefixIcon?: string;
     prefixSrc?: string;
     suffixType?: string;
     suffixIcon?: string;
     suffixSrc?: string;
+    labelWidth?: string;
+    inputValue?: string;
+    labelVisible?: boolean;
+    labelAlign?: string;
+    labelWrap?: boolean;
+    labelTips?: string;
+    cursorSpacing?: number;
+    clearable?: boolean;
+    isUnionValue?: boolean;
+    counterVisible?: boolean;
     borderedH5?: boolean;
     borderedPc?: boolean;
+    requiredFlag?: boolean;
     requiredMsg?: string;
+    isConvert?: boolean;
 }> & import("type-fest").Simplify<import("../../../configs/type-utils").StaticEventsType<[{
-    readonly name: "change";
-    readonly title: "值改变";
-    readonly detail: import("@sinclair/typebox").TObject<{
+    name: string;
+    title: string;
+    detail: import("@sinclair/typebox").TObject<{
         value: import("@sinclair/typebox").TString;
     }>;
+    description: string;
 }, {
-    readonly name: "focus";
-    readonly title: "聚焦";
-    readonly detail: import("@sinclair/typebox").TObject<{
+    name: string;
+    title: string;
+    detail: import("@sinclair/typebox").TObject<{
         value: import("@sinclair/typebox").TString;
     }>;
 }, {
-    readonly name: "blur";
-    readonly title: "失焦";
-    readonly detail: import("@sinclair/typebox").TObject<{
+    name: string;
+    title: string;
+    detail: import("@sinclair/typebox").TObject<{
         value: import("@sinclair/typebox").TString;
     }>;
 }, {
-    readonly name: "confirm";
-    readonly title: "确认";
-    readonly detail: import("@sinclair/typebox").TObject<{
+    name: string;
+    title: string;
+    detail: import("@sinclair/typebox").TObject<{
         value: import("@sinclair/typebox").TString;
     }>;
 }, {
-    readonly name: "clear";
-    readonly title: "清除内容";
-    readonly detail: import("@sinclair/typebox").TObject<{
+    name: string;
+    title: string;
+    detail: import("@sinclair/typebox").TObject<{
         originValue: import("@sinclair/typebox").TString;
     }>;
 }]>> & React.RefAttributes<unknown>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { CommonPropsType } from '../../types';
 export declare const WdInputGroup: ({ before, after, className, children, }: WdInputGroupProps) => JSX.Element;
 export interface WdInputGroupProps extends CommonPropsType {

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable complexity */
 /* eslint-disable max-lines */
-import { useImperativeHandle, forwardRef, useRef, useCallback, useMemo, useState, useEffect, } from 'react';
+/* eslint-disable complexity */
+import { 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';
@@ -14,9 +14,29 @@ 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';
+import { useSetWidgetApi } from '../../utils/widget-api/use-set-widget-api';
 const classRoot = 'input-number';
 const getHasClearIcon = (clearable, focus, disabled, readOnly, realValue) => clearable && focus && !disabled && !readOnly && isNumber(realValue);
-// const rules = [{ format: 'mobile', message: '手机校验失败' }];
+const judgeRule = ({ value = undefined, max = undefined, min = undefined, resultType = 'boolean', } = {}) => {
+    let maxFit = true;
+    let minFit = true;
+    if (isNumber(max)) {
+        maxFit = Number(value) <= max;
+    }
+    if (isNumber(min)) {
+        minFit = Number(value) >= min;
+    }
+    return resultType === 'boolean' ? maxFit && minFit : { maxFit, minFit };
+};
+const getRuleMessage = ({ value = undefined, max = undefined, min = undefined, validMsgObj = {}, } = {}) => {
+    const { maxFit, minFit } = judgeRule({
+        value,
+        max,
+        min,
+        resultType: 'object',
+    });
+    return !maxFit ? validMsgObj.max : !minFit ? validMsgObj.min : '';
+};
 export const WdInputNumber = forwardRef(function WdInputNumber(props, ref) {
     const [realValue, setRealValue] = useState(null); // 真实值
     const [showValue, setShowValue] = useState(''); // 显示值
@@ -45,16 +65,28 @@ export const WdInputNumber = forwardRef(function WdInputNumber(props, ref) {
         return [
             {
                 v: props.max,
-                func: (value) => Number(value) <= props.max,
+                func: (value) => judgeRule({ value, max: props.max, min: props.min }),
+                messageFunc: (value) => getRuleMessage({
+                    value,
+                    max: props.max,
+                    min: props.min,
+                    validMsgObj,
+                }),
                 message: validMsgObj.max,
             },
             {
                 v: props.min,
-                func: (value) => Number(value) >= props.min,
+                func: (value) => judgeRule({ value, max: props.max, min: props.min }),
+                messageFunc: (value) => getRuleMessage({
+                    value,
+                    max: props.max,
+                    min: props.min,
+                    validMsgObj,
+                }),
                 message: validMsgObj.min,
             },
         ].filter((item) => isNumber(item.v));
-    }, [props.max, props.min, validMsgObj.max, validMsgObj.min]);
+    }, [props.max, props.min, validMsgObj]);
     const wrapRef = useRef(null);
     const { classPrefix } = useConfig();
     const platform = usePlatform();
@@ -64,7 +96,7 @@ export const WdInputNumber = forwardRef(function WdInputNumber(props, ref) {
     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({
+    const { value, onChange: _onChange, disabled, readOnly, validateErrorMsg, validateState, visible, initValidate, } = useFormInputTrait({
         ...props,
         rules,
         value: realValue,
@@ -100,13 +132,11 @@ export const WdInputNumber = forwardRef(function WdInputNumber(props, ref) {
         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);
@@ -138,22 +168,54 @@ export const WdInputNumber = forwardRef(function WdInputNumber(props, ref) {
         const v = dealPercent(value, props.format === 'percent' ? 'del' : '');
         return Number(v.replace(/,/g, ''));
     }, [props.format]);
-    useEffect(() => {
-        const toShow = getShowValue(`${props.inputValue}`, props.format);
+    const changeForm = useCallback((val) => {
+        valueRef.current = val;
+        _onChange(val);
+    }, [_onChange]);
+    /**
+     * 根据传入的value值，更新显示值和真实值
+     */
+    const dealValueChange = useCallback((value) => {
+        const toShow = getShowValue(`${value}`, props.format);
         const toReal = getRealValue(toShow);
         setShowValue(toShow);
         setRealValue(toReal);
         changeForm(toReal);
+    }, [changeForm, getRealValue, getShowValue, props.format]);
+    // 与计算值相关的配置变化时，去重新计算显示值和真实值
+    useEffect(() => {
+        dealValueChange(isNumber(value) ? value : props.inputValue);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.decimals, props.format, props.thousandShow]);
+    // inputValue变化时，单独处理值更新
+    useEffect(() => {
+        dealValueChange(props.inputValue);
         // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.inputValue]);
+    // max、min变化时，去判断当前值是否超出范围
+    useEffect(() => {
+        if (showValue === 'null' || showValue === 'undefined')
+            return;
+        let validState = undefined;
+        let validMsg = '';
+        if (isNumber(props.max) && Number(showValue) > max) {
+            validState = 'error';
+            validMsg = validMsgObj.max;
+        }
+        if (isNumber(props.min) && Number(showValue) < min) {
+            validState = 'error';
+            validMsg = validMsgObj.min;
+        }
+        initValidate(validState, validMsg);
     }, [
-        // calcPercent,
-        getShowValue,
-        props.decimals,
-        props.format,
-        props.inputValue,
+        showValue,
         props.min,
         props.max,
-        props.thousandShow,
+        max,
+        min,
+        initValidate,
+        validMsgObj.max,
+        validMsgObj.min,
     ]);
     const valueRef = useRef(value);
     const [focus, setFocus] = useSyncValue(props.focus);
@@ -170,7 +232,7 @@ export const WdInputNumber = forwardRef(function WdInputNumber(props, ref) {
         [`${classPrefix}-form-input-wrap__input`]: true,
         [`${classPrefix}-form-input-wrap__input-row`]: isRow,
     });
-    const cls = classNames(inputWrap, props.wrapClassName, `size-height-${size}`, {
+    const cls = classNames(inputWrap, props.wrapClassName, `size-height-${size}`, `size-font-${size}`, {
         [`${classPrefix}-input-number-input-number`]: true,
         'is-disabled': disabled,
         [`${classPrefix}-form-input-wrap`]: true,
@@ -184,7 +246,7 @@ export const WdInputNumber = forwardRef(function WdInputNumber(props, ref) {
     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-width-hundred': platform === 'h5' || props.stepOption !== 'both',
         [`size-height-${size}`]: true,
         [`${classPrefix}-form-input-wrap__${classRoot}-right`]: !isRow,
     });
@@ -193,11 +255,11 @@ export const WdInputNumber = forwardRef(function WdInputNumber(props, ref) {
         validateErrorMsg,
         validateState,
         readOnly,
-        readValue: `${before} ${showValue}${getPercentUnit(props.format)} ${after}`,
+        readValue: `${showValue}${getPercentUnit(props.format)}`,
         disabled,
         classRoot,
         inputId,
-        layout,
+        layout: props.layout,
         testId: 'input-number',
         className: classNames(props.className, root, {
             [`${root}--row`]: isRow,
@@ -239,6 +301,7 @@ export const WdInputNumber = forwardRef(function WdInputNumber(props, ref) {
         if (!isInit) {
             setRealValue(value);
             setShowValue(getShowValue(`${value}`, props.format));
+            valueRef.current = value;
         }
         // 初始化时同步真实值到表单
         if (isNumber(realValue) && isInit) {
@@ -250,10 +313,6 @@ export const WdInputNumber = forwardRef(function WdInputNumber(props, ref) {
         updateValueByListen();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
-    const changeForm = useCallback((val) => {
-        valueRef.current = val;
-        _onChange(val);
-    }, [_onChange]);
     /**
      * 显示值变化
      * @param e
@@ -319,7 +378,7 @@ export const WdInputNumber = forwardRef(function WdInputNumber(props, ref) {
         (_a = props.events) === null || _a === void 0 ? void 0 : _a.blur({ value: toReal }, { originEvent: e });
         setFocus(false);
     };
-    useImperativeHandle(ref, () => ({
+    useSetWidgetApi(() => ({
         ...innerHandle,
         name: props.name,
         value,
@@ -349,7 +408,7 @@ export const WdInputNumber = forwardRef(function WdInputNumber(props, ref) {
         readOnly,
         value,
         visible,
-    ]);
+    ], ref);
     /**
      * 获取后缀显示信息
      * @param text

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

@@ -5,37 +5,39 @@ import type { DataType, EventsType } from '../../../configs/components/wd-input'
  * 标准化：电话输入组件
  */
 export declare const WdInputPhone: React.ForwardRefExoticComponent<CommonPropsType & import("type-fest").Simplify<import("../../../configs/type-utils").StaticEventsType<[{
-    readonly name: "change";
-    readonly title: "值改变";
-    readonly detail: import("@sinclair/typebox").TObject<{
+    name: string;
+    title: string;
+    detail: import("@sinclair/typebox").TObject<{
         value: import("@sinclair/typebox").TString;
     }>;
+    description: string;
 }, {
-    readonly name: "focus";
-    readonly title: "聚焦";
-    readonly detail: import("@sinclair/typebox").TObject<{
+    name: string;
+    title: string;
+    detail: import("@sinclair/typebox").TObject<{
         value: import("@sinclair/typebox").TString;
     }>;
 }, {
-    readonly name: "blur";
-    readonly title: "失焦";
-    readonly detail: import("@sinclair/typebox").TObject<{
+    name: string;
+    title: string;
+    detail: import("@sinclair/typebox").TObject<{
         value: import("@sinclair/typebox").TString;
     }>;
 }, {
-    readonly name: "confirm";
-    readonly title: "确认";
-    readonly detail: import("@sinclair/typebox").TObject<{
+    name: string;
+    title: string;
+    detail: import("@sinclair/typebox").TObject<{
         value: import("@sinclair/typebox").TString;
     }>;
 }, {
-    readonly name: "clear";
-    readonly title: "清除内容";
-    readonly detail: import("@sinclair/typebox").TObject<{
+    name: string;
+    title: string;
+    detail: import("@sinclair/typebox").TObject<{
         originValue: import("@sinclair/typebox").TString;
     }>;
 }]>> & import("type-fest").Simplify<{
     label?: string;
+    template?: string;
     name?: string;
     type?: string;
     required?: boolean;
@@ -45,35 +47,36 @@ export declare const WdInputPhone: React.ForwardRefExoticComponent<CommonPropsTy
     placeholder?: string;
     status?: string;
     layout?: string;
-    block?: boolean;
     after?: string;
     focus?: boolean;
-    requiredFlag?: boolean;
-    labelVisible?: boolean;
-    inputValue?: string;
-    password?: boolean;
-    clearable?: boolean;
-    counterVisible?: boolean;
     before?: string;
-    labelWidth?: string;
-    labelAlign?: string;
-    labelWrap?: boolean;
-    labelTips?: string;
-    isUnionValue?: boolean;
     prefixType?: string;
     prefixIcon?: string;
     prefixSrc?: string;
     suffixType?: string;
     suffixIcon?: string;
     suffixSrc?: string;
+    labelWidth?: string;
+    inputValue?: string;
+    labelVisible?: boolean;
+    labelAlign?: string;
+    labelWrap?: boolean;
+    labelTips?: string;
+    isNickNameType?: boolean;
+    cursorSpacing?: number;
+    clearable?: boolean;
+    isUnionValue?: boolean;
+    password?: boolean;
+    counterVisible?: boolean;
     borderedH5?: boolean;
     borderedPc?: boolean;
-    isNickNameType?: boolean;
     rules?: {
         pattern?: string;
         message: string;
         format: string;
     }[];
+    requiredFlag?: boolean;
     requiredMsg?: string;
+    isConvert?: boolean;
 }> & React.RefAttributes<any>>;
 export type WdInputPhoneProps = CommonPropsType & EventsType & DataType;