@varlet/ui 1.27.4 → 1.27.7-alpha.1650880107793

package/README.en-US.md

@@ -1,11 +1,11 @@
 <div align="center">
-  <a href="https://varlet.gitee.io/varlet-ui/">
-    <img src="https://varlet.gitee.io/varlet-ui/logo.svg" width="150">
+  <a href="https://varlet-varletjs.vercel.app/#/en-US/home">
+    <img src="https://varlet-varletjs.vercel.app/logo.svg" width="150">
   </a>
   <h1>VARLET</h1>
   <p>Material design mobile component library for Vue3</p>
   <p>
-    <a href="https://varlet.gitee.io/varlet-ui/">Documentation</a>
+    <a href="https://varlet-varletjs.vercel.app/#/en-US/home">Documentation</a>
   </p>
   <p>
     <img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version">

package/README.md

@@ -1,11 +1,11 @@
 <div align="center">
-  <a href="https://varlet.gitee.io/varlet-ui/">
-    <img src="https://varlet.gitee.io/varlet-ui/logo.svg" width="150">
+  <a href="https://varlet-varletjs.vercel.app">
+    <img src="https://varlet-varletjs.vercel.app/logo.svg" width="150" >
   </a>
   <h1>VARLET</h1>
   <p>基于 Vue3 的 Material design 风格移动端组件库</p>
   <p>
-    <a href="https://varlet.gitee.io/varlet-ui/">开发文档</a> | <a href="https://github.com/varletjs/varlet/blob/dev/README.en-US.md">English</a>
+    <a href="https://varlet-varletjs.vercel.app">开发文档</a> | <a href="https://github.com/varletjs/varlet/blob/dev/README.en-US.md">English</a>
   </p>
   <p>
     <img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version">

package/es/context/lock.js

@@ -12,32 +12,25 @@ export function releaseLock(uid) {
   delete context.locks[uid];
   resolveLock();
 }
-/**
- * 组件锁操作
- * @param props 组件props
- * @param state 组件props中控制组件加锁的开关对应的key值
- * @param use 组件props中控制组件加锁的开关是否可用对应的key值
- */
-
-export function useLock(props, state, use) {
+export function useLock(source, useSource) {
   var {
     uid
   } = getCurrentInstance();
 
-  if (use) {
-    watch(() => props[use], newValue => {
+  if (useSource) {
+    watch(useSource, newValue => {
       if (newValue === false) {
         // 改变为禁用状态 组件解锁
         releaseLock(uid);
-      } else if (newValue === true && props[state] === true) {
+      } else if (newValue === true && source() === true) {
         // 改变为启用状态 并且popup处于开启状态 组件加锁
         addLock(uid);
       }
     });
   }
 
-  watch(() => props[state], newValue => {
-    if (use && props[use] === false) {
+  watch(source, newValue => {
+    if (useSource && useSource() === false) {
       return;
     }
 
@@ -50,41 +43,41 @@ export function useLock(props, state, use) {
     }
   });
   onBeforeMount(() => {
-    if (use && props[use] === false) {
+    if (useSource && useSource() === false) {
       return;
     }
 
-    if (props[state] === true) {
+    if (source() === true) {
       // popup处于开启状态 组件挂载 组件加锁
       addLock(uid);
     }
   });
   onUnmounted(() => {
-    if (use && props[use] === false) {
+    if (useSource && useSource() === false) {
       return;
     }
 
-    if (props[state] === true) {
+    if (source() === true) {
       // popup处于开启状态 组件卸载 组件解锁
       releaseLock(uid);
     }
   });
   onActivated(() => {
-    if (use && props[use] === false) {
+    if (useSource && useSource() === false) {
       return;
     }
 
-    if (props[state] === true) {
+    if (source() === true) {
       // popup处于开启状态 组件处于keepalive前台 组件加锁
       addLock(uid);
     }
   });
   onDeactivated(() => {
-    if (use && props[use] === false) {
+    if (useSource && useSource() === false) {
       return;
     }
 
-    if (props[state] === true) {
+    if (source() === true) {
       // popup处于开启状态 组件处于keepalive后台 组件解锁
       releaseLock(uid);
     }

package/es/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/es/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/es/pagination/Pagination.js

@@ -108,10 +108,7 @@ export function render(_ctx, _cache) {
     /* KEYED_FRAGMENT */
     ))]),
     default: _withCtx(() => [_createElementVNode("div", {
-      class: _normalizeClass(_ctx.n('size--open')),
-      style: {
-        "display": "flex"
-      },
+      class: _normalizeClass(_ctx.classes(_ctx.n('size--open'), [_ctx.current <= 1 || _ctx.disabled, _ctx.n('size--open--disabled')])),
       onClick: _cache[5] || (_cache[5] = function () {
         return _ctx.showMenu && _ctx.showMenu(...arguments);
       })

package/es/pagination/pagination.css

@@ -1 +1 @@
-:root { --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: #edf5ff; --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #edf5ff; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-simple-padding: 0 0 2px 0; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px;}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; margin: 0; font-size: var(--pagination-font-size); padding: 0;}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--disabled--active { background: var(--pagination-bg-disabled-color);}.var-pagination__item--hide { display: none;}.var-pagination__item--disabled { cursor: default !important; color: var(--pagination-disabled-color);}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--hover:hover { background: inherit;}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin);}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer; transition: all 0.25s;}.var-pagination__list:hover { color: var(--pagination-list-active-color); background-color: var(--pagination-hover-bg-color);}.var-pagination__list--active { background-color: var(--pagination-list-active-bg-color) !important; color: var(--pagination-list-active-color);}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-input__wrap,.var-pagination__simple [var-pagination-cover] .var-input__wrap { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}.var-pagination--simple-padding { padding: var(--pagination-simple-padding);}
+:root { --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: #edf5ff; --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #edf5ff; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-simple-padding: 0 0 2px 0; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px;}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; margin: 0; font-size: var(--pagination-font-size); padding: 0;}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background-color: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--hide { display: none;}.var-pagination__item--disabled { cursor: default; color: var(--pagination-disabled-color); background-color: unset;}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--disabled--hover:hover { background-color: inherit;}.var-pagination__item--disabled--active { background-color: var(--pagination-bg-disabled-color);}.var-pagination__item--disabled--active:hover { background-color: var(--pagination-bg-disabled-color);}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin);}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__size--open--disabled { cursor: default;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer; transition: all 0.25s;}.var-pagination__list:hover { color: var(--pagination-list-active-color); background-color: var(--pagination-hover-bg-color);}.var-pagination__list--active { background-color: var(--pagination-list-active-bg-color) !important; color: var(--pagination-list-active-color);}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-input__wrap,.var-pagination__simple [var-pagination-cover] .var-input__wrap { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}.var-pagination--simple-padding { padding: var(--pagination-simple-padding);}

package/es/pagination/pagination.less

@@ -67,7 +67,7 @@
     outline: none;
     transition: all 0.25s;
     user-select: none;
-    background: var(--pagination-item-background);
+    background-color: var(--pagination-item-background);
 
     &:hover {
       background-color: var(--pagination-hover-bg-color);
@@ -78,26 +78,31 @@
       background-color: var(--pagination-active-bg-color) !important;
     }
 
-    &--disabled--active {
-      background: var(--pagination-bg-disabled-color);
-    }
-
     &--hide {
       display: none;
     }
 
     &--disabled {
-      cursor: default !important;
+      cursor: default;
       color: var(--pagination-disabled-color);
+      background-color: unset;
 
       &:hover {
         background-color: unset;
       }
-    }
 
-    &--hover {
-      &:hover {
-        background: inherit;
+      &--hover {
+        &:hover {
+          background-color: inherit;
+        }
+      }
+
+      &--active {
+        background-color: var(--pagination-bg-disabled-color);
+
+        &:hover {
+          background-color: var(--pagination-bg-disabled-color);
+        }
       }
     }
   }
@@ -123,6 +128,10 @@
       display: flex;
       align-items: center;
       cursor: pointer;
+
+      &--disabled {
+        cursor: default;
+      }
     }
   }
 

package/es/picker/Picker.js

@@ -296,26 +296,33 @@ export default defineComponent({
           scrollEl: null,
           scrolling: false
         };
-        scrollTo(scrollColumn, scrollColumn.index, 200);
+        scrollTo(scrollColumn, scrollColumn.index, 0, true);
         return scrollColumn;
       });
     };
 
     var normalizeCascadeColumns = cascadeColumns => {
       var scrollColumns = [];
-      createChildren(scrollColumns, cascadeColumns);
+      createChildren(scrollColumns, cascadeColumns, true);
       return scrollColumns;
     };
 
-    var createChildren = (scrollColumns, children) => {
+    var createChildren = function (scrollColumns, children, initial) {
+      if (initial === void 0) {
+        initial = false;
+      }
+
       if (isArray(children) && children.length) {
+        var _props$cascadeInitial;
+
+        var index = initial ? (_props$cascadeInitial = props.cascadeInitialIndexes[scrollColumns.length]) != null ? _props$cascadeInitial : 0 : 0;
         var scrollColumn = {
           id: sid++,
           prevY: undefined,
           momentumPrevY: undefined,
           touching: false,
           translate: center.value,
-          index: 0,
+          index,
           duration: 0,
           momentumTime: 0,
           column: {
@@ -326,7 +333,8 @@ export default defineComponent({
           scrolling: false
         };
         scrollColumns.push(scrollColumn);
-        createChildren(scrollColumns, scrollColumn.columns[scrollColumn.index].children);
+        scrollTo(scrollColumn, scrollColumn.index, 0, true);
+        createChildren(scrollColumns, scrollColumn.columns[scrollColumn.index].children, initial);
       }
     };
 

package/es/picker/props.js

@@ -22,6 +22,10 @@ export var props = _extends({
     type: Boolean,
     default: false
   },
+  cascadeInitialIndexes: {
+    type: Array,
+    default: () => []
+  },
   optionHeight: {
     type: [Number, String],
     default: 44

package/es/popup/Popup.js

@@ -51,7 +51,7 @@ export default defineComponent({
       (_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, false);
     };
 
-    useLock(props, 'show', 'lockScroll');
+    useLock(() => props.show, () => props.lockScroll);
     watch(() => props.show, newValue => {
       var {
         onOpen,

package/es/pull-refresh/PullRefresh.js

@@ -1,3 +1,7 @@
+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); }); }; }
+
 import VarIcon from '../icon';
 import { defineComponent, ref, computed, watch, onMounted } from 'vue';
 import { getParentScroller, getScrollTop } from '../utils/elements';
@@ -10,7 +14,7 @@ var {
 } = createNamespace('pull-refresh');
 var MAX_DISTANCE = 100;
 var CONTROL_POSITION = -50;
-var scroller;
+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) {
   var _component_var_icon = _resolveComponent("var-icon");
@@ -35,12 +39,12 @@ export function render(_ctx, _cache) {
     style: _normalizeStyle(_ctx.controlStyle)
   }, [_createVNode(_component_var_icon, {
     name: _ctx.iconName,
-    transition: 200,
-    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [_ctx.refreshStatus === 'loading', _ctx.n('animation')])),
+    transition: _ctx.ICON_TRANSITION,
+    class: _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 */
   ), _renderSlot(_ctx.$slots, "default")], 34
   /* CLASS, HYDRATE_EVENTS */
@@ -55,12 +59,16 @@ export default defineComponent({
   props,
 
   setup(props) {
+    var scroller;
+    var changing;
     var freshNode = ref(null);
     var startPosition = ref(0);
     var distance = ref(CONTROL_POSITION);
     var iconName = ref('arrow-down');
     var refreshStatus = ref('default');
-    var isEnd = ref(false);
+    var isEnd = ref(false); // https://github.com/varletjs/varlet/issues/509
+
+    var iconHasChanged = ref(true);
     var isTouchable = computed(() => refreshStatus.value !== 'loading' && refreshStatus.value !== 'success' && !props.disabled);
     var controlStyle = computed(() => ({
       transform: "translate3d(0px, " + distance.value + "px, 0px) translate(-50%, 0)",
@@ -70,6 +78,15 @@ export default defineComponent({
     }));
     var isSuccess = 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';
@@ -82,30 +99,44 @@ export default 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;
-        }, 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;
+          }, toNumber(props.animationDuration));
+        }
+      });
+
+      return function touchEnd() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
     var reset = () => {
       setTimeout(() => {
         refreshStatus.value = 'default';
@@ -131,6 +162,8 @@ export default defineComponent({
     return {
       n,
       classes,
+      iconHasChanged,
+      ICON_TRANSITION,
       refreshStatus,
       freshNode,
       touchStart,

package/es/snackbar/core.js

@@ -75,7 +75,7 @@ export default defineComponent({
     var {
       zIndex
     } = useZIndex(() => props.show, 1);
-    useLock(props, 'show', 'lockScroll');
+    useLock(() => props.show, () => props.lockScroll);
     var isForbidClick = computed(() => props.type === 'loading' || props.forbidClick);
     var iconName = computed(() => {
       if (!props.type) return '';