@cloudbase/weda-ui 0.2.17 → 0.2.21-alpha.2

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

@@ -0,0 +1,436 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable max-lines */
+/* 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';
+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';
+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 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(''); // 显示值
+    // 最大值，用于输入值比较
+    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) => 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) => 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]);
+    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, 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;
+            type = '';
+        }
+        if (isNumber(props.min) && Number(res) < min) {
+            validState = 'error';
+            validMsg = validMsgObj.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]);
+    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);
+        if (toReal === realValue)
+            return;
+        setRealValue(toReal);
+        changeForm(toReal);
+    }, [changeForm, getRealValue, getShowValue, props.format, realValue]);
+    // 与计算值相关的配置变化时，去重新计算显示值和真实值
+    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);
+    }, [
+        showValue,
+        props.min,
+        props.max,
+        max,
+        min,
+        initValidate,
+        validMsgObj.max,
+        validMsgObj.min,
+    ]);
+    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}`, `size-font-${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.stepOption !== 'both',
+        [`size-height-${size}`]: true,
+        [`${classPrefix}-form-input-wrap__${classRoot}-right`]: !isRow,
+    });
+    const formItemProps = {
+        ...props,
+        validateErrorMsg,
+        validateState,
+        readOnly,
+        readValue: `${showValue}${getPercentUnit(props.format)}`,
+        disabled,
+        classRoot,
+        inputId,
+        layout: props.layout,
+        testId: 'input-number',
+        className: classNames(props.className, root, {
+            [`${root}--row`]: isRow,
+        }),
+    };
+    const inputGroupProps = {
+        before,
+        after,
+        className: inputGroupCls,
+    };
+    const editDisabled = useMemo(() => {
+        const status = props.status || 'edit';
+        return readOnly || disabled || status !== 'edit';
+    }, [readOnly, disabled, props.status]);
+    // 是否可以递增
+    const stepPlusDisabled = useMemo(() => {
+        if (editDisabled)
+            return true;
+        if (!isNumber(realValue) || !isNumber(props.max))
+            return false;
+        return +props.max <= +realValue;
+    }, [editDisabled, realValue, props.max]);
+    // 是否可以递减
+    const stepMinusDisabled = useMemo(() => {
+        if (editDisabled)
+            return true;
+        if (!isNumber(realValue) || !isNumber(props.min))
+            return false;
+        return +props.min >= +realValue;
+    }, [editDisabled, realValue, props.min]);
+    /**
+     * 监听非输入引起的value变化，比如调用 setValue, clearValue
+     */
+    const updateValueByListen = () => {
+        if (valueRef.current === value) {
+            setIsInit(false);
+            return;
+        }
+        if (!isInit) {
+            setRealValue(value);
+            setShowValue(getShowValue(`${value}`, props.format));
+            valueRef.current = value;
+        }
+        // 初始化时同步真实值到表单
+        if (isNumber(realValue) && isInit) {
+            changeForm(realValue);
+        }
+        setIsInit(false);
+    };
+    useEffect(() => {
+        updateValueByListen();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    /**
+     * 显示值变化
+     * @param e
+     */
+    const onChange = (e) => {
+        const value = typeof e === 'string' ? e : e.target.value;
+        setShowValue(value);
+        onRealChange(e, '', { needSetData: false, value });
+    };
+    /**
+     * 真实值变化
+     * @param e
+     * @param type
+     * @returns
+     */
+    const onRealChange = (e, type = '', { needSetData = true, value = '' } = {}) => {
+        var _a, _b, _c, _d;
+        if (editDisabled)
+            return realValue;
+        if (['plus', 'minus'].includes(type)) {
+            if (!isNumber(props.step) ||
+                (type === 'plus' && stepPlusDisabled) ||
+                (type === 'minus' && stepMinusDisabled)) {
+                return Number(value || showValue);
+            }
+        }
+        const toShow = getShowValue(filterDigit(value || showValue), type);
+        const toReal = getRealValue(toShow);
+        if (needSetData) {
+            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 });
+        }
+        else {
+            (_d = (_c = props.events) === null || _c === void 0 ? void 0 : _c.input) === null || _d === void 0 ? void 0 : _d.call(_c, { 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);
+    };
+    useSetWidgetApi(() => ({
+        ...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,
+    ], ref);
+    /**
+     * 获取后缀显示信息
+     * @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;

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

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

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import type { DataType, EventsType } from '../../../configs/components/wd-input';
+/**
+ * 标准化：电话输入组件
+ */
+export declare const WdInputPhone: React.ForwardRefExoticComponent<CommonPropsType & {
+    events: {
+        [x: string]: ((eventDetail: {
+            value: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            value: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            value: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            value: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            originValue: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            type: string;
+        }, ...args: unknown[]) => unknown);
+    };
+} & {
+    size?: string;
+    label?: string;
+    type?: string;
+    name?: string;
+    extra?: string;
+    required?: boolean;
+    maxLength?: number;
+    template?: string;
+    clearable?: boolean;
+    labelVisible?: boolean;
+    requiredFlag?: boolean;
+    requiredMsg?: string;
+    layout?: string;
+    placeholder?: string;
+    focus?: boolean;
+    password?: boolean;
+    rules?: {
+        format: string;
+        pattern: string;
+        message: string;
+    }[];
+    isNickNameType?: boolean;
+    counterVisible?: boolean;
+    before?: string;
+    after?: string;
+    prefixType?: string;
+    prefixIcon?: string;
+    prefixSrc?: string;
+    suffixType?: string;
+    suffixIcon?: string;
+    suffixSrc?: string;
+    labelWidth?: string;
+    borderedH5?: boolean;
+    borderedPc?: boolean;
+    inputValue?: string;
+    labelAlign?: string;
+    labelWrap?: boolean;
+    labelTips?: string;
+    cursorSpacing?: number;
+    isUnionValue?: boolean;
+    status?: string;
+    isConvert?: boolean;
+} & React.RefAttributes<any>>;
+export type WdInputPhoneProps = CommonPropsType & EventsType & DataType;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useConfig } from '../../utils/config-context';
+import { WdInput } from '../wd-input';
+const rules = [{ format: 'mobile', message: '手机校验失败' }];
+/**
+ * 标准化：电话输入组件
+ */
+export const WdInputPhone = forwardRef(function WdInputPhone(props, ref) {
+    const { classPrefix } = useConfig();
+    const wrapCls = `${classPrefix}-form-input-number-wrap `;
+    const pattern = /^[()\d\s+\-ext]{0,20}$/;
+    return (_jsx(WdInput, { ...props, inputPattern: pattern, maxLength: 20, wrapClassName: wrapCls, classRoot: "input-phone", rules: rules, ref: ref }));
+});

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

@@ -0,0 +1,4 @@
+import { WdInputUrl } from './wd-input-url';
+export { WdInputUrl } from './wd-input-url';
+export type { WdInputUrlProps } from './wd-input-url';
+export default WdInputUrl;

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

@@ -0,0 +1,3 @@
+import { WdInputUrl } from './wd-input-url';
+export { WdInputUrl } from './wd-input-url';
+export default WdInputUrl;

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import type { DataType, EventsType } from '../../../configs/components/wd-input-url';
+/**
+ * 标准化：URL输入组件
+ */
+export declare const WdInputUrl: React.ForwardRefExoticComponent<CommonPropsType & {
+    events: {
+        [x: string]: ((eventDetail: {
+            value: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            value: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            value: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            value: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            originValue: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            type: string;
+        }, ...args: unknown[]) => unknown);
+    };
+} & {
+    size?: string;
+    label?: string;
+    name?: string;
+    extra?: string;
+    required?: boolean;
+    maxLength?: number;
+    template?: string;
+    clearable?: boolean;
+    labelVisible?: boolean;
+    requiredFlag?: boolean;
+    requiredMsg?: string;
+    layout?: string;
+    placeholder?: string;
+    focus?: boolean;
+    counterVisible?: boolean;
+    before?: string;
+    after?: string;
+    prefixType?: string;
+    prefixIcon?: string;
+    prefixSrc?: string;
+    suffixType?: string;
+    suffixIcon?: string;
+    suffixSrc?: string;
+    labelWidth?: string;
+    borderedH5?: boolean;
+    borderedPc?: boolean;
+    inputValue?: string;
+    labelAlign?: string;
+    labelWrap?: boolean;
+    labelTips?: string;
+    cursorSpacing?: number;
+    isUnionValue?: boolean;
+    status?: string;
+    isConvert?: boolean;
+} & React.RefAttributes<any>>;
+export type WdInputUrlProps = CommonPropsType & EventsType & DataType;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useConfig } from '../../utils/config-context';
+import { WdInput } from '../wd-input';
+const rules = [{ format: 'url', message: 'url校验失败' }];
+/**
+ * 标准化：URL输入组件
+ */
+export const WdInputUrl = forwardRef(function WdInputUrl(props, ref) {
+    const { classPrefix } = useConfig();
+    const wrapCls = `${classPrefix}-form-input-url-wrap`;
+    return (_jsx(WdInput, { ...props, ref: ref, classRoot: "input-url", wrapClassName: wrapCls, rules: rules }));
+});

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

@@ -0,0 +1,3 @@
+import { WdInputWrap } from './wd-input-wrap';
+export { WdInputWrap, type WdInputWrapProps } from './wd-input-wrap';
+export default WdInputWrap;

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

@@ -0,0 +1,3 @@
+import { WdInputWrap } from './wd-input-wrap';
+export { WdInputWrap } from './wd-input-wrap';
+export default WdInputWrap;

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { CommonPropsType } from '../../types';
+export declare const WdInputWrap: ({ className, children, before, after, ...args }: WdInputWrapProps) => JSX.Element;
+export interface WdInputWrapProps extends CommonPropsType {
+    before?: React.ReactNode | undefined;
+    after?: React.ReactNode | undefined;
+    [key: string]: any;
+}

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+// import { WdIcon } from '../index';
+export const WdInputWrap = ({ className, children, before, after, ...args }) => {
+    // 兼容旧版组件的属性值
+    const { classPrefix } = useConfig();
+    const compClassName = `${classPrefix}-form-input-wrap `;
+    const classList = [compClassName];
+    classList.push(className);
+    const InputWrap = React.useRef(null);
+    return (_jsxs("div", { className: classNames(...classList), ref: InputWrap, onFocus: () => {
+            InputWrap.current.classList.add('is-focused');
+        }, onBlur: () => {
+            InputWrap.current.classList.remove('is-focused');
+        }, ...args, children: [before && (_jsx("div", { className: `${classPrefix}-form-input-wrap__before`, children: before })), children && (_jsx("div", { className: `${classPrefix}-form-input-wrap__content`, children: children })), after && (_jsx("div", { className: `${classPrefix}-form-input-wrap__after`, children: after }))] }));
+};

package/dist/web/components/wd-layout/index.css

@@ -0,0 +1,3 @@
+.wd-layout__body:has(> ._wa-comp-container-empty-children) {
+  flex-grow: 1;
+}

package/dist/web/components/wd-layout/index.d.ts

@@ -0,0 +1,3 @@
+import { WdLayout } from './wd-layout';
+export { WdLayout, type WdLayoutProps } from './wd-layout';
+export default WdLayout;

package/dist/web/components/wd-layout/index.js

@@ -0,0 +1,3 @@
+import { WdLayout } from './wd-layout';
+export { WdLayout } from './wd-layout';
+export default WdLayout;

package/dist/web/components/wd-layout/style.d.ts

@@ -0,0 +1 @@
+import './index.css';

package/dist/web/components/wd-layout/style.js

@@ -0,0 +1 @@
+import './index.css';