@cloudbase/weda-ui 0.2.17 → 2.0.8

package/README.md

@@ -121,6 +121,9 @@ export default function Container({ children, events, ...args }) {
 
 组件配置默认存放在 `src/configs` 目录下。
 
+#### 组件代码模版生成
+可以通过 `npm run new` 生成上述文件
+
 ### 调试组件库
 
 组件编写完成后，在腾讯云微搭低代码编辑器调试组件库，在当前目录执行：

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/weda-ui",
-  "version": "0.2.17",
+  "version": "2.0.8",
   "main": "./src/index.js",
   "module": "./src/index",
   "miniprogram": "mpdist",
@@ -44,7 +44,8 @@
     "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__",
-    "size": "npm run build:cli && size-limit"
+    "size": "npm run build:cli && size-limit",
+    "new": "npx hygen comp new"
   },
   "keywords": [
     "weda",
@@ -58,11 +59,12 @@
     "@cloudbase/ui-react": "^1.0.4",
     "@loadable/component": "^5.15.2",
     "@react-hookz/web": "^12.3.0",
-    "@tcwd/style-wedatheme": "^1.0.0",
+    "@tcwd/style-wedatheme": "^1.0.1",
     "@use-gesture/react": "^10.2.4",
     "braft-editor": "^2.3.9",
     "braft-utils": "^3.0.12",
     "dayjs": "^1.10.7",
+    "destr": "^1.1.1",
     "echarts": "^5.3.0",
     "lodash.isequal": "^4.5.0",
     "object.fromentries": "^2.0.5",
@@ -82,6 +84,7 @@
     "@babel/preset-env": "^7.16.5",
     "@babel/preset-react": "^7.16.5",
     "@babel/preset-typescript": "^7.16.5",
+    "@cloudbase/cli": "^1.12.4",
     "@cloudbase/lowcode-build-dependence": "^0.9.0",
     "@commitlint/cli": "^16.0.2",
     "@commitlint/config-conventional": "^13.2.0",
@@ -101,7 +104,7 @@
     "@types/jest": "^27.0.3",
     "@types/resize-observer-browser": "^0.1.6",
     "@typescript-eslint/eslint-plugin": "^5.9.0",
-    "@typescript-eslint/parser": "^5.11.0",
+    "@typescript-eslint/parser": "^5.21.0",
     "babel-jest": "^27.4.5",
     "babel-loader": "^8.2.3",
     "babel-plugin-istanbul": "^6.1.1",
@@ -110,7 +113,9 @@
     "cypress": "~9.5.1",
     "eslint": "^8.9.0",
     "eslint-config-tencent": "^1.0.3",
+    "eslint-import-resolver-typescript": "^2.7.1",
     "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^26.1.2",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-rulesdir": "^0.2.1",
@@ -144,7 +149,7 @@
     {
       "path": ".temp/dist/*.main.*",
       "webpack": false,
-      "limit": "970 KB"
+      "limit": "1000 KB"
     }
   ],
   "nyc": {

package/src/configs/components/button.json

@@ -103,10 +103,8 @@
         ],
         "enum": [
           { "label": "无", "value": "" },
-          { "label": "获取手机号", "value": "getPhoneNumber" },
           { "label": "打开客服会话", "value": "contact" },
           { "label": "转发", "value": "share" },
-          { "label": "获取用户信息", "value": "getUserInfo" },
           { "label": "打开App", "value": "launchApp" },
           { "label": "打开授权设置", "value": "openSetting" },
           { "label": "打开意见反馈", "value": "feedback" }

package/src/configs/components/calendar.json

@@ -6,12 +6,14 @@
         "type": "date",
         "title": "日历展示时间",
         "x-category": "基础属性",
-        "x-index": 1
+        "x-index": 1,
+        "remarks":"已选中效果展示的日期"
       },
       "configData": {
         "type": "array",
         "title": "展示配置",
         "x-category": "基础属性",
+        "remarks":"可设置多个不同日期的特殊显示效果",
         "x-index": 2,
         "items": {
           "type": "object",
@@ -61,15 +63,19 @@
         "default": true,
         "title": "时间控制器",
         "x-category": "基础属性",
-        "x-index": 3
+        "x-index": 3,
+        "remarks":"显示切换年月的操作按钮"
       }
     }
   },
   "meta": {
     "name": "Calendar",
     "title": "日历",
-    "description": "日历组件",
+    "description": "用于日历展示，例如考勤数据展示、日程展示。",
     "category": "展示",
     "icon": "https://imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/Calendar.svg"
+  },
+  "configMeta": {
+    "docsUrl": "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/Calendar"
   }
 }

package/src/configs/components/carousel.json

@@ -6,57 +6,66 @@
         "title": "自动切换",
         "default": true,
         "type": "boolean",
-        "x-category": "基础属性"
+        "x-category": "基础属性",
+        "remarks":"开启后，轮播图将会自动根据配置的时间间隔进行自动滚动，关闭后则轮播图仅支持通过点击锚点的方式进行切换"
       },
       "indicatorDots": {
         "title": "导航锚点",
         "default": true,
         "type": "boolean",
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks":"开启/关闭轮播图锚点"
       },
       "current": {
         "title": "当前所在滑块的 index",
         "default": 0,
         "type": "number",
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks":"更改轮播图的默认展示位置，0为默认展示第一张轮播图，以此类推"
       },
       "interval": {
         "title": "自动切换时间间隔",
         "default": 5000,
         "type": "number",
-        "x-category": "基础属性"
+        "x-category": "基础属性",
+        "remarks":"配置轮播图滚动的时间间隔，时间单位为ms"
       },
       "duration": {
         "title": "滑动动画时长",
         "default": 500,
         "type": "number",
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks":"更改轮播图切换时的滑动动画时长"
       },
       "circular": {
         "title": "衔接滑动",
         "default": true,
         "type": "boolean",
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks":"更改轮播图切换时动画的滑动方式"
       },
       "vertical": {
         "title": "纵向轮播",
         "default": false,
         "type": "boolean",
-        "x-category": "基础属性"
+        "x-category": "基础属性",
+        "remarks":"开启后，轮播的滚动方式将会由横向滚动变更为纵向滚动"
       },
       "indicatorColor": {
         "title": "锚点颜色",
         "type": "string",
         "x-component": "color",
         "default": "rgba(200, 200, 200, 0.9)",
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks":"更改锚点普通状态下的颜色"
       },
       "indicatorActiveColor": {
         "title": "锚点激活色",
         "type": "string",
         "x-component": "color",
         "default": "rgba(0, 0, 0, 0.9)",
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks":"更改锚点选中时的颜色"
       },
       "images": {
         "type": "array",

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

@@ -60,7 +60,8 @@
               }
             }
           }
-        ]
+        ],
+        "remarks": "支持横向和纵向。纵向维度为 X 轴，数值为 Y 轴，横向反之。本文属性设置以纵向为例"
       },
       "isPile": {
         "title": "是否堆叠",
@@ -132,7 +133,8 @@
               "__datasourceName": "{{$self.value.name}}"
             }
           }
-        ]
+        ],
+        "remarks": "为统计卡片设置数据源，选择已经建好的 数据模型，单击数据源下拉菜单，选择统计"
       },
       "filterData": {
         "title": "数据筛选",
@@ -241,13 +243,15 @@
           "data-hidebind": true,
           "data-hideBindValue": true,
           "data-withBindMeta": true
-        }
+        },
+        "remarks": "可配置数据取值范围，可参见 数据筛选配置"
       },
       "setColor": {
         "type": "array",
         "title": "配色",
         "x-index": 70,
-        "x-component": "color-plate"
+        "x-component": "color-plate",
+        "remarks": "当有多个数值字段或维度字段分组时，不同类别将按照不同配色展示，支持自定义色卡"
       },
       "xFieldShow": {
         "x-index": 80,
@@ -255,7 +259,8 @@
         "x-component": "sub-category-title",
         "x-component-props": {
           "text": "维度(X轴)"
-        }
+        },
+        "remarks": "选择 X 轴字段，支持统计空值。当选择日期、时间、日期时间类型字段时，支持选择统计维度"
       },
       "xField": {
         "type": "object",
@@ -267,7 +272,9 @@
         "x-component-props": {
           "dataSourceNamePropKey": "dataSource",
           "isMethod": true,
-          "disabledTypes": ["time"]
+          "disabledTypes": [
+            "time"
+          ]
         },
         "x-linkages": [
           {
@@ -347,7 +354,8 @@
         "x-datasource-method-reset": "",
         "x-component-props": {
           "dataSourceNamePropKey": "dataSource",
-          "isMethod": true
+          "isMethod": true,
+          "clearable": true
         },
         "x-linkages": [
           {
@@ -371,7 +379,8 @@
               "enum": "{{$self.value.format ==='datetime' ? [{'label':'年','value':'y'},{'label':'月','value':'m'},{'label':'周','value':'w'},{'label':'日','value':'d'},{'label':'时','value':'h'},{'label':'分','value':'min'}] : ($self.value.format ==='date'? [{'label':'年','value':'y'},{'label':'季','value':'q'},{'label':'月','value':'m'},{'label':'周','value':'w'},{'label':'日','value':'d'}]: []) }}"
             }
           }
-        ]
+        ],
+        "remarks": "当 Y 轴仅选择一个字段时，支持根据某一固定字段对 X 轴进行分组展示。示例：X 轴为销售人员，分组为销售区域"
       },
       "groupKeyTimeSpan": {
         "title": "分组维度",
@@ -408,7 +417,9 @@
         "default": "bottom",
         "x-category": "基础属性",
         "x-index": 160,
-        "x-platforms": ["PCWEB"],
+        "x-platforms": [
+          "PCWEB"
+        ],
         "enum": [
           {
             "value": "top",
@@ -434,7 +445,10 @@
         "default": "bottom",
         "x-category": "基础属性",
         "x-index": 170,
-        "x-platforms": ["MOBILEWEB", "MP"],
+        "x-platforms": [
+          "MOBILEWEB",
+          "MP"
+        ],
         "enum": [
           {
             "value": "top",
@@ -702,10 +716,15 @@
   "events": [],
   "meta": {
     "title": "柱状图",
-    "description": "柱状图",
+    "description": "柱状图组件主要用于报表场景下展示数据之间大小的对比，支持小程序、H5 和 PC Web 端。",
     "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/Histogram.svg",
     "category": "图表组件",
     "componentOrder": 1,
-    "visible": ["APP"]
+    "visible": [
+      "APP"
+    ]
+  },
+  "configMeta": {
+    "docsUrl": "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/chart/Bar"
   }
 }

package/src/configs/components/chart/line.json

@@ -18,7 +18,8 @@
             "label": "曲线",
             "value": "bight"
           }
-        ]
+        ],
+        "remarks": "支持折线和曲线"
       },
       "isTitle": {
         "title": "显示标题",
@@ -83,7 +84,8 @@
               "__datasourceName": "{{$self.value.name}}"
             }
           }
-        ]
+        ],
+        "remarks": "为统计卡片设置数据源，选择已经建好的 数据模型，单击数据源下拉菜单，选择统计"
       },
       "filterData": {
         "title": "数据筛选",
@@ -192,7 +194,8 @@
           "data-hidebind": true,
           "data-hideBindValue": true,
           "data-withBindMeta": true
-        }
+        },
+        "remarks": "可配置数据取值范围，可参见 数据筛选配置"
       },
       "xFieldShow": {
         "x-index": 60,
@@ -212,7 +215,9 @@
         "x-component-props": {
           "dataSourceNamePropKey": "dataSource",
           "isMethod": true,
-          "disabledTypes": ["time"]
+          "disabledTypes": [
+            "time"
+          ]
         },
         "x-linkages": [
           {
@@ -291,7 +296,8 @@
         "x-datasource-method-reset": "",
         "x-component-props": {
           "dataSourceNamePropKey": "dataSource",
-          "isMethod": true
+          "isMethod": true,
+          "clearable": true
         },
         "x-linkages": [
           {
@@ -315,7 +321,8 @@
               "enum": "{{$self.value.format ==='datetime' ? [{'label':'年','value':'y'},{'label':'月','value':'m'},{'label':'周','value':'w'},{'label':'日','value':'d'},{'label':'时','value':'h'},{'label':'分','value':'min'}] : ($self.value.format ==='date'? [{'label':'年','value':'y'},{'label':'月','value':'m'},{'label':'周','value':'w'},{'label':'日','value':'d'}]: []) }}"
             }
           }
-        ]
+        ],
+        "remarks": "当 Y 轴仅选择一个字段时，支持根据某一固定字段对 X 轴进行分组展示。示例：X 轴为销售人员，分组为销售区域"
       },
       "groupKeyTimeSpan": {
         "title": "分组维度",
@@ -352,7 +359,9 @@
         "default": "bottom",
         "x-category": "基础属性",
         "x-index": 150,
-        "x-platforms": ["PCWEB"],
+        "x-platforms": [
+          "PCWEB"
+        ],
         "enum": [
           {
             "value": "top",
@@ -379,7 +388,10 @@
         "default": "bottom",
         "x-category": "基础属性",
         "x-index": 160,
-        "x-platforms": ["MOBILEWEB", "MP"],
+        "x-platforms": [
+          "MOBILEWEB",
+          "MP"
+        ],
         "enum": [
           {
             "value": "top",
@@ -657,10 +669,15 @@
   "events": [],
   "meta": {
     "title": "折线图",
-    "description": "折线图",
+    "description": "折线图组件主要用于报表场景下展示数据随时间变化产生的趋势，支持小程序、H5 和 PC Web 端。",
     "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/LineChart.svg",
     "category": "图表组件",
     "componentOrder": 1,
-    "visible": ["APP"]
+    "visible": [
+      "APP"
+    ]
+  },
+  "configMeta": {
+    "docsUrl": "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/chart/Line"
   }
 }

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

@@ -18,7 +18,8 @@
             "label": "环形",
             "value": "ring"
           }
-        ]
+        ],
+        "remarks": "支持饼形和环形，本文以饼形为例"
       },
       "isTitle": {
         "title": "显示标题",
@@ -75,7 +76,8 @@
             "target": "*(xFieldShow,xField,xStatistics,xIsCountEmpty,yField)",
             "condition": "{{ $self.value.type ==='database' }}"
           }
-        ]
+        ],
+        "remarks": "为统计卡片设置数据源，选择已经建好的数据模型，单击数据源下拉菜单，选择统计"
       },
       "filterData": {
         "title": "数据筛选",
@@ -184,13 +186,15 @@
           "data-hidebind": true,
           "data-hideBindValue": true,
           "data-withBindMeta": true
-        }
+        },
+        "remarks": "可配置数据取值范围，可参见 数据筛选配置"
       },
       "setColor": {
         "type": "array",
         "title": "配色",
         "x-index": 60,
-        "x-component": "color-plate"
+        "x-component": "color-plate",
+        "remarks": "当有多个数值字段或维度字段分组时，不同类别将按照不同配色展示，支持自定义色卡"
       },
       "dimensionalityShow": {
         "x-index": 70,
@@ -300,7 +304,9 @@
         "default": "bottom",
         "x-category": "基础属性",
         "x-index": 140,
-        "x-platforms": ["PCWEB"],
+        "x-platforms": [
+          "PCWEB"
+        ],
         "enum": [
           {
             "value": "top",
@@ -326,7 +332,10 @@
         "default": "bottom",
         "x-category": "基础属性",
         "x-index": 150,
-        "x-platforms": ["MOBILEWEB", "MP"],
+        "x-platforms": [
+          "MOBILEWEB",
+          "MP"
+        ],
         "enum": [
           {
             "value": "top",
@@ -478,10 +487,15 @@
   "events": [],
   "meta": {
     "title": "饼图",
-    "description": "饼图",
+    "description": "饼图组件主要用于报表场景下表示数据在总体中的占比,支持小程序、H5 和 PC Web 端。",
     "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/PieChart.svg",
     "category": "图表组件",
     "componentOrder": 1,
-    "visible": ["APP"]
+    "visible": [
+      "APP"
+    ]
+  },
+  "configMeta": {
+    "docsUrl": "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/chart/Pie"
   }
 }

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

@@ -58,16 +58,36 @@
         "x-component-props": {
           "dataSourceNamePropKey": "dataSource",
           "blackListConfig": {
-            "type": ["object", "array"]
+            "type": [
+              "object",
+              "array"
+            ]
           },
           "customRelOptions": {
             "string": [
-              { "text": "等于", "value": "eq" },
-              { "text": "不等于", "value": "neq" },
-              { "text": "包含", "value": "in" },
-              { "text": "不包含", "value": "nin" }
+              {
+                "text": "等于",
+                "value": "eq"
+              },
+              {
+                "text": "不等于",
+                "value": "neq"
+              },
+              {
+                "text": "包含",
+                "value": "in"
+              },
+              {
+                "text": "不包含",
+                "value": "nin"
+              }
+            ],
+            "boolean": [
+              {
+                "text": "等于",
+                "value": "eq"
+              }
             ],
-            "boolean": [{ "text": "等于", "value": "eq" }],
             "keyVarType": [
               {
                 "value": "eq",
@@ -87,11 +107,31 @@
               }
             ],
             "number": [
-              { "text": "等于", "value": "eq", "type": "equal" },
-              { "text": "不等于", "value": "neq", "type": "unequal" },
-              { "text": "小于", "value": "lt", "type": "less" },
-              { "text": "小于或等于", "value": "lte", "type": "less_or_equal" },
-              { "text": "大于", "value": "gt", "type": "greater" },
+              {
+                "text": "等于",
+                "value": "eq",
+                "type": "equal"
+              },
+              {
+                "text": "不等于",
+                "value": "neq",
+                "type": "unequal"
+              },
+              {
+                "text": "小于",
+                "value": "lt",
+                "type": "less"
+              },
+              {
+                "text": "小于或等于",
+                "value": "lte",
+                "type": "less_or_equal"
+              },
+              {
+                "text": "大于",
+                "value": "gt",
+                "type": "greater"
+              },
               {
                 "text": "大于或等于",
                 "value": "gte",
@@ -320,12 +360,20 @@
       }
     }
   },
-  "events": [{ "title": "点击", "name": "tap" }],
+  "events": [
+    {
+      "title": "点击",
+      "name": "tap"
+    }
+  ],
   "meta": {
     "title": "统计卡片",
-    "description": "统计卡片",
+    "description": "统计卡片组件主要提供报表场景下的指标数据统计并展示功能，支持小程序、H5 和 PC Web 端。",
     "icon": "//qcloudimg.tencent-cloud.cn/raw/8475042e83e7cb5731983a9432de9e30.svg",
     "category": "图表组件",
     "componentOrder": 1
+  },
+  "configMeta": {
+    "docsUrl": "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/chart/statisticsCard"
   }
 }

package/src/configs/components/container.json

@@ -6,7 +6,9 @@
         "title": "容器备注",
         "type": "string",
         "description": "鼠标 hover 后的提示",
-        "x-platforms": ["PCWEB"]
+        "x-platforms": [
+          "PCWEB"
+        ]
       }
     }
   },
@@ -40,8 +42,11 @@
   "meta": {
     "title": "普通容器",
     "category": "布局容器",
-    "description": "通用块状容器",
+    "description": "容器中可放入多个组件，常用于在前端中对页面布局进行管理的场景。 同时也可以通过容器组件绑定数据对容器内的组件进行循环遍历。",
     "componentOrder": 1000,
     "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/Container.svg"
+  },
+  "configMeta": {
+    "docsUrl": "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/grid/Container"
   }
 }