@cloudbase/weda-ui 3.5.2 → 3.6.0

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

@@ -58,6 +58,8 @@ export const WdTree = forwardRef(function WdTree(props, ref) {
             expendIcon,
             leafIcon,
             line,
+            checkedNodes: treeInfo === null || treeInfo === void 0 ? void 0 : treeInfo.checkedNodes,
+            expandedNodes: treeInfo === null || treeInfo === void 0 ? void 0 : treeInfo.expandedNodes,
         };
     }, [
         checkable,
@@ -104,7 +106,6 @@ export const WdTree = forwardRef(function WdTree(props, ref) {
      * @param state 改变的状态
      */
     const change = (treeNode, event, state) => {
-        var _a;
         if (treeNode.disabled && event !== 'expand')
             return;
         // 开启多选属性时, 点击节点事件去掉, 变成check事件
@@ -150,9 +151,13 @@ export const WdTree = forwardRef(function WdTree(props, ref) {
                 condition: TREE_INFO_GOT,
             }, props.checkable),
         };
-        (_a = events[eventKey]) === null || _a === void 0 ? void 0 : _a.call(events, info);
-        // events.change?.(info);
         setTreeInfo(info);
+        // 延迟触发event，以便用户能获取组件实例的最新值
+        // eslint-disable-next-line rulesdir/no-timer
+        setTimeout(() => {
+            var _a;
+            (_a = events[eventKey]) === null || _a === void 0 ? void 0 : _a.call(events, { ...info, treeInfo: info });
+        }, 0);
         event !== 'select' && setShowData([...showData]);
     };
     const list = [];
@@ -177,11 +182,14 @@ export const WdTree = forwardRef(function WdTree(props, ref) {
                 // 选中态，加 is-selected
                 className: `${nodeClassName} ${subTree ? '' : `${classPrefix}-tree-node--leaf`} ${selected === item.value && !props.checkable ? 'is-selected' : ''}`, "data-testid": nodeClassName, children: [spaceDom, _jsx("div", { className: `${classPrefix}-tree__switcher`, onClick: () => change(item, 'expand', !item.isExpand), children: subTree && (
                         // 展开/收起的图标
-                        _jsx(WdIcon, { className: `${classPrefix}-tree__switcher-icon`, name: item.isExpand ? 'td:caret-down-small' : 'td:caret-right-small' })) }), _jsxs("div", { className: `${classPrefix}-tree__label`, onClick: () => change(item, 'select'), children: [props.checkable && (_jsx(WdCheckbox, { index: index + count, option: { value: item.value }, isAll: item.checked === 'childChecked', size: "md", disabled: item.disabled, getChangeHandler: () => {
+                        _jsx(WdIcon, { className: `${classPrefix}-tree__switcher-icon`, name: item.isExpand ? 'td:caret-down-small' : 'td:caret-right-small', size: "sm" })) }), _jsxs("div", { className: `${classPrefix}-tree__label`, onClick: () => change(item, 'select'), children: [props.checkable && (_jsx(WdCheckbox, { index: index + count, option: { value: item.value }, isAll: item.checked === 'childChecked', size: "md", disabled: item.disabled, getChangeHandler: () => {
                                     if (item.disabled)
                                         return;
                                     change(item, 'check', item.checked !== 'checked');
-                                }, checkedItemValue: { [item.value]: item.checked === 'checked' }, ...{} })), item.iconShow && (_jsx(WdIcon, { "data-testid": "wd-tree-icon-test", className: `${classPrefix}-tree__label-icon `, name: item.iconShow, src: item.iconShow, type: item.iconShow.startsWith('http') ? 'custom' : 'inner' })), _jsx("label", { className: `${classPrefix}-tree__label-text`, htmlFor: "", style: disableStyle, children: searchKey
+                                }, checkedItemValue: { [item.value]: item.checked === 'checked' }, ...{} })), item.iconShow && (_jsx(WdIcon, { "data-testid": "wd-tree-icon-test", className: `${classPrefix}-tree__label-icon `, name: item.iconShow, src: item.iconShow, type: item.iconShow.startsWith('http') ||
+                                    item.iconShow.startsWith('data:')
+                                    ? 'custom'
+                                    : 'inner', size: "sm" })), _jsx("label", { className: `${classPrefix}-tree__label-text`, htmlFor: "", style: disableStyle, children: searchKey
                                     ? item.label.split(searchKey).map((v, i) => (_jsxs("span", { children: [i !== 0 && (_jsx("span", { className: `${classPrefix}-tree__label-text-search`, children: searchKey })), v] }, i)))
                                     : item.label })] })] }, item.value));
             subTree && item.isExpand && renderNode(subTree, count + STEP);

package/dist/web/components/wd-unified-link/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-unified-link';
+import '../style';
+export declare const WdUnifiedLink: React.ForwardRefExoticComponent<WdUnifiedLinkProps & React.RefAttributes<unknown>>;
+export interface WdUnifiedLinkProps extends CommonPropsType, DataType {
+}
+export default WdUnifiedLink;

package/dist/web/components/wd-unified-link/index.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { ConfigProvider } from 'tea-component';
+import { useConfig } from '../../utils/config-context';
+import { usePlatform, alertErrorMessage } from '../../utils/platform';
+import classNames from '../../utils/classnames';
+import { useSetWidgetApi } from '../../utils/widget-api/use-set-widget-api';
+import '../style';
+export const WdUnifiedLink = forwardRef(function WdUnifiedLink(props, ref) {
+    const { className, id, style, children, url, options, events } = props;
+    const platform = usePlatform();
+    // 样式
+    const { classPrefix } = useConfig();
+    const compClassName = `${classPrefix}-link`;
+    // 类名
+    // 响应式css api
+    const platformCss = `${classPrefix}-${platform}-link`;
+    const classes = {
+        [compClassName]: true,
+        [platformCss]: true,
+    };
+    const isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i);
+    // Widget API，挂载组件只读属性和组件方法
+    useSetWidgetApi(() => ({
+        url,
+        options,
+    }), [url, options], ref);
+    // 方法
+    const onClick = async (e) => {
+        var _a, _b, _c, _d, _e;
+        events.tap && events.tap({}, { originEvent: e });
+        // a 标签直接跳转
+        if (/https?:\/\//.test(url)) {
+            return;
+        }
+        if (!e.defaultPrevented) {
+            e.preventDefault();
+            const URL_REG = /^(weda-page|plugin|miniprogram):\/\/([0-9.\-A-Za-z]+)(?:\/([^?#]*))?(?:\?([^#]*))?$/;
+            const matched = url.match(URL_REG);
+            if (matched) {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const [_, protocol, ...restOpts] = matched;
+                switch (protocol) {
+                    case 'plugin':
+                        alertErrorMessage({
+                            message: '仅支持在小程序端打开插件页面',
+                        });
+                        break;
+                    case 'weda-page': {
+                        const [packageName, pageId, query] = restOpts;
+                        let params = {};
+                        if (query) {
+                            params = query.split('&').reduce((acc, param) => {
+                                const [key, value] = param.split('=');
+                                acc[key] = value;
+                                return acc;
+                            }, {});
+                        }
+                        // 页面参数，如果存在变量绑定，以绑定值为准
+                        if ((_a = props === null || props === void 0 ? void 0 : props.params) === null || _a === void 0 ? void 0 : _a[pageId]) {
+                            params = { ...params, ...(_b = props === null || props === void 0 ? void 0 : props.params) === null || _b === void 0 ? void 0 : _b[pageId] };
+                        }
+                        (_c = window === null || window === void 0 ? void 0 : window.app) === null || _c === void 0 ? void 0 : _c.navigateTo({
+                            pageId,
+                            packageName: packageName === 'main' ? '' : packageName,
+                            mode: options.target === '_blank' ? 'web' : 'weDa',
+                            params,
+                        });
+                        break;
+                    }
+                    case 'miniprogram':
+                        // 打开其他小程序
+                        if (!isMobile) {
+                            alertErrorMessage({
+                                message: '仅支持在移动端打开小程序页面',
+                            });
+                        }
+                        else {
+                            (_d = window === null || window === void 0 ? void 0 : window.app) === null || _d === void 0 ? void 0 : _d.navigateTo({ url, options });
+                        }
+                        break;
+                    default:
+                        (_e = window === null || window === void 0 ? void 0 : window.app) === null || _e === void 0 ? void 0 : _e.navigateTo({ url, options });
+                        break;
+                }
+            }
+        }
+    };
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx("a", { href: /https?:\/\//.test(url) ? url : 'javascript:void(0);', rel: "noopener noreferrer", className: classNames(classes, className), id: id, style: style, onClick: onClick, ...options, children: children }) }));
+});
+export default WdUnifiedLink;

package/dist/web/components/wd-upload-file/_design/wd-upload-file.d.ts

@@ -0,0 +1,7 @@
+import type { CommonPropsType } from '../../../types';
+export declare const WdUploadFile: ({ isReadOnly }: {
+    isReadOnly?: boolean;
+}) => JSX.Element;
+export interface WdUploadFileProps extends CommonPropsType {
+    isReadOnly?: boolean;
+}

package/dist/web/components/wd-upload-file/_design/wd-upload-file.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classNames from '../../../utils/classnames';
+import { useConfig } from '../../../utils/config-context';
+import { WdButton, WdIcon } from '../../index';
+import { WdFormItem } from '../../wd-form-item';
+import { ConfigProvider, Progress } from 'tea-component';
+const Xlsx = '../../../style/components/upload/icons/xlsx.svg';
+const Word = '../../../style/components/upload/icons/word.svg';
+const Txt = '../../../style/components/upload/icons/txt.svg';
+const Download = '../../../style/components/upload/icons/download.svg';
+const FormItemMockData = {
+    classRoot: 'upload',
+    labelVisible: true,
+    label: '文件上传',
+    testId: 'form-upload-file',
+    borderedPc: true,
+    layout: 'horizontal',
+    // layout: 'vertical',
+};
+export const WdUploadFile = ({ isReadOnly = false }) => {
+    const { classPrefix } = useConfig();
+    const compClassName = `${classPrefix}-upload-wrap  ${classPrefix}-upload-file-wrap`;
+    return (_jsx(_Fragment, { children: _jsx(WdFormItem, { ...FormItemMockData, children: _jsxs("div", { className: classNames(compClassName), children: [_jsx(WdButton, { className: `${classPrefix}-upload-btn`, iconType: "text-with-icon", iconPosition: "before", icon: "td:upload", text: "\u70B9\u51FB\u4E0A\u4F20", theme: "secondary", variant: "outline", iconSource: "inner" }), _jsx("p", { className: "wd-form-item__help", children: _jsx("span", { className: "wd-form-item__help-text wd-input__help", children: "\u6700\u591A\u4E0A\u4F2010\u4E2A\u6587\u4EF6\uFF0C\u5355\u4E2A\u6587\u4EF6\u6700\u592710m\uFF0C\u652F\u6301\u683C\u5F0F\u5982\u4E0B\uFF1Apng\u3001jpeg\u3001pdf\u3001doc\u3001xls\u3001zip" }) }), _jsxs("div", { className: `${classPrefix}-upload__control ${classPrefix}-upload__control-file `, children: [_jsxs("div", { className: `${classPrefix}-upload__item-file `, children: [_jsx("div", { className: `${classPrefix}-upload__icon`, children: _jsx(WdIcon, { name: "Txt", size: "md", type: "custom", src: Txt }) }), _jsxs("div", { className: `${classPrefix}-upload__item-control `, children: [_jsxs("div", { className: `${classPrefix}-upload__item-file-control `, children: [_jsx("div", { className: `${classPrefix}-upload__item-file-left `, children: _jsxs("div", { className: `${classPrefix}-upload__file-text`, children: [_jsx("div", { className: `${classPrefix}-upload__file-name`, children: "\u4E00\u4E2A\u6587\u4EF6\u540D\u79F0.text" }), _jsx("div", { className: `${classPrefix}-upload__file-size`, children: "100MB | 30%" })] }) }), _jsx("div", { className: `${classPrefix}-upload__item-file-right `, children: _jsx(WdIcon, { name: "td:delete", size: "xs", type: "inner" }) })] }), _jsx(ConfigProvider, { classPrefix: "wd", children: _jsx(Progress, { strokeWidth: 2, percent: 30, theme: "default" }) })] })] }), _jsxs("div", { className: `${classPrefix}-upload__item-file `, children: [_jsx("div", { className: `${classPrefix}-upload__icon`, children: _jsx(WdIcon, { name: "Word", size: "md", type: "custom", src: Word }) }), _jsxs("div", { className: `${classPrefix}-upload__item-control `, children: [_jsxs("div", { className: `${classPrefix}-upload__item-file-control `, children: [_jsx("div", { className: `${classPrefix}-upload__item-file-left `, children: _jsxs("div", { className: `${classPrefix}-upload__file-text`, children: [_jsx("div", { className: `${classPrefix}-upload__file-name`, title: " \u4E00\u4E2A\u6587\u4EF6\u540D\u79F0.word", children: "\u4E00\u4E2A\u6587\u4EF6\u540D\u79F0.word" }), _jsx("div", { className: `${classPrefix}-upload__file-size`, children: "100MB | 60%" })] }) }), _jsx("div", { className: `${classPrefix}-upload__item-file-right `, children: _jsx(WdIcon, { name: "td:delete", size: "xs", type: "inner" }) })] }), _jsx(ConfigProvider, { classPrefix: "wd", children: _jsx(Progress, { strokeWidth: 2, percent: 60, theme: "default" }) })] })] }), _jsxs("div", { className: `${classPrefix}-upload__item-file `, children: [_jsx("div", { className: `${classPrefix}-upload__icon`, children: _jsx(WdIcon, { name: "Txt", size: "md", type: "custom", src: Txt }) }), _jsx("div", { className: `${classPrefix}-upload__item-control `, children: _jsxs("div", { className: `${classPrefix}-upload__item-file-control `, children: [_jsx("div", { className: `${classPrefix}-upload__item-file-left `, children: _jsxs("div", { className: `${classPrefix}-upload__file-text`, children: [_jsx("div", { className: `${classPrefix}-upload__file-name`, children: "\u4E00\u4E2A\u6587\u4EF6\u540D\u79F0.text" }), _jsx("div", { className: `${classPrefix}-upload__file-size`, children: "100MB" })] }) }), _jsxs("div", { className: `${classPrefix}-upload__item-file-right `, children: [_jsx(WdIcon, { name: "Download", size: "xs", type: "custom", src: Download }), _jsx(WdIcon, { style: { marginLeft: 18 }, name: "td:delete", size: "xs", type: "inner" })] })] }) })] }), _jsxs("div", { className: `${classPrefix}-upload__item-file `, children: [_jsx("div", { className: `${classPrefix}-upload__icon`, children: _jsx(WdIcon, { name: "Xlsx", size: "md", type: "custom", src: Xlsx }) }), _jsx("div", { className: `${classPrefix}-upload__item-control `, children: _jsxs("div", { className: `${classPrefix}-upload__item-file-control `, children: [_jsx("div", { className: `${classPrefix}-upload__item-file-left `, children: _jsxs("div", { className: `${classPrefix}-upload__file-text`, children: [_jsx("div", { className: `${classPrefix}-upload__file-name`, children: "\u4E00\u4E2A\u6587\u4EF6\u540D\u79F0.Xlsx" }), _jsx("div", { className: `${classPrefix}-upload__file-size ${classPrefix}-upload__file-size--error`, children: "\u4E0A\u4F20\u5931\u8D25" })] }) }), _jsxs("div", { className: `${classPrefix}-upload__item-file-right `, children: [_jsx(WdIcon, { name: "td:refresh", size: "xs", type: "inner", style: { marginRight: 18 } }), _jsx(WdIcon, { name: "td:delete", size: "xs", type: "inner" })] })] }) })] }), _jsxs("div", { className: `${classPrefix}-upload__item-file `, children: [_jsx("div", { className: `${classPrefix}-upload__icon`, children: _jsx(WdIcon, { name: "Xlsx", size: "md", type: "custom", src: Xlsx }) }), _jsx("div", { className: `${classPrefix}-upload__item-control `, children: _jsxs("div", { className: `${classPrefix}-upload__item-file-control `, children: [_jsx("div", { className: `${classPrefix}-upload__item-file-left `, children: _jsxs("div", { className: `${classPrefix}-upload__file-text`, children: [_jsx("div", { className: `${classPrefix}-upload__file-name`, children: "\u53EA\u8BFB\u72B6\u6001.Xlsx" }), _jsx("div", { className: `${classPrefix}-upload__file-size`, children: "20Mb" })] }) }), isReadOnly && (_jsxs("div", { className: `${classPrefix}-upload__item-file-right `, children: [_jsx(WdIcon, { name: "td:refresh", size: "xs", type: "inner", style: { marginRight: 18 } }), _jsx(WdIcon, { name: "td:delete", size: "xs", type: "inner" })] }))] }) })] })] })] }) }) }));
+};

package/dist/web/components/wd-upload-file/style.d.ts

@@ -0,0 +1 @@
+import './wd-upload-file.css';

package/dist/web/components/wd-upload-file/style.js

@@ -0,0 +1 @@
+import './wd-upload-file.css';

package/dist/web/components/wd-upload-file/wd-upload-file.css

@@ -0,0 +1,107 @@
+/* h5 */
+.wd-form-item.wd-h5-upload-file-root .weui-upload-file .weui-cells:before {
+  display: none;
+}
+
+.wd-form-item.wd-h5-upload-file-root .weui-upload-file .weui-cells:after {
+  display: none;
+}
+
+.wd-form-item.wd-h5-upload-file-root
+  .weui-upload-file
+  .weda-upload-file-mobile {
+  width: auto;
+}
+
+.wd-form-item.wd-h5-upload-file-root
+  .weui-upload-file
+  .weda-upload-file-mobile__hd {
+  padding: 0;
+}
+
+.wd-form-item.wd-h5-upload-file-root
+  .weui-upload-file
+  .weda-upload-file-mobile
+  .weda-upload-file-mobile__bd
+  .weda-uploader-files_split {
+  margin: 8px 0;
+}
+
+.wd-form-item.wd-h5-upload-file-root
+  .weui-upload-file
+  .weda-upload-file-mobile
+  .weda-upload-file-mobile__item {
+  padding: 0;
+}
+
+.wd-form-item.wd-h5-upload-file-root .wd-form-item-wrap__control {
+  overflow-x: hidden;
+}
+
+.wd-form-item.wd-h5-upload-file-root .weda-upload-file-mobile__btn-group {
+  overflow-x: hidden;
+}
+
+.wd-form-item.wd-h5-upload-file-root .weui-upload-file {
+  width: 100%;
+}
+
+/* pc */
+.wd-form-item.wd-pc-upload-file-root
+  ._weda-fn-upload-result
+  ._weda-fn-upload-result__item {
+  margin-top: 0;
+  margin-bottom: 8px;
+}
+.wd-form-item.wd-pc-upload-file-root .weda-upload-file-pc {
+  width: 100%;
+}
+
+.wd-form-item.wd-pc-upload-file-root
+  .weda-upload-file-pc__readOnly
+  .weda-upload-file-pc__input-box {
+  display: none;
+}
+
+.wd-form-item.wd-pc-upload-file-root
+  .weda-upload-file-pc.weda-upload-file-pc__readOnly
+  .weda-upload-file-pc--item-header {
+  margin-top: 0;
+}
+
+.wd-form-item.wd-pc-upload-file-root
+  > .wd-form-item-wrap
+  > .wd-form-item-wrap__control {
+  overflow-x: hidden;
+}
+
+.wd-form-item.wd-pc-upload-file-root
+  .weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-label,
+.wd-form-item.wd-pc-upload-file-root
+  .weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-value {
+  padding: 10px 4px;
+  text-align: center;
+  width: 80px;
+  flex-shrink: 0;
+}
+
+.wd-form-item.wd-pc-upload-file-root
+  .weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-action
+  .wedatea2td-btn {
+  margin-right: 4px;
+}
+
+.wd-form-item.wd-pc-upload-file-root
+  .weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-title {
+  flex-grow: 2;
+  width: 100%;
+  max-width: calc(100% - 240px);
+}

package/dist/web/components/wd-upload-file/wd-upload-file.d.ts

@@ -1,8 +1,11 @@
-/// <reference types="react" />
+import React from 'react';
 import type { CommonPropsType } from '../../types';
-export declare const WdUploadFile: ({ isReadOnly }: {
-    isReadOnly?: boolean;
-}) => JSX.Element;
-export interface WdUploadFileProps extends CommonPropsType {
-    isReadOnly?: boolean;
+import type { DataType } from '../../../configs/components/wd-upload-file';
+import './style';
+/**
+ * 文件上传-标准化
+ */
+export declare const WdUploadFile: React.ForwardRefExoticComponent<WdUploadFileProps & React.RefAttributes<any>>;
+export interface WdUploadFileProps extends CommonPropsType, DataType {
+    classRoot?: string;
 }

package/dist/web/components/wd-upload-file/wd-upload-file.js

@@ -1,24 +1,38 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import classNames from '../../utils/classnames';
-import { useConfig } from '../../utils/config-context';
-import { WdButton, WdIcon } from '../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo, useRef } from 'react';
+import { convertAcceptTypes } from '../../utils/hooks/useFormLegacy';
+import { useFormInputTrait } from '../../components/form-input-hooks';
 import { WdFormItem } from '../wd-form-item';
-import { ConfigProvider, Progress } from 'tea-component';
-const Xlsx = '../../../style/components/upload/icons/xlsx.svg';
-const Word = '../../../style/components/upload/icons/word.svg';
-const Txt = '../../../style/components/upload/icons/txt.svg';
-const Download = '../../../style/components/upload/icons/download.svg';
-const FormItemMockData = {
-    classRoot: 'upload',
-    labelVisible: true,
-    label: '文件上传',
-    testId: 'form-upload-file',
-    borderedPc: true,
-    layout: 'horizontal',
-    // layout: 'vertical',
-};
-export const WdUploadFile = ({ isReadOnly = false }) => {
-    const { classPrefix } = useConfig();
-    const compClassName = `${classPrefix}-upload-wrap  ${classPrefix}-upload-file-wrap`;
-    return (_jsx(_Fragment, { children: _jsx(WdFormItem, { ...FormItemMockData, children: _jsxs("div", { className: classNames(compClassName), children: [_jsx(WdButton, { className: `${classPrefix}-upload-btn`, iconType: "text-with-icon", iconPosition: "before", icon: "td:upload", text: "\u70B9\u51FB\u4E0A\u4F20", theme: "secondary", variant: "outline", iconSource: "inner" }), _jsx("p", { className: "wd-form-item__help", children: _jsx("span", { className: "wd-form-item__help-text wd-input__help", children: "\u6700\u591A\u4E0A\u4F2010\u4E2A\u6587\u4EF6\uFF0C\u5355\u4E2A\u6587\u4EF6\u6700\u592710m\uFF0C\u652F\u6301\u683C\u5F0F\u5982\u4E0B\uFF1Apng\u3001jpeg\u3001pdf\u3001doc\u3001xls\u3001zip" }) }), _jsxs("div", { className: `${classPrefix}-upload__control ${classPrefix}-upload__control-file `, children: [_jsxs("div", { className: `${classPrefix}-upload__item-file `, children: [_jsx("div", { className: `${classPrefix}-upload__icon`, children: _jsx(WdIcon, { name: "Txt", size: "md", type: "custom", src: Txt }) }), _jsxs("div", { className: `${classPrefix}-upload__item-control `, children: [_jsxs("div", { className: `${classPrefix}-upload__item-file-control `, children: [_jsx("div", { className: `${classPrefix}-upload__item-file-left `, children: _jsxs("div", { className: `${classPrefix}-upload__file-text`, children: [_jsx("div", { className: `${classPrefix}-upload__file-name`, children: "\u4E00\u4E2A\u6587\u4EF6\u540D\u79F0.text" }), _jsx("div", { className: `${classPrefix}-upload__file-size`, children: "100MB | 30%" })] }) }), _jsx("div", { className: `${classPrefix}-upload__item-file-right `, children: _jsx(WdIcon, { name: "td:delete", size: "xs", type: "inner" }) })] }), _jsx(ConfigProvider, { classPrefix: "wd", children: _jsx(Progress, { strokeWidth: 2, percent: 30, theme: "default" }) })] })] }), _jsxs("div", { className: `${classPrefix}-upload__item-file `, children: [_jsx("div", { className: `${classPrefix}-upload__icon`, children: _jsx(WdIcon, { name: "Word", size: "md", type: "custom", src: Word }) }), _jsxs("div", { className: `${classPrefix}-upload__item-control `, children: [_jsxs("div", { className: `${classPrefix}-upload__item-file-control `, children: [_jsx("div", { className: `${classPrefix}-upload__item-file-left `, children: _jsxs("div", { className: `${classPrefix}-upload__file-text`, children: [_jsx("div", { className: `${classPrefix}-upload__file-name`, title: " \u4E00\u4E2A\u6587\u4EF6\u540D\u79F0.word", children: "\u4E00\u4E2A\u6587\u4EF6\u540D\u79F0.word" }), _jsx("div", { className: `${classPrefix}-upload__file-size`, children: "100MB | 60%" })] }) }), _jsx("div", { className: `${classPrefix}-upload__item-file-right `, children: _jsx(WdIcon, { name: "td:delete", size: "xs", type: "inner" }) })] }), _jsx(ConfigProvider, { classPrefix: "wd", children: _jsx(Progress, { strokeWidth: 2, percent: 60, theme: "default" }) })] })] }), _jsxs("div", { className: `${classPrefix}-upload__item-file `, children: [_jsx("div", { className: `${classPrefix}-upload__icon`, children: _jsx(WdIcon, { name: "Txt", size: "md", type: "custom", src: Txt }) }), _jsx("div", { className: `${classPrefix}-upload__item-control `, children: _jsxs("div", { className: `${classPrefix}-upload__item-file-control `, children: [_jsx("div", { className: `${classPrefix}-upload__item-file-left `, children: _jsxs("div", { className: `${classPrefix}-upload__file-text`, children: [_jsx("div", { className: `${classPrefix}-upload__file-name`, children: "\u4E00\u4E2A\u6587\u4EF6\u540D\u79F0.text" }), _jsx("div", { className: `${classPrefix}-upload__file-size`, children: "100MB" })] }) }), _jsxs("div", { className: `${classPrefix}-upload__item-file-right `, children: [_jsx(WdIcon, { name: "Download", size: "xs", type: "custom", src: Download }), _jsx(WdIcon, { style: { marginLeft: 18 }, name: "td:delete", size: "xs", type: "inner" })] })] }) })] }), _jsxs("div", { className: `${classPrefix}-upload__item-file `, children: [_jsx("div", { className: `${classPrefix}-upload__icon`, children: _jsx(WdIcon, { name: "Xlsx", size: "md", type: "custom", src: Xlsx }) }), _jsx("div", { className: `${classPrefix}-upload__item-control `, children: _jsxs("div", { className: `${classPrefix}-upload__item-file-control `, children: [_jsx("div", { className: `${classPrefix}-upload__item-file-left `, children: _jsxs("div", { className: `${classPrefix}-upload__file-text`, children: [_jsx("div", { className: `${classPrefix}-upload__file-name`, children: "\u4E00\u4E2A\u6587\u4EF6\u540D\u79F0.Xlsx" }), _jsx("div", { className: `${classPrefix}-upload__file-size ${classPrefix}-upload__file-size--error`, children: "\u4E0A\u4F20\u5931\u8D25" })] }) }), _jsxs("div", { className: `${classPrefix}-upload__item-file-right `, children: [_jsx(WdIcon, { name: "td:refresh", size: "xs", type: "inner", style: { marginRight: 18 } }), _jsx(WdIcon, { name: "td:delete", size: "xs", type: "inner" })] })] }) })] }), _jsxs("div", { className: `${classPrefix}-upload__item-file `, children: [_jsx("div", { className: `${classPrefix}-upload__icon`, children: _jsx(WdIcon, { name: "Xlsx", size: "md", type: "custom", src: Xlsx }) }), _jsx("div", { className: `${classPrefix}-upload__item-control `, children: _jsxs("div", { className: `${classPrefix}-upload__item-file-control `, children: [_jsx("div", { className: `${classPrefix}-upload__item-file-left `, children: _jsxs("div", { className: `${classPrefix}-upload__file-text`, children: [_jsx("div", { className: `${classPrefix}-upload__file-name`, children: "\u53EA\u8BFB\u72B6\u6001.Xlsx" }), _jsx("div", { className: `${classPrefix}-upload__file-size`, children: "20Mb" })] }) }), isReadOnly && (_jsxs("div", { className: `${classPrefix}-upload__item-file-right `, children: [_jsx(WdIcon, { name: "td:refresh", size: "xs", type: "inner", style: { marginRight: 18 } }), _jsx(WdIcon, { name: "td:delete", size: "xs", type: "inner" })] }))] }) })] })] })] }) }) }));
-};
+import UploaderFile from '../form/uploaderFile';
+import { emptyObject } from '../../utils/constant';
+import { convertSingleValue } from '../../utils/tool';
+import { X_RUNTIME_DEFAULT } from '../../../configs/type-utils/x-runtime-default';
+import './style';
+/**
+ * 文件上传-标准化
+ */
+export const WdUploadFile = forwardRef(function WdUploadFile(props, ref) {
+    const { classRoot = 'upload-file', acceptTypes: _acceptTypes = X_RUNTIME_DEFAULT._acceptTypesInFile, maxSize = X_RUNTIME_DEFAULT.maxSize, single = X_RUNTIME_DEFAULT.single, maxUploadCount = X_RUNTIME_DEFAULT.maxUploadCount, events = emptyObject, deleteVisible = X_RUNTIME_DEFAULT.deleteVisible, downloadVisible = X_RUNTIME_DEFAULT.downloadVisible, callbacks, } = props;
+    const acceptTypes = useMemo(() => convertAcceptTypes(_acceptTypes), [_acceptTypes]);
+    // 强制转换初始值
+    const initRef = useRef(false);
+    const formValue = useMemo(() => {
+        if (initRef.current)
+            return props.value;
+        initRef.current = true;
+        return convertSingleValue(props.value, single);
+    }, [props.value, single]);
+    const traitProps = { ...props, value: formValue, inputRef: ref };
+    const trait = useFormInputTrait(traitProps);
+    const { value, onChange, disabled, readOnly, visible } = trait;
+    const formItemProps = {
+        ...props,
+        ...trait,
+        classRoot,
+        readOnly: false,
+        size: 'lg',
+    };
+    if (!visible)
+        return null;
+    return (_jsx(WdFormItem, { ...formItemProps, children: _jsx(UploaderFile, { events: events, labelVisible: false, acceptTypes: acceptTypes, defaultValue: value, deleteVisible: deleteVisible, downloadVisible: downloadVisible, maxSize: maxSize, maxUploadCount: maxUploadCount, single: single, readOnly: readOnly, disabled: disabled, decorator: null, onChange: onChange, callbacks: callbacks }) }));
+});

package/dist/web/components/wd-upload-image/_design/wd-upload-image.d.ts

@@ -0,0 +1,3 @@
+import type { CommonPropsType } from '../../../types';
+export declare const WdUploadImage: () => JSX.Element;
+export type WdUploadImageProps = CommonPropsType;

package/dist/web/components/wd-upload-image/_design/wd-upload-image.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import classNames from '../../../utils/classnames';
+import { useConfig } from '../../../utils/config-context';
+import { WdButton, WdImage, WdIcon, WdRadioList,
+// WdInputWrap,
+ } from '../../index';
+import { WdLoading } from '../../wd-loading';
+import { usePlatform } from '../../../utils/platform';
+import { WdFormItem } from '../../wd-form-item';
+import { ConfigProvider, Modal } from 'tea-component';
+const FormItemMockData = {
+    classRoot: 'upload',
+    labelVisible: true,
+    label: '图片上传',
+    testId: 'form-upload-image',
+    borderedPc: true,
+    layout: 'horizontal',
+    // layout: 'vertical',
+};
+export const WdUploadImage = () => {
+    const { classPrefix } = useConfig();
+    const platform = usePlatform();
+    const ish5 = platform === 'h5';
+    const compClassName = `${classPrefix}-upload-wrap  ${classPrefix}-upload-file-wrap`;
+    const [isShowDialog, setIsShowDialog] = React.useState(false);
+    // 待删，为组件 ts 不报错
+    const extra = {};
+    return (_jsx(_Fragment, { children: _jsxs(WdFormItem, { ...FormItemMockData, children: [_jsxs("div", { className: classNames(compClassName), children: [_jsx("p", { className: "wd-form-item__help", children: _jsx("span", { className: "wd-form-item__help-text wd-input__help", children: "\u6700\u591A\u4E0A\u4F2010\u5F20\u56FE\u7247\uFF0C\u5355\u4E2A\u56FE\u7247\u6700\u592710m\uFF0C\u652F\u6301\u683C\u5F0F\u5982\u4E0B\uFF1Apng\u3001jpeg" }) }), _jsxs("ul", { className: `${classPrefix}-upload__control ${classPrefix}-upload__control-image `, children: [_jsx("li", { className: `${classPrefix}-upload__item-image ${classPrefix}-upload__item-image--add`, onClick: () => {
+                                        setIsShowDialog(true);
+                                    }, children: _jsx("p", { className: `${classPrefix}-upload__image-box`, children: _jsx(WdIcon, { name: "td:add", size: "md" }) }) }), _jsxs("li", { className: `${classPrefix}-upload__item-image`, children: [_jsx("p", { className: `${classPrefix}-upload__image-box`, children: _jsx(WdImage, { src: "https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg", ...extra }) }), !ish5 ? (_jsx("p", { className: `${classPrefix}-upload__image-name`, children: "\u56FE\u7247\u540D\u79F0" })) : (_jsx(WdIcon, { className: `${classPrefix}-upload__image-close`, name: "td:close", size: "sm" }))] }), _jsxs("li", { className: `${classPrefix}-upload__item-image`, children: [_jsx("p", { className: `${classPrefix}-upload__image-box`, children: _jsx(WdImage, { src: "https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg", ...extra }) }), !ish5 ? (_jsx("p", { className: `${classPrefix}-upload__image-name`, children: "\u56FE\u7247\u540D\u79F0" })) : (_jsx(WdIcon, { className: `${classPrefix}-upload__image-close`, name: "td:close", size: "sm" }))] }), _jsxs("li", { className: `${classPrefix}-upload__item-image`, children: [_jsx("p", { className: `${classPrefix}-upload__image-box`, children: _jsx(WdImage, { src: "https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg", ...extra }) }), !ish5 ? (_jsx("p", { className: `${classPrefix}-upload__image-name`, children: "\u56FE\u7247\u540D\u79F0" })) : (_jsx(WdIcon, { className: `${classPrefix}-upload__image-close`, name: "td:close", size: "sm" }))] }), _jsxs("li", { className: `${classPrefix}-upload__item-image`, children: [_jsx("p", { className: `${classPrefix}-upload__image-box`, children: _jsx(WdImage, { src: "https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg", ...extra }) }), !ish5 ? (_jsx("p", { className: `${classPrefix}-upload__image-name`, children: "\u56FE\u7247\u540D\u79F0" })) : (_jsx(WdIcon, { className: `${classPrefix}-upload__image-close`, name: "td:close", size: "sm" }))] }), _jsxs("li", { className: `${classPrefix}-upload__item-image`, children: [_jsx("p", { className: `${classPrefix}-upload__image-box`, children: _jsx(WdImage, { src: "https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg", ...extra }) }), !ish5 ? (_jsx("p", { className: `${classPrefix}-upload__image-name`, children: "\u56FE\u7247\u540D\u79F0" })) : (_jsx(WdIcon, { className: `${classPrefix}-upload__image-close`, name: "td:close", size: "sm" }))] }), _jsxs("li", { className: `${classPrefix}-upload__item-image`, children: [_jsxs("p", { className: `${classPrefix}-upload__image-box`, children: [_jsx(WdImage, { src: "https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg", ...extra }), !ish5 && (_jsx("div", { className: `${classPrefix}-upload__image-box-mask`, children: _jsxs("div", { className: `${classPrefix}-upload__image-box-mask__control`, children: [_jsx(WdIcon, { name: "td:browse" }), _jsx("span", { className: `${classPrefix}-upload__image-line` }), _jsx(WdIcon, { name: "td:delete" })] }) }))] }), !ish5 ? (_jsx("p", { className: `${classPrefix}-upload__image-name`, children: "\u56FE\u7247\u540D\u79F0" })) : (_jsx(WdIcon, { className: `${classPrefix}-upload__image-close`, name: "td:close", size: "sm" }))] }), _jsxs("li", { className: `${classPrefix}-upload__item-image`, children: [_jsx("p", { className: `${classPrefix}-upload__image-box`, children: _jsx(WdLoading, { text: ish5 ? '上传中...' : '上传中 40%' }) }), !ish5 ? (_jsx("p", { className: `${classPrefix}-upload__image-name`, children: "\u56FE\u7247\u540D\u79F0" })) : (_jsx(WdIcon, { className: `${classPrefix}-upload__image-close`, name: "td:close", size: "sm" }))] }), _jsxs("li", { className: `${classPrefix}-upload__item-image`, children: [_jsx("p", { className: `${classPrefix}-upload__image-box `, children: _jsx(WdLoading, { text: ish5 ? ('请重试') : (_jsxs(_Fragment, { children: ["\u683C\u5F0F\u9519\u8BEF\uFF0C\u8BF7", _jsx("span", { className: `${classPrefix}-g-text-refresh`, children: "\u91CD\u8BD5" })] })), icon: ish5 ? (_jsx(WdIcon, { name: "td:refresh", size: "md" })) : (_jsx(WdIcon, { name: "td:error-circle-filled", size: "md" })) }) }), !ish5 && (_jsx("p", { className: `${classPrefix}-upload__image-name`, children: "\u56FE\u7247\u540D\u79F0" }))] })] })] }), _jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsxs(Modal, { className: `${classPrefix}-upload-dialog `, visible: isShowDialog, caption: "\u4E0A\u4F20\u56FE\u7247", onClose: () => {
+                            setIsShowDialog(false);
+                        }, children: [_jsx(Modal.Body, { children: _jsxs("div", { className: `${classPrefix}-upload-dialog__control `, children: [_jsx(WdRadioList, { status: '', required: false, format: '', labelWidth: '', labelAlign: '', labelWrap: false, labelTips: '', extra: '', borderedH5: false, requiredFlag: false, requiredMsg: '', tipBlock: '', enumName: '', ...{ $widget: { closest: () => { } } }, labelVisible: true, layout: 'horizontal', label: '上传方式', direction: 'inline', range: [
+                                                {
+                                                    label: '点击上传/拖拽',
+                                                    value: '1',
+                                                },
+                                                {
+                                                    label: '输入链接上传',
+                                                    value: '2',
+                                                },
+                                            ], name: "demo", size: 'md', value: '1' }), _jsx("div", { className: `${classPrefix}-upload-dialog__click-upload-box`, children: _jsxs("p", { children: [_jsx("span", { className: `${classPrefix}-upload-dialog__click-upload`, children: "\u70B9\u51FB\u4E0A\u4F20" }), ' ', "/ \u62D6\u62FD"] }) })] }) }), _jsxs(Modal.Footer, { children: [_jsx(WdButton, { text: "\u53D6\u6D88", size: "md", theme: "secondary", events: {
+                                            tap: () => {
+                                                setIsShowDialog(false);
+                                            },
+                                        } }), _jsx(WdButton, { text: "\u786E\u5B9A", size: "md", theme: "primary", events: {
+                                            tap: () => {
+                                                setIsShowDialog(false);
+                                            },
+                                        } })] })] }) })] }) }));
+};

package/dist/web/components/wd-upload-image/style.d.ts

@@ -0,0 +1 @@
+import './wd-upload-image.css';

package/dist/web/components/wd-upload-image/style.js

@@ -0,0 +1 @@
+import './wd-upload-image.css';

package/dist/web/components/wd-upload-image/wd-upload-image.css

@@ -0,0 +1,34 @@
+/* h5 */
+.wd-form-item.wd-h5-upload-image-root .weui-uploader.weui-cells:before {
+  display: none;
+}
+
+.wd-form-item.wd-h5-upload-image-root .weui-uploader.weui-cells:after {
+  display: none;
+}
+
+.wd-form-item.wd-h5-upload-image-root
+  .weui-uploader.horizontal
+  .weui-uploader__bd {
+  padding: 0;
+  margin: 0;
+}
+
+/* pc */
+.wd-form-item.wd-pc-upload-image-root
+  ._weda-fn-upload-result
+  ._weda-fn-upload-result__item {
+  margin-top: 0;
+  margin-bottom: 8px;
+  border: 1px solid var(--wd-color-border-default);
+}
+
+.wd-form-item.wd-pc-upload-file-root
+  > .wd-form-item-wrap
+  > .wd-form-item-wrap__control {
+  overflow-x: hidden;
+}
+
+.wd-form-item.wd-pc-upload-file-root ._weda-fn-upload-result {
+  flex-wrap: wrap;
+}

package/dist/web/components/wd-upload-image/wd-upload-image.d.ts

@@ -1,4 +1,13 @@
-/// <reference types="react" />
+import React from 'react';
+import './style';
 import type { CommonPropsType } from '../../types';
-export declare const WdUploadImage: () => JSX.Element;
-export type WdUploadImageProps = CommonPropsType;
+import type { DataType, EventsType } from '../../../configs/components/wd-upload-image';
+import type { Except } from 'type-fest';
+/**
+ * 图片上传-标准化
+ */
+export declare const WdUploadImage: React.ForwardRefExoticComponent<WdUploadImageProps & React.RefAttributes<any>>;
+export interface WdUploadImageProps extends Except<CommonPropsType, 'events'>, DataType, EventsType {
+    classRoot?: string;
+    tips?: string;
+}