@cloudbase/weda-ui 0.2.17 → 1.0.21

package/src/configs/components/wxOpenApi/share.json

@@ -0,0 +1,167 @@
+{
+  "$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json",
+  "data": {
+    "properties": {
+      "text": {
+        "title": "按钮标题",
+        "default": "小程序分享",
+        "remarks": "按钮组件的标题",
+        "type": "string",
+        "x-category": "基础属性",
+        "x-platforms": [
+          "MP"
+        ],
+        "x-index": 1
+      },
+      "type": {
+        "title": "按钮风格",
+        "type": "string",
+        "default": "wechat",
+        "remarks": "按钮组件的风格，相对于普通按钮组件，新增“微信”按钮风格",
+        "enum": [
+          {
+            "label": "默认",
+            "value": "default"
+          },
+          {
+            "label": "微信",
+            "value": "wechat"
+          },
+          {
+            "label": "主要",
+            "value": "primary"
+          },
+          {
+            "label": "警告",
+            "value": "warn"
+          }
+        ],
+        "x-category": "基础属性",
+        "x-platforms": [
+          "MP"
+        ],
+        "x-index": 2
+      },
+      "size": {
+        "title": "按钮大小",
+        "type": "string",
+        "default": "default",
+        "remarks": "按钮的大小",
+        "enum": [
+          {
+            "label": "中",
+            "value": "default"
+          },
+          {
+            "label": "小",
+            "value": "mini"
+          },
+          {
+            "label": "大",
+            "value": "large"
+          }
+        ],
+        "x-category": "基础属性",
+        "x-platforms": [
+          "MP"
+        ],
+        "x-index": 3
+      },
+      "title": {
+        "title": "{{text('分享标题', help('分享(转发)卡片的标题'))}}",
+        "type": "string",
+        "default": "",
+        "x-category": "基础属性",
+        "description": "",
+        "remarks": "分享(转发)卡片的标题",
+        "x-component": "textarea",
+        "x-platforms": [
+          "MP"
+        ],
+        "x-index": 4
+      },
+      "image": {
+        "title": "{{text('分享图片', help('分享(转发)卡片的图片'))}}",
+        "type": "string",
+        "x-component": "image",
+        "default": "",
+        "x-platforms": [
+          "MP"
+        ],
+        "description": "",
+        "remarks": "分享(转发)卡片的图片",
+        "x-category": "基础属性",
+        "x-index": 5
+      },
+      "path": {
+        "type": "string",
+        "title": "{{text('选择页面', help('选择分享(转发)的页面'))}}",
+        "default": "",
+        "x-index": 6,
+        "addHidden": true,
+        "x-category": "基础属性",
+        "remarks": "选择分享(转发)的页面",
+        "x-linkages": [
+          {
+            "type": "value:state",
+            "state": {
+              "pageId": "{{$self.value}}"
+            },
+            "target": "*(params)",
+            "condition": "{{$self.value && $self.value.length>0}}"
+          }
+        ],
+        "description": "",
+        "x-component": "page-list",
+        "x-component-props": {
+          "hideAddPlatform": [
+            "MP"
+          ]
+        }
+      },
+      "withParams": {
+        "type": "boolean",
+        "title": "携带参数",
+        "x-category": "基础属性",
+        "default": false,
+        "remarks": "分享(转发)的页面path是否携带参数",
+        "x-index": 7,
+        "x-linkages": [
+          {
+            "type": "value:visible",
+            "target": "params",
+            "condition": "{{$self.value===true}}"
+          }
+        ]
+      },
+      "params": {
+        "type": "array",
+        "title": "参数",
+        "x-category": "基础属性",
+        "remarks": "分享(转发)的页面的参数，会自动获取到当前选择页面内存在的页面参数并自动根据页面参数进行展开，当用户通过转发的链接进入小程序时，页面便会按照配置的参数进行渲染。如果采用绑定数据的方式，数据格式参考如下：[{key: 'paramKey1', value: 'paramValue1'}, {key: 'paramKey2', value: 'paramValue2'}]",
+        "pageId": "",
+        "default": [],
+        "x-index": 8,
+        "x-component": "page-params"
+      }
+    }
+  },
+  "events": [],
+  "meta": {
+    "title": "小程序分享",
+    "description": "支持快捷实现小程序分享功能。",
+    "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/Share.svg",
+    "category": "微信开放能力",
+    "categoryOrder": 100,
+    "componentOrder": 3,
+    "platform": [
+      "MP"
+    ],
+    "visible": [
+      "APP"
+    ]
+  },
+  "configMeta": {
+    "docsUrl": "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/wxOpen/Share"
+  }
+}

package/src/configs/components/wxOpenApi/userInfo.json

@@ -0,0 +1,174 @@
+{
+  "$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json",
+  "data": {
+    "properties": {
+      "text": {
+        "title": "按钮标题",
+        "default": "获取用户信息",
+        "type": "string",
+        "x-category": "基础属性",
+        "remarks": "按钮组件的标题",
+        "x-platforms": [
+          "MP"
+        ],
+        "x-index": 1
+      },
+      "type": {
+        "title": "按钮风格",
+        "type": "string",
+        "default": "wechat",
+        "remarks": "按钮组件的风格，相对于普通按钮组件，新增“微信”按钮风格",
+        "enum": [
+          {
+            "label": "默认",
+            "value": "default"
+          },
+          {
+            "label": "微信",
+            "value": "wechat"
+          },
+          {
+            "label": "主要",
+            "value": "primary"
+          },
+          {
+            "label": "警告",
+            "value": "warn"
+          }
+        ],
+        "x-category": "基础属性",
+        "x-platforms": [
+          "MP"
+        ],
+        "x-index": 2
+      },
+      "size": {
+        "title": "按钮大小",
+        "type": "string",
+        "default": "default",
+        "remarks": "按钮的大小",
+        "enum": [
+          {
+            "label": "中",
+            "value": "default"
+          },
+          {
+            "label": "小",
+            "value": "mini"
+          },
+          {
+            "label": "大",
+            "value": "large"
+          }
+        ],
+        "x-category": "基础属性",
+        "x-platforms": [
+          "MP"
+        ],
+        "x-index": 3
+      },
+      "usage": {
+        "title": "{{text('信息用途', help('声明获取用户个人信息的用途\\n不超过30个字符'))}}",
+        "type": "string",
+        "default": "",
+        "x-category": "基础属性",
+        "remarks": "声明获取用户个人信息的用途,不超过30个字符,若不填写将导致功能失效",
+        "required": true,
+        "x-rules": [
+          {
+            "message": "该字段必填",
+            "required": true
+          },
+          {
+            "message": "不超过30个字符",
+            "pattern": "^.{0,30}$"
+          }
+        ],
+        "description": "声明获取用户个人信息的用途,不超过30个字符,若不填写将导致功能失效",
+        "x-component": "textarea",
+        "x-platforms": [
+          "MP"
+        ],
+        "x-index": 4
+      },
+      "language": {
+        "title": "语言",
+        "type": "string",
+        "default": "zh_CN",
+        "description": "",
+        "remarks": "用户当前国家、省份、城市所使用的语言",
+        "enum": [
+          {
+            "label": "简体中文",
+            "value": "zh_CN"
+          },
+          {
+            "label": "繁体中文",
+            "value": "zh_TW"
+          },
+          {
+            "label": "英文",
+            "value": "en"
+          }
+        ],
+        "x-category": "基础属性",
+        "x-platforms": [
+          "MP"
+        ],
+        "x-index": 5
+      }
+    }
+  },
+  "events": [
+    {
+      "title": "用户信息授权成功",
+      "name": "userinfosuccess",
+      "remarks": "弹窗中点击了允许按钮后触发的事件",
+      "x-platforms": [
+        "MP"
+      ],
+      "detail": {
+        "avatarUrl": {
+          "type": "string",
+          "title": "用户头像",
+          "x-index": 1
+        },
+        "nickName": {
+          "type": "string",
+          "title": "微信昵称",
+          "x-index": 2
+        },
+        "language": {
+          "type": "string",
+          "title": "语言",
+          "x-index": 4
+        }
+      }
+    },
+    {
+      "title": "用户信息授权失败",
+      "name": "userinfofail",
+      "remarks": "弹窗中点击了拒绝按钮后触发的事件",
+      "x-platforms": [
+        "MP"
+      ]
+    }
+  ],
+  "meta": {
+    "title": "获取用户信息",
+    "description": "能够在小程序运行态对用户的微信头像、微信昵称等信息进行获取。",
+    "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/UserInfo.svg",
+    "category": "微信开放能力",
+    "categoryOrder": 100,
+    "componentOrder": 1,
+    "platform": [
+      "MP"
+    ],
+    "visible": [
+      "APP"
+    ]
+  },
+  "configMeta": {
+    "docsUrl": "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/wxOpen/UserInfo"
+  }
+}

package/src/configs/index.js

@@ -35,6 +35,7 @@ import showToast from './actions/showToast.json';
 import showModal from './actions/showModal.json';
 
 import ListView from './components/listView.json';
+import NavigationBar from './components/navigationBar.json';
 import Line from './components/chart/line.json';
 import Bar from './components/chart/bar.json';
 import Pie from './components/chart/pie.json';
@@ -42,6 +43,11 @@ import Pie from './components/chart/pie.json';
 import DataView from './components/dataView.json';
 import StatisticsCard from './components/chart/statisticsCard.json';
 import GraphicCard from './components/graphicCard.json';
+import Phone from './components/wxOpenApi/phone.json';
+import PhoneCode from './components/wxOpenApi/phoneCode.json';
+import Share from './components/wxOpenApi/share.json';
+import UserInfo from './components/wxOpenApi/userInfo.json';
+
 export const components = {
   Button,
   Text,
@@ -78,11 +84,16 @@ export const components = {
   ListView,
   DataView,
   NavLayout,
+  NavigationBar,
   Line,
   Bar,
   Pie,
   StatisticsCard,
   GraphicCard,
+  Phone,
+  PhoneCode,
+  Share,
+  UserInfo,
 };
 
 export const actions = {

package/src/mp/components/chart/bar/index.js

@@ -223,8 +223,11 @@ Component({
   },
   observers: {
     // 当参数变化时
-    option() {
-      this.initData();
+    '**': async function() {
+      const objEChartBar = new EchartBar();
+      await objEChartBar.setOptions(this.properties);
+      const options = await objEChartBar.getOptions();
+      this._chart && this._chart.setOption(options);
     },
   },
   methods: {
@@ -248,6 +251,7 @@ Component({
       // objEchart.clear();
       console.log('设置前参数bar', options);
       objEchart.setOption(options);
+      this._chart = objEchart;
       return objEchart;
     },
   },

package/src/mp/components/chart/common/core/eChartBar.js

@@ -21,7 +21,7 @@ class EchartBar extends EchartBase {
     groupKey,
     groupKeyTimeSpan,
   }) {
-    xField = xField || {};
+    xField = xField || {}; // 向前兼容
     const { name = '', type = '', methodName = '' } = dataSource;
     if (name !== '') {
       const params = this.createWhere({
@@ -40,9 +40,10 @@ class EchartBar extends EchartBase {
         params,
       );
       // 获取 x 轴数据
-      const arrXaxisData = this.setXaxis(arrSourData, xField.format);
+      const sortedXAxisData = this.sortXAxisData(arrSourData, xField.format);
+      const arrXaxisData = this.setXaxis(sortedXAxisData, xField.format);
       const arrXisCountEmptyIndex = []; // 记录空值的key
-      if (!groupKey) { // 没有分组
+      if (Object.keys(groupKey ?? {}).length === 0) { // 没有分组
         const numLine = arrSourData[0].YLabels.length;
         if (numLine > 0) {
           for (let j = 0; j < numLine; j++) {
@@ -57,9 +58,9 @@ class EchartBar extends EchartBase {
               stack: isPile ? 'pile' : null,
               data: [],
             };
-            arrSourData.forEach((itemSource,index) => {
+            sortedXAxisData.forEach((itemSource,index) => {
               this.config.series[j].name = itemSource.YLabels[j].Cn_Name;
-              if ((!itemSource.YLabels[j].Value || itemSource.YLabels[j].Value === 0 || itemSource.YLabels[j].Value === null) && !xIsCountEmpty) {
+              if ((!itemSource.YLabels[j].Value === undefined || itemSource.YLabels[j].Value === null) && !xIsCountEmpty) {
                 arrXisCountEmptyIndex.push(index);
               } else {
                 const value = itemSource.YLabels[j].Value ? itemSource.YLabels[j].Value : 0;
@@ -75,7 +76,7 @@ class EchartBar extends EchartBase {
         // 如果是分组，则这里需要特殊处理
         // 按groupKey分组存放数据值
         const objGroupKey = {}; // {'分组字段':[{value:'统计的值', dimensionality:'维度名', name:'统计的数值字段名'}]}
-        arrSourData.forEach((itemSourData) => {
+        sortedXAxisData.forEach((itemSourData) => {
           itemSourData.YLabels.forEach((yLabel) => {
             if (!objGroupKey[yLabel.Group_Name]) {
               objGroupKey[yLabel.Group_Name] = [];
@@ -150,7 +151,7 @@ class EchartBar extends EchartBase {
           itemSeries.label.formatter = (params) => {
             const objNewValue = this.getValueByUnit(params.value, unit);
             return (
-              `${objNewValue.toFixed(decimalDigits)}${objNewValue.unit}${suffix}`
+              `${objNewValue.toFixed(decimalDigits)}${suffix}`
             );
           };
         }
@@ -158,7 +159,7 @@ class EchartBar extends EchartBase {
     if (isUnit) {
       this.config.yAxis.axisLabel.formatter = (value) => {
         const objNewValue = this.getValueByUnit(value, unit);
-        return `${objNewValue.toFixed(decimalDigits)}${objNewValue.unit}${suffix}`;
+        return `${objNewValue.toFixed(decimalDigits)}${suffix}`;
       };
     } else {
       this.config.yAxis.axisLabel.formatter = null;

package/src/mp/components/chart/common/core/eChartBase.js

@@ -180,8 +180,26 @@ class EchartBase {
    * @param { Array<object> } arrData 后台返回的数据
    * @param { string } formatType 类型 datetime：日期时间;date:日期，time：时间，其它
    */
-  setXaxis(arrData, formatType = '') {
+  setXaxis(sortedXAxisData, formatType = '') {
     const xAxisData = [];
+    if (sortedXAxisData.length > 0) {
+      sortedXAxisData.forEach((itemSource) => {
+        let value = itemSource.XLabel.Value;
+        if (formatType === 'datetime') {
+          value =  this.formatTime(itemSource.XLabel.Value, 'dt');
+        } else if (formatType === 'date') {
+          value =  this.formatTime(itemSource.XLabel.Value, 'd');
+        } else if (formatType === 'time') {
+          value =  this.formatTime(itemSource.XLabel.Value, 't');
+        }
+        xAxisData.push(value);
+      });
+      this.config.xAxis.data = xAxisData;
+    }
+    return xAxisData;
+  }
+
+  sortXAxisData(arrData, formatType = '') {
     let xFields = [...arrData];
     if(['datetime', 'date', 'time'].includes(formatType)) {
       xFields.sort((a, b) => {
@@ -197,21 +215,7 @@ class EchartBase {
         }
       });
     }
-    if (arrData.length > 0) {
-      xFields.forEach((itemSource) => {
-        let value = itemSource.XLabel.Value;
-        if (formatType === 'datetime') {
-          value =  this.formatTime(itemSource.XLabel.Value, 'dt');
-        } else if (formatType === 'date') {
-          value =  this.formatTime(itemSource.XLabel.Value, 'd');
-        } else if (formatType === 'time') {
-          value =  this.formatTime(itemSource.XLabel.Value, 't');
-        }
-        xAxisData.push(value);
-      });
-      this.config.xAxis.data = xAxisData;
-    }
-    return xAxisData;
+    return xFields;
   }
 
   /**

package/src/mp/components/chart/common/core/eChartLine.js

@@ -39,9 +39,10 @@ class EchartLine extends EchartBase {
         params,
       );
       // 获取 x 轴数据
-      const arrXaxisData = this.setXaxis(arrSourData, xField.format);
+      const sortedXAxisData = this.sortXAxisData(arrSourData, xField.format);
+      const arrXaxisData = this.setXaxis(sortedXAxisData, xField.format);
       const arrXisCountEmptyIndex = []; // 记录空值的key
-      if (!groupKey) {
+      if (Object.keys(groupKey ?? {}).length === 0) {
         const numLine = arrSourData[0].YLabels.length;
         if (numLine > 0) {
           for (let j = 0; j < numLine; j++) {
@@ -56,9 +57,9 @@ class EchartLine extends EchartBase {
               },
               data: [],
             };
-            arrSourData.forEach((itemSource,index) => {
+            sortedXAxisData.forEach((itemSource,index) => {
               this.config.series[j].name = itemSource.YLabels[j].Cn_Name;
-              if ((!itemSource.YLabels[j].Value || itemSource.YLabels[j].Value === 0 || itemSource.YLabels[j].Value === null) && !xIsCountEmpty) {
+              if ((!itemSource.YLabels[j].Value === undefined || itemSource.YLabels[j].Value === null) && !xIsCountEmpty) {
                 arrXisCountEmptyIndex.push(index);
               } else {
                 const value = itemSource.YLabels[j].Value ? itemSource.YLabels[j].Value : 0;
@@ -73,7 +74,7 @@ class EchartLine extends EchartBase {
         // 如果是分组，则这里需要特殊处理
         // 按groupKey分组存放数据值
         const objGroupKey = {}; // {'分组字段':[{value:'统计的值', dimensionality:'维度名', name:'统计的数值字段名'}]}
-        arrSourData.forEach((itemSourData) => {
+        sortedXAxisData.forEach((itemSourData) => {
           itemSourData.YLabels.forEach((yLabel) => {
             if (!objGroupKey[yLabel.Group_Name]) {
               objGroupKey[yLabel.Group_Name] = [];

package/src/mp/components/chart/line/index.js

@@ -210,12 +210,6 @@ Component({
   detached() {
     // 在组件实例被从页面节点树移除时执行
   },
-  observers: {
-    // 当参数变化时
-    option() {
-      this.initData();
-    },
-  },
   methods: {
     initData() {
       this.setData({
@@ -237,7 +231,17 @@ Component({
       // objEchart.clear();
       console.log('设置前参数line', options);
       objEchart.setOption(options);
+      this._chart = objEchart;
       return objEchart;
     },
   },
+  observers: {
+    // 当参数变化时
+    '**': async function() {
+      const objEChartLine = new EchartLine();
+      await objEChartLine.setOptions(this.properties);
+      const options = objEChartLine.getOptions();
+      this._chart && this._chart.setOption(options);
+    },
+  }
 });

package/src/mp/components/chart/pie/index.js

@@ -147,8 +147,11 @@ Component({
   },
   observers: {
     // 当参数变化时
-    option() {
-      this.initData();
+    '**': async function() {
+      const objEChartPie = new EchartPie();
+      await objEChartPie.setOptions(this.properties);
+      const options = await objEChartPie.getOptions();
+      this._chart && this._chart.setOption(options);
     },
   },
   methods: {
@@ -172,6 +175,7 @@ Component({
       // objEchart.clear();
       console.log('设置前参数pie', options);
       objEchart.setOption(options);
+      this._chart = objEchart;
       return objEchart;
     },
   },

package/src/mp/components/chart/statisticsCard/index.js

@@ -108,15 +108,32 @@ Component({
       }
       return integer;
     },
+    addDelimiter: function (fixedString, digit) {
+      let len = fixedString.length;
+      let result = '';
+      const decimalPoint = digit > 0 ? digit + 1 : 0;
+      for (let i = len - 1; i >= 0; i--) {
+        let stepFromTail = len - 1 - i;
+        let char = fixedString.charAt(i);
+
+        if (stepFromTail <= decimalPoint) {
+          // 小数部分不处理
+          result = char + result;
+        } else {
+          if ((stepFromTail - decimalPoint) % 3 === 0) {
+            if (char !== '-') {
+              result = ',' + result;
+            }
+          }
+          result = char + result;
+        }
+      }
+      return result;
+    },
     formatNumber: function (val, digits = 0) {
       return isNaN(val)
         ? val
-        : Intl
-        ? Intl.NumberFormat('en-US', {
-            maximumFractionDigits: 10,
-            minimumFractionDigits: digits,
-          }).format(this.customToFixed(val, digits))
-        : val;
+        : this.addDelimiter(this.customToFixed(val, digits), digits);
     },
     getSourceData: async function (
       dataSource,
@@ -223,4 +240,14 @@ Component({
       this._fetchData();
     },
   },
+  attached() {
+    this._fetchData();
+  },
+  observers: {
+    // 当参数变化时
+    'datasource,filterData,field,operationType,label,isCountEmpty,isShowUnit,unit,decimalDigits,suffix':
+      function () {
+        this._fetchData();
+      },
+  },
 });

package/src/mp/components/dataView/index.json

@@ -2,6 +2,6 @@
   "component": true,
   "styleIsolation": "shared",
   "usingComponents": {
-    "list-view": "../internals/listView"
+    "list-view": "../listView"
   }
 }