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

package/dist/bottom-sheet/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-bottom-sheet{color:var(--bottom-sheet-font-color,var(--app-B4-N1,#000));max-height:var(--bottom-sheet-max-height,50%)!important;min-height:var(--bottom-sheet-min-height,auto);padding:var(--bottom-sheet-padding,0 16px);padding-bottom:env(safe-area-inset-bottom);width:var(--bottom-sheet-width,100%)!important}.smart-bottom-sheet__header{color:var(--bottom-sheet-header-color,var(--app-B4-N1,#000));font-size:var(--bottom-sheet-header-font-size,17px);font-weight:var(--bottom-sheet-header-font-weight,600);line-height:var(--bottom-sheet-header-height,56px);text-align:center}.smart-bottom-sheet__icon{margin:var(--bottom-sheet-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}

package/dist/bottom-sheet/index.d.ts

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

package/dist/bottom-sheet/index.js

@@ -0,0 +1,70 @@
+import xmarkIcon from '@tuya-miniapp/icons/dist/svg/Xmark';
+import { SmartComponent } from '../common/component';
+SmartComponent({
+    props: {
+        show: Boolean,
+        title: String,
+        iconSize: {
+            type: null,
+            value: 24,
+        },
+        round: {
+            type: Boolean,
+            value: true,
+        },
+        zIndex: {
+            type: Number,
+            value: 100,
+        },
+        overlay: {
+            type: Boolean,
+            value: true,
+        },
+        closeOnClickOverlay: {
+            type: Boolean,
+            value: true,
+        },
+        rootPortal: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    data: {
+        xmarkIcon,
+        xmarkIconColor: '#3678E3',
+    },
+    mounted() {
+        var _a;
+        // @ts-ignore
+        const themeInfo = (_a = ty === null || ty === void 0 ? void 0 : ty.getThemeInfo()) !== null && _a !== void 0 ? _a : {};
+        const xmarkIconColor = this.data.activeColor || themeInfo['--app-B4-N3'] || 'rgba(0, 0, 0, 0.5)';
+        this.setData({ xmarkIconColor });
+    },
+    methods: {
+        onClose() {
+            this.$emit('close');
+        },
+        onClickOverlay() {
+            this.$emit('click-overlay');
+            this.onClose();
+        },
+        onBeforeEnter() {
+            this.$emit('before-enter');
+        },
+        onEnter() {
+            this.$emit('enter');
+        },
+        onAfterEnter() {
+            this.$emit('after-enter');
+        },
+        onBeforeLeave() {
+            this.$emit('before-leave');
+        },
+        onLeave() {
+            this.$emit('leave');
+        },
+        onAfterLeave() {
+            this.$emit('after-leave');
+        },
+    },
+});

package/dist/bottom-sheet/index.json

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

package/dist/bottom-sheet/index.wxml

@@ -0,0 +1,26 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<smart-popup
+  show="{{ show }}"
+  position="bottom"
+  round="{{ round }}"
+  z-index="{{ zIndex }}"
+  overlay="{{ overlay }}"
+  custom-class="smart-bottom-sheet custom-class"
+  safe-area-inset-bottom="{{false}}"
+  close-on-click-overlay="{{ closeOnClickOverlay }}"
+  root-portal="{{ rootPortal }}"
+  bind:close="onClickOverlay"
+  bind:before-enter="onBeforeEnter"
+  bind:enter="onEnter"
+  bind:after-enter="onAfterEnter"
+  bind:before-leave="onBeforeLeave"
+  bind:leave="onLeave"
+  bind:after-leave="onAfterLeave"
+>
+  <view wx:if="{{ title }}" class="smart-bottom-sheet__header">
+    {{ title }}
+    <smart-icon bind:click="onClose" name="{{ xmarkIcon }}" class="smart-bottom-sheet__icon" size="{{ iconSize }}" color="{{ xmarkIconColor }}" />
+  </view>
+  <slot />
+</smart-popup>

package/dist/bottom-sheet/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-bottom-sheet{color:var(--bottom-sheet-font-color,var(--app-B4-N1,#000));max-height:var(--bottom-sheet-max-height,50%)!important;min-height:var(--bottom-sheet-min-height,auto);padding:var(--bottom-sheet-padding,0 16px);padding-bottom:env(safe-area-inset-bottom);width:var(--bottom-sheet-width,100%)!important}.smart-bottom-sheet__header{color:var(--bottom-sheet-header-color,var(--app-B4-N1,#000));font-size:var(--bottom-sheet-header-font-size,17px);font-weight:var(--bottom-sheet-header-font-weight,600);line-height:var(--bottom-sheet-header-height,56px);text-align:center}.smart-bottom-sheet__icon{margin:var(--bottom-sheet-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}

package/dist/button/index.js

@@ -28,6 +28,7 @@ SmartComponent({
         disabled: Boolean,
         loadingText: String,
         customStyle: String,
+        textStyle: String,
         loadingType: {
             type: String,
             value: 'circular',

package/dist/button/index.wxml

@@ -49,7 +49,7 @@
       class="smart-button__icon"
       custom-style="line-height: inherit;"
     />
-    <view class="smart-button__text">
+    <view class="smart-button__text" style="{{textStyle}}">
       <slot />
     </view>
     <smart-icon

package/dist/calendar/calendar.wxml

@@ -4,73 +4,74 @@
   <header
     title="{{ title }}"
     showTitle="{{ showTitle }}"
-    subtitle="{{ subtitle }}"
+    subtitle="{{ mode === 'year' ? '' : mode === 'month' ? computed.formatYearTitle(currentDate, visibleIndex, locale.yearFormatter) : computed.formatMonthTitle(months[visibleIndex], subFormatter) }}"
+    subFormatter="{{locale.subFormatter || 'YYYY-MM'}}"
     showSubtitle="{{ showSubtitle }}"
     firstDayOfWeek="{{ firstDayOfWeek }}"
     bind:click-subtitle="onClickSubtitle"
     defaultWeeks="{{locale.shortWeekDays || ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}}"
+    bind:click-prev="onPrev"
+    bind:click-next="onNext"
+    bind:click-save="onConfirm"
+    hideWeek="{{ mode !== 'day' }}"
   >
     <slot name="title" slot="title"></slot>
   </header>
 
-  <scroll-view
-    class="smart-calendar__body"
-    scroll-y
-    scroll-into-view="{{ scrollIntoView }}"
-  >
-    <month
-      wx:for="{{ computed.getMonths(minDate, maxDate) }}"
-      wx:key="index"
-      id="month{{ index }}"
-      class="month"
-      visible="{{ computed.getVisible(visibleIndex, index) }}"
-      subFormatter="{{locale.subFormatter || 'YYYY-MM'}}"
-      rangeStart="{{locale.rangeStart || 'Start'}}"
-      rangeEnd="{{locale.rangeEnd || 'End'}}"
-      data-date="{{ item }}"
-      data-index="{{index}}"
-      date="{{ item }}"
-      type="{{ type }}"
-      color="{{ color }}"
+  <block wx:if="{{mode === 'day'}}">
+    <view class="smart-calendar-month_wrap" wx:for="{{ months }}" wx:key="index">
+      <month
+        id="month{{ index }}"
+        class="smart-calendar-month month"
+        wx:if="{{ computed.getVisible(visibleIndex, index) }}"
+        subFormatter="{{locale.subFormatter || 'YYYY-MM'}}"
+        rangeStart="{{locale.rangeStart || 'Start'}}"
+        rangeEnd="{{locale.rangeEnd || 'End'}}"
+        data-date="{{ item }}"
+        data-index="{{index}}"
+        date="{{ item }}"
+        type="{{ type }}"
+        color="{{ color }}"
+        minDate="{{ minDate }}"
+        maxDate="{{ maxDate }}"
+        showMark="{{ showMark }}"
+        formatter="{{ formatter }}"
+        rowHeight="{{ rowHeight }}"
+        currentDate="{{ currentDate }}"
+        showSubtitle="{{ showSubtitle }}"
+        allowSameDay="{{ allowSameDay }}"
+        showMonthTitle="{{ index !== 0 || !showSubtitle }}"
+        firstDayOfWeek="{{ firstDayOfWeek }}"
+        bind:click="onClickDay"
+      />
+    </view>
+  </block>
+  
+  <block wx:if="{{mode === 'month'}}">
+    <month-list
       minDate="{{ minDate }}"
       maxDate="{{ maxDate }}"
-      showMark="{{ showMark }}"
-      formatter="{{ formatter }}"
-      rowHeight="{{ rowHeight }}"
-      currentDate="{{ currentDate }}"
-      showSubtitle="{{ showSubtitle }}"
-      allowSameDay="{{ allowSameDay }}"
-      showMonthTitle="{{ index !== 0 || !showSubtitle }}"
-      firstDayOfWeek="{{ firstDayOfWeek }}"
-      bind:click="onClickDay"
+      monthsFormatter="{{ locale.monthsFormatter }}"
+      bind:click="onClickDate"
+      date="{{defaultDate}}"
+      visibleIndex="{{visibleIndex}}"
     />
-  </scroll-view>
+  </block>
 
-  <view
-    class="{{ utils.bem('calendar__footer', { safeAreaInsetBottom }) }}"
-  >
-    <slot name="footer"></slot>
-  </view>
+  <block wx:if="{{mode === 'year'}}">
+    <year-list 
+      minDate="{{ minDate }}"
+      maxDate="{{ maxDate }}"
+      yearFormatter="{{ locale.yearFormatter }}"
+      bind:click="onClickDate"
+      date="{{defaultDate}}"
+      visibleIndex="{{visibleIndex}}"
+     />
+  </block>
 
   <view
     class="{{ utils.bem('calendar__footer', { safeAreaInsetBottom }) }}"
   >
-    <smart-button
-      wx:if="{{ showConfirm }}"
-      round
-      block
-      type="danger"
-      color="{{ color }}"
-      custom-class="smart-calendar__confirm"
-      disabled="{{ computed.getButtonDisabled(type, currentDate, minRange) }}"
-      nativeType="text"
-      bind:click="onConfirm"
-    >
-      {{
-        computed.getButtonDisabled(type, currentDate, minRange)
-          ? confirmDisabledText
-          : confirmText
-      }}
-    </smart-button>
+    <slot name="footer"></slot>
   </view>
 </view>

package/dist/calendar/components/header/index.css

@@ -1 +1 @@
-@import '../../../common/index.css';.smart-calendar__header{box-shadow:var(--calendar-header-box-shadow,0 2px 10px hsla(220,1%,50%,.16));flex-shrink:0}.smart-calendar__header-subtitle,.smart-calendar__header-title{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__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}.smart-calendar__weekday{flex:1;font-size:var(--calendar-weekdays-font-size,12px);line-height:var(--calendar-weekdays-height,30px);text-align:center}
+@import '../../../common/index.css';.smart-calendar__header{flex-shrink:0}.smart-calendar__header-title{position:relative}.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{font-size:16px;font-weight:var(--font-weight-bold,500);font-weight:500;height:var(--calendar-header-title-height,44px);line-height:var(--calendar-header-title-height,44px);text-align:center}.smart-calendar__header-subtitle_wrap{align-items:center;display:flex;justify-content:center;position:relative}.smart-calendar__header-subtitle_left{left:52rpx}.smart-calendar__header-subtitle_left,.smart-calendar__header-subtitle_right{align-items:center;background:rgba(0,0,0,.05);border-radius:50%;display:flex;height:48rpx;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:48rpx}.smart-calendar__header-subtitle_right{right:52rpx}.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}.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:500;line-height:var(--calendar-weekdays-height,30px);opacity:.5;text-align:center}

package/dist/calendar/components/header/index.js

@@ -1,14 +1,21 @@
 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: '日期选择',
         },
+        rightText: {
+            type: String,
+            value: '保存',
+        },
         subtitle: String,
         showTitle: Boolean,
         showSubtitle: Boolean,
         defaultWeeks: Array,
+        hideWeek: Boolean,
         firstDayOfWeek: {
             type: Number,
             observer: 'initWeekDay',
@@ -16,6 +23,8 @@ SmartComponent({
     },
     data: {
         weekdays: [],
+        LeftIcon,
+        RightIcon,
     },
     created() {
         this.initWeekDay();
@@ -34,5 +43,14 @@ SmartComponent({
         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/components/header/index.json

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

package/dist/calendar/components/header/index.wxml

@@ -1,14 +1,25 @@
 <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>
+    <view class="smart-calendar__header-title">
+      {{ title }}
+      <view class="smart-calendar__header-title-save" bind:tap=="onSave">{{ rightText }}</view>
+    </view>
   </block>
 
-  <view wx:if="{{ showSubtitle }}" class="smart-calendar__header-subtitle" bind:tap="onClickSubtitle">
-    {{ subtitle }}
+  <view class="smart-calendar__header-subtitle_wrap">
+    <view class="smart-calendar__header-subtitle_left" bind:tap="onPrev">
+      <smart-icon name="{{LeftIcon}}" />
+    </view>
+    <view wx:if="{{ showSubtitle }}" class="smart-calendar__header-subtitle" bind:tap="onClickSubtitle">
+      {{ subtitle }}
+    </view>
+    <view class="smart-calendar__header-subtitle_right" bind:tap="onNext">
+      <smart-icon name="{{RightIcon}}" />
+    </view>
   </view>
 
-  <view class="smart-calendar__weekdays">
+  <view class="smart-calendar__weekdays" wx:if="{{!hideWeek}}">
     <view wx:for="{{ weekdays }}" wx:key="index" class="smart-calendar__weekday">
       {{ item }}
     </view>

package/dist/calendar/components/header/index.wxss

@@ -1 +1 @@
-@import '../../../common/index.wxss';.smart-calendar__header{box-shadow:var(--calendar-header-box-shadow,0 2px 10px hsla(220,1%,50%,.16));flex-shrink:0}.smart-calendar__header-subtitle,.smart-calendar__header-title{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__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}.smart-calendar__weekday{flex:1;font-size:var(--calendar-weekdays-font-size,12px);line-height:var(--calendar-weekdays-height,30px);text-align:center}
+@import '../../../common/index.wxss';.smart-calendar__header{flex-shrink:0}.smart-calendar__header-title{position:relative}.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{font-size:16px;font-weight:var(--font-weight-bold,500);font-weight:500;height:var(--calendar-header-title-height,44px);line-height:var(--calendar-header-title-height,44px);text-align:center}.smart-calendar__header-subtitle_wrap{align-items:center;display:flex;justify-content:center;position:relative}.smart-calendar__header-subtitle_left{left:52rpx}.smart-calendar__header-subtitle_left,.smart-calendar__header-subtitle_right{align-items:center;background:rgba(0,0,0,.05);border-radius:50%;display:flex;height:48rpx;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:48rpx}.smart-calendar__header-subtitle_right{right:52rpx}.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}.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:500;line-height:var(--calendar-weekdays-height,30px);opacity:.5;text-align:center}

package/dist/calendar/components/month/index.css

@@ -1 +1 @@
-@import '../../../common/index.css';.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.css';.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/dist/calendar/components/month/index.js

@@ -35,7 +35,7 @@ SmartComponent({
         },
         visible: {
             type: Boolean,
-            value: true
+            value: true,
         },
         subFormatter: String,
         rangeStart: String,
@@ -141,6 +141,9 @@ SmartComponent({
             if (type === 'range') {
                 return this.getRangeDayType(day);
             }
+            if (type === 'week') {
+                return this.getRangeDayType(day);
+            }
             return '';
         },
         getBottomInfo(type) {
@@ -152,7 +155,9 @@ SmartComponent({
                     return this.properties.rangeEnd || 'End';
                 }
                 if (type === 'start-end') {
-                    return (this.properties.rangeStart || 'Start') + '/' + (this.properties.rangeEnd || 'End');
+                    return ((this.properties.rangeStart || 'Start') +
+                        '/' +
+                        (this.properties.rangeEnd || 'End'));
                 }
             }
         },

package/dist/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/dist/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/dist/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/dist/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/dist/calendar/components/month-list/index.d.ts

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

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

@@ -0,0 +1,112 @@
+// components/month-list.js
+import { getMonths } from '../../utils';
+import { SmartComponent } from '../../../common/component';
+SmartComponent({
+    /**
+     * 组件的属性列表
+     */
+    props: {
+        date: {
+            type: null,
+            observer(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(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() {
+        this.getMonthList();
+        this.calcMonth();
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        calcMonth() {
+            const date = new Date(this.data.date);
+            const cur = date.getMonth();
+            this.setData({
+                currentMonth: cur,
+            });
+        },
+        getMonthList() {
+            const { minDate, maxDate, visibleIndex, monthsFormatter = [], } = this.data;
+            const cur = new Date().getFullYear() + visibleIndex;
+            const start = new Date(cur, 0, 1).getTime();
+            const end = new Date(cur, 11, 31).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();
+                const isDisabled = time < minDateTime || time > maxDateTime;
+                return {
+                    value: date,
+                    month: monthVal,
+                    text: monthsFormatter[monthVal] || monthVal + 1,
+                    type: isDisabled ? 'disabled' : '',
+                };
+            });
+            this.setData({
+                months: monthlist,
+            });
+        },
+        onClick(event) {
+            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/components/month-list/index.json

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

package/dist/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/dist/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/dist/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}