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

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

@@ -1,6 +1,9 @@
 // components/month-list.js
 import { getMonths } from '../../utils';
 import { SmartComponent } from '../../../common/component';
+const currentYear = new Date().getFullYear();
+const minMonthDate = new Date(currentYear - 10, 1, 1).getTime();
+const maxMonthDate = new Date(currentYear + 10, 12, 31).getTime();
 SmartComponent({
     /**
      * 组件的属性列表
@@ -10,47 +13,29 @@ SmartComponent({
             type: null,
             observer(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(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'],
         },
     },
     /**
@@ -62,31 +47,28 @@ SmartComponent({
     },
     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 { minDate, maxDate, monthsFormatter = [] } = this.data;
+            const curDate = new Date(this.data.date);
+            const cur = curDate.getFullYear();
+            const curMonthDate = new Date(curDate.getFullYear(), curDate.getMonth(), 1);
             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 monthlist = months.map(date => {
                 const monthVal = new Date(date).getMonth();
                 const time = new Date(date).getTime();
-                const isDisabled = time < minDateTime || time > maxDateTime;
+                let isDisabled = false;
+                if (minDate && maxDate) {
+                    isDisabled = time < minDateTime || time > maxDateTime;
+                }
                 return {
                     value: date,
                     month: monthVal,
@@ -96,9 +78,12 @@ SmartComponent({
             });
             this.setData({
                 months: monthlist,
+                currentMonth: curMonthDate.getTime(),
             });
         },
         onClick(event) {
+            if (this.data.readonly)
+                return;
             const { index } = event.currentTarget.dataset;
             const item = this.data.months[index];
             if (item.type !== 'disabled') {

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

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

@@ -1 +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}
+@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/dist/calendar/components/year-list/index.js

@@ -14,6 +14,10 @@ SmartComponent({
                 }
             },
         },
+        readonly: {
+            type: Boolean,
+            value: false,
+        },
         minDate: {
             type: null,
             value: new Date(new Date().getFullYear() - 30, 0, 1).getTime(),
@@ -22,6 +26,10 @@ SmartComponent({
             type: null,
             value: new Date(new Date().getFullYear() + 30, 11, 31).getTime(),
         },
+        color: {
+            type: String,
+            value: '#3678e3',
+        },
         currentYear: {
             type: null,
             value: new Date().getFullYear(),
@@ -63,7 +71,7 @@ SmartComponent({
             });
         },
         getYearList() {
-            const { minDate, maxDate, yearFormatter = 'YYYY', visibleIndex, date, } = this.data;
+            const { minDate, maxDate, yearFormatter = 'YYYY', visibleIndex, date } = this.data;
             const cur = new Date(date).getFullYear();
             const offset = visibleIndex * 12;
             const start = new Date(cur + offset - 5, 0, 1).getTime();
@@ -71,15 +79,18 @@ SmartComponent({
             const minStart = new Date(minDate).getTime();
             const maxStart = new Date(maxDate).getTime();
             const years = getYears(start, end);
-            const yearlist = years.map((date) => {
+            const yearlist = years.map(date => {
                 const yearVal = new Date(date).getFullYear();
                 const curTime = new Date(date).getTime();
-                const disabled = curTime <= minStart || curTime >= maxStart;
+                let isDisabled = false;
+                if (minDate && maxDate) {
+                    isDisabled = curTime <= minStart || curTime >= maxStart;
+                }
                 return {
                     value: date,
                     year: yearVal,
                     text: yearFormatter.replace('YYYY', yearVal),
-                    type: disabled ? 'disabled' : '',
+                    type: isDisabled ? 'disabled' : '',
                 };
             });
             this.setData({
@@ -87,6 +98,8 @@ SmartComponent({
             });
         },
         onClick(event) {
+            if (this.data.readonly)
+                return;
             const { index } = event.currentTarget.dataset;
             const item = this.data.years[index];
             if (item.type !== 'disabled') {

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

@@ -1,7 +1,13 @@
 <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">
+    <smart-col wx:for="{{years}}" 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="{{currentYear === item.year}}" 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/dist/calendar/components/year-list/index.wxss

@@ -1 +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}
+@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}

package/dist/calendar/demo/index.d.ts

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

package/dist/calendar/demo/index.js

@@ -0,0 +1,103 @@
+import { SmartComponent } from '../../common/component';
+SmartComponent({
+    data: {
+        // day
+        curDayDate: new Date(2024, 0, 15).getTime(),
+        minDayDate: new Date(2024, 0, 4).getTime(),
+        maxDayDate: new Date(2024, 1, 20).getTime(),
+        // weekday
+        curWeekDayDate: [
+            new Date(2024, 0, 15).getTime(),
+            new Date(2024, 0, 21).getTime(),
+        ],
+        minWeekDayDate: new Date(2024, 0, 4).getTime(),
+        maxWeekDayDate: new Date(2024, 1, 20).getTime(),
+        // range
+        curRangeDayDate: [
+            new Date(2024, 0, 10).getTime(),
+            new Date(2024, 0, 20).getTime(),
+        ],
+        minRangeDayDate: new Date(2024, 0, 4).getTime(),
+        maxRangeDayDate: new Date(2024, 1, 20).getTime(),
+        // month
+        curMonthDate: new Date(2024, 6, 1).getTime(),
+        minMonthDate: new Date(2024, 2, 1).getTime(),
+        maxMonthDate: new Date(2025, 9, 31).getTime(),
+        // year
+        curYearDate: new Date(2017, 6, 1).getTime(),
+        minYearDate: new Date(2012, 0, 1).getTime(),
+        maxYearDate: new Date(2029, 10, 31).getTime(),
+        // locale
+        confirmText: I18n.t('confirm'),
+        confirmDisabledText: I18n.t('confirm'),
+        firstDayOfWeek: 0,
+        locale: {
+            shortWeekDays: [
+                I18n.t('week0'),
+                I18n.t('week1'),
+                I18n.t('week2'),
+                I18n.t('week3'),
+                I18n.t('week4'),
+                I18n.t('week5'),
+                I18n.t('week6'),
+            ],
+            subFormatter: 'YYYY' + I18n.t('year') + 'MM' + I18n.t('month'),
+        },
+        locale2: {
+            subFormatter: 'YYYY' + I18n.t('year'),
+            monthsFormatter: [
+                I18n.t('cal_Jan'),
+                I18n.t('cal_Feb'),
+                I18n.t('cal_Mar'),
+                I18n.t('cal_Apr'),
+                I18n.t('cal_May'),
+                I18n.t('cal_Jun'),
+                I18n.t('cal_Jul'),
+                I18n.t('cal_Aug'),
+                I18n.t('cal_Sept'),
+                I18n.t('cal_Oct'),
+                I18n.t('cal_Nov'),
+                I18n.t('cal_Dec')
+            ]
+        },
+        showDayPicker: false,
+    },
+    methods: {
+        setCurDay(event) {
+            const date = event.detail;
+            this.setData({
+                curDayDate: new Date(date).getTime(),
+                showDayPicker: false,
+            });
+        },
+        setWeekCurDay(event) {
+            const date = event.detail;
+            this.setData({
+                curWeekDayDate: [date[0], date[1]],
+            });
+        },
+        setRangeCurDay(event) {
+            const date = event.detail;
+            this.setData({
+                curRangeDayDate: [date[0], date[1]],
+            });
+        },
+        setCurMonth(event) {
+            const date = event.detail;
+            this.setData({
+                curMonthDate: date,
+            });
+        },
+        setCurYear(event) {
+            const date = event.detail;
+            this.setData({
+                curYearDate: date,
+            });
+        },
+        onShowDayPicker() {
+            this.setData({
+                showDayPicker: !this.data.showDayPicker,
+            });
+        },
+    },
+});

package/dist/calendar/index.js

@@ -1,17 +1,13 @@
 import { SmartComponent } from '../common/component';
-import { ROW_HEIGHT, getPrevDay, getNextDay, getToday, compareDay, copyDates, calcDateNum, getMonths, getDayByOffset, getCurrentIndex, getWeekStartAndEnd, } from './utils';
+import { ROW_HEIGHT, getPrevDay, getNextDay, getToday, compareDay, copyDates, calcDateNum, getMonths, getDayByOffset, getCurrentIndex, getWeekStartAndEnd, getInitEdgeDate, } from './utils';
 import Toast from '../toast/toast';
-const initialMinDate = getToday().getTime();
-const initialMaxDate = (() => {
-    const now = getToday();
-    return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate()).getTime();
-})();
-const getTime = (date) => date instanceof Date ? date.getTime() : date;
+const dateEdge = getInitEdgeDate('year');
+const getTime = (date) => (date instanceof Date ? date.getTime() : date);
 SmartComponent({
     props: {
         title: {
             type: String,
-            value: '日期选择',
+            value: 'Select Date',
         },
         color: String,
         show: {
@@ -47,18 +43,13 @@ SmartComponent({
                 rangeEnd: 'End',
             },
         },
-        formatter: null,
         confirmText: {
             type: String,
-            value: '确定',
+            value: 'Confirm',
         },
         confirmDisabledText: {
             type: String,
-            value: '确定',
-        },
-        mode: {
-            type: String,
-            value: 'day',
+            value: 'Confirm',
         },
         rangePrompt: String,
         showRangePrompt: {
@@ -81,11 +72,11 @@ SmartComponent({
         },
         minDate: {
             type: Number,
-            value: initialMinDate,
+            value: dateEdge.min,
         },
         maxDate: {
             type: Number,
-            value: initialMaxDate,
+            value: dateEdge.max,
         },
         position: {
             type: String,
@@ -101,7 +92,7 @@ SmartComponent({
         },
         poppable: {
             type: Boolean,
-            value: true,
+            value: false,
         },
         showMark: {
             type: Boolean,
@@ -113,7 +104,7 @@ SmartComponent({
         },
         showConfirm: {
             type: Boolean,
-            value: true,
+            value: false,
         },
         showSubtitle: {
             type: Boolean,
@@ -173,15 +164,19 @@ SmartComponent({
     methods: {
         onPrev() {
             const visibleIndex = this.data.visibleIndex - 1;
-            if (this.data.mode === 'year') {
+            if (this.data.type === 'year') {
                 this.setData({
                     visibleIndex,
                 });
                 return;
             }
-            if (this.data.mode === 'month') {
+            if (this.data.type === 'month') {
+                const nextDate = new Date(this.data.currentDate);
+                nextDate.setFullYear(nextDate.getFullYear() - 1);
+                this.select(nextDate, true);
                 this.setData({
                     visibleIndex,
+                    currentDate: nextDate,
                 });
                 return;
             }
@@ -193,15 +188,19 @@ SmartComponent({
         },
         onNext() {
             const visibleIndex = this.data.visibleIndex + 1;
-            if (this.data.mode === 'year') {
+            if (this.data.type === 'year') {
                 this.setData({
                     visibleIndex,
                 });
                 return;
             }
-            if (this.data.mode === 'month') {
+            if (this.data.type === 'month') {
+                const nextDate = new Date(this.data.currentDate);
+                nextDate.setFullYear(nextDate.getFullYear() + 1);
+                this.select(nextDate, true);
                 this.setData({
                     visibleIndex,
+                    currentDate: nextDate,
                 });
                 return;
             }
@@ -215,16 +214,14 @@ SmartComponent({
             this.setData({ currentDate: this.getInitialDate(this.data.defaultDate) });
             this.scrollIntoView();
         },
-        initYearIdx(currentDate) {
-        },
         initData() {
             const currentDate = this.getInitialDate(this.data.defaultDate);
             const months = getMonths(this.data.minDate, this.data.maxDate);
             const visibleIndex = this.data.defaultDate
                 ? getCurrentIndex(currentDate, months)
                 : months.length - 1;
-            const isYear = this.data.mode === 'year';
-            const isMonth = this.data.mode === 'month';
+            const isYear = this.data.type === 'year';
+            const isMonth = this.data.type === 'month';
             const data = {
                 currentDate,
                 months,
@@ -242,8 +239,9 @@ SmartComponent({
             this.initData();
         },
         limitDateRange(date, minDate = null, maxDate = null) {
-            minDate = minDate || this.data.minDate;
-            maxDate = maxDate || this.data.maxDate;
+            const { min, max } = getInitEdgeDate(this.data.type);
+            minDate = minDate || this.data.minDate || min;
+            maxDate = maxDate || this.data.maxDate || max;
             if (compareDay(date, minDate) === -1) {
                 return minDate;
             }
@@ -270,7 +268,7 @@ SmartComponent({
             }
             if (type === 'multiple') {
                 if (Array.isArray(defaultDate)) {
-                    return defaultDate.map((date) => this.limitDateRange(date));
+                    return defaultDate.map(date => this.limitDateRange(date));
                 }
                 return [this.limitDateRange(now)];
             }
@@ -280,8 +278,7 @@ SmartComponent({
             return this.limitDateRange(defaultDate);
         },
         scrollIntoView() {
-            if (!this.isMounted)
-                return;
+            // if (!this.isMounted) return;
         },
         onOpen() {
             this.$emit('open');
@@ -366,7 +363,7 @@ SmartComponent({
             if (this.data.readonly) {
                 return;
             }
-            let date = event.detail;
+            const date = event.detail;
             this.select(date, true);
         },
         unselect(dateArray) {
@@ -381,10 +378,7 @@ SmartComponent({
                 if (!valid) {
                     // auto selected to max range if showConfirm
                     if (this.data.showConfirm) {
-                        this.emit([
-                            date[0],
-                            getDayByOffset(date[0], this.data.maxRange - 1),
-                        ]);
+                        this.emit([date[0], getDayByOffset(date[0], this.data.maxRange - 1)]);
                     }
                     else {
                         this.emit(date);
@@ -418,8 +412,7 @@ SmartComponent({
             return true;
         },
         onConfirm() {
-            if (this.data.type === 'range' &&
-                !this.checkRange(this.data.currentDate)) {
+            if (this.data.type === 'range' && !this.checkRange(this.data.currentDate)) {
                 return;
             }
             wx.nextTick(() => {

package/dist/calendar/index.wxs

@@ -38,23 +38,20 @@ function getVisible(visibleIndex, curIndex) {
 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);
 }
 
 function formatYearTitle(date, offset, formatter = 'YYYY') {
   date = getDate(date);
-  const year = date.getFullYear() + offset;
+  const year = date.getFullYear();
   return formatter.replace('YYYY', year + '');
 }
 
 module.exports = {
   getMonths: getMonths,
-  getVisible,
+  getVisible: getVisible,
   getButtonDisabled: getButtonDisabled,
-  formatMonthTitle,
-  formatYearTitle,
+  formatMonthTitle: formatMonthTitle,
+  formatYearTitle: formatYearTitle,
 };

package/dist/calendar/utils.d.ts

@@ -16,3 +16,7 @@ export declare function getWeekStartAndEnd(date: Date): {
     weekStart: Date;
     weekEnd: Date;
 };
+export declare const getInitEdgeDate: (type: string) => {
+    min: number;
+    max: number;
+};

package/dist/calendar/utils.js

@@ -4,9 +4,7 @@ export function formatMonthTitle(date, formatter = 'YYYY-MM') {
         date = new Date(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);
 }
 export function compareMonth(date1, date2) {
@@ -63,7 +61,7 @@ export function calcDateNum(date) {
 }
 export function copyDates(dates) {
     if (Array.isArray(dates)) {
-        return dates.map((date) => {
+        return dates.map(date => {
             if (date === null) {
                 return date;
             }
@@ -129,3 +127,31 @@ export function getWeekStartAndEnd(date) {
         weekEnd: endOfWeek,
     };
 }
+export const getInitEdgeDate = (type) => {
+    const currentYear = new Date().getFullYear();
+    if (type === 'month') {
+        const minMonthDate = new Date(currentYear - 1, 1, 1).getTime();
+        const maxMonthDate = new Date(currentYear + 1, 12, 31).getTime();
+        return {
+            min: minMonthDate,
+            max: maxMonthDate,
+        };
+    }
+    if (type === 'year') {
+        const minMonthDate = new Date(currentYear - 10, 1, 1).getTime();
+        const maxMonthDate = new Date(currentYear + 10, 12, 31).getTime();
+        return {
+            min: minMonthDate,
+            max: maxMonthDate,
+        };
+    }
+    const initialMinDate = getToday().getTime();
+    const initialMaxDate = (() => {
+        const now = getToday();
+        return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate()).getTime();
+    })();
+    return {
+        min: initialMinDate,
+        max: initialMaxDate,
+    };
+};

package/dist/cascader/demo/index.d.ts

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