@varlet/ui 1.27.6 → 1.27.7-alpha.1650880107793

package/highlight/attributes.json

@@ -69,11 +69,11 @@
   },
   "var-back-top/bottom": {
     "type": "string | number",
-    "description": "`BackTop` 距离页面底部的高度 默认值：40"
+    "description": "`BackTop` 距离页面底部的距离 默认值：40"
   },
   "var-back-top/right": {
     "type": "string | number",
-    "description": "`BackTop` 距离页面右侧的宽度 默认值：40"
+    "description": "`BackTop` 距离页面右侧的距离 默认值：40"
   },
   "var-back-top/duration": {
     "type": "number",

package/highlight/web-types.json

@@ -225,7 +225,7 @@
             },
             {
               "name": "bottom",
-              "description": "`BackTop` 距离页面底部的高度",
+              "description": "`BackTop` 距离页面底部的距离",
               "default": "40",
               "value": {
                 "type": "string | number",
@@ -234,7 +234,7 @@
             },
             {
               "name": "right",
-              "description": "`BackTop` 距离页面右侧的宽度",
+              "description": "`BackTop` 距离页面右侧的距离",
               "default": "40",
               "value": {
                 "type": "string | number",

package/lib/counter/counter.css

@@ -1 +1 @@
-:root { --counter-padding: 0 4px; --counter-font-color: #fff; --counter-background: var(--color-primary); --counter-input-width: 28px; --counter-input-margin: 0 4px; --counter-input-font-size: 14px; --counter-button-size: 28px; --counter-button-icon-size: 100%; --counter-disabled-color: var(--color-text-disabled); --input-error-color: var(--color-danger);}.var-counter { display: inline-flex; flex-direction: column; align-items: flex-start;}.var-counter__controller { display: flex; align-items: center; color: var(--counter-font-color); border-radius: var(--counter-button-size); padding: var(--counter-padding); background: var(--counter-background); transition: background-color 0.25s;}.var-counter__decrement-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-counter__input { width: var(--counter-input-width); font-size: var(--counter-input-font-size); outline: none; border: none; background: transparent; padding: 0; text-align: center; color: var(--counter-font-color); margin: var(--counter-input-margin);}.var-counter__input[disabled] { background: transparent;}.var-counter__increment-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-counter--disabled { background: var(--counter-disabled-color);}.var-counter--hidden { opacity: 0;}.var-counter--error { background: var(--color-danger);}
+:root { --counter-padding: 0 4px; --counter-font-color: #fff; --counter-background: var(--color-primary); --counter-input-width: 28px; --counter-input-margin: 0 4px; --counter-input-font-size: 14px; --counter-button-size: 28px; --counter-button-icon-size: 100%; --counter-disabled-color: var(--color-text-disabled); --input-error-color: var(--color-danger);}.var-counter { display: inline-flex; flex-direction: column; align-items: flex-start;}.var-counter__controller { display: flex; align-items: center; color: var(--counter-font-color); border-radius: var(--counter-button-size); padding: var(--counter-padding); background: var(--counter-background); transition: background-color 0.25s;}.var-counter__decrement-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; user-select: none;}.var-counter__input { width: var(--counter-input-width); font-size: var(--counter-input-font-size); outline: none; border: none; background: transparent; padding: 0; text-align: center; color: var(--counter-font-color); margin: var(--counter-input-margin);}.var-counter__input[disabled] { background: transparent;}.var-counter__increment-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; user-select: none;}.var-counter--disabled { background: var(--counter-disabled-color);}.var-counter--hidden { opacity: 0;}.var-counter--error { background: var(--color-danger);}

package/lib/counter/counter.less

@@ -44,6 +44,8 @@
     border-radius: 50%;
     cursor: pointer;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-user-select: none; // for safari
+    user-select: none;
   }
 
   &__input {
@@ -69,6 +71,8 @@
     border-radius: 50%;
     cursor: pointer;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-user-select: none; // for safari
+    user-select: none;
   }
 
   &--disabled {

package/lib/pull-refresh/PullRefresh.js

@@ -18,13 +18,17 @@ var _components = require("../utils/components");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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); }); }; }
+
 var {
   n,
   classes
 } = (0, _components.createNamespace)('pull-refresh');
 var MAX_DISTANCE = 100;
 var CONTROL_POSITION = -50;
-var scroller;
+var ICON_TRANSITION = 150;
 
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
@@ -49,12 +53,12 @@ function render(_ctx, _cache) {
     style: (0, _vue.normalizeStyle)(_ctx.controlStyle)
   }, [(0, _vue.createVNode)(_component_var_icon, {
     name: _ctx.iconName,
-    transition: 200,
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('icon'), [_ctx.refreshStatus === 'loading', _ctx.n('animation')])),
+    transition: _ctx.ICON_TRANSITION,
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('icon'), [_ctx.refreshStatus === 'loading' && _ctx.iconHasChanged, _ctx.n('animation')])),
     "var-pull-refresh-cover": ""
   }, null, 8
   /* PROPS */
-  , ["name", "class"])], 6
+  , ["name", "transition", "class"])], 6
   /* CLASS, STYLE */
   ), (0, _vue.renderSlot)(_ctx.$slots, "default")], 34
   /* CLASS, HYDRATE_EVENTS */
@@ -70,12 +74,16 @@ var _default = (0, _vue.defineComponent)({
   props: _props.props,
 
   setup(props) {
+    var scroller;
+    var changing;
     var freshNode = (0, _vue.ref)(null);
     var startPosition = (0, _vue.ref)(0);
     var distance = (0, _vue.ref)(CONTROL_POSITION);
     var iconName = (0, _vue.ref)('arrow-down');
     var refreshStatus = (0, _vue.ref)('default');
-    var isEnd = (0, _vue.ref)(false);
+    var isEnd = (0, _vue.ref)(false); // 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);
     var controlStyle = (0, _vue.computed)(() => ({
       transform: "translate3d(0px, " + distance.value + "px, 0px) translate(-50%, 0)",
@@ -85,6 +93,15 @@ var _default = (0, _vue.defineComponent)({
     }));
     var isSuccess = (0, _vue.computed)(() => refreshStatus.value === 'success');
 
+    var changeIcon = () => {
+      return new Promise(resolve => {
+        window.setTimeout(() => {
+          iconHasChanged.value = true;
+          resolve();
+        }, ICON_TRANSITION);
+      });
+    };
+
     var touchStart = event => {
       if (!isTouchable.value) return;
       refreshStatus.value = 'pulling';
@@ -97,30 +114,44 @@ var _default = (0, _vue.defineComponent)({
       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;
-      iconName.value = distance.value >= MAX_DISTANCE * 0.2 ? 'refresh' : 'arrow-down';
-    };
-
-    var touchEnd = () => {
-      if (!isTouchable.value) return;
-      isEnd.value = true;
 
       if (distance.value >= MAX_DISTANCE * 0.2) {
-        var _props$onUpdateModel;
-
-        refreshStatus.value = 'loading';
-        distance.value = MAX_DISTANCE * 0.3;
-        (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, true);
-        props.onRefresh == null ? void 0 : props.onRefresh();
+        iconHasChanged.value = false;
+        iconName.value = 'refresh';
+        changing = changeIcon();
       } else {
-        refreshStatus.value = 'loosing';
         iconName.value = 'arrow-down';
-        distance.value = CONTROL_POSITION;
-        setTimeout(() => {
-          isEnd.value = false;
-        }, (0, _shared.toNumber)(props.animationDuration));
       }
     };
 
+    var touchEnd = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(function* () {
+        if (!isTouchable.value) return;
+        isEnd.value = true;
+
+        if (distance.value >= MAX_DISTANCE * 0.2) {
+          var _props$onUpdateModel;
+
+          yield changing;
+          refreshStatus.value = 'loading';
+          distance.value = MAX_DISTANCE * 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;
+          setTimeout(() => {
+            isEnd.value = false;
+          }, (0, _shared.toNumber)(props.animationDuration));
+        }
+      });
+
+      return function touchEnd() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
     var reset = () => {
       setTimeout(() => {
         refreshStatus.value = 'default';
@@ -146,6 +177,8 @@ var _default = (0, _vue.defineComponent)({
     return {
       n,
       classes,
+      iconHasChanged,
+      ICON_TRANSITION,
       refreshStatus,
       freshNode,
       touchStart,