@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/es/picker/Picker.js

@@ -5,24 +5,20 @@ import { props } from './props';
 import { isArray, dt } from '../utils/shared';
 import { toPxNum, getTranslate } from '../utils/elements';
 import { pack } from '../locale';
+import { createNamespace, call } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('picker');
 var MOMENTUM_RECORD_TIME = 300;
 var MOMENTUM_ALLOW_DISTANCE = 15;
 var sid = 0;
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, withModifiers as _withModifiers, mergeProps as _mergeProps, resolveDynamicComponent as _resolveDynamicComponent, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, withModifiers as _withModifiers, mergeProps as _mergeProps, resolveDynamicComponent as _resolveDynamicComponent, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _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"];
 export function render(_ctx, _cache) {
   var _component_var_button = _resolveComponent("var-button");
 
@@ -38,14 +34,16 @@ export 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: _withCtx(() => [_createElementVNode("div", _mergeProps({
-      class: "var-picker"
-    }, _ctx.$attrs), [_createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "cancel", {}, () => [_createVNode(_component_var_button, {
-      class: "var-picker__cancel-button",
+      class: _ctx.n()
+    }, _ctx.$attrs), [_createElementVNode("div", {
+      class: _normalizeClass(_ctx.n('toolbar'))
+    }, [_renderSlot(_ctx.$slots, "cancel", {}, () => [_createVNode(_component_var_button, {
+      class: _normalizeClass(_ctx.n('cancel-button')),
       "var-picker-cover": "",
       text: "",
       "text-color": _ctx.cancelButtonTextColor,
@@ -59,10 +57,12 @@ export function render(_ctx, _cache) {
 
     }, 8
     /* PROPS */
-    , ["text-color", "onClick"])]), _renderSlot(_ctx.$slots, "title", {}, () => [_createElementVNode("div", _hoisted_2, _toDisplayString(_ctx.dt(_ctx.title, _ctx.pack.pickerTitle)), 1
-    /* TEXT */
+    , ["class", "text-color", "onClick"])]), _renderSlot(_ctx.$slots, "title", {}, () => [_createElementVNode("div", {
+      class: _normalizeClass(_ctx.n('title'))
+    }, _toDisplayString(_ctx.dt(_ctx.title, _ctx.pack.pickerTitle)), 3
+    /* TEXT, CLASS */
     )]), _renderSlot(_ctx.$slots, "confirm", {}, () => [_createVNode(_component_var_button, {
-      class: "var-picker__confirm-button",
+      class: _normalizeClass(_ctx.n('confirm-button')),
       text: "",
       "var-picker-cover": "",
       "text-color": _ctx.confirmButtonTextColor,
@@ -76,20 +76,22 @@ export function render(_ctx, _cache) {
 
     }, 8
     /* PROPS */
-    , ["text-color", "onClick"])])]), _createElementVNode("div", {
-      class: "var-picker__columns",
+    , ["class", "text-color", "onClick"])])], 2
+    /* CLASS */
+    ), _createElementVNode("div", {
+      class: _normalizeClass(_ctx.n('columns')),
       style: _normalizeStyle({
         height: _ctx.columnHeight + "px"
       })
     }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.scrollColumns, c => {
       return _openBlock(), _createElementBlock("div", {
-        class: "var-picker__column",
+        class: _normalizeClass(_ctx.n('column')),
         key: c.id,
         onTouchstart: $event => _ctx.handleTouchstart($event, c),
         onTouchmove: _withModifiers($event => _ctx.handleTouchmove($event, c), ["prevent"]),
         onTouchend: $event => _ctx.handleTouchend($event, c)
       }, [_createElementVNode("div", {
-        class: "var-picker__scroller",
+        class: _normalizeClass(_ctx.n('scroller')),
         ref_for: true,
         ref: el => _ctx.getScrollEl(el, c),
         style: _normalizeStyle({
@@ -100,42 +102,44 @@ export function render(_ctx, _cache) {
         onTransitionend: $event => _ctx.handleTransitionend(c)
       }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(c.column.texts, t => {
         return _openBlock(), _createElementBlock("div", {
-          class: "var-picker__option",
+          class: _normalizeClass(_ctx.n('option')),
           style: _normalizeStyle({
             height: _ctx.optionHeight + "px"
           }),
           key: t
-        }, [_createElementVNode("div", _hoisted_5, _toDisplayString(t), 1
-        /* TEXT */
-        )], 4
-        /* STYLE */
+        }, [_createElementVNode("div", {
+          class: _normalizeClass(_ctx.n('text'))
+        }, _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 */
     )), _createElementVNode("div", {
-      class: "var-picker__picked",
+      class: _normalizeClass(_ctx.n('picked')),
       style: _normalizeStyle({
         top: _ctx.center + "px",
         height: _ctx.optionHeight + "px"
       })
-    }, null, 4
-    /* STYLE */
+    }, null, 6
+    /* CLASS, STYLE */
     ), _createElementVNode("div", {
-      class: "var-picker__mask",
+      class: _normalizeClass(_ctx.n('mask')),
       style: _normalizeStyle({
         backgroundSize: "100% " + (_ctx.columnHeight - _ctx.optionHeight) / 2 + "px"
       })
-    }, null, 4
-    /* STYLE */
-    )], 4
-    /* STYLE */
+    }, null, 6
+    /* CLASS, STYLE */
+    )], 6
+    /* CLASS, STYLE */
     )], 16
     /* FULL_PROPS */
     )]),
@@ -169,9 +173,7 @@ export default defineComponent({
     };
 
     var handlePopupUpdateShow = value => {
-      var _props$onUpdateShow;
-
-      (_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, value);
+      call(props['onUpdate:show'], value);
     };
 
     var limitTranslate = scrollColumn => {
@@ -356,7 +358,7 @@ export default defineComponent({
       }
 
       prevIndexes = [...indexes];
-      onChange == null ? void 0 : onChange(texts, indexes);
+      call(onChange, texts, indexes);
     };
 
     var stopScroll = () => {
@@ -387,7 +389,7 @@ export default defineComponent({
         indexes
       } = getPicked();
       prevIndexes = [...indexes];
-      props.onConfirm == null ? void 0 : props.onConfirm(texts, indexes);
+      call(props.onConfirm, texts, indexes);
     }; // expose
 
 
@@ -398,7 +400,7 @@ export default defineComponent({
         indexes
       } = getPicked();
       prevIndexes = [...indexes];
-      props.onCancel == null ? void 0 : props.onCancel(texts, indexes);
+      call(props.onCancel, texts, indexes);
     };
 
     watch(() => props.columns, newValue => {
@@ -411,6 +413,8 @@ export default defineComponent({
       immediate: true
     });
     return {
+      n,
+      classes,
       pack,
       optionHeight,
       optionCount,

package/es/popup/Popup.js

@@ -6,7 +6,7 @@ import { defineComponent, watch, Transition, Teleport } from 'vue';
 import { props } from './props';
 import { useLock } from '../context/lock';
 import { useZIndex } from '../context/zIndex';
-import { addRouteListener, useTeleport } from '../utils/components';
+import { addRouteListener, useTeleport, createNamespace } from '../utils/components';
 
 
 
@@ -14,6 +14,10 @@ function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
 }
 
+var {
+  n,
+  classes
+} = createNamespace('popup');
 export default defineComponent({
   name: 'VarPopup',
   inheritAttrs: false,
@@ -60,11 +64,11 @@ export default defineComponent({
 
     var renderOverlay = () => {
       var {
-        overlayClass,
+        overlayClass = '',
         overlayStyle
       } = props;
       return _createVNode("div", {
-        "class": ['var-popup__overlay', overlayClass],
+        "class": classes(n('overlay'), overlayClass),
         "style": _extends({
           zIndex: zIndex.value - 1
         }, overlayStyle),
@@ -74,7 +78,7 @@ export default defineComponent({
 
     var renderContent = () => {
       return _createVNode("div", _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
         }
@@ -96,7 +100,7 @@ export default defineComponent({
         "onAfterLeave": onClosed
       }, {
         default: () => [_withDirectives(_createVNode("div", {
-          "class": "var--box var-popup",
+          "class": classes('var--box', n()),
           "style": {
             zIndex: zIndex.value - 2
           }

package/es/progress/Progress.js

@@ -1,36 +1,39 @@
 import { defineComponent, computed } from 'vue';
 import { props } from './props';
 import { toNumber } from '../utils/shared';
-import { normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, mergeProps as _mergeProps, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('progress');
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, mergeProps as _mergeProps, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _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"];
 export function render(_ctx, _cache) {
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_ctx.mode === 'linear' ? (_openBlock(), _createElementBlock("div", _hoisted_2, [_createElementVNode("div", _mergeProps({
-    class: "var-progress-linear__block",
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n())
+  }, [_ctx.mode === 'linear' ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('linear'))
+  }, [_createElementVNode("div", _mergeProps({
+    class: _ctx.n('linear-block'),
     style: {
       height: _ctx.lineWidth + "px"
     }
   }, _ctx.$attrs), [_ctx.track ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: "var-progress-linear__background",
+    class: _normalizeClass(_ctx.n('linear-background')),
     style: _normalizeStyle({
       background: _ctx.trackColor
     })
-  }, null, 4
-  /* STYLE */
+  }, null, 6
+  /* CLASS, STYLE */
   )) : _createCommentVNode("v-if", true), _createElementVNode("div", {
-    class: _normalizeClass("var-progress-linear__certain" + (_ctx.ripple ? ' var-progress-linear__ripple' : '')),
+    class: _normalizeClass(_ctx.classes(_ctx.n('linear-certain'), [_ctx.ripple, _ctx.n('linear-ripple')])),
     style: _normalizeStyle({
       background: _ctx.color,
       width: _ctx.linearProps.width
@@ -41,27 +44,29 @@ export function render(_ctx, _cache) {
   /* FULL_PROPS */
   ), _ctx.label ? (_openBlock(), _createElementBlock("div", _mergeProps({
     key: 0,
-    class: "var-progress-linear__label"
+    class: _ctx.n('linear-label')
   }, _ctx.$attrs), [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.linearProps.roundValue), 1
   /* TEXT */
   )])], 16
   /* FULL_PROPS */
-  )) : _createCommentVNode("v-if", true)])) : _createCommentVNode("v-if", true), _ctx.mode === 'circle' ? (_openBlock(), _createElementBlock("div", {
+  )) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
+  )) : _createCommentVNode("v-if", true), _ctx.mode === 'circle' ? (_openBlock(), _createElementBlock("div", {
     key: 1,
-    class: "var-progress-circle",
+    class: _normalizeClass(_ctx.n('circle')),
     style: _normalizeStyle({
       width: _ctx.size + "px",
       height: _ctx.size + "px"
     })
   }, [(_openBlock(), _createElementBlock("svg", {
-    class: "var-progress-circle__svg",
+    class: _normalizeClass(_ctx.n('circle-svg')),
     style: _normalizeStyle({
       transform: "rotate(" + (_ctx.rotate - 90) + "deg)"
     }),
     viewBox: _ctx.circleProps.viewBox
   }, [_ctx.track ? (_openBlock(), _createElementBlock("circle", {
     key: 0,
-    class: "var-progress-circle__background",
+    class: _normalizeClass(_ctx.n('circle-background')),
     cx: _ctx.size / 2,
     cy: _ctx.size / 2,
     r: _ctx.circleProps.radius,
@@ -71,10 +76,10 @@ export function render(_ctx, _cache) {
       strokeDasharray: _ctx.circleProps.perimeter,
       stroke: _ctx.trackColor
     })
-  }, null, 12
-  /* STYLE, PROPS */
-  , _hoisted_4)) : _createCommentVNode("v-if", true), _createElementVNode("circle", {
-    class: "var-progress-circle__certain",
+  }, null, 14
+  /* CLASS, STYLE, PROPS */
+  , _hoisted_2)) : _createCommentVNode("v-if", true), _createElementVNode("circle", {
+    class: _normalizeClass(_ctx.n('circle-certain')),
     cx: _ctx.size / 2,
     cy: _ctx.size / 2,
     r: _ctx.circleProps.radius,
@@ -84,20 +89,22 @@ export function render(_ctx, _cache) {
       strokeDasharray: _ctx.circleProps.strokeDasharray,
       stroke: _ctx.color
     })
-  }, null, 12
-  /* STYLE, PROPS */
-  , _hoisted_5)], 12
-  /* STYLE, PROPS */
-  , _hoisted_3)), _ctx.label ? (_openBlock(), _createElementBlock("div", _mergeProps({
+  }, null, 14
+  /* CLASS, STYLE, PROPS */
+  , _hoisted_3)], 14
+  /* CLASS, STYLE, PROPS */
+  , _hoisted_1)), _ctx.label ? (_openBlock(), _createElementBlock("div", _mergeProps({
     key: 0,
-    class: "var-progress-circle__label"
+    class: _ctx.n('circle-label')
   }, _ctx.$attrs), [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.circleProps.roundValue), 1
   /* TEXT */
   )])], 16
   /* FULL_PROPS */
-  )) : _createCommentVNode("v-if", true)], 4
-  /* STYLE */
-  )) : _createCommentVNode("v-if", true)]);
+  )) : _createCommentVNode("v-if", true)], 6
+  /* CLASS, STYLE */
+  )) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -135,6 +142,8 @@ export default defineComponent({
       };
     });
     return {
+      n,
+      classes,
       linearProps,
       circleProps
     };

package/es/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/es/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/es/pull-refresh/PullRefresh.js

@@ -3,6 +3,11 @@ import { defineComponent, ref, computed, watch, onMounted } from 'vue';
 import { getParentScroller, getScrollTop } from '../utils/elements';
 import { props } from './props';
 import { toNumber } from '../utils/shared';
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('pull-refresh');
 var MAX_DISTANCE = 100;
 var CONTROL_POSITION = -50;
 var scroller;
@@ -12,7 +17,7 @@ export function render(_ctx, _cache) {
 
   return _openBlock(), _createElementBlock("div", {
     ref: "freshNode",
-    class: "var-pull-refresh",
+    class: _normalizeClass(_ctx.n()),
     onTouchstart: _cache[0] || (_cache[0] = function () {
       return _ctx.touchStart && _ctx.touchStart(...arguments);
     }),
@@ -26,19 +31,19 @@ export function render(_ctx, _cache) {
       return _ctx.touchEnd && _ctx.touchEnd(...arguments);
     })
   }, [_createElementVNode("div", {
-    class: _normalizeClass(["var-pull-refresh__control var-elevation--2", [_ctx.isSuccess ? 'var-pull-refresh__control-success' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('control'), 'var-elevation--2', [_ctx.isSuccess, _ctx.n('control-success')])),
     style: _normalizeStyle(_ctx.controlStyle)
   }, [_createVNode(_component_var_icon, {
     name: _ctx.iconName,
     transition: 200,
-    class: _normalizeClass(_ctx.iconClass),
+    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [_ctx.refreshStatus === 'loading', _ctx.n('animation')])),
     "var-pull-refresh-cover": ""
   }, null, 8
   /* PROPS */
   , ["name", "class"])], 6
   /* CLASS, STYLE */
-  ), _renderSlot(_ctx.$slots, "default")], 544
-  /* HYDRATE_EVENTS, NEED_PATCH */
+  ), _renderSlot(_ctx.$slots, "default")], 34
+  /* CLASS, HYDRATE_EVENTS */
   );
 }
 export default defineComponent({
@@ -57,10 +62,6 @@ export default defineComponent({
     var refreshStatus = ref('default');
     var isEnd = ref(false);
     var isTouchable = computed(() => refreshStatus.value !== 'loading' && refreshStatus.value !== 'success' && !props.disabled);
-    var iconClass = computed(() => ({
-      'var-pull-refresh__icon': true,
-      'var-pull-refresh__animation': refreshStatus.value === 'loading'
-    }));
     var controlStyle = computed(() => ({
       transform: "translate3d(0px, " + distance.value + "px, 0px) translate(-50%, 0)",
       transition: isEnd.value ? "transform " + props.animationDuration + "ms" : undefined,
@@ -128,12 +129,14 @@ export default defineComponent({
       scroller = getParentScroller(freshNode.value);
     });
     return {
+      n,
+      classes,
+      refreshStatus,
       freshNode,
       touchStart,
       touchMove,
       touchEnd,
       iconName,
-      iconClass,
       controlStyle,
       isSuccess
     };