@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/es/input/Input.js

@@ -3,43 +3,48 @@ import VarIcon from '../icon';
 import { defineComponent, getCurrentInstance, ref, computed, nextTick } from 'vue';
 import { props } from './props';
 import { isEmpty } from '../utils/shared';
-import { useValidation } from '../utils/components';
+import { useValidation, createNamespace, call } from '../utils/components';
 import { useForm } from '../form/provide';
+var {
+  n,
+  classes
+} = createNamespace('input');
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, toDisplayString as _toDisplayString, resolveComponent as _resolveComponent, createBlock as _createBlock, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _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"];
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
   var _component_var_form_details = _resolveComponent("var-form-details");
 
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(["var-input var--box", [_ctx.disabled ? 'var-input--disabled' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', [_ctx.disabled, _ctx.n('--disabled')])),
     onClick: _cache[8] || (_cache[8] = function () {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, [_createElementVNode("div", {
-    class: _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: _normalizeClass(_ctx.classes(_ctx.n('controller'), [_ctx.isFocus, _ctx.n('--focus')], [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
     style: _normalizeStyle({
       color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : undefined
     })
   }, [_createElementVNode("div", {
-    class: _normalizeClass(["var-input__icon", [!_ctx.hint ? 'var-input--non-hint' : null]])
+    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--non-hint')]))
   }, [_renderSlot(_ctx.$slots, "prepend-icon")], 2
   /* CLASS */
   ), _createElementVNode("div", {
-    class: _normalizeClass(["var-input__wrap", [!_ctx.hint ? 'var-input--non-hint' : null]])
-  }, [_ctx.type === 'password' ? (_openBlock(), _createElementBlock("input", _hoisted_1)) : _createCommentVNode("v-if", true), _ctx.textarea ? (_openBlock(), _createElementBlock("textarea", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('wrap'), [!_ctx.hint, _ctx.n('--non-hint')]))
+  }, [_ctx.type === 'password' ? (_openBlock(), _createElementBlock("input", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('autocomplete'))
+  }, null, 2
+  /* CLASS */
+  )) : _createCommentVNode("v-if", true), _ctx.textarea ? (_openBlock(), _createElementBlock("textarea", {
     key: 1,
-    class: _normalizeClass(["var-input__input var-input--textarea", [_ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null, _ctx.errorMessage ? 'var-input--caret-error' : null]]),
+    class: _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,
@@ -50,7 +55,7 @@ export function render(_ctx, _cache) {
     rows: _ctx.rows,
     style: _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 () {
@@ -67,9 +72,9 @@ export function render(_ctx, _cache) {
     })
   }, "\n        ", 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
-  , _hoisted_2)) : (_openBlock(), _createElementBlock("input", {
+  , _hoisted_1)) : (_openBlock(), _createElementBlock("input", {
     key: 2,
-    class: _normalizeClass(["var-input__input", [_ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null, _ctx.errorMessage ? 'var-input--caret-error' : null]]),
+    class: _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,
@@ -79,7 +84,7 @@ export function render(_ctx, _cache) {
     maxlength: _ctx.maxlength,
     style: _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);
@@ -95,39 +100,39 @@ export function render(_ctx, _cache) {
     })
   }, null, 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
-  , _hoisted_3)), _createElementVNode("label", {
-    class: _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)), _createElementVNode("label", {
+    class: _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: _normalizeStyle({
       color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : undefined
     }),
     for: _ctx.id
   }, _toDisplayString(_ctx.placeholder), 15
   /* TEXT, CLASS, STYLE, PROPS */
-  , _hoisted_4)], 2
+  , _hoisted_3)], 2
   /* CLASS */
   ), _createElementVNode("div", {
-    class: _normalizeClass(["var-input__icon", [!_ctx.hint ? 'var-input--non-hint' : null]])
+    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--non-hint')]))
   }, [_renderSlot(_ctx.$slots, "append-icon", {}, () => [_ctx.clearable && !_ctx.isEmpty(_ctx.modelValue) ? (_openBlock(), _createBlock(_component_var_icon, {
     key: 0,
-    class: "var-input__clear-icon",
+    class: _normalizeClass(_ctx.n('clear-icon')),
     "var-input-cover": "",
     name: "close-circle",
     size: "14px",
     onClick: _ctx.handleClear
   }, null, 8
   /* PROPS */
-  , ["onClick"])) : _createCommentVNode("v-if", true)])], 2
+  , ["class", "onClick"])) : _createCommentVNode("v-if", true)])], 2
   /* CLASS */
   )], 6
   /* CLASS, STYLE */
   ), _ctx.line ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: _normalizeClass(["var-input__line", [_ctx.formDisabled || _ctx.disabled ? 'var-input--line-disabled' : null, _ctx.errorMessage ? 'var-input--line-error' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('line'), [_ctx.formDisabled || _ctx.disabled, _ctx.n('--line-disabled')], [_ctx.errorMessage, _ctx.n('--line-error')])),
     style: _normalizeStyle({
       background: !_ctx.errorMessage ? _ctx.blurColor : undefined
     })
   }, [_createElementVNode("div", {
-    class: _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: _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: _normalizeStyle({
       background: !_ctx.errorMessage ? _ctx.focusColor : undefined
     })
@@ -203,34 +208,32 @@ export default defineComponent({
       } = props;
 
       if (!hint && !isEmpty(modelValue)) {
-        return 'var-input--placeholder-hidden';
+        return n('--placeholder-hidden');
       }
 
       if (hint && (!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);
+      call(props.onFocus, e);
       validateWithTrigger('onFocus');
     };
 
     var handleBlur = e => {
       isFocus.value = false;
-      props.onBlur == null ? void 0 : props.onBlur(e);
+      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);
+      call(props['onUpdate:modelValue'], value);
+      call(props.onInput, value, e);
       validateWithTrigger('onInput');
     };
 
@@ -238,13 +241,11 @@ export default defineComponent({
       var {
         value
       } = e.target;
-      props.onChange == null ? void 0 : props.onChange(value, e);
+      call(props.onChange, value, e);
       validateWithTrigger('onChange');
     };
 
     var handleClear = () => {
-      var _props$onUpdateModel2;
-
       var {
         disabled,
         readonly,
@@ -256,8 +257,8 @@ export default defineComponent({
         return;
       }
 
-      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, '');
-      onClear == null ? void 0 : onClear('');
+      call(props['onUpdate:modelValue'], '');
+      call(onClear, '');
       validateWithTrigger('onClear');
     };
 
@@ -271,15 +272,13 @@ export default defineComponent({
         return;
       }
 
-      onClick == null ? void 0 : onClick(e);
+      call(onClick, e);
       validateWithTrigger('onClick');
     }; // expose
 
 
     var reset = () => {
-      var _props$onUpdateModel3;
-
-      (_props$onUpdateModel3 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel3.call(props, '');
+      call(props['onUpdate:modelValue'], '');
       resetValidation();
     }; // expose
 
@@ -303,7 +302,7 @@ export default defineComponent({
       validate,
       resetValidation
     };
-    bindForm == null ? void 0 : bindForm(inputProvider);
+    call(bindForm, inputProvider);
     return {
       el,
       id,
@@ -312,6 +311,8 @@ export default defineComponent({
       maxlengthText,
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
+      n,
+      classes,
       isEmpty,
       computePlaceholderState,
       handleFocus,

package/es/lazy/index.js

@@ -6,6 +6,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import { getAllParentScroller, inViewport } from '../utils/elements';
 import { createCache, removeItem, throttle } from '../utils/shared';
+import { call } from '../utils/components';
 var BACKGROUND_IMAGE_ARG_NAME = 'background-image';
 var LAZY_LOADING = 'lazy-loading';
 var LAZY_ERROR = 'lazy-error';
@@ -93,7 +94,7 @@ function createLazy(el, binding) {
     attemptLock: false
   }, lazyOptions);
   setSRC(el, PIXEL);
-  defaultLazyOptions.filter == null ? void 0 : defaultLazyOptions.filter(el._lazy);
+  call(defaultLazyOptions.filter, el._lazy);
 }
 
 function createImage(el, attemptSRC) {

package/es/less.js

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

package/es/list/List.js

@@ -8,57 +8,58 @@ import { defineComponent, onMounted, onUnmounted, ref, nextTick } from 'vue';
 import { getParentScroller, toPxNum } from '../utils/elements';
 import { props } from './props';
 import { isNumber, dt } from '../utils/shared';
+import { createNamespace, call } from '../utils/components';
 import { pack } from '../locale';
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _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
+} = createNamespace('list');
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_loading = _resolveComponent("var-loading");
 
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default"), _ctx.loading ? _renderSlot(_ctx.$slots, "loading", {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box')),
+    ref: "listEl"
+  }, [_renderSlot(_ctx.$slots, "default"), _ctx.loading ? _renderSlot(_ctx.$slots, "loading", {
     key: 0
-  }, () => [_createElementVNode("div", _hoisted_2, [_createElementVNode("div", _hoisted_3, _toDisplayString(_ctx.dt(_ctx.loadingText, _ctx.pack.listLoadingText)), 1
-  /* TEXT */
+  }, () => [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('loading'))
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('loading-text'))
+  }, _toDisplayString(_ctx.dt(_ctx.loadingText, _ctx.pack.listLoadingText)), 3
+  /* TEXT, CLASS */
   ), _createVNode(_component_var_loading, {
     size: "mini",
     radius: 10
-  })])]) : _createCommentVNode("v-if", true), _ctx.finished ? _renderSlot(_ctx.$slots, "finished", {
+  })], 2
+  /* CLASS */
+  )]) : _createCommentVNode("v-if", true), _ctx.finished ? _renderSlot(_ctx.$slots, "finished", {
     key: 1
-  }, () => [_createElementVNode("div", _hoisted_4, _toDisplayString(_ctx.dt(_ctx.finishedText, _ctx.pack.listFinishedText)), 1
-  /* TEXT */
+  }, () => [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('finished'))
+  }, _toDisplayString(_ctx.dt(_ctx.finishedText, _ctx.pack.listFinishedText)), 3
+  /* TEXT, CLASS */
   )]) : _createCommentVNode("v-if", true), _ctx.error ? _renderSlot(_ctx.$slots, "error", {
     key: 2
   }, () => [_withDirectives((_openBlock(), _createElementBlock("div", {
-    class: "var-list__error",
+    class: _normalizeClass(_ctx.n('error')),
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.load && _ctx.load(...arguments);
     })
   }, [_createTextVNode(_toDisplayString(_ctx.dt(_ctx.errorText, _ctx.pack.listErrorText)), 1
   /* TEXT */
-  )])), [[_directive_ripple]])]) : _createCommentVNode("v-if", true), _createElementVNode("div", _hoisted_5, null, 512
-  /* NEED_PATCH */
-  )], 512
-  /* NEED_PATCH */
+  )], 2
+  /* CLASS */
+  )), [[_directive_ripple]])]) : _createCommentVNode("v-if", true), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('detector')),
+    ref: "detectorEl"
+  }, null, 2
+  /* CLASS */
+  )], 2
+  /* CLASS */
   );
 }
 export default defineComponent({
@@ -78,11 +79,9 @@ export default 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();
+      call(props['onUpdate:error'], false);
+      call(props['onUpdate:loading'], true);
+      call(props.onLoad);
     };
 
     var isReachBottom = () => {
@@ -130,7 +129,9 @@ export default defineComponent({
       dt,
       isNumber,
       load,
-      check
+      check,
+      n,
+      classes
     };
   }
 

package/es/loading/Loading.js

@@ -1,19 +1,16 @@
 import { computed, defineComponent } from 'vue';
 import { props } from './props';
 import { toNumber } from '../utils/shared';
+import { createNamespace, call } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('loading');
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, renderList as _renderList, Fragment as _Fragment, 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-loading"
-};
-var _hoisted_2 = {
-  key: 0,
-  class: "var-loading__circle"
-};
-
-var _hoisted_3 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/_createElementVNode("svg", {
+var _hoisted_1 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/_createElementVNode("svg", {
   viewBox: "25 25 50 50"
 }, [/*#__PURE__*/_createElementVNode("circle", {
   cx: "50",
@@ -24,38 +21,45 @@ var _hoisted_3 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/_createElementVNod
 /* HOISTED */
 ));
 
-var _hoisted_4 = [_hoisted_3];
+var _hoisted_2 = [_hoisted_1];
 export function render(_ctx, _cache) {
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_ctx.$slots.default ? (_openBlock(), _createElementBlock("div", {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n())
+  }, [_ctx.$slots.default ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: _normalizeClass(["var-loading__content", [_ctx.loading ? 'var-loading__content--active' : null]])
+    class: _normalizeClass(_ctx.classes(_ctx.n('content'), [_ctx.loading, _ctx.n('content--active')]))
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
   )) : _createCommentVNode("v-if", true), _ctx.isShow ? (_openBlock(), _createElementBlock("div", {
     key: 1,
-    class: _normalizeClass(["var--box var-loading__body", [_ctx.$slots.default ? 'var-loading__inside' : null]])
-  }, [_ctx.type === 'circle' ? (_openBlock(), _createElementBlock("div", _hoisted_2, [_createElementVNode("span", {
-    class: "var-loading__circle-block",
+    class: _normalizeClass(_ctx.classes('var--box', _ctx.n('body'), [_ctx.$slots.default, _ctx.n('inside')]))
+  }, [_ctx.type === 'circle' ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('circle'))
+  }, [_createElementVNode("span", {
+    class: _normalizeClass(_ctx.n('circle-block')),
     style: _normalizeStyle({
       width: _ctx.getRadius * 2 + 'px',
       height: _ctx.getRadius * 2 + 'px',
       color: _ctx.color
     })
-  }, _hoisted_4, 4
-  /* STYLE */
-  )])) : _createCommentVNode("v-if", true), (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.loadingTypeDict, (nums, key) => {
+  }, _hoisted_2, 6
+  /* CLASS, STYLE */
+  )], 2
+  /* CLASS */
+  )) : _createCommentVNode("v-if", true), (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.loadingTypeDict, (nums, key) => {
     return _openBlock(), _createElementBlock(_Fragment, {
       key: key
     }, [_ctx.type === key ? (_openBlock(), _createElementBlock("div", {
       key: 0,
-      class: _normalizeClass("var-loading__" + key + " var-loading__" + key + "-" + _ctx.size)
+      class: _normalizeClass(_ctx.classes(_ctx.n(key), _ctx.n(key + "--" + _ctx.size)))
     }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(nums, num => {
       return _openBlock(), _createElementBlock("div", {
         key: num + key,
         style: _normalizeStyle({
           backgroundColor: _ctx.color
         }),
-        class: _normalizeClass("var-loading__" + key + "-item var-loading__" + key + "-item-" + _ctx.size)
+        class: _normalizeClass(_ctx.classes(_ctx.n(key + "-item"), _ctx.n(key + "-item--" + _ctx.size)))
       }, null, 6
       /* CLASS, STYLE */
       );
@@ -70,7 +74,7 @@ export function render(_ctx, _cache) {
   /* KEYED_FRAGMENT */
   )), _ctx.$slots.description || _ctx.description ? (_openBlock(), _createElementBlock("div", {
     key: 1,
-    class: _normalizeClass(["var-loading__description", "var-loading__description--" + _ctx.size]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('description'), _ctx.n("description--" + _ctx.size))),
     style: _normalizeStyle({
       color: _ctx.color
     })
@@ -80,7 +84,9 @@ export function render(_ctx, _cache) {
   /* CLASS, STYLE */
   )) : _createCommentVNode("v-if", true)], 2
   /* CLASS */
-  )) : _createCommentVNode("v-if", true)]);
+  )) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -107,10 +113,12 @@ export default defineComponent({
       return props.radius ? toNumber(props.radius) : sizeDict[props.size];
     });
     var isShow = computed(() => {
-      if (!(slots.default != null && slots.default())) return true;
+      if (!call(slots.default)) return true;
       return props.loading;
     });
     return {
+      n,
+      classes,
       loadingTypeDict,
       getRadius,
       isShow

package/es/loading/loading.css

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