@tuya-miniapp/smart-ui 2.7.2-beta-11 → 2.7.2-beta-12

package/dist/calendar-header/index.js

@@ -0,0 +1,64 @@
+import { SmartComponent } from '../common/component';
+import LeftIcon from '@tuya-miniapp/icons/dist/svg/Left';
+import RightIcon from '@tuya-miniapp/icons/dist/svg/Right';
+SmartComponent({
+    props: {
+        title: {
+            type: String,
+            value: 'Select Date',
+        },
+        rightText: {
+            type: String,
+            value: 'Save',
+        },
+        subtitle: String,
+        showTitle: Boolean,
+        showSubtitle: Boolean,
+        defaultWeeks: Array,
+        hideWeek: Boolean,
+        iconColor: {
+            type: String,
+            value: 'var(--calendar-header-icon_color)',
+        },
+        showConfirm: {
+            type: Boolean,
+            value: true,
+        },
+        firstDayOfWeek: {
+            type: Number,
+            observer: 'initWeekDay',
+        },
+    },
+    data: {
+        weekdays: [],
+        LeftIcon,
+        RightIcon,
+    },
+    created() {
+        this.initWeekDay();
+    },
+    methods: {
+        initWeekDay() {
+            const { defaultWeeks } = this.properties;
+            const firstDayOfWeek = this.data.firstDayOfWeek || 0;
+            this.setData({
+                weekdays: [
+                    ...defaultWeeks.slice(firstDayOfWeek, 7),
+                    ...defaultWeeks.slice(0, firstDayOfWeek),
+                ],
+            });
+        },
+        onClickSubtitle(event) {
+            this.$emit('click-subtitle', event);
+        },
+        onPrev() {
+            this.$emit('click-prev');
+        },
+        onNext() {
+            this.$emit('click-next');
+        },
+        onSave() {
+            this.$emit('click-save');
+        },
+    },
+});

package/dist/calendar-header/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-icon": "../icon/index"
+  }
+}

package/dist/calendar-header/index.wxml

@@ -0,0 +1,27 @@
+<view class="smart-calendar__header">
+  <block wx:if="{{ showTitle }}">
+    <view class="smart-calendar__header-title"><slot name="title"></slot></view>
+    <view class="smart-calendar__header-title">
+      {{ title }}
+      <view class="smart-calendar__header-title-save" bind:tap="onSave" wx:if="{{showConfirm}}">{{ rightText }}</view>
+    </view>
+  </block>
+
+  <view class="smart-calendar__header-subtitle_wrap">
+    <view class="smart-calendar__header-subtitle_left" bind:tap="onPrev">
+      <smart-icon color="{{iconColor}}" class="smart-calendar__header-subtitle_left_icon" name="{{LeftIcon}}" />
+    </view>
+    <view wx:if="{{ showSubtitle }}" class="smart-calendar__header-subtitle smart-manrope" bind:tap="onClickSubtitle">
+      {{ subtitle }}
+    </view>
+    <view class="smart-calendar__header-subtitle_right" bind:tap="onNext">
+      <smart-icon color="{{iconColor}}" class="smart-calendar__header-subtitle_right_icon" name="{{RightIcon}}" />
+    </view>
+  </view>
+
+  <view class="smart-calendar__weekdays" wx:if="{{!hideWeek}}">
+    <view wx:for="{{ weekdays }}" wx:key="index" class="smart-calendar__weekday">
+      {{ item }}
+    </view>
+  </view>
+</view>

package/dist/calendar-header/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-manrope{font-family:Manrope,sans-serif}.smart-calendar__header{flex-shrink:0}.smart-calendar__header-title-save{color:var(--calendar-header-title-save-color,#1989fa);font-size:16px;font-weight:400;letter-spacing:0;line-height:24px;position:absolute;right:48rpx;text-align:right;top:50%;transform:translateY(-50%)}.smart-calendar__header-subtitle,.smart-calendar__header-title{color:var(--calendar-header-title-font-color,var(--app-B4-N1,#000));font-weight:var(--calendar-header-title-weight,600);height:var(--calendar-header-title-height,44px);line-height:var(--calendar-header-title-height,44px);text-align:center}.smart-calendar__header-subtitle{font-size:var(--calendar-header-subtitle-font-size,16px)}.smart-calendar__header-title{font-size:var(--calendar-header-title-font-size,16px);position:relative}.smart-calendar__header-subtitle_wrap{align-items:center;display:flex;justify-content:center;position:relative}.smart-calendar__header-subtitle_left{align-items:center;background:var(--calendar-header-icon-bg-color,var(--app-B2-N9,rgba(0,0,0,.05)));border-radius:50%;display:flex;height:48rpx;justify-content:center;left:52rpx;position:absolute;top:50%;transform:translateY(-50%);width:48rpx}.smart-calendar__header-subtitle_left_icon{left:-1px;position:relative}.smart-calendar__header-subtitle_right{align-items:center;background:var(--calendar-header-icon-bg-color,var(--app-B2-N9,rgba(0,0,0,.05)));border-radius:50%;display:flex;height:48rpx;justify-content:center;position:absolute;right:52rpx;top:50%;transform:translateY(-50%);width:48rpx}.smart-calendar__header-subtitle_right_icon{position:relative;right:-1px}.smart-calendar__header-title+.smart-calendar__header-title,.smart-calendar__header-title:empty{display:none}.smart-calendar__header-title:empty+.smart-calendar__header-title{display:block!important}.smart-calendar__weekdays{display:flex;margin-bottom:16rpx;margin-top:16rpx;padding-left:16rpx;padding-right:16rpx}.smart-calendar__weekday{color:var(--calendar-weekdays-font-color,var(--app-B4-N1,#000));flex:1;font-size:var(--calendar-weekdays-font-size,12px);font-weight:400;line-height:var(--calendar-weekdays-height,30px);opacity:.5;text-align:center}

package/dist/calendar-month/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-manrope{font-family:Manrope,sans-serif}.smart-calendar{background-color:var(--calendar-background-color,var(--app-B6,#fff));display:flex;flex-direction:column;height:100%}.smart-calendar__month{padding-bottom:48rpx;padding-left:16rpx;padding-right:16rpx}.smart-calendar__month-title{font-size:var(--calendar-month-title-font-size,14px);font-weight:var(--font-weight-bold,500);height:var(--calendar-header-title-height,44px);line-height:var(--calendar-header-title-height,44px);text-align:center}.smart-calendar__days{display:flex;flex-wrap:wrap;position:relative;-webkit-user-select:none;user-select:none}.smart-calendar__month-mark{color:var(--calendar-month-mark-color,hsla(210,6%,87%,.6));font-size:var(--calendar-month-mark-font-size,160px);left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:0}.smart-calendar__day,.smart-calendar__selected-day{align-items:center;display:flex;justify-content:center;text-align:center}.smart-calendar__day{color:var(--calendar-cell-item-font-color,var(--app-B4-N1,#000));font-size:var(--calendar-cell-item-font-size,15px);font-weight:var(--calendar-day-font-weight,500);height:var(--calendar-day-height,100rpx);margin:4px 0;position:relative;width:14.285%}.smart-calendar__day--end,.smart-calendar__day--multiple-middle,.smart-calendar__day--multiple-selected,.smart-calendar__day--start,.smart-calendar__day--start-end{background-color:var(--calendar-range-edge-background-color,#3678e3);color:var(--calendar-range-edge-color,#fff)}.smart-calendar__day--start{border-bottom-left-radius:var(--calendar-day-select-border-radius,34rpx);border-top-left-radius:var(--calendar-day-select-border-radius,34rpx)}.smart-calendar__day--end{border-bottom-right-radius:var(--calendar-day-select-border-radius,34rpx);border-top-right-radius:var(--calendar-day-select-border-radius,34rpx)}.smart-calendar__day--multiple-selected,.smart-calendar__day--start-end{border-radius:4px}.smart-calendar__day--middle{background-color:var(--calendar-range-edge-background-color,#3678e3);color:var(--calendar-range-middle-color,#fff)}.smart-calendar__day--disabled{color:var(--calendar-day-disabled-color,#c8c9cc);cursor:default}.smart-calendar__bottom-info,.smart-calendar__top-info{font-size:var(--calendar-info-font-size,10px);left:0;line-height:var(--calendar-info-line-height,14px);position:absolute;right:0}@media (max-width:350px){.smart-calendar__bottom-info,.smart-calendar__top-info{font-size:9px}}.smart-calendar__top-info{top:6px}.smart-calendar__bottom-info{bottom:6px}.smart-calendar__selected-day{background-color:var(--calendar-selected-day-background-color,#3678e3);border-radius:50%;color:var(--calendar-selected-day-color,#fff);height:var(--calendar-selected-day-size,34px);width:var(--calendar-selected-day-size,34px)}

package/dist/calendar-month/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/calendar-month/index.js

@@ -0,0 +1,177 @@
+import { SmartComponent } from '../common/component';
+import { getMonthEndDay, compareDay, getPrevDay, getNextDay } from '../calendar-utils/utils';
+SmartComponent({
+    props: {
+        date: {
+            type: null,
+            observer: 'setDays',
+        },
+        type: {
+            type: String,
+            observer: 'setDays',
+        },
+        color: String,
+        minDate: {
+            type: null,
+            observer: 'setDays',
+        },
+        maxDate: {
+            type: null,
+            observer: 'setDays',
+        },
+        showMark: Boolean,
+        rowHeight: null,
+        formatter: {
+            type: null,
+            observer: 'setDays',
+        },
+        currentDate: {
+            type: null,
+            observer: 'setDays',
+        },
+        firstDayOfWeek: {
+            type: Number,
+            observer: 'setDays',
+        },
+        visible: {
+            type: Boolean,
+            value: true,
+        },
+        subFormatter: String,
+        rangeStart: String,
+        rangeEnd: String,
+        allowSameDay: Boolean,
+        showSubtitle: Boolean,
+        showMonthTitle: Boolean,
+        dayClassMap: {
+            type: null,
+        },
+    },
+    data: {
+        days: [],
+    },
+    methods: {
+        onClick(event) {
+            const { index } = event.currentTarget.dataset;
+            const item = this.data.days[index];
+            if (item.type !== 'disabled') {
+                this.$emit('click', item);
+            }
+        },
+        setDays() {
+            const days = [];
+            const startDate = new Date(this.data.date);
+            const year = startDate.getFullYear();
+            const month = startDate.getMonth();
+            const totalDay = getMonthEndDay(startDate.getFullYear(), startDate.getMonth() + 1);
+            for (let day = 1; day <= totalDay; day++) {
+                const date = new Date(year, month, day);
+                const type = this.getDayType(date);
+                const { dayClassMap } = this.data;
+                let config = {
+                    date,
+                    type,
+                    text: day,
+                    bottomInfo: this.getBottomInfo(type),
+                };
+                if (dayClassMap) {
+                    const id = `${year}-${month + 1}-${day}`;
+                    const id2 = `${String(year)}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+                    if (dayClassMap[id]) {
+                        config.customClass = dayClassMap[id];
+                    }
+                    if (dayClassMap[id2]) {
+                        config.customClass = dayClassMap[id2];
+                    }
+                }
+                if (this.data.formatter) {
+                    config = this.data.formatter(config);
+                }
+                days.push(config);
+            }
+            this.setData({ days });
+        },
+        getMultipleDayType(day) {
+            const { currentDate } = this.data;
+            if (!Array.isArray(currentDate)) {
+                return '';
+            }
+            const isSelected = date => currentDate.some(item => compareDay(item, date) === 0);
+            if (isSelected(day)) {
+                const prevDay = getPrevDay(day);
+                const nextDay = getNextDay(day);
+                const prevSelected = isSelected(prevDay);
+                const nextSelected = isSelected(nextDay);
+                if (prevSelected && nextSelected) {
+                    return 'multiple-middle';
+                }
+                if (prevSelected) {
+                    return 'end';
+                }
+                return nextSelected ? 'start' : 'multiple-selected';
+            }
+            return '';
+        },
+        getRangeDayType(day) {
+            const { currentDate, allowSameDay } = this.data;
+            if (!Array.isArray(currentDate)) {
+                return '';
+            }
+            const [startDay, endDay] = currentDate;
+            if (!startDay) {
+                return '';
+            }
+            const compareToStart = compareDay(day, startDay);
+            if (!endDay) {
+                return compareToStart === 0 ? 'start' : '';
+            }
+            const compareToEnd = compareDay(day, endDay);
+            if (compareToStart === 0 && compareToEnd === 0 && allowSameDay) {
+                return 'start-end';
+            }
+            if (compareToStart === 0) {
+                return 'start';
+            }
+            if (compareToEnd === 0) {
+                return 'end';
+            }
+            if (compareToStart > 0 && compareToEnd < 0) {
+                return 'middle';
+            }
+            return '';
+        },
+        getDayType(day) {
+            const { type, minDate, maxDate, currentDate } = this.data;
+            if (compareDay(day, minDate) < 0 || compareDay(day, maxDate) > 0) {
+                return 'disabled';
+            }
+            if (type === 'single') {
+                return compareDay(day, currentDate) === 0 ? 'selected' : '';
+            }
+            if (type === 'multiple') {
+                return this.getMultipleDayType(day);
+            }
+            /* istanbul ignore else */
+            if (type === 'range') {
+                return this.getRangeDayType(day);
+            }
+            if (type === 'week') {
+                return this.getRangeDayType(day);
+            }
+            return '';
+        },
+        getBottomInfo(type) {
+            if (this.data.type === 'range') {
+                if (type === 'start') {
+                    return this.properties.rangeStart || 'Start';
+                }
+                if (type === 'end') {
+                    return this.properties.rangeEnd || 'End';
+                }
+                if (type === 'start-end') {
+                    return ((this.properties.rangeStart || 'Start') + '/' + (this.properties.rangeEnd || 'End'));
+                }
+            }
+        },
+    },
+});

package/dist/calendar-month/index.json

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

package/dist/calendar-month/index.wxml

@@ -0,0 +1,22 @@
+<wxs src="./index.wxs" module="computed"></wxs>
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="smart-calendar__month" style="{{ computed.getMonthStyle(visible, date, rowHeight) }}">
+  <view wx:if="{{ visible }}" class="smart-calendar__days">
+    <view
+      wx:for="{{ days }}"
+      wx:key="index"
+      style="{{ computed.getDayStyle(item.type, index, date, rowHeight, color, firstDayOfWeek) }}"
+      class="{{ utils.bem('calendar__day', [item.type]) }} {{ item.className }} smart-manrope {{ item.customClass }}"
+      data-index="{{ index }}"
+      bindtap="onClick"
+    >
+      <view wx:if="{{ item.type === 'selected' }}" class="smart-calendar__selected-day" style="width: {{ rowHeight }}px; height: {{ rowHeight }}px; background: {{ color }}">
+        {{ item.text }}
+      </view>
+      <block wx:else>
+        {{ item.text }}
+      </block>
+    </view>
+  </view>
+</view>

package/dist/calendar-month/index.wxs

@@ -0,0 +1,73 @@
+/* eslint-disable */
+var utils = require('../calendar-utils/utils.wxs');
+
+function getMark(date) {
+  return getDate(date).getMonth() + 1;
+}
+
+var ROW_HEIGHT = 64;
+
+function getDayStyle(type, index, date, rowHeight, color, firstDayOfWeek) {
+  var style = [];
+  var current = getDate(date).getDay() || 7;
+  var offset =
+    current < firstDayOfWeek
+      ? 7 - firstDayOfWeek + current
+      : current === 7 && firstDayOfWeek === 0
+      ? 0
+      : current - firstDayOfWeek;
+
+  if (index === 0) {
+    style.push(['margin-left', (100 * offset) / 7 + '%']);
+  }
+
+  if (rowHeight && rowHeight !== ROW_HEIGHT) {
+    style.push(['height', rowHeight + 'px']);
+  }
+
+  if (color) {
+    if (
+      type === 'start' ||
+      type === 'end' ||
+      type === 'start-end' ||
+      type === 'multiple-selected' ||
+      type === 'multiple-middle'
+    ) {
+      style.push(['background', color]);
+    } else if (type === 'middle') {
+      style.push(['background', color]);
+    }
+  }
+
+  return style
+    .map(function (item) {
+      return item.join(':');
+    })
+    .join(';');
+}
+
+function formatMonthTitle(date, formatter = 'YYYY-MM') {
+  date = getDate(date);
+  var year = date.getFullYear();
+  var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1 + '';
+  return formatter.replace('YYYY', year + '').replace('MM', month);
+}
+
+function getMonthStyle(visible, date, rowHeight) {
+  if (!visible) {
+    date = getDate(date);
+
+    var totalDay = utils.getMonthEndDay(date.getFullYear(), date.getMonth() + 1);
+    var offset = getDate(date).getDay();
+    var padding = Math.ceil((totalDay + offset) / 7) * rowHeight;
+
+    return 'padding-bottom:' + padding + 'px';
+  }
+}
+
+module.exports = {
+  getMark: getMark,
+  getDayStyle: getDayStyle,
+  formatMonthTitle: formatMonthTitle,
+  getMonthStyle: getMonthStyle,
+};

package/dist/calendar-month/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-manrope{font-family:Manrope,sans-serif}.smart-calendar{background-color:var(--calendar-background-color,var(--app-B6,#fff));display:flex;flex-direction:column;height:100%}.smart-calendar__month{padding-bottom:48rpx;padding-left:16rpx;padding-right:16rpx}.smart-calendar__month-title{font-size:var(--calendar-month-title-font-size,14px);font-weight:var(--font-weight-bold,500);height:var(--calendar-header-title-height,44px);line-height:var(--calendar-header-title-height,44px);text-align:center}.smart-calendar__days{display:flex;flex-wrap:wrap;position:relative;-webkit-user-select:none;user-select:none}.smart-calendar__month-mark{color:var(--calendar-month-mark-color,hsla(210,6%,87%,.6));font-size:var(--calendar-month-mark-font-size,160px);left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:0}.smart-calendar__day,.smart-calendar__selected-day{align-items:center;display:flex;justify-content:center;text-align:center}.smart-calendar__day{color:var(--calendar-cell-item-font-color,var(--app-B4-N1,#000));font-size:var(--calendar-cell-item-font-size,15px);font-weight:var(--calendar-day-font-weight,500);height:var(--calendar-day-height,100rpx);margin:4px 0;position:relative;width:14.285%}.smart-calendar__day--end,.smart-calendar__day--multiple-middle,.smart-calendar__day--multiple-selected,.smart-calendar__day--start,.smart-calendar__day--start-end{background-color:var(--calendar-range-edge-background-color,#3678e3);color:var(--calendar-range-edge-color,#fff)}.smart-calendar__day--start{border-bottom-left-radius:var(--calendar-day-select-border-radius,34rpx);border-top-left-radius:var(--calendar-day-select-border-radius,34rpx)}.smart-calendar__day--end{border-bottom-right-radius:var(--calendar-day-select-border-radius,34rpx);border-top-right-radius:var(--calendar-day-select-border-radius,34rpx)}.smart-calendar__day--multiple-selected,.smart-calendar__day--start-end{border-radius:4px}.smart-calendar__day--middle{background-color:var(--calendar-range-edge-background-color,#3678e3);color:var(--calendar-range-middle-color,#fff)}.smart-calendar__day--disabled{color:var(--calendar-day-disabled-color,#c8c9cc);cursor:default}.smart-calendar__bottom-info,.smart-calendar__top-info{font-size:var(--calendar-info-font-size,10px);left:0;line-height:var(--calendar-info-line-height,14px);position:absolute;right:0}@media (max-width:350px){.smart-calendar__bottom-info,.smart-calendar__top-info{font-size:9px}}.smart-calendar__top-info{top:6px}.smart-calendar__bottom-info{bottom:6px}.smart-calendar__selected-day{background-color:var(--calendar-selected-day-background-color,#3678e3);border-radius:50%;color:var(--calendar-selected-day-color,#fff);height:var(--calendar-selected-day-size,34px);width:var(--calendar-selected-day-size,34px)}

package/dist/calendar-month-list/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-manrope{font-family:Manrope,sans-serif}.contain{margin:24rpx 0}.item{border-radius:var(--calendar-cell-item-border-radius,104rpx);color:var(--calendar-cell-item-font-color,var(--app-B4-N1,#000));font-size:var(--calendar-cell-item-font-size,15px);font-weight:var(--calendar-day-font-weight,500);height:var(--calendar-cell-item-height,104rpx);line-height:var(--calendar-cell-item-height,104rpx);margin:var(--calendar-cell-item-margin,14rpx);text-align:center;width:var(--calendar-cell-item-width,104rpx)}.item_active{background:#3678e3;color:#fff}.item_disabled{opacity:.5}.col_item{display:flex;justify-content:center}

package/dist/calendar-month-list/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/calendar-month-list/index.js

@@ -0,0 +1,103 @@
+// components/month-list.js
+import { getMonths } from '../calendar-utils/utils';
+import { SmartComponent } from '../common/component';
+const currentYear = new Date().getFullYear();
+const minMonthDate = new Date(currentYear - 10, 1, 1).getTime();
+const maxMonthDate = new Date(currentYear + 10, 12, 31).getTime();
+SmartComponent({
+    /**
+     * 组件的属性列表
+     */
+    props: {
+        date: {
+            type: null,
+        },
+        color: {
+            type: String,
+            value: '#3678e3',
+        },
+        minDate: {
+            type: null,
+            value: minMonthDate,
+        },
+        maxDate: {
+            type: null,
+            value: maxMonthDate,
+        },
+        readonly: {
+            type: Boolean,
+            value: false,
+        },
+        monthsFormatter: {
+            type: null,
+            value: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
+        },
+        visibleIndex: {
+            type: Number,
+            value: 0,
+            observer(newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    this.getMonthList(newVal);
+                }
+            },
+        },
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        months: [],
+        currentMonth: null,
+    },
+    created() {
+        this.getMonthList(0);
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        getMonthList(visibleIndex) {
+            const { minDate, maxDate, monthsFormatter = [] } = this.data;
+            const currentDate = new Date(this.data.date);
+            const curDate = new Date(currentDate.getFullYear() + visibleIndex, currentDate.getMonth(), currentDate.getDay());
+            const cur = curDate.getFullYear();
+            const curMonthDate = new Date(curDate.getFullYear(), curDate.getMonth(), 1);
+            const start = new Date(cur, 0, 1, 0, 0, 0).getTime();
+            const end = new Date(cur, 11, 31, 23, 59, 59).getTime();
+            const minDateTime = new Date(minDate).getTime();
+            const maxDateTime = new Date(maxDate).getTime();
+            const months = getMonths(start, end);
+            const monthlist = months.map(date => {
+                const monthVal = new Date(date).getMonth();
+                const time = new Date(date).getTime();
+                let isDisabled = false;
+                if (minDate && maxDate) {
+                    isDisabled = time < minDateTime || time > maxDateTime;
+                }
+                return {
+                    value: date,
+                    month: monthVal,
+                    text: monthsFormatter[monthVal] || monthVal + 1,
+                    type: isDisabled ? 'disabled' : '',
+                };
+            });
+            this.setData({
+                months: monthlist,
+                currentMonth: curMonthDate.getTime(),
+            });
+            this.$emit('changemonthtitle', curDate.getTime());
+        },
+        onClick(event) {
+            if (this.data.readonly)
+                return;
+            const { index } = event.currentTarget.dataset;
+            const item = this.data.months[index];
+            if (item.type !== 'disabled') {
+                this.$emit('click', item.value);
+                this.setData({
+                    date: item.value,
+                });
+            }
+        },
+    },
+});

package/dist/calendar-month-list/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-row": "../row/index",
+    "smart-col": "../col/index"
+  }
+}

package/dist/calendar-month-list/index.wxml

@@ -0,0 +1,15 @@
+<view class="contain">
+  <smart-row>
+    <smart-col wx:for="{{months}}" wx:key="index" span="6" custom-class="col_item">
+      <view wx:if="{{item.type === 'disabled'}}" class="item smart-manrope item_disabled" data-index="{{index}}">
+        {{item.text}}
+      </view>
+      <view wx:elif="{{date === item.value}}" class="item smart-manrope item_active" data-index="{{index}}" bindtap="onClick" style="background: {{ color }};">
+        {{item.text}}
+      </view>
+      <view wx:else class="item smart-manrope" data-index="{{index}}" bindtap="onClick">
+        {{item.text}}
+      </view>
+    </smart-col>
+  </smart-row>
+</view>

package/dist/calendar-month-list/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-manrope{font-family:Manrope,sans-serif}.contain{margin:24rpx 0}.item{border-radius:var(--calendar-cell-item-border-radius,104rpx);color:var(--calendar-cell-item-font-color,var(--app-B4-N1,#000));font-size:var(--calendar-cell-item-font-size,15px);font-weight:var(--calendar-day-font-weight,500);height:var(--calendar-cell-item-height,104rpx);line-height:var(--calendar-cell-item-height,104rpx);margin:var(--calendar-cell-item-margin,14rpx);text-align:center;width:var(--calendar-cell-item-width,104rpx)}.item_active{background:#3678e3;color:#fff}.item_disabled{opacity:.5}.col_item{display:flex;justify-content:center}

package/dist/calendar-utils/types.d.ts

@@ -0,0 +1,7 @@
+export interface Day {
+    date: Date;
+    type: string;
+    text: number;
+    bottomInfo?: string;
+    customClass?: string;
+}

package/dist/calendar-utils/types.js

@@ -0,0 +1 @@
+export {};

package/dist/calendar-utils/utils.d.ts

@@ -0,0 +1,21 @@
+export declare function formatMonthTitle(date: Date, formatter?: string): string;
+export declare function compareMonth(date1: Date | number, date2: Date | number): 0 | 1 | -1;
+export declare function compareDay(day1: Date | number, day2: Date | number): 0 | 1 | -1;
+export declare function getDayByOffset(date: Date, offset: number): Date;
+export declare function getPrevDay(date: Date): Date;
+export declare function getNextDay(date: Date): Date;
+export declare function getToday(): Date;
+export declare function calcDateNum(date: [Date, Date]): number;
+export declare function copyDates(dates: Date | Date[]): Date | Date[];
+export declare function getMonthEndDay(year: number, month: number): number;
+export declare function getMonths(minDate: number, maxDate: number): number[];
+export declare function getYears(minDate: number, maxDate: number): number[];
+export declare function getCurrentIndex(currentDate: any, months: any): number;
+export declare function getWeekStartAndEnd(date: Date): {
+    weekStart: Date;
+    weekEnd: Date;
+};
+export declare const getInitEdgeDate: (type: string) => {
+    min: number;
+    max: number;
+};