@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/lib/index-bar/IndexBar.js

@@ -14,21 +14,27 @@ var _provide = require("./provide");
 
 var _props = require("./props");
 
+var _components = require("../utils/components");
+
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('index-bar');
+
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
-var _hoisted_1 = {
-  class: "var-index-bar",
-  ref: "barEl"
-};
-var _hoisted_2 = ["onClick"];
+var _hoisted_1 = ["onClick"];
 
 function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "default"), (0, _vue.createElementVNode)("ul", {
-    class: "var-index-bar__anchor-list",
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n()),
+    ref: "barEl"
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default"), (0, _vue.createElementVNode)("ul", {
+    class: (0, _vue.normalizeClass)(_ctx.n('anchor-list')),
     style: (0, _vue.normalizeStyle)({
       zIndex: _ctx.toNumber(_ctx.zIndex) + 2,
       display: _ctx.hideList ? 'none' : 'block'
@@ -36,22 +42,20 @@ function render(_ctx, _cache) {
   }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.anchorNameList, anchorName => {
     return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
       key: anchorName,
-      class: (0, _vue.normalizeClass)(["var-index-bar__anchor-item", {
-        'var-index-bar__anchor-item--active': _ctx.active === anchorName
-      }]),
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('anchor-item'), [_ctx.active === anchorName, _ctx.n('anchor-item--active')])),
       style: (0, _vue.normalizeStyle)({
         color: _ctx.active === anchorName && _ctx.highlightColor ? _ctx.highlightColor : ''
       }),
       onClick: $event => _ctx.anchorClick(anchorName)
     }, (0, _vue.toDisplayString)(anchorName), 15
     /* TEXT, CLASS, STYLE, PROPS */
-    , _hoisted_2);
+    , _hoisted_1);
   }), 128
   /* KEYED_FRAGMENT */
-  ))], 4
-  /* STYLE */
-  )], 512
-  /* NEED_PATCH */
+  ))], 6
+  /* CLASS, STYLE */
+  )], 2
+  /* CLASS */
   );
 }
 
@@ -88,7 +92,7 @@ var _default = (0, _vue.defineComponent)({
       var anchorName = (0, _shared.isPlainObject)(anchor) ? anchor.name.value : anchor;
       if (anchorName === active.value || anchorName === undefined) return;
       active.value = anchorName;
-      props.onChange == null ? void 0 : props.onChange(anchorName);
+      (0, _components.call)(props.onChange, anchorName);
     };
 
     var handleScroll = () => {
@@ -118,7 +122,7 @@ var _default = (0, _vue.defineComponent)({
         var {
           offsetTop
         } = barEl.value;
-        if (manualCall) props.onClick == null ? void 0 : props.onClick(anchorName);
+        if (manualCall) (0, _components.call)(props.onClick, anchorName);
         if (anchorName === active.value) return;
         var indexAnchor = indexAnchors.find(_ref2 => {
           var {
@@ -169,11 +173,11 @@ var _default = (0, _vue.defineComponent)({
       scroller.value.addEventListener('scroll', handleScroll);
     }));
     (0, _vue.onBeforeUnmount)(() => {
-      var _scroller$value;
-
-      (_scroller$value = scroller.value) == null ? void 0 : _scroller$value.removeEventListener('scroll', handleScroll);
+      (0, _components.call)(scroller.value.removeEventListener, 'scroll', handleScroll);
     });
     return {
+      n,
+      classes,
       barEl,
       active,
       zIndex,

package/lib/index.js

@@ -2,6 +2,8 @@ var ActionSheet = require('./action-sheet')['default']
 var AppBar = require('./app-bar')['default']
 var BackTop = require('./back-top')['default']
 var Badge = require('./badge')['default']
+var BottomNavigation = require('./bottom-navigation')['default']
+var BottomNavigationItem = require('./bottom-navigation-item')['default']
 var Button = require('./button')['default']
 var Card = require('./card')['default']
 var Cell = require('./cell')['default']
@@ -67,6 +69,8 @@ function install(app) {
   AppBar.install && app.use(AppBar)
   BackTop.install && app.use(BackTop)
   Badge.install && app.use(Badge)
+  BottomNavigation.install && app.use(BottomNavigation)
+  BottomNavigationItem.install && app.use(BottomNavigationItem)
   Button.install && app.use(Button)
   Card.install && app.use(Card)
   Cell.install && app.use(Cell)
@@ -134,6 +138,8 @@ module.exports = {
   AppBar,
   BackTop,
   Badge,
+  BottomNavigation,
+  BottomNavigationItem,
   Button,
   Card,
   Cell,

package/lib/input/Input.js

@@ -20,15 +20,16 @@ var _provide = require("../form/provide");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('input');
+
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
-var _hoisted_1 = {
-  key: 0,
-  class: "var-input__autocomplete"
-};
-var _hoisted_2 = ["id", "disabled", "type", "value", "maxlength", "rows"];
-var _hoisted_3 = ["id", "disabled", "type", "value", "maxlength"];
-var _hoisted_4 = ["for"];
+var _hoisted_1 = ["id", "disabled", "type", "value", "maxlength", "rows"];
+var _hoisted_2 = ["id", "disabled", "type", "value", "maxlength"];
+var _hoisted_3 = ["for"];
 
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
@@ -36,24 +37,29 @@ function render(_ctx, _cache) {
   var _component_var_form_details = (0, _vue.resolveComponent)("var-form-details");
 
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(["var-input var--box", [_ctx.disabled ? 'var-input--disabled' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box', [_ctx.disabled, _ctx.n('--disabled')])),
     onClick: _cache[8] || (_cache[8] = function () {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-input__controller", [_ctx.isFocus ? 'var-input--focus' : null, _ctx.errorMessage ? 'var-input--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('controller'), [_ctx.isFocus, _ctx.n('--focus')], [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
     style: (0, _vue.normalizeStyle)({
       color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : undefined
     })
   }, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-input__icon", [!_ctx.hint ? 'var-input--non-hint' : null]])
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--non-hint')]))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "prepend-icon")], 2
   /* CLASS */
   ), (0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-input__wrap", [!_ctx.hint ? 'var-input--non-hint' : null]])
-  }, [_ctx.type === 'password' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("input", _hoisted_1)) : (0, _vue.createCommentVNode)("v-if", true), _ctx.textarea ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("textarea", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('wrap'), [!_ctx.hint, _ctx.n('--non-hint')]))
+  }, [_ctx.type === 'password' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("input", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('autocomplete'))
+  }, null, 2
+  /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true), _ctx.textarea ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("textarea", {
     key: 1,
-    class: (0, _vue.normalizeClass)(["var-input__input var-input--textarea", [_ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null, _ctx.errorMessage ? 'var-input--caret-error' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('input'), _ctx.n('--textarea'), [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--caret-error')])),
     ref: "el",
     autocomplete: "new-password",
     id: _ctx.id,
@@ -64,7 +70,7 @@ function render(_ctx, _cache) {
     rows: _ctx.rows,
     style: (0, _vue.normalizeStyle)({
       color: _ctx.textColor,
-      caretColor: !_ctx.errorMessage ? _ctx.focusColor : null,
+      caretColor: !_ctx.errorMessage ? _ctx.focusColor : undefined,
       resize: _ctx.resize ? 'vertical' : 'none'
     }),
     onFocus: _cache[0] || (_cache[0] = function () {
@@ -81,9 +87,9 @@ function render(_ctx, _cache) {
     })
   }, "\n        ", 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
-  , _hoisted_2)) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("input", {
+  , _hoisted_1)) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("input", {
     key: 2,
-    class: (0, _vue.normalizeClass)(["var-input__input", [_ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null, _ctx.errorMessage ? 'var-input--caret-error' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('input'), [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--caret-error')])),
     ref: "el",
     autocomplete: "new-password",
     id: _ctx.id,
@@ -93,7 +99,7 @@ function render(_ctx, _cache) {
     maxlength: _ctx.maxlength,
     style: (0, _vue.normalizeStyle)({
       color: _ctx.textColor,
-      caretColor: !_ctx.errorMessage ? _ctx.focusColor : null
+      caretColor: !_ctx.errorMessage ? _ctx.focusColor : undefined
     }),
     onFocus: _cache[4] || (_cache[4] = function () {
       return _ctx.handleFocus && _ctx.handleFocus(...arguments);
@@ -109,39 +115,39 @@ function render(_ctx, _cache) {
     })
   }, null, 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
-  , _hoisted_3)), (0, _vue.createElementVNode)("label", {
-    class: (0, _vue.normalizeClass)(["var--ellipsis", [_ctx.isFocus ? 'var-input--focus' : null, _ctx.errorMessage ? 'var-input--error' : null, _ctx.textarea ? 'var-input__textarea-placeholder' : 'var-input__placeholder', _ctx.computePlaceholderState(), !_ctx.hint ? 'var-input--placeholder-non-hint' : null]]),
+  , _hoisted_2)), (0, _vue.createElementVNode)("label", {
+    class: (0, _vue.normalizeClass)(_ctx.classes('var--ellipsis', [_ctx.isFocus, _ctx.n('--focus')], [_ctx.errorMessage, _ctx.n('--error')], [_ctx.textarea, _ctx.n('textarea-placeholder'), _ctx.n('placeholder')], _ctx.computePlaceholderState(), [!_ctx.hint, _ctx.n('--placeholder-non-hint')])),
     style: (0, _vue.normalizeStyle)({
       color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : undefined
     }),
     for: _ctx.id
   }, (0, _vue.toDisplayString)(_ctx.placeholder), 15
   /* TEXT, CLASS, STYLE, PROPS */
-  , _hoisted_4)], 2
+  , _hoisted_3)], 2
   /* CLASS */
   ), (0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-input__icon", [!_ctx.hint ? 'var-input--non-hint' : null]])
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--non-hint')]))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "append-icon", {}, () => [_ctx.clearable && !_ctx.isEmpty(_ctx.modelValue) ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
     key: 0,
-    class: "var-input__clear-icon",
+    class: (0, _vue.normalizeClass)(_ctx.n('clear-icon')),
     "var-input-cover": "",
     name: "close-circle",
     size: "14px",
     onClick: _ctx.handleClear
   }, null, 8
   /* PROPS */
-  , ["onClick"])) : (0, _vue.createCommentVNode)("v-if", true)])], 2
+  , ["class", "onClick"])) : (0, _vue.createCommentVNode)("v-if", true)])], 2
   /* CLASS */
   )], 6
   /* CLASS, STYLE */
   ), _ctx.line ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
-    class: (0, _vue.normalizeClass)(["var-input__line", [_ctx.formDisabled || _ctx.disabled ? 'var-input--line-disabled' : null, _ctx.errorMessage ? 'var-input--line-error' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('line'), [_ctx.formDisabled || _ctx.disabled, _ctx.n('--line-disabled')], [_ctx.errorMessage, _ctx.n('--line-error')])),
     style: (0, _vue.normalizeStyle)({
       background: !_ctx.errorMessage ? _ctx.blurColor : undefined
     })
   }, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-input__dot", [_ctx.isFocus ? 'var-input--spread' : null, _ctx.formDisabled || _ctx.disabled ? 'var-input--line-disabled' : null, _ctx.errorMessage ? 'var-input--line-error' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('dot'), [_ctx.isFocus, _ctx.n('--spread')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--line-disabled')], [_ctx.errorMessage, _ctx.n('--line-error')])),
     style: (0, _vue.normalizeStyle)({
       background: !_ctx.errorMessage ? _ctx.focusColor : undefined
     })
@@ -218,34 +224,32 @@ var _default = (0, _vue.defineComponent)({
       } = props;
 
       if (!hint && !(0, _shared.isEmpty)(modelValue)) {
-        return 'var-input--placeholder-hidden';
+        return n('--placeholder-hidden');
       }
 
       if (hint && (!(0, _shared.isEmpty)(modelValue) || isFocus.value)) {
-        return 'var-input--placeholder-hint';
+        return n('--placeholder-hint');
       }
     };
 
     var handleFocus = e => {
       isFocus.value = true;
-      props.onFocus == null ? void 0 : props.onFocus(e);
+      (0, _components.call)(props.onFocus, e);
       validateWithTrigger('onFocus');
     };
 
     var handleBlur = e => {
       isFocus.value = false;
-      props.onBlur == null ? void 0 : props.onBlur(e);
+      (0, _components.call)(props.onBlur, e);
       validateWithTrigger('onBlur');
     };
 
     var handleInput = e => {
-      var _props$onUpdateModel;
-
       var {
         value
       } = e.target;
-      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, value);
-      props.onInput == null ? void 0 : props.onInput(value, e);
+      (0, _components.call)(props['onUpdate:modelValue'], value);
+      (0, _components.call)(props.onInput, value, e);
       validateWithTrigger('onInput');
     };
 
@@ -253,13 +257,11 @@ var _default = (0, _vue.defineComponent)({
       var {
         value
       } = e.target;
-      props.onChange == null ? void 0 : props.onChange(value, e);
+      (0, _components.call)(props.onChange, value, e);
       validateWithTrigger('onChange');
     };
 
     var handleClear = () => {
-      var _props$onUpdateModel2;
-
       var {
         disabled,
         readonly,
@@ -271,8 +273,8 @@ var _default = (0, _vue.defineComponent)({
         return;
       }
 
-      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, '');
-      onClear == null ? void 0 : onClear('');
+      (0, _components.call)(props['onUpdate:modelValue'], '');
+      (0, _components.call)(onClear, '');
       validateWithTrigger('onClear');
     };
 
@@ -286,15 +288,13 @@ var _default = (0, _vue.defineComponent)({
         return;
       }
 
-      onClick == null ? void 0 : onClick(e);
+      (0, _components.call)(onClick, e);
       validateWithTrigger('onClick');
     }; // expose
 
 
     var reset = () => {
-      var _props$onUpdateModel3;
-
-      (_props$onUpdateModel3 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel3.call(props, '');
+      (0, _components.call)(props['onUpdate:modelValue'], '');
       resetValidation();
     }; // expose
 
@@ -318,7 +318,7 @@ var _default = (0, _vue.defineComponent)({
       validate,
       resetValidation
     };
-    bindForm == null ? void 0 : bindForm(inputProvider);
+    (0, _components.call)(bindForm, inputProvider);
     return {
       el,
       id,
@@ -327,6 +327,8 @@ var _default = (0, _vue.defineComponent)({
       maxlengthText,
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
+      n,
+      classes,
       isEmpty: _shared.isEmpty,
       computePlaceholderState,
       handleFocus,

package/lib/lazy/index.js

@@ -7,6 +7,8 @@ var _elements = require("../utils/elements");
 
 var _shared = require("../utils/shared");
 
+var _components = require("../utils/components");
+
 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); }); }; }
@@ -103,7 +105,7 @@ function createLazy(el, binding) {
     attemptLock: false
   }, lazyOptions);
   setSRC(el, PIXEL);
-  defaultLazyOptions.filter == null ? void 0 : defaultLazyOptions.filter(el._lazy);
+  (0, _components.call)(defaultLazyOptions.filter, el._lazy);
 }
 
 function createImage(el, attemptSRC) {

package/lib/less.js

@@ -2,6 +2,8 @@ require('./action-sheet/style/less')
 require('./app-bar/style/less')
 require('./back-top/style/less')
 require('./badge/style/less')
+require('./bottom-navigation/style/less')
+require('./bottom-navigation-item/style/less')
 require('./button/style/less')
 require('./card/style/less')
 require('./cell/style/less')

package/lib/list/List.js

@@ -16,6 +16,8 @@ var _props = require("./props");
 
 var _shared = require("../utils/shared");
 
+var _components = require("../utils/components");
+
 var _locale = require("../locale");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -24,55 +26,56 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
-
-var _hoisted_1 = {
-  class: "var-list var--box",
-  ref: "listEl"
-};
-var _hoisted_2 = {
-  class: "var-list__loading"
-};
-var _hoisted_3 = {
-  class: "var-list__loading-text"
-};
-var _hoisted_4 = {
-  class: "var-list__finished"
-};
-var _hoisted_5 = {
-  class: "var-list__detector",
-  ref: "detectorEl"
-};
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('list');
 
 function render(_ctx, _cache) {
   var _component_var_loading = (0, _vue.resolveComponent)("var-loading");
 
   var _directive_ripple = (0, _vue.resolveDirective)("ripple");
 
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "default"), _ctx.loading ? (0, _vue.renderSlot)(_ctx.$slots, "loading", {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box')),
+    ref: "listEl"
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default"), _ctx.loading ? (0, _vue.renderSlot)(_ctx.$slots, "loading", {
     key: 0
-  }, () => [(0, _vue.createElementVNode)("div", _hoisted_2, [(0, _vue.createElementVNode)("div", _hoisted_3, (0, _vue.toDisplayString)(_ctx.dt(_ctx.loadingText, _ctx.pack.listLoadingText)), 1
-  /* TEXT */
+  }, () => [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('loading'))
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('loading-text'))
+  }, (0, _vue.toDisplayString)(_ctx.dt(_ctx.loadingText, _ctx.pack.listLoadingText)), 3
+  /* TEXT, CLASS */
   ), (0, _vue.createVNode)(_component_var_loading, {
     size: "mini",
     radius: 10
-  })])]) : (0, _vue.createCommentVNode)("v-if", true), _ctx.finished ? (0, _vue.renderSlot)(_ctx.$slots, "finished", {
+  })], 2
+  /* CLASS */
+  )]) : (0, _vue.createCommentVNode)("v-if", true), _ctx.finished ? (0, _vue.renderSlot)(_ctx.$slots, "finished", {
     key: 1
-  }, () => [(0, _vue.createElementVNode)("div", _hoisted_4, (0, _vue.toDisplayString)(_ctx.dt(_ctx.finishedText, _ctx.pack.listFinishedText)), 1
-  /* TEXT */
+  }, () => [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('finished'))
+  }, (0, _vue.toDisplayString)(_ctx.dt(_ctx.finishedText, _ctx.pack.listFinishedText)), 3
+  /* TEXT, CLASS */
   )]) : (0, _vue.createCommentVNode)("v-if", true), _ctx.error ? (0, _vue.renderSlot)(_ctx.$slots, "error", {
     key: 2
   }, () => [(0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: "var-list__error",
+    class: (0, _vue.normalizeClass)(_ctx.n('error')),
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.load && _ctx.load(...arguments);
     })
   }, [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.dt(_ctx.errorText, _ctx.pack.listErrorText)), 1
   /* TEXT */
-  )])), [[_directive_ripple]])]) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", _hoisted_5, null, 512
-  /* NEED_PATCH */
-  )], 512
-  /* NEED_PATCH */
+  )], 2
+  /* CLASS */
+  )), [[_directive_ripple]])]) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('detector')),
+    ref: "detectorEl"
+  }, null, 2
+  /* CLASS */
+  )], 2
+  /* CLASS */
   );
 }
 
@@ -93,11 +96,9 @@ var _default = (0, _vue.defineComponent)({
     var scroller;
 
     var load = () => {
-      var _props$onUpdateError, _props$onUpdateLoadi;
-
-      (_props$onUpdateError = props['onUpdate:error']) == null ? void 0 : _props$onUpdateError.call(props, false);
-      (_props$onUpdateLoadi = props['onUpdate:loading']) == null ? void 0 : _props$onUpdateLoadi.call(props, true);
-      props.onLoad == null ? void 0 : props.onLoad();
+      (0, _components.call)(props['onUpdate:error'], false);
+      (0, _components.call)(props['onUpdate:loading'], true);
+      (0, _components.call)(props.onLoad);
     };
 
     var isReachBottom = () => {
@@ -145,7 +146,9 @@ var _default = (0, _vue.defineComponent)({
       dt: _shared.dt,
       isNumber: _shared.isNumber,
       load,
-      check
+      check,
+      n,
+      classes
     };
   }
 

package/lib/loading/Loading.js

@@ -10,17 +10,16 @@ var _props = require("./props");
 
 var _shared = require("../utils/shared");
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+var _components = require("../utils/components");
+
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('loading');
 
-var _hoisted_1 = {
-  class: "var-loading"
-};
-var _hoisted_2 = {
-  key: 0,
-  class: "var-loading__circle"
-};
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
-var _hoisted_3 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("svg", {
+var _hoisted_1 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("svg", {
   viewBox: "25 25 50 50"
 }, [/*#__PURE__*/(0, _vue.createElementVNode)("circle", {
   cx: "50",
@@ -31,39 +30,46 @@ var _hoisted_3 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createEle
 /* HOISTED */
 ));
 
-var _hoisted_4 = [_hoisted_3];
+var _hoisted_2 = [_hoisted_1];
 
 function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [_ctx.$slots.default ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n())
+  }, [_ctx.$slots.default ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
-    class: (0, _vue.normalizeClass)(["var-loading__content", [_ctx.loading ? 'var-loading__content--active' : null]])
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('content'), [_ctx.loading, _ctx.n('content--active')]))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2
   /* CLASS */
   )) : (0, _vue.createCommentVNode)("v-if", true), _ctx.isShow ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 1,
-    class: (0, _vue.normalizeClass)(["var--box var-loading__body", [_ctx.$slots.default ? 'var-loading__inside' : null]])
-  }, [_ctx.type === 'circle' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_2, [(0, _vue.createElementVNode)("span", {
-    class: "var-loading__circle-block",
+    class: (0, _vue.normalizeClass)(_ctx.classes('var--box', _ctx.n('body'), [_ctx.$slots.default, _ctx.n('inside')]))
+  }, [_ctx.type === 'circle' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('circle'))
+  }, [(0, _vue.createElementVNode)("span", {
+    class: (0, _vue.normalizeClass)(_ctx.n('circle-block')),
     style: (0, _vue.normalizeStyle)({
       width: _ctx.getRadius * 2 + 'px',
       height: _ctx.getRadius * 2 + 'px',
       color: _ctx.color
     })
-  }, _hoisted_4, 4
-  /* STYLE */
-  )])) : (0, _vue.createCommentVNode)("v-if", true), ((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.loadingTypeDict, (nums, key) => {
+  }, _hoisted_2, 6
+  /* CLASS, STYLE */
+  )], 2
+  /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true), ((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.loadingTypeDict, (nums, key) => {
     return (0, _vue.openBlock)(), (0, _vue.createElementBlock)(_vue.Fragment, {
       key: key
     }, [_ctx.type === key ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
       key: 0,
-      class: (0, _vue.normalizeClass)("var-loading__" + key + " var-loading__" + key + "-" + _ctx.size)
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(key), _ctx.n(key + "--" + _ctx.size)))
     }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(nums, num => {
       return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
         key: num + key,
         style: (0, _vue.normalizeStyle)({
           backgroundColor: _ctx.color
         }),
-        class: (0, _vue.normalizeClass)("var-loading__" + key + "-item var-loading__" + key + "-item-" + _ctx.size)
+        class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(key + "-item"), _ctx.n(key + "-item--" + _ctx.size)))
       }, null, 6
       /* CLASS, STYLE */
       );
@@ -78,7 +84,7 @@ function render(_ctx, _cache) {
   /* KEYED_FRAGMENT */
   )), _ctx.$slots.description || _ctx.description ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 1,
-    class: (0, _vue.normalizeClass)(["var-loading__description", "var-loading__description--" + _ctx.size]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('description'), _ctx.n("description--" + _ctx.size))),
     style: (0, _vue.normalizeStyle)({
       color: _ctx.color
     })
@@ -88,7 +94,9 @@ function render(_ctx, _cache) {
   /* CLASS, STYLE */
   )) : (0, _vue.createCommentVNode)("v-if", true)], 2
   /* CLASS */
-  )) : (0, _vue.createCommentVNode)("v-if", true)]);
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -116,10 +124,12 @@ var _default = (0, _vue.defineComponent)({
       return props.radius ? (0, _shared.toNumber)(props.radius) : sizeDict[props.size];
     });
     var isShow = (0, _vue.computed)(() => {
-      if (!(slots.default != null && slots.default())) return true;
+      if (!(0, _components.call)(slots.default)) return true;
       return props.loading;
     });
     return {
+      n,
+      classes,
       loadingTypeDict,
       getRadius,
       isShow