@cloudbase/weda-ui 0.2.15 → 1.0.21

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

@@ -7,6 +7,7 @@ import Link from './components/link.json';
 // import DatePicker from './components/picker/datePicker.json';
 // import TimePicker from './components/picker/timePicker.json';
 import Input from './components/form/input.json';
+import Location from './components/form/location.json';
 import Textarea from './components/form/textarea.json';
 import Radio from './components/form/radio.json';
 import Checkbox from './components/form/checkbox.json';
@@ -19,6 +20,7 @@ import Uploader from './components/form/uploader.json';
 import UploaderFile from './components/form/uploaderFile.json';
 import ScrollView from './components/scrollVeiw.json';
 import Swiper from './components/swiper.json';
+import Carousel from './components/carousel.json';
 // import Label from './components/form/label.json';
 import Tips from './components/form/tips.json';
 import Modal from './components/modal.json';
@@ -26,10 +28,26 @@ import Drawer from './components/drawer.json';
 import RichText from './components/form/richText.json';
 import RichTextView from './components/richtextview.json';
 import Tabs from './components/tabs.json';
+import Calendar from './components/calendar.json';
+import NavLayout from './components/navLayout.json';
 
 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';
+
+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,
@@ -44,6 +62,7 @@ export const components = {
   Switch,
   Form,
   Textarea,
+  Location,
   // Cells,
   Select,
   Auth,
@@ -52,6 +71,7 @@ export const components = {
   UploaderFile,
   ScrollView,
   Swiper,
+  Carousel,
   // Label,
   Tips,
   Modal,
@@ -60,6 +80,20 @@ export const components = {
   Link,
   Drawer,
   Tabs,
+  Calendar,
+  ListView,
+  DataView,
+  NavLayout,
+  NavigationBar,
+  Line,
+  Bar,
+  Pie,
+  StatisticsCard,
+  GraphicCard,
+  Phone,
+  PhoneCode,
+  Share,
+  UserInfo,
 };
 
 export const actions = {

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

@@ -45,9 +45,18 @@ Component({
   data: {
     cls: '',
   },
-  lifetimes: {
-    attached() {
-      const { className, size, type, disabled } = this.properties;
+  methods: {
+    ...handleEvents([
+      { title: '点击', name: 'tap' },
+      { title: '获取手机号', name: 'getPhoneNumber' },
+      { title: '打开客服会话', name: 'contact' },
+      { title: '获取用户信息', name: 'getUserInfo' },
+      { title: '打开App', name: 'launchApp' },
+      { title: '打开授权设置', name: 'openSetting' },
+    ]),
+  },
+  observers: {
+    'className,size,type,disabled': function (className, size, type, disabled) {
       const cls = classNames('weda-ui', {
         'weda-button': true,
         'weui-btn': true,
@@ -63,14 +72,4 @@ Component({
       this.setData({ cls });
     },
   },
-  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,7 +7,7 @@
  open-type="{{openType}}"
  form-type="{{formType}}"
  bind:tap="tap"
- bindgetphonenumber="getPhoneNumber"
+ bindgetphonenumber="{{'getP' + 'honeN' + 'umber'}}"
  bindcontact="contact"
  bindgetuserinfo="getUserInfo"
  bindlaunchapp="launchApp"

package/src/mp/components/calendar/arrowright--line.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
+    <title>chevron-right</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Icons" transform="translate(-320.000000, -951.000000)">
+            <g id="chevron-right" transform="translate(320.000000, 951.000000)">
+                <path d="M16,0 L16,16 L0,16 L0,0 L16,0 Z" id="矩形" opacity="0.600000024" transform="translate(8.000000, 8.000000) scale(-1, -1) rotate(90.000003) translate(-8.000000, -8.000000) "/>
+                <path d="M4.68942324,5.31054639 L8.22980396,8.85092687 L11.7701844,5.31054639 L12.6894235,6.2297852 L8.22980396,10.6894045 L3.77018443,6.2297852 L4.68942324,5.31054639 Z" id="路径-4-(Stroke)" fill="#000000" transform="translate(8.229804, 7.999975) scale(-1, -1) rotate(90.000003) translate(-8.229804, -7.999975) "/>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,238 @@
+// pages/calendar/calendar.js
+import dayjs from '../../utils/dayjs.min.js';
+// import dayjs from 'dayjs'
+Component({
+  externalClasses: ['ext-class'],
+  /** 传入的props */
+  properties: {
+    className: {
+      type: String,
+      value: ''
+    },
+    style: {
+      type: Object,
+      value: {}
+    },
+    // 控制器显示隐藏
+    initVisible: {
+      type: String,
+      value: 'true'
+    },
+    // 初始化日历值
+    initValue: {
+      type: String,
+      value: ''
+    },
+    // 展示配置
+    configData: {
+      type: Array,
+      value: [],
+    }
+  },
+  /** 页面的初始数据 */
+  data: {
+    // 常量
+    blockName: 'weda_calendar', // 类名前缀
+    minYear: 1970, // 最早选择年份
+    firstDayOfWeek: 1, // 日历从周一开始
+    initFormat: 'YYYY-MM-DD',
+    controlSectionSize: 'medium', // 操作栏控件尺寸
+    week: ['一', '二', '三', '四', '五', '六', '日'], // 表头日历星期展示方式
+    isShowWeekend: true, // 是否显示周末
+    // 变量
+    value: null,
+    visible: true,
+    year: 0,
+    month: 0,
+    datalist: [],
+    headerlist: []
+  },
+
+  lifetimes: {
+    created: function () {
+    },
+    attached: function () {
+      const {initVisible, initValue} = this.properties;
+      const {firstDayOfWeek, initFormat} = this.data;
+      if (initVisible !== null) {
+        this.setData({
+          visible: initVisible
+        });
+      }
+      if (initValue !== null && initValue !== '') {
+        const value = dayjs(initValue);
+        const year = dayjs(initValue).year();
+        const month = parseInt(dayjs(initValue).format('M'), 10);
+        this.setData({
+          value,
+          year,
+          month,
+          datalist: this.getDateLis(year, month, firstDayOfWeek, value, initFormat),
+          headerlist: this.colHeaderList()
+        });
+      } else {
+        const _dayjsDate = dayjs(dayjs().format('YYYY-MM-DD'));
+        const value = _dayjsDate;
+        const year = _dayjsDate.year();
+        const month = parseInt(_dayjsDate.format('M'), 10);
+        this.setData({
+          value,
+          year,
+          month,
+          datalist: this.getDateLis(year, month, firstDayOfWeek, value, initFormat),
+          headerlist: this.colHeaderList()
+        });
+      }
+    }
+  },
+  methods: {
+    // 传入参数，修改展示列表
+    getDateLis: function (year, month, firstDayOfWeek, value, initFormat) {
+      const datalist = this.createDateList(year, month, firstDayOfWeek, value, initFormat);
+      return this._dataList(datalist);
+    },
+    // 获取一个日期是周几（1~7）
+    getDay: function (dt) {
+      let day = dayjs(dt).day();
+      if (day === 0) {
+        day = 7;
+      }
+      return day;
+    },
+    // 获取日期数组
+    createDateList: function (
+      year,
+      month,
+      firstDayOfWeek,
+      value,
+      initFormat
+    ) {
+      const createCellData = (belongTo, isCurrent, date, weekOrder) => {
+        const day = this.getDay(date);
+        return {
+          mode: 'month',
+          belongTo,
+          isCurrent,
+          day,
+          weekOrder,
+          date,
+          formattedDate: dayjs(date).format(initFormat),
+          filterDate: null,
+          formattedFilterDate: null,
+          isShowWeekend: true,
+          dateDay: date.getDate(), // 用于展示的天，需要标记
+          isNow: dayjs().format(initFormat) === dayjs(date).format(initFormat), // 是否当天
+        };
+      };
+
+      const monthFirstDay = dayjs(`${year}-${month}`);
+      const rowList = [];
+      let list = [];
+      let weekCount = 1;
+
+      // 添加上个月中会在本月显示的最后几天日期
+      // getDay(monthFirstDay.toDate()) 获取每月第一天是周几
+      const lastMonthDaysCount = (this.getDay(monthFirstDay.toDate()) - firstDayOfWeek + 7) % 7;
+      for (let i = 0; i < lastMonthDaysCount; i++) {
+        // 获取显示在当前月的日历中，上月日期数据
+        // monthFirstDay.subtract(num, 'day' | 'month' | 'year') 表示以当月第一天日期为基准，在 日|月|年 数字上减去num
+        const dayObj = monthFirstDay.subtract(i + 1, 'day');
+        list.unshift(createCellData(-1, false, dayObj.toDate(), weekCount));
+      }
+      // 添加本月日期
+      // 获取本月最后一天是几号
+      const monthDaysCount = monthFirstDay.endOf('month').daysInMonth();
+      for (let i = 0; i < monthDaysCount; i++) {
+        const dayObj = monthFirstDay.add(i, 'day');
+        list.push(createCellData(0, value.isSame(dayObj), dayObj.toDate(), weekCount));
+        if (list.length === 7) {
+          rowList.push(list);
+          list = [];
+          weekCount += 1;
+        }
+      }
+
+      // 添加下月日期
+      if (list.length) {
+        // 获取当月最后一天
+        const monthLastDay = dayjs(`${year}-${month}`).endOf('month');
+        // 获取下月在当月日历中的天数
+        const nextMonthDaysCount = 7 - list.length;
+        for (let i = 0; i < nextMonthDaysCount; i++) {
+          const dayObj = monthLastDay.add(i + 1, 'day');
+          list.push(createCellData(1, false, dayObj.toDate(), weekCount));
+        }
+        rowList.push(list);
+      }
+      return rowList;
+    },
+    // 混合数据
+    _dataList: function (configList) {
+      const {configData} = this.properties;
+      const _map = new Map();
+      for (const item of configData) {
+        _map.set(item.matchDate, item);
+      }
+      return configList.map(item => {
+        return item.reduce((res, i) => {
+          if (_map.has(i.formattedDate)) {
+            const _disabled = _map.get(i.formattedDate)['disabled'];
+            const _marked = _map.get(i.formattedDate)['marked'];
+            i['disabled'] = _disabled !== undefined ? JSON.parse(_disabled) : false;
+            i['marked'] = _marked;
+          }
+          res.push(i);
+          return res;
+        }, []);
+      });
+    },
+    // 表头数组
+    colHeaderList: function () {
+      const {week, firstDayOfWeek, isShowWeekend} = this.data;
+      const list = [];
+      for (let i = firstDayOfWeek; i <= 7; i++) {
+        if (!isShowWeekend && i > 5) {
+          break;
+        }
+        list.push({
+          day: i,
+          text: week[i - 1],
+        });
+      }
+      if (firstDayOfWeek > 1) {
+        for (let i = 1; i < firstDayOfWeek; i++) {
+          if (!isShowWeekend && i > 5) {
+            break;
+          }
+          list.push({
+            day: i,
+            text: week[i - 1],
+          });
+        }
+      }
+      return list;
+    },
+    // 上一个月
+    handlePrevMonth: function () {
+      const {year, month, firstDayOfWeek, value, initFormat} = this.data;
+      const _month = month == 1 ? 12 : month - 1;
+      const _year = month === 1 ? year - 1 : year;
+      this.setData({
+        year: _year,
+        month: _month,
+        datalist: this.getDateLis(_year, _month, firstDayOfWeek, value, initFormat)
+      });
+    },
+    // 下一个月
+    handleNextMonth: function () {
+      const {year, month, firstDayOfWeek, value, initFormat} = this.data;
+      const _month = month == 12 ? 1 : month + 1;
+      const _year = month === 12 ? year + 1 : year;
+      this.setData({
+        year: _year,
+        month: _month,
+        datalist: this.getDateLis(_year, _month, firstDayOfWeek, value, initFormat)
+       });
+    }
+  },
+});

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

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

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

@@ -0,0 +1,37 @@
+<view class="{{className}} weda-calendar ext-class">
+  <view class="weda-calendar__control">
+    <view class="weda-calendar__prevMonth" wx:if="{{visible}}" bindtap="handlePrevMonth">
+      <image class="weda-calendar__prevMonth-icon" src='arrowright--line.svg' />
+    </view>
+    <view class="weda-calendar__current-date">{{year}}年{{month}}月</view>
+    <view class="weda-calendar__nextMonth" wx:if="{{visible}}" bindtap="handleNextMonth">
+      <image class="weda-calendar__nextMonth-icon" src='arrowright--line.svg' />
+    </view>
+  </view>
+  <view class="weda-calendar__panel">
+    <view class="weda-calendar__table">
+      <view class="weda-calendar__table-head">
+        <view class="weda-calendar__table-head-row">
+          <view class="weda-calendar__table-head-cell" wx:for="{{headerlist}}" wx:for-index="index" wx:for-item="item" wx:key="index">
+            {{item.text}}
+          </view>
+        </view>
+      </view>
+      <view class="weda-calendar__table-body">
+        <block wx:for="{{datalist}}" wx:for-item="dateRow" wx:key="index">
+          <view class="weda-calendar__table-body-row">
+            <block wx:for="{{dateRow}}" wx:for-item="dateCell" wx:key="index">
+              <view class="'weda-calendar__table-body-cell' {{dateCell.belongTo !== 0 ? 'is-disabled ': ''}} {{dateCell.disabled ? 'is-invalid' : ''}}{{dateCell.isNow ? 'is-now' : ''}}">
+                <view class="weda-calendar__table-body-cell-value">
+                  {{dateCell.dateDay}}
+                  <view class="weda-calendar__table-body-cell-bg"></view>
+                  <view wx:if="{{dateCell.marked}}" class="weda-calendar__table-body-cell-marked" style="background: {{dateCell.marked}}"></view>
+                </view>
+              </view>
+            </block>
+          </view>
+        </block>
+      </view>
+    </view>
+  </view>
+</view>