@cloudbase/weda-ui-mp 3.6.0

package/README.md

@@ -0,0 +1 @@
+# mp

package/actions/showMessage/index.js

@@ -0,0 +1,3 @@
+export default function showMessage(props) {
+  wx.showToast(props.data);
+}

package/actions/showModal/index.js

@@ -0,0 +1,3 @@
+export default function showModal(params) {
+  return wx.showModal(params);
+}

package/actions/showToast/index.js

@@ -0,0 +1,3 @@
+export default function showToast(props) {
+  wx.showToast(props.data);
+}

package/components/button/index.js

@@ -0,0 +1,89 @@
+import classNames from '../../utils/classnames';
+import handleEvents from '../../utils/handleEvents';
+
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    text: {
+      type: String,
+      value: '按钮',
+    },
+    size: {
+      type: String,
+      value: 'default',
+    },
+    type: {
+      type: String,
+      value: 'primary',
+    },
+    loading: {
+      type: Boolean,
+      value: false,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    formType: {
+      type: String,
+    },
+    openType: {
+      type: String,
+    },
+    sessionFrom: {
+      type: String,
+    },
+    sendMessageTitle: {
+      type: String,
+    },
+    sendMessagePath: {
+      type: String,
+    },
+    sendMessageImg: {
+      type: String,
+    },
+    showMessageCard: {
+      type: Boolean,
+    },
+    appParameter: {
+      type: String,
+    },
+  },
+  data: {
+    cls: '',
+  },
+  methods: {
+    ...handleEvents([
+      { title: '点击', name: 'tap' },
+      { title: '打开客服会话', name: 'contact' },
+      { title: '打开App', name: 'launchApp' },
+      { title: '打开授权设置', name: 'openSetting' },
+    ]),
+  },
+  observers: {
+    'className,size,type,disabled': function (className, size, type, disabled) {
+      const cls = classNames({
+        'weui-btn_mini': size === 'mini',
+        'weui-btn_large': size === 'large',
+        'weui-btn_primary': type === 'primary',
+        'weui-btn_default': type === 'default',
+        'weui-btn_warn': type === 'warn',
+        'weui-btn_disabled': disabled,
+        [className]: className,
+      });
+
+      this.setData({ cls });
+    },
+  },
+});

package/components/button/index.json

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

package/components/button/index.wxml

@@ -0,0 +1,22 @@
+<button
+  class="weda-ui weda-button weui-btn {{cls}}"
+  style="{{style}}"
+  size="{{size}}"
+  loading="{{loading}}"
+  disabled="{{disabled}}"
+  open-type="{{openType}}"
+  form-type="{{formType}}"
+  bind:tap="tap"
+  bindcontact="contact"
+  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}}"
+>
+  <block>{{text ? text : ''}}</block>
+  <slot name="contentSlot" wx:if="{{!text}}" />
+</button>

package/components/button/index.wxss

@@ -0,0 +1,13 @@
+@import '../../style/weda-ui.wxss';
+
+.weui-btn.weui-btn_primary:not(.weui-btn_disabled):active {
+  background-color: var(--weui-TAG-TEXT-BLUE);
+}
+.weda-ui.weui-btn.weui-btn_large {
+  font-size: large;
+  display: block;
+  padding-left: 7px;
+  padding-right: 7px;
+  text-align: center;
+  width: 100%;
+}

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

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.1208 12.5768L8.45992 20L7.52031 19.0875L14.8362 11.9986L7.52032 4.91249L8.45994 4L16.0959 11.3961C16.1063 11.4048 16.1165 11.4139 16.1264 11.4235L16.3483 11.639C16.5507 11.8355 16.5505 12.1605 16.3479 12.3568L16.1456 12.5528L16.1254 12.5725C16.1239 12.574 16.1223 12.5754 16.1208 12.5768Z" fill="black" fill-opacity="0.6"/>
+</svg>

package/components/calendar/index.js

@@ -0,0 +1,439 @@
+// pages/calendar/calendar.js
+import dayjs from '../../utils/dayjs.min.js';
+import equal from '../../utils/deepEqual';
+
+// import dayjs from 'dayjs'
+Component({
+  externalClasses: ['ext-class'],
+  options: {
+    virtualHost: true,
+  },
+  /** 传入的props */
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    // 控制器显示隐藏
+    initVisible: {
+      type: String,
+      value: 'true',
+    },
+    // 初始化日历值
+    initValue: {
+      type: String,
+      value: '',
+    },
+    // 展示配置
+    configData: {
+      type: Array,
+      value: [],
+    },
+    // 区分日历和时间选择
+    isTimePicker: {
+      type: Boolean,
+      value: false,
+    },
+  },
+  /** 页面的初始数据 */
+  data: {
+    // 常量
+    blockName: 'weda_calendar', // 类名前缀
+    minYear: 1970, // 最早选择年份
+    firstDayOfWeek: 7, // 日历第一列从周日开始
+    initFormat: 'YYYY-MM-DD',
+    controlSectionSize: 'medium', // 操作栏控件尺寸
+    week: ['一', '二', '三', '四', '五', '六', '日'], // 表头日历星期展示方式
+    isShowWeekend: true, // 是否显示周末
+    // 变量
+    value: null,
+    visible: true,
+    year: 0,
+    month: 0,
+    datalist: [],
+    headerlist: [],
+    turnPages: true,
+
+    _configData: [],
+  },
+
+  lifetimes: {
+    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: {
+    init: 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(),
+        });
+      }
+    },
+    initConfigData: function () {
+      const { initVisible } = this.properties;
+      const { firstDayOfWeek, initFormat, value, year, month } = this.data;
+      if (initVisible !== null) {
+        this.setData({ visible: initVisible });
+      }
+      if (value == null || value === '') return;
+      this.setData({
+        datalist: this.getDateLis(
+          year,
+          month,
+          firstDayOfWeek,
+          value,
+          initFormat
+        ),
+        headerlist: this.colHeaderList(),
+      });
+    },
+    // 传入参数，修改展示列表
+    getDateLis: function (year, month, firstDayOfWeek, value, initFormat) {
+      const datalist = this.createDateList(
+        year,
+        month,
+        firstDayOfWeek,
+        value,
+        initFormat
+      );
+      let isCurrent = false;
+      if (datalist && datalist.length > 0) {
+        for (let list of datalist) {
+          for (let l of list) {
+            if (l.isCurrent && !isCurrent) {
+              isCurrent = true;
+              break;
+            }
+          }
+        }
+        if (isCurrent) {
+          for (let list of datalist) {
+            for (let l of list) {
+              l.isNow = false;
+            }
+          }
+        }
+      }
+      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: isCurrent
+            ? false
+            : 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 () {
+      this.triggerEvent('handlePrevMonth');
+      if (!this.data.turnPages) {
+        return;
+      }
+      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
+        ),
+      });
+    },
+    // 是否支持上一页下一页翻页
+    handleTurnPages: function (turnPages) {
+      this.setData({
+        turnPages,
+      });
+    },
+    // 下一个月
+    handleNextMonth: function () {
+      this.triggerEvent('handleNextMonth');
+      if (!this.data.turnPages) {
+        return;
+      }
+      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
+        ),
+      });
+    },
+    // 指定月份
+    handleMonth: function (_year, _month) {
+      const { firstDayOfWeek, value, initFormat } = this.data;
+      this.setData({
+        year: _year,
+        month: _month,
+        datalist: this.getDateLis(
+          _year,
+          _month,
+          firstDayOfWeek,
+          value,
+          initFormat
+        ),
+      });
+    },
+
+    // 选中的天数
+    onSelectDay: function (e) {
+      const { day, isDisable, item } = e.currentTarget?.dataset || null;
+      const disabled = e.currentTarget?.dataset?.item?.disabled || false;
+      if (!disabled && !isDisable) {
+        const datalist = this.data.datalist.map((data) =>
+          data.map((itemDay) => {
+            if (itemDay.dateDay === day && itemDay.belongTo === 0) {
+              itemDay.isNow = true;
+            } else {
+              itemDay.isNow = false;
+            }
+            return itemDay;
+          })
+        );
+        this.setData({ datalist });
+        this.triggerEvent('onSelectDay', { day, item });
+      }
+    },
+  },
+  observers: {
+    initValue: function () {
+      this.init();
+    },
+    configData: function (configData) {
+      if (equal(configData, this.data._configData)) return;
+      this.data._configData = configData;
+      this.initConfigData();
+    },
+    datalist: function (datalist) {
+      let isCurrent = false;
+      if (datalist && datalist.length > 0) {
+        for (let list of datalist) {
+          for (let l of list) {
+            if (l.isCurrent && !isCurrent) {
+              isCurrent = true;
+              break;
+            }
+          }
+        }
+        if (isCurrent) {
+          for (let list of datalist) {
+            for (let l of list) {
+              l.isNow = false;
+            }
+          }
+        }
+      }
+    },
+  },
+});

package/components/calendar/index.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "usingComponents": {},
+  "styleIsolation": "shared"
+}

package/components/calendar/index.wxml

@@ -0,0 +1,35 @@
+<view class="{{className}} weda-calendar" style="{{style}}">
+  <view class="weda-calendar__control">
+    <view class="{{isTimePicker? 'weda-calendar__prevMonth__timepicker' : 'weda-calendar__prevMonth'}}" wx:if="{{visible}}" bindtap="handlePrevMonth">
+      <image class="weda-calendar__prevMonth-icon" src="arrowright--line.svg" mode="widthFix" />
+    </view>
+    <view class="{{isTimePicker? 'weda-calendar__current-date__no' : '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" mode="widthFix" />
+    </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||dateCell.disabled) ? 'is-invalid ': ''}} {{!dateCell.disabled&&(dateCell.isNow || dateCell.isCurrent) ? 'is-now' : ''}}" bindtap="onSelectDay" data-is-disable="{{dateCell.belongTo !== 0}}" data-day="{{dateCell.dateDay}}" data-item="{{dateCell}}">
+                <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>