@varlet/ui 1.26.9 → 1.27.0-alpha.1649242923701

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

package/lib/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 { 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; }}