@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/lib/bottom-navigation/BottomNavigation.js

@@ -0,0 +1,183 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.render = render;
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _button = _interopRequireDefault(require("../button"));
+
+var _provide = require("./provide");
+
+var _components = require("../utils/components");
+
+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); }
+
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('bottom-navigation');
+var {
+  n: nItem
+} = (0, _components.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'
+};
+
+function render(_ctx, _cache) {
+  var _component_var_button = (0, _vue.resolveComponent)("var-button");
+
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.fixed, _ctx.n('--fixed')], [_ctx.border, _ctx.n('--border')])),
+    ref: "bottomNavigationDom",
+    style: (0, _vue.normalizeStyle)("z-index:" + _ctx.zIndex)
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default"), _ctx.$slots.fab ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_button, (0, _vue.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: (0, _vue.withCtx)(() => [(0, _vue.renderSlot)(_ctx.$slots, "fab")]),
+    _: 3
+    /* FORWARDED */
+
+  }, 16
+  /* FULL_PROPS */
+  , ["class", "onClick"])) : (0, _vue.createCommentVNode)("v-if", true)], 6
+  /* CLASS, STYLE */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarBottomNavigation',
+  components: {
+    VarButton: _button.default
+  },
+  props: _props.props,
+
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
+    var bottomNavigationDom = (0, _vue.ref)(null);
+    var active = (0, _vue.computed)(() => props.modelValue);
+    var activeColor = (0, _vue.computed)(() => props.activeColor);
+    var inactiveColor = (0, _vue.computed)(() => props.inactiveColor);
+    var fabProps = (0, _vue.ref)({});
+
+    var onToggle = changedValue => {
+      if (props.onBeforeChange) {
+        handleBeforeChange(changedValue);
+      } else {
+        handleChange(changedValue);
+      }
+    };
+
+    var handleBeforeChange = changedValue => {
+      Promise.resolve((0, _components.call)(props.onBeforeChange, changedValue)).then(res => {
+        if (res) {
+          handleChange(changedValue);
+        }
+      });
+    };
+
+    var handleChange = changedValue => {
+      (0, _components.call)(props['onUpdate:modelValue'], changedValue);
+      (0, _components.call)(props.onChange, changedValue);
+    };
+
+    var {
+      length,
+      bindBottomNavigationItem
+    } = (0, _provide.useBottomNavigationItems)();
+
+    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 = () => {
+      (0, _components.call)(props.onFabClick);
+    };
+
+    fabProps.value = _extends({}, defaultFabProps, props.fabProps);
+    var bottomNavigationProvider = {
+      active,
+      activeColor,
+      inactiveColor,
+      onToggle
+    };
+    bindBottomNavigationItem(bottomNavigationProvider);
+    (0, _vue.onMounted)(() => {
+      if (!slots.fab) {
+        return;
+      }
+
+      addMarginClass(length.value);
+    });
+    (0, _vue.onUpdated)(() => {
+      removeMarginClass();
+
+      if (!slots.fab) {
+        return;
+      }
+
+      addMarginClass(length.value);
+    });
+    return {
+      n,
+      classes,
+      length,
+      bottomNavigationDom,
+      handleFabClick,
+      fabProps
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/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;}.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 cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.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: 0;}

package/lib/bottom-navigation/bottomNavigation.less

@@ -0,0 +1,49 @@
+@bottom-navigation-height: 50px;
+@bottom-navigation-z-index: 1;
+@bottom-navigation-background-color: #fff;
+@bottom-navigation-border-color: #e3e3e3;
+
+: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;
+}
+
+.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 cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+  &--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: 0;
+  }
+}

package/lib/bottom-navigation/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._BottomNavigationComponent = void 0;
+
+var _BottomNavigation = _interopRequireDefault(require("./BottomNavigation.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_BottomNavigation.default.install = function (app) {
+  app.component(_BottomNavigation.default.name, _BottomNavigation.default);
+};
+
+var _BottomNavigationComponent = _BottomNavigation.default;
+exports._BottomNavigationComponent = _BottomNavigationComponent;
+var _default = _BottomNavigation.default;
+exports.default = _default;

package/lib/bottom-navigation/props.js

@@ -0,0 +1,45 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  modelValue: {
+    type: [Number, String],
+    default: 0
+  },
+  fixed: {
+    type: Boolean,
+    default: false
+  },
+  border: {
+    type: Boolean,
+    default: false
+  },
+  zIndex: {
+    type: [Number, String],
+    default: 1
+  },
+  activeColor: {
+    type: String
+  },
+  inactiveColor: {
+    type: String
+  },
+  onChange: {
+    type: Function
+  },
+  'onUpdate:modelValue': {
+    type: Function
+  },
+  onBeforeChange: {
+    type: Function
+  },
+  onFabClick: {
+    type: Function
+  },
+  fabProps: {
+    type: [Object],
+    default: {}
+  }
+};
+exports.props = props;

package/lib/bottom-navigation/provide.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.BOTTOM_NAVIGATION_COUNT_BOTTOM_NAVIGATION_ITEM_KEY = exports.BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY = void 0;
+exports.useBottomNavigationItems = useBottomNavigationItems;
+
+var _components = require("../utils/components");
+
+var BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY = Symbol('BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY');
+exports.BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY = BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY;
+var BOTTOM_NAVIGATION_COUNT_BOTTOM_NAVIGATION_ITEM_KEY = Symbol('BOTTOM_NAVIGATION_COUNT_BOTTOM_NAVIGATION_ITEM_KEY');
+exports.BOTTOM_NAVIGATION_COUNT_BOTTOM_NAVIGATION_ITEM_KEY = BOTTOM_NAVIGATION_COUNT_BOTTOM_NAVIGATION_ITEM_KEY;
+
+function useBottomNavigationItems() {
+  var {
+    childProviders,
+    bindChildren
+  } = (0, _components.useChildren)(BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY);
+  var {
+    length
+  } = (0, _components.useAtChildrenCounter)(BOTTOM_NAVIGATION_COUNT_BOTTOM_NAVIGATION_ITEM_KEY);
+  return {
+    length,
+    bottomNavigationItems: childProviders,
+    bindBottomNavigationItem: bindChildren
+  };
+}

package/lib/bottom-navigation/style/index.js

@@ -0,0 +1,4 @@
+require('../../styles/common.css')
+require('../../button/button.css')
+require('../bottomNavigation.css')
+require('../BottomNavigationSfc.css')

package/lib/bottom-navigation/style/less.js

@@ -0,0 +1,4 @@
+require('../../styles/common.less')
+require('../../button/button.less')
+require('../bottomNavigation.less')
+require('../BottomNavigationSfc.less')

package/lib/bottom-navigation-item/BottomNavigationItem.js

@@ -0,0 +1,140 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.render = render;
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _ripple = _interopRequireDefault(require("../ripple"));
+
+var _badge = _interopRequireDefault(require("../badge"));
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _provide = require("./provide");
+
+var _components = require("../utils/components");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('bottom-navigation-item');
+var defaultBadgeProps = {
+  type: 'danger',
+  dot: true
+};
+
+function render(_ctx, _cache) {
+  var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
+
+  var _component_var_badge = (0, _vue.resolveComponent)("var-badge");
+
+  var _directive_ripple = (0, _vue.resolveDirective)("ripple");
+
+  return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("button", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.active === _ctx.index || _ctx.active === _ctx.name, _ctx.n('--active')])),
+    style: (0, _vue.normalizeStyle)({
+      color: _ctx.computeColorStyle()
+    }),
+    onClick: _cache[0] || (_cache[0] = function () {
+      return _ctx.handleClick && _ctx.handleClick(...arguments);
+    })
+  }, [_ctx.icon && !_ctx.$slots.icon ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
+    key: 0,
+    name: _ctx.icon,
+    namespace: _ctx.namespace,
+    class: (0, _vue.normalizeClass)(_ctx.n('icon')),
+    "var-bottom-navigation-item-cover": ""
+  }, null, 8
+  /* PROPS */
+  , ["name", "namespace", "class"])) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.renderSlot)(_ctx.$slots, "icon", {
+    active: _ctx.active === _ctx.index || _ctx.active === _ctx.name
+  }), _ctx.badge ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_badge, (0, _vue.mergeProps)({
+    key: 1
+  }, _ctx.badgeProps, {
+    class: _ctx.n('badge'),
+    "var-bottom-navigation-item-cover": ""
+  }), null, 16
+  /* FULL_PROPS */
+  , ["class"])) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("span", {
+    class: (0, _vue.normalizeClass)(_ctx.n('label'))
+  }, [!_ctx.$slots.default ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)(_vue.Fragment, {
+    key: 0
+  }, [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.label), 1
+  /* TEXT */
+  )], 2112
+  /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.renderSlot)(_ctx.$slots, "default")], 2
+  /* CLASS */
+  )], 6
+  /* CLASS, STYLE */
+  )), [[_directive_ripple]]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarBottomNavigationItem',
+  components: {
+    VarBadge: _badge.default,
+    VarIcon: _icon.default
+  },
+  directives: {
+    Ripple: _ripple.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var name = (0, _vue.computed)(() => props.name);
+    var badge = (0, _vue.computed)(() => props.badge);
+    var badgeProps = (0, _vue.ref)({});
+    var {
+      index,
+      bottomNavigation,
+      bindBottomNavigation
+    } = (0, _provide.useBottomNavigation)();
+    var {
+      active,
+      activeColor,
+      inactiveColor
+    } = bottomNavigation;
+    var bottomNavigationItemProvider = {
+      name,
+      index
+    };
+    bindBottomNavigation(bottomNavigationItemProvider);
+
+    var computeColorStyle = () => {
+      return active.value === name.value || active.value === index.value ? activeColor.value : inactiveColor.value;
+    };
+
+    var handleClick = () => {
+      var active = name.value || index.value;
+      (0, _components.call)(props.onClick, active);
+      (0, _components.call)(bottomNavigation.onToggle, active);
+    };
+
+    (0, _vue.watch)(() => badge.value, newValue => {
+      badgeProps.value = newValue === true ? defaultBadgeProps : badge.value;
+    }, {
+      immediate: true
+    });
+    return {
+      n,
+      classes,
+      index,
+      active,
+      badge,
+      badgeProps,
+      computeColorStyle,
+      handleClick
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/bottom-navigation-item/bottomNavigationItem.css

@@ -0,0 +1 @@
+:root { --bottom-navigation-item-font-size: var(--font-size-sm); --bottom-navigation-item-inactive-color: #646566; --bottom-navigation-item-active-color: var(--color-primary); --bottom-navigation-item-active-background-color: #fff; --bottom-navigation-item-line-height: 1; --bottom-navigation-item-icon-size: 22px; --bottom-navigation-item-icon-margin-bottom: 5px;}.var-bottom-navigation-item { height: 100%; padding: 6px 12px 8px; position: relative; display: inline-flex; flex: 1 1 0%; flex-direction: column; align-items: center; justify-content: center; line-height: var(--bottom-navigation-item-line-height); color: var(--bottom-navigation-item-inactive-color); cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none; background-color: transparent; outline: 0; border: 0; transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, margin 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.var-bottom-navigation-item--active { color: var(--bottom-navigation-item-active-color); background-color: var(--bottom-navigation-item-active-background-color); transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.var-bottom-navigation-item--active .var-bottom-navigation-item__label { font-size: calc(var(--bottom-navigation-item-font-size) * 1.16);}.var-bottom-navigation-item--right-half-space { margin-right: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--left-half-space { margin-left: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--right-space { margin-right: var(--bottom-navigation-height);}.var-bottom-navigation-item__icon[var-bottom-navigation-item-cover] { font-size: var(--bottom-navigation-item-icon-size);}.var-bottom-navigation-item__badge[var-bottom-navigation-item-cover] { position: absolute; left: 4px; transform: translateY(-22px);}.var-bottom-navigation-item__label { margin-top: var(--bottom-navigation-item-icon-margin-bottom); font-size: var(--bottom-navigation-item-font-size); transition: font-size 0.2s ease 0.1s; white-space: nowrap;}

package/lib/bottom-navigation-item/bottomNavigationItem.less

@@ -0,0 +1,78 @@
+@bottom-navigation-item-font-size: var(--font-size-sm);
+@bottom-navigation-item-inactive-color: #646566;
+@bottom-navigation-item-active-color: var(--color-primary);
+@bottom-navigation-item-active-background-color: #fff;
+@bottom-navigation-item-line-height: 1;
+@bottom-navigation-item-icon-size: 22px;
+@bottom-navigation-item-icon-margin-bottom: 5px;
+
+:root {
+  --bottom-navigation-item-font-size: @bottom-navigation-item-font-size;
+  --bottom-navigation-item-inactive-color: @bottom-navigation-item-inactive-color;
+  --bottom-navigation-item-active-color: @bottom-navigation-item-active-color;
+  --bottom-navigation-item-active-background-color: @bottom-navigation-item-active-background-color;
+  --bottom-navigation-item-line-height: @bottom-navigation-item-line-height;
+  --bottom-navigation-item-icon-size: @bottom-navigation-item-icon-size;
+  --bottom-navigation-item-icon-margin-bottom: @bottom-navigation-item-icon-margin-bottom;
+}
+
+.var-bottom-navigation-item {
+  height: 100%;
+  padding: 6px 12px 8px;
+  position: relative;
+  display: inline-flex;
+  flex: 1 1 0%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  line-height: var(--bottom-navigation-item-line-height);
+  color: var(--bottom-navigation-item-inactive-color);
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  appearance: none;
+  text-decoration: none;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, margin 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+  &--active {
+    color: var(--bottom-navigation-item-active-color);
+    background-color: var(--bottom-navigation-item-active-background-color);
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    .var-bottom-navigation-item__label {
+      font-size: calc(var(--bottom-navigation-item-font-size) * 1.16);
+    }
+  }
+
+  &--right-half-space {
+    margin-right: calc(var(--bottom-navigation-height) / 2);
+  }
+
+  &--left-half-space {
+    margin-left: calc(var(--bottom-navigation-height) / 2);
+  }
+
+  &--right-space {
+    margin-right: var(--bottom-navigation-height);
+  }
+
+  &__icon[var-bottom-navigation-item-cover] {
+    font-size: var(--bottom-navigation-item-icon-size);
+  }
+
+  &__badge[var-bottom-navigation-item-cover] {
+    position: absolute;
+    left: 4px;
+    transform: translateY(-22px);
+  }
+
+  &__label {
+    margin-top: var(--bottom-navigation-item-icon-margin-bottom);
+    font-size: var(--bottom-navigation-item-font-size);
+    transition: font-size 0.2s ease 0.1s;
+    white-space: nowrap;
+  }
+}

package/lib/bottom-navigation-item/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._BottomNavigationItemComponent = void 0;
+
+var _BottomNavigationItem = _interopRequireDefault(require("./BottomNavigationItem.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_BottomNavigationItem.default.install = function (app) {
+  app.component(_BottomNavigationItem.default.name, _BottomNavigationItem.default);
+};
+
+var _BottomNavigationItemComponent = _BottomNavigationItem.default;
+exports._BottomNavigationItemComponent = _BottomNavigationItemComponent;
+var _default = _BottomNavigationItem.default;
+exports.default = _default;

package/lib/bottom-navigation-item/props.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  name: {
+    type: String
+  },
+  icon: {
+    type: String
+  },
+  label: {
+    type: String
+  },
+  namespace: {
+    type: String,
+    default: 'var-icon'
+  },
+  badge: {
+    type: [Boolean, Object],
+    default: false
+  },
+  onClick: {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/bottom-navigation-item/provide.js

@@ -0,0 +1,28 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useBottomNavigation = useBottomNavigation;
+
+var _components = require("../utils/components");
+
+var _provide = require("../bottom-navigation/provide");
+
+function useBottomNavigation() {
+  var {
+    parentProvider,
+    bindParent
+  } = (0, _components.useParent)(_provide.BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY);
+  var {
+    index
+  } = (0, _components.useAtParentIndex)(_provide.BOTTOM_NAVIGATION_COUNT_BOTTOM_NAVIGATION_ITEM_KEY);
+
+  if (!parentProvider || !bindParent || !index) {
+    throw Error('<var-bottom-navigation-item/> must in <var-bottom-navigation/>');
+  }
+
+  return {
+    index,
+    bottomNavigation: parentProvider,
+    bindBottomNavigation: bindParent
+  };
+}

package/lib/bottom-navigation-item/style/index.js

@@ -0,0 +1,6 @@
+require('../../styles/common.css')
+require('../../ripple/ripple.css')
+require('../../badge/badge.css')
+require('../../icon/icon.css')
+require('../bottomNavigationItem.css')
+require('../BottomNavigationItemSfc.css')

package/lib/bottom-navigation-item/style/less.js

@@ -0,0 +1,6 @@
+require('../../styles/common.less')
+require('../../ripple/ripple.less')
+require('../../badge/badge.less')
+require('../../icon/icon.less')
+require('../bottomNavigationItem.less')
+require('../BottomNavigationItemSfc.less')