@varlet/ui 1.26.9 → 1.27.0-alpha.1649265140569

package/README.en-US.md

@@ -26,7 +26,7 @@ Varlet is a Material design mobile component library developed based on `Vue3`,
 
 
 ### Features
-- 🚀 Provide 50 high quality general purpose components
+- 🚀 Provide 50+ high quality general purpose components
 - 🚀 Components are very lightweight
 - 💪 Developed by Chinese, complete Chinese and English documentation and logistics support
 - 🛠️ Support on-demand introduction

package/README.md

@@ -25,7 +25,7 @@
 Varlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库，全面拥抱 `Vue3` 生态，由社区建立起来的组件库团队进行维护。
 
 ### 特性
-- 🚀 提供50个高质量通用组件 
+- 🚀 提供50+个高质量通用组件 
 - 🚀 组件十分轻量
 - 💪 由国人开发，完善的中英文文档和后勤保障
 - 🛠️ 支持按需引入

package/es/action-sheet/ActionSheet.js

@@ -5,17 +5,16 @@ import { defineComponent, ref, watch } from 'vue';
 import { props } from './props';
 import { dt } from '../utils/shared';
 import { pack } from '../locale';
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, mergeProps as _mergeProps, withCtx as _withCtx, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { createNamespace, call } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('action-sheet');
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, mergeProps as _mergeProps, withCtx as _withCtx, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-var _hoisted_1 = {
-  class: "var-action-sheet__title"
-};
-var _hoisted_2 = ["onClick"];
-var _hoisted_3 = {
-  class: "var-action-sheet__action-name"
-};
+var _hoisted_1 = ["onClick"];
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
@@ -24,7 +23,7 @@ export function render(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 
   return _openBlock(), _createBlock(_component_var_popup, _mergeProps({
-    class: "var-action-sheet__popup-radius",
+    class: _ctx.n('popup-radius'),
     position: "bottom",
     overlay: _ctx.overlay,
     "overlay-class": _ctx.overlayClass,
@@ -34,11 +33,7 @@ export function render(_ctx, _cache) {
     teleport: _ctx.teleport,
     show: _ctx.popupShow
   }, {
-    'onUpdate:show': value => {
-      var _ctx$$props$onUpdate, _ctx$$props;
-
-      return (_ctx$$props$onUpdate = (_ctx$$props = _ctx.$props)['onUpdate:show']) == null ? void 0 : _ctx$$props$onUpdate.call(_ctx$$props, value);
-    }
+    'onUpdate:show': _ctx.handlePopupUpdateShow
   }, {
     onOpen: _ctx.onOpen,
     onClose: _ctx.onClose,
@@ -47,12 +42,14 @@ export function render(_ctx, _cache) {
     onRouteChange: _ctx.onRouteChange
   }), {
     default: _withCtx(() => [_createElementVNode("div", _mergeProps({
-      class: "var-action-sheet var--box"
-    }, _ctx.$attrs), [_renderSlot(_ctx.$slots, "title", {}, () => [_createElementVNode("div", _hoisted_1, _toDisplayString(_ctx.dt(_ctx.title, _ctx.pack.actionSheetTitle)), 1
-    /* TEXT */
+      class: _ctx.classes(_ctx.n(), 'var--box')
+    }, _ctx.$attrs), [_renderSlot(_ctx.$slots, "title", {}, () => [_createElementVNode("div", {
+      class: _normalizeClass(_ctx.n('title'))
+    }, _toDisplayString(_ctx.dt(_ctx.title, _ctx.pack.actionSheetTitle)), 3
+    /* TEXT, CLASS */
     )]), _renderSlot(_ctx.$slots, "actions", {}, () => [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.actions, action => {
       return _withDirectives((_openBlock(), _createElementBlock("div", {
-        class: _normalizeClass(["var-action-sheet__action-item", [action.className, action.disabled ? 'var-action-sheet--disabled' : null]]),
+        class: _normalizeClass(_ctx.classes(_ctx.n('action-item'), action.className, [action.disabled, _ctx.n('--disabled')])),
         key: action.name,
         style: _normalizeStyle({
           color: action.color
@@ -60,17 +57,19 @@ export function render(_ctx, _cache) {
         onClick: $event => _ctx.handleSelect(action)
       }, [action.icon ? (_openBlock(), _createBlock(_component_var_icon, {
         key: 0,
-        class: "var-action-sheet__action-icon",
+        class: _normalizeClass(_ctx.n('action-icon')),
         "var-action-sheet-cover": "",
         name: action.icon,
         size: action.iconSize
       }, null, 8
       /* PROPS */
-      , ["name", "size"])) : _createCommentVNode("v-if", true), _createElementVNode("div", _hoisted_3, _toDisplayString(action.name), 1
-      /* TEXT */
+      , ["class", "name", "size"])) : _createCommentVNode("v-if", true), _createElementVNode("div", {
+        class: _normalizeClass(_ctx.n('action-name'))
+      }, _toDisplayString(action.name), 3
+      /* TEXT, CLASS */
       )], 14
       /* CLASS, STYLE, PROPS */
-      , _hoisted_2)), [[_directive_ripple, {
+      , _hoisted_1)), [[_directive_ripple, {
         disabled: action.disabled
       }]]);
     }), 128
@@ -83,7 +82,7 @@ export function render(_ctx, _cache) {
 
   }, 16
   /* FULL_PROPS */
-  , ["overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "show", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
+  , ["class", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "show", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
 }
 export default defineComponent({
   render,
@@ -102,8 +101,6 @@ export default defineComponent({
     var popupShow = ref(false);
 
     var handleSelect = action => {
-      var _props$onUpdateShow;
-
       if (action.disabled) {
         return;
       }
@@ -112,16 +109,21 @@ export default defineComponent({
         closeOnClickAction,
         onSelect
       } = props;
-      onSelect == null ? void 0 : onSelect(action);
-      closeOnClickAction && ((_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, false));
+      call(onSelect, action);
+      closeOnClickAction && call(props['onUpdate:show'], false);
     };
 
+    var handlePopupUpdateShow = value => call(props['onUpdate:show'], value);
+
     watch(() => props.show, newValue => {
       popupShow.value = newValue;
     }, {
       immediate: true
     });
     return {
+      n,
+      classes,
+      handlePopupUpdateShow,
       popupShow,
       pack,
       dt,

package/es/app-bar/AppBar.js

@@ -1,51 +1,54 @@
 import { defineComponent, ref, onMounted, onUpdated } from 'vue';
 import { props } from './props';
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  class: "var-app-bar__left"
-};
-var _hoisted_2 = {
-  key: 0,
-  class: "var-app-bar__title"
-};
-var _hoisted_3 = {
-  class: "var-app-bar__right"
-};
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('app-bar');
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode } from "vue";
 export function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(["var-app-bar", {
-      'var-elevation--3': _ctx.elevation
-    }]),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.elevation, 'var-elevation--3'])),
     style: _normalizeStyle({
       background: _ctx.color,
       color: _ctx.textColor
     })
-  }, [_createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "left"), _ctx.titlePosition === 'left' ? (_openBlock(), _createElementBlock("div", {
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('left'))
+  }, [_renderSlot(_ctx.$slots, "left"), _ctx.titlePosition === 'left' ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: "var-app-bar__title",
+    class: _normalizeClass(_ctx.n('title')),
     style: _normalizeStyle({
       paddingLeft: _ctx.paddingLeft
     })
   }, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.title), 1
   /* TEXT */
-  )])], 4
-  /* STYLE */
-  )) : _createCommentVNode("v-if", true)]), _ctx.titlePosition === 'center' ? (_openBlock(), _createElementBlock("div", _hoisted_2, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.title), 1
+  )])], 6
+  /* CLASS, STYLE */
+  )) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
+  ), _ctx.titlePosition === 'center' ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('title'))
+  }, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.title), 1
   /* TEXT */
-  )])])) : _createCommentVNode("v-if", true), _createElementVNode("div", _hoisted_3, [_ctx.titlePosition === 'right' ? (_openBlock(), _createElementBlock("div", {
+  )])], 2
+  /* CLASS */
+  )) : _createCommentVNode("v-if", true), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('right'))
+  }, [_ctx.titlePosition === 'right' ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: "var-app-bar__title",
+    class: _normalizeClass(_ctx.n('title')),
     style: _normalizeStyle({
       paddingRight: _ctx.paddingRight
     })
   }, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.title), 1
   /* TEXT */
-  )])], 4
-  /* STYLE */
-  )) : _createCommentVNode("v-if", true), _renderSlot(_ctx.$slots, "right")])], 6
+  )])], 6
+  /* CLASS, STYLE */
+  )) : _createCommentVNode("v-if", true), _renderSlot(_ctx.$slots, "right")], 2
+  /* CLASS */
+  )], 6
   /* CLASS, STYLE */
   );
 }
@@ -69,6 +72,8 @@ export default defineComponent({
     onMounted(computePadding);
     onUpdated(computePadding);
     return {
+      n,
+      classes,
       paddingLeft,
       paddingRight
     };

package/es/back-top/BackTop.js

@@ -4,6 +4,11 @@ import VarIcon from '../icon';
 import { props } from './props';
 import { isString, easeInOutCubic, throttle, isObject } from '../utils/shared';
 import { getScrollTop, getScrollLeft, scrollTo, getParentScroller, toPxNum, toSizeUnit } from '../utils/elements';
+import { call, createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('back-top');
 import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, withModifiers as _withModifiers, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, Teleport as _Teleport, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
@@ -14,7 +19,7 @@ export function render(_ctx, _cache) {
     to: "body",
     disabled: _ctx.disabled
   }, [_createElementVNode("div", {
-    class: _normalizeClass(["var-back-top", [_ctx.show ? 'var-back-top--active' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.show, _ctx.n('--active')])),
     ref: "backTopEl",
     style: _normalizeStyle({
       right: _ctx.toSizeUnit(_ctx.right),
@@ -56,7 +61,7 @@ export default defineComponent({
     var target;
 
     var click = event => {
-      props.onClick == null ? void 0 : props.onClick(event);
+      call(props.onClick, event);
       var left = getScrollLeft(target);
       scrollTo(target, {
         left,
@@ -103,6 +108,8 @@ export default defineComponent({
       show,
       backTopEl,
       toSizeUnit,
+      n,
+      classes,
       click
     };
   }

package/es/badge/Badge.js

@@ -2,24 +2,28 @@ import VarIcon from '../icon';
 import { computed, defineComponent } from 'vue';
 import { props } from './props';
 import { toNumber } from '../utils/shared';
-import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, vShow as _vShow, mergeProps as _mergeProps, createElementVNode as _createElementVNode, withDirectives as _withDirectives, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, renderSlot as _renderSlot, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('badge');
+import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, vShow as _vShow, mergeProps as _mergeProps, createElementVNode as _createElementVNode, withDirectives as _withDirectives, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
 var _hoisted_1 = {
-  class: "var-badge var--box"
-};
-var _hoisted_2 = {
   key: 1
 };
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createVNode(_Transition, {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box'))
+  }, [_createVNode(_Transition, {
     name: "var-badge-fade"
   }, {
     default: _withCtx(() => [_withDirectives(_createElementVNode("span", _mergeProps(_ctx.$attrs, {
-      class: ["var-badge__content", _ctx.contentClass],
+      class: _ctx.classes(_ctx.n('content'), ..._ctx.contentClass),
       style: {
         background: _ctx.color
       }
@@ -29,7 +33,7 @@ export function render(_ctx, _cache) {
       size: "10px"
     }, null, 8
     /* PROPS */
-    , ["name"])) : (_openBlock(), _createElementBlock("span", _hoisted_2, _toDisplayString(_ctx.values), 1
+    , ["name"])) : (_openBlock(), _createElementBlock("span", _hoisted_1, _toDisplayString(_ctx.values), 1
     /* TEXT */
     ))], 16
     /* FULL_PROPS */
@@ -37,7 +41,9 @@ export function render(_ctx, _cache) {
     _: 1
     /* STABLE */
 
-  }), _renderSlot(_ctx.$slots, "default")]);
+  }), _renderSlot(_ctx.$slots, "default")], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -59,11 +65,11 @@ export default defineComponent({
         dot,
         icon
       } = props;
-      var positionBasic = slots.default && "var-badge__position var-badge--" + position;
-      var dotClass = dot && 'var-badge__dot';
+      var positionBasic = slots.default && n('position') + " " + n("--" + position);
+      var dotClass = dot && n('dot');
       var positionClass = getPositionClass();
-      var iconClass = icon && 'var-badge__icon';
-      return ["var-badge--" + type, positionBasic, dotClass, positionClass, iconClass];
+      var iconClass = icon ? n('icon') : null;
+      return [n("--" + type), positionBasic, dotClass, positionClass, iconClass];
     });
     var values = computed(() => {
       var {
@@ -81,11 +87,13 @@ export default defineComponent({
         position,
         dot
       } = props;
-      if (dot && position.includes('right')) return 'var-badge__dot--right';
-      if (dot && position.includes('left')) return 'var-badge__dot--left';
+      if (dot && position.includes('right')) return n('dot--right');
+      if (dot && position.includes('left')) return n('dot--left');
     };
 
     return {
+      n,
+      classes,
       values,
       contentClass
     };

package/es/bottom-navigation/BottomNavigation.js

@@ -0,0 +1,204 @@
+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); }
+
+import VarButton from '../button';
+import { defineComponent, ref, computed, onMounted, onUpdated, watch } from 'vue';
+import { props } from './props';
+import { useBottomNavigationItems } from './provide';
+import { createNamespace, call } from '../utils/components';
+import { isNumber } from '../utils/shared';
+var {
+  n,
+  classes
+} = createNamespace('bottom-navigation');
+var {
+  n: nItem
+} = createNamespace('bottom-navigation-item');
+var RIGHT_HALF_SPACE_CLASS = nItem('--right-half-space');
+var LEFT_HALF_SPACE_CLASS = nItem('--left-half-space');
+var RIGHT_SPACE_CLASS = nItem('--right-space');
+var defaultFabProps = {
+  type: 'primary'
+};
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, mergeProps as _mergeProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementBlock as _createElementBlock } from "vue";
+export function render(_ctx, _cache) {
+  var _component_var_button = _resolveComponent("var-button");
+
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.fixed, _ctx.n('--fixed')], [_ctx.border, _ctx.n('--border')])),
+    ref: "bottomNavigationDom",
+    style: _normalizeStyle("z-index:" + _ctx.zIndex)
+  }, [_renderSlot(_ctx.$slots, "default"), _ctx.$slots.fab ? (_openBlock(), _createBlock(_component_var_button, _mergeProps({
+    key: 0,
+    class: _ctx.classes(_ctx.n('fab'), [_ctx.length % 2, _ctx.n('--fab-right'), _ctx.n('--fab-center')]),
+    "var-bottom-navigation__fab": "",
+    onClick: _ctx.handleFabClick
+  }, _ctx.fabProps, {
+    round: ""
+  }), {
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "fab")]),
+    _: 3
+    /* FORWARDED */
+
+  }, 16
+  /* FULL_PROPS */
+  , ["class", "onClick"])) : _createCommentVNode("v-if", true)], 6
+  /* CLASS, STYLE */
+  );
+}
+export default defineComponent({
+  render,
+  name: 'VarBottomNavigation',
+  components: {
+    VarButton
+  },
+  props,
+
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
+    var bottomNavigationDom = ref(null);
+    var active = computed(() => props.active);
+    var activeColor = computed(() => props.activeColor);
+    var inactiveColor = computed(() => props.inactiveColor);
+    var fabProps = ref({});
+    var {
+      length,
+      bottomNavigationItems,
+      bindBottomNavigationItem
+    } = useBottomNavigationItems();
+
+    var matchBoundary = () => {
+      if (length.value === 0 || matchName() || matchIndex()) {
+        return;
+      }
+
+      handleActiveIndex();
+    };
+
+    var matchName = () => {
+      return bottomNavigationItems.find(_ref2 => {
+        var {
+          name
+        } = _ref2;
+        return active.value === name.value;
+      });
+    };
+
+    var matchIndex = () => {
+      return bottomNavigationItems.find(_ref3 => {
+        var {
+          index
+        } = _ref3;
+        return active.value === index.value;
+      });
+    };
+
+    var handleActiveIndex = () => {
+      if (!isNumber(active.value)) {
+        return;
+      }
+
+      if (active.value < 0) {
+        call(props['onUpdate:active'], 0);
+      } else if (active.value > length.value - 1) {
+        call(props['onUpdate:active'], length.value - 1);
+      }
+    };
+
+    var onToggle = changedValue => {
+      props.onBeforeChange ? handleBeforeChange(changedValue) : handleChange(changedValue);
+    };
+
+    var handleBeforeChange = changedValue => {
+      Promise.resolve(call(props.onBeforeChange, changedValue)).then(res => res && handleChange(changedValue));
+    };
+
+    var handleChange = changedValue => {
+      call(props['onUpdate:active'], changedValue);
+      call(props.onChange, changedValue);
+    };
+
+    var removeMarginClass = () => {
+      var bottomNavigationItems = getBottomNavigationItems();
+      bottomNavigationItems.forEach(dom => {
+        dom.classList.remove(RIGHT_HALF_SPACE_CLASS, LEFT_HALF_SPACE_CLASS, RIGHT_SPACE_CLASS);
+      });
+    };
+
+    var addMarginClass = length => {
+      var bottomNavigationItems = getBottomNavigationItems();
+      var itemsNum = bottomNavigationItems.length;
+      var isEven = length % 2 === 0;
+      bottomNavigationItems.forEach((bottomNavigationItem, i) => {
+        handleMarginClass(isEven, bottomNavigationItem, i, itemsNum);
+      });
+    };
+
+    var handleMarginClass = (isEven, dom, i, length) => {
+      var isLast = i === length - 1;
+
+      if (!isEven && isLast) {
+        dom.classList.add(RIGHT_SPACE_CLASS);
+        return;
+      }
+
+      var isFabLeft = i === length / 2 - 1;
+      var isFabRight = i === length / 2;
+
+      if (isFabLeft) {
+        dom.classList.add(RIGHT_HALF_SPACE_CLASS);
+      } else if (isFabRight) {
+        dom.classList.add(LEFT_HALF_SPACE_CLASS);
+      }
+    };
+
+    var getBottomNavigationItems = () => {
+      return Array.from(bottomNavigationDom.value.querySelectorAll("." + nItem()));
+    };
+
+    var handleFabClick = () => {
+      call(props.onFabClick);
+    };
+
+    var bottomNavigationProvider = {
+      active,
+      activeColor,
+      inactiveColor,
+      onToggle
+    };
+    bindBottomNavigationItem(bottomNavigationProvider);
+    watch(() => length.value, matchBoundary);
+    watch(() => props.fabProps, newValue => {
+      fabProps.value = _extends({}, defaultFabProps, newValue);
+    }, {
+      immediate: true,
+      deep: true
+    });
+    onMounted(() => {
+      if (!slots.fab) {
+        return;
+      }
+
+      addMarginClass(length.value);
+    });
+    onUpdated(() => {
+      removeMarginClass();
+
+      if (!slots.fab) {
+        return;
+      }
+
+      addMarginClass(length.value);
+    });
+    return {
+      n,
+      classes,
+      length,
+      bottomNavigationDom,
+      handleFabClick,
+      fabProps
+    };
+  }
+
+});

package/es/bottom-navigation/bottomNavigation.css

@@ -0,0 +1 @@
+:root { --bottom-navigation-height: 50px; --bottom-navigation-z-index: 1; --bottom-navigation-background-color: #fff; --bottom-navigation-border-color: #e3e3e3; --bottom-navigation-fab-offset: 4px;}.var-bottom-navigation { width: 100%; height: var(--bottom-navigation-height); display: flex; position: relative; background-color: var(--bottom-navigation-background-color); transition: background-color 250ms, border-color 250ms; -webkit-tap-highlight-color: transparent;}.var-bottom-navigation--fixed { position: fixed; left: 0; bottom: 0;}.var-bottom-navigation--border { border-top: 1px solid var(--bottom-navigation-border-color);}.var-bottom-navigation__fab[var-bottom-navigation__fab] { width: var(--bottom-navigation-height); height: var(--bottom-navigation-height); position: absolute; z-index: 2; transform: translateY(-50%); overflow: hidden; transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.var-bottom-navigation--fab-center { right: calc(50% - var(--bottom-navigation-height) / 2);}.var-bottom-navigation--fab-right { right: var(--bottom-navigation-fab-offset);}

package/es/bottom-navigation/bottomNavigation.less

@@ -0,0 +1,51 @@
+@bottom-navigation-height: 50px;
+@bottom-navigation-z-index: 1;
+@bottom-navigation-background-color: #fff;
+@bottom-navigation-border-color: #e3e3e3;
+@bottom-navigation-fab-offset: 4px;
+
+:root {
+  --bottom-navigation-height: @bottom-navigation-height;
+  --bottom-navigation-z-index: @bottom-navigation-z-index;
+  --bottom-navigation-background-color: @bottom-navigation-background-color;
+  --bottom-navigation-border-color: @bottom-navigation-border-color;
+  --bottom-navigation-fab-offset: @bottom-navigation-fab-offset;
+}
+
+.var-bottom-navigation {
+  width: 100%;
+  height: var(--bottom-navigation-height);
+  display: flex;
+  position: relative;
+  background-color: var(--bottom-navigation-background-color);
+  transition: background-color 250ms, border-color 250ms;
+  -webkit-tap-highlight-color: transparent;
+
+  &--fixed {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+  }
+
+  &--border {
+    border-top: 1px solid var(--bottom-navigation-border-color);
+  }
+
+  &__fab[var-bottom-navigation__fab] {
+    width: var(--bottom-navigation-height);
+    height: var(--bottom-navigation-height);
+    position: absolute;
+    z-index: 2;
+    transform: translateY(-50%);
+    overflow: hidden;
+    transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  }
+
+  &--fab-center {
+    right: calc(50% - var(--bottom-navigation-height) / 2);
+  }
+
+  &--fab-right {
+    right: var(--bottom-navigation-fab-offset);
+  }
+}

package/es/bottom-navigation/index.js

@@ -0,0 +1,8 @@
+import BottomNavigation from './BottomNavigation.js'
+
+BottomNavigation.install = function (app) {
+  app.component(BottomNavigation.name, BottomNavigation);
+};
+
+export var _BottomNavigationComponent = BottomNavigation;
+export default BottomNavigation;