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

package/lib/action-sheet/demo/index.js

@@ -0,0 +1,115 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../../common/component");
+(0, component_1.SmartComponent)({
+    data: {
+        show1: false,
+        show2: false,
+        show3: false,
+        show4: false,
+        show5: false,
+        showSelect: false,
+        showSelect2: false,
+        showNumber: false,
+        showPicker: false,
+        action1: [{ name: 'Action' }, { name: 'Action' }, { name: 'Action' }],
+        action2: [
+            { name: I18n.t('coloringOptions'), color: '#ee0a24' },
+            { loading: true },
+            { name: I18n.t('disableOption'), disabled: true },
+        ],
+        actionSelect: [
+            { id: 0, name: 'Action', checked: true },
+            { id: 1, name: 'Action', checked: false },
+            { id: 2, name: 'Action', checked: false },
+        ],
+        currentNumber: 100,
+        currentDate: new Date(2018, 0, 1),
+        currentDateStr: new Date(2018, 0, 1).toLocaleDateString(),
+        minDate: new Date(2018, 0, 1).getTime(),
+        formatter: function (type, value) {
+            if (type === 'year') {
+                return "".concat(value).concat(I18n.t('year'));
+            }
+            if (type === 'month') {
+                return "".concat(value).concat(I18n.t('month'));
+            }
+            return value;
+        },
+    },
+    methods: {
+        toggle: function (type) {
+            var _a;
+            this.setData((_a = {},
+                _a[type] = !this.data[type],
+                _a));
+        },
+        toggleActionSheet1: function () {
+            this.toggle('show1');
+        },
+        toggleActionSheet2: function () {
+            this.toggle('show2');
+        },
+        toggleActionSheet3: function () {
+            this.toggle('show3');
+        },
+        toggleActionSheet4: function () {
+            this.toggle('show4');
+        },
+        toggleActionSheet5: function () {
+            this.toggle('show5');
+        },
+        toggleActionSheet6: function () {
+            this.toggle('show6');
+        },
+        toggleActionSheetSelect: function () {
+            this.toggle('showSelect');
+        },
+        toggleActionSheetSelect2: function () {
+            this.toggle('showSelect2');
+        },
+        toggleActionSheetNumber: function () {
+            this.toggle('showNumber');
+        },
+        toggleActionSheetPicker: function () {
+            this.toggle('showPicker');
+        },
+        onChange: function (event) {
+            this.setData({ currentNumber: event.detail.value });
+        },
+        onSelect: function (evt) {
+            var id = evt.detail.id;
+            var newActionSelect = this.data.actionSelect.map(function (item) {
+                if (item.id === id)
+                    return __assign(__assign({}, item), { checked: true });
+                return __assign(__assign({}, item), { checked: false });
+            });
+            this.setData({
+                actionSelect: newActionSelect,
+            });
+        },
+        onInput: function (event) {
+            var detail = event.detail;
+            var date = new Date(detail);
+            this.setData({ currentDate: date });
+        },
+        onPickerConfirm: function () {
+            var _a, _b;
+            this.setData({
+                showPicker: false,
+                currentDateStr: (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.currentDate) === null || _b === void 0 ? void 0 : _b.toLocaleDateString(),
+            });
+        },
+    },
+});

package/lib/area/demo/index.d.ts

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

package/lib/area/demo/index.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../../common/component");
+var toast_1 = __importDefault(require("../../toast/toast"));
+var db = (_a = wx.cloud) === null || _a === void 0 ? void 0 : _a.database();
+(0, component_1.SmartComponent)({
+    data: {
+        areaList: {},
+        loading: true,
+        value: 330302,
+    },
+    mounted: function () {
+        var _this = this;
+        db === null || db === void 0 ? void 0 : db.collection('region').limit(1).get().then(function (res) {
+            if (res.data && res.data.length > 0) {
+                _this.setData({
+                    loading: false,
+                    areaList: res.data[0],
+                });
+            }
+        }).catch(function (err) {
+            console.log(err);
+            _this.setData({
+                loading: false,
+            });
+        });
+    },
+    methods: {
+        onChange: function (event) {
+            var values = event.detail.values;
+            (0, toast_1.default)({
+                context: this,
+                message: values.map(function (item) { return item.name; }).join('-'),
+            });
+        },
+        onConfirm: function (event) {
+            console.log(event);
+        },
+        onCancel: function (event) {
+            console.log(event);
+        },
+    },
+});

package/lib/area/index.js

@@ -79,8 +79,7 @@ var EMPTY_CODE = '000000';
         parseValues: function (values) {
             var columnsPlaceholder = this.data.columnsPlaceholder;
             return values.map(function (value, index) {
-                if (value &&
-                    (!value.code || value.name === columnsPlaceholder[index])) {
+                if (value && (!value.code || value.name === columnsPlaceholder[index])) {
                     return __assign(__assign({}, value), { code: '', name: '' });
                 }
                 return value;

package/lib/battery/demo/index.d.ts

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

package/lib/battery/demo/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../../common/component");
+(0, component_1.SmartComponent)({});

package/lib/battery/index.js

@@ -86,9 +86,7 @@ var wrapBatteryD = 'M6.5,0 C6.77614237,-5.07265313e-17 7,0.223857625 7,0.5 L7,1
         toSvgCssBackground: function (svgString) {
             var res = svgString;
             res = svgString
-                .replace('<svg', ~svgString.indexOf('xmlns')
-                ? '<svg'
-                : '<svg xmlns="http://www.w3.org/2000/svg"')
+                .replace('<svg', ~svgString.indexOf('xmlns') ? '<svg' : '<svg xmlns="http://www.w3.org/2000/svg"')
                 .replace(/"/g, "'")
                 .replace(/%/g, '%25')
                 .replace(/#/g, '%23')

package/lib/bottom-sheet/demo/index.d.ts

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

package/lib/bottom-sheet/demo/index.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../../common/component");
+(0, component_1.SmartComponent)({
+    data: {
+        show1: false,
+        show2: false,
+        show3: false,
+    },
+    methods: {
+        toggle: function (type) {
+            var _a;
+            this.setData((_a = {},
+                _a[type] = !this.data[type],
+                _a));
+        },
+        toggleActionSheet1: function () {
+            this.toggle('show1');
+        },
+        toggleActionSheet2: function () {
+            this.toggle('show2');
+        },
+        toggleActionSheet3: function () {
+            this.toggle('show3');
+        },
+    },
+});

package/lib/bottom-sheet/index.css

@@ -1 +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}
+@import '../common/index.css';.smart-bottom-sheet{color:var(--bottom-sheet-font-color,var(--app-B4-N1,#000));display:flex;flex-direction:column;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__content{overflow-y:scroll}.smart-bottom-sheet__icon{margin:var(--bottom-sheet-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}

package/lib/bottom-sheet/index.js

@@ -9,6 +9,7 @@ var component_1 = require("../common/component");
     props: {
         show: Boolean,
         title: String,
+        iconColor: String,
         iconSize: {
             type: null,
             value: 24,
@@ -36,13 +37,13 @@ var component_1 = require("../common/component");
     },
     data: {
         xmarkIcon: Xmark_1.default,
-        xmarkIconColor: '#3678E3',
+        xmarkIconColor: 'rgba(0, 0, 0, 0.5)',
     },
     mounted: function () {
         var _a;
         // @ts-ignore
         var themeInfo = (_a = ty === null || ty === void 0 ? void 0 : ty.getThemeInfo()) !== null && _a !== void 0 ? _a : {};
-        var xmarkIconColor = this.data.activeColor || themeInfo['--app-B4-N3'] || 'rgba(0, 0, 0, 0.5)';
+        var xmarkIconColor = this.data.iconColor || themeInfo['--app-B4-N3'] || 'rgba(0, 0, 0, 0.5)';
         this.setData({ xmarkIconColor: xmarkIconColor });
     },
     methods: {

package/lib/bottom-sheet/index.wxml

@@ -22,5 +22,7 @@
     {{ title }}
     <smart-icon bind:click="onClose" name="{{ xmarkIcon }}" class="smart-bottom-sheet__icon" size="{{ iconSize }}" color="{{ xmarkIconColor }}" />
   </view>
-  <slot />
+  <view class="smart-bottom-sheet__content">
+    <slot />
+  </view>
 </smart-popup>

package/lib/bottom-sheet/index.wxss

@@ -1 +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}
+@import '../common/index.wxss';.smart-bottom-sheet{color:var(--bottom-sheet-font-color,var(--app-B4-N1,#000));display:flex;flex-direction:column;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__content{overflow-y:scroll}.smart-bottom-sheet__icon{margin:var(--bottom-sheet-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}

package/lib/button/demo/index.d.ts

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

package/lib/button/demo/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var PlusCircle_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/PlusCircle"));
+var Right_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Right"));
+var component_1 = require("../../common/component");
+(0, component_1.SmartComponent)({
+    data: {
+        iconAdd: PlusCircle_1.default,
+        iconRight: Right_1.default,
+    },
+});

package/lib/calendar/calendar.wxml

@@ -4,7 +4,7 @@
   <header
     title="{{ title }}"
     showTitle="{{ showTitle }}"
-    subtitle="{{ mode === 'year' ? '' : mode === 'month' ? computed.formatYearTitle(currentDate, visibleIndex, locale.yearFormatter) : computed.formatMonthTitle(months[visibleIndex], subFormatter) }}"
+    subtitle="{{ type === 'year' ? '' : type === 'month' ? computed.formatYearTitle(currentDate, visibleIndex, locale.yearFormatter) : computed.formatMonthTitle(months[visibleIndex], subFormatter) }}"
     subFormatter="{{locale.subFormatter || 'YYYY-MM'}}"
     showSubtitle="{{ showSubtitle }}"
     firstDayOfWeek="{{ firstDayOfWeek }}"
@@ -13,12 +13,14 @@
     bind:click-prev="onPrev"
     bind:click-next="onNext"
     bind:click-save="onConfirm"
-    hideWeek="{{ mode !== 'day' }}"
+    hideWeek="{{ type === 'year' || type === 'month' }}"
+    right-text="{{confirmText}}"
+    showConfirm="{{showConfirm}}"
   >
     <slot name="title" slot="title"></slot>
   </header>
 
-  <block wx:if="{{mode === 'day'}}">
+  <block wx:if="{{ type !== 'year' && type !== 'month' }}">
     <view class="smart-calendar-month_wrap" wx:for="{{ months }}" wx:key="index">
       <month
         id="month{{ index }}"
@@ -47,25 +49,28 @@
     </view>
   </block>
   
-  <block wx:if="{{mode === 'month'}}">
+  <block wx:if="{{type === 'month'}}">
     <month-list
       minDate="{{ minDate }}"
       maxDate="{{ maxDate }}"
       monthsFormatter="{{ locale.monthsFormatter }}"
       bind:click="onClickDate"
-      date="{{defaultDate}}"
-      visibleIndex="{{visibleIndex}}"
+      date="{{currentDate}}"
+      color="{{color}}"
+      readonly="{{readonly}}"
     />
   </block>
 
-  <block wx:if="{{mode === 'year'}}">
+  <block wx:if="{{type === 'year'}}">
     <year-list 
       minDate="{{ minDate }}"
       maxDate="{{ maxDate }}"
       yearFormatter="{{ locale.yearFormatter }}"
       bind:click="onClickDate"
-      date="{{defaultDate}}"
+      date="{{currentDate}}"
       visibleIndex="{{visibleIndex}}"
+      color="{{color}}"
+      readonly="{{readonly}}"
      />
   </block>
 

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

@@ -1 +1 @@
-@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}
+@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{color:var(--calendar-header-title-font-color,var(--app-B4-N1,#000));font-size:16px;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-subtitle_wrap{align-items:center;display:flex;justify-content:center;position:relative}.smart-calendar__header-subtitle_left{align-items:center;background: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: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:500;line-height:var(--calendar-weekdays-height,30px);opacity:.5;text-align:center}

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

@@ -19,17 +19,21 @@ var Right_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Right"));
     props: {
         title: {
             type: String,
-            value: '日期选择',
+            value: 'Select Date',
         },
         rightText: {
             type: String,
-            value: '保存',
+            value: 'Save',
         },
         subtitle: String,
         showTitle: Boolean,
         showSubtitle: Boolean,
         defaultWeeks: Array,
         hideWeek: Boolean,
+        showConfirm: {
+            type: Boolean,
+            value: true,
+        },
         firstDayOfWeek: {
             type: Number,
             observer: 'initWeekDay',

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

@@ -3,19 +3,19 @@
     <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">{{ rightText }}</view>
+      <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 name="{{LeftIcon}}" />
+      <smart-icon class="smart-calendar__header-subtitle_left_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}}" />
+      <smart-icon class="smart-calendar__header-subtitle_right_icon" name="{{RightIcon}}" />
     </view>
   </view>
 

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

@@ -1 +1 @@
-@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}
+@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{color:var(--calendar-header-title-font-color,var(--app-B4-N1,#000));font-size:16px;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-subtitle_wrap{align-items:center;display:flex;justify-content:center;position:relative}.smart-calendar__header-subtitle_left{align-items:center;background: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: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:500;line-height:var(--calendar-weekdays-height,30px);opacity:.5;text-align:center}

package/lib/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,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)}
+@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{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/lib/calendar/components/month/index.js

@@ -84,9 +84,7 @@ var utils_1 = require("../../utils");
             if (!Array.isArray(currentDate)) {
                 return '';
             }
-            var isSelected = function (date) {
-                return currentDate.some(function (item) { return (0, utils_1.compareDay)(item, date) === 0; });
-            };
+            var isSelected = function (date) { return currentDate.some(function (item) { return (0, utils_1.compareDay)(item, date) === 0; }); };
             if (isSelected(day)) {
                 var prevDay = (0, utils_1.getPrevDay)(day);
                 var nextDay = (0, utils_1.getNextDay)(day);
@@ -159,9 +157,7 @@ var utils_1 = require("../../utils");
                     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/lib/calendar/components/month/index.wxs

@@ -49,10 +49,7 @@ function getDayStyle(type, index, date, rowHeight, color, firstDayOfWeek) {
 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);
 }
 

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,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)}
+@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{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/lib/calendar/components/month-list/index.css

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

@@ -3,6 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // components/month-list.js
 var utils_1 = require("../../utils");
 var component_1 = require("../../../common/component");
+var currentYear = new Date().getFullYear();
+var minMonthDate = new Date(currentYear - 10, 1, 1).getTime();
+var maxMonthDate = new Date(currentYear + 10, 12, 31).getTime();
 (0, component_1.SmartComponent)({
     /**
      * 组件的属性列表
@@ -12,47 +15,29 @@ var component_1 = require("../../../common/component");
             type: null,
             observer: function (newVal, oldVal) {
                 if (newVal !== oldVal) {
-                    this.calcMonth();
+                    this.getMonthList();
                 }
             },
         },
+        color: {
+            type: String,
+            value: '#3678e3',
+        },
         minDate: {
             type: null,
-            value: new Date(new Date().getFullYear(), 0, 1).getTime(),
+            value: minMonthDate,
         },
         maxDate: {
             type: null,
-            value: new Date(new Date().getFullYear(), 11, 31).getTime(),
+            value: maxMonthDate,
         },
-        currentYear: {
-            type: null,
-            value: new Date().getFullYear(),
-        },
-        visibleIndex: {
-            type: Number,
-            value: 0,
-            observer: function (newVal, oldVal) {
-                if (newVal !== oldVal) {
-                    this.getMonthList();
-                }
-            },
+        readonly: {
+            type: Boolean,
+            value: false,
         },
         monthsFormatter: {
             type: null,
-            value: [
-                'Jan',
-                'Feb',
-                'Mar',
-                'Apr',
-                'May',
-                'Jun',
-                'Jul',
-                'Aug',
-                'Sept',
-                'Oct',
-                'Nov',
-                'Dec',
-            ],
+            value: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
         },
     },
     /**
@@ -64,22 +49,16 @@ var component_1 = require("../../../common/component");
     },
     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 _a = this.data, minDate = _a.minDate, maxDate = _a.maxDate, _b = _a.monthsFormatter, monthsFormatter = _b === void 0 ? [] : _b;
+            var curDate = new Date(this.data.date);
+            var cur = curDate.getFullYear();
+            var curMonthDate = new Date(curDate.getFullYear(), curDate.getMonth(), 1);
             var start = new Date(cur, 0, 1).getTime();
             var end = new Date(cur, 11, 31).getTime();
             var minDateTime = new Date(minDate).getTime();
@@ -88,7 +67,10 @@ var component_1 = require("../../../common/component");
             var monthlist = months.map(function (date) {
                 var monthVal = new Date(date).getMonth();
                 var time = new Date(date).getTime();
-                var isDisabled = time < minDateTime || time > maxDateTime;
+                var isDisabled = false;
+                if (minDate && maxDate) {
+                    isDisabled = time < minDateTime || time > maxDateTime;
+                }
                 return {
                     value: date,
                     month: monthVal,
@@ -98,9 +80,12 @@ var component_1 = require("../../../common/component");
             });
             this.setData({
                 months: monthlist,
+                currentMonth: curMonthDate.getTime(),
             });
         },
         onClick: function (event) {
+            if (this.data.readonly)
+                return;
             var index = event.currentTarget.dataset.index;
             var item = this.data.months[index];
             if (item.type !== 'disabled') {

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

@@ -1,7 +1,13 @@
 <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">
+    <smart-col wx:for="{{months}}" span="6" custom-class="col_item">
+      <view wx:if="{{item.type === 'disabled'}}" class="item item_disabled" data-index="{{index}}">
+        {{item.text}}
+      </view>
+      <view wx:elif="{{currentMonth === item.value}}" class="item item_active" data-index="{{index}}" bindtap="onClick" style="background: {{ color }};">
+        {{item.text}}
+      </view>
+      <view wx:else class="item" data-index="{{index}}" bindtap="onClick">
         {{item.text}}
       </view>
     </smart-col>

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

@@ -1 +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}
+@import '../../../common/index.wxss';.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);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}