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

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/convert-legacy-props.d.ts

@@ -0,0 +1,6 @@
+import type { DataType } from '../../../configs/components/wd-text';
+interface IPropsValueMap {
+    level: Record<string, DataType['level']>;
+}
+export declare const convertLegacyProps: (key: keyof IPropsValueMap, prop: any) => string;
+export {};

package/dist/web/components/wd-text/convert-legacy-props.js

@@ -0,0 +1,14 @@
+const PROPS_VALUE_MAP = {
+    level: {
+        '0': 'body-md',
+        '1': 'title-1',
+        '2': 'title-2',
+        '3': 'title-3',
+        '4': 'title-4',
+        '5': 'title-5',
+        '6': 'title-6',
+    },
+};
+export const convertLegacyProps = (key, prop) => {
+    return PROPS_VALUE_MAP[key][prop];
+};

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

@@ -0,0 +1,3 @@
+import { WdText } from './wd-text';
+export { WdText, type WdTextProps } from './wd-text';
+export default WdText;

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { Except } from 'type-fest';
+import type { CommonPropsType, unknownFunction } from '../../types';
+import type { DataType } from '../../../configs/components/wd-text';
+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'];
+    [handlers: `on${string}`]: unknownFunction;
+}

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

@@ -0,0 +1,113 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef, useImperativeHandle } from 'react';
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+import { textToString, usePlatform } from '../../utils/platform';
+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, inheritColor = false, contenteditable, onInput, onBlur, ...props }, ref) {
+    const platform = usePlatform();
+    // 兼容旧版组件的属性值
+    let level = convertLegacyProps('level', String(_level)) || _level;
+    // 枚举转换
+    level = convertLegacyEnum(level, WD_TEXT_LEVEL);
+    const maxLines = convertLegacyEnum(String(_maxLines), WD_TEXT_MAX_LINES);
+    // 样式
+    const { classPrefix } = useConfig();
+    const compClassName = `${classPrefix}-typography`;
+    const levelClass = {
+        'title-1': `${compClassName}-display-lg`,
+        'title-2': `${compClassName}-display-md`,
+        'title-3': `${compClassName}-headline-lg`,
+        '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`,
+    };
+    // 响应式css api
+    const platformCss = `${classPrefix}-${platform}-typography`;
+    const classes = {
+        [compClassName]: true,
+        // size
+        [levelClass[level]]: levelClass[level],
+        // 连续字符会换行，正常英文不会强制换行
+        [`${classPrefix}-g-word-break`]: true,
+        // 是否可选中
+        [`${classPrefix}-g-user-select-none`]: !userSelect,
+        // 超出隐藏多少行
+        [`${classPrefix}-g-text-ellipsis-${maxLines}`]: overflow,
+        // 是否支持空格
+        [`${classPrefix}-g-white-space-pre-wrap`]: space,
+        // 是否继承父级颜色
+        [`${compClassName}__inherit-color`]: inheritColor,
+        [platformCss]: true,
+    };
+    const maxLevel = 10;
+    // 兼容旧的text组件溢出省略
+    const inlineStyle = React.useMemo(() => Number(_maxLines) > maxLevel
+        ? {
+            WebkitLineClamp: _maxLines,
+            ...style,
+        }
+        : { ...style }, [style, _maxLines]);
+    const propsStartWithOn = React.useMemo(() => {
+        return Object.keys(props).reduce((acc, cur) => {
+            if (cur.startsWith('on') || cur === 'data-testid') {
+                acc[cur] = props[cur];
+            }
+            return acc;
+        }, {});
+    }, [props]);
+    // Widget API，挂载组件只读属性和组件方法
+    useImperativeHandle(ref, () => {
+        return {
+            text,
+            level,
+            overflow,
+            maxLines,
+            space,
+            userSelect,
+            tips,
+        };
+    }, [text, level, overflow, maxLines, space, userSelect, tips]);
+    switch (level) {
+        case 'title-1':
+            return (_jsx("h1", { 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) }));
+        case 'title-2':
+            return (_jsx("h2", { 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) }));
+        case 'title-3':
+            return (_jsx("h3", { 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) }));
+        case 'title-4':
+            return (_jsx("h4", { 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) }));
+        case 'title-5':
+            return (_jsx("h5", { 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) }));
+        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) }));
+        default:
+            return (_jsx("p", { 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/calcTextareaHeight.d.ts

@@ -0,0 +1 @@
+export declare function getHeight(id: any): number | "auto";

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

@@ -0,0 +1,45 @@
+const HIDDEN_TEXTAREA_STYLE = `
+  min-height:0 !important;
+  max-height:none !important;
+  height:0 !important;
+  visibility:hidden !important;
+  overflow-y:hidden !important;
+  position:absolute !important;
+  z-index:-1000 !important;
+  top:0 !important;
+  right:0 !important
+`;
+const SIZING_PROPS = [
+    'letter-spacing',
+    'line-height',
+    'padding-top',
+    'padding-bottom',
+    'font-family',
+    'font-weight',
+    'font-size',
+    'font-variant',
+    'text-rendering',
+    'text-transform',
+    'width',
+    'text-indent',
+    'padding-left',
+    'padding-right',
+    'border-width',
+    'box-sizing',
+];
+export function getHeight(id) {
+    const textarea = document.getElementById(id);
+    if (!textarea)
+        return 'auto';
+    const style = window.getComputedStyle(textarea);
+    const value = textarea.value || textarea.placeholder;
+    const sizingStyle = SIZING_PROPS.map((name) => `${name}:${style.getPropertyValue(name)}`).join(';');
+    let hiddenText = document.createElement('textarea');
+    hiddenText.setAttribute('style', `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`);
+    hiddenText.value = value;
+    document.body.appendChild(hiddenText);
+    const height = hiddenText.scrollHeight;
+    document.body.removeChild(hiddenText);
+    hiddenText = null;
+    return height;
+}

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

@@ -0,0 +1,4 @@
+import { WdTextarea, WdTextareaProps } from './wd-textarea';
+export { WdTextarea };
+export type { WdTextareaProps };
+export default WdTextarea;

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-textarea';
+/**
+ * 标准化：多行输入组件
+ */
+export declare const WdTextarea: React.ForwardRefExoticComponent<WdTextareaProps & React.RefAttributes<any>>;
+export interface WdTextareaProps extends CommonPropsType, DataType {
+    classRoot?: string;
+}

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

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { useFormInputTrait } from '../form-input-hooks';
+import { filterPropsWithOn, getUuid } from '../../utils/tool';
+import { useSize } from '../../utils/hooks/useFormLegacy';
+import { X_RUNTIME_DEFAULT } from '../../../configs/type-utils/x-runtime-default';
+import { getHeight } from './calcTextareaHeight';
+/**
+ * 标准化：多行输入组件
+ */
+export const WdTextarea = forwardRef(function WdTextarea(props, ref) {
+    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, } = useFormInputTrait(traitProps);
+    const zhRef = useRef(false); // 判断是否输入中文
+    const [zhValue, setZhValue] = useState(value); // 中文值，不影响表单
+    const { classPrefix } = useConfig();
+    const startWithOnProps = useMemo(() => filterPropsWithOn(props), [props]);
+    const inputId = useMemo(() => getUuid(), []);
+    const size = useSize(props);
+    const textareaRef = useRef(null);
+    const counter = typeof value === 'string' ? value.length : 0;
+    const [isFocus, setIsFocus] = useState(focus);
+    const root = `${classPrefix}-${classRoot}`;
+    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': true,
+        'is-disabled': disabled,
+        'textarea-restriction': counterVisible,
+        'is-focused': isFocus,
+    });
+    const countCls = `${textareaWrap}__label ${root}-${classRoot}__count-text`;
+    const displayValue = (_a = (zhRef.current ? zhValue : value)) !== null && _a !== void 0 ? _a : '';
+    // 输入自动滚动，关闭自动增高，value 变化不应该去改变样式
+    const autoScroll = function (isManual) {
+        if (!textareaRef.current)
+            return;
+        if (!autoHeight) {
+            !isManual && (textareaRef.current.style.height = null);
+        }
+        else {
+            const height = getHeight(inputId);
+            textareaRef.current.style.height = height + 'px';
+        }
+    };
+    useEffect(() => {
+        autoScroll();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [autoHeight]);
+    useEffect(() => {
+        autoScroll(true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    /** 内部事件 */
+    const onChange = function (e) {
+        var _a;
+        const text = typeof e === 'string' ? e : e.target.value;
+        if (zhRef.current) {
+            setZhValue(text);
+        }
+        else {
+            onChangeForm(text);
+            (_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: text }, { originEvent: e });
+        }
+    };
+    const onFocus = function (e) {
+        var _a;
+        setIsFocus(true);
+        (_a = events.focus) === null || _a === void 0 ? void 0 : _a.call(events, { value: e.target.value }, { originEvent: e });
+    };
+    const onBlur = function (e) {
+        var _a;
+        setIsFocus(false);
+        (_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);
+    };
+    const handleKeyDown = (e) => {
+        var _a;
+        if (e.key === 'Enter' && !e.shiftKey) {
+            // 判断输入法是否正在输入中文字符
+            if (!e.target.isComposing) {
+                e.preventDefault();
+                (_a = events.confirm) === null || _a === void 0 ? void 0 : _a.call(events, { value: e.target.value }, { originEvent: e });
+            }
+        }
+    };
+    /** widgets */
+    useImperativeHandle(ref, () => ({
+        ...innerHandle,
+        name,
+        value,
+        label,
+        required,
+        visible,
+        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: props.layout, children: _jsxs("div", { className: cls, 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, onKeyDown: handleKeyDown, onCompositionStart: handleZhStart, onCompositionEnd: handleZhEnd, ...startWithOnProps }), counterVisible && (_jsxs("label", { className: countCls, children: [counter, "/", maxLength] }))] }) })));
+});

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { IPureTime } from './interface';
+/**
+ * 时间组件，h5 端受控
+ */
+export declare function TimeH5(props: IPureTime): JSX.Element;

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

@@ -0,0 +1,47 @@
+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, 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';
+/**
+ * 时间组件，h5 端受控
+ */
+export function TimeH5(props) {
+    const { placeholder, inputId, name, disabled, value: _value, onChange = noop, mode, start: _start, end: _end, } = props;
+    const [value, setValue] = useSyncValue(_value);
+    const [visible, setVisible] = useState(false);
+    const { classPrefix } = useConfig();
+    const inputCls = `${classPrefix}-form-select_input`;
+    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(() => convertTimePickerValue(value, start, end, mode), [value, start, end, mode]);
+    const pickerValueRef = useRef(pickerValue); // 弹窗中临时值
+    const handleOk = () => {
+        var _a, _b;
+        const [inRange, title] = isDateInRange(pickerValueRef.current, start, end, format);
+        if (!inRange) {
+            (_b = (_a = window.app) === null || _a === void 0 ? void 0 : _a.showToast) === null || _b === void 0 ? void 0 : _b.call(_a, { title, icon: 'none' });
+            return;
+        }
+        const value = convertTimeValue(pickerValueRef.current);
+        setValue(value);
+        setVisible(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    };
+    const handleChange = (val) => {
+        pickerValueRef.current = val;
+    };
+    const handleClick = () => {
+        if (disabled)
+            return;
+        pickerValueRef.current = pickerValue;
+        setVisible(true);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("input", { id: inputId, className: inputCls, type: "text", name: name, placeholder: placeholder, autoComplete: "off", disabled: disabled, readOnly: true, value: valueDisplay, onClick: handleClick }), _jsx(Modal, { visible: visible, onClose: () => setVisible(false), onOk: handleOk, children: _jsx(TimePicker, { value: pickerValue, start: start, end: end, mode: pickerMode, onChange: handleChange }) })] }));
+}

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

@@ -0,0 +1,4 @@
+import { WdTime } from './wd-time';
+export { WdTime } from './wd-time';
+export type { WdTimeProps } from './interface';
+export default WdTime;

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

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

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

@@ -0,0 +1,10 @@
+import type { DataType } from '../../../configs/components/wd-time';
+import type { CommonPropsType } from '../../types';
+export interface WdTimeProps extends CommonPropsType, DataType {
+    classRoot?: string;
+}
+export interface IPureTime extends DataType {
+    onChange?: (v: number) => any;
+    disabled?: boolean;
+    inputId?: string;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { IPureTime } from './interface';
+/**
+ * 时间组件，pc 端受控
+ */
+export declare function TimePc(props: IPureTime): JSX.Element;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { TimePicker, ConfigProvider } from 'tea-component';
+import { convertTimeValue, convertTimeToMoment, } from '../../utils/hooks/useFormLegacy';
+import { useConfig } from '../../utils/config-context';
+/**
+ * 时间组件，pc 端受控
+ */
+export function TimePc(props) {
+    const { value: _value, start: _start, end: _end, mode, disabled, placeholder, clearable, onChange, } = props;
+    const { classPrefix } = useConfig();
+    const value = useMemo(() => convertTimeToMoment(_value), [_value]);
+    const start = useMemo(() => convertTimeToMoment(_start), [_start]);
+    const end = useMemo(() => convertTimeToMoment(_end), [_end]);
+    const format = mode === 'second' ? 'HH:mm:ss' : 'HH:mm';
+    const handleChange = (m) => {
+        const time = convertTimeValue(m);
+        onChange === null || onChange === void 0 ? void 0 : onChange(time);
+    };
+    return (_jsx(ConfigProvider, { classPrefix: classPrefix, children: _jsx(TimePicker, { onChange: handleChange, disabled: disabled, placeholder: placeholder, value: value, range: [start, end], format: format, clearable: clearable }) }));
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import '../form/select/moment-locale';
+import type { WdTimeProps } from './interface';
+/**
+ * 标准化：时间组件
+ */
+export declare const WdTime: React.ForwardRefExoticComponent<WdTimeProps & React.RefAttributes<any>>;

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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, 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 = 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 = 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 = 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,
+        disabled,
+        value,
+    });
+    const formItemProps = {
+        ...props,
+        ...trait,
+        classRoot,
+        readValue,
+        inputId,
+    };
+    const inputGroupProps = { ...props, classRoot };
+    const inputWrapProps = { ...props, classRoot, disabled, ...clearProps };
+    const timeProps = {
+        ...props,
+        start,
+        end,
+        value,
+        disabled,
+        inputId,
+        mode,
+        onChange: pureChange,
+    };
+    if (!visible)
+        return null;
+    return (_jsx(WdFormItem, { ...formItemProps, children: _jsx(WdInputGroup, { ...inputGroupProps, children: _jsx(WdInputWrap, { ...inputWrapProps, children: isH5 ? _jsx(TimeH5, { ...timeProps }) : _jsx(TimePc, { ...timeProps }) }) }) }));
+});

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;