@cloudbase/weda-ui 3.4.7 → 3.4.9-alpha.1024

package/dist/web/components/formdetail/index.css

@@ -168,9 +168,6 @@
 .form-detail-wrap .form-detail-title-index {
   padding-left: 0;
 }
-.form-detail-wrap .form-detail-content-wrap {
-  margin-top: 7;
-}
 
 /* 子表单禁用样式 */
 .form-detail-wrap.disabled .form-detail-delete-button,
@@ -178,6 +175,11 @@
   cursor: not-allowed;
   color: #bbd3fb;
 }
+.form-detail-wrap.disabled .form-detail-delete-button .wd-typography,
+.form-detail-wrap.disabled .form-detail-add-button .wd-typography {
+  cursor: not-allowed;
+  color: #bbd3fb;
+}
 .form-detail-wrap.disabled .form-detail-add-button .t-icon {
   color: #bbd3fb !important;
 }
@@ -232,3 +234,211 @@
   color: #0052d9;
   margin-bottom: 0;
 }
+
+/* 增加表格样式 */
+.form-detail-wrap.form-detail-table
+  .form-detail-content-wrap
+  .form-detail-group-header-container {
+  display: none;
+}
+.form-detail-table .weda-formcells__pc .wedatea2td-form__label {
+  display: none;
+}
+.wedatea2td-form .form-detail-table .wedatea2td-form__label {
+  display: none;
+}
+.form-detail-wrap.form-detail-table
+  .form-detail-content-wrap
+  .form-detail-group-content-container {
+  padding: 0;
+  border-bottom: 1px solid #dcdcdc;
+}
+.form-detail-wrap.form-detail-table
+  .form-detail-content-wrap
+  .form-detail-group-content-container:last-child {
+  border-bottom: none;
+}
+.form-detail-wrap.form-detail-table .weda-ui .wedatea2td-form__controls {
+  padding: 0;
+}
+.form-detail-wrap.form-detail-list .wd-grid-col.wd-g-align-self-auto {
+  width: 100%;
+  flex: 0 0 auto;
+}
+.form-detail-wrap.form-detail-list .form-detail-table-header-container {
+  display: none;
+}
+
+.form-detail-wrap.form-detail-list .form-detail-table-delete-btn-container {
+  display: none;
+}
+
+.form-detail-wrap.form-detail-list
+  .weda-ui.weda-input
+  .weui-flex__item
+  .weui-cell_form {
+  padding: 0 16px;
+}
+.form-detail-wrap.form-detail-list .form-detail-content-wrap {
+  overflow: hidden;
+}
+.form-detail-wrap.form-detail-list
+  .form-detail-content-wrap
+  .form-detail-group-header-container {
+  border-top: 1px solid #dcdcdc;
+}
+.form-detail-wrap.form-detail-list .form-detail-content-wrap {
+  border-top: none;
+  border-bottom: none;
+}
+.form-detail-wrap.form-detail-list
+  .form-detail-content-wrap
+  .form-detail-group-content-container:last-child {
+  border-bottom: 1px solid #dcdcdc;
+}
+.form-detail-wrap.form-detail-list.h5-form-detail-wrap
+  .form-detail-content-wrap:first-child {
+  border-top: none;
+}
+.form-detail-wrap.form-detail-list.pc-form-detail-wrap
+  .form-detail-content-wrap {
+  margin-top: 0;
+}
+.form-detail-wrap.form-detail-list .wd-grid-col.tableIndexContainer {
+  display: none;
+}
+.form-detail-wrap .form-detail-content-wrap .wd-grid-row {
+  margin: 0;
+}
+
+.form-detail-wrap.form-detail-table
+  .form-detail-group-parent-container
+  .wd-grid-col-lg {
+  min-width: 240px;
+  width: 240px;
+}
+
+.form-detail-wrap.form-detail-table
+  .form-detail-group-parent-container
+  .wd-grid-col-lg.formimageuploader,
+.form-detail-wrap.form-detail-table
+  .form-detail-group-parent-container
+  .wd-grid-col-lg.formuploadfile {
+  min-width: 360px;
+}
+.form-detail-wrap.form-detail-table
+  .form-detail-group-parent-container
+  .wd-grid-col-lg.formswitch {
+  min-width: 120px;
+  width: 120px;
+}
+.form-detail-wrap.form-detail-table
+  .form-detail-group-parent-container
+  .wd-grid-col-lg.formrichtext {
+  min-width: 570px;
+}
+.form-detail-wrap.form-detail-table .form-detail-group-content-container {
+  flex-flow: nowrap;
+  margin: 0;
+}
+.form-detail-wrap.form-detail-table .wd-form-detail-content-container {
+  width: max-content;
+  max-width: 100%;
+  min-width: 100%;
+  display: block;
+  overflow: auto;
+  border-left: 1px solid #dcdcdc;
+  border-right: 1px solid #dcdcdc;
+  border-bottom: 1px solid #dcdcdc;
+  margin-bottom: 8px;
+  border-radius: 5px;
+  overflow-y: hidden;
+}
+.form-detail-wrap.form-detail-table .form-detail-content-wrap {
+  margin-top: 0;
+  border: none;
+  width: fit-content;
+  min-width: 100%;
+}
+.form-detail-table .form-detail-table-header-container {
+  background-color: #f3f3f3;
+  width: max-content;
+  min-width: 100%;
+  position: relative;
+  border-top: 1px solid #dcdcdc;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  font-weight: 600;
+}
+.form-detail-table .wd-grid-col.form-detail-table-option-container,
+.form-detail-table .wd-grid-col.form-detail-table-delete-btn-container {
+  flex: 1 0 0%;
+  width: 140px;
+  max-width: 140px;
+  position: sticky;
+  right: 0;
+  z-index: 1;
+}
+.form-detail-table .wd-grid-col.tableIndexContainer {
+  width: 60px;
+  max-width: 60px;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.form-detail-table
+  .form-detail-table-header-container
+  .form-detail-group-content-container
+  .wd-grid-col {
+  padding: 12px;
+}
+.form-detail-table
+  .form-detail-content-wrap
+  .form-detail-group-content-container
+  .wd-grid-col {
+  padding: 16px 12px;
+}
+.form-detail-table .tableHeaderCellContainer {
+  display: flex;
+}
+.form-detail-table .tableHeaderCellContainer .tableFieldRequired {
+  color: #e34d59;
+  margin-right: 5px;
+}
+.form-detail-table .wd-grid-col.form-detail-table-option-container {
+  background-color: #f3f3f3;
+  z-index: 2;
+}
+.form-detail-table .wd-grid-col.form-detail-table-delete-btn-container {
+  background-color: #fff;
+}
+.form-detail-table.scroll
+  .wd-grid-col.form-detail-table-option-container::before,
+.form-detail-table.scroll
+  .wd-grid-col.form-detail-table-delete-btn-container
+  ::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -25px;
+  width: 25px;
+  box-shadow: inset -8px 0 4px -7px rgb(0 0 0 / 10%);
+}
+
+.form-detail-wrap.form-detail-table.readOnly
+  .form-detail-table-delete-btn-container,
+.form-detail-wrap.form-detail-table.readOnly
+  .form-detail-table-option-container {
+  display: none;
+}
+
+.form-detail-wrap.form-detail-table
+  .form-detail-group-parent-container
+  .wd-grid-col-lg.formrichtext
+  .bf-content {
+  height: 161px;
+}
+.form-detail-wrap .wd-grid-row > div {
+  margin: 0;
+}

package/dist/web/components/formdetail/index.js

@@ -1,9 +1,16 @@
-import React, { useEffect, forwardRef, useImperativeHandle, useState, useCallback, } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, forwardRef, useImperativeHandle, useState, useCallback, useRef, } from 'react';
+import { useResizeObserver } from '@react-hookz/web';
+// import { WdFormItem, WdInputWrap } from '../wd-form-item';
 import classNames from '../../utils/classnames';
 import { usePlatform, randomStr, isInIde } from '../../utils/platform';
 import isObjectEqual from '../../utils/isObjectEqual';
 import './index.css';
-import { getParentForm } from '../../utils/widget-api';
+import { useFormInputTrait, useParentForm } from '../form-input-hooks';
+import { debug } from '../../utils/console';
+import { noop } from '../../utils/constant';
+import { WdText } from '../wd-text';
+const logger = debug('form-detail');
 export const reorderContext = (data, name, isPureArray) => data.map((i, index) => {
     const item = { ...i };
     Object.keys(i).forEach((j) => {
@@ -59,13 +66,32 @@ export const changeHandle = ({ type, name, data, childFormItem, isPureArray, par
     return data;
 };
 const FormDetailCom = forwardRef(function FormDetail(props, ref) {
-    const { className, id, style, children, events, name, value: initDetailValue, isPureArray, disabled, readOnly, fieldAuth = 'rw', $node, hasInitValue = false, } = props;
-    const [defaultValue, setDetailValue] = useState([]);
+    const { className, id, style, children, events, name, isPureArray, fieldAuth = 'rw', $widget, hasInitValue = false, isWdFormDetail, viewType = 'table', label, } = props;
+    const [innerHandle, setInnerHandle] = useState({});
+    const inputRef = useRef({});
+    const { value: initDetailValue, readOnly, disabled, } = useFormInputTrait({
+        value: props.value,
+        name,
+        // @ts-expect-error inputRef 没用
+        inputRef,
+        readOnly: props.readOnly,
+        disabled: props.disabled,
+        required: false,
+        requiredMsg: '',
+        $widget,
+        setInnerHandle,
+        onChange: noop,
+    });
+    const tableRef = useRef(null);
+    const [isTableView, setIsTableView] = useState(false);
+    const [detailValue, setDetailValue] = useState([]);
     const [contextData, setContextData] = useState([]);
-    const [childFormItem, setCildFormItem] = useState([]);
+    const [childFormItem, setChildFormItem] = useState([]);
+    const [isInit, setIsInit] = useState(false);
+    const [hasScroll, setHasScroll] = useState(false);
     const platform = usePlatform();
-    const parent = getParentForm($node);
-    const init = useCallback((defaultValue, childFormItem) => {
+    const parent = useParentForm($widget);
+    const init = useCallback((defaultValue, childFormItem, isWdFormDetail = false) => {
         var _a;
         const formDetailItemValue = {};
         let initialValues = [];
@@ -96,22 +122,73 @@ const FormDetailCom = forwardRef(function FormDetail(props, ref) {
             console.error(error);
         }
         const mock = newContextItem(childFormItem, name, isPureArray);
-        const data = (initialValues === null || initialValues === void 0 ? void 0 : initialValues.length) ? initialValues : [mock];
+        let data = (initialValues === null || initialValues === void 0 ? void 0 : initialValues.length) ? initialValues : [mock];
+        // 新的明细组件，开放初始值，根据初始值设置上下文
+        if (isWdFormDetail) {
+            data = initialValues;
+        }
+        setIsInit(true);
         setContextData(data);
         (_a = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _a === void 0 ? void 0 : _a.call(events, {
             data,
         });
+        return formDetailItemValue;
     }, [isPureArray, name]);
+    const addShadow = useCallback(() => {
+        var _a, _b;
+        // table body 滚动区域
+        const tableBodyBoxDom = (_b = (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('wd-form-detail-content-container')) === null || _b === void 0 ? void 0 : _b[0];
+        if (tableBodyBoxDom) {
+            const bodyHasScroll = (tableBodyBoxDom === null || tableBodyBoxDom === void 0 ? void 0 : tableBodyBoxDom.scrollWidth) > (tableBodyBoxDom === null || tableBodyBoxDom === void 0 ? void 0 : tableBodyBoxDom.clientWidth);
+            // 如果table body存在滚动条，则设置header的box shadow
+            setHasScroll(bodyHasScroll);
+        }
+    }, []);
     // 初始化context的值
     useEffect(() => {
-        if (!isObjectEqual(initDetailValue, defaultValue) &&
+        logger.debug('initDetailValue', initDetailValue);
+        if (!isObjectEqual(initDetailValue, detailValue) &&
             childFormItem.length > 0) {
             setDetailValue(initDetailValue);
-            init(initDetailValue, childFormItem);
+            init(initDetailValue, childFormItem, isWdFormDetail);
         }
+        return () => {
+            setDetailValue([]);
+        };
         // 只有initDetailValue的值改变的时候才执行
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [initDetailValue]);
+    useEffect(() => {
+        // 给明细组件的子表单元素赋初始值
+        if (isInit && isWdFormDetail && (initDetailValue === null || initDetailValue === void 0 ? void 0 : initDetailValue.length) && parent) {
+            const formDetailItemValue = {};
+            initDetailValue.forEach((i, index) => {
+                if (isPureArray) {
+                    // eslint-disable-next-line no-prototype-builtins
+                    const val = (i === null || i === void 0 ? void 0 : i.hasOwnProperty('arrayItem')) ? null : i;
+                    formDetailItemValue[`${name}[${index}]`] = val;
+                }
+                else {
+                    childFormItem.forEach((j) => {
+                        const key = `${name}[${index}].${j}`;
+                        const val = i[j] || null;
+                        formDetailItemValue[key] = val;
+                    });
+                }
+            });
+            parent === null || parent === void 0 ? void 0 : parent.setValue(formDetailItemValue);
+            setIsInit(false);
+        }
+    }, [
+        childFormItem,
+        contextData,
+        initDetailValue,
+        isInit,
+        isPureArray,
+        isWdFormDetail,
+        name,
+        parent,
+    ]);
     useEffect(() => {
         var _a;
         let childFormItem = initDetailValue[0]
@@ -121,10 +198,10 @@ const FormDetailCom = forwardRef(function FormDetail(props, ref) {
         if (isPureArray) {
             childFormItem = ['arrayItem'];
         }
-        setCildFormItem(childFormItem);
-        // 只有在编辑器里,或存在初始值的时候,才初始化明细单项
-        if (isInIde() || hasInitValue) {
-            init(initDetailValue, childFormItem);
+        setChildFormItem(childFormItem);
+        // 只有在编辑器里,或存在初始值的时候,或新明细组件（wdFormDetail），才初始化明细单项
+        if (isInIde() || hasInitValue || isWdFormDetail) {
+            init(initDetailValue, childFormItem, isWdFormDetail);
         }
         else {
             (_a = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _a === void 0 ? void 0 : _a.call(events, { data: [] });
@@ -155,21 +232,41 @@ const FormDetailCom = forwardRef(function FormDetail(props, ref) {
             params,
         });
         if (!isObjectEqual(data, contextData)) {
+            setIsInit(false);
             setContextData(data);
             (_a = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _a === void 0 ? void 0 : _a.call(events, { data });
         }
     }, [
-        childFormItem,
-        contextData,
-        events,
-        isPureArray,
-        name,
         disabled,
         readOnly,
         fieldAuth,
+        parent === null || parent === void 0 ? void 0 : parent.formType,
+        contextData,
+        name,
+        childFormItem,
+        isPureArray,
+        events,
     ]);
+    useEffect(() => {
+        if (viewType === 'table' && platform !== 'h5') {
+            setIsTableView(true);
+        }
+        else {
+            setIsTableView(false);
+        }
+    }, [viewType, platform]);
+    useResizeObserver(tableRef, () => {
+        // table body 滚动区域
+        addShadow();
+    });
     useImperativeHandle(ref, () => {
         return {
+            ...innerHandle,
+            getConfig() {
+                return {
+                    componentType: 'formdetail',
+                };
+            },
             methods: {
                 addition: () => {
                     onChange('add', null);
@@ -181,19 +278,48 @@ const FormDetailCom = forwardRef(function FormDetail(props, ref) {
                     onChange('change', params);
                 },
             },
+            isTableView,
         };
-    }, [onChange]);
+    }, [innerHandle, onChange, isTableView]);
+    // useEffect(() => {
+    //   const initArr = lodashGet(parent, 'initialValues.name', null);
+    //   logger.debug('initialValue', initArr, name);
+    //   if (initArr) {
+    //     setInitDetailValue(initArr);
+    //   }
+    // }, [name, parent, setInitDetailValue]);
+    // useEffect(() => {
+    //   const removeFormItem = parent?.addFormItem?.(name, $widget);
+    //   logger.debug('addFormItem', name);
+    //   return () => {
+    //     removeFormItem?.();
+    //   };
+    // }, [$widget, name, parent]);
     // fieldAuth返回n,则为无权限
     const isAuthVisible = fieldAuth !== 'n';
-    return isAuthVisible ? (React.createElement("fieldset", { disabled: disabled || readOnly || (parent === null || parent === void 0 ? void 0 : parent.formType) === 'read', className: classNames({
-            'weda-ui': true,
-            'gsd-h5-react-formitem': true,
-            'form-detail-wrap': true,
-            'pc-form-detail-wrap': platform === 'pc',
-            'h5-form-detail-wrap': platform === 'h5',
-            [className]: className,
-            disabled: disabled || !(fieldAuth === null || fieldAuth === void 0 ? void 0 : fieldAuth.includes('w')),
-            readOnly: readOnly || (parent === null || parent === void 0 ? void 0 : parent.formType) === 'read',
-        }), id: id, style: style, role: "container", "data-testid": "formDetail" }, children)) : null;
+    const formDetailRender = () => {
+        return isAuthVisible ? (_jsxs("fieldset", { ref: tableRef, disabled: disabled || readOnly || (parent === null || parent === void 0 ? void 0 : parent.formType) === 'read', className: classNames({
+                'weda-ui': true,
+                'gsd-h5-react-formitem': true,
+                'form-detail-wrap': true,
+                'pc-form-detail-wrap': platform === 'pc',
+                'h5-form-detail-wrap': platform === 'h5',
+                [className]: className,
+                disabled: disabled || !(fieldAuth === null || fieldAuth === void 0 ? void 0 : fieldAuth.includes('w')),
+                readOnly: readOnly || (parent === null || parent === void 0 ? void 0 : parent.formType) === 'read',
+                'form-detail-list': !isTableView,
+                'form-detail-table': isWdFormDetail && platform === 'pc' && viewType === 'table',
+                scroll: hasScroll,
+            }), id: id, style: style, role: "container", "data-testid": "formDetail", children: [isWdFormDetail && (_jsx("div", { className: "form-detail-group-label-container", children: _jsx(WdText, { text: label, contenteditable: null }) })), _jsx(_Fragment, { children: children })] })) : null;
+    };
+    // 组件规范化后再考虑是否改动
+    // return isWdFormDetail ? (
+    //   <WdFormItem {...props}>
+    //     <WdInputWrap {...props}>{formDetailRender()}</WdInputWrap>
+    //   </WdFormItem>
+    // ) : (
+    //   formDetailRender()
+    // );
+    return formDetailRender();
 });
 export default FormDetailCom;

package/dist/web/components/graphicCard/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useMemo } from 'react';
 import './index.css';
 import classNames from '../../utils/classnames';
@@ -151,29 +152,16 @@ export default function GraphicCard({ navOption = emptyArray, ColMobile, ColPC,
                 return null;
         }
     };
-    return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
-        React.createElement("div", { className: cls, "data-testid": "graphicCard", style: style },
-            React.createElement("div", { className: `${CLASS_PREFIX}__wrapper` }, cardList.map((row, rowIndex) => {
-                return (React.createElement(Row, { className: `${CLASS_PREFIX}__row`, key: rowIndex },
-                    React.createElement(React.Fragment, null, row &&
-                        row.map((col, colIndex) => {
-                            return (
-                            // 每列内容左右间距为0.1栅格列宽
-                            React.createElement(Col, { style: {
-                                    width: `${(1 / colCount) * 100}%`,
-                                    padding: `0 ${singleGrid * 0.1}px`,
-                                    cursor: (col === null || col === void 0 ? void 0 : col.tapStatus) != 'tap' ? 'pointer' : 'auto',
-                                }, className: `${CLASS_PREFIX}__col ${CLASS_PREFIX}__col--${textAlign}`, key: colIndex },
-                                React.createElement("div", { className: "wedatea2td-grid__box", "data-testid": `${colIndex}_click`, onClick: () => tapTo(col) },
-                                    React.createElement("div", { className: `${CLASS_PREFIX}__col-body` },
-                                        col && (React.createElement("div", { className: `${CLASS_PREFIX}__icon`, style: imageStyle },
-                                            React.createElement(Image, { mode: 'scaleToFill', lazyLoad: false, maskClosable: false, imgPreview: false, fit: 'cover', alt: '', src: col === null || col === void 0 ? void 0 : col.icon, className: `${CLASS_PREFIX}__img` }))),
-                                        React.createElement("div", { className: `${CLASS_PREFIX}__detail` },
-                                            titleVisible && (col === null || col === void 0 ? void 0 : col.title) && (React.createElement("div", { className: `${CLASS_PREFIX}__title`, style: titleStyle, title: tips ? col === null || col === void 0 ? void 0 : col.title : '' }, col === null || col === void 0 ? void 0 : col.title)),
-                                            desVisible && (col === null || col === void 0 ? void 0 : col.des) && (React.createElement("div", { className: `${CLASS_PREFIX}__desc`, style: desStyle, title: tips ? col === null || col === void 0 ? void 0 : col.des : '' }, col === null || col === void 0 ? void 0 : col.des)))),
-                                    buttonVisible && col && (React.createElement(Button, { type: "link", className: `${CLASS_PREFIX}__btn` },
-                                        React.createElement(Text, { className: `${CLASS_PREFIX}__btn--text` }, buttonText),
-                                        React.createElement(IconFont, { name: "arrow-right", className: `${CLASS_PREFIX}__btn-icon` }))))));
-                        }))));
-            })))));
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx("div", { className: cls, "data-testid": "graphicCard", style: style, children: _jsx("div", { className: `${CLASS_PREFIX}__wrapper`, children: cardList.map((row, rowIndex) => {
+                    return (_jsx(Row, { className: `${CLASS_PREFIX}__row`, children: _jsx(_Fragment, { children: row &&
+                                row.map((col, colIndex) => {
+                                    return (
+                                    // 每列内容左右间距为0.1栅格列宽
+                                    _jsx(Col, { style: {
+                                            width: `${(1 / colCount) * 100}%`,
+                                            padding: `0 ${singleGrid * 0.1}px`,
+                                            cursor: (col === null || col === void 0 ? void 0 : col.tapStatus) != 'tap' ? 'pointer' : 'auto',
+                                        }, className: `${CLASS_PREFIX}__col ${CLASS_PREFIX}__col--${textAlign}`, children: _jsxs("div", { className: "wedatea2td-grid__box", "data-testid": `${colIndex}_click`, onClick: () => tapTo(col), children: [_jsxs("div", { className: `${CLASS_PREFIX}__col-body`, children: [col && (_jsx("div", { className: `${CLASS_PREFIX}__icon`, style: imageStyle, children: _jsx(Image, { mode: 'scaleToFill', lazyLoad: false, maskClosable: false, imgPreview: false, fit: 'cover', alt: '', src: col === null || col === void 0 ? void 0 : col.icon, className: `${CLASS_PREFIX}__img` }) })), _jsxs("div", { className: `${CLASS_PREFIX}__detail`, children: [titleVisible && (col === null || col === void 0 ? void 0 : col.title) && (_jsx("div", { className: `${CLASS_PREFIX}__title`, style: titleStyle, title: tips ? col === null || col === void 0 ? void 0 : col.title : '', children: col === null || col === void 0 ? void 0 : col.title })), desVisible && (col === null || col === void 0 ? void 0 : col.des) && (_jsx("div", { className: `${CLASS_PREFIX}__desc`, style: desStyle, title: tips ? col === null || col === void 0 ? void 0 : col.des : '', children: col === null || col === void 0 ? void 0 : col.des }))] })] }), buttonVisible && col && (_jsxs(Button, { type: "link", className: `${CLASS_PREFIX}__btn`, children: [_jsx(Text, { className: `${CLASS_PREFIX}__btn--text`, children: buttonText }), _jsx(IconFont, { name: "arrow-right", className: `${CLASS_PREFIX}__btn-icon` })] }))] }) }, colIndex));
+                                }) }) }, rowIndex));
+                }) }) }) }));
 }

package/dist/web/components/grid/col.js

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import classNames from '../../utils/classnames';
 import { usePlatform } from '../../utils/platform';
 import './_utils.css';
@@ -92,5 +93,5 @@ export default function Col(props) {
             style: exactStyle,
         };
     }, [alignSelf, lgWidthType, userClassName, widthType, style, platform]);
-    return (React.createElement("div", { className: classNameStyle.className, id: id, style: classNameStyle.style, onClick: (e) => { var _a; return (_a = events === null || events === void 0 ? void 0 : events.tap) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e }); }, "data-role": "wd-col" }, children));
+    return (_jsx("div", { className: classNameStyle.className, id: id, style: classNameStyle.style, onClick: (e) => { var _a; return (_a = events === null || events === void 0 ? void 0 : events.tap) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e }); }, "data-role": "wd-col", children: children }));
 }

package/dist/web/components/grid/grid.js

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import './grid.css';
 import './_utils.css';
 import classNames from '../../utils/classnames';
@@ -10,10 +11,10 @@ export default function Grid(props) {
             'wd-grid': true,
             [`wd-grid-gx-${gutterX}`]: !isNil(gutterX),
             // 产品要求gutterX 同时间决定row一个换行的间距和 row之间的间距
-            // [`wd-grid-gy-${gutterY}`]: !isNil(gutterY),
+            [`wd-grid-gy-${gutterY}`]: !isNil(gutterY),
             [`wd-grid-grb-${gutterY}`]: !isNil(gutterY),
             [userClassName]: userClassName,
         });
     }, [gutterX, gutterY, userClassName]);
-    return (React.createElement("div", { className: className, id: props.id, style: props.style, onClick: (e) => { var _a; return (_a = events === null || events === void 0 ? void 0 : events.tap) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e }); }, "data-role": "wd-grid" }, props.children));
+    return (_jsx("div", { className: className, id: props.id, style: props.style, onClick: (e) => { var _a; return (_a = events === null || events === void 0 ? void 0 : events.tap) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e }); }, "data-role": "wd-grid", children: props.children }));
 }

package/dist/web/components/grid/row.js

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import classNames from '../../utils/classnames';
 import { isNil } from '../../utils/lodash';
 import './_utils.css';
@@ -12,5 +13,5 @@ export default function Row(props) {
             [userClassName]: userClassName,
         });
     }, [alignItems, userClassName, gutterX]);
-    return (React.createElement("div", { className: className, id: id, style: style, onClick: (e) => { var _a; return (_a = events === null || events === void 0 ? void 0 : events.tap) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e }); }, "data-role": "wd-row" }, children));
+    return (_jsx("div", { className: className, id: id, style: style, onClick: (e) => { var _a; return (_a = events === null || events === void 0 ? void 0 : events.tap) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e }); }, "data-role": "wd-row", children: children }));
 }