@cloudbase/weda-ui 0.2.14 → 0.2.15

package/README.md

@@ -18,6 +18,7 @@
 .
 ├── .storybook              # storybook 配置目录
 ├── cloudbaserc.json        # 组件库配置
+├── lowcode-comps           # 低码组件内容
 └── src
     ├── test                # 测试目录
     ├── configs             # 组件类型申明目录
@@ -43,10 +44,12 @@
 
 组件库开发前置依赖：
 
-1. 进入组件库更目录，安装依赖： `npm i` or `yarn`，使用 `npm` 安装依赖可能会有依赖冲突问题，可以使用 `npm i --legacy-peer-deps` 来解决。
+1. 进入组件库根目录，安装依赖： `npx npm@6 i` 使用 `npm@6` 安装依赖可能会有依赖冲突问题，可以使用 `npm i --legacy-peer-deps` 来解决。用npm@6 是为了跟构建保持一致
 2. 安装云开发命令行工具：`npm i -g @cloudbase/cli` or `yarn global add @cloudbase/cli`
 3. 登录云开发命令行：`tcb login` 并输入密码
-4. 去腾讯云微搭低码控制台创建组件库
+4. 去腾讯云微搭低码控制台创建组件库，库名应该和cloudbaserc.json 中一致
+
+> 下面的内容是源码组件库的开发文档，低码组件库开发请查看[lowcode-comps下的文档](lowcode-comps/README.md)
 
 ### 编写组件
 
@@ -289,6 +292,8 @@ export function handleEvent({ event, data }) {
 
 对于小程序组件，我们不能直接在浏览器中去预览调试。组件编写完成后需要运行 `tcb lowcode debug` 打开组件编辑器，通过组件编辑器中 IDE 预览功能来进行微信开发者工具和手机的真实预览。
 
+- 小程序调试需要从编辑器请求中拷包本地构建生成小程序代码，可以参考 http://tapd.oa.com/TCB_new/markdown_wikis/show/#1220422223002075389
+
 ### 组件测试
 
 我们建议你为你的定义组件编写必要的测试。我们集成进了 jest 和 小程序模拟器来协助组件的多端测试。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/weda-ui",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "main": "./src/index.js",
   "module": "./src/index",
   "miniprogram": "mpdist",
@@ -20,7 +20,20 @@
     "build:cli": "tcb lowcode build",
     "build:analyze": "cross-env ANALYZER=1 tcb lowcode build",
     "test": "jest test --env=jsdom",
+    "test:jest": "jest test --env=jsdom",
     "test:watch": "jest test --env=jsdom --watch",
+    "test:e2e": "npx cypress run-ct",
+    "test:all": "npm run test && npm run test:e2e",
+    "e2e": "npx cypress open-ct",
+    "pretest:all": "rimraf .nyc_output || true",
+    "posttest:all": "npm run report:combined",
+    "mkdir:reports": "mkdir reports || true",
+    "precopy:reports": "npm run mkdir:reports",
+    "copy:reports": "cp cypress-coverage/coverage-final.json reports/from-cypress.json && cp jest-coverage/coverage-final.json reports/from-jest.json",
+    "precombine:reports": "npm run copy:reports && mkdir .nyc_output || true",
+    "combine:reports": "npx nyc merge reports && mv coverage.json .nyc_output/out.json",
+    "prereport:combined": "npm run combine:reports",
+    "report:combined": "npx nyc report --reporter lcov --reporter text --reporter html --report-dir coverage",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "lint": "eslint src --fix",
@@ -42,6 +55,7 @@
     "@cloudbase/ui-react": "^1.0.4",
     "@loadable/component": "^5.15.2",
     "@react-hookz/web": "^12.0.0",
+    "@tcwd/style-wedatheme": "^1.0.0",
     "@use-gesture/react": "^10.2.4",
     "braft-editor": "^2.3.9",
     "braft-utils": "^3.0.12",
@@ -65,6 +79,10 @@
     "@cloudbase/lowcode-build-dependence": "^0.9.0",
     "@commitlint/cli": "^16.0.2",
     "@commitlint/config-conventional": "^13.2.0",
+    "@cypress/code-coverage": "^3.9.12",
+    "@cypress/react": "^5.12.1",
+    "@cypress/webpack-dev-server": "^1.8.0",
+    "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@size-limit/preset-big-lib": "^7.0.5",
     "@storybook/addon-actions": "^6.4.9",
     "@storybook/addon-essentials": "^6.4.9",
@@ -80,9 +98,12 @@
     "@typescript-eslint/parser": "^5.9.0",
     "babel-jest": "^27.4.5",
     "babel-loader": "^8.2.3",
+    "babel-plugin-istanbul": "^6.1.1",
     "cross-env": "^7.0.3",
+    "cypress": "^9.3.1",
     "eslint": "^8.4.1",
     "eslint-config-tencent": "^1.0.2",
+    "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-jest": "^25.3.0",
     "eslint-plugin-react": "^7.27.1",
     "husky": "^7.0.4",
@@ -93,20 +114,16 @@
     "nano-staged": "^0.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-scripts": "^4.0.3",
     "react-test-renderer": "^17.0.2",
     "rimraf": "^3.0.2",
     "size-limit": "^7.0.5",
     "ts-jest": "^27.1.1",
     "ts-loader": "^8.2.0",
     "typescript": "^4.5.4",
-    "webpack": "4.44.2"
-  },
-  "babel": {
-    "presets": [
-      "@babel/preset-env",
-      "@babel/preset-react",
-      "@babel/preset-typescript"
-    ]
+    "webpack": "4.44.2",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.3"
   },
   "nano-staged": {
     "*.{js,jsx,ts,tsx}": [
@@ -119,5 +136,10 @@
       "webpack": false,
       "limit": "700 KB"
     }
-  ]
+  ],
+  "nyc": {
+    "extends": "@istanbuljs/nyc-config-typescript",
+    "excludeAfterRemap": false,
+    "report-dir": "cypress-coverage"
+  }
 }

package/src/configs/components/image.json

@@ -149,6 +149,10 @@
     {
       "name": "error",
       "title": "加载失败"
+    },
+    {
+      "name": "tap",
+      "title": "点击"
     }
   ],
   "meta": {

package/src/mp/components/container/index.js

@@ -3,6 +3,10 @@ Component({
     virtualHost: true,
   },
   properties: {
+    id: {
+      type: String,
+      value: '',
+    },
     className: {
       type: String,
       value: '',

package/src/mp/components/image/index.js

@@ -37,76 +37,78 @@ Component({
       value: false,
     },
     imgPreview: {
-        type: Boolean,
-        value: false
+      type: Boolean,
+      value: false,
     },
     maskClosable: {
-        type: Boolean,
-        value: true
-    }
+      type: Boolean,
+      value: true,
+    },
   },
   methods: {
-    load: function(e) {
+    load: function (e) {
       this.triggerEvent('error', e.detail);
       this.setData({
         realHeight: e.detail.height,
-        realWidth: e.detail.width
+        realWidth: e.detail.width,
       });
     },
-    error: function(e) {
+    error: function (e) {
       this.setData({
         isError: true,
-        clsx: this.properties.className + 'weda-image-error'
+        clsx: this.properties.className + 'weda-image-error',
       });
       this.triggerEvent('error', e.detail);
     },
-    onImgTap: function() {
-        if(this.properties.imgPreview && !this.data.isError) {
-          // 计算图片预览展示高度
-          const {windowWidth, windowHeight} = wx.getSystemInfoSync();
-          const showHeight = windowWidth / (this.data.realWidth / this.data.realHeight);
-          const offsetHeight = windowHeight / 2 - (showHeight / 2);
-            this.setData({
-              showImg: true,
-              zoom: 1,
-              previewTranslateY: 0,
-              previewTranslateX: 0,
-              showHeight,
-              offsetHeight
-            });
-        }
+    onImgTap: function (e) {
+      if (this.properties.imgPreview && !this.data.isError) {
+        // 计算图片预览展示高度
+        const { windowWidth, windowHeight } = wx.getSystemInfoSync();
+        const showHeight =
+          windowWidth / (this.data.realWidth / this.data.realHeight);
+        const offsetHeight = windowHeight / 2 - showHeight / 2;
+        this.setData({
+          showImg: true,
+          zoom: 1,
+          previewTranslateY: 0,
+          previewTranslateX: 0,
+          showHeight,
+          offsetHeight,
+        });
+      }
+      this.triggerEvent('tap', e.detail);
     },
-    onPinch: function(ev) {
+    onPinch: function (ev) {
       let zoom = ev.detail.zoom;
       // zoom = this.data.zoom * zoom;
-      if(zoom > 5) {
+      if (zoom > 5) {
         zoom = 5;
       }
-      if(zoom < 0.6) {
+      if (zoom < 0.6) {
         zoom = 0.6;
       }
       this.setData({
-        zoom
+        zoom,
       });
     },
-    onPressMove: function(ev) {
+    onPressMove: function (ev) {
       this.setData({
         previewTranslateX: this.data.previewTranslateX + ev.detail.deltaX,
-        previewTranslateY: this.data.previewTranslateY + ev.detail.deltaY
+        previewTranslateY: this.data.previewTranslateY + ev.detail.deltaY,
       });
     },
-    onMaskClick: function() {
-        if(this.properties.maskClosable) {
-            this.setData({
-                showImg: false
-            });
-        }
-    },
-    onCloseClick: function() {
+    onMaskClick: function () {
+      if (this.properties.maskClosable) {
         this.setData({
-            showImg: false
+          showImg: false,
         });
-    }
+      }
+    },
+    onCloseClick: function () {
+      this.setData({
+        showImg: false,
+      });
+    },
   },
   data: {
     showImg: false,
@@ -118,13 +120,13 @@ Component({
     previewTranslateX: 0,
     previewTranslateY: 0,
     realHeight: 0,
-    realWidth: 0
+    realWidth: 0,
   },
   observers: {
-    className: function() {
+    className: function () {
       const className = this.properties.className;
       this.setData({
-        clsx: className
+        clsx: className,
       });
     },
     src: function () {
@@ -147,35 +149,35 @@ Component({
         });
       }
     },
-    'fit, mode': function(fit, mode) {
-      if(fit) {
-        switch(fit) {
+    'fit, mode': function (fit, mode) {
+      if (fit) {
+        switch (fit) {
           case 'cover':
             this.setData({
-              imgMode: 'aspectFill'
+              imgMode: 'aspectFill',
             });
             break;
           case 'contain':
             this.setData({
-              imgMode: 'aspectFit'
+              imgMode: 'aspectFit',
             });
             break;
           case 'fill':
             this.setData({
-              imgMode: 'scaleToFill'
+              imgMode: 'scaleToFill',
             });
             break;
           default:
             this.setData({
-              imgMode: 'scaleToFill'
+              imgMode: 'scaleToFill',
             });
             break;
         }
       } else {
         this.setData({
-          imgMode: mode
+          imgMode: mode,
         });
       }
-    }
+    },
   },
 });

package/src/mp/components/text/index.wxss

@@ -7,20 +7,20 @@
   /* white-space: pre-line; */
 }
 .weda-text.level_1 {
-  font-size: 64rpx !important;
+  font-size: 64px !important;
 }
 .weda-text.level_2 {
-  font-size: 56rpx !important;
+  font-size: 56px !important;
 }
 .weda-text.level_3 {
-  font-size: 48rpx !important;
+  font-size: 48px !important;
 }
 .weda-text.level_4 {
-  font-size: 40rpx !important;
+  font-size: 40px !important;
 }
 .weda-text.level_5 {
-  font-size: 32rpx !important;
+  font-size: 32px !important;
 }
 .weda-text.level_6 {
-  font-size: 24rpx !important;
+  font-size: 24px !important;
 }

package/src/web/components/button/index.tsx

@@ -73,7 +73,7 @@ return (
     </TeaButton>
   </ConfigProvider>
 );
-}
+};
 
 function toTeaButtonType(type: PropsType['type'] ): ButtonProps['type'] {
   if(type === 'primary') return type;

package/src/web/components/form/input/index.css

@@ -1,5 +1,5 @@
 /*  ios safari 特别是小屏幕 iphone SE 之流
-    weui自带cell的padding会把input压倒很小，
+    weui自带cell的padding会把input压到很小，
     容易点不到，需要特殊处理
     START
  */
@@ -11,10 +11,12 @@
     padding: 28px 16px;
 }
 
-.weda-ui.weda-input .weui-cell > label {
+.weda-ui.weda-input .weui-cell.weda-formcells__label {
     padding: 16px;
 }
-
+.weda-ui.weda-input .weda-formcells__label.weui-cell label {
+    padding: 0;
+}
 .weda-ui.weda-input .weui-cell {
     padding: 0;
 }

package/src/web/components/form/input/index.tsx

@@ -94,6 +94,7 @@ const fieldEl = platform === 'h5' ? <div className={subCls}>
         onFocus={onFocus}
         onBlur={onBlur}
         onKeyDown={onKeyDown}
+        role="input"
       />
       {clearable &&
         <button

package/src/web/components/image/image.tsx

@@ -4,10 +4,10 @@ import { ConfigProvider, ImagePreview } from 'tea-component';
 import { usePlatform } from '../../utils/platform';
 import { useGesture } from '@use-gesture/react';
 import { PropsType } from './index';
-interface ImageInnerPropsType extends Omit<PropsType, 'fit'|'mode'> {
-  objectFit: React.CSSProperties['objectFit'],
-  isError: boolean,
-  setIsError: React.Dispatch<React.SetStateAction<boolean>>
+interface ImageInnerPropsType extends Omit<PropsType, 'fit' | 'mode'> {
+  objectFit: React.CSSProperties['objectFit'];
+  isError: boolean;
+  setIsError: React.Dispatch<React.SetStateAction<boolean>>;
 }
 export function ImageInner({
   objectFit,
@@ -20,12 +20,12 @@ export function ImageInner({
   events,
   lazyLoad,
   maskClosable,
-  imgPreview
+  imgPreview,
 }: ImageInnerPropsType) {
   const platform = usePlatform();
   const [imgShow, setImgShow] = React.useState(false);
   const onMaskClick = () => {
-    if(maskClosable) {
+    if (maskClosable) {
       setImgShow(false);
     }
   };
@@ -34,12 +34,12 @@ export function ImageInner({
   const realWidth = React.useRef(0);
   const realHeight = React.useRef(0);
   const [offsetHeight, setOffsetHeight] = React.useState(0);
-  const [translateX, setTranslateX]= React.useState(0);
-  const [translateY, setTranslateY]= React.useState(0);
+  const [translateX, setTranslateX] = React.useState(0);
+  const [translateY, setTranslateY] = React.useState(0);
   const [previewScale, setPreviewScale] = React.useState(1);
   React.useEffect(() => {
     // 防止触发浏览器的放大缩小
-    const handler = e => e.preventDefault();
+    const handler = (e) => e.preventDefault();
     document.addEventListener('gesturestart', handler);
     document.addEventListener('gesturechange', handler);
     return () => {
@@ -48,36 +48,38 @@ export function ImageInner({
     };
   }, []);
 
-  const bind = useGesture({
-    onClick: ({event}) => {
-      // 防止冒泡出发关闭预览
-      event.stopPropagation();
+  const bind = useGesture(
+    {
+      onClick: ({ event }) => {
+        // 防止冒泡出发关闭预览
+        event.stopPropagation();
+      },
+      onPinch: ({ offset }) => {
+        const [s] = offset;
+        setPreviewScale(s);
+      },
+      onDrag: ({ offset, event }) => {
+        event.stopPropagation();
+        const [x, y] = offset;
+        setTranslateX(x);
+        setTranslateY(y);
+      },
     },
-    onPinch: ({offset}) => {
-      const [s] = offset;
-      setPreviewScale(s);
-    },
-    onDrag: ({offset, event}) => {
-      event.stopPropagation();
-      const [x, y] = offset;
-      setTranslateX(x);
-      setTranslateY(y);
-      
-    },
-  }, {
-    drag: {
-      delay: true,
-      preventDefault: true,
-    },
-    pinch: {
-      scaleBounds: {min: 0.6, max: 5},
-      pointer: {
-        touch: true
-      }
+    {
+      drag: {
+        delay: true,
+        preventDefault: true,
+      },
+      pinch: {
+        scaleBounds: { min: 0.6, max: 5 },
+        pointer: {
+          touch: true,
+        },
+      },
     }
-  });
+  );
 
-  if(platform === 'h5' || !imgPreview || isError) {
+  if (platform === 'h5' || !imgPreview || isError) {
     return (
       <>
         <img
@@ -90,7 +92,7 @@ export function ImageInner({
           src={src}
           onLoad={(e) => {
             const img = e.target as HTMLImageElement;
-            const {naturalHeight, naturalWidth} = img;
+            const { naturalHeight, naturalWidth } = img;
             realHeight.current = naturalHeight;
             realWidth.current = naturalWidth;
             setIsError(false);
@@ -100,74 +102,86 @@ export function ImageInner({
             setIsError(true);
             events.error && events.error({}, { originEvent: e });
           }}
-          onClick={
-            () => {
-              if(imgPreview && !isError) {
-                setTranslateX(0);
-                setTranslateY(0);
-                setPreviewScale(1);
-                const windowHeight = window.innerHeight;
-                const windowWidth = window.innerWidth;
-                const ratio = (realWidth.current / realHeight.current);
-                const height = windowWidth / ratio;
-                setOffsetHeight(windowHeight / 2 - (height / 2));
-                setShowHeight(height);
-                setImgShow(true);
+          onClick={(e) => {
+            if (imgPreview && !isError) {
+              setTranslateX(0);
+              setTranslateY(0);
+              setPreviewScale(1);
+              const windowHeight = window.innerHeight;
+              const windowWidth = window.innerWidth;
+              let ratio = realWidth.current / realHeight.current;
+              if(Number.isNaN(ratio)) {
+                ratio = 1;
               }
+              const height = windowWidth / ratio;
+              setOffsetHeight(windowHeight / 2 - height / 2);
+              setShowHeight(height);
+              setImgShow(true);
             }
-          }
+            events.tap && events.tap({}, { originEvent: e });
+          }}
           loading={lazyLoad ? 'lazy' : undefined}
         />
-        {imgShow &&
-          <div className="weda-img-mask" onClick={onMaskClick} >
-            <div onClick={() => setImgShow(false)} className="weda-img-modal-close-btn">
-              <i className="weui-icon-clear" style={{color: 'white'}}></i>
+        {imgShow && (
+          <div className="weda-img-mask" onClick={onMaskClick}>
+            <div
+              onClick={() => setImgShow(false)}
+              className="weda-img-modal-close-btn"
+            >
+              <i className="weui-icon-clear" style={{ color: 'white' }}></i>
             </div>
-            
-            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-            <div {...bind()} className="weda-img-preview" style={{
-              touchAction: 'none',
-              backgroundImage: `url(${src})`,
-              width: '100%',
-              height: showHeight,
-              marginTop: offsetHeight,
-              transform: `translate(${translateX}px, ${translateY}px) scale(${previewScale})`
-            }}></div>
+            <div
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              {...bind()}
+              className="weda-img-preview"
+              style={{
+                touchAction: 'none',
+                backgroundImage: `url(${src})`,
+                width: '100%',
+                height: showHeight,
+                marginTop: offsetHeight,
+                transform: `translate(${translateX}px, ${translateY}px) scale(${previewScale})`,
+              }}
+            ></div>
           </div>
-        }
+        )}
       </>
     );
   } else {
     return (
       <ConfigProvider classPrefix="wedatea2td">
-      <ImagePreview
-        previewSrc={src}
-        maskClosable={maskClosable}
-        className={className}
-        style={{...style,
-        objectFit}}
-      >
-        {open => <img
-          style={{
-            objectFit,
-            cursor: 'zoom-in',
-            ...style,
-          }}
+        <ImagePreview
+          previewSrc={src}
+          maskClosable={maskClosable}
           className={className}
-          alt={alt}
-          src={src}
-          onLoad={(e) => {
-            setIsError(false);
-            events.load && events.load({}, { originEvent: e });
-          }}
-          onError={(e) => {
-            setIsError(true);
-            events.error && events.error({}, { originEvent: e });
-          }}
-          loading={lazyLoad ? 'lazy' : undefined}
-          onClick={open}
-        />}
-      </ImagePreview>
+          style={{ ...style, objectFit }}
+        >
+          {(open) => (
+            <img
+              style={{
+                objectFit,
+                cursor: 'zoom-in',
+                ...style,
+              }}
+              className={className}
+              alt={alt}
+              src={src}
+              onLoad={(e) => {
+                setIsError(false);
+                events.load && events.load({}, { originEvent: e });
+              }}
+              onError={(e) => {
+                setIsError(true);
+                events.error && events.error({}, { originEvent: e });
+              }}
+              loading={lazyLoad ? 'lazy' : undefined}
+              onClick={(e) => {
+                open();
+                events.tap && events.tap({}, { originEvent: e });
+              }}
+            />
+          )}
+        </ImagePreview>
       </ConfigProvider>
     );
   }