@cloudbase/weda-ui 0.2.11 → 0.2.15

package/CHANGELOG.md

@@ -0,0 +1,240 @@
+> 为了更好的区分组件类型，仅在更新日志中进行如下约定：低码组件使用大驼峰命名，源码组件使用小驼峰命名。
+
+## [1.2] - 2021-08-24
+
+### Changed
+
+- swiper 轮播
+
+  - 添加示例图片
+
+## [1.1] - 2021-08-09
+
+### Added
+
+- text 文本
+
+  - 新增事件 `tap`
+
+- modal 模态弹窗
+
+  - 新增组件 `modal`, web 使用 tea 样式用于 PC 样式响应式。
+
+- showModal 显示弹窗
+
+  - 新增动作 `showModal`，用于平台方法的 PC 大屏响应式版本，小程序对齐 wx.showModal api。
+
+- FormTextarea 表单多行输入
+
+  - 新增组件 `FormTextarea`, 用以替代被移除的 `Textarea` 组件
+
+- link 链接
+
+  - 新增组件 `link`，可通过插槽来配置自定义内容
+
+### Changed
+
+- button 按钮
+
+  - 添加响应式样式，屏幕宽度大于 **1024px** 时显示为方角
+
+- swiper 轮播
+
+  - 添加响应式样式，屏幕宽度大于 1024px 时显示为方角
+
+- FormRadio 表单单选
+
+  - 修复多个单选组件并存导致的选中问题
+
+- FormCheckbox 表单复选
+
+  - 修复多个复选组件并存导致的选中问题
+
+- 所有组件:
+  - 表单组件的默认背景色，统一配置为透明
+  - 组件最外层容器统一添加 `weda-ui` 类名，组件库级别重置样式及公共样式都限制在 `weda-ui` 类名下，防止污染
+  - 规范了组件事件的触发方式
+
+## [1.0] - 2021-06-10
+
+### Added
+
+- text 文本:
+
+  - 新增属性 `maxLines` 最大显示行数
+
+- FormRegion 表单区域选择:
+
+  - 新增组件 `FormRegion`, 用以替代被移除的 `RegionPicker` 组件
+
+### Removed
+
+- swiper 轮播:
+
+  - 移除属性 `displayMultipleItems`, `nextMargin`, `previousMargin`, `updated`
+  - 移除 `transition` 和 `animationfinished` 事件
+
+- text 文本:
+
+  - 移除属性 `decode` 是否解码
+  - 移除 `tap` 事件
+
+- image 图片:
+
+  - 移除属性 `webp` 能否解析 webp 格式
+
+- button 按钮:
+
+  - 移除属性 `plain` 镂空
+  - 移除属性 `openType` 微信开放能力的 `获取用户信息` 选项
+
+- FormInput 表单输入:
+
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormRadio 表单单选:
+
+  - 移除属性 `validateTrigger` 字段触发校验类型
+  - 移除属性 `validateStatus` 校验状态
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormCheckbox 表单复选:
+
+  - 移除属性 `validateTrigger` 字段触发校验类型
+  - 移除属性 `validateStatus` 校验状态
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormSwitch 表单开关:
+
+  - 移除属性 `type` 显示类型
+  - 移除属性 `checkedIcon` 选中图标
+  - 移除属性 `uncheckedIcon` 非选中图标
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormDate 表单日期:
+
+  - 移除属性 `suffixType` 操作尾部样式类型
+  - 移除属性 `suffixText` 操作尾部文案
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormTime 表单时间:
+
+  - 移除属性 `suffixType` 操作尾部样式类型
+  - 移除属性 `suffixText` 操作尾部文案
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormSelect 表单选择:
+
+  - 移除属性 `suffixType` 操作尾部样式类型
+  - 移除属性 `suffixText` 操作尾部文案
+  - 移除属性 `validateTrigger` 字段触发校验类型
+  - 移除属性 `validateStatus` 校验状态
+  - 移除属性 `rules` 校验规则
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormPhone 表单手机号码:
+
+  - 移除属性 `maxLength` 最大输入长度
+  - 移除属性 `rules` 校验规则
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormEmail 表单邮件地址:
+
+  - 移除属性 `rules` 校验规则
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormUrl 表单邮件地址:
+
+  - 移除属性 `rules` 校验规则
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormItem 表单元素:
+
+  - 移除组件
+
+- FormCell 表单表格:
+
+  - 移除组件
+
+- RegionPicker 地域选择:
+
+  - 移除组件
+
+- Textarea 多行输入:
+
+  - 移除组件, 待优化后重新上架
+
+### Changed
+
+- image 图片:
+
+  - 默认大小由 320\*240 rpx 调整为 240\*240 rpx
+
+- text 文本:
+
+  - 跟随小程序定义，`selectabble` 变更为 `userSelect`
+  - 样式调整：默认布局模式从 `inline` 编程 `block`
+
+- button 按钮：
+
+  - 样式调整：从默认宽度 `100%` 调整为默认 `184px`
+
+- Form 表单容器:
+
+  - 样式优化
+
+- FormInput 表单输入:
+
+  - 样式优化
+
+- FormRadio 表单单选:
+
+  - 属性 `name` 表单字段名称，默认值由 `thisIsRadioKey` 改为 `formRadio`
+  - 样式优化
+
+- FormCheckbox 表单复选:
+
+  - 属性 `name` 表单字段名称，默认值由 `thisIsCheckboxKey` 改为 `formCheckbox`
+  - 样式优化
+
+- FormSwitch 表单开关:
+
+  - 属性 `name` 表单字段名称，默认值由 `thisIsSelectKey` 改为 `formSwitch`
+  - 样式优化
+
+- FormDate 表单日期:
+
+  - 属性 `name` 表单字段名称，默认值由 `thisIsDateKey` 改为 `formDate`
+  - 样式优化
+
+- FormTime 表单时间:
+
+  - 属性 `name` 表单字段名称，默认值由 `thisIsTimeKey` 改为 `formTime`
+  - 样式优化
+
+- FormSelect 表单选择:
+
+  - 属性 `name` 表单字段名称，默认值由 `thisIsSelectKey` 改为 `formSelect`
+  - 样式优化
+
+- FormPhone 表单手机号码:
+
+  - 样式优化
+
+- FormEmail 表单邮件地址:
+
+  - 样式优化
+
+- FormUrl 表单邮件地址:
+
+  - 样式优化

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.11",
+  "version": "0.2.15",
   "main": "./src/index.js",
   "module": "./src/index",
   "miniprogram": "mpdist",
@@ -16,15 +16,32 @@
     "access": "public"
   },
   "scripts": {
-    "test": "jest test --env=jsdom --watch",
-    "test-once": "jest test --env=jsdom",
+    "dev": "tcb lowcode debug",
+    "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",
     "prepare": "husky install",
     "build-npm": "rimraf dist && mkdir dist && cp -r src/web dist/ && cp -r src/configs dist/ && cp src/index.js dist/",
     "build-mp": "rimraf mpdist && cp -r src/mp mpdist",
-    "clear:snap": "rimraf ./src/test/__snapshots__"
+    "clear:snap": "rimraf ./src/test/__snapshots__",
+    "size": "npm run build:cli && size-limit"
   },
   "keywords": [
     "weda",
@@ -36,16 +53,17 @@
   "description": "腾讯云微搭低代码组件库模板",
   "dependencies": {
     "@cloudbase/ui-react": "^1.0.4",
-    "@use-gesture/react": "^10.1.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",
-    "dayjs": "^1.10.6",
+    "dayjs": "^1.10.7",
     "lodash.isequal": "^4.5.0",
-    "moment": "^2.29.1",
-    "object.fromentries": "^2.0.4",
+    "object.fromentries": "^2.0.5",
     "prop-types": "^15.7.2",
-    "react-easy-swipe": "^0.0.21",
-    "react-use": "^15.3.4",
+    "react-easy-swipe": "0.0.22",
     "tea-component": "^2.7.3",
     "uuid": "8.3.2",
     "weui": "^2.4.4",
@@ -55,48 +73,73 @@
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.15.6",
-    "@babel/preset-react": "^7.14.5",
-    "@cloudbase/lowcode-build-dependence": "^0.7.2",
+    "@babel/preset-env": "^7.16.5",
+    "@babel/preset-react": "^7.16.5",
+    "@babel/preset-typescript": "^7.16.5",
+    "@cloudbase/lowcode-build-dependence": "^0.9.0",
+    "@commitlint/cli": "^16.0.2",
     "@commitlint/config-conventional": "^13.2.0",
-    "@storybook/addon-actions": "^6.3.10",
-    "@storybook/addon-essentials": "^6.3.10",
-    "@storybook/addon-links": "^6.3.10",
-    "@storybook/addon-storyshots": "^6.3.10",
-    "@storybook/react": "^6.3.10",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.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",
+    "@storybook/addon-links": "^6.4.9",
+    "@storybook/addon-storyshots": "^6.4.9",
+    "@storybook/react": "^6.4.9",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
-    "babel-jest": "^27.2.0",
-    "eslint": "^7.32.0",
+    "@types/jest": "^27.0.3",
+    "@types/resize-observer-browser": "^0.1.6",
+    "@typescript-eslint/eslint-plugin": "^5.9.0",
+    "@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-jest": "^25.0.5",
-    "eslint-plugin-react": "^7.26.1",
-    "husky": "^7.0.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-jest": "^25.3.0",
+    "eslint-plugin-react": "^7.27.1",
+    "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.2.0",
+    "jest": "^27.4.5",
     "less": "^4.1.2",
-    "miniprogram-simulate": "^1.4.0",
+    "miniprogram-simulate": "^1.4.3",
+    "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",
-    "ts-jest": "^27.0.5",
-    "typescript": "^4.4.3"
+    "size-limit": "^7.0.5",
+    "ts-jest": "^27.1.1",
+    "ts-loader": "^8.2.0",
+    "typescript": "^4.5.4",
+    "webpack": "4.44.2",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.3"
   },
-  "jest": {
-    "transformIgnorePatterns": [
-      "node_modules/(?!(react-syntax-highlighter)/)"
-    ],
-    "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/test/__mocks__/fileMock.js",
-      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
-    }
-  },
-  "babel": {
-    "presets": [
-      "@babel/preset-env",
-      "@babel/preset-react"
+  "nano-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix"
     ]
+  },
+  "size-limit": [
+    {
+      "path": ".temp/dist/*.main.*",
+      "webpack": false,
+      "limit": "700 KB"
+    }
+  ],
+  "nyc": {
+    "extends": "@istanbuljs/nyc-config-typescript",
+    "excludeAfterRemap": false,
+    "report-dir": "cypress-coverage"
   }
 }

package/src/configs/components/button.json

@@ -15,12 +15,16 @@
         "x-component": "radio",
         "enum": [
           {
-            "label": "default",
+            "label": "中",
             "value": "default"
           },
           {
-            "label": "mini",
+            "label": "小",
             "value": "mini"
+          },
+          {
+            "label": "大",
+            "value": "large"
           }
         ],
         "x-category": "基础属性"
@@ -182,7 +186,7 @@
     "name": "Button",
     "title": "按钮",
     "description": "按钮组件",
-    "icon": "./button.svg",
+    "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/Button.svg",
     "category": "展示",
     "categoryOrder": 1,
     "componentOrder": 1

package/src/configs/components/form/richText.json

@@ -114,7 +114,7 @@
       "title": "富文本",
       "description": "富文本编辑器",
       "category": "表单",
-      "icon": "//main.qcloudimg.com/raw/adc8cd1b6eb93c0f890ca2322e509a6b/RichText.svg"
+      "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/RichText.svg"
   },
   "events": [
     {

package/src/configs/components/form/uploader.json

@@ -108,6 +108,34 @@
         "title": "是否返回单张图片",
         "x-category": "基础属性"
       },
+      "required": {
+        "type": "boolean",
+        "title": "是否必填",
+        "default": false,
+        "x-index": 190,
+        "x-category": "高级属性",
+        "x-linkages": [
+          {
+            "type": "value:visible",
+            "target": "*(requiredFlag,requiredMsg)",
+            "condition": "{{$self.value}}"
+          }
+        ]
+      },
+      "requiredMsg": {
+        "type": "string",
+        "title": "校验错误提示",
+        "default": "该项为必填项",
+        "x-index": 191,
+        "x-category": "高级属性"
+      },
+      "requiredFlag": {
+        "type": "boolean",
+        "title": "显示必填标记",
+        "default": false,
+        "x-index": 192,
+        "x-category": "高级属性"
+      },
       "defaultValue": {
         "x-category": "基础属性",
         "title": "初始默认值",
@@ -136,6 +164,6 @@
     "title": "上传图片",
     "description": "上传图片组件",
     "category": "表单",
-    "icon": "//main.qcloudimg.com/raw/f781e6bc48efa1cf926fc768fceeab5e/Uploader.svg"
+    "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/UploadImage.svg"
   }
 }