@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/lib/style.js

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

package/lib/swipe/Swipe.js

@@ -14,24 +14,29 @@ var _props = require("./props");
 
 var _shared = require("../utils/shared");
 
+var _components = require("../utils/components");
+
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
 var SWIPE_DELAY = 250;
 var SWIPE_DISTANCE = 20;
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('swipe');
 
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
-var _hoisted_1 = {
-  class: "var-swipe",
-  ref: "swipeEl"
-};
-var _hoisted_2 = ["onClick"];
+var _hoisted_1 = ["onClick"];
 
 function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-swipe__track", [_ctx.vertical ? 'var-swipe--vertical' : null]]),
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n()),
+    ref: "swipeEl"
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('track'), [_ctx.vertical, _ctx.n('--vertical')])),
     style: (0, _vue.normalizeStyle)({
       width: !_ctx.vertical ? _ctx.trackSize + "px" : undefined,
       height: _ctx.vertical ? _ctx.trackSize + "px" : undefined,
@@ -54,10 +59,10 @@ function render(_ctx, _cache) {
     length: _ctx.length
   }, () => [_ctx.indicator && _ctx.length ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
-    class: (0, _vue.normalizeClass)(["var-swipe__indicators", [_ctx.vertical ? 'var-swipe--indicators-vertical' : null]])
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('indicators'), [_ctx.vertical, _ctx.n('--indicators-vertical')]))
   }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.length, (l, idx) => {
     return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-      class: (0, _vue.normalizeClass)(["var-swipe__indicator", [_ctx.index === idx ? 'var-swipe--indicator-active' : null, _ctx.vertical ? 'var-swipe--indicator-vertical' : null]]),
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('indicator'), [_ctx.index === idx, _ctx.n('--indicator-active')], [_ctx.vertical, _ctx.n('--indicator-vertical')])),
       style: (0, _vue.normalizeStyle)({
         background: _ctx.indicatorColor
       }),
@@ -65,13 +70,13 @@ function render(_ctx, _cache) {
       onClick: $event => _ctx.to(idx)
     }, null, 14
     /* CLASS, STYLE, PROPS */
-    , _hoisted_2);
+    , _hoisted_1);
   }), 128
   /* KEYED_FRAGMENT */
   ))], 2
   /* CLASS */
-  )) : (0, _vue.createCommentVNode)("v-if", true)])], 512
-  /* NEED_PATCH */
+  )) : (0, _vue.createCommentVNode)("v-if", true)])], 2
+  /* CLASS */
   );
 }
 
@@ -195,7 +200,7 @@ var _default = (0, _vue.defineComponent)({
 
       (0, _elements.nextTickFrame)(() => {
         lockDuration.value = false;
-        fn == null ? void 0 : fn();
+        (0, _components.call)(fn);
       });
     };
 
@@ -303,7 +308,7 @@ var _default = (0, _vue.defineComponent)({
       var prevIndex = index.value;
       index.value = swipeIndexToIndex(swipeIndex);
       startAutoplay();
-      prevIndex !== index.value && (onChange == null ? void 0 : onChange(index.value));
+      prevIndex !== index.value && (0, _components.call)(onChange, index.value);
     }; // expose
 
 
@@ -333,7 +338,7 @@ var _default = (0, _vue.defineComponent)({
       } = props;
       var currentIndex = index.value;
       index.value = boundaryIndex(currentIndex + 1);
-      onChange == null ? void 0 : onChange(index.value);
+      (0, _components.call)(onChange, index.value);
       fixPosition(() => {
         if (currentIndex === length.value - 1 && loop) {
           findSwipeItem(0).setTranslate(trackSize.value);
@@ -359,7 +364,7 @@ var _default = (0, _vue.defineComponent)({
       } = props;
       var currentIndex = index.value;
       index.value = boundaryIndex(currentIndex - 1);
-      onChange == null ? void 0 : onChange(index.value);
+      (0, _components.call)(onChange, index.value);
       fixPosition(() => {
         if (currentIndex === 0 && loop) {
           findSwipeItem(length.value - 1).setTranslate(-trackSize.value);
@@ -406,6 +411,8 @@ var _default = (0, _vue.defineComponent)({
       stopAutoplay();
     });
     return {
+      n,
+      classes,
       length,
       index,
       swipeEl,

package/lib/swipe-item/SwipeItem.js

@@ -8,16 +8,22 @@ var _vue = require("vue");
 
 var _provide = require("./provide");
 
+var _components = require("../utils/components");
+
+var {
+  n
+} = (0, _components.createNamespace)('swipe-item');
+
 function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: "var-swipe-item",
+    class: (0, _vue.normalizeClass)(_ctx.n()),
     style: (0, _vue.normalizeStyle)({
       width: !_ctx.vertical ? _ctx.size + "px" : undefined,
       height: _ctx.vertical ? _ctx.size + "px" : undefined,
       transform: "translate" + (_ctx.vertical ? 'Y' : 'X') + "(" + _ctx.translate + "px)"
     })
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 4
-  /* STYLE */
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 6
+  /* CLASS, STYLE */
   );
 }
 
@@ -47,6 +53,7 @@ var _default = (0, _vue.defineComponent)({
     };
     bindSwipe(swipeItemProvider);
     return {
+      n,
       size,
       vertical,
       translate

package/lib/switch/Switch.js

@@ -22,11 +22,10 @@ var _ripple = _interopRequireDefault(require("../ripple"));
 
 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-switch"
-};
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('switch');
 
 function render(_ctx, _cache) {
   var _component_var_loading = (0, _vue.resolveComponent)("var-loading");
@@ -35,23 +34,25 @@ function render(_ctx, _cache) {
 
   var _directive_ripple = (0, _vue.resolveDirective)("ripple");
 
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-switch-block", [_ctx.disabled || _ctx.formDisabled ? 'var-switch__disable' : null]]),
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n())
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('block'), [_ctx.disabled || _ctx.formDisabled, _ctx.n('--disable')])),
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.switchActive && _ctx.switchActive(...arguments);
     }),
     style: (0, _vue.normalizeStyle)(_ctx.styleComputed.switch)
   }, [(0, _vue.createElementVNode)("div", {
     style: (0, _vue.normalizeStyle)(_ctx.styleComputed.track),
-    class: (0, _vue.normalizeClass)(["var-switch__track", [_ctx.modelValue === _ctx.activeValue ? 'var-switch__track-active' : null, _ctx.errorMessage ? 'var-switch__track-error' : null]])
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('track'), [_ctx.modelValue === _ctx.activeValue, _ctx.n('track-active')], [_ctx.errorMessage, _ctx.n('track-error')]))
   }, null, 6
   /* CLASS, STYLE */
   ), (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: "var-switch__ripple",
+    class: (0, _vue.normalizeClass)(_ctx.n('ripple')),
     style: (0, _vue.normalizeStyle)(_ctx.styleComputed.ripple)
   }, [(0, _vue.createElementVNode)("div", {
     style: (0, _vue.normalizeStyle)(_ctx.styleComputed.handle),
-    class: (0, _vue.normalizeClass)(["var-switch__handle var-elevation--2", [_ctx.modelValue === _ctx.activeValue ? 'var-switch__handle-active' : null, _ctx.errorMessage ? 'var-switch__handle-error' : null]])
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('handle'), 'var-elevation--2', [_ctx.modelValue === _ctx.activeValue, _ctx.n('handle-active')], [_ctx.errorMessage, _ctx.n('handle-error')]))
   }, [_ctx.loading ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_loading, {
     key: 0,
     radius: _ctx.toNumber(_ctx.size) / 2 - 2
@@ -59,8 +60,8 @@ function render(_ctx, _cache) {
   /* PROPS */
   , ["radius"])) : (0, _vue.createCommentVNode)("v-if", true)], 6
   /* CLASS, STYLE */
-  )], 4
-  /* STYLE */
+  )], 6
+  /* CLASS, STYLE */
   )), [[_directive_ripple, {
     disabled: !_ctx.ripple || _ctx.disabled || _ctx.loading || _ctx.formDisabled
   }]])], 6
@@ -69,7 +70,9 @@ function render(_ctx, _cache) {
     "error-message": _ctx.errorMessage
   }, null, 8
   /* PROPS */
-  , ["error-message"])]);
+  , ["error-message"])], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -151,18 +154,16 @@ var _default = (0, _vue.defineComponent)({
         inactiveValue,
         'onUpdate:modelValue': updateModelValue
       } = props;
-      onClick == null ? void 0 : onClick(event);
+      (0, _components.call)(onClick, event);
       if (disabled || loading || readonly || form != null && form.disabled.value || form != null && form.readonly.value) return;
       var newValue = modelValue === activeValue ? inactiveValue : activeValue;
-      onChange == null ? void 0 : onChange(newValue);
-      updateModelValue == null ? void 0 : updateModelValue(newValue);
+      (0, _components.call)(onChange, newValue);
+      (0, _components.call)(updateModelValue, newValue);
       validateWithTrigger();
     };
 
     var reset = () => {
-      var _props$onUpdateModel;
-
-      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, props.inactiveValue);
+      (0, _components.call)(props['onUpdate:modelValue'], props.inactiveValue);
       resetValidation();
     };
 
@@ -171,8 +172,10 @@ var _default = (0, _vue.defineComponent)({
       validate,
       resetValidation
     };
-    bindForm == null ? void 0 : bindForm(switchProvider);
+    (0, _components.call)(bindForm, switchProvider);
     return {
+      n,
+      classes,
       switchActive,
       toNumber: _shared.toNumber,
       styleComputed,

package/lib/switch/switch.css

@@ -1 +1 @@
-:root { --switch-track-background: #fff; --switch-track-active-background: var(--color-primary); --switch-track-error-background: var(--color-danger); --switch-ripple-color: var(--color-primary); --switch-handle-background: #fff; --switch-handle-color: #fff; --switch-handle-active-background: var(--color-primary); --switch-handle-error-background: var(--color-danger);}.var-switch { display: inline-block;}.var-switch-block { position: relative; display: flex; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; justify-content: center;}.var-switch__disable { filter: opacity(0.6); cursor: not-allowed;}.var-switch__track { background: var(--switch-track-background); transition: background-color 0.25s; filter: opacity(0.6);}.var-switch__track-active { background-color: var(--switch-track-active-background);}.var-switch__track-error { background-color: var(--switch-track-error-background) !important;}.var-switch__ripple { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--switch-ripple-color); border-radius: 50%; overflow: hidden; transition: 0.3s var(--cubic-bezier);}.var-switch__handle { border-radius: 50%; background-color: var(--switch-handle-background); display: flex; align-items: center; justify-content: center; color: var(--switch-handle-color); transition: background-color 0.25s;}.var-switch__handle-active { background-color: var(--switch-handle-active-background);}.var-switch__handle-error { background-color: var(--switch-handle-error-background) !important;}
+:root { --switch-track-background: #fff; --switch-track-active-background: var(--color-primary); --switch-track-error-background: var(--color-danger); --switch-ripple-color: var(--color-primary); --switch-handle-background: #fff; --switch-handle-color: #fff; --switch-handle-active-background: var(--color-primary); --switch-handle-error-background: var(--color-danger);}.var-switch { display: inline-block;}.var-switch__block { position: relative; display: flex; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; justify-content: center;}.var-switch--disable { filter: opacity(0.6); cursor: not-allowed;}.var-switch__track { background: var(--switch-track-background); transition: background-color 0.25s; filter: opacity(0.6);}.var-switch__track-active { background-color: var(--switch-track-active-background);}.var-switch__track-error { background-color: var(--switch-track-error-background) !important;}.var-switch__ripple { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--switch-ripple-color); border-radius: 50%; overflow: hidden; transition: 0.3s var(--cubic-bezier);}.var-switch__handle { border-radius: 50%; background-color: var(--switch-handle-background); display: flex; align-items: center; justify-content: center; color: var(--switch-handle-color); transition: background-color 0.25s;}.var-switch__handle-active { background-color: var(--switch-handle-active-background);}.var-switch__handle-error { background-color: var(--switch-handle-error-background) !important;}

package/lib/switch/switch.less

@@ -21,7 +21,7 @@
 .var-switch {
   display: inline-block;
 
-  &-block {
+  &__block {
     position: relative;
     display: flex;
     cursor: pointer;
@@ -30,7 +30,7 @@
     justify-content: center;
   }
 
-  &__disable {
+  &--disable {
     filter: opacity(0.6);
     cursor: not-allowed;
   }

package/lib/tab/Tab.js

@@ -10,15 +10,22 @@ var _vue = require("vue");
 
 var _props = require("./props");
 
+var _components = require("../utils/components");
+
 var _provide = require("./provide");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('tab');
+
 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-tab var--box", [_ctx.computeColorClass(), "var-tab--" + _ctx.itemDirection]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box', _ctx.computeColorClass(), _ctx.n("--" + _ctx.itemDirection))),
     ref: "tabEl",
     style: (0, _vue.normalizeStyle)({
       color: _ctx.computeColorStyle()
@@ -102,6 +109,8 @@ var _default = (0, _vue.defineComponent)({
     (0, _vue.watch)(() => props.name, resize);
     (0, _vue.watch)(() => props.disabled, resize);
     return {
+      n,
+      classes,
       tabEl,
       active,
       activeColor,

package/lib/tab-item/TabItem.js

@@ -12,13 +12,20 @@ var _provide = require("./provide");
 
 var _props = require("./props");
 
+var _components = require("../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('tab-item');
+
 function render(_ctx, _cache) {
   var _component_var_swipe_item = (0, _vue.resolveComponent)("var-swipe-item");
 
   return (0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_swipe_item, {
-    class: (0, _vue.normalizeClass)(["var-tab-item", [!_ctx.current && 'var-tab-item--inactive']]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [!_ctx.current, _ctx.n('--inactive')])),
     "var-tab-item-cover": ""
   }, {
     default: (0, _vue.withCtx)(() => [_ctx.initSlot ? (0, _vue.renderSlot)(_ctx.$slots, "default", {
@@ -64,6 +71,8 @@ var _default = (0, _vue.defineComponent)({
     };
     bindTabsItems(tabItemProvider);
     return {
+      n,
+      classes,
       current,
       initSlot
     };

package/lib/table/Table.js

@@ -8,28 +8,35 @@ var _vue = require("vue");
 
 var _elements = require("../utils/elements");
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
-
-var _hoisted_1 = {
-  class: "var-table var-elevation--1 var--box"
-};
-var _hoisted_2 = {
-  class: "var-table__main"
-};
-var _hoisted_3 = {
-  key: 0,
-  class: "var-table__footer"
-};
+var _components = require("../utils/components");
+
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('table');
 
 function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", _hoisted_2, [(0, _vue.createElementVNode)("table", {
-    class: "var-table__table",
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var-elevation--1 var--box'))
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('main'))
+  }, [(0, _vue.createElementVNode)("table", {
+    class: (0, _vue.normalizeClass)(_ctx.n('table')),
     style: (0, _vue.normalizeStyle)({
       width: _ctx.toSizeUnit(_ctx.fullWidth)
     })
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 4
-  /* STYLE */
-  )]), _ctx.$slots.footer ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_3, [(0, _vue.renderSlot)(_ctx.$slots, "footer")])) : (0, _vue.createCommentVNode)("v-if", true)]);
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 6
+  /* CLASS, STYLE */
+  )], 2
+  /* CLASS */
+  ), _ctx.$slots.footer ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('footer'))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "footer")], 2
+  /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -44,7 +51,9 @@ var _default = (0, _vue.defineComponent)({
 
   setup() {
     return {
-      toSizeUnit: _elements.toSizeUnit
+      toSizeUnit: _elements.toSizeUnit,
+      n,
+      classes
     };
   }
 

package/lib/tabs/Tabs.js

@@ -16,26 +16,33 @@ var _shared = require("../utils/shared");
 
 var _elements = require("../utils/elements");
 
+var _components = require("../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('tabs');
+
 function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createBlock)((0, _vue.resolveDynamicComponent)(_ctx.sticky ? 'var-sticky' : _ctx.Transition), {
     "offset-top": _ctx.sticky ? _ctx.offsetTop : null
   }, {
     default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
-      class: ["var-tabs var--box", ["var-tabs--item-" + _ctx.itemDirection, "var-tabs--layout-" + _ctx.layoutDirection + "-padding", _ctx.elevation ? "var-elevation--4" : null, _ctx.fixedBottom ? 'var-tabs--fixed-bottom' : null]],
+      class: _ctx.classes(_ctx.n(), 'var--box', _ctx.n("--item-" + _ctx.itemDirection), _ctx.n("--layout-" + _ctx.layoutDirection + "-padding"), [_ctx.elevation, 'var-elevation--4'], [_ctx.fixedBottom, _ctx.n('--fixed-bottom')]),
       style: {
         background: _ctx.color
       }
     }, _ctx.$attrs), [(0, _vue.createElementVNode)("div", {
-      class: (0, _vue.normalizeClass)(["var-tabs__tab-wrap", [_ctx.scrollable ? "var-tabs--layout-" + _ctx.layoutDirection + "-scrollable" : null, "var-tabs--layout-" + _ctx.layoutDirection]]),
-      ref: "scrollerEl"
+      ref: "scrollerEl",
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('tab-wrap'), [_ctx.scrollable, _ctx.n("--layout-" + _ctx.layoutDirection + "-scrollable")], _ctx.n("--layout-" + _ctx.layoutDirection)))
     }, [(0, _vue.renderSlot)(_ctx.$slots, "default"), (0, _vue.createElementVNode)("div", {
-      class: (0, _vue.normalizeClass)(["var-tabs__indicator", ["var-tabs--layout-" + _ctx.layoutDirection + "-indicator"]]),
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('indicator'), _ctx.n("--layout-" + _ctx.layoutDirection + "-indicator"))),
       style: (0, _vue.normalizeStyle)({
         width: _ctx.layoutDirection === 'horizontal' ? _ctx.indicatorWidth : _ctx.toSizeUnit(_ctx.indicatorSize),
         height: _ctx.layoutDirection === 'horizontal' ? _ctx.toSizeUnit(_ctx.indicatorSize) : _ctx.indicatorHeight,
@@ -85,7 +92,7 @@ var _default = (0, _vue.defineComponent)({
     } = (0, _provide.useTabList)();
 
     var onTabClick = tab => {
-      var _tab$name$value, _props$onUpdateActiv;
+      var _tab$name$value;
 
       var currentActive = (_tab$name$value = tab.name.value) != null ? _tab$name$value : tab.index.value;
       var {
@@ -93,9 +100,9 @@ var _default = (0, _vue.defineComponent)({
         onChange,
         onClick
       } = props;
-      (_props$onUpdateActiv = props['onUpdate:active']) == null ? void 0 : _props$onUpdateActiv.call(props, currentActive);
-      onClick == null ? void 0 : onClick(currentActive);
-      currentActive !== active && (onChange == null ? void 0 : onChange(currentActive));
+      (0, _components.call)(props['onUpdate:active'], currentActive);
+      (0, _components.call)(onClick, currentActive);
+      currentActive !== active && (0, _components.call)(onChange, currentActive);
     };
 
     var matchName = () => {
@@ -117,8 +124,6 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var matchBoundary = () => {
-      var _props$onUpdateActiv2, _props$onUpdateActiv3;
-
       if (length.value === 0) {
         return;
       }
@@ -126,7 +131,7 @@ var _default = (0, _vue.defineComponent)({
       var {
         active
       } = props;
-      (0, _shared.isNumber)(active) ? active > length.value - 1 ? (_props$onUpdateActiv2 = props['onUpdate:active']) == null ? void 0 : _props$onUpdateActiv2.call(props, length.value - 1) : (_props$onUpdateActiv3 = props['onUpdate:active']) == null ? void 0 : _props$onUpdateActiv3.call(props, 0) : null;
+      (0, _shared.isNumber)(active) ? active > length.value - 1 ? (0, _components.call)(props['onUpdate:active'], length.value - 1) : (0, _components.call)(props['onUpdate:active'], 0) : null;
       return matchIndex();
     };
 
@@ -215,6 +220,8 @@ var _default = (0, _vue.defineComponent)({
       scrollerEl,
       Transition: _vue.Transition,
       toSizeUnit: _elements.toSizeUnit,
+      n,
+      classes,
       resize
     };
   }

package/lib/tabs-items/TabsItems.js

@@ -12,13 +12,19 @@ var _provide = require("./provide");
 
 var _props = require("./props");
 
+var _components = require("../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n
+} = (0, _components.createNamespace)('tabs-items');
+
 function render(_ctx, _cache) {
   var _component_var_swipe = (0, _vue.resolveComponent)("var-swipe");
 
   return (0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_swipe, {
-    class: "var-tabs-items",
+    class: (0, _vue.normalizeClass)(_ctx.n()),
     ref: "swipe",
     loop: _ctx.loop,
     touchable: _ctx.canSwipe,
@@ -31,7 +37,7 @@ function render(_ctx, _cache) {
 
   }, 8
   /* PROPS */
-  , ["loop", "touchable", "onChange"]);
+  , ["class", "loop", "touchable", "onChange"]);
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -92,7 +98,7 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var handleSwipeChange = currentIndex => {
-      var _tabItem$name$value, _props$onUpdateActiv;
+      var _tabItem$name$value;
 
       var tabItem = tabItemList.find(_ref4 => {
         var {
@@ -101,7 +107,7 @@ var _default = (0, _vue.defineComponent)({
         return index.value === currentIndex;
       });
       var active = (_tabItem$name$value = tabItem.name.value) != null ? _tabItem$name$value : tabItem.index.value;
-      (_props$onUpdateActiv = props['onUpdate:active']) == null ? void 0 : _props$onUpdateActiv.call(props, active);
+      (0, _components.call)(props['onUpdate:active'], active);
     };
 
     var tabsItemsProvider = {};
@@ -110,6 +116,7 @@ var _default = (0, _vue.defineComponent)({
     (0, _vue.watch)(() => length.value, () => handleActiveChange(props.active));
     return {
       swipe,
+      n,
       handleSwipeChange
     };
   }

package/lib/themes/dark/bottomNavigation.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--bottom-navigation-background-color': '#272727',
+  '--bottom-navigation-border-color': '#444'
+};
+exports.default = _default;

package/lib/themes/dark/bottomNavigationItem.js

@@ -0,0 +1,8 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--bottom-navigation-item-active-background-color': '#272727'
+};
+exports.default = _default;

package/lib/themes/dark/index.js

@@ -57,6 +57,10 @@ var _tabs = _interopRequireDefault(require("./tabs"));
 
 var _appBar = _interopRequireDefault(require("./appBar"));
 
+var _bottomNavigation = _interopRequireDefault(require("./bottomNavigation"));
+
+var _bottomNavigationItem = _interopRequireDefault(require("./bottomNavigationItem"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -72,6 +76,6 @@ var _default = _extends({
   '--color-danger': '#ef5350',
   '--color-disabled': '#404040',
   '--color-text-disabled': '#757575'
-}, _button.default, _cell.default, _card.default, _timePicker.default, _datePicker.default, _skeleton.default, _tabs.default, _tab.default, _popup.default, _dialog.default, _actionSheet.default, _chip.default, _badge.default, _uploader.default, _collapse.default, _pullRefresh.default, _switch.default, _steps.default, _pagination.default, _table.default, _input.default, _select.default, _radio.default, _checkbox.default, _divider.default, _picker.default, _appBar.default);
+}, _button.default, _cell.default, _card.default, _timePicker.default, _datePicker.default, _skeleton.default, _tabs.default, _tab.default, _popup.default, _dialog.default, _actionSheet.default, _chip.default, _badge.default, _uploader.default, _collapse.default, _pullRefresh.default, _switch.default, _steps.default, _pagination.default, _table.default, _input.default, _select.default, _radio.default, _checkbox.default, _divider.default, _picker.default, _appBar.default, _bottomNavigation.default, _bottomNavigationItem.default);
 
 exports.default = _default;