@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

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

package/lib/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/lib/menu/Menu.js

@@ -27,6 +27,11 @@ function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(s);
 }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('menu');
+
 var _default = (0, _vue.defineComponent)({
   name: 'VarMenu',
   props: _props.props,
@@ -57,8 +62,6 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var handleMenuClose = () => {
-      var _props$onUpdateShow;
-
       if (clickSelf) {
         clickSelf = false;
         return;
@@ -68,7 +71,7 @@ var _default = (0, _vue.defineComponent)({
         return;
       }
 
-      (_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, false);
+      (0, _components.call)(props['onUpdate:show'], false);
     }; // expose
 
 
@@ -87,18 +90,18 @@ var _default = (0, _vue.defineComponent)({
     });
 
     var renderTransition = () => (0, _vue.createVNode)(_vue.Transition, {
-      "name": "var-menu",
+      "name": n(),
       "onAfterEnter": props.onOpened,
       "onAfterLeave": props.onClosed
     }, {
       default: () => [(0, _vue.withDirectives)((0, _vue.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()]), [[_vue.vShow, props.show]])]
+      }, [(0, _components.call)(slots.menu)]), [[_vue.vShow, props.show]])]
     });
 
     (0, _vue.watch)(() => props.alignment, resize);
@@ -114,7 +117,7 @@ var _default = (0, _vue.defineComponent)({
           resize();
         }
 
-        newValue ? onOpen == null ? void 0 : onOpen() : onClose == null ? void 0 : onClose();
+        newValue ? (0, _components.call)(onOpen) : (0, _components.call)(onClose);
       });
 
       return function (_x) {
@@ -142,10 +145,10 @@ var _default = (0, _vue.defineComponent)({
       var _slot;
 
       return (0, _vue.createVNode)("div", {
-        "class": "var-menu",
+        "class": n(),
         "ref": host,
         "onClick": handleClick
-      }, [slots.default == null ? void 0 : slots.default(), to.value ? (0, _vue.createVNode)(_vue.Teleport, {
+      }, [(0, _components.call)(slots.default), to.value ? (0, _vue.createVNode)(_vue.Teleport, {
         "to": to.value,
         "disabled": disabled.value
       }, _isSlot(_slot = renderTransition()) ? _slot : {

package/lib/option/Option.js

@@ -12,15 +12,16 @@ var _vue = require("vue");
 
 var _provide = require("./provide");
 
+var _components = require("../utils/components");
+
 var _props = require("./props");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
-
-var _hoisted_1 = {
-  class: "var-option__text var--ellipsis"
-};
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('option');
 
 function render(_ctx, _cache) {
   var _component_var_checkbox = (0, _vue.resolveComponent)("var-checkbox");
@@ -28,7 +29,7 @@ function render(_ctx, _cache) {
   var _directive_ripple = (0, _vue.resolveDirective)("ripple");
 
   return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(["var-option var--box", [_ctx.optionSelected ? 'var-option--selected-color' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box', [_ctx.optionSelected, _ctx.n('--selected-color')])),
     style: (0, _vue.normalizeStyle)({
       width: _ctx.wrapWidth,
       color: _ctx.optionSelected ? _ctx.focusColor : undefined
@@ -37,7 +38,7 @@ function render(_ctx, _cache) {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-option__cover", [_ctx.optionSelected ? 'var-option--selected-background' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('cover'), [_ctx.optionSelected, _ctx.n('--selected-background')])),
     style: (0, _vue.normalizeStyle)({
       background: _ctx.optionSelected ? _ctx.focusColor : undefined
     })
@@ -53,9 +54,13 @@ function render(_ctx, _cache) {
     onChange: _ctx.handleSelect
   }, null, 8
   /* PROPS */
-  , ["checked-color", "modelValue", "onChange"])) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.label), 1
+  , ["checked-color", "modelValue", "onChange"])) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('text'), 'var--ellipsis'))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.label), 1
   /* TEXT */
-  )])])], 6
+  )])], 2
+  /* CLASS */
+  )], 6
   /* CLASS, STYLE */
   )), [[_directive_ripple]]);
 }
@@ -113,6 +118,8 @@ var _default = (0, _vue.defineComponent)({
     });
     bindSelect(optionProvider);
     return {
+      n,
+      classes,
       optionSelected,
       wrapWidth,
       multiple,

package/lib/pagination/Pagination.js

@@ -22,18 +22,18 @@ var _shared = require("../utils/shared");
 
 var _locale = require("../locale");
 
+var _components = require("../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('pagination');
+
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
-var _hoisted_1 = {
-  class: "var-pagination"
-};
-var _hoisted_2 = ["item-mode", "onClick"];
-var _hoisted_3 = {
-  key: 4,
-  class: "var-pagination__total"
-};
+var _hoisted_1 = ["item-mode", "onClick"];
 
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
@@ -46,12 +46,10 @@ function render(_ctx, _cache) {
 
   var _directive_ripple = (0, _vue.resolveDirective)("ripple");
 
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("ul", _hoisted_1, [(0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
-    class: (0, _vue.normalizeClass)(["var-pagination__item var-pagination__prev", {
-      'var-pagination__item-disabled': _ctx.current <= 1 || _ctx.disabled,
-      'var-pagination__item-hover': _ctx.simple,
-      'var-elevation--2': !_ctx.simple
-    }]),
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("ul", {
+    class: (0, _vue.normalizeClass)(_ctx.n())
+  }, [(0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('item'), _ctx.n('prev'), [_ctx.current <= 1 || _ctx.disabled, _ctx.n('item--disabled')], [_ctx.simple, _ctx.n('item--hover'), 'var-elevation--2'])),
     onClick: _cache[0] || (_cache[0] = $event => _ctx.clickItem('prev'))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "prev", {}, () => [(0, _vue.createVNode)(_component_var_icon, {
     name: "chevron-left"
@@ -61,9 +59,7 @@ function render(_ctx, _cache) {
     disabled: _ctx.current <= 1 || _ctx.disabled
   }]]), _ctx.simple ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
     key: 0,
-    class: (0, _vue.normalizeClass)(["var-pagination__simple", {
-      'var-pagination__item-disabled': _ctx.disabled
-    }])
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('simple'), [_ctx.disabled, _ctx.n('item--disabled')]))
   }, [(0, _vue.createVNode)(_component_var_input, {
     modelValue: _ctx.simpleValue,
     "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.simpleValue = $event),
@@ -83,28 +79,19 @@ function render(_ctx, _cache) {
     return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
       key: _ctx.toNumber(item) + index,
       "item-mode": _ctx.getMode(item, index),
-      class: (0, _vue.normalizeClass)(["var-pagination__item var-elevation--2", {
-        'var-pagination__item-active': item === _ctx.current && !_ctx.disabled,
-        'var-pagination__item-hide': _ctx.isHideEllipsis(item, index),
-        'var-pagination__item-disabled': _ctx.disabled,
-        'var-pagination__item-disabled-active': item === _ctx.current && _ctx.disabled
-      }]),
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('item'), 'var-elevation--2', [item === _ctx.current && !_ctx.disabled, _ctx.n('item--active')], [_ctx.isHideEllipsis(item, index), _ctx.n('item--hide')], [_ctx.disabled, _ctx.n('item--disabled')], [item === _ctx.current && _ctx.disabled, _ctx.n('item--disabled--active')])),
       onClick: $event => _ctx.clickItem(item, index)
     }, [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(item), 1
     /* TEXT */
     )], 10
     /* CLASS, PROPS */
-    , _hoisted_2)), [[_directive_ripple, {
+    , _hoisted_1)), [[_directive_ripple, {
       disabled: _ctx.disabled
     }]]);
   }), 128
   /* KEYED_FRAGMENT */
   )), (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
-    class: (0, _vue.normalizeClass)(["var-pagination__item var-pagination__next", {
-      'var-pagination__item-disabled': _ctx.current >= _ctx.pageCount || _ctx.disabled,
-      'var-pagination__item-hover': _ctx.simple,
-      'var-elevation--2': !_ctx.simple
-    }]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('item'), _ctx.n('next'), [_ctx.current >= _ctx.pageCount || _ctx.disabled, _ctx.n('item--disabled')], [_ctx.simple, _ctx.n('item--hover'), 'var-elevation--2'])),
     onClick: _cache[4] || (_cache[4] = $event => _ctx.clickItem('next'))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "next", {}, () => [(0, _vue.createVNode)(_component_var_icon, {
     name: "chevron-right"
@@ -114,9 +101,7 @@ function render(_ctx, _cache) {
     disabled: _ctx.current >= _ctx.pageCount || _ctx.disabled
   }]]), _ctx.showSizeChanger ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
     key: 2,
-    class: (0, _vue.normalizeClass)(["var-pagination__size", {
-      'var-pagination__item-disabled': _ctx.disabled
-    }])
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('size'), [_ctx.disabled, _ctx.n('item--disabled')]))
   }, [(0, _vue.createVNode)(_component_var_menu, {
     show: _ctx.menuVisible,
     "onUpdate:show": _cache[6] || (_cache[6] = $event => _ctx.menuVisible = $event),
@@ -124,9 +109,7 @@ function render(_ctx, _cache) {
   }, {
     menu: (0, _vue.withCtx)(() => [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.sizeOption, (option, index) => {
       return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_cell, {
-        class: (0, _vue.normalizeClass)(["var-pagination__list", {
-          'var-pagination__list-active': _ctx.size === option
-        }]),
+        class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('list'), [_ctx.size === option, _ctx.n('list--active')])),
         key: index,
         onClick: $event => _ctx.clickSize(option)
       }, {
@@ -143,7 +126,7 @@ function render(_ctx, _cache) {
     /* KEYED_FRAGMENT */
     ))]),
     default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", {
-      class: "var-pagination__size-open",
+      class: (0, _vue.normalizeClass)(_ctx.n('size--open')),
       style: {
         "display": "flex"
       },
@@ -153,10 +136,14 @@ function render(_ctx, _cache) {
     }, [(0, _vue.createElementVNode)("span", null, (0, _vue.toDisplayString)(_ctx.size) + (0, _vue.toDisplayString)(_ctx.pack.paginationItem) + " / " + (0, _vue.toDisplayString)(_ctx.pack.paginationPage), 1
     /* TEXT */
     ), (0, _vue.createVNode)(_component_var_icon, {
-      class: "var-pagination__size-open-icon",
+      class: (0, _vue.normalizeClass)(_ctx.n('size--open-icon')),
       "var-pagination-cover": "",
       name: "menu-down"
-    })])]),
+    }, null, 8
+    /* PROPS */
+    , ["class"])], 2
+    /* CLASS */
+    )]),
     _: 1
     /* STABLE */
 
@@ -166,9 +153,7 @@ function render(_ctx, _cache) {
   /* CLASS */
   )) : (0, _vue.createCommentVNode)("v-if", true), _ctx.showQuickJumper && !_ctx.simple ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
     key: 3,
-    class: (0, _vue.normalizeClass)(["var-pagination__quickly", {
-      'var-pagination__item-disabled': _ctx.disabled
-    }])
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('quickly'), [_ctx.disabled, 'item--disabled']))
   }, [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.pack.paginationJump) + " ", 1
   /* TEXT */
   ), (0, _vue.createVNode)(_component_var_input, {
@@ -182,9 +167,14 @@ function render(_ctx, _cache) {
   /* PROPS */
   , ["modelValue", "disabled"])], 2
   /* CLASS */
-  )) : (0, _vue.createCommentVNode)("v-if", true), _ctx.totalText ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", _hoisted_3, (0, _vue.toDisplayString)(_ctx.totalText), 1
-  /* TEXT */
-  )) : (0, _vue.createCommentVNode)("v-if", true)]);
+  )) : (0, _vue.createCommentVNode)("v-if", true), _ctx.totalText ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
+    key: 4,
+    class: (0, _vue.normalizeClass)(_ctx.n('total'))
+  }, (0, _vue.toDisplayString)(_ctx.totalText), 3
+  /* TEXT, CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -362,6 +352,8 @@ var _default = (0, _vue.defineComponent)({
       immediate: true
     });
     return {
+      n,
+      classes,
       pack: _locale.pack,
       current,
       menuVisible,

package/lib/pagination/pagination.css

@@ -1 +1 @@
-:root { --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: #edf5ff; --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #edf5ff; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-simple-padding: 0 0 2px 0; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px;}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; margin: 0; font-size: var(--pagination-font-size); padding: 0;}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item-active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item-disabled-active { background: var(--pagination-bg-disabled-color);}.var-pagination__item-hide { display: none;}.var-pagination__item-disabled { cursor: default !important; color: var(--pagination-disabled-color);}.var-pagination__item-disabled:hover { background-color: unset;}.var-pagination__item-hover:hover { background: inherit;}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin);}.var-pagination__size-open { display: flex; align-items: center; cursor: pointer;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer; transition: all 0.25s;}.var-pagination__list:hover { color: var(--pagination-list-active-color); background-color: var(--pagination-hover-bg-color);}.var-pagination__list-active { background-color: var(--pagination-list-active-bg-color) !important; color: var(--pagination-list-active-color);}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-input__wrap,.var-pagination__simple [var-pagination-cover] .var-input__wrap { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size-open-icon[var-pagination-cover] { font-size: inherit;}.var-pagination--simple-padding { padding: var(--pagination-simple-padding);}
+:root { --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: #edf5ff; --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #edf5ff; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-simple-padding: 0 0 2px 0; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px;}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; margin: 0; font-size: var(--pagination-font-size); padding: 0;}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--disabled--active { background: var(--pagination-bg-disabled-color);}.var-pagination__item--hide { display: none;}.var-pagination__item--disabled { cursor: default !important; color: var(--pagination-disabled-color);}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--hover:hover { background: inherit;}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin);}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer; transition: all 0.25s;}.var-pagination__list:hover { color: var(--pagination-list-active-color); background-color: var(--pagination-hover-bg-color);}.var-pagination__list--active { background-color: var(--pagination-list-active-bg-color) !important; color: var(--pagination-list-active-color);}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-input__wrap,.var-pagination__simple [var-pagination-cover] .var-input__wrap { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}.var-pagination--simple-padding { padding: var(--pagination-simple-padding);}

package/lib/pagination/pagination.less

@@ -73,20 +73,20 @@
       background-color: var(--pagination-hover-bg-color);
     }
 
-    &-active {
+    &--active {
       color: var(--pagination-active-color);
       background-color: var(--pagination-active-bg-color) !important;
     }
 
-    &-disabled-active {
+    &--disabled--active {
       background: var(--pagination-bg-disabled-color);
     }
 
-    &-hide {
+    &--hide {
       display: none;
     }
 
-    &-disabled {
+    &--disabled {
       cursor: default !important;
       color: var(--pagination-disabled-color);
 
@@ -95,7 +95,7 @@
       }
     }
 
-    &-hover {
+    &--hover {
       &:hover {
         background: inherit;
       }
@@ -119,7 +119,7 @@
     line-height: var(--pagination-size-line-height);
     margin: var(--pagination-item-margin);
 
-    &-open {
+    &--open {
       display: flex;
       align-items: center;
       cursor: pointer;
@@ -136,7 +136,7 @@
       background-color: var(--pagination-hover-bg-color);
     }
 
-    &-active {
+    &--active {
       background-color: var(--pagination-list-active-bg-color) !important;
       color: var(--pagination-list-active-color);
     }
@@ -168,7 +168,7 @@
     }
   }
 
-  &__size-open-icon[var-pagination-cover] {
+  &__size--open-icon[var-pagination-cover] {
     font-size: inherit;
   }