@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/es/step/Step.js

@@ -2,29 +2,30 @@ import { computed, defineComponent, ref, watch } from 'vue';
 import { props } from './props';
 import { useSteps } from './provide';
 import VarIcon from '../icon';
-import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderSlot as _renderSlot, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('step');
+import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderSlot as _renderSlot, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
 var _hoisted_1 = {
-  class: "var-step"
-};
-var _hoisted_2 = {
   key: 3
 };
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", {
-    class: _normalizeClass("var-step-" + _ctx.direction)
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n())
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n(_ctx.direction))
   }, [_createElementVNode("div", {
-    class: _normalizeClass("var-step-" + _ctx.direction + "__main"),
+    class: _normalizeClass(_ctx.n(_ctx.direction + "-main")),
     ref: _ctx.getRef
   }, [_createElementVNode("div", {
-    class: _normalizeClass({
-      ["var-step-" + _ctx.direction + "__tag"]: true,
-      ["var-step-" + _ctx.direction + "__tag--active"]: _ctx.isActive || _ctx.isCurrent
-    }),
+    class: _normalizeClass(_ctx.classes(_ctx.n(_ctx.direction + "-tag"), [_ctx.isActive || _ctx.isCurrent, _ctx.n(_ctx.direction + "-tag--active")])),
     style: _normalizeStyle({
       backgroundColor: _ctx.isActive || _ctx.isCurrent ? _ctx.activeColor : _ctx.inactiveColor
     }),
@@ -33,34 +34,31 @@ export function render(_ctx, _cache) {
     })
   }, [_ctx.isActive ? (_openBlock(), _createBlock(_component_var_icon, {
     key: 0,
-    class: "var-step__icon",
+    class: _normalizeClass(_ctx.n('icon')),
     "var-step-cover": "",
     name: _ctx.activeIcon
   }, null, 8
   /* PROPS */
-  , ["name"])) : _ctx.isCurrent && _ctx.currentIcon ? (_openBlock(), _createBlock(_component_var_icon, {
+  , ["class", "name"])) : _ctx.isCurrent && _ctx.currentIcon ? (_openBlock(), _createBlock(_component_var_icon, {
     key: 1,
-    class: "var-step__icon",
+    class: _normalizeClass(_ctx.n('icon')),
     "var-step-cover": "",
     name: _ctx.currentIcon
   }, null, 8
   /* PROPS */
-  , ["name"])) : _ctx.inactiveIcon ? (_openBlock(), _createBlock(_component_var_icon, {
+  , ["class", "name"])) : _ctx.inactiveIcon ? (_openBlock(), _createBlock(_component_var_icon, {
     key: 2,
-    class: "var-step__icon",
+    class: _normalizeClass(_ctx.n('icon')),
     "var-step-cover": "",
     name: _ctx.inactiveIcon
   }, null, 8
   /* PROPS */
-  , ["name"])) : (_openBlock(), _createElementBlock("span", _hoisted_2, _toDisplayString(_ctx.index + 1), 1
+  , ["class", "name"])) : (_openBlock(), _createElementBlock("span", _hoisted_1, _toDisplayString(_ctx.index + 1), 1
   /* TEXT */
   ))], 6
   /* CLASS, STYLE */
   ), _createElementVNode("div", {
-    class: _normalizeClass({
-      ["var-step-" + _ctx.direction + "__content"]: true,
-      ["var-step-" + _ctx.direction + "__content--active"]: _ctx.isActive || _ctx.isCurrent
-    }),
+    class: _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);
     })
@@ -70,7 +68,7 @@ export function render(_ctx, _cache) {
   /* CLASS */
   ), !_ctx.isLastChild ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: _normalizeClass("var-step-" + _ctx.direction + "__line"),
+    class: _normalizeClass(_ctx.n(_ctx.direction + "-line")),
     style: _normalizeStyle({
       margin: _ctx.lineMargin
     })
@@ -78,7 +76,9 @@ export function render(_ctx, _cache) {
   /* CLASS, STYLE */
   )) : _createCommentVNode("v-if", true)], 2
   /* CLASS */
-  )]);
+  )], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -129,6 +129,8 @@ export default defineComponent({
       }
     });
     return {
+      n,
+      classes,
       main,
       index,
       isActive,

package/es/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/es/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/es/steps/Steps.js

@@ -1,15 +1,19 @@
 import { computed, defineComponent } from 'vue';
 import { useStep } from './provide';
 import { props } from './props';
-import { renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { createNamespace, call } from '../utils/components';
+var {
+  n
+} = createNamespace('steps');
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 export function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
-    class: "var-steps",
+    class: _normalizeClass(_ctx.n()),
     style: _normalizeStyle({
       flexDirection: _ctx.direction === 'horizontal' ? 'row' : 'column'
     })
-  }, [_renderSlot(_ctx.$slots, "default")], 4
-  /* STYLE */
+  }, [_renderSlot(_ctx.$slots, "default")], 6
+  /* CLASS, STYLE */
   );
 }
 export default defineComponent({
@@ -28,7 +32,7 @@ export default defineComponent({
     } = useStep();
 
     var clickStep = index => {
-      props.onClickStep == null ? void 0 : props.onClickStep(index);
+      call(props.onClickStep, index);
     };
 
     var stepsProvider = {
@@ -40,6 +44,9 @@ export default defineComponent({
       clickStep
     };
     bindStep(stepsProvider);
+    return {
+      n
+    };
   }
 
 });

package/es/sticky/Sticky.js

@@ -6,10 +6,15 @@ import { defineComponent, ref, onMounted, onUnmounted, onActivated, onDeactivate
 import { props } from './props';
 import { doubleRaf, getParentScroller, toPxNum } from '../utils/elements';
 import { toNumber } from '../utils/shared';
-import { renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { call, createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('sticky');
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 export function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(["var-sticky", [_ctx.enableCSSMode ? 'var-sticky--css-mode' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.enableCSSMode, _ctx.n('--css-mode')])),
     ref: "stickyEl",
     style: _normalizeStyle({
       zIndex: _ctx.toNumber(_ctx.zIndex),
@@ -18,7 +23,7 @@ export function render(_ctx, _cache) {
       height: _ctx.enableFixedMode ? _ctx.fixedHeight : undefined
     })
   }, [_createElementVNode("div", {
-    class: "var-sticky__wrapper",
+    class: _normalizeClass(_ctx.n('wrapper')),
     ref: "wrapperEl",
     style: _normalizeStyle({
       zIndex: _ctx.toNumber(_ctx.zIndex),
@@ -28,8 +33,8 @@ export function render(_ctx, _cache) {
       left: _ctx.enableFixedMode ? _ctx.fixedLeft : undefined,
       top: _ctx.enableFixedMode ? _ctx.fixedTop : undefined
     })
-  }, [_renderSlot(_ctx.$slots, "default")], 4
-  /* STYLE */
+  }, [_renderSlot(_ctx.$slots, "default")], 6
+  /* CLASS, STYLE */
   )], 6
   /* CLASS, STYLE */
   );
@@ -93,10 +98,10 @@ export default defineComponent({
           isFixed.value = true;
         }
 
-        onScroll == null ? void 0 : onScroll(offsetTop.value, true);
+        call(onScroll, offsetTop.value, true);
       } else {
         isFixed.value = false;
-        onScroll == null ? void 0 : onScroll(currentOffsetTop, false);
+        call(onScroll, currentOffsetTop, false);
       }
     };
 
@@ -125,6 +130,8 @@ export default defineComponent({
     onMounted(addScrollListener);
     onUnmounted(removeScrollListener);
     return {
+      n,
+      classes,
       stickyEl,
       wrapperEl,
       isFixed,

package/es/style-provider/StyleProvider.js

@@ -1,5 +1,9 @@
 import { defineComponent, h } from 'vue';
 import { formatStyleVars } from '../utils/elements';
+import { call, createNamespace } from '../utils/components';
+var {
+  n
+} = createNamespace('style-provider');
 export default defineComponent({
   name: 'VarStyleProvider',
   props: {
@@ -14,9 +18,9 @@ export default defineComponent({
       slots
     } = _ref;
     return () => h('div', {
-      class: 'var-style-provider',
+      class: n(),
       style: formatStyleVars(props.styleVars)
-    }, slots.default == null ? void 0 : slots.default());
+    }, call(slots.default));
   }
 
 });