@varlet/ui 2.4.0 → 2.4.1

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.3.1",
+  "version": "2.4.0",
   "name": "VARLET",
   "contributions": {
     "html": {

package/lib/pull-refresh/PullRefresh.js

@@ -26,8 +26,6 @@ var {
   n,
   classes
 } = (0, _components.createNamespace)('pull-refresh');
-var MAX_DISTANCE = 100;
-var CONTROL_POSITION = -50;
 var ICON_TRANSITION = 150;
 
 function render(_ctx, _cache) {
@@ -49,6 +47,7 @@ function render(_ctx, _cache) {
       return _ctx.touchEnd && _ctx.touchEnd(...arguments);
     })
   }, [(0, _vue.createElementVNode)("div", {
+    ref: "controlNode",
     class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('control'), _ctx.n('$-elevation--2'), [_ctx.isSuccess, _ctx.n('control-success')])),
     style: (0, _vue.normalizeStyle)(_ctx.controlStyle)
   }, [(0, _vue.createVNode)(_component_var_icon, {
@@ -76,9 +75,11 @@ var _default = (0, _vue.defineComponent)({
   setup(props) {
     var scroller;
     var changing;
+    var controlPosition = (0, _vue.ref)(0);
     var freshNode = (0, _vue.ref)(null);
+    var controlNode = (0, _vue.ref)(null);
     var startPosition = (0, _vue.ref)(0);
-    var distance = (0, _vue.ref)(CONTROL_POSITION);
+    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
@@ -91,6 +92,7 @@ var _default = (0, _vue.defineComponent)({
       background: isSuccess.value ? props.successBgColor : props.bgColor,
       color: isSuccess.value ? props.successColor : props.color
     }));
+    var maxDistance = (0, _vue.computed)(() => Math.abs(2 * controlPosition.value));
     var isSuccess = (0, _vue.computed)(() => refreshStatus.value === 'success');
 
     var changeIcon = () => {
@@ -111,11 +113,11 @@ var _default = (0, _vue.defineComponent)({
     var touchMove = event => {
       var scrollTop = (0, _elements.getScrollTop)(scroller);
       if (scrollTop > 0 || !isTouchable.value) return;
-      if (scrollTop === 0 && distance.value > CONTROL_POSITION) event.cancelable && event.preventDefault();
-      var moveDistance = (event.touches[0].clientY - startPosition.value) / 2 + CONTROL_POSITION;
-      distance.value = moveDistance >= MAX_DISTANCE ? MAX_DISTANCE : moveDistance;
+      if (scrollTop === 0 && distance.value > controlPosition.value) event.cancelable && event.preventDefault();
+      var moveDistance = (event.touches[0].clientY - startPosition.value) / 2 + controlPosition.value;
+      distance.value = moveDistance >= maxDistance.value ? maxDistance.value : moveDistance;
 
-      if (distance.value >= MAX_DISTANCE * 0.2) {
+      if (distance.value >= maxDistance.value * 0.2) {
         iconHasChanged.value = false;
         iconName.value = 'refresh';
         changing = changeIcon();
@@ -129,18 +131,18 @@ var _default = (0, _vue.defineComponent)({
         if (!isTouchable.value) return;
         isEnd.value = true;
 
-        if (distance.value >= MAX_DISTANCE * 0.2) {
+        if (distance.value >= maxDistance.value * 0.2) {
           var _props$onUpdateModel;
 
           yield changing;
           refreshStatus.value = 'loading';
-          distance.value = MAX_DISTANCE * 0.3;
+          distance.value = maxDistance.value * 0.3;
           (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, true);
           props.onRefresh == null ? void 0 : props.onRefresh();
         } else {
           refreshStatus.value = 'loosing';
           iconName.value = 'arrow-down';
-          distance.value = CONTROL_POSITION;
+          distance.value = controlPosition.value;
           setTimeout(() => {
             isEnd.value = false;
           }, (0, _shared.toNumber)(props.animationDuration));
@@ -152,6 +154,14 @@ var _default = (0, _vue.defineComponent)({
       };
     }();
 
+    var setPosition = () => {
+      var {
+        width
+      } = controlNode.value.getBoundingClientRect();
+      distance.value = -(width + width * 0.25);
+      controlPosition.value = -(width + width * 0.25);
+    };
+
     var reset = () => {
       setTimeout(() => {
         refreshStatus.value = 'default';
@@ -166,13 +176,14 @@ var _default = (0, _vue.defineComponent)({
         refreshStatus.value = 'success';
         iconName.value = 'checkbox-marked-circle';
         setTimeout(() => {
-          distance.value = CONTROL_POSITION;
+          distance.value = controlPosition.value;
           reset();
         }, (0, _shared.toNumber)(props.successDuration));
       }
     });
     (0, _vue.onMounted)(() => {
       scroller = (0, _elements.getParentScroller)(freshNode.value);
+      setPosition();
     });
     return {
       n,
@@ -181,6 +192,7 @@ var _default = (0, _vue.defineComponent)({
       ICON_TRANSITION,
       refreshStatus,
       freshNode,
+      controlNode,
       touchStart,
       touchMove,
       touchEnd,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "A material like components library",
   "module": "es/index.js",
   "main": "lib/index.js",
@@ -47,8 +47,8 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/icons": "2.4.0",
-    "@varlet/shared": "2.4.0"
+    "@varlet/icons": "2.4.1",
+    "@varlet/shared": "2.4.1"
   },
   "devDependencies": {
     "@types/jest": "^26.0.15",
@@ -63,8 +63,8 @@
     "typescript": "^4.4.4",
     "vue": "3.2.25",
     "vue-router": "4.0.12",
-    "@varlet/touch-emulator": "2.4.0",
-    "@varlet/cli": "2.4.0"
+    "@varlet/cli": "2.4.1",
+    "@varlet/touch-emulator": "2.4.1"
   },
   "browserslist": [
     "Chrome >= 54",