@cloudbase/weda-ui 3.4.8 → 3.4.9

package/README.md

@@ -20,7 +20,7 @@
     ├── configs             # 组件类型声明目录
     │   ├── actions         # 组件库方法类型声明
     │   ├── components      # 组件类型声明
-    │   └── index.js        # 组件类型声明入口
+    │   └── index.ts        # 组件类型声明入口
     ├── mp                  # 小程序组件
     │   ├── actions         # 小程序组件方法实现
     │   ├── components      # 小程序组件实现
@@ -46,6 +46,8 @@
 
 ### 编写组件
 
+首先请阅读 [组件标准化开发原则](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002427443)
+
 编写能在低码平台运行的组件需要各自平台的**标准组件源码**和**组件描述**。具体可参考 [实现自定义 button 组件 | 云开发 CloudBase - 一站式后端云服务](https://docs.cloudbase.net/lowcode/custom-components/quick-start/comp)
 
 #### 处理组件通用属性
@@ -111,10 +113,6 @@ export default function Container({ children, events, ...args }) {
 }
 ```
 
-#### 调用运行时框架接口
-
-如果在组件中使用低码应用运行时框架提供的工具方法或者数据源相关能力的时候，可以参考 [应用客户端 SDK](https://docs.cloudbase.net/lowcode/framework/app/app) 以及 [在应用中使用数据源及其他后端服务](https://docs.cloudbase.net/lowcode/datasource/usage)
-
 #### 编写组件描述文件
 
 当前编写的组件都是各个平台的标准组件，他们和微搭低码平台需要一个配置来互相连接起来。
@@ -127,14 +125,27 @@ export default function Container({ children, events, ...args }) {
 
 ### 调试组件库
 
-组件编写完成后，在腾讯云微搭低代码编辑器调试组件库，在当前目录执行：
+#### 本地预览
 
-```
-tcb lowcode debug
-```
+对于 web 组件，我们在模板中集成了 [storybook] 的使用环境。编写 [story] 即可简单的在本地预览组件效果。具体步骤：
+
+1. 编写 [story]，story 是 storybook 的组件状态单元，描述了组件在一组特定状态下的行为。
+2. 当你为组件编写了足够多的用例后，你可以运行 `npm run storybook` 命令来互动预览本地组件。
+
+#### 应用编辑器中调试 web 组件
+
+如果 web 端的组件依赖运行态环境才能预览实际效果，可以在应用编辑器中预览
+
+[如何在应用编辑器中直接调试本地官方组件](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002491961)
+
+#### 调试小程序组件
+
+如果要测试组件小程序端的效果, 可执行`tcb lowcode publish` 发布到自己账号下，然后新建一个应用来测试
 
 ### 组件自动化测试
 
+#### 单元测试
+
 微搭官方组件库需要单元测试覆盖率达到 80% 以上才能发布，我们集成进了 jest 和 小程序模拟器来协助组件的多端测试。
 
 编写完测试用例后运行 `npm test` 执行测试命令。
@@ -146,44 +157,68 @@ tcb lowcode debug
 - <https://jestjs.io/docs/snapshot-testing>
 - <https://storybook.js.org/tutorials/intro-to-storybook/react/en/test/>
 
+#### E2E 测试
+
+组件最终使用过程中因为有构建代码生成和运行、编辑态代码等外部因素，容易出现开发没问题，发布之后才发现问题。而且现网用户用法千奇百怪，一些非预期用法也可能会新版本发布后出现问题。所以用配合 render 使用 E2E 自动化测试，以用户通过编辑器生成的 CALS 和组件 dependencies 作为输入，渲染输出可以执行的应用，以覆盖最终用户态的状态。
+
+E2E 测试采用 Cypress 来进行，相比 Jest 模拟 dom，更适合对实际的样式和运行效果进行测试，推荐复杂一点的组件都要写 E2E 测试。
+
+请参考 [组件库 E2E 测试](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002369725) 和 [测试用例创建指北](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002370781)
+
+### 编写组件文档
+
+组件库对外的文档统一发布技术文档站：https://docs.cloudbase.net/lowcode/components/
+
+组件上线前需要提前准备好文档，具体可以参考 https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002472151
+
+研发同学可以在代码仓库中编写代码的同时进行文档的编写，文档放置在 `src/docs/compsdocs/` 目录中
+
+完整的文档示例可参考 [按钮组件文档](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdButton) ，文档源码存放在 `/src/docs/compsdocs/show/WdButton.mdx`
+
 ### 发布组件库
 
+#### 个人账号
+
 组件开发完成后，提交组件到微搭低代码平台，该操作会将组件发布在自己的个人账号下，可以在应用中预览
 
 ```
 tcb lowcode publish
 ```
 
-如果需要发布官方组件库，需要在提交 MR 通过后，通过流水线发布 <http://tencent.coding.woa.com/p/CloudBase/ci/job/292970/build/current>
+然后进入到编辑器的组件库列表中，再次点击发布，即可在自己的账号下的应用中使用
 
-### 更多参考信息
+#### 正式发布
 
-组件开发更多信息请[参考文档](https://docs.cloudbase.net/lowcode/custom-components/quick-start/comps.html)。
-
-## 其他
+如果需要发布官方组件库，需要在提交 MR 通过后，通过流水线发布 <http://tencent.coding.woa.com/p/CloudBase/ci/job/292970/build/current>
 
-为了让你的组件开发工作更加便捷和稳定，我们集成了 [storybook] 及组件测试工具来辅助组件的开发。虽然 storybook 和组件测试不是必须的，我们仍然建议你使用他们来保证组件始终工作正常。
+## 常见问题
 
-### 使用 storybook 本地预览组件
+- 办公网络下执行 `tcb lowcode publish` 出现网络异常报错：建议切换 iOA 到 PAC 模式
 
-对于 web 组件，我们在模板中集成了 [storybook] 的使用环境。编写 [story] 即可简单的在本地预览组件效果。具体步骤：
+## 参考信息
 
-1. 编写 [story]，story 是 storybook 的组件状态单元，描述了组件在一组特定状态下的行为。
-2. 当你为组件编写了足够多的用例后，你可以运行 `npm run storybook` 命令来互动预览本地组件。
+组件开发更多信息请[参考文档](https://docs.cloudbase.net/lowcode/custom-components/quick-start/comps.html)。
 
-### 调试预览小程序组件
+### 编辑器协议机制
 
-对于小程序组件，我们不能直接在浏览器中去预览调试。组件编写完成后需要运行 `tcb lowcode debug` 打开组件编辑器，通过组件编辑器中 IDE 预览功能来进行微信开发者工具和手机的真实预览。
+- [组件内模板机制](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002353133) :组件可自带默认结构、属性、事件
+- [单组件升级机制](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002411487) : 针对不再兼容的组件可以引导进行迁移
+- [编辑器检查机制](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002459983) : 可在发布应用前进行检查
+- [样式配置属性屏蔽 (inlineStyleForm)](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002470249) :组件可以屏蔽无关样式配置
+- [右侧面板提示 (panelTips)](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002460139) : 可在右侧编辑区提示相关信息
+- [组件相对位置限制 (positionConstraint)](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002466153):组件可以针对可以放入的组件进行限制
+- [自定义组件 id 名 (componentName)](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002474643)
+- [搜索关键词 (keyWords)](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002460167)
+- [微搭编辑器组件显示隐藏](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002271581)
 
-- 小程序调试需要从编辑器请求中拷包本地构建生成小程序代码，可以参考 <http://tapd.oa.com/TCB_new/markdown_wikis/show/#1220422223002075389>
+### 运行时框架接口
 
-[腾讯云微搭低代码]: (https://cloud.tencent.com/product/weda)
-[小程序组件]: (https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)
-[react]: (https://reactjs.org/)
-[storybook]: (https://storybook.js.org/)
-[http 调用]: (https://developers.weixin.qq.com/miniprogram/dev/devtools/http.html)
-[story]: (https://storybook.js.org/docs/react/get-started/whats-a-story)
+如果在组件中使用低码应用运行时框架提供的工具方法或者数据源相关能力的时候，可参考 [API 列表](https://docs.cloudbase.net/lowcode/api/api-referrence)
 
-```
+### 其他
 
-```
+- [腾讯云微搭低代码](https://cloud.tencent.com/product/weda)
+- [小程序组件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)
+- [react](https://reactjs.org/)
+- [storybook](https://storybook.js.org/)
+- [story](https://storybook.js.org/docs/react/get-started/whats-a-story)

package/dist/configs/components/carousel.json

@@ -38,6 +38,12 @@
                             "type": "string",
                             "title": "图片高度",
                             "default": "160px",
+                            "x-rules": [
+                                {
+                                    "message": "不允许设置百分比高度",
+                                    "pattern": "^\\d+([^%]+?)?$"
+                                }
+                            ],
                             "x-index": 40
                         },
                         "width": {
@@ -293,11 +299,15 @@
     ],
     "meta": {
         "title": "轮播图",
-        "description": "轮播图",
+        "description": "用于快速在页面搭建轮播图展示效果，并支持轮播图的跳转、播放配置。",
         "category": "展示",
         "categoryOrder": 400,
         "componentOrder": 260,
-        "icon": "../icons/Carousel.svg"
+        "icon": "../icons/Carousel.svg",
+        "docsUrl": "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/Swiper"
+    },
+    "configMeta": {
+        "docsUrl": "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/Swiper"
     },
     "mpOrigin": "swiper"
 }

package/dist/configs/components/chart/bar.json

@@ -964,7 +964,7 @@
             "unit": {
                 "type": "number",
                 "title": "数值量级",
-                "x-index": "360",
+                "x-index": 360,
                 "default": 1,
                 "x-component": "select",
                 "enum": [
@@ -1095,7 +1095,7 @@
     "events": [],
     "meta": {
         "title": "柱状图",
-        "description": "柱状图组件主要用于报表场景下展示数据之间大小的对比，支持小程序、H5 和 PC Web 端。",
+        "description": "用于报表场景下展示数据之间大小的对比。",
         "icon": "../../icons/Bar.svg",
         "category": "图表",
         "categoryOrder": 600,

package/dist/configs/components/chart/line.js

@@ -526,7 +526,7 @@ const data = Type.Object({
     }),
     setColor: Type.Array(Type.String({ title: '颜色色号' }), {
         title: '配色',
-        'x-index': 58,
+        'x-index': 59,
         default: ['#2A70E2', '#46B690', '#EDB539', '#E46961', '#4FB3D2', '#805FDC'],
         'x-component': 'color-plate',
         remarks: '当有多个数值字段或维度字段分组时，不同类别将按照不同配色展示，支持自定义色卡',
@@ -963,7 +963,7 @@ const config = defineConfig({
     events: [],
     meta: {
         title: '折线图',
-        description: '折线图组件主要用于报表场景下展示数据随时间变化产生的趋势，支持小程序、H5 和 PC Web 端。',
+        description: '用于报表场景下展示数据随时间变化产生的趋势。',
         icon: '../../icons/Line.svg',
         category: '图表',
         categoryOrder: 600,

package/dist/configs/components/chart/pie.json

@@ -228,7 +228,7 @@
                 "remarks": "展示模型数据的数据来源"
             },
             "datasourceVariable": {
-                "type": "object",
+                "type": "array",
                 "x-index": 44,
                 "title": "数据源变量",
                 "x-category": "基础属性",
@@ -785,7 +785,7 @@
     "events": [],
     "meta": {
         "title": "饼图",
-        "description": "饼图组件主要用于报表场景下表示数据在总体中的占比,支持小程序、H5 和 PC Web 端。",
+        "description": "用于报表场景下表示数据在总体中的占比。",
         "icon": "../../icons/Pie.svg",
         "category": "图表",
         "categoryOrder": 600,

package/dist/configs/components/chart/statisticsCard.json

@@ -422,7 +422,7 @@
     ],
     "meta": {
         "title": "统计卡片",
-        "description": "统计卡片组件主要提供报表场景下的指标数据统计并展示功能，支持小程序、H5 和 PC Web 端。",
+        "description": "提供报表场景下的指标数据统计并展示功能。",
         "icon": "../../icons/StatisticsCard.svg",
         "category": "图表",
         "categoryOrder": 600,

package/dist/configs/components/common/form-input-required.js

@@ -0,0 +1,176 @@
+import { Type } from '../../type-utils';
+export const commonRequiredDataForm = {
+    required: Type.Boolean({
+        title: '必填',
+        default: false,
+        remarks: '启用后该组件强制必填，值不可为空',
+        'x-index': 6,
+        'x-category': '基础属性',
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(requiredFlag,requiredMsg)',
+                condition: '{{$self.value}}',
+            },
+        ],
+    }),
+    requiredFlag: Type.Boolean({
+        title: '必填标识',
+        default: true,
+        remarks: '启用后，组件若要求必填，则会显示必填星号标记',
+        'x-index': 7,
+        'x-category': '基础属性',
+    }),
+    requiredMsg: Type.String({
+        type: 'string',
+        title: '必填校验提示',
+        default: '该项为必填项',
+        remarks: '启用必填，但组件值为空时的提示信息',
+        'x-index': 8,
+        'x-category': '基础属性',
+    }),
+};
+// "rules": {
+//   "type": "array",
+//     "items": {
+//     "type": "object",
+//       "title": "tabs",
+//         "default": {
+//       "icon": "自定义",
+//         "title": "自定义",
+//           "message": "请输入正确格式的内容"
+//     },
+//     "x-display": "({'':'自定义','id':'身份证','bankCard':'银行卡','email':'邮箱','num':'数字','cn':'中文','mobile':'手机号','tel':'固定电话','url':'网址','carId':'车牌','cnName':'中文名','enName':'英文名','userName':'用户名','address':'地址', 'date':'日期','numVcode':'数字验证码(4-8位)', 'vcode':'其他验证码(4位以上的中英文字符)', 'code':'编码', 'hkMc':'港澳通行证', 'taiWan':'台湾通行证', 'passport':'护照', 'money':'金额'})[this.format] || '自定义'",
+//       "properties": {
+//       "format": {
+//         "enum": [
+//           {
+//             "label": "自定义",
+//             "value": ""
+//           },
+//           {
+//             "label": "身份证",
+//             "value": "id"
+//           },
+//           {
+//             "label": "银行卡",
+//             "value": "bankCard"
+//           },
+//           {
+//             "label": "邮箱",
+//             "value": "email"
+//           },
+//           {
+//             "label": "数字",
+//             "value": "num"
+//           },
+//           {
+//             "label": "中文",
+//             "value": "cn"
+//           },
+//           {
+//             "label": "手机号",
+//             "value": "mobile"
+//           },
+//           {
+//             "label": "固定电话",
+//             "value": "tel"
+//           },
+//           {
+//             "label": "网址",
+//             "value": "url"
+//           },
+//           {
+//             "label": "车牌",
+//             "value": "carId"
+//           },
+//           {
+//             "label": "中文名",
+//             "value": "cnName"
+//           },
+//           {
+//             "label": "英文名",
+//             "value": "enName"
+//           },
+//           {
+//             "label": "用户名",
+//             "value": "userName"
+//           },
+//           {
+//             "label": "地址",
+//             "value": "address"
+//           },
+//           {
+//             "label": "日期",
+//             "value": "date"
+//           },
+//           {
+//             "label": "数字验证码(4-8位)",
+//             "value": "numVcode"
+//           },
+//           {
+//             "label": "其他验证码(4位以上的中英文字符)",
+//             "value": "vcode"
+//           },
+//           {
+//             "label": "编码",
+//             "value": "code"
+//           },
+//           {
+//             "label": "港澳通行证",
+//             "value": "hkMc"
+//           },
+//           {
+//             "label": "台湾通行证",
+//             "value": "taiWan"
+//           },
+//           {
+//             "label": "护照",
+//             "value": "passport"
+//           },
+//           {
+//             "label": "金额",
+//             "value": "money"
+//           }
+//         ],
+//           "type": "string",
+//             "title": "校验规则",
+//               "default": "",
+//                 "x-linkages": [
+//                   {
+//                     "type": "value:state",
+//                     "state": {
+//                       "value": "{{ '请输入正确格式的'+($self.value === '' ? '内容' :  $self.props.enum.find(item => { return item.value === $self.value }) && $self.props.enum.find(item => { return item.value === $self.value }).label )}}"
+//                     },
+//                     "target": "dataForm.message",
+//                     "condition": "{{$self.inputed}}"
+//                   },
+//                   {
+//                     "type": "value:state",
+//                     "state": {
+//                       "value": "{{ {'':'', 'id':'/^[1-9]\\\\d{5}(18|19|([23]\\\\d))\\\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\\\d{3}[0-9Xx]$/', 'bankCard':'/^([1-9]{1})(\\d{7,29})$/' , 'email':'/^\\\\w{6,18}@\\\\w{2,4}\\\\.(com)|(net)$/', 'num':'/^-?\\\\d*\\\\.?\\\\d+$/', 'cn':'/^[/u4e00-/u9fa5]$/', 'mobile':'/^[1][3,4,5,6,7,8,9][0-9]{9}$/', 'tel':'/^(0\\\\d{2,3}-)?(\\\\d{7,8})$/', 'url': '/http://([\\\\w-]+\\\\.)+[\\\\w-]+(/[\\\\w- ./?%&=]*)?/', 'carId':'/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/', 'cnName':'/^[/u4e00-/u9fa5]$/', 'enName':'/^[A-Za-z]+$/', 'userName':'/^[a-zA-Z0-9_-]{4,16}$/', 'address': '/.*/', 'date':'/^\\\\d{4}(\\\\-)\\\\d{1,2}\\\\1\\\\d{1,2}$/', 'numVcode':'/^[0-9]{4,8}$/', 'vcode':'/^.{4,}$/', 'hkMc':'/^[LTlt]{1}[0-9]{8}$/', 'code': '/^[1-9][0-9]{5}$/', 'taiWan':'/^[0-9]{8,10}$/', 'passport':'/^((1[45]\\\\d{7})|(G\\\\d{8})|(P\\\\d{7})|(S\\\\d{7,8})|(E\\\\d{8}))?$/', 'money':'/^([1-9][\\\\d]{0,7}|0)(\\\\.[\\\\d]{1,2})?$/'}[$self.value] }}"
+//                     },
+//                     "target": "dataForm.pattern",
+//                     "condition": "{{$self.inputed}}"
+//                   }
+//                 ]
+//       },
+//       "message": {
+//         "type": "string",
+//           "title": "提示信息",
+//             "default": "请输入正确格式的内容"
+//       },
+//       "pattern": {
+//         "type": "string",
+//           "title": "正则",
+//             "x-component": "textarea"
+//       }
+//     }
+//   },
+//   "title": "校验规则",
+//     "default": [],
+//       "remarks": "仅符合校验规则的数据才允许被提交；不符合规则时会展示错误提示信息",
+//         "x-index": 10,
+//           "x-category": "基础属性",
+//             "x-component": "list"
+// },

package/dist/configs/components/container.js

@@ -38,7 +38,7 @@ const config = defineConfig({
     meta: {
         title: '普通容器',
         category: '布局',
-        description: '容器中可放入多个组件，常用于在前端中对页面布局进行管理的场景。 同时也可以通过容器组件绑定数据对容器内的组件进行循环遍历。',
+        description: '可放入多个组件，常用于对组件布局进行管理控制。',
         categoryOrder: 200,
         componentOrder: 50,
         icon: '../icons/Container.svg',