@cloudbase/weda-ui 3.5.3 → 3.6.0

package/dist/web/components/wd-tag/tag-item.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface TagItemProps extends React.HTMLAttributes<any> {
+    label?: string;
+    size?: string;
+    disabled?: boolean;
+    checked?: boolean;
+    prefixType?: string;
+    prefixIcon?: string;
+    prefixSrc?: string;
+    suffixType?: string;
+    suffixIcon?: string;
+    suffixSrc?: string;
+    tagStyleType?: string;
+    tagStyleColor?: string;
+    tagStyleRadius?: string;
+    tagStyleWidth?: string;
+}
+/**
+ * 单个标签展示组件
+ */
+export declare function TagItem(props: TagItemProps): JSX.Element;

package/dist/web/components/wd-tag/tag-item.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+import { WD_TAG_STYLE_TYPE } from '../../../enum';
+import { convertLegacyEnum } from '../../utils/tool';
+import { convertPx, convertIconSize } from '../../utils/hooks/useFormLegacy';
+import { WdIcon } from '../wd-icon';
+import { colorToRgba, TAG_BG_ALPHA } from '../../utils/color';
+import { TAG_STYLE_TYPE } from '../../utils/constant';
+/**
+ * 单个标签展示组件
+ */
+export function TagItem(props) {
+    const { label, size, disabled, checked, prefixType, prefixIcon, prefixSrc, suffixType, suffixIcon, suffixSrc, tagStyleType: _tagStyleType, tagStyleColor, tagStyleRadius: _tagStyleRadius, tagStyleWidth: _tagStyleWidth, style: _style = {}, className, ...rest } = props;
+    const { classPrefix } = useConfig();
+    const tagStyleType = convertLegacyEnum(_tagStyleType, WD_TAG_STYLE_TYPE);
+    const tagStyleTypeToCls = TAG_STYLE_TYPE[tagStyleType] || tagStyleType;
+    const tagStyleRadius = convertPx(_tagStyleRadius);
+    const tagStyleWidth = convertPx(_tagStyleWidth);
+    const iconSize = convertIconSize(size);
+    const cls = classNames(className, `${classPrefix}-tag-item`, {
+        [`${classPrefix}-tag--${size}`]: !!size,
+        [`${classPrefix}-tag--${tagStyleTypeToCls}`]: !!tagStyleTypeToCls,
+        'is-disabled': disabled,
+        'is-selected': checked,
+        'is-hover': !(disabled || checked),
+    });
+    // 根据类型获取值，含对勾样式
+    const getItemStyle = () => {
+        const style = { ..._style };
+        const boardStyle = {};
+        const boardPureStyle = {};
+        const tickStyle = {};
+        const hasTick = checked &&
+            ['lightTick', 'darkTick', 'outlineTick'].includes(tagStyleType);
+        let color, backgroundColor, borderColor, tickColor, tickBg;
+        if (checked) {
+            switch (tagStyleType) {
+                case 'light':
+                case 'lightTick':
+                    color = tagStyleColor;
+                    backgroundColor = colorToRgba(tagStyleColor, TAG_BG_ALPHA);
+                    tickColor = '#FFFFFF';
+                    tickBg = tagStyleColor;
+                    break;
+                case 'dark':
+                case 'darkTick':
+                    backgroundColor = tagStyleColor;
+                    tickColor = tagStyleColor;
+                    tickBg = colorToRgba(tagStyleColor, TAG_BG_ALPHA);
+                    break;
+                case 'outline':
+                case 'outlineTick':
+                    color = tagStyleColor;
+                    borderColor = tagStyleColor;
+                    tickColor = '#FFFFFF';
+                    tickBg = tagStyleColor;
+                    break;
+            }
+        }
+        color && (style.color = color);
+        backgroundColor && (style.backgroundColor = backgroundColor);
+        borderColor && (style.borderColor = borderColor);
+        tagStyleRadius && (style.borderRadius = tagStyleRadius);
+        tagStyleWidth && (style.width = tagStyleWidth);
+        tickBg && (boardStyle.borderRightColor = tickBg);
+        tagStyleRadius && (boardStyle.borderBottomRightRadius = tagStyleRadius);
+        tagStyleRadius && (boardPureStyle.borderBottomRightRadius = tagStyleRadius);
+        if (tickColor) {
+            tickStyle.borderLeftColor = tickColor;
+            tickStyle.borderBottomColor = tickColor;
+        }
+        return { style, hasTick, boardStyle, boardPureStyle, tickStyle };
+    };
+    const { style, hasTick, boardStyle, boardPureStyle, tickStyle } = getItemStyle();
+    return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    _jsxs("span", { ...rest, className: cls, style: style, title: label, children: [prefixType && (_jsx(WdIcon, { size: iconSize, name: prefixIcon, type: prefixType, src: prefixSrc })), _jsx("span", { className: `${classPrefix}-tag__text`, children: label }), suffixType && (_jsx(WdIcon, { size: iconSize, name: suffixIcon, type: suffixType, src: suffixSrc })), hasTick && (_jsxs(_Fragment, { children: [_jsx("div", { className: `${classPrefix}-tag__tick--pure`, style: boardPureStyle }), _jsx("div", { className: `${classPrefix}-tag__tick`, style: boardStyle, children: _jsx("div", { className: `${classPrefix}-tag__tick-tick`, style: tickStyle }) })] }))] }));
+}

package/dist/web/components/wd-tag/wd-tag-select.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { DataType } from '../../../configs/components/wd-tag-select';
+import type { CommonPropsType } from '../../types';
+/**
+ * 标签选择组件
+ */
+export declare const WdTagSelect: React.ForwardRefExoticComponent<WdTagSelectProps & React.RefAttributes<any>>;
+export interface WdTagSelectProps extends CommonPropsType, DataType {
+    classRoot?: string;
+}

package/dist/web/components/wd-tag/wd-tag-select.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { WdFormItem } from '../wd-form-item';
+import { useFormInputTrait } from '../../components/form-input-hooks';
+import isEqual from '../../utils/isObjectEqual';
+import { emptyArray, emptyObject } from '../../utils/constant';
+import { WdTag } from './wd-tag';
+import { useSetWidgetApi } from '../../utils/widget-api/use-set-widget-api';
+import { useDelayEvents } from '../../utils/hooks/use-delay-events';
+import { useSelected } from '../../utils/hooks/use-selected';
+import { X_RUNTIME_DEFAULT } from '../../../configs/type-utils/x-runtime-default';
+/**
+ * 标签选择组件
+ */
+export const WdTagSelect = forwardRef(function WdTagSelect(props, ref) {
+    const { classRoot = 'tag-select', range = emptyArray, checkType = X_RUNTIME_DEFAULT.checkType, events = emptyObject, className, id, style, ...rest } = props;
+    const [innerHandle, setInnerHandle] = useState({});
+    const traitProps = { ...props, setInnerHandle, inputRef: ref };
+    const trait = useFormInputTrait(traitProps);
+    const { value, onChange, disabled } = trait;
+    const multiple = checkType !== 'radio';
+    const { options, selectedItem, selectedLabel } = useSelected({
+        range,
+        value,
+        multiple,
+    });
+    const formItemProps = {
+        ...props,
+        ...trait,
+        className,
+        id,
+        style,
+        classRoot,
+        readValue: selectedLabel,
+    };
+    const delayEvents = useDelayEvents(events);
+    // 区分单多选，需在 range 范围内
+    const handleChange = (e) => {
+        var _a;
+        const item = e.item;
+        if (disabled || item.disabled)
+            return;
+        const newValue = multiple
+            ? getMultipleValue(value, item.value)
+            : getSingleValue(value, item.value);
+        onChange(newValue);
+        (_a = delayEvents.change) === null || _a === void 0 ? void 0 : _a.call(delayEvents, { value: newValue });
+    };
+    // 单选变化值
+    const getSingleValue = (value, val) => {
+        const lastChecked = isEqual(value, val);
+        return lastChecked ? null : val;
+    };
+    // 多选变化值
+    const getMultipleValue = (value, val) => {
+        let newValue = Array.isArray(value) ? [].concat(value) : [];
+        const lastChecked = newValue.some((d) => isEqual(d, val));
+        if (lastChecked) {
+            newValue = newValue.filter((d) => !isEqual(d, val));
+        }
+        else {
+            newValue.push(val);
+        }
+        return newValue;
+    };
+    useSetWidgetApi(() => ({
+        ...innerHandle,
+        selectedLabel,
+        item: selectedItem,
+        range: options,
+        value,
+    }), [innerHandle, selectedLabel, selectedItem, options, value], ref);
+    return (_jsx(WdFormItem, { ...formItemProps, children: _jsx(WdTag, { ...rest, range: options, isFormField: true, disabled: disabled, value: value, multiple: multiple, events: { click: handleChange } }) }));
+});

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { DataType } from '../../../configs/components/wd-tag';
+import type { CommonPropsType } from '../../types';
+/**
+ * 标签展示组件
+ */
+export declare const WdTag: React.ForwardRefExoticComponent<WdTagProps & React.RefAttributes<any>>;
+export interface WdTagProps extends CommonPropsType, DataType {
+    tagStyleColor?: string;
+    tagStyleWidth?: any;
+    isFormField?: boolean;
+    disabled?: boolean;
+    value?: any;
+    multiple?: boolean;
+    colors?: string[];
+}

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

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { forwardRef, useMemo, useImperativeHandle } from 'react';
+import { emptyArray, emptyObject, TAG_GAP } from '../../utils/constant';
+import { COLORS } from '../../utils/color';
+import { useConfig } from '../../utils/config-context';
+import classNames from '../../utils/classnames';
+import { TagItem } from './tag-item';
+import { convertLegacyEnum, isObj } from '../../utils/tool';
+import isEqual from '../../utils/isObjectEqual';
+import { WD_TAG_DIRECTION, WD_INPUT_SIZE } from '../../../enum';
+import { usePlatform } from '../../utils/platform';
+import { convertPx } from '../../utils/hooks/useFormLegacy';
+import { X_RUNTIME_DEFAULT } from '../../../configs/type-utils/x-runtime-default';
+/**
+ * 标签展示组件
+ */
+export const WdTag = forwardRef(function WdTag(props, ref) {
+    const { size: _size = X_RUNTIME_DEFAULT.size, range: _range = emptyArray, direction: _direction = X_RUNTIME_DEFAULT.direction, tagStyleType = X_RUNTIME_DEFAULT.tagStyleType, tagStyleSpace = X_RUNTIME_DEFAULT.tagStyleSpace, tagStyleColor = X_RUNTIME_DEFAULT.tagStyleColor, tagSameColor = X_RUNTIME_DEFAULT.tagSameColor, tagStyleRadius, tagStyleWidthType = X_RUNTIME_DEFAULT.tagStyleWidthType, tagStyleWidthCols, tagStyleWidth: _tagStyleWidth, events = emptyObject, className, id, style, colors = COLORS, 
+    // 以下为表单属性
+    isFormField = false, disabled, value = emptyArray, multiple = true, } = props;
+    const { classPrefix } = useConfig();
+    const platform = usePlatform();
+    const range = useMemo(() => {
+        const list = Array.isArray(_range) ? _range : [];
+        return list.filter((item) => isObj(item));
+    }, [_range]);
+    // 在 range 上加属性，避免污染原始对象
+    const rangeExtra = useMemo(() => {
+        // 1、加禁用
+        const getDisabled = (item) => {
+            if (!isFormField)
+                return false;
+            return disabled || item.disabled;
+        };
+        // 2、加选中
+        const getChecked = (item) => {
+            if (!isFormField)
+                return true;
+            if (multiple) {
+                return (Array.isArray(value) && value.some((d) => isEqual(d, item.value)));
+            }
+            return isEqual(value, item.value);
+        };
+        // 3、加自定义颜色
+        const colorList = [...colors];
+        const colorMap = new Map();
+        const getColor = (item) => {
+            if (!isFormField) {
+                if (tagSameColor && colorMap.has(item.value))
+                    return colorMap.get(item.value);
+                let color = item.color;
+                if ([undefined, 'auto'].includes(color)) {
+                    color = colorList.shift() || tagStyleColor;
+                }
+                !colorMap.has(item.value) && colorMap.set(item.value, color);
+                return color;
+            }
+            return tagStyleColor;
+        };
+        return range.map((item) => ({
+            ...item,
+            disabled: getDisabled(item),
+            checked: getChecked(item),
+            color: getColor(item),
+        }));
+    }, [
+        range,
+        disabled,
+        isFormField,
+        multiple,
+        value,
+        tagStyleColor,
+        colors,
+        tagSameColor,
+    ]);
+    const isFixed = platform === 'h5' && tagStyleWidthType === 'fixed';
+    const tagSize = useMemo(() => {
+        return convertLegacyEnum(_size, WD_INPUT_SIZE, 'md');
+    }, [_size]);
+    const direction = convertLegacyEnum(_direction, WD_TAG_DIRECTION);
+    const tagCls = classNames(className, `${classPrefix}-tag--${direction}`, `${classPrefix}-tag-root`, `${classPrefix}-${platform}-tag-root`, {
+        [`${classPrefix}-tag--hundred`]: isFixed,
+        [`${classPrefix}-tag--fixed`]: isFixed,
+    });
+    const gap = TAG_GAP[tagStyleSpace] || convertPx(tagStyleSpace);
+    const tagStyle = Object.assign({ gap }, style);
+    const tagStyleWidth = useMemo(() => {
+        if (isFixed) {
+            const gapNew = gap !== null && gap !== void 0 ? gap : '0px';
+            const count = typeof tagStyleWidthCols === 'number' && tagStyleWidthCols > 1
+                ? tagStyleWidthCols
+                : 1;
+            return `calc((100% - ${gapNew} * ${count - 1}) / ${count})`;
+        }
+        return _tagStyleWidth;
+    }, [_tagStyleWidth, tagStyleWidthCols, gap, isFixed]);
+    useImperativeHandle(ref, () => ({ range }), [range]);
+    // 表单点击
+    const handleClick = (item) => {
+        var _a;
+        (_a = events === null || events === void 0 ? void 0 : events.click) === null || _a === void 0 ? void 0 : _a.call(events, { item });
+    };
+    return (_jsx("div", { className: tagCls, id: id, style: tagStyle, children: range.map((item, i) => {
+            var _a;
+            return (_createElement(TagItem, { ...item, key: `${item.value}${i}`, label: (_a = item.label) !== null && _a !== void 0 ? _a : item.value, size: tagSize, tagStyleType: tagStyleType, tagStyleRadius: tagStyleRadius, tagStyleWidth: tagStyleWidth, tagStyleColor: rangeExtra[i].color, disabled: rangeExtra[i].disabled, checked: rangeExtra[i].checked, onClick: () => handleClick(item) }));
+        }) }));
+});

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

@@ -6,6 +6,6 @@ import '../style';
 export declare const WdText: React.ForwardRefExoticComponent<WdTextProps & React.RefAttributes<unknown>>;
 export interface WdTextProps extends CommonPropsType, Except<DataType, 'level'> {
     level?: DataType['level'];
-    contenteditable: HTMLParagraphElement['contentEditable'];
+    contenteditable?: HTMLParagraphElement['contentEditable'];
     [handlers: `on${string}`]: unknownFunction;
 }

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

@@ -7,7 +7,7 @@ import { convertLegacyProps } from './convert-legacy-props';
 import { convertLegacyEnum } from '../../utils/tool';
 import { WD_TEXT_LEVEL, WD_TEXT_MAX_LINES } from '../../../enum';
 import '../style';
-export const WdText = forwardRef(function WdText({ className, style, id, level: _level = 'body-default', text, overflow = false, maxLines: _maxLines, space = true, tips = true, userSelect = false, events, contenteditable, onInput, onBlur, ...props }, ref) {
+export const WdText = forwardRef(function WdText({ className, style, id, level: _level = 'body-default', text, overflow = false, maxLines: _maxLines, space = true, tips = true, userSelect = false, events, inheritColor = false, contenteditable, onInput, onBlur, ...props }, ref) {
     const platform = usePlatform();
     // 兼容旧版组件的属性值
     let level = convertLegacyProps('level', String(_level)) || _level;
@@ -24,6 +24,9 @@ export const WdText = forwardRef(function WdText({ className, style, id, level:
         'title-4': `${compClassName}-headline-sm`,
         'title-5': `${compClassName}-title-xl`,
         'title-6': `${compClassName}-title-lg`,
+        'title-7': `${compClassName}-title-md`,
+        'title-8': `${compClassName}-title-sm`,
+        'title-9': `${compClassName}-title-xs`,
         'body-sm': `${compClassName}-body-sm`,
         'body-md': `${compClassName}-body-md`,
         'body-lg': `${compClassName}-body-lg`,
@@ -42,6 +45,8 @@ export const WdText = forwardRef(function WdText({ className, style, id, level:
         [`${classPrefix}-g-text-ellipsis-${maxLines}`]: overflow,
         // 是否支持空格
         [`${classPrefix}-g-white-space-pre-wrap`]: space,
+        // 是否继承父级颜色
+        [`${compClassName}__inherit-color`]: inheritColor,
         [platformCss]: true,
     };
     const maxLevel = 10;
@@ -94,6 +99,9 @@ export const WdText = forwardRef(function WdText({ className, style, id, level:
                 //@ts-expect-error contentEditable type def sucks
                 contentEditable: contenteditable, onInput: onInput, onBlur: onBlur, title: tips ? textToString(text) : '', onClick: (e) => events.tap({}, { originEvent: e }), ...propsStartWithOn, children: textToString(text) }));
         case 'title-6':
+        case 'title-7':
+        case 'title-8':
+        case 'title-9':
             return (_jsx("h6", { className: classNames(classes, className), style: inlineStyle, id: id, 
                 //@ts-expect-error contentEditable type def sucks
                 contentEditable: contenteditable, onInput: onInput, onBlur: onBlur, title: tips ? textToString(text) : '', onClick: (e) => events.tap({}, { originEvent: e }), ...propsStartWithOn, children: textToString(text) }));

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

@@ -1,23 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useRef, useState, useMemo, } from 'react';
+import { forwardRef, useImperativeHandle, useRef, useState, useMemo, useEffect, } from 'react';
 import classNames from '../../utils/classnames';
 import { useConfig } from '../../utils/config-context';
 import { WdFormItem } from '../wd-form-item';
-import { FORM_MAX_LENGTH } from '../../utils/constant';
 import { useFormInputTrait } from '../form-input-hooks';
 import { filterPropsWithOn, getUuid } from '../../utils/tool';
 import { useSize } from '../../utils/hooks/useFormLegacy';
-import { usePlatform } from '../../utils/platform';
+import { X_RUNTIME_DEFAULT } from '../../../configs/type-utils/x-runtime-default';
 /**
  * 标准化：多行输入组件
  */
 export const WdTextarea = forwardRef(function WdTextarea(props, ref) {
-    const { name, placeholder = '请输入', counterVisible = true, focus = false, maxLength = FORM_MAX_LENGTH, events, block: _block, classRoot = 'textarea', label, required, } = props;
+    var _a;
+    const { name, placeholder, counterVisible = true, focus = X_RUNTIME_DEFAULT.focus, maxLength = X_RUNTIME_DEFAULT.maxLength, events, classRoot = 'textarea', label, required, autoHeight = X_RUNTIME_DEFAULT.autoHeight, } = props;
     /** 兼容从 Form 获取属性，必须引入，自动挂载组件方法 */
     const [innerHandle, setInnerHandle] = useState({});
     const traitProps = { ...props, setInnerHandle, inputRef: ref };
-    const { value, onChange: onChangeForm, disabled, readOnly, validateErrorMsg, validateState, visible, layout, } = useFormInputTrait(traitProps);
-    const block = usePlatform() === 'h5' ? true : _block;
+    const { value, onChange: onChangeForm, disabled, readOnly, validateErrorMsg, validateState, visible, } = useFormInputTrait(traitProps);
+    const zhRef = useRef(false); // 判断是否输入中文
+    const [zhValue, setZhValue] = useState(value); // 中文值，不影响表单
     const { classPrefix } = useConfig();
     const startWithOnProps = useMemo(() => filterPropsWithOn(props), [props]);
     const inputId = useMemo(() => getUuid(), []);
@@ -29,17 +30,38 @@ export const WdTextarea = forwardRef(function WdTextarea(props, ref) {
     const inputWrap = `${classPrefix}-form-input-wrap`;
     const textareaWrap = `${classPrefix}-form-textarea-wrap`;
     const cls = classNames(inputWrap, textareaWrap, `${root}-${classRoot}`, `size-width-${size}`, `size-font-${size}`, {
-        'size-width-hundred': block,
+        'size-width-hundred': true,
         'is-disabled': disabled,
         'textarea-restriction': counterVisible,
     });
     const countCls = `${textareaWrap}__label ${root}-${classRoot}__count-text`;
+    const displayValue = (_a = (zhRef.current ? zhValue : value)) !== null && _a !== void 0 ? _a : '';
+    // 输入自动滚动
+    const autoScroll = function () {
+        if (!autoHeight || !textareaRef.current)
+            return;
+        textareaRef.current.style.height = 'auto';
+        if (textareaRef.current.scrollHeight >= textareaRef.current.offsetHeight) {
+            textareaRef.current.style.height =
+                textareaRef.current.scrollHeight + 'px';
+        }
+    };
+    useEffect(() => {
+        autoScroll();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [autoHeight]);
     /** 内部事件 */
     const onChange = function (e) {
         var _a;
         const text = typeof e === 'string' ? e : e.target.value;
-        onChangeForm(text);
-        (_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: text }, { originEvent: e });
+        if (zhRef.current) {
+            setZhValue(text);
+        }
+        else {
+            onChangeForm(text);
+            (_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: text }, { originEvent: e });
+            autoScroll();
+        }
     };
     const onFocus = function (e) {
         var _a;
@@ -49,6 +71,13 @@ export const WdTextarea = forwardRef(function WdTextarea(props, ref) {
         var _a;
         (_a = events.blur) === null || _a === void 0 ? void 0 : _a.call(events, { value: e.target.value }, { originEvent: e });
     };
+    const handleZhStart = () => {
+        zhRef.current = true;
+    };
+    const handleZhEnd = (e) => {
+        zhRef.current = false;
+        onChange(e);
+    };
     /** widgets */
     useImperativeHandle(ref, () => ({
         ...innerHandle,
@@ -60,5 +89,5 @@ export const WdTextarea = forwardRef(function WdTextarea(props, ref) {
         disabled,
         readOnly,
     }), [innerHandle, name, value, label, required, visible, disabled, readOnly]);
-    return (visible && (_jsx(WdFormItem, { ...props, validateErrorMsg: validateErrorMsg, validateState: validateState, readOnly: readOnly, disabled: disabled, readValue: value, classRoot: classRoot, inputId: inputId, layout: layout, children: _jsxs("div", { className: cls, ref: wrapRef, onFocus: () => wrapRef.current.classList.add('is-focused'), onBlur: () => wrapRef.current.classList.remove('is-focused'), children: [_jsx("textarea", { id: inputId, ref: textareaRef, rows: 2, placeholder: placeholder, name: name, value: value !== null && value !== void 0 ? value : '', maxLength: maxLength, autoFocus: focus, disabled: disabled, readOnly: readOnly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, ...startWithOnProps }), counterVisible && (_jsxs("label", { className: countCls, children: [counter, "/", maxLength] }))] }) })));
+    return (visible && (_jsx(WdFormItem, { ...props, validateErrorMsg: validateErrorMsg, validateState: validateState, readOnly: readOnly, disabled: disabled, readValue: value, classRoot: classRoot, inputId: inputId, layout: props.layout, children: _jsxs("div", { className: cls, ref: wrapRef, onFocus: () => wrapRef.current.classList.add('is-focused'), onBlur: () => wrapRef.current.classList.remove('is-focused'), children: [_jsx("textarea", { id: inputId, ref: textareaRef, rows: 2, placeholder: placeholder, name: name, value: displayValue, maxLength: maxLength, autoFocus: focus, disabled: disabled, readOnly: readOnly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onCompositionStart: handleZhStart, onCompositionEnd: handleZhEnd, ...startWithOnProps }), counterVisible && (_jsxs("label", { className: countCls, children: [counter, "/", maxLength] }))] }) })));
 });

package/dist/web/components/wd-time/h5.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useMemo, useRef } from 'react';
 import { useConfig } from '../../utils/config-context';
-import { convertTimeValue, convertTimeToMoment, useDateFormat, isDateInRange, } from '../../utils/hooks/useFormLegacy';
+import { convertTimeValue, convertTimeToMoment, isDateInRange, convertTimePickerValue, } from '../../utils/hooks/useFormLegacy';
 import { Modal } from '../wd-date/elements/Modal.h5';
 import { TimePicker } from '../wd-date/elements/TimePicker.h5';
 import { useSyncValue } from '../../utils/hooks/useSyncValue';
 import { noop } from '../../utils/constant';
-import { getDayNow } from '../../utils/moment';
 /**
  * 时间组件，h5 端受控
  */
@@ -16,12 +15,12 @@ export function TimeH5(props) {
     const [visible, setVisible] = useState(false);
     const { classPrefix } = useConfig();
     const inputCls = `${classPrefix}-form-select_input`;
-    const format = useDateFormat({ mode });
+    const format = mode === 'second' ? 'HH:mm:ss' : 'HH:mm';
     const start = useMemo(() => { var _a; return (_a = convertTimeToMoment(_start)) === null || _a === void 0 ? void 0 : _a.valueOf(); }, [_start]);
     const end = useMemo(() => { var _a; return (_a = convertTimeToMoment(_end)) === null || _a === void 0 ? void 0 : _a.valueOf(); }, [_end]);
     const valueDisplay = useMemo(() => { var _a; return ((_a = convertTimeToMoment(value)) === null || _a === void 0 ? void 0 : _a.format(format)) || ''; }, [value, format]);
     const pickerMode = mode !== 'second' ? 'datetimeMinute' : '';
-    const pickerValue = useMemo(() => { var _a; return (_a = (convertTimeToMoment(value) || getDayNow(mode))) === null || _a === void 0 ? void 0 : _a.valueOf(); }, [value, mode]);
+    const pickerValue = useMemo(() => convertTimePickerValue(value, start, end, mode), [value, start, end, mode]);
     const pickerValueRef = useRef(pickerValue); // 弹窗中临时值
     const handleOk = () => {
         var _a, _b;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import '../form/select/moment-locale';
 import type { WdTimeProps } from './interface';
 /**
  * 标准化：时间组件

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

@@ -1,31 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { usePlatform } from '../../utils/platform';
 import { WdFormItem, WdInputGroup, WdInputWrap } from '../wd-form-item';
 import { TimePc } from './pc';
 import { TimeH5 } from './h5';
 import { getUuid } from '../../utils/tool';
-import { convertTimeValue, convertTimeToMoment, useDateFormat, MAX_TIME, useFormItemCommonTrait, useHandleClear, } from '../../utils/hooks/useFormLegacy';
+import { convertTimeValue, convertTimeToMoment, useDateFormat, MAX_TIME, useHandleClear, } from '../../utils/hooks/useFormLegacy';
+import { useFormInputTrait } from '../../components/form-input-hooks';
+import '../form/select/moment-locale';
+import { X_RUNTIME_DEFAULT } from '../../../configs/type-utils/x-runtime-default';
 /**
  * 标准化：时间组件
  */
 export const WdTime = React.forwardRef(function WdTime(props, ref) {
-    const { classRoot = 'time', value: _value, start: _start, end: _end, mode, clearable = false, events, } = props;
+    const { classRoot = 'time', value: _value, start: _start, end: _end, mode = X_RUNTIME_DEFAULT._modeInTime, clearable = X_RUNTIME_DEFAULT.clearable, events, } = props;
     const isH5 = usePlatform() === 'h5';
     const inputId = useMemo(() => getUuid(), []);
     const formValue = useMemo(() => convertTimeValue(_value), [_value]);
     const start = useMemo(() => { var _a; return (_a = convertTimeValue(_start)) !== null && _a !== void 0 ? _a : 0; }, [_start]);
     const end = useMemo(() => { var _a; return (_a = convertTimeValue(_end)) !== null && _a !== void 0 ? _a : MAX_TIME; }, [_end]);
     const traitProps = { ...props, value: formValue, inputRef: ref };
-    const trait = useFormItemCommonTrait(traitProps);
-    const { value, onChange, disabled, readOnly, visible, required } = trait;
+    const trait = useFormInputTrait(traitProps);
+    const { value, onChange, disabled, visible } = trait;
     const format = useDateFormat({ mode });
     const readValue = useMemo(() => { var _a; return (_a = convertTimeToMoment(value)) === null || _a === void 0 ? void 0 : _a.format(format); }, [value, format]);
-    const pureChange = (v) => {
+    const pureChange = useCallback((v) => {
         var _a;
         onChange === null || onChange === void 0 ? void 0 : onChange(v);
         (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: v });
-    };
+    }, [onChange, events]);
     const clearProps = useHandleClear({
         onChange: pureChange,
         clearable,
@@ -34,15 +37,13 @@ export const WdTime = React.forwardRef(function WdTime(props, ref) {
     });
     const formItemProps = {
         ...props,
+        ...trait,
         classRoot,
         readValue,
         inputId,
-        readOnly,
-        visible,
-        required,
     };
     const inputGroupProps = { ...props, classRoot };
-    const inputWrapProps = { ...props, classRoot, ...clearProps };
+    const inputWrapProps = { ...props, classRoot, disabled, ...clearProps };
     const timeProps = {
         ...props,
         start,
@@ -50,6 +51,7 @@ export const WdTime = React.forwardRef(function WdTime(props, ref) {
         value,
         disabled,
         inputId,
+        mode,
         onChange: pureChange,
     };
     if (!visible)

package/dist/web/components/wd-top-tab/index.d.ts

@@ -0,0 +1,3 @@
+import { WdTopTab } from './wd-top-tab';
+export { WdTopTab, type WdTopTabProps } from './wd-top-tab';
+export default WdTopTab;

package/dist/web/components/wd-top-tab/index.js

@@ -0,0 +1,3 @@
+import { WdTopTab } from './wd-top-tab';
+export { WdTopTab } from './wd-top-tab';
+export default WdTopTab;

package/dist/web/components/wd-top-tab/wd-top-tab.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-top-tab';
+export interface WdTopTabProps extends CommonPropsType, DataType {
+}
+export declare const WdTopTab: React.ForwardRefExoticComponent<WdTopTabProps & React.RefAttributes<unknown>>;

package/dist/web/components/wd-top-tab/wd-top-tab.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, forwardRef, useImperativeHandle, } from 'react';
+import WdTabs from '../wd-tabs';
+export const WdTopTab = forwardRef(function WdTopTab({ isMultipleSlot = false, selectedValue = '1', ...restProps }, ref) {
+    const [selectedTab, setSelectedTab] = useState(0);
+    const [tabsDatas, setTabsDatas] = useState([]);
+    const updateSelected = (param) => {
+        setSelectedTab(param);
+    };
+    const getIndex = (val) => {
+        setSelectedTab(val);
+    };
+    useImperativeHandle(ref, () => {
+        var _a, _b;
+        return ({
+            selectTab: async (params) => {
+                const { value } = params;
+                const index = restProps.list.findIndex((i) => i.value === value);
+                updateSelected(index);
+            },
+            isMultipleSlot,
+            list: restProps.list,
+            selectedValue: (_b = (_a = restProps === null || restProps === void 0 ? void 0 : restProps.list) === null || _a === void 0 ? void 0 : _a.find((i, index) => index === selectedTab)) === null || _b === void 0 ? void 0 : _b.value,
+        });
+    }, [isMultipleSlot, restProps.list, selectedTab]);
+    useEffect(() => {
+        var _a;
+        const tabsDatas = (_a = restProps.list) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
+            return { ...item, selected: index === selectedTab };
+        });
+        setTabsDatas(tabsDatas);
+    }, [restProps.list, selectedTab]);
+    useEffect(() => {
+        var _a;
+        const index = (_a = restProps.list) === null || _a === void 0 ? void 0 : _a.findIndex((item) => item.value === selectedValue);
+        if (index !== selectedTab) {
+            setSelectedTab(index);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedValue, restProps.list]);
+    return (_jsx(WdTabs, { isMultipleSlot: isMultipleSlot, selectedIndex: selectedTab, tabsDatas: tabsDatas, direction: "horizontal", getIndex: getIndex, ...restProps }));
+});