@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/lib/slider/slider.css

@@ -1 +1 @@
-:root { --slider-error-color: var(--color-danger); --slider-track-background: #bdbdbd; --slider-track-fill-background: var(--color-primary); --slider-thumb-block-background: var(--color-primary); --slider-thumb-ripple-background: var(--color-primary); --slider-thumb-label-background: var(--color-primary); --slider-thumb-label-font-size: var(--font-size-sm);}.var-slider { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-slider-block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px;}.var-slider__disable { filter: opacity(0.6);}.var-slider__track { width: 100%; align-items: center; position: relative;}.var-slider__track-background { width: 100%; height: 2px; background: var(--slider-track-background);}.var-slider__track-fill { position: absolute; height: 100%; left: 0; top: 0; background-color: var(--slider-track-fill-background);}.var-slider__thumb { position: absolute;}.var-slider__thumb-block { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background-color: var(--slider-thumb-block-background);}.var-slider__thumb-ripple { position: absolute; width: 0; z-index: -1; height: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: var(--slider-thumb-ripple-background); transition: 0.3s var(--cubic-bezier);}.var-slider__thumb-ripple-active { width: 36px; height: 36px;}.var-slider__thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: #fff; border-radius: 50% 50% 0; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider__thumb-label span { transform: rotate(-45deg);}.var-slider__thumb-label-active { transform: translateY(-50%) translateX(-50%) rotate(45deg) scale(1);}.var-slider__error .var-slider__track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.5);}.var-slider__error .var-slider__track-fill { background-color: var(--slider-error-color) !important;}.var-slider__error .var-slider__thumb-block { background-color: var(--slider-error-color) !important;}.var-slider__error .var-slider__thumb-ripple { background-color: var(--slider-error-color) !important;}.var-slider__error .var-slider__thumb-label { background-color: var(--slider-error-color) !important;}.var-slider__form[var-slider-cover] { margin: 0;}
+:root { --slider-error-color: var(--color-danger); --slider-track-background: #bdbdbd; --slider-track-fill-background: var(--color-primary); --slider-thumb-block-background: var(--color-primary); --slider-thumb-ripple-background: var(--color-primary); --slider-thumb-label-background: var(--color-primary); --slider-thumb-label-font-size: var(--font-size-sm);}.var-slider { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-slider__block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px;}.var-slider--disabled { filter: opacity(0.6);}.var-slider__track { width: 100%; align-items: center; position: relative;}.var-slider__track-background { width: 100%; height: 2px; background: var(--slider-track-background);}.var-slider__track-fill { position: absolute; height: 100%; left: 0; top: 0; background-color: var(--slider-track-fill-background);}.var-slider__thumb { position: absolute;}.var-slider__thumb-block { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background-color: var(--slider-thumb-block-background);}.var-slider__thumb-ripple { position: absolute; width: 0; z-index: -1; height: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: var(--slider-thumb-ripple-background); transition: 0.3s var(--cubic-bezier);}.var-slider__thumb-ripple--active { width: 36px; height: 36px;}.var-slider__thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: #fff; border-radius: 50% 50% 0; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider__thumb-label span { transform: rotate(-45deg);}.var-slider__thumb-label--active { transform: translateY(-50%) translateX(-50%) rotate(45deg) scale(1);}.var-slider--error .var-slider__track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.5);}.var-slider--error .var-slider__track-fill { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-block { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-ripple { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-label { background-color: var(--slider-error-color) !important;}.var-slider__form[var-slider-cover] { margin: 0;}

package/lib/slider/slider.less

@@ -19,7 +19,7 @@
 .var-slider {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-  &-block {
+  &__block {
     display: flex;
     align-items: center;
     position: relative;
@@ -29,7 +29,7 @@
     margin: 0 6px;
   }
 
-  &__disable {
+  &--disabled {
     filter: opacity(0.6);
   }
 
@@ -78,7 +78,7 @@
       background: var(--slider-thumb-ripple-background);
       transition: 0.3s var(--cubic-bezier);
 
-      &-active {
+      &--active {
         width: 36px;
         height: 36px;
       }
@@ -107,13 +107,13 @@
         transform: rotate(-45deg);
       }
 
-      &-active {
+      &--active {
         transform: translateY(-50%) translateX(-50%) rotate(45deg) scale(1);
       }
     }
   }
 
-  &__error {
+  &--error {
     .var-slider__track {
       &-background {
         background-color: var(--slider-error-color) !important;

package/lib/snackbar/Snackbar.js

@@ -14,6 +14,10 @@ var _props = require("./props");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n
+} = (0, _components.createNamespace)('snackbar');
+
 function render(_ctx, _cache) {
   var _component_var_snackbar_core = (0, _vue.resolveComponent)("var-snackbar-core");
 
@@ -21,12 +25,12 @@ function render(_ctx, _cache) {
     to: _ctx.teleport,
     disabled: _ctx.disabled
   }, [(0, _vue.createVNode)(_vue.Transition, {
-    name: "var-snackbar-fade",
+    name: _ctx.n() + "-fade",
     onAfterEnter: _ctx.onOpened,
     onAfterLeave: _ctx.onClosed
   }, {
     default: (0, _vue.withCtx)(() => [(0, _vue.createVNode)(_component_var_snackbar_core, (0, _vue.mergeProps)(_ctx.$props, {
-      class: "var-snackbar-transition"
+      class: _ctx.n('transition')
     }), {
       action: (0, _vue.withCtx)(() => [(0, _vue.renderSlot)(_ctx.$slots, "action")]),
       default: (0, _vue.withCtx)(() => [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.content), 1
@@ -37,13 +41,13 @@ function render(_ctx, _cache) {
 
     }, 16
     /* FULL_PROPS */
-    )]),
+    , ["class"])]),
     _: 3
     /* FORWARDED */
 
   }, 8
   /* PROPS */
-  , ["onAfterEnter", "onAfterLeave"])], 8
+  , ["name", "onAfterEnter", "onAfterLeave"])], 8
   /* PROPS */
   , ["to", "disabled"]);
 }
@@ -61,6 +65,7 @@ var _default = (0, _vue.defineComponent)({
       disabled
     } = (0, _components.useTeleport)();
     return {
+      n,
       disabled
     };
   }

package/lib/snackbar/core.js

@@ -18,8 +18,14 @@ var _lock = require("../context/lock");
 
 var _index = require("./index");
 
+var _components = require("../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('snackbar');
 var ICON_TYPE_DICT = {
   success: 'checkbox-marked-circle',
   warning: 'warning',
@@ -28,35 +34,31 @@ var ICON_TYPE_DICT = {
   loading: ''
 };
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
-
-var _hoisted_1 = {
-  class: "var-snackbar__action"
-};
-
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
 
   var _component_var_loading = (0, _vue.resolveComponent)("var-loading");
 
   return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: "var-snackbar",
+    class: (0, _vue.normalizeClass)(_ctx.n()),
     style: (0, _vue.normalizeStyle)({
       pointerEvents: _ctx.isForbidClick ? 'auto' : 'none',
       zIndex: _ctx.zIndex
     })
   }, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(_ctx.snackbarClass),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('wrapper'), _ctx.n("wrapper-" + _ctx.position), 'var-elevation--4', [_ctx.vertical, _ctx.n('vertical')], [_ctx.type && _ctx.SNACKBAR_TYPE.includes(_ctx.type), _ctx.n("wrapper-" + _ctx.type)])),
     style: (0, _vue.normalizeStyle)({
       zIndex: _ctx.zIndex
     })
   }, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-snackbar__content", [_ctx.contentClass]])
+    class: (0, _vue.normalizeClass)([_ctx.n('content'), _ctx.contentClass])
   }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.content), 1
   /* TEXT */
   )])], 2
   /* CLASS */
-  ), (0, _vue.createElementVNode)("div", _hoisted_1, [_ctx.iconName ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
+  ), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('action'))
+  }, [_ctx.iconName ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
     key: 0,
     name: _ctx.iconName
   }, null, 8
@@ -67,10 +69,12 @@ function render(_ctx, _cache) {
     size: _ctx.loadingSize
   }, null, 8
   /* PROPS */
-  , ["type", "size"])) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.renderSlot)(_ctx.$slots, "action")])], 6
+  , ["type", "size"])) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.renderSlot)(_ctx.$slots, "action")], 2
+  /* CLASS */
+  )], 6
+  /* CLASS, STYLE */
+  )], 6
   /* CLASS, STYLE */
-  )], 4
-  /* STYLE */
   )), [[_vue.vShow, _ctx.show]]);
 }
 
@@ -89,17 +93,6 @@ var _default = (0, _vue.defineComponent)({
       zIndex
     } = (0, _zIndex.useZIndex)(() => props.show, 1);
     (0, _lock.useLock)(props, 'show', 'lockScroll');
-    var snackbarClass = (0, _vue.computed)(() => {
-      var {
-        position,
-        vertical,
-        type
-      } = props;
-      var baseClass = "var-snackbar__wrapper var-snackbar__wrapper-" + position + " var-elevation--4";
-      var verticalClass = vertical ? ' var-snackbar__vertical' : '';
-      var typeClass = type && _index.SNACKBAR_TYPE.includes(type) ? " var-snackbar__wrapper-" + type : '';
-      return "" + baseClass + verticalClass + typeClass;
-    });
     var isForbidClick = (0, _vue.computed)(() => props.type === 'loading' || props.forbidClick);
     var iconName = (0, _vue.computed)(() => {
       if (!props.type) return '';
@@ -134,8 +127,10 @@ var _default = (0, _vue.defineComponent)({
       }
     });
     return {
+      SNACKBAR_TYPE: _index.SNACKBAR_TYPE,
+      n,
+      classes,
       zIndex,
-      snackbarClass,
       iconName,
       isForbidClick
     };

package/lib/snackbar/snackbar.css

@@ -1 +1 @@
-:root { --snackbar-width: 256px; --snackbar-color: rgba(255, 255, 255, 0.87); --snackbar-border-radius: 4px; --snackbar-background: #333; --snackbar-font-size: var(--font-size-md); --snackbar-margin: 6px 24px; --snackbar-border-color: currentColor; --snackbar-success-background: var(--color-success); --snackbar-info-background: var(--color-info); --snackbar-error-background: var(--color-danger); --snackbar-warning-background: var(--color-warning); --snackbar-content-padding: 14px 16px; --snackbar-action-margin: 0 16px 0 0;}.var-transition-group { position: fixed; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;}.var-pointer-auto { pointer-events: auto;}.var-snackbar { display: flex; justify-content: center; align-items: baseline; left: 0; right: 0; bottom: 0; transition: all 0.15s var(--cubic-bezier);}.var-snackbar__wrapper { width: var(--snackbar-width); display: flex; border-radius: var(--snackbar-border-radius); color: var(--snackbar-color); background: var(--snackbar-background); font-size: var(--snackbar-font-size); margin: var(--snackbar-margin); align-items: center; border-color: var(--snackbar-border-color); pointer-events: auto; transition: 0.3s var(--cubic-bezier);}.var-snackbar__wrapper-success { background: var(--snackbar-success-background);}.var-snackbar__wrapper-info { background: var(--snackbar-info-background);}.var-snackbar__wrapper-warning { background: var(--snackbar-warning-background);}.var-snackbar__wrapper-error { background: var(--snackbar-error-background);}.var-snackbar__content { flex-grow: 1; padding: var(--snackbar-content-padding);}.var-snackbar__action { margin: var(--snackbar-action-margin); display: flex;}.var-snackbar__vertical { flex-direction: column; align-items: flex-start;}.var-snackbar__vertical .var-snackbar__action { align-self: flex-end; margin-bottom: 8px;}.var-snackbar-fade-leave-active { position: absolute;}.var-snackbar-fade-enter-from,.var-snackbar-fade-leave-to { opacity: 0; transform: translateY(-30px);}.var-snackbar-transition { top: 0; position: fixed;}.var-snackbar-transition .var-snackbar__wrapper { position: absolute;}.var-snackbar-transition .var-snackbar__wrapper-top { top: 5%;}.var-snackbar-transition .var-snackbar__wrapper-center { top: 45%;}.var-snackbar-transition .var-snackbar__wrapper-bottom { bottom: 5%;}
+:root { --snackbar-width: 256px; --snackbar-color: rgba(255, 255, 255, 0.87); --snackbar-border-radius: 4px; --snackbar-background: #333; --snackbar-font-size: var(--font-size-md); --snackbar-margin: 6px 24px; --snackbar-border-color: currentColor; --snackbar-success-background: var(--color-success); --snackbar-info-background: var(--color-info); --snackbar-error-background: var(--color-danger); --snackbar-warning-background: var(--color-warning); --snackbar-content-padding: 14px 16px; --snackbar-action-margin: 0 16px 0 0;}.var-transition-group { position: fixed; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;}.var-pointer-auto { pointer-events: auto;}.var-snackbar { display: flex; justify-content: center; align-items: baseline; left: 0; right: 0; bottom: 0; transition: all 0.15s var(--cubic-bezier);}.var-snackbar__transition { top: 0; position: fixed;}.var-snackbar__transition .var-snackbar__wrapper { position: absolute;}.var-snackbar__transition .var-snackbar__wrapper-top { top: 5%;}.var-snackbar__transition .var-snackbar__wrapper-center { top: 45%;}.var-snackbar__transition .var-snackbar__wrapper-bottom { bottom: 5%;}.var-snackbar__wrapper { width: var(--snackbar-width); display: flex; border-radius: var(--snackbar-border-radius); color: var(--snackbar-color); background: var(--snackbar-background); font-size: var(--snackbar-font-size); margin: var(--snackbar-margin); align-items: center; border-color: var(--snackbar-border-color); pointer-events: auto; transition: 0.3s var(--cubic-bezier);}.var-snackbar__wrapper-success { background: var(--snackbar-success-background);}.var-snackbar__wrapper-info { background: var(--snackbar-info-background);}.var-snackbar__wrapper-warning { background: var(--snackbar-warning-background);}.var-snackbar__wrapper-error { background: var(--snackbar-error-background);}.var-snackbar__content { flex-grow: 1; padding: var(--snackbar-content-padding);}.var-snackbar__action { margin: var(--snackbar-action-margin); display: flex;}.var-snackbar__vertical { flex-direction: column; align-items: flex-start;}.var-snackbar__vertical .var-snackbar__action { align-self: flex-end; margin-bottom: 8px;}.var-snackbar-fade-leave-active { position: absolute;}.var-snackbar-fade-enter-from,.var-snackbar-fade-leave-to { opacity: 0; transform: translateY(-30px);}

package/lib/snackbar/snackbar.less

@@ -41,95 +41,93 @@
   pointer-events: auto;
 }
 
-.var {
-  &-snackbar {
-    display: flex;
-    justify-content: center;
-    align-items: baseline;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    transition: all 0.15s var(--cubic-bezier);
-
-    &__wrapper {
-      width: var(--snackbar-width);
-      display: flex;
-      border-radius: var(--snackbar-border-radius);
-      color: var(--snackbar-color);
-      background: var(--snackbar-background);
-      font-size: var(--snackbar-font-size);
-      margin: var(--snackbar-margin);
-      align-items: center;
-      border-color: var(--snackbar-border-color);
-      pointer-events: auto;
-      transition: 0.3s var(--cubic-bezier);
-
-      &-success {
-        background: var(--snackbar-success-background);
-      }
+.var-snackbar {
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transition: all 0.15s var(--cubic-bezier);
+
+  &__transition {
+    top: 0;
+    position: fixed;
+
+    .var-snackbar__wrapper {
+      position: absolute;
 
-      &-info {
-        background: var(--snackbar-info-background);
+      &-top {
+        top: 5%;
       }
 
-      &-warning {
-        background: var(--snackbar-warning-background);
+      &-center {
+        top: 45%;
       }
 
-      &-error {
-        background: var(--snackbar-error-background);
+      &-bottom {
+        bottom: 5%;
       }
     }
+  }
 
-    &__content {
-      flex-grow: 1;
-      padding: var(--snackbar-content-padding);
+  &__wrapper {
+    width: var(--snackbar-width);
+    display: flex;
+    border-radius: var(--snackbar-border-radius);
+    color: var(--snackbar-color);
+    background: var(--snackbar-background);
+    font-size: var(--snackbar-font-size);
+    margin: var(--snackbar-margin);
+    align-items: center;
+    border-color: var(--snackbar-border-color);
+    pointer-events: auto;
+    transition: 0.3s var(--cubic-bezier);
+
+    &-success {
+      background: var(--snackbar-success-background);
     }
 
-    &__action {
-      margin: var(--snackbar-action-margin);
-      display: flex;
+    &-info {
+      background: var(--snackbar-info-background);
     }
 
-    &__vertical {
-      flex-direction: column;
-      align-items: flex-start;
-
-      .var-snackbar__action {
-        align-self: flex-end;
-        margin-bottom: 8px;
-      }
+    &-warning {
+      background: var(--snackbar-warning-background);
     }
 
-    &-fade-leave-active {
-      position: absolute;
+    &-error {
+      background: var(--snackbar-error-background);
     }
+  }
 
-    &-fade-enter-from,
-    &-fade-leave-to {
-      opacity: 0;
-      transform: translateY(-30px);
-    }
+  &__content {
+    flex-grow: 1;
+    padding: var(--snackbar-content-padding);
   }
 
-  &-snackbar-transition {
-    top: 0;
-    position: fixed;
+  &__action {
+    margin: var(--snackbar-action-margin);
+    display: flex;
+  }
 
-    .var-snackbar__wrapper {
-      position: absolute;
+  &__vertical {
+    flex-direction: column;
+    align-items: flex-start;
 
-      &-top {
-        top: 5%;
-      }
+    .var-snackbar__action {
+      align-self: flex-end;
+      margin-bottom: 8px;
+    }
+  }
 
-      &-center {
-        top: 45%;
-      }
+  &-fade-leave-active {
+    position: absolute;
+  }
 
-      &-bottom {
-        bottom: 5%;
-      }
-    }
+  &-fade-enter-from,
+  &-fade-leave-to {
+    opacity: 0;
+    transform: translateY(-30px);
   }
 }

package/lib/space/Space.js

@@ -15,6 +15,12 @@ var _shared = require("../utils/shared");
 
 
 
+var _components = require("../utils/components");
+
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('space');
 var internalSizes = {
   mini: [4, 4],
   small: [6, 6],
@@ -36,7 +42,7 @@ var _default = (0, _vue.defineComponent)({
     };
 
     return () => {
-      var _slots$default;
+      var _call;
 
       var {
         inline,
@@ -46,7 +52,7 @@ var _default = (0, _vue.defineComponent)({
         direction,
         size
       } = props;
-      var children = (_slots$default = slots.default == null ? void 0 : slots.default()) != null ? _slots$default : [];
+      var children = (_call = (0, _components.call)(slots.default)) != null ? _call : [];
       var isInternalSize = (0, _props.internalSizeValidator)(size);
       var [y, x] = getSize(size, isInternalSize);
 
@@ -103,7 +109,7 @@ var _default = (0, _vue.defineComponent)({
         }, [child]);
       });
       return (0, _vue.createVNode)("div", {
-        "class": ['var-space', 'var--box', inline ? 'var-space--inline' : null],
+        "class": classes(n(), 'var--box', [inline, n('--inline')]),
         "style": {
           flexDirection: direction,
           justifyContent: justify,

package/lib/step/Step.js

@@ -12,30 +12,33 @@ var _provide = require("./provide");
 
 var _icon = _interopRequireDefault(require("../icon"));
 
+var _components = require("../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('step');
+
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
 var _hoisted_1 = {
-  class: "var-step"
-};
-var _hoisted_2 = {
   key: 3
 };
 
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
 
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)("var-step-" + _ctx.direction)
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n())
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n(_ctx.direction))
   }, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)("var-step-" + _ctx.direction + "__main"),
+    class: (0, _vue.normalizeClass)(_ctx.n(_ctx.direction + "-main")),
     ref: _ctx.getRef
   }, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)({
-      ["var-step-" + _ctx.direction + "__tag"]: true,
-      ["var-step-" + _ctx.direction + "__tag--active"]: _ctx.isActive || _ctx.isCurrent
-    }),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(_ctx.direction + "-tag"), [_ctx.isActive || _ctx.isCurrent, _ctx.n(_ctx.direction + "-tag--active")])),
     style: (0, _vue.normalizeStyle)({
       backgroundColor: _ctx.isActive || _ctx.isCurrent ? _ctx.activeColor : _ctx.inactiveColor
     }),
@@ -44,34 +47,31 @@ function render(_ctx, _cache) {
     })
   }, [_ctx.isActive ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
     key: 0,
-    class: "var-step__icon",
+    class: (0, _vue.normalizeClass)(_ctx.n('icon')),
     "var-step-cover": "",
     name: _ctx.activeIcon
   }, null, 8
   /* PROPS */
-  , ["name"])) : _ctx.isCurrent && _ctx.currentIcon ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
+  , ["class", "name"])) : _ctx.isCurrent && _ctx.currentIcon ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
     key: 1,
-    class: "var-step__icon",
+    class: (0, _vue.normalizeClass)(_ctx.n('icon')),
     "var-step-cover": "",
     name: _ctx.currentIcon
   }, null, 8
   /* PROPS */
-  , ["name"])) : _ctx.inactiveIcon ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
+  , ["class", "name"])) : _ctx.inactiveIcon ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
     key: 2,
-    class: "var-step__icon",
+    class: (0, _vue.normalizeClass)(_ctx.n('icon')),
     "var-step-cover": "",
     name: _ctx.inactiveIcon
   }, null, 8
   /* PROPS */
-  , ["name"])) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("span", _hoisted_2, (0, _vue.toDisplayString)(_ctx.index + 1), 1
+  , ["class", "name"])) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("span", _hoisted_1, (0, _vue.toDisplayString)(_ctx.index + 1), 1
   /* TEXT */
   ))], 6
   /* CLASS, STYLE */
   ), (0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)({
-      ["var-step-" + _ctx.direction + "__content"]: true,
-      ["var-step-" + _ctx.direction + "__content--active"]: _ctx.isActive || _ctx.isCurrent
-    }),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(_ctx.direction + "-content"), [_ctx.isActive || _ctx.isCurrent, _ctx.n(_ctx.direction + "-content--active")])),
     onClick: _cache[1] || (_cache[1] = function () {
       return _ctx.click && _ctx.click(...arguments);
     })
@@ -81,7 +81,7 @@ function render(_ctx, _cache) {
   /* CLASS */
   ), !_ctx.isLastChild ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
-    class: (0, _vue.normalizeClass)("var-step-" + _ctx.direction + "__line"),
+    class: (0, _vue.normalizeClass)(_ctx.n(_ctx.direction + "-line")),
     style: (0, _vue.normalizeStyle)({
       margin: _ctx.lineMargin
     })
@@ -89,7 +89,9 @@ function render(_ctx, _cache) {
   /* CLASS, STYLE */
   )) : (0, _vue.createCommentVNode)("v-if", true)], 2
   /* CLASS */
-  )]);
+  )], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -141,6 +143,8 @@ var _default = (0, _vue.defineComponent)({
       }
     });
     return {
+      n,
+      classes,
       main,
       index,
       isActive,

package/lib/step/step.css

@@ -1 +1 @@
-:root { --step-tag-size: 20px; --step-tag-background: #9e9e9e; --step-tag-font-size: var(--font-size-md); --step-tag-color: #fff; --step-tag-active-color: var(--color-primary); --step-tag-margin: 4px 0; --step-tag-icon-size: var(--font-size-lg); --step-content-font-size: var(--font-size-md); --step-content-color: rgba(0, 0, 0, 0.38); --step-content-active-color: #000; --step-line-background: #000; --step-vertical-min-height: 30px; --step-vertical-tag-margin: 0 4px; --step-vertical-line-height: calc(100% - 30px); --step-vertical-line-min-height: 20px;}.tag { width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step { display: flex; position: relative; flex: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-step-horizontal { display: flex; width: 100%;}.var-step-horizontal__main { display: flex; flex-direction: column; align-items: center; flex-basis: 100%;}.var-step-horizontal__tag { margin: var(--step-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step-horizontal__tag--active { background: var(--step-tag-active-color);}.var-step-horizontal__content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step-horizontal__content--active { color: var(--step-content-active-color);}.var-step-horizontal__line { position: relative; top: 14px; flex: 1; height: 1px; transform: scaleY(0.5); background: var(--step-line-background);}.var-step-vertical { width: 100%;}.var-step-vertical__main { display: flex; align-items: flex-start; min-height: var(--step-vertical-min-height);}.var-step-vertical__tag { margin: var(--step-vertical-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step-vertical__tag--active { background: var(--step-tag-active-color);}.var-step-vertical__content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step-vertical__content--active { color: var(--step-content-active-color);}.var-step-vertical__line { position: relative; height: var(--step-vertical-line-height); left: 14px; top: calc(-100% + 45px); min-height: var(--step-vertical-line-min-height); width: 1px; transform: scaleX(0.5); background: var(--step-line-background);}.var-step__icon[var-step-cover] { font-size: var(--step-tag-icon-size);}
+:root { --step-tag-size: 20px; --step-tag-background: #9e9e9e; --step-tag-font-size: var(--font-size-md); --step-tag-color: #fff; --step-tag-active-color: var(--color-primary); --step-tag-margin: 4px 0; --step-tag-icon-size: var(--font-size-lg); --step-content-font-size: var(--font-size-md); --step-content-color: rgba(0, 0, 0, 0.38); --step-content-active-color: #000; --step-line-background: #000; --step-vertical-min-height: 30px; --step-vertical-tag-margin: 0 4px; --step-vertical-line-height: calc(100% - 30px); --step-vertical-line-min-height: 20px;}.tag { width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step { display: flex; position: relative; flex: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-step__horizontal { display: flex; width: 100%;}.var-step__horizontal-main { display: flex; flex-direction: column; align-items: center; flex-basis: 100%;}.var-step__horizontal-tag { margin: var(--step-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-tag--active { background: var(--step-tag-active-color);}.var-step__horizontal-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-content--active { color: var(--step-content-active-color);}.var-step__horizontal-line { position: relative; top: 14px; flex: 1; height: 1px; transform: scaleY(0.5); background: var(--step-line-background);}.var-step__vertical { width: 100%;}.var-step__vertical-main { display: flex; align-items: flex-start; min-height: var(--step-vertical-min-height);}.var-step__vertical-tag { margin: var(--step-vertical-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__vertical-tag--active { background: var(--step-tag-active-color);}.var-step__vertical-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__vertical-content--active { color: var(--step-content-active-color);}.var-step__vertical-line { position: relative; height: var(--step-vertical-line-height); left: 14px; top: calc(-100% + 45px); min-height: var(--step-vertical-line-min-height); width: 1px; transform: scaleX(0.5); background: var(--step-line-background);}.var-step__icon[var-step-cover] { font-size: var(--step-tag-icon-size);}

package/lib/step/step.less

@@ -63,18 +63,18 @@
   flex: 1;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-  &-horizontal {
+  &__horizontal {
     display: flex;
     width: 100%;
 
-    &__main {
+    &-main {
       display: flex;
       flex-direction: column;
       align-items: center;
       flex-basis: 100%;
     }
 
-    &__tag {
+    &-tag {
       margin: var(--step-tag-margin);
       .tag();
 
@@ -83,7 +83,7 @@
       }
     }
 
-    &__content {
+    &-content {
       .content();
 
       &--active {
@@ -91,7 +91,7 @@
       }
     }
 
-    &__line {
+    &-line {
       position: relative;
       top: 14px;
       flex: 1;
@@ -101,16 +101,16 @@
     }
   }
 
-  &-vertical {
+  &__vertical {
     width: 100%;
 
-    &__main {
+    &-main {
       display: flex;
       align-items: flex-start;
       min-height: var(--step-vertical-min-height);
     }
 
-    &__tag {
+    &-tag {
       margin: var(--step-vertical-tag-margin);
       .tag();
 
@@ -119,7 +119,7 @@
       }
     }
 
-    &__content {
+    &-content {
       .content();
 
       &--active {
@@ -127,7 +127,7 @@
       }
     }
 
-    &__line {
+    &-line {
       position: relative;
       height: var(--step-vertical-line-height);
       left: 14px;

package/lib/steps/Steps.js

@@ -10,14 +10,20 @@ var _provide = require("./provide");
 
 var _props = require("./props");
 
+var _components = require("../utils/components");
+
+var {
+  n
+} = (0, _components.createNamespace)('steps');
+
 function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: "var-steps",
+    class: (0, _vue.normalizeClass)(_ctx.n()),
     style: (0, _vue.normalizeStyle)({
       flexDirection: _ctx.direction === 'horizontal' ? 'row' : 'column'
     })
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 4
-  /* STYLE */
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 6
+  /* CLASS, STYLE */
   );
 }
 
@@ -37,7 +43,7 @@ var _default = (0, _vue.defineComponent)({
     } = (0, _provide.useStep)();
 
     var clickStep = index => {
-      props.onClickStep == null ? void 0 : props.onClickStep(index);
+      (0, _components.call)(props.onClickStep, index);
     };
 
     var stepsProvider = {
@@ -49,6 +55,9 @@ var _default = (0, _vue.defineComponent)({
       clickStep
     };
     bindStep(stepsProvider);
+    return {
+      n
+    };
   }
 
 });