@varlet/ui 2.5.5-alpha.1672917688708 → 2.5.6

package/highlight/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "2.5.4",
+  "version": "2.5.5",
   "name": "VARLET",
   "contributions": {
     "html": {

package/lib/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/lib/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/lib/form/Form.js

@@ -71,7 +71,7 @@ var _default = (0, _vue.defineComponent)({
         }));
 
         if (props.scrollToError) {
-          var [_, errorIndex] = (0, _shared.find)(res, r => r === false, props.scrollToError);
+          var [, errorIndex] = (0, _shared.find)(res, r => r === false, props.scrollToError);
           var hasError = errorIndex > -1;
 
           if (hasError) {

package/lib/pagination/Pagination.js

@@ -273,15 +273,9 @@ var _default = (0, _vue.defineComponent)({
       current.value = (0, _shared.toNumber)(newCurrent) || 1;
       size.value = (0, _shared.toNumber)(newSize || 10);
     });
-    (0, _vue.watch)([current, size], (_ref2, _ref3) => {
-      var [newCurrent, newSize] = _ref2;
+    (0, _vue.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,
@@ -289,11 +283,11 @@ var _default = (0, _vue.defineComponent)({
         onChange
       } = props;
       var oldCount = Math.ceil((0, _shared.toNumber)(total) / (0, _shared.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);
           }
@@ -329,23 +323,23 @@ var _default = (0, _vue.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) {
         (0, _components.call)(onChange, newCurrent, newSize);
       }
 

package/lib/pull-refresh/PullRefresh.js

@@ -37,13 +37,10 @@ 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);
     })
   }, [(0, _vue.createElementVNode)("div", {
@@ -82,7 +79,9 @@ var _default = (0, _vue.defineComponent)({
     var distance = (0, _vue.ref)(-999);
     var iconName = (0, _vue.ref)('arrow-down');
     var refreshStatus = (0, _vue.ref)('default');
-    var isEnd = (0, _vue.ref)(false); // https://github.com/varletjs/varlet/issues/509
+    var isEnd = (0, _vue.ref)(false);
+    var startY = 0;
+    var deltaY = 0; // https://github.com/varletjs/varlet/issues/509
 
     var iconHasChanged = (0, _vue.ref)(true);
     var isTouchable = (0, _vue.computed)(() => refreshStatus.value !== 'loading' && refreshStatus.value !== 'success' && !props.disabled);
@@ -104,16 +103,37 @@ var _default = (0, _vue.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 = (0, _elements.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;
 
@@ -137,12 +157,14 @@ var _default = (0, _vue.defineComponent)({
           distance.value = maxDistance.value * 0.3;
           (0, _components.call)(props['onUpdate:modelValue'], true);
           (0, _components.call)(props.onRefresh);
+          lockEvent('remove');
         } else {
           refreshStatus.value = 'loosing';
           iconName.value = 'arrow-down';
           distance.value = controlPosition.value;
           setTimeout(() => {
             isEnd.value = false;
+            lockEvent('remove');
           }, (0, _shared.toNumber)(props.animationDuration));
         }
       });
@@ -180,8 +202,18 @@ var _default = (0, _vue.defineComponent)({
       }
     });
     (0, _vue.onMounted)(() => {
+      var _freshNode$value;
+
       scroller = props.target ? (0, _elements.getTarget)(props.target, 'PullRefresh') : (0, _elements.getParentScroller)(freshNode.value);
       setPosition();
+      (_freshNode$value = freshNode.value) == null ? void 0 : _freshNode$value.addEventListener('touchmove', touchMove, {
+        passive: false
+      });
+    });
+    (0, _vue.onBeforeUnmount)(() => {
+      var _freshNode$value2;
+
+      (_freshNode$value2 = freshNode.value) == null ? void 0 : _freshNode$value2.removeEventListener('touchmove', touchMove);
     });
     return {
       n,

package/lib/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); }}