@varlet/ui 1.26.9 → 1.27.0-alpha.1649242923701

package/es/swipe/Swipe.js

@@ -7,20 +7,24 @@ import { useSwipeItems } from './provide';
 import { doubleRaf, nextTickFrame } from '../utils/elements';
 import { props } from './props';
 import { isNumber, toNumber } from '../utils/shared';
+import { call, createNamespace } from '../utils/components';
 var SWIPE_DELAY = 250;
 var SWIPE_DISTANCE = 20;
+var {
+  n,
+  classes
+} = createNamespace('swipe');
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-var _hoisted_1 = {
-  class: "var-swipe",
-  ref: "swipeEl"
-};
-var _hoisted_2 = ["onClick"];
+var _hoisted_1 = ["onClick"];
 export function render(_ctx, _cache) {
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", {
-    class: _normalizeClass(["var-swipe__track", [_ctx.vertical ? 'var-swipe--vertical' : null]]),
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n()),
+    ref: "swipeEl"
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('track'), [_ctx.vertical, _ctx.n('--vertical')])),
     style: _normalizeStyle({
       width: !_ctx.vertical ? _ctx.trackSize + "px" : undefined,
       height: _ctx.vertical ? _ctx.trackSize + "px" : undefined,
@@ -43,10 +47,10 @@ export function render(_ctx, _cache) {
     length: _ctx.length
   }, () => [_ctx.indicator && _ctx.length ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: _normalizeClass(["var-swipe__indicators", [_ctx.vertical ? 'var-swipe--indicators-vertical' : null]])
+    class: _normalizeClass(_ctx.classes(_ctx.n('indicators'), [_ctx.vertical, _ctx.n('--indicators-vertical')]))
   }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.length, (l, idx) => {
     return _openBlock(), _createElementBlock("div", {
-      class: _normalizeClass(["var-swipe__indicator", [_ctx.index === idx ? 'var-swipe--indicator-active' : null, _ctx.vertical ? 'var-swipe--indicator-vertical' : null]]),
+      class: _normalizeClass(_ctx.classes(_ctx.n('indicator'), [_ctx.index === idx, _ctx.n('--indicator-active')], [_ctx.vertical, _ctx.n('--indicator-vertical')])),
       style: _normalizeStyle({
         background: _ctx.indicatorColor
       }),
@@ -54,13 +58,13 @@ export function render(_ctx, _cache) {
       onClick: $event => _ctx.to(idx)
     }, null, 14
     /* CLASS, STYLE, PROPS */
-    , _hoisted_2);
+    , _hoisted_1);
   }), 128
   /* KEYED_FRAGMENT */
   ))], 2
   /* CLASS */
-  )) : _createCommentVNode("v-if", true)])], 512
-  /* NEED_PATCH */
+  )) : _createCommentVNode("v-if", true)])], 2
+  /* CLASS */
   );
 }
 export default defineComponent({
@@ -183,7 +187,7 @@ export default defineComponent({
 
       nextTickFrame(() => {
         lockDuration.value = false;
-        fn == null ? void 0 : fn();
+        call(fn);
       });
     };
 
@@ -291,7 +295,7 @@ export default defineComponent({
       var prevIndex = index.value;
       index.value = swipeIndexToIndex(swipeIndex);
       startAutoplay();
-      prevIndex !== index.value && (onChange == null ? void 0 : onChange(index.value));
+      prevIndex !== index.value && call(onChange, index.value);
     }; // expose
 
 
@@ -321,7 +325,7 @@ export default defineComponent({
       } = props;
       var currentIndex = index.value;
       index.value = boundaryIndex(currentIndex + 1);
-      onChange == null ? void 0 : onChange(index.value);
+      call(onChange, index.value);
       fixPosition(() => {
         if (currentIndex === length.value - 1 && loop) {
           findSwipeItem(0).setTranslate(trackSize.value);
@@ -347,7 +351,7 @@ export default defineComponent({
       } = props;
       var currentIndex = index.value;
       index.value = boundaryIndex(currentIndex - 1);
-      onChange == null ? void 0 : onChange(index.value);
+      call(onChange, index.value);
       fixPosition(() => {
         if (currentIndex === 0 && loop) {
           findSwipeItem(length.value - 1).setTranslate(-trackSize.value);
@@ -394,6 +398,8 @@ export default defineComponent({
       stopAutoplay();
     });
     return {
+      n,
+      classes,
       length,
       index,
       swipeEl,

package/es/swipe-item/SwipeItem.js

@@ -1,16 +1,20 @@
 import { defineComponent, ref } from 'vue';
 import { useSwipe } from './provide';
-import { renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { createNamespace } from '../utils/components';
+var {
+  n
+} = createNamespace('swipe-item');
+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-swipe-item",
+    class: _normalizeClass(_ctx.n()),
     style: _normalizeStyle({
       width: !_ctx.vertical ? _ctx.size + "px" : undefined,
       height: _ctx.vertical ? _ctx.size + "px" : undefined,
       transform: "translate" + (_ctx.vertical ? 'Y' : 'X') + "(" + _ctx.translate + "px)"
     })
-  }, [_renderSlot(_ctx.$slots, "default")], 4
-  /* STYLE */
+  }, [_renderSlot(_ctx.$slots, "default")], 6
+  /* CLASS, STYLE */
   );
 }
 export default defineComponent({
@@ -39,6 +43,7 @@ export default defineComponent({
     };
     bindSwipe(swipeItemProvider);
     return {
+      n,
       size,
       vertical,
       translate

package/es/switch/Switch.js

@@ -1,18 +1,16 @@
 import { defineComponent, computed, nextTick } from 'vue';
-import { useValidation } from '../utils/components';
+import { useValidation, createNamespace, call } from '../utils/components';
 import { toNumber } from '../utils/shared';
 import { useForm } from '../form/provide';
 import { props } from './props';
 import VarFormDetails from '../form-details';
 import VarLoading from '../loading';
 import Ripple from '../ripple';
-import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  class: "var-switch"
-};
+var {
+  n,
+  classes
+} = createNamespace('switch');
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives, createVNode as _createVNode } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_loading = _resolveComponent("var-loading");
 
@@ -20,23 +18,25 @@ export function render(_ctx, _cache) {
 
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", {
-    class: _normalizeClass(["var-switch-block", [_ctx.disabled || _ctx.formDisabled ? 'var-switch__disable' : null]]),
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n())
+  }, [_createElementVNode("div", {
+    class: _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: _normalizeStyle(_ctx.styleComputed.switch)
   }, [_createElementVNode("div", {
     style: _normalizeStyle(_ctx.styleComputed.track),
-    class: _normalizeClass(["var-switch__track", [_ctx.modelValue === _ctx.activeValue ? 'var-switch__track-active' : null, _ctx.errorMessage ? 'var-switch__track-error' : null]])
+    class: _normalizeClass(_ctx.classes(_ctx.n('track'), [_ctx.modelValue === _ctx.activeValue, _ctx.n('track-active')], [_ctx.errorMessage, _ctx.n('track-error')]))
   }, null, 6
   /* CLASS, STYLE */
   ), _withDirectives((_openBlock(), _createElementBlock("div", {
-    class: "var-switch__ripple",
+    class: _normalizeClass(_ctx.n('ripple')),
     style: _normalizeStyle(_ctx.styleComputed.ripple)
   }, [_createElementVNode("div", {
     style: _normalizeStyle(_ctx.styleComputed.handle),
-    class: _normalizeClass(["var-switch__handle var-elevation--2", [_ctx.modelValue === _ctx.activeValue ? 'var-switch__handle-active' : null, _ctx.errorMessage ? 'var-switch__handle-error' : null]])
+    class: _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 ? (_openBlock(), _createBlock(_component_var_loading, {
     key: 0,
     radius: _ctx.toNumber(_ctx.size) / 2 - 2
@@ -44,8 +44,8 @@ export function render(_ctx, _cache) {
   /* PROPS */
   , ["radius"])) : _createCommentVNode("v-if", true)], 6
   /* CLASS, STYLE */
-  )], 4
-  /* STYLE */
+  )], 6
+  /* CLASS, STYLE */
   )), [[_directive_ripple, {
     disabled: !_ctx.ripple || _ctx.disabled || _ctx.loading || _ctx.formDisabled
   }]])], 6
@@ -54,7 +54,9 @@ export function render(_ctx, _cache) {
     "error-message": _ctx.errorMessage
   }, null, 8
   /* PROPS */
-  , ["error-message"])]);
+  , ["error-message"])], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -135,18 +137,16 @@ export default defineComponent({
         inactiveValue,
         'onUpdate:modelValue': updateModelValue
       } = props;
-      onClick == null ? void 0 : onClick(event);
+      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);
+      call(onChange, newValue);
+      call(updateModelValue, newValue);
       validateWithTrigger();
     };
 
     var reset = () => {
-      var _props$onUpdateModel;
-
-      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, props.inactiveValue);
+      call(props['onUpdate:modelValue'], props.inactiveValue);
       resetValidation();
     };
 
@@ -155,8 +155,10 @@ export default defineComponent({
       validate,
       resetValidation
     };
-    bindForm == null ? void 0 : bindForm(switchProvider);
+    call(bindForm, switchProvider);
     return {
+      n,
+      classes,
       switchActive,
       toNumber,
       styleComputed,

package/es/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/es/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/es/tab/Tab.js

@@ -1,13 +1,18 @@
 import Ripple from '../ripple';
 import { defineComponent, ref, computed, watch } from 'vue';
 import { props } from './props';
+import { createNamespace } from '../utils/components';
 import { useTabs } from './provide';
+var {
+  n,
+  classes
+} = createNamespace('tab');
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
 export function render(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 
   return _withDirectives((_openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(["var-tab var--box", [_ctx.computeColorClass(), "var-tab--" + _ctx.itemDirection]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', _ctx.computeColorClass(), _ctx.n("--" + _ctx.itemDirection))),
     ref: "tabEl",
     style: _normalizeStyle({
       color: _ctx.computeColorStyle()
@@ -90,6 +95,8 @@ export default defineComponent({
     watch(() => props.name, resize);
     watch(() => props.disabled, resize);
     return {
+      n,
+      classes,
       tabEl,
       active,
       activeColor,

package/es/tab-item/TabItem.js

@@ -2,12 +2,17 @@ import VarSwipeItem from '../swipe-item';
 import { defineComponent, ref, computed } from 'vue';
 import { useTabsItems } from './provide';
 import { props } from './props';
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('tab-item');
 import { renderSlot as _renderSlot, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_swipe_item = _resolveComponent("var-swipe-item");
 
   return _openBlock(), _createBlock(_component_var_swipe_item, {
-    class: _normalizeClass(["var-tab-item", [!_ctx.current && 'var-tab-item--inactive']]),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [!_ctx.current, _ctx.n('--inactive')])),
     "var-tab-item-cover": ""
   }, {
     default: _withCtx(() => [_ctx.initSlot ? _renderSlot(_ctx.$slots, "default", {
@@ -52,6 +57,8 @@ export default defineComponent({
     };
     bindTabsItems(tabItemProvider);
     return {
+      n,
+      classes,
       current,
       initSlot
     };

package/es/table/Table.js

@@ -1,28 +1,33 @@
 import { defineComponent } from 'vue';
 import { toSizeUnit } from '../utils/elements';
-import { renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _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"
-};
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('table');
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode } from "vue";
 export function render(_ctx, _cache) {
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", _hoisted_2, [_createElementVNode("table", {
-    class: "var-table__table",
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var-elevation--1 var--box'))
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('main'))
+  }, [_createElementVNode("table", {
+    class: _normalizeClass(_ctx.n('table')),
     style: _normalizeStyle({
       width: _ctx.toSizeUnit(_ctx.fullWidth)
     })
-  }, [_renderSlot(_ctx.$slots, "default")], 4
-  /* STYLE */
-  )]), _ctx.$slots.footer ? (_openBlock(), _createElementBlock("div", _hoisted_3, [_renderSlot(_ctx.$slots, "footer")])) : _createCommentVNode("v-if", true)]);
+  }, [_renderSlot(_ctx.$slots, "default")], 6
+  /* CLASS, STYLE */
+  )], 2
+  /* CLASS */
+  ), _ctx.$slots.footer ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('footer'))
+  }, [_renderSlot(_ctx.$slots, "footer")], 2
+  /* CLASS */
+  )) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -36,7 +41,9 @@ export default defineComponent({
 
   setup() {
     return {
-      toSizeUnit
+      toSizeUnit,
+      n,
+      classes
     };
   }
 

package/es/tabs/Tabs.js

@@ -8,21 +8,26 @@ import { props } from './props';
 import { useTabList } from './provide';
 import { isNumber, linear } from '../utils/shared';
 import { toSizeUnit, scrollTo, doubleRaf } from '../utils/elements';
+import { createNamespace, call } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('tabs');
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, mergeProps as _mergeProps, resolveDynamicComponent as _resolveDynamicComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 export function render(_ctx, _cache) {
   return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.sticky ? 'var-sticky' : _ctx.Transition), {
     "offset-top": _ctx.sticky ? _ctx.offsetTop : null
   }, {
     default: _withCtx(() => [_createElementVNode("div", _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), [_createElementVNode("div", {
-      class: _normalizeClass(["var-tabs__tab-wrap", [_ctx.scrollable ? "var-tabs--layout-" + _ctx.layoutDirection + "-scrollable" : null, "var-tabs--layout-" + _ctx.layoutDirection]]),
-      ref: "scrollerEl"
+      ref: "scrollerEl",
+      class: _normalizeClass(_ctx.classes(_ctx.n('tab-wrap'), [_ctx.scrollable, _ctx.n("--layout-" + _ctx.layoutDirection + "-scrollable")], _ctx.n("--layout-" + _ctx.layoutDirection)))
     }, [_renderSlot(_ctx.$slots, "default"), _createElementVNode("div", {
-      class: _normalizeClass(["var-tabs__indicator", ["var-tabs--layout-" + _ctx.layoutDirection + "-indicator"]]),
+      class: _normalizeClass(_ctx.classes(_ctx.n('indicator'), _ctx.n("--layout-" + _ctx.layoutDirection + "-indicator"))),
       style: _normalizeStyle({
         width: _ctx.layoutDirection === 'horizontal' ? _ctx.indicatorWidth : _ctx.toSizeUnit(_ctx.indicatorSize),
         height: _ctx.layoutDirection === 'horizontal' ? _ctx.toSizeUnit(_ctx.indicatorSize) : _ctx.indicatorHeight,
@@ -71,7 +76,7 @@ export default defineComponent({
     } = 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 {
@@ -79,9 +84,9 @@ export default 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));
+      call(props['onUpdate:active'], currentActive);
+      call(onClick, currentActive);
+      currentActive !== active && call(onChange, currentActive);
     };
 
     var matchName = () => {
@@ -103,8 +108,6 @@ export default defineComponent({
     };
 
     var matchBoundary = () => {
-      var _props$onUpdateActiv2, _props$onUpdateActiv3;
-
       if (length.value === 0) {
         return;
       }
@@ -112,7 +115,7 @@ export default defineComponent({
       var {
         active
       } = props;
-      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;
+      isNumber(active) ? active > length.value - 1 ? call(props['onUpdate:active'], length.value - 1) : call(props['onUpdate:active'], 0) : null;
       return matchIndex();
     };
 
@@ -201,6 +204,8 @@ export default defineComponent({
       scrollerEl,
       Transition,
       toSizeUnit,
+      n,
+      classes,
       resize
     };
   }

package/es/tabs-items/TabsItems.js

@@ -2,12 +2,16 @@ import VarSwipe from '../swipe';
 import { defineComponent, watch, ref } from 'vue';
 import { useTabItem } from './provide';
 import { props } from './props';
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+import { call, createNamespace } from '../utils/components';
+var {
+  n
+} = createNamespace('tabs-items');
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_swipe = _resolveComponent("var-swipe");
 
   return _openBlock(), _createBlock(_component_var_swipe, {
-    class: "var-tabs-items",
+    class: _normalizeClass(_ctx.n()),
     ref: "swipe",
     loop: _ctx.loop,
     touchable: _ctx.canSwipe,
@@ -20,7 +24,7 @@ export function render(_ctx, _cache) {
 
   }, 8
   /* PROPS */
-  , ["loop", "touchable", "onChange"]);
+  , ["class", "loop", "touchable", "onChange"]);
 }
 export default defineComponent({
   render,
@@ -80,7 +84,7 @@ export default defineComponent({
     };
 
     var handleSwipeChange = currentIndex => {
-      var _tabItem$name$value, _props$onUpdateActiv;
+      var _tabItem$name$value;
 
       var tabItem = tabItemList.find(_ref4 => {
         var {
@@ -89,7 +93,7 @@ export default 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);
+      call(props['onUpdate:active'], active);
     };
 
     var tabsItemsProvider = {};
@@ -98,6 +102,7 @@ export default defineComponent({
     watch(() => length.value, () => handleActiveChange(props.active));
     return {
       swipe,
+      n,
       handleSwipeChange
     };
   }

package/es/themes/dark/bottomNavigation.js

@@ -0,0 +1,4 @@
+export default {
+  '--bottom-navigation-background-color': '#272727',
+  '--bottom-navigation-border-color': '#444'
+};

package/es/themes/dark/bottomNavigationItem.js

@@ -0,0 +1,3 @@
+export default {
+  '--bottom-navigation-item-active-background-color': '#272727'
+};

package/es/themes/dark/index.js

@@ -27,6 +27,8 @@ import timePicker from './timePicker';
 import uploader from './uploader';
 import tabs from './tabs';
 import appBar from './appBar';
+import bottomNavigation from './bottomNavigation';
+import bottomNavigationItem from './bottomNavigationItem';
 export default _extends({
   // common
   '--color-body': '#1e1e1e',
@@ -38,4 +40,4 @@ export default _extends({
   '--color-danger': '#ef5350',
   '--color-disabled': '#404040',
   '--color-text-disabled': '#757575'
-}, button, cell, card, timePicker, datePicker, skeleton, tabs, tab, popup, dialog, actionSheet, chip, badge, uploader, collapse, pullRefresh, switchThemes, steps, pagination, table, input, select, radio, checkbox, divider, picker, appBar);
+}, button, cell, card, timePicker, datePicker, skeleton, tabs, tab, popup, dialog, actionSheet, chip, badge, uploader, collapse, pullRefresh, switchThemes, steps, pagination, table, input, select, radio, checkbox, divider, picker, appBar, bottomNavigation, bottomNavigationItem);