@varlet/ui 2.4.0 → 2.4.1

package/es/pull-refresh/PullRefresh.js

@@ -12,8 +12,6 @@ var {
   n,
   classes
 } = createNamespace('pull-refresh');
-var MAX_DISTANCE = 100;
-var CONTROL_POSITION = -50;
 var ICON_TRANSITION = 150;
 import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 export function render(_ctx, _cache) {
@@ -35,6 +33,7 @@ export function render(_ctx, _cache) {
       return _ctx.touchEnd && _ctx.touchEnd(...arguments);
     })
   }, [_createElementVNode("div", {
+    ref: "controlNode",
     class: _normalizeClass(_ctx.classes(_ctx.n('control'), _ctx.n('$-elevation--2'), [_ctx.isSuccess, _ctx.n('control-success')])),
     style: _normalizeStyle(_ctx.controlStyle)
   }, [_createVNode(_component_var_icon, {
@@ -61,9 +60,11 @@ export default defineComponent({
   setup(props) {
     var scroller;
     var changing;
+    var controlPosition = ref(0);
     var freshNode = ref(null);
+    var controlNode = ref(null);
     var startPosition = ref(0);
-    var distance = ref(CONTROL_POSITION);
+    var distance = ref(-999);
     var iconName = ref('arrow-down');
     var refreshStatus = ref('default');
     var isEnd = ref(false); // https://github.com/varletjs/varlet/issues/509
@@ -76,6 +77,7 @@ export default defineComponent({
       background: isSuccess.value ? props.successBgColor : props.bgColor,
       color: isSuccess.value ? props.successColor : props.color
     }));
+    var maxDistance = computed(() => Math.abs(2 * controlPosition.value));
     var isSuccess = computed(() => refreshStatus.value === 'success');
 
     var changeIcon = () => {
@@ -96,11 +98,11 @@ export default defineComponent({
     var touchMove = event => {
       var scrollTop = 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();
@@ -114,18 +116,18 @@ export default 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;
           }, toNumber(props.animationDuration));
@@ -137,6 +139,14 @@ export default 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';
@@ -151,13 +161,14 @@ export default defineComponent({
         refreshStatus.value = 'success';
         iconName.value = 'checkbox-marked-circle';
         setTimeout(() => {
-          distance.value = CONTROL_POSITION;
+          distance.value = controlPosition.value;
           reset();
         }, toNumber(props.successDuration));
       }
     });
     onMounted(() => {
       scroller = getParentScroller(freshNode.value);
+      setPosition();
     });
     return {
       n,
@@ -166,6 +177,7 @@ export default defineComponent({
       ICON_TRANSITION,
       refreshStatus,
       freshNode,
+      controlNode,
       touchStart,
       touchMove,
       touchEnd,