@varlet/ui 1.26.9 → 1.27.0-alpha.1649242923701

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; }}

package/es/loading/loading.less

@@ -124,22 +124,22 @@
     align-items: center;
     justify-content: center;
 
-    &-large {
+    &--large {
       width: @loading-large-width;
       height: @loading-large-height;
     }
 
-    &-normal {
+    &--normal {
       width: @loading-normal-width;
       height: @loading-normal-height;
     }
 
-    &-small {
+    &--small {
       width: @loading-small-width;
       height: @loading-small-height;
     }
 
-    &-mini {
+    &--mini {
       width: @loading-mini-width;
       height: @loading-mini-height;
     }
@@ -171,22 +171,22 @@
       }
     }
 
-    &-item-large {
+    &-item--large {
       width: @loading-wave-size-item-width;
       margin-left: @loading-wave-size-item-margin;
     }
 
-    &-item-normal {
+    &-item--normal {
       width: @loading-wave-size-item-width - 1;
       margin-left: @loading-wave-size-item-margin - 1;
     }
 
-    &-item-small {
+    &-item--small {
       width: @loading-wave-size-item-width - 2;
       margin-left: @loading-wave-size-item-margin - 2;
     }
 
-    &-item-mini {
+    &-item--mini {
       width: @loading-wave-size-item-width - 3;
       margin-left: @loading-wave-size-item-margin - 3;
     }
@@ -211,22 +211,22 @@
     display: flex;
     align-items: center;
 
-    &-large {
+    &--large {
       width: @loading-large-width;
       height: @loading-large-height;
     }
 
-    &-normal {
+    &--normal {
       width: @loading-normal-width;
       height: @loading-normal-height;
     }
 
-    &-small {
+    &--small {
       width: @loading-small-width;
       height: @loading-small-height;
     }
 
-    &-mini {
+    &--mini {
       width: @loading-mini-width;
       height: @loading-mini-height;
     }
@@ -254,25 +254,25 @@
       }
     }
 
-    &-item-large {
+    &-item--large {
       height: @loading-cube-size-item-height;
       width: @loading-cube-size-item-width;
       margin-left: @loading-cube-size-item-margin;
     }
 
-    &-item-normal {
+    &-item--normal {
       height: @loading-cube-size-item-height - 2;
       width: @loading-cube-size-item-width - 2;
       margin-left: @loading-cube-size-item-margin - 1;
     }
 
-    &-item-small {
+    &-item--small {
       height: @loading-cube-size-item-height - 4;
       width: @loading-cube-size-item-width - 4;
       margin-left: @loading-cube-size-item-margin - 2;
     }
 
-    &-item-mini {
+    &-item--mini {
       height: @loading-cube-size-item-height - 6;
       width: @loading-cube-size-item-width - 6;
       margin-left: @loading-cube-size-item-margin - 3;
@@ -299,22 +299,22 @@
     justify-content: center;
     align-items: center;
 
-    &-large {
+    &--large {
       width: @loading-large-width;
       height: @loading-large-height;
     }
 
-    &-normal {
+    &--normal {
       width: @loading-normal-width;
       height: @loading-normal-height;
     }
 
-    &-small {
+    &--small {
       width: @loading-small-width;
       height: @loading-small-height;
     }
 
-    &-mini {
+    &--mini {
       width: @loading-mini-width;
       height: @loading-mini-height;
     }
@@ -355,22 +355,22 @@
       }
     }
 
-    &-item-large {
+    &-item--large {
       height: @loading-rect-size-item-height;
       width: @loading-rect-size-item-width;
     }
 
-    &-item-normal {
+    &-item--normal {
       height: @loading-rect-size-item-height * 0.9;
       width: @loading-rect-size-item-width * 0.8;
     }
 
-    &-item-small {
+    &-item--small {
       height: @loading-rect-size-item-height * 0.8;
       width: @loading-rect-size-item-width * 0.6;
     }
 
-    &-item-mini {
+    &-item--mini {
       height: @loading-rect-size-item-height * 0.7;
       width: @loading-rect-size-item-width * 0.4;
     }
@@ -403,22 +403,22 @@
     align-items: center;
     flex-flow: nowrap;
 
-    &-large {
+    &--large {
       width: @loading-large-width;
       height: @loading-large-height;
     }
 
-    &-normal {
+    &--normal {
       width: @loading-normal-width;
       height: @loading-normal-height;
     }
 
-    &-small {
+    &--small {
       width: @loading-small-width;
       height: @loading-small-height;
     }
 
-    &-mini {
+    &--mini {
       width: @loading-mini-width;
       height: @loading-mini-height;
     }
@@ -440,22 +440,22 @@
       }
     }
 
-    &-item-large {
+    &-item--large {
       height: @loading-disappear-size-item-height;
       width: @loading-disappear-size-item-width;
     }
 
-    &-item-normal {
+    &-item--normal {
       height: @loading-disappear-size-item-height * 0.8;
       width: @loading-disappear-size-item-width * 0.8;
     }
 
-    &-item-small {
+    &-item--small {
       height: @loading-disappear-size-item-height * 0.6;
       width: @loading-disappear-size-item-width * 0.6;
     }
 
-    &-item-mini {
+    &-item--mini {
       height: @loading-disappear-size-item-height * 0.4;
       width: @loading-disappear-size-item-width * 0.4;
     }

package/es/menu/Menu.js

@@ -8,7 +8,7 @@ import { defineComponent, ref, computed, watch, onMounted, onUnmounted, Transiti
 import { props } from './props';
 import { getLeft, getTop, toSizeUnit } from '../utils/elements';
 import { useZIndex } from '../context/zIndex';
-import { exposeApis, useTeleport } from '../utils/components';
+import { call, createNamespace, exposeApis, useTeleport } from '../utils/components';
 
 
 
@@ -17,6 +17,10 @@ function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
 }
 
+var {
+  n,
+  classes
+} = createNamespace('menu');
 export default defineComponent({
   name: 'VarMenu',
   props,
@@ -47,8 +51,6 @@ export default defineComponent({
     };
 
     var handleMenuClose = () => {
-      var _props$onUpdateShow;
-
       if (clickSelf) {
         clickSelf = false;
         return;
@@ -58,7 +60,7 @@ export default defineComponent({
         return;
       }
 
-      (_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, false);
+      call(props['onUpdate:show'], false);
     }; // expose
 
 
@@ -77,18 +79,18 @@ export default defineComponent({
     });
 
     var renderTransition = () => _createVNode(Transition, {
-      "name": "var-menu",
+      "name": n(),
       "onAfterEnter": props.onOpened,
       "onAfterLeave": props.onClosed
     }, {
       default: () => [_withDirectives(_createVNode("div", {
-        "class": "var-menu__menu var-elevation--3",
+        "class": classes(n('menu'), 'var-elevation--3'),
         "ref": menu,
         "style": transitionStyle.value,
         "onClick": event => {
           event.stopPropagation();
         }
-      }, [slots.menu == null ? void 0 : slots.menu()]), [[_vShow, props.show]])]
+      }, [call(slots.menu)]), [[_vShow, props.show]])]
     });
 
     watch(() => props.alignment, resize);
@@ -104,7 +106,7 @@ export default defineComponent({
           resize();
         }
 
-        newValue ? onOpen == null ? void 0 : onOpen() : onClose == null ? void 0 : onClose();
+        newValue ? call(onOpen) : call(onClose);
       });
 
       return function (_x) {
@@ -132,10 +134,10 @@ export default defineComponent({
       var _slot;
 
       return _createVNode("div", {
-        "class": "var-menu",
+        "class": n(),
         "ref": host,
         "onClick": handleClick
-      }, [slots.default == null ? void 0 : slots.default(), to.value ? _createVNode(Teleport, {
+      }, [call(slots.default), to.value ? _createVNode(Teleport, {
         "to": to.value,
         "disabled": disabled.value
       }, _isSlot(_slot = renderTransition()) ? _slot : {

package/es/option/Option.js

@@ -2,21 +2,20 @@ import VarCheckbox from '../checkbox';
 import Ripple from '../ripple';
 import { defineComponent, computed, ref, watch } from 'vue';
 import { useSelect } from './provide';
+import { createNamespace } from '../utils/components';
 import { props } from './props';
-import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveDirective as _resolveDirective, 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-option__text var--ellipsis"
-};
+var {
+  n,
+  classes
+} = createNamespace('option');
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_checkbox = _resolveComponent("var-checkbox");
 
   var _directive_ripple = _resolveDirective("ripple");
 
   return _withDirectives((_openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(["var-option var--box", [_ctx.optionSelected ? 'var-option--selected-color' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', [_ctx.optionSelected, _ctx.n('--selected-color')])),
     style: _normalizeStyle({
       width: _ctx.wrapWidth,
       color: _ctx.optionSelected ? _ctx.focusColor : undefined
@@ -25,7 +24,7 @@ export function render(_ctx, _cache) {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, [_createElementVNode("div", {
-    class: _normalizeClass(["var-option__cover", [_ctx.optionSelected ? 'var-option--selected-background' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('cover'), [_ctx.optionSelected, _ctx.n('--selected-background')])),
     style: _normalizeStyle({
       background: _ctx.optionSelected ? _ctx.focusColor : undefined
     })
@@ -41,9 +40,13 @@ export function render(_ctx, _cache) {
     onChange: _ctx.handleSelect
   }, null, 8
   /* PROPS */
-  , ["checked-color", "modelValue", "onChange"])) : _createCommentVNode("v-if", true), _createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.label), 1
+  , ["checked-color", "modelValue", "onChange"])) : _createCommentVNode("v-if", true), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('text'), 'var--ellipsis'))
+  }, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.label), 1
   /* TEXT */
-  )])])], 6
+  )])], 2
+  /* CLASS */
+  )], 6
   /* CLASS, STYLE */
   )), [[_directive_ripple]]);
 }
@@ -100,6 +103,8 @@ export default defineComponent({
     });
     bindSelect(optionProvider);
     return {
+      n,
+      classes,
       optionSelected,
       wrapWidth,
       multiple,