@cloudbase/weda-ui 0.2.17 → 2.0.8

package/src/docs/compsdocs/wxOpen/Phone.mdx

@@ -0,0 +1,60 @@
+# 获取手机号
+
+<TableLayoutView
+  componentKey="Phone"
+  type="description"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 使用说明
+
+使用获取手机号组件能够在小程序运行态对用户的手机号进行获取，使用方式如下:
+
+1.创建应用，应用构建类型需要为小程序构建或三端构建。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/b9e5a27263fe0f992618757086010017.png)
+
+2.在编辑器中添加**获取手机号**组件。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/6eac32bcf54b345c5d23ee3ec49de19c.png)
+
+3.为应用创建一个字符串类型的普通变量，用于接收获取到的手机号信息。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/5bd62e877d0a5805368ca55633627403.png)
+
+4.为获取手机号组件配置变量赋值事件，实现当用户授权成功后将返回的手机号信息赋值给步骤3中的普通变量。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/98e456ef06ee76e138dcc13d03705f33.png)
+
+5.该组件仅在小程序真实运行状态下生效，因此我们在编辑器中添加一个文本组件并与普通变量进行绑定，当用户在小程序中点击获取手机号按钮并授权成功时，文本组件便会展示对应的手机号信息。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/9373c76dd92a98cd222eab37e7cca495.png)
+
+6.将应用发布到小程序，可以看到当点击获取手机号按钮并授权时，文本组件便会对获取到的手机号码信息进行展示。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/1b4c8a656ae0298534e9f5c2749c9b04.png)
+
+
+## 组件使用限制
+
+1.该组件仅支持在小程序端使用，并且小程序必须为**企业主体**。
+
+2.该组件必须在小程序真实环境使用才能够看到实际效果。
+
+## 属性
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Phone"
+  type="attribute"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 事件
+
+<TableLayoutView
+  componentKey="Phone"
+  type="event"
+  origin="sourceCode"
+></TableLayoutView>

package/src/docs/compsdocs/wxOpen/Share.mdx

@@ -0,0 +1,46 @@
+# 小程序分享
+
+<TableLayoutView
+  componentKey="Share"
+  type="description"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 使用说明
+
+小程序分享组件支持快捷实现小程序分享功能，在小程序中点击该组件时，便会根据当前组件配置进行页面的分享，使用方法如下:
+
+1.创建应用，应用构建类型需要为小程序构建或三端构建。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/b9e5a27263fe0f992618757086010017.png)
+
+2.为编辑区中添加**小程序分享**组件，并在右侧配置区进行分享参数的设置。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/500bda4094df6b2c519eec8976ec4acd.png)
+
+3.将应用发布到小程序，可以看到当点击小程序分享按钮时，会自动调起分享弹窗，分享信息与配置区的配置相同。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/5f9add0024c8cb8f65464a4700a12652.png)
+
+
+## 组件使用限制
+
+1.该组件必须在小程序真实环境使用才能够看到实际效果。
+
+## 属性
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Share"
+  type="attribute"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 事件
+
+<TableLayoutView
+  componentKey="Share"
+  type="event"
+  origin="sourceCode"
+></TableLayoutView>

package/src/docs/compsdocs/wxOpen/UserInfo.mdx

@@ -0,0 +1,60 @@
+# 获取用户信息
+
+<TableLayoutView
+  componentKey="UserInfo"
+  type="description"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 使用说明
+
+使用获取用户信息组件能够在小程序运行态对用户的微信头像、微信昵称等信息进行获取，使用方式如下:
+
+1.创建应用，应用构建类型需要为小程序构建或三端构建。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/b9e5a27263fe0f992618757086010017.png)
+
+2.在编辑器中添加**获取用户信息**组件，并且在组件的右侧配置区填写**信息用途**。(若不填写**信息用途**，将导致功能不可用，请注意)
+
+![](https://qcloudimg.tencent-cloud.cn/raw/44d4f6bf1c9aaffa4bf7e3a1c0bcf83e.png)
+
+3.为应用创建一个字符串类型的普通变量，用于接收获取到的用户信息。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/1dd6a703ff51f0fe45059fdb504d25ff.png)
+
+4.为获取用户信息组件配置变量赋值事件，实现当用户授权成功后将返回的用户信息赋值给步骤3中的普通变量。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/ed12e3858ffba97f9ecbae7557ed03db.png)
+
+5.该组件仅在小程序真实运行状态下生效，因此我们在编辑器中添加一个文本组件并与普通变量进行绑定，当用户在小程序中点击获取用户信息按钮并授权成功时，文本组件便会展示对应的用户信息。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/a55e1ab45de33489a1d61557a4f5f1b0.png)
+
+6.将应用发布到小程序，可以看到当点击获取用户信息按钮并授权时，文本组件便会对获取到的用户信息进行展示。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/7aa344e9347a894975598ba1ab7b987e.png)
+
+
+## 组件使用限制
+
+1.该组件必须在小程序真实环境使用才能够看到实际效果。
+
+2.组件右侧配置区中**信息用途**必须进行填写，否则组件将无法正常使用。
+
+## 属性
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="UserInfo"
+  type="attribute"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 事件
+
+<TableLayoutView
+  componentKey="UserInfo"
+  type="event"
+  origin="sourceCode"
+></TableLayoutView>

package/src/docs/compsdocs/wxOpen/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "微信开放能力",
+  "position": 100
+}

package/src/index.js

@@ -1,2 +1,4 @@
+/* eslint-disable import/export */
+
 export * from './web/index';
 export { default as default } from './web/index';

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

@@ -41,6 +41,24 @@ Component({
     openType: {
       type: String,
     },
+    sessionFrom: {
+      type: String,
+    },
+    sendMessageTitle: {
+      type: String,
+    },
+    sendMessagePath: {
+      type: String,
+    },
+    sendMessageImg: {
+      type: String,
+    },
+    showMessageCard: {
+      type: Boolean,
+    },
+    appParameter: {
+      type: String,
+    }
   },
   data: {
     cls: '',
@@ -48,9 +66,7 @@ Component({
   methods: {
     ...handleEvents([
       { title: '点击', name: 'tap' },
-      { title: '获取手机号', name: 'getPhoneNumber' },
       { title: '打开客服会话', name: 'contact' },
-      { title: '获取用户信息', name: 'getUserInfo' },
       { title: '打开App', name: 'launchApp' },
       { title: '打开授权设置', name: 'openSetting' },
     ]),

package/src/mp/components/button/index.wxml

@@ -7,13 +7,16 @@
  open-type="{{openType}}"
  form-type="{{formType}}"
  bind:tap="tap"
- bindgetphonenumber="{{'getP' + 'honeN' + 'umber'}}"
  bindcontact="contact"
- bindgetuserinfo="getUserInfo"
  bindlaunchapp="launchApp"
  bindopensetting="openSetting"
+ session-from="{{sessionFrom}}"
+ send-message-title="{{sendMessageTitle}}"
+ send-message-path="{{sendMessagePath}}"
+ send-message-img="{{sendMessageImg}}"
+ show-message-card="{{showMessageCard}}"
+ app-parameter="{{appParameter}}"
 >
-	{{text ? text : ''}}
+	<block>{{text ? text : ''}}</block>
 	<slot name="contentSlot" wx:if="{{!text}}" />
 </button>
-

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"
   }
 }

package/src/mp/components/form/checkbox/index.js

@@ -1,5 +1,7 @@
 import classNames from '../../../utils/classnames';
+import destr from '../../../utils/destr';
 import handleEvents from '../../../utils/handleEvents';
+import { callWedaApi } from '../../../utils/tcb';
 
 Component({
   options: {
@@ -41,15 +43,24 @@ Component({
       type: Boolean,
       value: false,
     },
+    format: {
+      type: String,
+      value: '',
+    },
+    enumName: {
+      type: String,
+      value: '',
+    }
   },
   data: {
     cls: '',
     subCls: '',
     isFlex: true,
+    defaultRange: []
   },
   lifetimes: {
     attached() {
-      const { className, layout, disabled } = this.properties;
+      const { className, layout, disabled, range } = this.properties;
       const isFlex = layout !== 'vertical';
       const cls = classNames({
         'weda-ui': true,
@@ -63,10 +74,26 @@ Component({
         'weui-cell_disabled': disabled,
       });
 
-      this.setData({ cls, subCls, isFlex });
+      this.setData({ cls, subCls, isFlex, defaultRange: range });
     },
   },
   methods: {
+    _fetchData: async function () {
+      let data = await callWedaApi({
+        action: 'DescribeGeneralOptionsDetailList',
+        data: { OptNameList: [this.properties.enumName], PageIndex: 1, PageSize: 10 },
+      });
+      const config = destr(data?.Items?.[0]?.Config) ?? [];
+      const option = config.map(item => {
+        return {
+          label: item.value,
+          value: item.key,
+          checked: false
+        };
+      });
+      this.setData({ defaultRange: option });
+    },
+
     ...handleEvents([
       {
         name: 'change',
@@ -74,4 +101,16 @@ Component({
       },
     ]),
   },
+  observers: {
+    range: function (range) {
+      if (this.properties.format !== 'x-enum') {
+        this.setData({ defaultRange: range });
+      }
+    },
+    format: function (format) {
+      if (format === 'x-enum' && this.properties.enumName) {
+        this._fetchData();
+      }
+    }
+  },
 });

package/src/mp/components/form/checkbox/index.wxml

@@ -7,7 +7,7 @@
 	requiredFlag="{{requiredFlag}}"
 >
 	<checkbox-group class="{{isFlex ? 'weui-flex__item' : ''}}" bindchange="change">
-		<label class="{{subCls}}" wx:for="{{range}}" wx:key="value">
+		<label class="{{subCls}}" wx:for="{{defaultRange}}" wx:key="value">
 			<view class="weui-cell__hd">
 				<checkbox
 				 class="weui-check"

package/src/mp/components/form/form/index.wxml

@@ -1,6 +1,5 @@
-<view class="weui-form weda-ui {{className}} {{style}}">
+<view class="weui-form weda-ui {{className}}" style="{{style}}">
 	<view class="weui-cells__group weui-cells__group_form">
 		<slot name="contentSlot" />
 	</view>
 </view>
-

package/src/mp/components/form/formcell/index.wxml

@@ -1,8 +1,8 @@
 <view class="{{className}}" style="{{style}}">
 	<view class="{{cls}}">
 		<view wx:if="{{!!label}}" class="weda-formcells__label weui-cell">
-			<label wx:if="{{requiredFlag}}" class="weda-formcells__flag">*</label>
 			<label>{{label}}</label>
+			<label wx:if="{{requiredFlag}}" class="weda-formcells__flag">*</label>
 		</view>
 		<view class="weda-formcells__content {{isFlex ? 'weui-flex__item' : ''}}">
 			<slot></slot>

package/src/mp/components/form/formcell/index.wxss

@@ -6,4 +6,21 @@
   font-family: SimSun;
   font-size: 12px;
   color: #f60;
+  align-self: flex-start;
+}
+
+.weda-formcells.weui-flex .weda-formcells__label {
+  width: 130px;
+}
+
+.weui-cells__group_form .weui-cell {
+  padding: 16px 16px;
+}
+
+.weda-formcells__content.weui-flex__item .weui-cell_form {
+  padding: 0;
+}
+
+.weda-formcells__content.weui-flex__item .weui-cell_form {
+  padding-right: 16px;
 }

package/src/mp/components/form/input/index.js

@@ -101,7 +101,7 @@ Component({
       this.setData({
         value: '',
       });
-      this.triggerEvent('change', e.detail);
+      this.triggerEvent('clear', e.detail);
     },
     handleConfirm: function (e) {
       this.triggerEvent('confirm', e.detail);