@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/lib/picker/Picker.js

@@ -18,25 +18,22 @@ var _elements = require("../utils/elements");
 
 var _locale = require("../locale");
 
+var _components = require("../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('picker');
 var MOMENTUM_RECORD_TIME = 300;
 var MOMENTUM_ALLOW_DISTANCE = 15;
 var sid = 0;
 
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
-var _hoisted_1 = {
-  class: "var-picker__toolbar"
-};
-var _hoisted_2 = {
-  class: "var-picker__title"
-};
-var _hoisted_3 = ["onTouchstart", "onTouchmove", "onTouchend"];
-var _hoisted_4 = ["onTransitionend"];
-var _hoisted_5 = {
-  class: "var-picker__text"
-};
+var _hoisted_1 = ["onTouchstart", "onTouchmove", "onTouchend"];
+var _hoisted_2 = ["onTransitionend"];
 
 function render(_ctx, _cache) {
   var _component_var_button = (0, _vue.resolveComponent)("var-button");
@@ -53,14 +50,16 @@ function render(_ctx, _cache) {
     show: _ctx.show,
     'onUpdate:show': _ctx.handlePopupUpdateShow,
     position: 'bottom',
-    class: 'var-picker__popup'
+    class: _ctx.n('popup')
   } : null, {
     "var-picker-cover": ""
   }), {
     default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
-      class: "var-picker"
-    }, _ctx.$attrs), [(0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "cancel", {}, () => [(0, _vue.createVNode)(_component_var_button, {
-      class: "var-picker__cancel-button",
+      class: _ctx.n()
+    }, _ctx.$attrs), [(0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(_ctx.n('toolbar'))
+    }, [(0, _vue.renderSlot)(_ctx.$slots, "cancel", {}, () => [(0, _vue.createVNode)(_component_var_button, {
+      class: (0, _vue.normalizeClass)(_ctx.n('cancel-button')),
       "var-picker-cover": "",
       text: "",
       "text-color": _ctx.cancelButtonTextColor,
@@ -74,10 +73,12 @@ function render(_ctx, _cache) {
 
     }, 8
     /* PROPS */
-    , ["text-color", "onClick"])]), (0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, _vue.createElementVNode)("div", _hoisted_2, (0, _vue.toDisplayString)(_ctx.dt(_ctx.title, _ctx.pack.pickerTitle)), 1
-    /* TEXT */
+    , ["class", "text-color", "onClick"])]), (0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(_ctx.n('title'))
+    }, (0, _vue.toDisplayString)(_ctx.dt(_ctx.title, _ctx.pack.pickerTitle)), 3
+    /* TEXT, CLASS */
     )]), (0, _vue.renderSlot)(_ctx.$slots, "confirm", {}, () => [(0, _vue.createVNode)(_component_var_button, {
-      class: "var-picker__confirm-button",
+      class: (0, _vue.normalizeClass)(_ctx.n('confirm-button')),
       text: "",
       "var-picker-cover": "",
       "text-color": _ctx.confirmButtonTextColor,
@@ -91,20 +92,22 @@ function render(_ctx, _cache) {
 
     }, 8
     /* PROPS */
-    , ["text-color", "onClick"])])]), (0, _vue.createElementVNode)("div", {
-      class: "var-picker__columns",
+    , ["class", "text-color", "onClick"])])], 2
+    /* CLASS */
+    ), (0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(_ctx.n('columns')),
       style: (0, _vue.normalizeStyle)({
         height: _ctx.columnHeight + "px"
       })
     }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.scrollColumns, c => {
       return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-        class: "var-picker__column",
+        class: (0, _vue.normalizeClass)(_ctx.n('column')),
         key: c.id,
         onTouchstart: $event => _ctx.handleTouchstart($event, c),
         onTouchmove: (0, _vue.withModifiers)($event => _ctx.handleTouchmove($event, c), ["prevent"]),
         onTouchend: $event => _ctx.handleTouchend($event, c)
       }, [(0, _vue.createElementVNode)("div", {
-        class: "var-picker__scroller",
+        class: (0, _vue.normalizeClass)(_ctx.n('scroller')),
         ref_for: true,
         ref: el => _ctx.getScrollEl(el, c),
         style: (0, _vue.normalizeStyle)({
@@ -115,42 +118,44 @@ function render(_ctx, _cache) {
         onTransitionend: $event => _ctx.handleTransitionend(c)
       }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(c.column.texts, t => {
         return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-          class: "var-picker__option",
+          class: (0, _vue.normalizeClass)(_ctx.n('option')),
           style: (0, _vue.normalizeStyle)({
             height: _ctx.optionHeight + "px"
           }),
           key: t
-        }, [(0, _vue.createElementVNode)("div", _hoisted_5, (0, _vue.toDisplayString)(t), 1
-        /* TEXT */
-        )], 4
-        /* STYLE */
+        }, [(0, _vue.createElementVNode)("div", {
+          class: (0, _vue.normalizeClass)(_ctx.n('text'))
+        }, (0, _vue.toDisplayString)(t), 3
+        /* TEXT, CLASS */
+        )], 6
+        /* CLASS, STYLE */
         );
       }), 128
       /* KEYED_FRAGMENT */
-      ))], 44
-      /* STYLE, PROPS, HYDRATE_EVENTS */
-      , _hoisted_4)], 40
-      /* PROPS, HYDRATE_EVENTS */
-      , _hoisted_3);
+      ))], 46
+      /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
+      , _hoisted_2)], 42
+      /* CLASS, PROPS, HYDRATE_EVENTS */
+      , _hoisted_1);
     }), 128
     /* KEYED_FRAGMENT */
     )), (0, _vue.createElementVNode)("div", {
-      class: "var-picker__picked",
+      class: (0, _vue.normalizeClass)(_ctx.n('picked')),
       style: (0, _vue.normalizeStyle)({
         top: _ctx.center + "px",
         height: _ctx.optionHeight + "px"
       })
-    }, null, 4
-    /* STYLE */
+    }, null, 6
+    /* CLASS, STYLE */
     ), (0, _vue.createElementVNode)("div", {
-      class: "var-picker__mask",
+      class: (0, _vue.normalizeClass)(_ctx.n('mask')),
       style: (0, _vue.normalizeStyle)({
         backgroundSize: "100% " + (_ctx.columnHeight - _ctx.optionHeight) / 2 + "px"
       })
-    }, null, 4
-    /* STYLE */
-    )], 4
-    /* STYLE */
+    }, null, 6
+    /* CLASS, STYLE */
+    )], 6
+    /* CLASS, STYLE */
     )], 16
     /* FULL_PROPS */
     )]),
@@ -185,9 +190,7 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var handlePopupUpdateShow = value => {
-      var _props$onUpdateShow;
-
-      (_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, value);
+      (0, _components.call)(props['onUpdate:show'], value);
     };
 
     var limitTranslate = scrollColumn => {
@@ -372,7 +375,7 @@ var _default = (0, _vue.defineComponent)({
       }
 
       prevIndexes = [...indexes];
-      onChange == null ? void 0 : onChange(texts, indexes);
+      (0, _components.call)(onChange, texts, indexes);
     };
 
     var stopScroll = () => {
@@ -403,7 +406,7 @@ var _default = (0, _vue.defineComponent)({
         indexes
       } = getPicked();
       prevIndexes = [...indexes];
-      props.onConfirm == null ? void 0 : props.onConfirm(texts, indexes);
+      (0, _components.call)(props.onConfirm, texts, indexes);
     }; // expose
 
 
@@ -414,7 +417,7 @@ var _default = (0, _vue.defineComponent)({
         indexes
       } = getPicked();
       prevIndexes = [...indexes];
-      props.onCancel == null ? void 0 : props.onCancel(texts, indexes);
+      (0, _components.call)(props.onCancel, texts, indexes);
     };
 
     (0, _vue.watch)(() => props.columns, newValue => {
@@ -427,6 +430,8 @@ var _default = (0, _vue.defineComponent)({
       immediate: true
     });
     return {
+      n,
+      classes,
       pack: _locale.pack,
       optionHeight,
       optionCount,

package/lib/popup/Popup.js

@@ -23,6 +23,11 @@ function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(s);
 }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('popup');
+
 var _default = (0, _vue.defineComponent)({
   name: 'VarPopup',
   inheritAttrs: false,
@@ -69,11 +74,11 @@ var _default = (0, _vue.defineComponent)({
 
     var renderOverlay = () => {
       var {
-        overlayClass,
+        overlayClass = '',
         overlayStyle
       } = props;
       return (0, _vue.createVNode)("div", {
-        "class": ['var-popup__overlay', overlayClass],
+        "class": classes(n('overlay'), overlayClass),
         "style": _extends({
           zIndex: zIndex.value - 1
         }, overlayStyle),
@@ -83,7 +88,7 @@ var _default = (0, _vue.defineComponent)({
 
     var renderContent = () => {
       return (0, _vue.createVNode)("div", (0, _vue.mergeProps)({
-        "class": ['var-popup__content', 'var-elevation--3', "var-popup--" + props.position],
+        "class": classes(n('content'), 'var-elevation--3', n("--" + props.position)),
         "style": {
           zIndex: zIndex.value
         }
@@ -105,7 +110,7 @@ var _default = (0, _vue.defineComponent)({
         "onAfterLeave": onClosed
       }, {
         default: () => [(0, _vue.withDirectives)((0, _vue.createVNode)("div", {
-          "class": "var--box var-popup",
+          "class": classes('var--box', n()),
           "style": {
             zIndex: zIndex.value - 2
           }

package/lib/progress/Progress.js

@@ -10,35 +10,40 @@ var _props = require("./props");
 
 var _shared = require("../utils/shared");
 
+var _components = require("../utils/components");
+
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('progress');
+
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
-var _hoisted_1 = {
-  class: "var-progress"
-};
-var _hoisted_2 = {
-  key: 0,
-  class: "var-progress-linear"
-};
-var _hoisted_3 = ["viewBox"];
-var _hoisted_4 = ["cx", "cy", "r", "stroke-width"];
-var _hoisted_5 = ["cx", "cy", "r", "stroke-width"];
+var _hoisted_1 = ["viewBox"];
+var _hoisted_2 = ["cx", "cy", "r", "stroke-width"];
+var _hoisted_3 = ["cx", "cy", "r", "stroke-width"];
 
 function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [_ctx.mode === 'linear' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_2, [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
-    class: "var-progress-linear__block",
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n())
+  }, [_ctx.mode === 'linear' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('linear'))
+  }, [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
+    class: _ctx.n('linear-block'),
     style: {
       height: _ctx.lineWidth + "px"
     }
   }, _ctx.$attrs), [_ctx.track ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
-    class: "var-progress-linear__background",
+    class: (0, _vue.normalizeClass)(_ctx.n('linear-background')),
     style: (0, _vue.normalizeStyle)({
       background: _ctx.trackColor
     })
-  }, null, 4
-  /* STYLE */
+  }, null, 6
+  /* CLASS, STYLE */
   )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)("var-progress-linear__certain" + (_ctx.ripple ? ' var-progress-linear__ripple' : '')),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('linear-certain'), [_ctx.ripple, _ctx.n('linear-ripple')])),
     style: (0, _vue.normalizeStyle)({
       background: _ctx.color,
       width: _ctx.linearProps.width
@@ -49,27 +54,29 @@ function render(_ctx, _cache) {
   /* FULL_PROPS */
   ), _ctx.label ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", (0, _vue.mergeProps)({
     key: 0,
-    class: "var-progress-linear__label"
+    class: _ctx.n('linear-label')
   }, _ctx.$attrs), [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.linearProps.roundValue), 1
   /* TEXT */
   )])], 16
   /* FULL_PROPS */
-  )) : (0, _vue.createCommentVNode)("v-if", true)])) : (0, _vue.createCommentVNode)("v-if", true), _ctx.mode === 'circle' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true), _ctx.mode === 'circle' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 1,
-    class: "var-progress-circle",
+    class: (0, _vue.normalizeClass)(_ctx.n('circle')),
     style: (0, _vue.normalizeStyle)({
       width: _ctx.size + "px",
       height: _ctx.size + "px"
     })
   }, [((0, _vue.openBlock)(), (0, _vue.createElementBlock)("svg", {
-    class: "var-progress-circle__svg",
+    class: (0, _vue.normalizeClass)(_ctx.n('circle-svg')),
     style: (0, _vue.normalizeStyle)({
       transform: "rotate(" + (_ctx.rotate - 90) + "deg)"
     }),
     viewBox: _ctx.circleProps.viewBox
   }, [_ctx.track ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("circle", {
     key: 0,
-    class: "var-progress-circle__background",
+    class: (0, _vue.normalizeClass)(_ctx.n('circle-background')),
     cx: _ctx.size / 2,
     cy: _ctx.size / 2,
     r: _ctx.circleProps.radius,
@@ -79,10 +86,10 @@ function render(_ctx, _cache) {
       strokeDasharray: _ctx.circleProps.perimeter,
       stroke: _ctx.trackColor
     })
-  }, null, 12
-  /* STYLE, PROPS */
-  , _hoisted_4)) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("circle", {
-    class: "var-progress-circle__certain",
+  }, null, 14
+  /* CLASS, STYLE, PROPS */
+  , _hoisted_2)) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("circle", {
+    class: (0, _vue.normalizeClass)(_ctx.n('circle-certain')),
     cx: _ctx.size / 2,
     cy: _ctx.size / 2,
     r: _ctx.circleProps.radius,
@@ -92,20 +99,22 @@ function render(_ctx, _cache) {
       strokeDasharray: _ctx.circleProps.strokeDasharray,
       stroke: _ctx.color
     })
-  }, null, 12
-  /* STYLE, PROPS */
-  , _hoisted_5)], 12
-  /* STYLE, PROPS */
-  , _hoisted_3)), _ctx.label ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", (0, _vue.mergeProps)({
+  }, null, 14
+  /* CLASS, STYLE, PROPS */
+  , _hoisted_3)], 14
+  /* CLASS, STYLE, PROPS */
+  , _hoisted_1)), _ctx.label ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", (0, _vue.mergeProps)({
     key: 0,
-    class: "var-progress-circle__label"
+    class: _ctx.n('circle-label')
   }, _ctx.$attrs), [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.circleProps.roundValue), 1
   /* TEXT */
   )])], 16
   /* FULL_PROPS */
-  )) : (0, _vue.createCommentVNode)("v-if", true)], 4
-  /* STYLE */
-  )) : (0, _vue.createCommentVNode)("v-if", true)]);
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 6
+  /* CLASS, STYLE */
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -144,6 +153,8 @@ var _default = (0, _vue.defineComponent)({
       };
     });
     return {
+      n,
+      classes,
       linearProps,
       circleProps
     };

package/lib/progress/progress.css

@@ -1 +1 @@
-:root { --progress-font-size: var(--font-size-sm); --progress-ripple-color: #fff; --progress-track-color: #d8d8d8; --progress-background: var(--color-primary);}.var-progress { position: relative; font-size: var(--progress-font-size);}.var-progress-linear { display: flex; align-items: center;}.var-progress-linear__block { flex: 1; position: relative; overflow: hidden;}.var-progress-linear__background,.var-progress-linear__certain { width: 100%; height: 100%;}.var-progress-linear__ripple::after { position: absolute; width: 0; background-color: var(--progress-ripple-color); height: 100%; opacity: 0; animation: ripple 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; content: '';}.var-progress-linear__background { background-color: var(--progress-track-color);}.var-progress-linear__certain { position: absolute; background-color: var(--progress-background); top: 0; left: 0; transition: all 0.2s, background-color 0.8s;}.var-progress-linear__label { margin-left: 8px; flex: 0;}@keyframes ripple { 0% { width: 0; opacity: 0.1; } 20% { width: 0; opacity: 0.5; } 80% { width: 100%; opacity: 0; }}.var-progress-circle { position: relative;}.var-progress-circle__background { stroke: var(--progress-track-color);}.var-progress-circle__certain { transition: all 0.2s; stroke: var(--progress-background); position: absolute;}.var-progress-circle__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
+:root { --progress-font-size: var(--font-size-sm); --progress-ripple-color: #fff; --progress-track-color: #d8d8d8; --progress-background: var(--color-primary);}.var-progress { position: relative; font-size: var(--progress-font-size);}.var-progress__linear { display: flex; align-items: center;}.var-progress__linear-block { flex: 1; position: relative; overflow: hidden;}.var-progress__linear-background,.var-progress__linear-certain { width: 100%; height: 100%;}.var-progress__linear-ripple::after { position: absolute; width: 0; background-color: var(--progress-ripple-color); height: 100%; opacity: 0; animation: ripple 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; content: '';}.var-progress__linear-background { background-color: var(--progress-track-color);}.var-progress__linear-certain { position: absolute; background-color: var(--progress-background); top: 0; left: 0; transition: all 0.2s, background-color 0.8s;}.var-progress__linear-label { margin-left: 8px; flex: 0;}@keyframes ripple { 0% { width: 0; opacity: 0.1; } 20% { width: 0; opacity: 0.5; } 80% { width: 100%; opacity: 0; }}.var-progress__circle { position: relative;}.var-progress__circle-background { stroke: var(--progress-track-color);}.var-progress__circle-certain { transition: all 0.2s; stroke: var(--progress-background); position: absolute;}.var-progress__circle-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

package/lib/progress/progress.less

@@ -14,23 +14,23 @@
   position: relative;
   font-size: var(--progress-font-size);
 
-  &-linear {
+  &__linear {
     display: flex;
     align-items: center;
 
-    &__block {
+    &-block {
       flex: 1;
       position: relative;
       overflow: hidden;
     }
 
-    &__background,
-    &__certain {
+    &-background,
+    &-certain {
       width: 100%;
       height: 100%;
     }
 
-    &__ripple {
+    &-ripple {
       &::after {
         position: absolute;
         width: 0;
@@ -42,11 +42,11 @@
       }
     }
 
-    &__background {
+    &-background {
       background-color: var(--progress-track-color);
     }
 
-    &__certain {
+    &-certain {
       position: absolute;
       background-color: var(--progress-background);
       top: 0;
@@ -54,7 +54,7 @@
       transition: all 0.2s, background-color 0.8s;
     }
 
-    &__label {
+    &-label {
       margin-left: 8px;
       flex: 0;
     }
@@ -75,20 +75,20 @@
     }
   }
 
-  &-circle {
+  &__circle {
     position: relative;
 
-    &__background {
+    &-background {
       stroke: var(--progress-track-color);
     }
 
-    &__certain {
+    &-certain {
       transition: all 0.2s;
       stroke: var(--progress-background);
       position: absolute;
     }
 
-    &__label {
+    &-label {
       position: absolute;
       left: 50%;
       top: 50%;

package/lib/pull-refresh/PullRefresh.js

@@ -14,8 +14,14 @@ var _props = require("./props");
 
 var _shared = require("../utils/shared");
 
+var _components = require("../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('pull-refresh');
 var MAX_DISTANCE = 100;
 var CONTROL_POSITION = -50;
 var scroller;
@@ -25,7 +31,7 @@ function render(_ctx, _cache) {
 
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     ref: "freshNode",
-    class: "var-pull-refresh",
+    class: (0, _vue.normalizeClass)(_ctx.n()),
     onTouchstart: _cache[0] || (_cache[0] = function () {
       return _ctx.touchStart && _ctx.touchStart(...arguments);
     }),
@@ -39,19 +45,19 @@ function render(_ctx, _cache) {
       return _ctx.touchEnd && _ctx.touchEnd(...arguments);
     })
   }, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-pull-refresh__control var-elevation--2", [_ctx.isSuccess ? 'var-pull-refresh__control-success' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('control'), 'var-elevation--2', [_ctx.isSuccess, _ctx.n('control-success')])),
     style: (0, _vue.normalizeStyle)(_ctx.controlStyle)
   }, [(0, _vue.createVNode)(_component_var_icon, {
     name: _ctx.iconName,
     transition: 200,
-    class: (0, _vue.normalizeClass)(_ctx.iconClass),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('icon'), [_ctx.refreshStatus === 'loading', _ctx.n('animation')])),
     "var-pull-refresh-cover": ""
   }, null, 8
   /* PROPS */
   , ["name", "class"])], 6
   /* CLASS, STYLE */
-  ), (0, _vue.renderSlot)(_ctx.$slots, "default")], 544
-  /* HYDRATE_EVENTS, NEED_PATCH */
+  ), (0, _vue.renderSlot)(_ctx.$slots, "default")], 34
+  /* CLASS, HYDRATE_EVENTS */
   );
 }
 
@@ -71,10 +77,6 @@ var _default = (0, _vue.defineComponent)({
     var refreshStatus = (0, _vue.ref)('default');
     var isEnd = (0, _vue.ref)(false);
     var isTouchable = (0, _vue.computed)(() => refreshStatus.value !== 'loading' && refreshStatus.value !== 'success' && !props.disabled);
-    var iconClass = (0, _vue.computed)(() => ({
-      'var-pull-refresh__icon': true,
-      'var-pull-refresh__animation': refreshStatus.value === 'loading'
-    }));
     var controlStyle = (0, _vue.computed)(() => ({
       transform: "translate3d(0px, " + distance.value + "px, 0px) translate(-50%, 0)",
       transition: isEnd.value ? "transform " + props.animationDuration + "ms" : undefined,
@@ -142,12 +144,14 @@ var _default = (0, _vue.defineComponent)({
       scroller = (0, _elements.getParentScroller)(freshNode.value);
     });
     return {
+      n,
+      classes,
+      refreshStatus,
       freshNode,
       touchStart,
       touchMove,
       touchEnd,
       iconName,
-      iconClass,
       controlStyle,
       isSuccess
     };