@tuya-miniapp/smart-ui 1.3.0-beta-2 → 1.3.1-beta-2

package/lib/calendar/components/month/index.js

@@ -39,10 +39,6 @@ var utils_1 = require("../../utils");
             type: Boolean,
             value: true,
         },
-        dayClassMap: {
-            type: null,
-            observer: 'setDays',
-        },
         subFormatter: String,
         rangeStart: String,
         rangeEnd: String,
@@ -62,7 +58,6 @@ var utils_1 = require("../../utils");
             }
         },
         setDays: function () {
-            var _a;
             var days = [];
             var startDate = new Date(this.data.date);
             var year = startDate.getFullYear();
@@ -77,7 +72,6 @@ var utils_1 = require("../../utils");
                     text: day,
                     bottomInfo: this.getBottomInfo(type),
                 };
-                config.className = (_a = this.data.dayClassMap[(0, utils_1.formatDate)(date)]) !== null && _a !== void 0 ? _a : '';
                 if (this.data.formatter) {
                     config = this.data.formatter(config);
                 }
@@ -151,6 +145,9 @@ var utils_1 = require("../../utils");
             if (type === 'range') {
                 return this.getRangeDayType(day);
             }
+            if (type === 'week') {
+                return this.getRangeDayType(day);
+            }
             return '';
         },
         getBottomInfo: function (type) {

package/lib/calendar/components/month/index.wxml

@@ -2,14 +2,7 @@
 <wxs src="../../../wxs/utils.wxs" module="utils" />
 
 <view class="smart-calendar__month" style="{{ computed.getMonthStyle(visible, date, rowHeight) }}">
-  <view wx:if="{{ showMonthTitle }}" class="smart-calendar__month-title">
-    {{ computed.formatMonthTitle(date, subFormatter) }}
-  </view>
-
   <view wx:if="{{ visible }}" class="smart-calendar__days">
-    <view wx:if="{{ showMark }}" class="smart-calendar__month-mark">
-      {{ computed.getMark(date) }}
-    </view>
 
     <view
       wx:for="{{ days }}"
@@ -22,16 +15,10 @@
       <view wx:if="{{ item.type === 'selected' }}" class="smart-calendar__selected-day" style="width: {{ rowHeight }}px; height: {{ rowHeight }}px; background: {{ color }}">
         <view wx:if="{{ item.topInfo }}" class="smart-calendar__top-info">{{ item.topInfo }}</view>
         {{ item.text }}
-        <view wx:if="{{ item.bottomInfo }}" class="smart-calendar__bottom-info">
-          {{ item.bottomInfo }}
-        </view>
       </view>
       <block wx:else>
         <view wx:if="{{ item.topInfo }}" class="smart-calendar__top-info">{{ item.topInfo }}</view>
         {{ item.text }}
-        <view wx:if="{{ item.bottomInfo }}" class="smart-calendar__bottom-info">
-          {{ item.bottomInfo }}
-        </view>
       </block>
     </view>
   </view>

package/lib/calendar/components/month/index.wxs

@@ -10,9 +10,12 @@ 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);
+  var offset =
+    current < firstDayOfWeek
+      ? 7 - firstDayOfWeek + current
+      : current === 7 && firstDayOfWeek === 0
+      ? 0
+      : current - firstDayOfWeek;
 
   if (index === 0) {
     style.push(['margin-left', (100 * offset) / 7 + '%']);
@@ -32,7 +35,7 @@ function getDayStyle(type, index, date, rowHeight, color, firstDayOfWeek) {
     ) {
       style.push(['background', color]);
     } else if (type === 'middle') {
-      style.push(['color', color]);
+      style.push(['background', color]);
     }
   }
 
@@ -43,10 +46,13 @@ function getDayStyle(type, index, date, rowHeight, color, firstDayOfWeek) {
     .join(';');
 }
 
-function formatMonthTitle(date, formatter = "YYYY-MM") {
+function formatMonthTitle(date, formatter = 'YYYY-MM') {
   date = getDate(date);
   const year = date.getFullYear();
-  const month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1 + "";
+  const month =
+    date.getMonth() + 1 < 10
+      ? `0${date.getMonth() + 1}`
+      : date.getMonth() + 1 + '';
   return formatter.replace('YYYY', year + '').replace('MM', month);
 }
 
@@ -69,5 +75,5 @@ module.exports = {
   getMark: getMark,
   getDayStyle: getDayStyle,
   formatMonthTitle: formatMonthTitle,
-  getMonthStyle: getMonthStyle
+  getMonthStyle: getMonthStyle,
 };

package/lib/calendar/components/month/index.wxss

@@ -1 +1 @@
-@import '../../../common/index.wxss';.smart-calendar{background-color:var(--calendar-background-color,var(--app-B6,#fff));display:flex;flex-direction:column;height:100%}.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{font-size:var(--calendar-day-font-size,16px);height:var(--calendar-day-height,64px);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,#ee0a24);color:var(--calendar-range-edge-color,#fff)}.smart-calendar__day--start{border-radius:4px 0 0 4px}.smart-calendar__day--end{border-radius:0 4px 4px 0}.smart-calendar__day--multiple-selected,.smart-calendar__day--start-end{border-radius:4px}.smart-calendar__day--middle{color:var(--calendar-range-middle-color,#ee0a24)}.smart-calendar__day--middle:after{background-color:currentColor;bottom:0;content:"";left:0;opacity:var(--calendar-range-middle-background-opacity,.1);position:absolute;right:0;top:0}.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,#ee0a24);border-radius:4px;color:var(--calendar-selected-day-color,#fff);height:var(--calendar-selected-day-size,54px);width:var(--calendar-selected-day-size,54px)}
+@import '../../../common/index.wxss';.smart-calendar{background-color:var(--calendar-background-color,var(--app-B6,#fff));display:flex;flex-direction:column;height:100%}.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{font-size:var(--calendar-day-font-size,15px);font-weight:500;height:var(--calendar-day-height,100rpx);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:34rpx;border-top-left-radius:34rpx}.smart-calendar__day--end{border-bottom-right-radius:34rpx;border-top-right-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,var(--app-B3,#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/lib/calendar/components/month-list/index.css

@@ -0,0 +1 @@
+@import '../../../common/index.css';.item{border-radius:50%;color:rgba(0,0,0,.9);font-size:15px;font-weight:500;line-height:104rpx;text-align:center}.item,.item_active{height:104rpx;width:104rpx}.item_active{background:#3678e3;color:#fff}.item_disabled{opacity:.5}

package/lib/calendar/components/month-list/index.d.ts

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

package/lib/calendar/components/month-list/index.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// components/month-list.js
+var utils_1 = require("../../utils");
+var component_1 = require("../../../common/component");
+(0, component_1.SmartComponent)({
+    /**
+     * 组件的属性列表
+     */
+    props: {
+        date: {
+            type: null,
+            observer: function (newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    this.calcMonth();
+                }
+            },
+        },
+        minDate: {
+            type: null,
+            value: new Date(new Date().getFullYear(), 0, 1).getTime(),
+        },
+        maxDate: {
+            type: null,
+            value: new Date(new Date().getFullYear(), 11, 31).getTime(),
+        },
+        currentYear: {
+            type: null,
+            value: new Date().getFullYear(),
+        },
+        visibleIndex: {
+            type: Number,
+            value: 0,
+            observer: function (newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    this.getMonthList();
+                }
+            },
+        },
+        monthsFormatter: {
+            type: null,
+            value: [
+                'Jan',
+                'Feb',
+                'Mar',
+                'Apr',
+                'May',
+                'Jun',
+                'Jul',
+                'Aug',
+                'Sept',
+                'Oct',
+                'Nov',
+                'Dec',
+            ],
+        },
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        months: [],
+        currentMonth: null,
+    },
+    created: function () {
+        this.getMonthList();
+        this.calcMonth();
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        calcMonth: function () {
+            var date = new Date(this.data.date);
+            var cur = date.getMonth();
+            this.setData({
+                currentMonth: cur,
+            });
+        },
+        getMonthList: function () {
+            var _a = this.data, minDate = _a.minDate, maxDate = _a.maxDate, visibleIndex = _a.visibleIndex, _b = _a.monthsFormatter, monthsFormatter = _b === void 0 ? [] : _b;
+            var cur = new Date().getFullYear() + visibleIndex;
+            var start = new Date(cur, 0, 1).getTime();
+            var end = new Date(cur, 11, 31).getTime();
+            var minDateTime = new Date(minDate).getTime();
+            var maxDateTime = new Date(maxDate).getTime();
+            var months = (0, utils_1.getMonths)(start, end);
+            var monthlist = months.map(function (date) {
+                var monthVal = new Date(date).getMonth();
+                var time = new Date(date).getTime();
+                var isDisabled = time < minDateTime || time > maxDateTime;
+                return {
+                    value: date,
+                    month: monthVal,
+                    text: monthsFormatter[monthVal] || monthVal + 1,
+                    type: isDisabled ? 'disabled' : '',
+                };
+            });
+            this.setData({
+                months: monthlist,
+            });
+        },
+        onClick: function (event) {
+            var index = event.currentTarget.dataset.index;
+            var item = this.data.months[index];
+            if (item.type !== 'disabled') {
+                this.$emit('click', item.value);
+                this.setData({
+                    date: item.value,
+                });
+            }
+        },
+    },
+});

package/lib/calendar/components/month-list/index.json

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

package/lib/calendar/components/month-list/index.wxml

@@ -0,0 +1,9 @@
+<view class="contain">
+  <smart-row>
+    <smart-col wx:for="{{months}}" span="6">
+      <view class="item {{ currentMonth === item.month ? 'item_active' : '' }} {{ item.type === 'disabled' ? 'item_disabled' : '' }}" data-index="{{index}}" bindtap="onClick">
+        {{item.text}}
+      </view>
+    </smart-col>
+  </smart-row>
+</view>

package/lib/calendar/components/month-list/index.wxss

@@ -0,0 +1 @@
+@import '../../../common/index.wxss';.item{border-radius:50%;color:rgba(0,0,0,.9);font-size:15px;font-weight:500;line-height:104rpx;text-align:center}.item,.item_active{height:104rpx;width:104rpx}.item_active{background:#3678e3;color:#fff}.item_disabled{opacity:.5}

package/lib/calendar/components/year-list/index.css

@@ -0,0 +1 @@
+@import '../../../common/index.css';.contain{margin:24rpx 0}.item{border-radius:50%;color:rgba(0,0,0,.9);font-size:15px;font-weight:500;line-height:104rpx;text-align:center}.item,.item_active{height:104rpx;width:104rpx}.item_active{background:#3678e3;color:#fff}.item_disabled{opacity:.5}

package/lib/calendar/components/year-list/index.d.ts

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

package/lib/calendar/components/year-list/index.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// components/month-list.js
+var utils_1 = require("../../utils");
+var component_1 = require("../../../common/component");
+(0, component_1.SmartComponent)({
+    /**
+     * 组件的属性列表
+     */
+    props: {
+        date: {
+            type: null,
+            observer: function (newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    this.calcYear();
+                }
+            },
+        },
+        minDate: {
+            type: null,
+            value: new Date(new Date().getFullYear() - 30, 0, 1).getTime(),
+        },
+        maxDate: {
+            type: null,
+            value: new Date(new Date().getFullYear() + 30, 11, 31).getTime(),
+        },
+        currentYear: {
+            type: null,
+            value: new Date().getFullYear(),
+        },
+        yearFormatter: {
+            type: null,
+            value: 'YYYY',
+        },
+        visibleIndex: {
+            type: Number,
+            value: 0,
+            observer: function (newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    this.getYearList();
+                }
+            },
+        },
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        years: [],
+        currentYear: null,
+    },
+    created: function () {
+        this.getYearList();
+        this.calcYear();
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        calcYear: function () {
+            var date = new Date(this.data.date);
+            var cur = date.getFullYear();
+            this.setData({
+                currentYear: cur,
+            });
+        },
+        getYearList: function () {
+            var _a = this.data, minDate = _a.minDate, maxDate = _a.maxDate, _b = _a.yearFormatter, yearFormatter = _b === void 0 ? 'YYYY' : _b, visibleIndex = _a.visibleIndex, date = _a.date;
+            var cur = new Date(date).getFullYear();
+            var offset = visibleIndex * 12;
+            var start = new Date(cur + offset - 5, 0, 1).getTime();
+            var end = new Date(cur + offset + 6, 11, 31).getTime();
+            var minStart = new Date(minDate).getTime();
+            var maxStart = new Date(maxDate).getTime();
+            var years = (0, utils_1.getYears)(start, end);
+            var yearlist = years.map(function (date) {
+                var yearVal = new Date(date).getFullYear();
+                var curTime = new Date(date).getTime();
+                var disabled = curTime <= minStart || curTime >= maxStart;
+                return {
+                    value: date,
+                    year: yearVal,
+                    text: yearFormatter.replace('YYYY', yearVal),
+                    type: disabled ? 'disabled' : '',
+                };
+            });
+            this.setData({
+                years: yearlist,
+            });
+        },
+        onClick: function (event) {
+            var index = event.currentTarget.dataset.index;
+            var item = this.data.years[index];
+            if (item.type !== 'disabled') {
+                this.$emit('click', item.value);
+                this.setData({
+                    date: item.value,
+                });
+            }
+        },
+    },
+});

package/lib/calendar/components/year-list/index.json

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

package/lib/calendar/components/year-list/index.wxml

@@ -0,0 +1,9 @@
+<view class="contain">
+  <smart-row>
+    <smart-col wx:for="{{years}}" span="6">
+      <view class="item {{ currentYear === item.year ? 'item_active' : '' }} {{ item.type === 'disabled' ? 'item_disabled' : '' }}" data-index="{{index}}" bindtap="onClick">
+        {{item.text}}
+      </view>
+    </smart-col>
+  </smart-row>
+</view>

package/lib/calendar/components/year-list/index.wxss

@@ -0,0 +1 @@
+@import '../../../common/index.wxss';.contain{margin:24rpx 0}.item{border-radius:50%;color:rgba(0,0,0,.9);font-size:15px;font-weight:500;line-height:104rpx;text-align:center}.item,.item_active{height:104rpx;width:104rpx}.item_active{background:#3678e3;color:#fff}.item_disabled{opacity:.5}

package/lib/calendar/index.css

@@ -1 +1 @@
-@import '../common/index.css';.smart-calendar{background-color:var(--calendar-background-color,var(--app-B6,#fff));color:var(--calendar-text-color,#000);display:flex;flex-direction:column;height:var(--calendar-height,100%)}.smart-calendar__close-icon{top:11px}.smart-calendar__popup--bottom,.smart-calendar__popup--top{height:var(--calendar-popup-height,90%)}.smart-calendar__popup--left,.smart-calendar__popup--right{height:100%}.smart-calendar__body{-webkit-overflow-scrolling:touch;flex:1;overflow:auto}.smart-calendar__footer{flex-shrink:0;padding:0 var(--padding-md,16px)}.smart-calendar__footer--safe-area-inset-bottom{padding-bottom:env(safe-area-inset-bottom)}.smart-calendar__footer+.smart-calendar__footer,.smart-calendar__footer:empty{display:none}.smart-calendar__footer:empty+.smart-calendar__footer{display:block!important}.smart-calendar__confirm{height:var(--calendar-confirm-button-height,36px)!important;line-height:var(--calendar-confirm-button-line-height,34px)!important;margin:var(--calendar-confirm-button-margin,7px 0)!important}
+@import '../common/index.css';.smart-calendar{background-color:var(--calendar-background-color,var(--app-B6,#fff));color:var(--calendar-text-color,#000);display:flex;flex-direction:column;height:auto}.smart-calendar__close-icon{top:11px}.smart-calendar__popup--bottom,.smart-calendar__popup--top{height:848rpx}.smart-calendar__popup--left,.smart-calendar__popup--right{height:100%}.smart-calendar-month{margin-top:44rpx}.smart-calendar__body{-webkit-overflow-scrolling:touch;flex:1;overflow:auto}.smart-calendar__footer{flex-shrink:0;padding:0 var(--padding-md,16px)}.smart-calendar__footer--safe-area-inset-bottom{padding-bottom:env(safe-area-inset-bottom)}.smart-calendar__footer+.smart-calendar__footer,.smart-calendar__footer:empty{display:none}.smart-calendar__footer:empty+.smart-calendar__footer{display:block!important}

package/lib/calendar/index.js

@@ -15,7 +15,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var component_1 = require("../common/component");
 var utils_1 = require("./utils");
 var toast_1 = __importDefault(require("../toast/toast"));
-var utils_2 = require("../common/utils");
 var initialMinDate = (0, utils_1.getToday)().getTime();
 var initialMaxDate = (function () {
     var now = (0, utils_1.getToday)();
@@ -44,15 +43,26 @@ var getTime = function (date) {
             type: Object,
             value: {
                 shortWeekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+                monthsFormatter: [
+                    'Jan',
+                    'Feb',
+                    'Mar',
+                    'Apr',
+                    'May',
+                    'Jun',
+                    'Jul',
+                    'Aug',
+                    'Sept',
+                    'Oct',
+                    'Nov',
+                    'Dec',
+                ],
+                yearFormatter: 'YYYY',
                 subFormatter: 'YYYY-MM',
                 rangeStart: 'Start',
                 rangeEnd: 'End',
             },
         },
-        dayClassMap: {
-            type: Object,
-            value: {},
-        },
         formatter: null,
         confirmText: {
             type: String,
@@ -62,6 +72,10 @@ var getTime = function (date) {
             type: String,
             value: '确定',
         },
+        mode: {
+            type: String,
+            value: 'day',
+        },
         rangePrompt: String,
         showRangePrompt: {
             type: Boolean,
@@ -152,6 +166,7 @@ var getTime = function (date) {
         currentDate: null,
         scrollIntoView: '',
         visibleIndex: 0,
+        months: [],
     },
     watch: {
         minDate: function () {
@@ -162,9 +177,7 @@ var getTime = function (date) {
         },
     },
     created: function () {
-        this.setData({
-            currentDate: this.getInitialDate(this.data.defaultDate),
-        });
+        this.initData();
     },
     mounted: function () {
         this.isMounted = true;
@@ -174,32 +187,75 @@ var getTime = function (date) {
         }
     },
     methods: {
+        onPrev: function () {
+            var visibleIndex = this.data.visibleIndex - 1;
+            if (this.data.mode === 'year') {
+                this.setData({
+                    visibleIndex: visibleIndex,
+                });
+                return;
+            }
+            if (this.data.mode === 'month') {
+                this.setData({
+                    visibleIndex: visibleIndex,
+                });
+                return;
+            }
+            if (this.data.months[visibleIndex]) {
+                this.setData({
+                    visibleIndex: visibleIndex,
+                });
+            }
+        },
+        onNext: function () {
+            var visibleIndex = this.data.visibleIndex + 1;
+            if (this.data.mode === 'year') {
+                this.setData({
+                    visibleIndex: visibleIndex,
+                });
+                return;
+            }
+            if (this.data.mode === 'month') {
+                this.setData({
+                    visibleIndex: visibleIndex,
+                });
+                return;
+            }
+            if (this.data.months[visibleIndex]) {
+                this.setData({
+                    visibleIndex: visibleIndex,
+                });
+            }
+        },
         reset: function () {
             this.setData({ currentDate: this.getInitialDate(this.data.defaultDate) });
             this.scrollIntoView();
         },
+        initYearIdx: function (currentDate) {
+        },
+        initData: function () {
+            var currentDate = this.getInitialDate(this.data.defaultDate);
+            var months = (0, utils_1.getMonths)(this.data.minDate, this.data.maxDate);
+            var visibleIndex = this.data.defaultDate
+                ? (0, utils_1.getCurrentIndex)(currentDate, months)
+                : months.length - 1;
+            var isYear = this.data.mode === 'year';
+            var isMonth = this.data.mode === 'month';
+            var data = {
+                currentDate: currentDate,
+                months: months,
+                visibleIndex: visibleIndex,
+            };
+            if (isYear || isMonth) {
+                // @ts-ignore
+                delete data.visibleIndex;
+            }
+            this.setData(data);
+        },
         initRect: function () {
-            var _this = this;
             if (!this.isMounted)
                 return;
-            if (this.contentObserver != null) {
-                this.contentObserver.disconnect();
-            }
-            var contentObserver = this.createIntersectionObserver({
-                thresholds: [0, 0.1, 0.9, 1],
-                observeAll: true,
-            });
-            this.contentObserver = contentObserver;
-            contentObserver.relativeTo('.smart-calendar__body');
-            contentObserver.observe('.month', function (res) {
-                if (res.boundingClientRect.top <= res.relativeRect.top) {
-                    // @ts-ignore
-                    _this.setData({
-                        subtitle: (0, utils_1.formatMonthTitle)(res.dataset.date, _this.properties.locale.subFormatter),
-                        visibleIndex: res.dataset.index,
-                    });
-                }
-            });
+            this.initData();
         },
         limitDateRange: function (date, minDate, maxDate) {
             if (minDate === void 0) { minDate = null; }
@@ -221,7 +277,7 @@ var getTime = function (date) {
             if (!defaultDate)
                 return [];
             var now = (0, utils_1.getToday)().getTime();
-            if (type === 'range') {
+            if (type === 'range' || type === 'week') {
                 if (!Array.isArray(defaultDate)) {
                     defaultDate = [];
                 }
@@ -244,31 +300,8 @@ var getTime = function (date) {
             return this.limitDateRange(defaultDate);
         },
         scrollIntoView: function () {
-            var _this = this;
             if (!this.isMounted)
                 return;
-            (0, utils_2.requestAnimationFrame)(function () {
-                var _a = _this.data, currentDate = _a.currentDate, type = _a.type, show = _a.show, poppable = _a.poppable, minDate = _a.minDate, maxDate = _a.maxDate;
-                if (!currentDate)
-                    return;
-                // @ts-ignore
-                var targetDate = type === 'single' ? currentDate : currentDate[0];
-                var displayed = show || !poppable;
-                if (!targetDate || !displayed) {
-                    return;
-                }
-                var months = (0, utils_1.getMonths)(minDate, maxDate);
-                months.some(function (month, index) {
-                    if ((0, utils_1.compareMonth)(month, targetDate) === 0) {
-                        _this.setData({
-                            scrollIntoView: "month".concat(index),
-                            visibleIndex: index,
-                        });
-                        return true;
-                    }
-                    return false;
-                });
-            });
         },
         onOpen: function () {
             this.$emit('open');
@@ -288,7 +321,14 @@ var getTime = function (date) {
             }
             var date = event.detail.date;
             var _a = this.data, type = _a.type, currentDate = _a.currentDate, allowSameDay = _a.allowSameDay;
-            if (type === 'range') {
+            if (type === 'week') {
+                var _b = (0, utils_1.getWeekStartAndEnd)(date), weekStart = _b.weekStart, weekEnd = _b.weekEnd;
+                this.select([
+                    Math.max(getTime(weekStart), getTime(this.data.minDate)),
+                    Math.min(getTime(weekEnd), getTime(this.data.maxDate)),
+                ], true);
+            }
+            else if (type === 'range') {
                 // @ts-ignore
                 var startDay_1 = currentDate[0], endDay = currentDate[1];
                 if (startDay_1 && !endDay) {
@@ -342,6 +382,13 @@ var getTime = function (date) {
                 this.select(date, true);
             }
         },
+        onClickDate: function (event) {
+            if (this.data.readonly) {
+                return;
+            }
+            var date = event.detail;
+            this.select(date, true);
+        },
         unselect: function (dateArray) {
             var date = dateArray[0];
             if (date) {

package/lib/calendar/index.json

@@ -3,8 +3,10 @@
   "usingComponents": {
     "header": "./components/header/index",
     "month": "./components/month/index",
+    "month-list": "./components/month-list/index",
+    "year-list": "./components/year-list/index",
     "smart-button": "../button/index",
     "smart-popup": "../popup/index",
     "smart-toast": "../toast/index"
   }
-}
+}

package/lib/calendar/index.wxml

@@ -10,7 +10,7 @@
   show="{{ show }}"
   round="{{ round }}"
   position="{{ position }}"
-  closeable="{{ showTitle || showSubtitle }}"
+  closeable="{{false}}"
   close-on-click-overlay="{{ closeOnClickOverlay }}"
   safe-area-inset-bottom="{{ safeAreaInsetBottom }}"
   root-portal="{{ rootPortal }}"