@varlet/ui 2.5.5-alpha.1672917688708 → 2.5.6

package/es/action-sheet/actionSheet.css

@@ -1 +1 @@
-:root { --action-sheet-border-radius: 2px; --action-sheet-title-color: #888; --action-sheet-title-padding: 10px 16px; --action-sheet-title-font-size: 14px; --action-sheet-action-item-height: 48px; --action-sheet-action-item-padding: 0 18px; --action-sheet-action-item-color: #333; --action-sheet-action-item-disabled-color: var(--color-text-disabled); --action-sheet-icon-margin: 0 20px 0 0; --action-sheet-icon-size: 24px; --action-sheet-background: #fff;}.var-action-sheet { padding: 10px 0; max-height: 80%; background: var(--action-sheet-background); transition: background-color 0.25s;}.var-action-sheet__popup-radius { border-radius: var(--action-sheet-border-radius);}.var-action-sheet__title { padding: var(--action-sheet-title-padding); color: var(--action-sheet-title-color); font-size: var(--action-sheet-title-font-size);}.var-action-sheet__action-item { display: flex; align-items: center; height: var(--action-sheet-action-item-height); padding: var(--action-sheet-action-item-padding); color: var(--action-sheet-action-item-color); cursor: pointer;}.var-action-sheet__action-name { overflow: auto; max-height: var(--action-sheet-action-item-height);}.var-action-sheet__action-icon[var-action-sheet-cover] { margin: var(--action-sheet-icon-margin); width: var(--action-sheet-icon-size); height: var(--action-sheet-icon-size); font-size: var(--action-sheet-icon-size);}.var-action-sheet--disabled { color: var(--action-sheet-action-item-disabled-color) !important; cursor: not-allowed;}
+:root { --action-sheet-border-radius: 2px; --action-sheet-title-color: #888; --action-sheet-title-padding: 10px 16px; --action-sheet-title-font-size: 14px; --action-sheet-action-item-height: 48px; --action-sheet-action-item-padding: 0 18px; --action-sheet-action-item-color: #333; --action-sheet-action-item-disabled-color: var(--color-text-disabled); --action-sheet-icon-margin: 0 20px 0 0; --action-sheet-icon-size: 24px; --action-sheet-background: #fff;}.var-action-sheet { padding: 10px 0; background: var(--action-sheet-background); transition: background-color 0.25s;}.var-action-sheet__popup-radius { border-radius: var(--action-sheet-border-radius);}.var-action-sheet__title { padding: var(--action-sheet-title-padding); color: var(--action-sheet-title-color); font-size: var(--action-sheet-title-font-size);}.var-action-sheet__action-item { display: flex; align-items: center; height: var(--action-sheet-action-item-height); padding: var(--action-sheet-action-item-padding); color: var(--action-sheet-action-item-color); cursor: pointer;}.var-action-sheet__action-name { overflow: auto; max-height: var(--action-sheet-action-item-height);}.var-action-sheet__action-icon[var-action-sheet-cover] { margin: var(--action-sheet-icon-margin); width: var(--action-sheet-icon-size); height: var(--action-sheet-icon-size); font-size: var(--action-sheet-icon-size);}.var-action-sheet--disabled { color: var(--action-sheet-action-item-disabled-color) !important; cursor: not-allowed;}

package/es/back-top/backTop.css

@@ -1 +1 @@
-:root { --back-top-right: 40px; --back-top-bottom: 40px; --back-top-button-size: 40px;}.var-back-top { position: fixed; right: var(--back-top-right); bottom: var(--back-top-bottom); transform: scale(0); transition: 0.3s var(--cubic-bezier); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-back-top .var-button[var-back-top-cover] { width: var(--back-top-button-size); height: var(--back-top-button-size);}.var-back-top--active { transform: scale(1);}
+:root { --back-top-right: 40px; --back-top-bottom: 40px; --back-top-button-size: 40px;}.var-back-top { position: fixed; z-index: 100; right: var(--back-top-right); bottom: var(--back-top-bottom); transform: scale(0); transition: 0.3s var(--cubic-bezier); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-back-top .var-button[var-back-top-cover] { width: var(--back-top-button-size); height: var(--back-top-button-size);}.var-back-top--active { transform: scale(1);}

package/es/form/Form.js

@@ -57,7 +57,7 @@ export default defineComponent({
         }));
 
         if (props.scrollToError) {
-          var [_, errorIndex] = find(res, r => r === false, props.scrollToError);
+          var [, errorIndex] = find(res, r => r === false, props.scrollToError);
           var hasError = errorIndex > -1;
 
           if (hasError) {

package/es/pagination/Pagination.js

@@ -254,15 +254,9 @@ export default defineComponent({
       current.value = toNumber(newCurrent) || 1;
       size.value = toNumber(newSize || 10);
     });
-    watch([current, size], (_ref2, _ref3) => {
-      var [newCurrent, newSize] = _ref2;
+    watch([current, size, pageCount], (_ref2, _ref3) => {
+      var [newCurrent, newSize, newCount] = _ref2;
       var [oldCurrent, oldSize] = _ref3;
-
-      if (newCurrent > pageCount.value) {
-        current.value = pageCount.value;
-        return;
-      }
-
       var list = [];
       var {
         maxPagerCount,
@@ -270,11 +264,11 @@ export default defineComponent({
         onChange
       } = props;
       var oldCount = Math.ceil(toNumber(total) / toNumber(oldSize));
-      var rEllipseSign = pageCount.value - (maxPagerCount - activePosition.value) - 1;
+      var rEllipseSign = newCount - (maxPagerCount - activePosition.value) - 1;
       simpleValue.value = "" + newCurrent;
 
-      if (pageCount.value - 2 > maxPagerCount) {
-        if (oldCurrent === undefined || pageCount.value !== oldCount) {
+      if (newCount - 2 > maxPagerCount) {
+        if (oldCurrent === undefined || newCount !== oldCount) {
           for (var i = 2; i < maxPagerCount + 2; i++) {
             list.push(i);
           }
@@ -310,23 +304,23 @@ export default defineComponent({
           list = [];
 
           for (var _i3 = 1; _i3 < maxPagerCount + 1; _i3++) {
-            list.push(pageCount.value - (maxPagerCount - _i3) - 1);
+            list.push(newCount - (maxPagerCount - _i3) - 1);
           }
 
           isHideEllipsisHead.value = false;
           isHideEllipsisTail.value = true;
         }
 
-        list = [1, '...', ...list, '...', pageCount.value];
+        list = [1, '...', ...list, '...', newCount];
       } else {
-        for (var _i4 = 1; _i4 <= pageCount.value; _i4++) {
+        for (var _i4 = 1; _i4 <= newCount; _i4++) {
           list.push(_i4);
         }
       }
 
       pageList.value = list;
 
-      if (oldCurrent !== undefined && pageCount.value > 0) {
+      if (oldCurrent !== undefined && newCount > 0) {
         call(onChange, newCurrent, newSize);
       }
 

package/es/pull-refresh/PullRefresh.js

@@ -3,7 +3,7 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 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 VarIcon from '../icon';
-import { defineComponent, ref, computed, watch, onMounted } from 'vue';
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
 import { getParentScroller, getScrollTop, getTarget } from '../utils/elements';
 import { props } from './props';
 import { toNumber } from '@varlet/shared';
@@ -23,13 +23,10 @@ export function render(_ctx, _cache) {
     onTouchstart: _cache[0] || (_cache[0] = function () {
       return _ctx.touchStart && _ctx.touchStart(...arguments);
     }),
-    onTouchmove: _cache[1] || (_cache[1] = function () {
-      return _ctx.touchMove && _ctx.touchMove(...arguments);
-    }),
-    onTouchend: _cache[2] || (_cache[2] = function () {
+    onTouchend: _cache[1] || (_cache[1] = function () {
       return _ctx.touchEnd && _ctx.touchEnd(...arguments);
     }),
-    onTouchcancel: _cache[3] || (_cache[3] = function () {
+    onTouchcancel: _cache[2] || (_cache[2] = function () {
       return _ctx.touchEnd && _ctx.touchEnd(...arguments);
     })
   }, [_createElementVNode("div", {
@@ -67,7 +64,9 @@ export default defineComponent({
     var distance = ref(-999);
     var iconName = ref('arrow-down');
     var refreshStatus = ref('default');
-    var isEnd = ref(false); // https://github.com/varletjs/varlet/issues/509
+    var isEnd = ref(false);
+    var startY = 0;
+    var deltaY = 0; // https://github.com/varletjs/varlet/issues/509
 
     var iconHasChanged = ref(true);
     var isTouchable = computed(() => refreshStatus.value !== 'loading' && refreshStatus.value !== 'success' && !props.disabled);
@@ -89,16 +88,37 @@ export default defineComponent({
       });
     };
 
+    var lockEvent = action => {
+      var el = 'classList' in scroller ? scroller : document.body;
+      el.classList[action](n() + "--lock");
+    };
+
     var touchStart = event => {
-      if (!isTouchable.value) return;
-      refreshStatus.value = 'pulling';
-      startPosition.value = event.touches[0].clientY;
+      startY = event.touches[0].clientY;
+      deltaY = 0;
     };
 
     var touchMove = event => {
       var scrollTop = getScrollTop(scroller);
+      var isReachTop = scrollTop === 0;
+      var touch = event.touches[0];
+      deltaY = touch.clientY - startY;
+
+      if (isReachTop && deltaY >= 0) {
+        event.preventDefault();
+      }
+
       if (scrollTop > 0 || !isTouchable.value) return;
-      if (scrollTop === 0 && distance.value > controlPosition.value) event.cancelable && event.preventDefault();
+
+      if (refreshStatus.value !== 'pulling') {
+        refreshStatus.value = 'pulling';
+        startPosition.value = event.touches[0].clientY;
+      }
+
+      if (isReachTop && distance.value > controlPosition.value) {
+        lockEvent('add');
+      }
+
       var moveDistance = (event.touches[0].clientY - startPosition.value) / 2 + controlPosition.value;
       distance.value = moveDistance >= maxDistance.value ? maxDistance.value : moveDistance;
 
@@ -122,12 +142,14 @@ export default defineComponent({
           distance.value = maxDistance.value * 0.3;
           call(props['onUpdate:modelValue'], true);
           call(props.onRefresh);
+          lockEvent('remove');
         } else {
           refreshStatus.value = 'loosing';
           iconName.value = 'arrow-down';
           distance.value = controlPosition.value;
           setTimeout(() => {
             isEnd.value = false;
+            lockEvent('remove');
           }, toNumber(props.animationDuration));
         }
       });
@@ -165,8 +187,18 @@ export default defineComponent({
       }
     });
     onMounted(() => {
+      var _freshNode$value;
+
       scroller = props.target ? getTarget(props.target, 'PullRefresh') : getParentScroller(freshNode.value);
       setPosition();
+      (_freshNode$value = freshNode.value) == null ? void 0 : _freshNode$value.addEventListener('touchmove', touchMove, {
+        passive: false
+      });
+    });
+    onBeforeUnmount(() => {
+      var _freshNode$value2;
+
+      (_freshNode$value2 = freshNode.value) == null ? void 0 : _freshNode$value2.removeEventListener('touchmove', touchMove);
     });
     return {
       n,

package/es/pull-refresh/pullRefresh.css

@@ -1 +1 @@
-:root { --pull-refresh-size: 40px; --pull-refresh-background: #fff; --pull-refresh-color: var(--color-primary); --pull-refresh-success-color: var(--color-success); --pull-refresh-icon-size: 25px;}.var-pull-refresh { overflow: hidden; position: relative; user-select: none; width: 100%;}.var-pull-refresh__control { display: flex; width: var(--pull-refresh-size); height: var(--pull-refresh-size); align-items: center; justify-content: center; background-color: var(--pull-refresh-background); border-radius: 50%; position: absolute; left: 50%; z-index: 90; color: var(--pull-refresh-color);}.var-pull-refresh__control-success { color: var(--pull-refresh-success-color);}.var-pull-refresh__icon[var-pull-refresh-cover] { font-size: var(--pull-refresh-icon-size);}.var-pull-refresh__animation { transform: rotate(0deg); animation: iconRotate 0.6s infinite linear;}@keyframes iconRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}
+:root { --pull-refresh-size: 40px; --pull-refresh-background: #fff; --pull-refresh-color: var(--color-primary); --pull-refresh-success-color: var(--color-success); --pull-refresh-icon-size: 25px;}.var-pull-refresh { overflow: hidden; position: relative; user-select: none; width: 100%;}.var-pull-refresh__control { display: flex; width: var(--pull-refresh-size); height: var(--pull-refresh-size); align-items: center; justify-content: center; background-color: var(--pull-refresh-background); border-radius: 50%; position: absolute; left: 50%; z-index: 90; color: var(--pull-refresh-color);}.var-pull-refresh__control-success { color: var(--pull-refresh-success-color);}.var-pull-refresh__icon[var-pull-refresh-cover] { font-size: var(--pull-refresh-icon-size);}.var-pull-refresh__animation { transform: rotate(0deg); animation: iconRotate 0.6s infinite linear;}.var-pull-refresh--lock { overflow: hidden !important;}@keyframes iconRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}