@varlet/ui 1.24.11 → 1.25.0-alpha.1642582155449

package/es/app-bar/AppBar.js

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, ref, onMounted, onUpdated } from 'vue';
 import { props } from './props';
 import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
@@ -27,7 +27,7 @@ export function render(_ctx, _cache) {
     key: 0,
     class: "var-app-bar__title",
     style: _normalizeStyle({
-      paddingLeft: _ctx.$slots.left ? 0 : undefined
+      paddingLeft: _ctx.paddingLeft
     })
   }, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.title), 1
   /* TEXT */
@@ -39,7 +39,7 @@ export function render(_ctx, _cache) {
     key: 0,
     class: "var-app-bar__title",
     style: _normalizeStyle({
-      paddingRight: _ctx.$slots.right ? 0 : undefined
+      paddingRight: _ctx.paddingRight
     })
   }, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.title), 1
   /* TEXT */
@@ -52,5 +52,26 @@ export function render(_ctx, _cache) {
 export default defineComponent({
   render,
   name: 'VarAppBar',
-  props
+  props,
+
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
+    var paddingLeft = ref();
+    var paddingRight = ref();
+
+    var computePadding = () => {
+      paddingLeft.value = slots.left ? 0 : undefined;
+      paddingRight.value = slots.right ? 0 : undefined;
+    };
+
+    onMounted(computePadding);
+    onUpdated(computePadding);
+    return {
+      paddingLeft,
+      paddingRight
+    };
+  }
+
 });

package/es/button/Button.js

@@ -1,6 +1,6 @@
 import Ripple from '../ripple';
 import VarLoading from '../loading';
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { props } from './props';
 import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
@@ -25,7 +25,7 @@ export function render(_ctx, _cache) {
     onTouchstart: _cache[1] || (_cache[1] = function () {
       return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
     })
-  }, [_ctx.loading ? (_openBlock(), _createBlock(_component_var_loading, {
+  }, [_ctx.loading || _ctx.pending ? (_openBlock(), _createBlock(_component_var_loading, {
     key: 0,
     class: "var-button__loading",
     "var-button-cover": "",
@@ -35,7 +35,7 @@ export function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["type", "size", "radius"])) : _createCommentVNode("v-if", true), _createElementVNode("div", {
-    class: _normalizeClass(["var-button__content", [_ctx.loading ? 'var-button--hidden' : null]])
+    class: _normalizeClass(["var-button__content", [_ctx.loading || _ctx.pending ? 'var-button--hidden' : null]])
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
   )], 46
@@ -56,6 +56,17 @@ export default defineComponent({
   props,
 
   setup(props) {
+    var pending = ref(false);
+
+    var attemptAutoLoading = result => {
+      if (props.autoLoading) {
+        pending.value = true;
+        Promise.resolve(result).finally(() => {
+          pending.value = false;
+        });
+      }
+    };
+
     var handleClick = e => {
       var {
         loading,
@@ -63,11 +74,11 @@ export default defineComponent({
         onClick
       } = props;
 
-      if (loading || disabled) {
+      if (!onClick || loading || disabled || pending.value) {
         return;
       }
 
-      onClick == null ? void 0 : onClick(e);
+      attemptAutoLoading(onClick(e));
     };
 
     var handleTouchstart = e => {
@@ -77,14 +88,15 @@ export default defineComponent({
         onTouchstart
       } = props;
 
-      if (loading || disabled) {
+      if (!onTouchstart || loading || disabled || pending.value) {
         return;
       }
 
-      onTouchstart == null ? void 0 : onTouchstart(e);
+      attemptAutoLoading(onTouchstart(e));
     };
 
     return {
+      pending,
       handleClick,
       handleTouchstart
     };

package/es/button/props.js

@@ -54,6 +54,10 @@ export var props = {
   textColor: {
     type: String
   },
+  autoLoading: {
+    type: Boolean,
+    default: false
+  },
   loadingRadius: {
     type: [Number, String],
     default: 12

package/es/date-picker/DatePicker.js

@@ -46,7 +46,7 @@ export function render(_ctx, _cache) {
       var _ctx$chooseMonth, _ctx$chooseMonth2, _ctx$chooseMonth3;
 
       return [_ctx.type === 'month' ? (_openBlock(), _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 ? _renderSlot(_ctx.$slots, "range", {
         key: 0,
         choose: _ctx.getChoose.chooseRangeMonth
@@ -64,7 +64,7 @@ export function render(_ctx, _cache) {
       }, () => [_createTextVNode(_toDisplayString(_ctx.getMonthTitle), 1
       /* TEXT */
       )])])) : (_openBlock(), _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 ? _renderSlot(_ctx.$slots, "range", {
         key: 0,
         choose: _ctx.formatRange
@@ -142,21 +142,21 @@ export default defineComponent({
 
   setup(props) {
     var currentDate = dayjs().format('YYYY-MM-D');
-    var [currentYear, currentMonth, currentDay] = currentDate.split('-');
+    var [currentYear, currentMonth] = currentDate.split('-');
     var monthDes = MONTH_LIST.find(month => month.index === currentMonth);
     var isYearPanel = ref(false);
     var isMonthPanel = ref(false);
     var rangeDone = ref(true);
-    var chooseMonth = ref(monthDes);
-    var chooseYear = ref(currentYear);
-    var chooseDay = ref(currentDay);
+    var chooseMonth = ref();
+    var chooseYear = ref();
+    var chooseDay = ref();
     var previewMonth = ref(monthDes);
     var previewYear = ref(currentYear);
     var reverse = ref(false);
-    var chooseMonths = ref([currentYear + "-" + currentMonth]);
-    var chooseDays = ref([currentDate]);
-    var chooseRangeMonth = ref([currentYear + "-" + currentMonth]);
-    var chooseRangeDay = ref([currentDate]);
+    var chooseMonths = ref([]);
+    var chooseDays = ref([]);
+    var chooseRangeMonth = ref([]);
+    var chooseRangeDay = ref([]);
     var componentProps = reactive({
       allowedDates: props.allowedDates,
       type: props.type,
@@ -182,14 +182,23 @@ export default defineComponent({
       previewYear: previewYear.value
     }));
     var getMonthTitle = 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 = 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 = pack.value.datePickerMonthDict) == null ? void 0 : _pack$value$datePicke2[chooseMonth.value.index].name) != null ? _pack$value$datePicke : '';
+      }
+
       return multiple ? "" + chooseMonths.value.length + pack.value.datePickerSelected : monthName;
     });
     var getDateTitle = computed(() => {
@@ -202,10 +211,11 @@ export default defineComponent({
 
       if (range) {
         var formatRangeDays = chooseRangeDay.value.map(date => dayjs(date).format('YYYY-MM-DD'));
-        return formatRangeDays[0] + " ~ " + formatRangeDays[1];
+        return formatRangeDays.length ? formatRangeDays[0] + " ~ " + formatRangeDays[1] : '';
       }
 
       if (multiple) return "" + chooseDays.value.length + pack.value.datePickerSelected;
+      if (!chooseYear.value || !chooseMonth.value || !chooseDay.value) return '';
       var weekIndex = dayjs(chooseYear.value + "-" + chooseMonth.value.index + "-" + chooseDay.value).day();
       var week = WEEK_HEADER.find(value => value.index === "" + weekIndex);
       var weekName = (_pack$value$datePicke3 = (_pack$value$datePicke4 = pack.value.datePickerWeekDict) == null ? void 0 : _pack$value$datePicke4[week.index].name) != null ? _pack$value$datePicke3 : '';
@@ -215,17 +225,23 @@ export default defineComponent({
       return weekName.slice(0, 3) + ", " + monthName.slice(0, 3) + " " + chooseDay.value;
     });
     var slotProps = computed(() => {
-      var weekIndex = dayjs(chooseYear.value + "-" + chooseMonth.value.index + "-" + chooseDay.value).day();
+      var _chooseMonth$value, _chooseYear$value, _chooseMonth$value$in, _chooseMonth$value2, _chooseDay$value;
+
+      var weekIndex = dayjs(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 = computed(() => getChoose.value.chooseRangeDay.map(choose => dayjs(choose).format('YYYY-MM-DD')));
     var isSameYear = computed(() => chooseYear.value === previewYear.value);
-    var isSameMonth = computed(() => chooseMonth.value.index === previewMonth.value.index);
+    var isSameMonth = 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 {
@@ -264,6 +280,7 @@ export default 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 < toNumber(chooseDay.value) : chooseMonth.value.index > previewMonth.value.index;
@@ -356,7 +373,7 @@ export default defineComponent({
     var invalidFormatDate = date => {
       if (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;
       }
@@ -399,7 +416,7 @@ export default defineComponent({
     };
 
     watch(() => props.modelValue, value => {
-      if (!checkValue() || invalidFormatDate(value)) return;
+      if (!checkValue() || invalidFormatDate(value) || !value) return;
 
       if (props.range) {
         if (!isArray(value)) return;

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

@@ -130,7 +130,11 @@ export default defineComponent({
       right: false
     });
     var isCurrent = computed(() => props.preview.previewYear === currentYear && props.preview.previewMonth.index === currentMonth);
-    var isSame = computed(() => props.choose.chooseYear === props.preview.previewYear && props.choose.chooseMonth.index === props.preview.previewMonth.index);
+    var isSame = 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 = computed(() => {
       var index = WEEK_HEADER.findIndex(week => week.index === props.componentProps.firstDayOfWeek);
       if (index === -1 || index === 0) return WEEK_HEADER;
@@ -211,9 +215,9 @@ export default defineComponent({
           range
         }
       } = props;
-      if (!chooseRangeDay.length) return false;
 
       if (range) {
+        if (!chooseRangeDay.length) return false;
         var isBeforeMax = dayjs(val).isSameOrBefore(dayjs(chooseRangeDay[1]), 'day');
         var isAfterMin = dayjs(val).isSameOrAfter(dayjs(chooseRangeDay[0]), 'day');
         return isBeforeMax && isAfterMin;

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

@@ -150,9 +150,9 @@ export default defineComponent({
           range
         }
       } = props;
-      if (!chooseRangeMonth.length) return false;
 
       if (range) {
+        if (!chooseRangeMonth.length) return false;
         var isBeforeMax = dayjs(val).isSameOrBefore(dayjs(chooseRangeMonth[1]), 'month');
         var isAfterMin = dayjs(val).isSameOrAfter(dayjs(chooseRangeMonth[0]), 'month');
         return isBeforeMax && isAfterMin;
@@ -181,7 +181,7 @@ export default 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 = () => {
@@ -195,7 +195,7 @@ export default 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 = () => {
@@ -206,7 +206,7 @@ export default 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/es/snackbar/style/index.js

@@ -1,8 +1,8 @@
 import '../../styles/common.css'
-import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../button/button.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
+import '../SnackbarSfc.css'

package/es/snackbar/style/less.js

@@ -1,8 +1,8 @@
 import '../../styles/common.less'
-import '../SnackbarSfc.less'
 import '../../styles/elevation.less'
 import '../../loading/loading.less'
 import '../../button/button.less'
 import '../../icon/icon.less'
 import '../snackbar.less'
 import '../coreSfc.less'
+import '../SnackbarSfc.less'

package/es/swipe/Swipe.js

@@ -1,6 +1,10 @@
+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); }); }; }
+
 import { defineComponent, ref, computed, watch, onMounted, onUnmounted } from 'vue';
 import { useSwipeItems } from './provide';
-import { nextTickFrame } from '../utils/elements';
+import { doubleRaf, nextTickFrame } from '../utils/elements';
 import { props } from './props';
 import { isNumber, toNumber } from '../utils/shared';
 var SWIPE_DELAY = 250;
@@ -376,10 +380,12 @@ export default defineComponent({
       vertical
     };
     bindSwipeItems(swipeProvider);
-    watch(() => length.value, () => {
+    watch(() => length.value, /*#__PURE__*/_asyncToGenerator(function* () {
+      // In nuxt, the size of the swipe cannot got when the route is change, need double raf
+      yield doubleRaf();
       initialIndex();
       resize();
-    });
+    }));
     onMounted(() => {
       window.addEventListener('resize', resize);
     });

package/es/utils/shared.js

@@ -29,6 +29,7 @@ export var isBool = val => typeof val === 'boolean';
 export var isNumber = val => typeof val === 'number';
 export var isPlainObject = val => Object.prototype.toString.call(val) === '[object Object]';
 export var isArray = val => Array.isArray(val);
+export var isPromise = val => val instanceof Promise;
 export var isURL = val => {
   if (!val) {
     return false;