@varlet/ui 1.24.11 → 1.25.0-alpha.1642582155449

package/lib/date-picker/DatePicker.js

@@ -61,7 +61,7 @@ function render(_ctx, _cache) {
       var _ctx$chooseMonth, _ctx$chooseMonth2, _ctx$chooseMonth3;
 
       return [_ctx.type === 'month' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-        key: _ctx.chooseYear + ((_ctx$chooseMonth = _ctx.chooseMonth) == null ? void 0 : _ctx$chooseMonth.index)
+        key: "" + _ctx.chooseYear + ((_ctx$chooseMonth = _ctx.chooseMonth) == null ? void 0 : _ctx$chooseMonth.index)
       }, [_ctx.range ? (0, _vue.renderSlot)(_ctx.$slots, "range", {
         key: 0,
         choose: _ctx.getChoose.chooseRangeMonth
@@ -79,7 +79,7 @@ function render(_ctx, _cache) {
       }, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.getMonthTitle), 1
       /* TEXT */
       )])])) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-        key: _ctx.chooseYear + ((_ctx$chooseMonth3 = _ctx.chooseMonth) == null ? void 0 : _ctx$chooseMonth3.index) + _ctx.chooseDay
+        key: "" + _ctx.chooseYear + ((_ctx$chooseMonth3 = _ctx.chooseMonth) == null ? void 0 : _ctx$chooseMonth3.index) + _ctx.chooseDay
       }, [_ctx.range ? (0, _vue.renderSlot)(_ctx.$slots, "range", {
         key: 0,
         choose: _ctx.formatRange
@@ -158,23 +158,23 @@ var _default = (0, _vue.defineComponent)({
 
   setup(props) {
     var currentDate = (0, _dayjs.default)().format('YYYY-MM-D');
-    var [currentYear, currentMonth, currentDay] = currentDate.split('-');
+    var [currentYear, currentMonth] = currentDate.split('-');
 
     var monthDes = _props.MONTH_LIST.find(month => month.index === currentMonth);
 
     var isYearPanel = (0, _vue.ref)(false);
     var isMonthPanel = (0, _vue.ref)(false);
     var rangeDone = (0, _vue.ref)(true);
-    var chooseMonth = (0, _vue.ref)(monthDes);
-    var chooseYear = (0, _vue.ref)(currentYear);
-    var chooseDay = (0, _vue.ref)(currentDay);
+    var chooseMonth = (0, _vue.ref)();
+    var chooseYear = (0, _vue.ref)();
+    var chooseDay = (0, _vue.ref)();
     var previewMonth = (0, _vue.ref)(monthDes);
     var previewYear = (0, _vue.ref)(currentYear);
     var reverse = (0, _vue.ref)(false);
-    var chooseMonths = (0, _vue.ref)([currentYear + "-" + currentMonth]);
-    var chooseDays = (0, _vue.ref)([currentDate]);
-    var chooseRangeMonth = (0, _vue.ref)([currentYear + "-" + currentMonth]);
-    var chooseRangeDay = (0, _vue.ref)([currentDate]);
+    var chooseMonths = (0, _vue.ref)([]);
+    var chooseDays = (0, _vue.ref)([]);
+    var chooseRangeMonth = (0, _vue.ref)([]);
+    var chooseRangeDay = (0, _vue.ref)([]);
     var componentProps = (0, _vue.reactive)({
       allowedDates: props.allowedDates,
       type: props.type,
@@ -200,14 +200,23 @@ var _default = (0, _vue.defineComponent)({
       previewYear: previewYear.value
     }));
     var getMonthTitle = (0, _vue.computed)(() => {
-      var _pack$value$datePicke, _pack$value$datePicke2;
-
       var {
         multiple,
         range
       } = props;
-      if (range) return chooseRangeMonth.value[0] + " ~ " + chooseRangeMonth.value[1];
-      var monthName = (_pack$value$datePicke = (_pack$value$datePicke2 = _locale.pack.value.datePickerMonthDict) == null ? void 0 : _pack$value$datePicke2[chooseMonth.value.index].name) != null ? _pack$value$datePicke : '';
+
+      if (range) {
+        return chooseRangeMonth.value.length ? chooseRangeMonth.value[0] + " ~ " + chooseRangeMonth.value[1] : '';
+      }
+
+      var monthName = '';
+
+      if (chooseMonth.value) {
+        var _pack$value$datePicke, _pack$value$datePicke2;
+
+        monthName = (_pack$value$datePicke = (_pack$value$datePicke2 = _locale.pack.value.datePickerMonthDict) == null ? void 0 : _pack$value$datePicke2[chooseMonth.value.index].name) != null ? _pack$value$datePicke : '';
+      }
+
       return multiple ? "" + chooseMonths.value.length + _locale.pack.value.datePickerSelected : monthName;
     });
     var getDateTitle = (0, _vue.computed)(() => {
@@ -220,10 +229,11 @@ var _default = (0, _vue.defineComponent)({
 
       if (range) {
         var formatRangeDays = chooseRangeDay.value.map(date => (0, _dayjs.default)(date).format('YYYY-MM-DD'));
-        return formatRangeDays[0] + " ~ " + formatRangeDays[1];
+        return formatRangeDays.length ? formatRangeDays[0] + " ~ " + formatRangeDays[1] : '';
       }
 
       if (multiple) return "" + chooseDays.value.length + _locale.pack.value.datePickerSelected;
+      if (!chooseYear.value || !chooseMonth.value || !chooseDay.value) return '';
       var weekIndex = (0, _dayjs.default)(chooseYear.value + "-" + chooseMonth.value.index + "-" + chooseDay.value).day();
 
       var week = _props.WEEK_HEADER.find(value => value.index === "" + weekIndex);
@@ -235,17 +245,23 @@ var _default = (0, _vue.defineComponent)({
       return weekName.slice(0, 3) + ", " + monthName.slice(0, 3) + " " + chooseDay.value;
     });
     var slotProps = (0, _vue.computed)(() => {
-      var weekIndex = (0, _dayjs.default)(chooseYear.value + "-" + chooseMonth.value.index + "-" + chooseDay.value).day();
+      var _chooseMonth$value, _chooseYear$value, _chooseMonth$value$in, _chooseMonth$value2, _chooseDay$value;
+
+      var weekIndex = (0, _dayjs.default)(chooseYear.value + "-" + ((_chooseMonth$value = chooseMonth.value) == null ? void 0 : _chooseMonth$value.index) + "-" + chooseDay.value).day();
       return {
         week: "" + weekIndex,
-        year: chooseYear.value,
-        month: chooseMonth.value.index,
-        date: chooseDay.value
+        year: (_chooseYear$value = chooseYear.value) != null ? _chooseYear$value : '',
+        month: (_chooseMonth$value$in = (_chooseMonth$value2 = chooseMonth.value) == null ? void 0 : _chooseMonth$value2.index) != null ? _chooseMonth$value$in : '',
+        date: (_chooseDay$value = chooseDay.value) != null ? _chooseDay$value : ''
       };
     });
     var formatRange = (0, _vue.computed)(() => getChoose.value.chooseRangeDay.map(choose => (0, _dayjs.default)(choose).format('YYYY-MM-DD')));
     var isSameYear = (0, _vue.computed)(() => chooseYear.value === previewYear.value);
-    var isSameMonth = (0, _vue.computed)(() => chooseMonth.value.index === previewMonth.value.index);
+    var isSameMonth = (0, _vue.computed)(() => {
+      var _chooseMonth$value3;
+
+      return ((_chooseMonth$value3 = chooseMonth.value) == null ? void 0 : _chooseMonth$value3.index) === previewMonth.value.index;
+    });
 
     var clickEl = type => {
       if (type === 'year') isYearPanel.value = true;else if (type === 'month') isMonthPanel.value = true;else {
@@ -284,6 +300,7 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var getReverse = (dateType, date) => {
+      if (!chooseYear.value || !chooseMonth.value) return false;
       if (!isSameYear.value) return chooseYear.value > previewYear.value;
       if (dateType === 'month') return date.index < chooseMonth.value.index;
       return isSameMonth.value ? date < (0, _shared.toNumber)(chooseDay.value) : chooseMonth.value.index > previewMonth.value.index;
@@ -376,7 +393,7 @@ var _default = (0, _vue.defineComponent)({
     var invalidFormatDate = date => {
       if ((0, _shared.isArray)(date)) return false;
 
-      if (date === undefined || date === 'Invalid Date') {
+      if (date === 'Invalid Date') {
         console.error('[Varlet] DatePicker: "modelValue" is an Invalid Date');
         return true;
       }
@@ -421,7 +438,7 @@ var _default = (0, _vue.defineComponent)({
     };
 
     (0, _vue.watch)(() => props.modelValue, value => {
-      if (!checkValue() || invalidFormatDate(value)) return;
+      if (!checkValue() || invalidFormatDate(value) || !value) return;
 
       if (props.range) {
         if (!(0, _shared.isArray)(value)) return;

package/lib/date-picker/src/day-picker-panel.js

@@ -149,7 +149,11 @@ var _default = (0, _vue.defineComponent)({
       right: false
     });
     var isCurrent = (0, _vue.computed)(() => props.preview.previewYear === currentYear && props.preview.previewMonth.index === currentMonth);
-    var isSame = (0, _vue.computed)(() => props.choose.chooseYear === props.preview.previewYear && props.choose.chooseMonth.index === props.preview.previewMonth.index);
+    var isSame = (0, _vue.computed)(() => {
+      var _props$choose$chooseM;
+
+      return props.choose.chooseYear === props.preview.previewYear && ((_props$choose$chooseM = props.choose.chooseMonth) == null ? void 0 : _props$choose$chooseM.index) === props.preview.previewMonth.index;
+    });
     var sortWeekList = (0, _vue.computed)(() => {
       var index = _props.WEEK_HEADER.findIndex(week => week.index === props.componentProps.firstDayOfWeek);
 
@@ -231,9 +235,9 @@ var _default = (0, _vue.defineComponent)({
           range
         }
       } = props;
-      if (!chooseRangeDay.length) return false;
 
       if (range) {
+        if (!chooseRangeDay.length) return false;
         var isBeforeMax = (0, _dayjs.default)(val).isSameOrBefore((0, _dayjs.default)(chooseRangeDay[1]), 'day');
         var isAfterMin = (0, _dayjs.default)(val).isSameOrAfter((0, _dayjs.default)(chooseRangeDay[0]), 'day');
         return isBeforeMax && isAfterMin;

package/lib/date-picker/src/month-picker-panel.js

@@ -169,9 +169,9 @@ var _default = (0, _vue.defineComponent)({
           range
         }
       } = props;
-      if (!chooseRangeMonth.length) return false;
 
       if (range) {
+        if (!chooseRangeMonth.length) return false;
         var isBeforeMax = (0, _dayjs.default)(val).isSameOrBefore((0, _dayjs.default)(chooseRangeMonth[1]), 'month');
         var isAfterMin = (0, _dayjs.default)(val).isSameOrAfter((0, _dayjs.default)(chooseRangeMonth[0]), 'month');
         return isBeforeMax && isAfterMin;
@@ -200,7 +200,7 @@ var _default = (0, _vue.defineComponent)({
 
       var monthExist = () => {
         if (range || multiple) return shouldChoose(val);
-        return chooseMonth.index === key && isSameYear.value;
+        return (chooseMonth == null ? void 0 : chooseMonth.index) === key && isSameYear.value;
       };
 
       var computeDisabled = () => {
@@ -214,7 +214,7 @@ var _default = (0, _vue.defineComponent)({
       var computeText = () => {
         if (disabled) return true;
         if (range || multiple) return !shouldChoose(val);
-        return !isSameYear.value || chooseMonth.index !== key;
+        return !isSameYear.value || (chooseMonth == null ? void 0 : chooseMonth.index) !== key;
       };
 
       var computeOutline = () => {
@@ -225,7 +225,7 @@ var _default = (0, _vue.defineComponent)({
 
         if (range || multiple) return !shouldChoose(val); // 同一年但是未被选择的情况
 
-        if (isSameYear.value) return chooseMonth.index !== currentMonth;
+        if (isSameYear.value) return (chooseMonth == null ? void 0 : chooseMonth.index) !== currentMonth;
         return true;
       };
 

package/lib/swipe/Swipe.js

@@ -14,6 +14,10 @@ var _props = require("./props");
 
 var _shared = require("../utils/shared");
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 var SWIPE_DELAY = 250;
 var SWIPE_DISTANCE = 20;
 
@@ -388,10 +392,12 @@ var _default = (0, _vue.defineComponent)({
       vertical
     };
     bindSwipeItems(swipeProvider);
-    (0, _vue.watch)(() => length.value, () => {
+    (0, _vue.watch)(() => length.value, /*#__PURE__*/_asyncToGenerator(function* () {
+      // In nuxt, the size of the swipe cannot got when the route is change, need double raf
+      yield (0, _elements.doubleRaf)();
       initialIndex();
       resize();
-    });
+    }));
     (0, _vue.onMounted)(() => {
       window.addEventListener('resize', resize);
     });

package/lib/utils/shared.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.isURL = exports.isString = exports.isPlainObject = exports.isNumber = exports.isHTMLSupportVideo = exports.isHTMLSupportImage = exports.isEmpty = exports.isBool = exports.isArray = exports.inBrowser = exports.easeInOutCubic = exports.dt = exports.cubic = exports.createCache = void 0;
+exports.isURL = exports.isString = exports.isPromise = exports.isPlainObject = exports.isNumber = exports.isHTMLSupportVideo = exports.isHTMLSupportImage = exports.isEmpty = exports.isBool = exports.isArray = exports.inBrowser = exports.easeInOutCubic = exports.dt = exports.cubic = exports.createCache = void 0;
 exports.kebabCase = kebabCase;
 exports.linear = void 0;
 exports.parseFormat = parseFormat;
@@ -62,6 +62,10 @@ var isArray = val => Array.isArray(val);
 
 exports.isArray = isArray;
 
+var isPromise = val => val instanceof Promise;
+
+exports.isPromise = isPromise;
+
 var isURL = val => {
   if (!val) {
     return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "1.24.11",
+  "version": "1.25.0-alpha.1642582155449",
   "description": "A material like components library",
   "module": "es/index.js",
   "main": "lib/index.js",
@@ -39,13 +39,13 @@
   },
   "gitHead": "ee9c3866bedad96c86365b0f9888a3a6bb781b1f",
   "dependencies": {
-    "@varlet/icons": "1.24.11",
+    "@varlet/icons": "1.25.0-alpha.1642582155449",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1"
   },
   "devDependencies": {
-    "@varlet/cli": "1.24.11",
-    "@varlet/touch-emulator": "1.24.11",
+    "@varlet/cli": "1.25.0-alpha.1642582155449",
+    "@varlet/touch-emulator": "1.25.0-alpha.1642582155449",
     "@vue/test-utils": "2.0.0-rc.6",
     "@vue/runtime-core": "^3.2.16",
     "typescript": "^4.4.4",

package/types/button.d.ts

@@ -10,6 +10,7 @@ export interface ButtonProps {
   outline?: boolean
   disabled?: boolean
   ripple?: boolean
+  autoLoading?: boolean
   color?: string
   textColor?: string
   loadingRadius?: string | number