@varlet/ui 1.27.6 → 1.27.7

package/LICENCE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 varlet
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.en-US.md

@@ -5,7 +5,8 @@
   <h1>VARLET</h1>
   <p>Material design mobile component library for Vue3</p>
   <p>
-    <a href="https://varlet-varletjs.vercel.app/#/en-US/home">Documentation</a>
+    <a href="https://varlet-varletjs.vercel.app/#/en-US/home">Documentation(Vercel)</a> 
+    <a href="https://varlet.gitee.io/varlet-ui/#/en-US/home">Documentation(Gitee)</a>
   </p>
   <p>
     <img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version">

package/README.md

@@ -4,8 +4,10 @@
   </a>
   <h1>VARLET</h1>
   <p>基于 Vue3 的 Material design 风格移动端组件库</p>
-  <p>
-    <a href="https://varlet-varletjs.vercel.app">开发文档</a> | <a href="https://github.com/varletjs/varlet/blob/dev/README.en-US.md">English</a>
+ <p>
+    <a href="https://varlet-varletjs.vercel.app">文档(Vercel)</a> | 
+    <a href="https://varlet.gitee.io/varlet-ui">文档(Gitee)</a> | 
+<a href="https://github.com/varletjs/varlet/blob/dev/README.en-US.md">English Readme</a>
   </p>
   <p>
     <img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version">

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/input/Input.js

@@ -232,6 +232,7 @@ export default defineComponent({
       var {
         value
       } = e.target;
+      value = withTrim(value);
       call(props['onUpdate:modelValue'], value);
       call(props.onInput, value, e);
       validateWithTrigger('onInput');
@@ -241,7 +242,7 @@ export default defineComponent({
       var {
         value
       } = e.target;
-      call(props.onChange, value, e);
+      call(props.onChange, withTrim(value), e);
       validateWithTrigger('onChange');
     };
 
@@ -274,7 +275,9 @@ export default defineComponent({
 
       call(onClick, e);
       validateWithTrigger('onClick');
-    }; // expose
+    };
+
+    var withTrim = value => props.modelModifiers.trim ? value.trim() : value; // expose
 
 
     var reset = () => {

package/es/input/props.js

@@ -5,6 +5,10 @@ export var props = {
   modelValue: {
     type: String
   },
+  modelModifiers: {
+    type: Object,
+    default: () => ({})
+  },
   type: {
     type: String,
     default: 'text',

package/es/loading/Loading.js

@@ -28,7 +28,12 @@ export function render(_ctx, _cache) {
   }, [_ctx.$slots.default ? (_openBlock(), _createElementBlock("div", {
     key: 0,
     class: _normalizeClass(_ctx.classes(_ctx.n('content'), [_ctx.loading, _ctx.n('content--active')]))
-  }, [_renderSlot(_ctx.$slots, "default")], 2
+  }, [_renderSlot(_ctx.$slots, "default"), _ctx.loading ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('content-mask'))
+  }, null, 2
+  /* CLASS */
+  )) : _createCommentVNode("v-if", true)], 2
   /* CLASS */
   )) : _createCommentVNode("v-if", true), _ctx.isShow ? (_openBlock(), _createElementBlock("div", {
     key: 1,

package/es/loading/loading.css

@@ -1 +1 @@
-:root { --loading-opacity: 0.38; --loading-desc-margin: 8px 0 0;}.var-loading { position: relative;}.var-loading__content { transition: opacity 0.3s; opacity: 1;}.var-loading__content--active { opacity: var(--loading-opacity); user-select: none;}.var-loading__body { display: flex; justify-content: center; align-items: center; height: 100%; flex-direction: column;}.var-loading__inside { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;}.var-loading__description { color: currentColor; margin: var(--loading-desc-margin);}.var-loading__description--large { font-size: 16px;}.var-loading__description--normal { font-size: 14px;}.var-loading__description--small { font-size: 12px;}.var-loading__description--mini { font-size: 10px;}.var-loading__circle { display: flex;}.var-loading__circle-block { display: inline-block; animation: circle 1.8s linear infinite;}.var-loading__circle-block svg { display: block; width: 100%; height: 100%;}.var-loading__circle-block svg circle { animation: circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}@keyframes circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }}.var-loading__wave { display: flex; align-items: center; justify-content: center;}.var-loading__wave--large { width: 64px; height: 18px;}.var-loading__wave--normal { width: 50px; height: 16px;}.var-loading__wave--small { width: 36px; height: 14px;}.var-loading__wave--mini { width: 22px; height: 12px;}.var-loading__wave-item { height: 100%; display: inline-block; animation: 1.2s ease-in-out infinite wave;}.var-loading__wave-item:nth-child(1) { animation-delay: -1.2s; margin-left: 0;}.var-loading__wave-item:nth-child(2) { animation-delay: -1.1s;}.var-loading__wave-item:nth-child(3) { animation-delay: -1s;}.var-loading__wave-item:nth-child(4) { animation-delay: -0.9s;}.var-loading__wave-item:nth-child(5) { animation-delay: -0.8s;}.var-loading__wave-item--large { width: 5px; margin-left: 5px;}.var-loading__wave-item--normal { width: 4px; margin-left: 4px;}.var-loading__wave-item--small { width: 3px; margin-left: 3px;}.var-loading__wave-item--mini { width: 2px; margin-left: 2px;}@keyframes wave { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); }}.var-loading__cube { display: flex; align-items: center;}.var-loading__cube--large { width: 64px; height: 18px;}.var-loading__cube--normal { width: 50px; height: 16px;}.var-loading__cube--small { width: 36px; height: 14px;}.var-loading__cube--mini { width: 22px; height: 12px;}.var-loading__cube-item { display: inline-block; transform-origin: right bottom; animation: 1.5s ease infinite cube;}.var-loading__cube-item:nth-child(1) { animation-delay: 0.2s; margin-left: 0;}.var-loading__cube-item:nth-child(2) { animation-delay: 0.4s;}.var-loading__cube-item:nth-child(3) { animation-delay: 0.6s;}.var-loading__cube-item:nth-child(4) { animation-delay: 0.8s;}.var-loading__cube-item--large { height: 10px; width: 10px; margin-left: 5px;}.var-loading__cube-item--normal { height: 8px; width: 8px; margin-left: 4px;}.var-loading__cube-item--small { height: 6px; width: 6px; margin-left: 3px;}.var-loading__cube-item--mini { height: 4px; width: 4px; margin-left: 2px;}@keyframes cube { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: rotate(90deg) scale(0.3); }}.var-loading__rect { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;}.var-loading__rect--large { width: 64px; height: 18px;}.var-loading__rect--normal { width: 50px; height: 16px;}.var-loading__rect--small { width: 36px; height: 14px;}.var-loading__rect--mini { width: 22px; height: 12px;}.var-loading__rect-item { animation: 2s ease-in-out infinite rect;}.var-loading__rect-item:nth-child(1) { animation-delay: 1.75s;}.var-loading__rect-item:nth-child(2) { animation-delay: 1.5s;}.var-loading__rect-item:nth-child(3) { animation-delay: 1.25s;}.var-loading__rect-item:nth-child(4) { animation-delay: 1s;}.var-loading__rect-item:nth-child(5) { animation-delay: 0.75s;}.var-loading__rect-item:nth-child(6) { animation-delay: 0.5s;}.var-loading__rect-item:nth-child(7) { animation-delay: 0.25s;}.var-loading__rect-item:nth-child(8) { animation-delay: 0s;}.var-loading__rect-item--large { height: 100%; width: 8px;}.var-loading__rect-item--normal { height: 90%; width: 6.4px;}.var-loading__rect-item--small { height: 80%; width: 4.8px;}.var-loading__rect-item--mini { height: 70%; width: 3.2px;}@keyframes rect { 0% { opacity: 0.3; } 25% { opacity: 1; } 50% { opacity: 0.3; } 65% { opacity: 1; } 100% { opacity: 0.3; }}.var-loading__disappear { display: flex; justify-content: space-around; align-items: center; flex-flow: nowrap;}.var-loading__disappear--large { width: 64px; height: 18px;}.var-loading__disappear--normal { width: 50px; height: 16px;}.var-loading__disappear--small { width: 36px; height: 14px;}.var-loading__disappear--mini { width: 22px; height: 12px;}.var-loading__disappear-item { border-radius: 50%; animation: 0.5s ease-in-out infinite alternate disappear;}.var-loading__disappear-item:nth-child(1) { animation-delay: -0.4s;}.var-loading__disappear-item:nth-child(2) { animation-delay: -0.2s;}.var-loading__disappear-item:nth-child(3) { animation-delay: 0s;}.var-loading__disappear-item--large { height: 15px; width: 15px;}.var-loading__disappear-item--normal { height: 12px; width: 12px;}.var-loading__disappear-item--small { height: 9px; width: 9px;}.var-loading__disappear-item--mini { height: 6px; width: 6px;}@keyframes disappear { 0% { opacity: 1; } 100% { opacity: 0; }}
+:root { --loading-opacity: 0.38; --loading-desc-margin: 8px 0 0;}.var-loading { position: relative;}.var-loading__content { position: relative; transition: opacity 0.3s; opacity: 1;}.var-loading__content--active { opacity: var(--loading-opacity);}.var-loading__content-mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0;}.var-loading__body { display: flex; justify-content: center; align-items: center; height: 100%; flex-direction: column;}.var-loading__inside { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;}.var-loading__description { color: currentColor; margin: var(--loading-desc-margin);}.var-loading__description--large { font-size: 16px;}.var-loading__description--normal { font-size: 14px;}.var-loading__description--small { font-size: 12px;}.var-loading__description--mini { font-size: 10px;}.var-loading__circle { display: flex;}.var-loading__circle-block { display: inline-block; animation: circle 1.8s linear infinite;}.var-loading__circle-block svg { display: block; width: 100%; height: 100%;}.var-loading__circle-block svg circle { animation: circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}@keyframes circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }}.var-loading__wave { display: flex; align-items: center; justify-content: center;}.var-loading__wave--large { width: 64px; height: 18px;}.var-loading__wave--normal { width: 50px; height: 16px;}.var-loading__wave--small { width: 36px; height: 14px;}.var-loading__wave--mini { width: 22px; height: 12px;}.var-loading__wave-item { height: 100%; display: inline-block; animation: 1.2s ease-in-out infinite wave;}.var-loading__wave-item:nth-child(1) { animation-delay: -1.2s; margin-left: 0;}.var-loading__wave-item:nth-child(2) { animation-delay: -1.1s;}.var-loading__wave-item:nth-child(3) { animation-delay: -1s;}.var-loading__wave-item:nth-child(4) { animation-delay: -0.9s;}.var-loading__wave-item:nth-child(5) { animation-delay: -0.8s;}.var-loading__wave-item--large { width: 5px; margin-left: 5px;}.var-loading__wave-item--normal { width: 4px; margin-left: 4px;}.var-loading__wave-item--small { width: 3px; margin-left: 3px;}.var-loading__wave-item--mini { width: 2px; margin-left: 2px;}@keyframes wave { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); }}.var-loading__cube { display: flex; align-items: center;}.var-loading__cube--large { width: 64px; height: 18px;}.var-loading__cube--normal { width: 50px; height: 16px;}.var-loading__cube--small { width: 36px; height: 14px;}.var-loading__cube--mini { width: 22px; height: 12px;}.var-loading__cube-item { display: inline-block; transform-origin: right bottom; animation: 1.5s ease infinite cube;}.var-loading__cube-item:nth-child(1) { animation-delay: 0.2s; margin-left: 0;}.var-loading__cube-item:nth-child(2) { animation-delay: 0.4s;}.var-loading__cube-item:nth-child(3) { animation-delay: 0.6s;}.var-loading__cube-item:nth-child(4) { animation-delay: 0.8s;}.var-loading__cube-item--large { height: 10px; width: 10px; margin-left: 5px;}.var-loading__cube-item--normal { height: 8px; width: 8px; margin-left: 4px;}.var-loading__cube-item--small { height: 6px; width: 6px; margin-left: 3px;}.var-loading__cube-item--mini { height: 4px; width: 4px; margin-left: 2px;}@keyframes cube { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: rotate(90deg) scale(0.3); }}.var-loading__rect { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;}.var-loading__rect--large { width: 64px; height: 18px;}.var-loading__rect--normal { width: 50px; height: 16px;}.var-loading__rect--small { width: 36px; height: 14px;}.var-loading__rect--mini { width: 22px; height: 12px;}.var-loading__rect-item { animation: 2s ease-in-out infinite rect;}.var-loading__rect-item:nth-child(1) { animation-delay: 1.75s;}.var-loading__rect-item:nth-child(2) { animation-delay: 1.5s;}.var-loading__rect-item:nth-child(3) { animation-delay: 1.25s;}.var-loading__rect-item:nth-child(4) { animation-delay: 1s;}.var-loading__rect-item:nth-child(5) { animation-delay: 0.75s;}.var-loading__rect-item:nth-child(6) { animation-delay: 0.5s;}.var-loading__rect-item:nth-child(7) { animation-delay: 0.25s;}.var-loading__rect-item:nth-child(8) { animation-delay: 0s;}.var-loading__rect-item--large { height: 100%; width: 8px;}.var-loading__rect-item--normal { height: 90%; width: 6.4px;}.var-loading__rect-item--small { height: 80%; width: 4.8px;}.var-loading__rect-item--mini { height: 70%; width: 3.2px;}@keyframes rect { 0% { opacity: 0.3; } 25% { opacity: 1; } 50% { opacity: 0.3; } 65% { opacity: 1; } 100% { opacity: 0.3; }}.var-loading__disappear { display: flex; justify-content: space-around; align-items: center; flex-flow: nowrap;}.var-loading__disappear--large { width: 64px; height: 18px;}.var-loading__disappear--normal { width: 50px; height: 16px;}.var-loading__disappear--small { width: 36px; height: 14px;}.var-loading__disappear--mini { width: 22px; height: 12px;}.var-loading__disappear-item { border-radius: 50%; animation: 0.5s ease-in-out infinite alternate disappear;}.var-loading__disappear-item:nth-child(1) { animation-delay: -0.4s;}.var-loading__disappear-item:nth-child(2) { animation-delay: -0.2s;}.var-loading__disappear-item:nth-child(3) { animation-delay: 0s;}.var-loading__disappear-item--large { height: 15px; width: 15px;}.var-loading__disappear-item--normal { height: 12px; width: 12px;}.var-loading__disappear-item--small { height: 9px; width: 9px;}.var-loading__disappear-item--mini { height: 6px; width: 6px;}@keyframes disappear { 0% { opacity: 1; } 100% { opacity: 0; }}

package/es/loading/loading.less

@@ -23,12 +23,20 @@
   position: relative;
 
   &__content {
+    position: relative;
     transition: opacity 0.3s;
     opacity: 1;
 
     &--active {
       opacity: var(--loading-opacity);
-      user-select: none;
+    }
+
+    &-mask {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
     }
   }
 

package/es/picker/picker.css

@@ -1 +1 @@
-:root { --picker-background: #fff; --picker-toolbar-height: 44px; --picker-confirm-button-text-color: var(--color-primary); --picker-cancel-button-text-color: #888; --picker-picked-border: 1px solid rgba(0, 0, 0, 0.12); --picker-title-font-size: 16px; --picker-toolbar-padding: 0 4px; --picker-mask-background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)), linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));}.var-picker { width: 100%; background: var(--picker-background); user-select: none; transition: 0.25s background-color;}.var-picker__popup[var-picker-cover] { width: 100%;}.var-picker__columns { position: relative; display: flex; width: 100%; cursor: grab;}.var-picker__column { flex: 1; overflow: hidden;}.var-picker__text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.var-picker__scroller { width: 100%; transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);}.var-picker__option { display: flex; justify-content: center; align-items: center; width: 100%; padding: 0 4px;}.var-picker__picked { position: absolute; z-index: 2; pointer-events: none; width: 100%; left: 0; border-top: var(--picker-picked-border); border-bottom: var(--picker-picked-border); transition: 0.25s border;}.var-picker__mask { position: absolute; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%;}.var-picker__toolbar { display: flex; justify-content: space-between; align-items: center; width: 100%; height: var(--picker-toolbar-height); padding: var(--picker-toolbar-padding);}.var-picker__confirm-button[var-picker-cover] { color: var(--picker-confirm-button-text-color);}.var-picker__cancel-button[var-picker-cover] { color: var(--picker-cancel-button-text-color);}.var-picker__title { font-size: var(--picker-title-font-size);}
+:root { --picker-background: #fff; --picker-toolbar-height: 44px; --picker-confirm-button-text-color: var(--color-primary); --picker-cancel-button-text-color: #888; --picker-picked-border: 1px solid rgba(0, 0, 0, 0.12); --picker-title-font-size: 16px; --picker-toolbar-padding: 0 4px; --picker-mask-background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)), linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));}.var-picker { width: 100%; background: var(--picker-background); user-select: none; transition: 0.25s background-color;}.var-picker__popup[var-picker-cover] { width: 100%;}.var-picker__columns { position: relative; display: flex; width: 100%; cursor: grab;}.var-picker__column { flex: 1; overflow: hidden;}.var-picker__text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.var-picker__scroller { width: 100%; transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);}.var-picker__option { display: flex; justify-content: center; align-items: center; width: 100%; padding: 0 4px;}.var-picker__picked { position: absolute; z-index: 2; pointer-events: none; width: 100%; left: 0; border-top: var(--picker-picked-border); border-bottom: var(--picker-picked-border); transition: 0.25s border;}.var-picker__mask { position: absolute; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%; background-image: var(--picker-mask-background-image); background-repeat: no-repeat; background-position: top, bottom;}.var-picker__toolbar { display: flex; justify-content: space-between; align-items: center; width: 100%; height: var(--picker-toolbar-height); padding: var(--picker-toolbar-padding);}.var-picker__confirm-button[var-picker-cover] { color: var(--picker-confirm-button-text-color);}.var-picker__cancel-button[var-picker-cover] { color: var(--picker-cancel-button-text-color);}.var-picker__title { font-size: var(--picker-title-font-size);}

package/es/picker/picker.less

@@ -78,6 +78,9 @@
     left: 0;
     width: 100%;
     height: 100%;
+    background-image: var(--picker-mask-background-image);
+    background-repeat: no-repeat;
+    background-position: top, bottom;
   }
 
   &__toolbar {

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,