@varlet/ui 2.20.1 → 2.20.2

package/es/avatar/props.mjs

@@ -0,0 +1,30 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  round: {
+    type: Boolean,
+    default: true
+  },
+  size: {
+    type: [String, Number],
+    default: "normal"
+  },
+  alt: String,
+  color: String,
+  src: String,
+  fit: {
+    type: String,
+    default: "cover"
+  },
+  bordered: Boolean,
+  borderColor: String,
+  loading: String,
+  error: String,
+  lazy: Boolean,
+  hoverable: Boolean,
+  onClick: defineListenerProp(),
+  onLoad: defineListenerProp(),
+  onError: defineListenerProp()
+};
+export {
+  props
+};

package/es/avatar/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../avatar.css'
+import '../AvatarSfc.css'

package/es/avatar-group/AvatarGroup.mjs

@@ -0,0 +1,45 @@
+import { defineComponent, computed } from "vue";
+import { props } from "./props.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+const { name, n, classes } = createNamespace("avatar-group");
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.vertical, _ctx.n("--column"), _ctx.n("--row")])),
+      style: _normalizeStyle(_ctx.rootStyles)
+    },
+    [
+      _renderSlot(_ctx.$slots, "default")
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const rootStyles = computed(() => {
+      if (props2.offset == null) {
+        return {};
+      }
+      return {
+        "--avatar-group-offset": toSizeUnit(props2.offset)
+      };
+    });
+    return {
+      rootStyles,
+      n,
+      classes,
+      toSizeUnit
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/avatar-group/avatarGroup.css

@@ -0,0 +1 @@
+:root { --avatar-group-offset: -10px;}.var-avatar-group { display: inline-flex; flex-wrap: wrap;}.var-avatar-group--row { margin-left: calc(var(--avatar-group-offset) * -1);}.var-avatar-group--row .var-avatar { margin-left: var(--avatar-group-offset);}.var-avatar-group--column { flex-direction: column; margin-top: calc(var(--avatar-group-offset) * -1);}.var-avatar-group--column .var-avatar { margin-top: var(--avatar-group-offset);}

package/es/avatar-group/index.mjs

@@ -0,0 +1,12 @@
+import AvatarGroup from "./AvatarGroup.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as avatarGroupProps } from "./props.mjs";
+withInstall(AvatarGroup);
+withPropsDefaultsSetter(AvatarGroup, avatarGroupProps);
+const _AvatarGroupComponent = AvatarGroup;
+var stdin_default = AvatarGroup;
+export {
+  _AvatarGroupComponent,
+  avatarGroupProps,
+  stdin_default as default
+};

package/es/avatar-group/props.mjs

@@ -0,0 +1,7 @@
+const props = {
+  offset: [Number, String],
+  vertical: Boolean
+};
+export {
+  props
+};

package/es/avatar-group/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../avatarGroup.css'
+import '../AvatarGroupSfc.css'

package/es/back-top/BackTop.mjs

@@ -0,0 +1,108 @@
+import VarButton from "../button/index.mjs";
+import VarIcon from "../icon/index.mjs";
+import { defineComponent, ref, onMounted, onActivated } from "vue";
+import { props } from "./props.mjs";
+import { throttle, getScrollTop, getScrollLeft, call } from "@varlet/shared";
+import { easeInOutCubic } from "../utils/shared.mjs";
+import { scrollTo, getParentScroller, toPxNum, toSizeUnit, getTarget } from "../utils/elements.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { onSmartUnmounted } from "@varlet/use";
+const { name, n, classes } = createNamespace("back-top");
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, withModifiers as _withModifiers, mergeProps as _mergeProps, createElementVNode as _createElementVNode, Teleport as _Teleport, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  const _component_var_button = _resolveComponent("var-button");
+  return _openBlock(), _createBlock(_Teleport, {
+    to: "body",
+    disabled: _ctx.disabled
+  }, [
+    _createElementVNode(
+      "div",
+      _mergeProps({
+        class: _ctx.classes(_ctx.n(), [_ctx.show, _ctx.n("--active")]),
+        ref: "backTopEl",
+        style: {
+          right: _ctx.toSizeUnit(_ctx.right),
+          bottom: _ctx.toSizeUnit(_ctx.bottom)
+        }
+      }, _ctx.$attrs, {
+        onClick: _cache[0] || (_cache[0] = _withModifiers((...args) => _ctx.handleClick && _ctx.handleClick(...args), ["stop"]))
+      }),
+      [
+        _renderSlot(_ctx.$slots, "default", {}, () => [
+          _createVNode(_component_var_button, {
+            elevation: _ctx.elevation,
+            type: "primary",
+            round: "",
+            "var-back-top-cover": ""
+          }, {
+            default: _withCtx(() => [
+              _createVNode(_component_var_icon, { name: "chevron-up" })
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["elevation"])
+        ])
+      ],
+      16
+      /* FULL_PROPS */
+    )
+  ], 8, ["disabled"]);
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarButton,
+    VarIcon
+  },
+  inheritAttrs: false,
+  props,
+  setup(props2) {
+    const show = ref(false);
+    const backTopEl = ref(null);
+    const disabled = ref(true);
+    let scroller;
+    const handleScroll = throttle(() => {
+      show.value = getScrollTop(scroller) >= toPxNum(props2.visibilityHeight);
+    }, 200);
+    onMounted(() => {
+      setScroller();
+      addScrollerEventListener();
+      disabled.value = false;
+    });
+    onActivated(addScrollerEventListener);
+    onSmartUnmounted(removeScrollerEventListener);
+    function handleClick(event) {
+      call(props2.onClick, event);
+      const left = getScrollLeft(scroller);
+      scrollTo(scroller, {
+        left,
+        duration: props2.duration,
+        animation: easeInOutCubic
+      });
+    }
+    function setScroller() {
+      scroller = props2.target ? getTarget(props2.target, "BackTop") : getParentScroller(backTopEl.value);
+    }
+    function addScrollerEventListener() {
+      scroller.addEventListener("scroll", handleScroll);
+    }
+    function removeScrollerEventListener() {
+      scroller.removeEventListener("scroll", handleScroll);
+    }
+    return {
+      disabled,
+      show,
+      backTopEl,
+      toSizeUnit,
+      n,
+      classes,
+      handleClick
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/back-top/backTop.css

@@ -0,0 +1 @@
+:root { --back-top-right: 40px; --back-top-bottom: 40px; --back-top-button-size: 40px;}.var-back-top { position: fixed; z-index: 100; right: var(--back-top-right); bottom: var(--back-top-bottom); transform: scale(0); transition: 0.3s var(--cubic-bezier); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-back-top .var-button[var-back-top-cover] { width: var(--back-top-button-size); height: var(--back-top-button-size);}.var-back-top--active { transform: scale(1);}

package/es/back-top/index.mjs

@@ -0,0 +1,12 @@
+import BackTop from "./BackTop.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as backTopProps } from "./props.mjs";
+withInstall(BackTop);
+withPropsDefaultsSetter(BackTop, backTopProps);
+const _BackTopComponent = BackTop;
+var stdin_default = BackTop;
+export {
+  _BackTopComponent,
+  backTopProps,
+  stdin_default as default
+};

package/es/back-top/props.mjs

@@ -0,0 +1,22 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  visibilityHeight: {
+    type: [Number, String],
+    default: 200
+  },
+  duration: {
+    type: Number,
+    default: 300
+  },
+  right: [Number, String],
+  elevation: {
+    type: [Boolean, Number, String],
+    default: true
+  },
+  bottom: [Number, String],
+  target: [String, Object],
+  onClick: defineListenerProp()
+};
+export {
+  props
+};

package/es/back-top/style/index.mjs

@@ -0,0 +1,5 @@
+import '../../styles/common.css'
+import '../../button/button.css'
+import '../../icon/icon.css'
+import '../backTop.css'
+import '../BackTopSfc.css'

package/es/badge/Badge.mjs

@@ -0,0 +1,111 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import VarIcon from "../icon/index.mjs";
+import { toNumber } from "@varlet/shared";
+import { computed, defineComponent } from "vue";
+import { props } from "./props.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+const { name, n, classes } = createNamespace("badge");
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, 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, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
+const _hoisted_1 = { key: 0 };
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box")))
+    },
+    [
+      _renderSlot(_ctx.$slots, "default"),
+      _createVNode(_Transition, {
+        name: _ctx.n("$-badge-fade"),
+        persisted: ""
+      }, {
+        default: _withCtx(() => [
+          _withDirectives(_createElementVNode(
+            "span",
+            _mergeProps({
+              class: _ctx.classes(
+                _ctx.n("content"),
+                _ctx.n(`--${_ctx.type}`),
+                [_ctx.$slots.default, _ctx.n(`--${_ctx.position}`), _ctx.n("--offset")],
+                [_ctx.dot, _ctx.n("--dot")],
+                [_ctx.icon, _ctx.n("--icon")]
+              ),
+              style: __spreadValues({ background: _ctx.color }, _ctx.offsetStyle)
+            }, _ctx.$attrs),
+            [
+              _ctx.icon ? (_openBlock(), _createBlock(_component_var_icon, {
+                key: 0,
+                class: _normalizeClass(_ctx.n("icon")),
+                "var-badge-cover": "",
+                name: _ctx.icon,
+                namespace: _ctx.namespace
+              }, null, 8, ["class", "name", "namespace"])) : _createCommentVNode("v-if", true),
+              _renderSlot(_ctx.$slots, "value", {}, () => [
+                !_ctx.icon && !_ctx.dot ? (_openBlock(), _createElementBlock(
+                  "span",
+                  _hoisted_1,
+                  _toDisplayString(_ctx.value),
+                  1
+                  /* TEXT */
+                )) : _createCommentVNode("v-if", true)
+              ])
+            ],
+            16
+            /* FULL_PROPS */
+          ), [
+            [_vShow, !_ctx.hidden]
+          ])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["name"])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: { VarIcon },
+  inheritAttrs: false,
+  props,
+  setup(props2) {
+    const value = computed(() => {
+      const { value: value2, maxValue } = props2;
+      return value2 != null && maxValue != null && toNumber(value2) > toNumber(maxValue) ? `${maxValue}+` : value2;
+    });
+    const offsetStyle = computed(() => ({
+      [`--badge-offset-y`]: toSizeUnit(props2.offsetY),
+      [`--badge-offset-x`]: toSizeUnit(props2.offsetX)
+    }));
+    return {
+      value,
+      offsetStyle,
+      n,
+      classes
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/badge/badge.css

@@ -0,0 +1 @@
+:root { --badge-content-padding: 2px 6px; --badge-content-border: none; --badge-content-border-radius: 100px; --badge-content-font-size: 12px; --badge-icon-size: 12px; --badge-default-color: #e0e0e0; --badge-primary-color: var(--color-primary); --badge-danger-color: var(--color-danger); --badge-success-color: var(--color-success); --badge-warning-color: var(--color-warning); --badge-info-color: var(--color-info); --badge-dot-width: 8px; --badge-dot-height: 8px;}.var-badge { display: inline-block; position: relative; transition: background-color 0.25s;}.var-badge__content { display: inline-block; vertical-align: middle; text-align: center; padding: var(--badge-content-padding); border: var(--badge-content-border); border-radius: var(--badge-content-border-radius); color: #fff; font-size: var(--badge-content-font-size);}.var-badge--offset { transform: translateX(var(--badge-offset-x)) translateY(var(--badge-offset-y));}.var-badge__icon[var-badge-cover] { font-size: var(--badge-icon-size);}.var-badge--icon { padding: 2px 4px;}.var-badge--dot { box-sizing: content-box; width: var(--badge-dot-width); height: var(--badge-dot-height); padding: 0;}.var-badge--default { background: var(--badge-default-color);}.var-badge--primary { background: var(--badge-primary-color);}.var-badge--info { background: var(--badge-info-color);}.var-badge--warning { background: var(--badge-warning-color);}.var-badge--success { background: var(--badge-success-color);}.var-badge--danger { background: var(--badge-danger-color);}.var-badge--right-top { position: absolute; top: 0; right: 0; transform: translateY(calc(-50% + var(--badge-offset-y))) translateX(calc(50% + var(--badge-offset-x)));}.var-badge--left-top { position: absolute; top: 0; left: 0; transform: translateY(calc(-50% + var(--badge-offset-y))) translateX(calc(-50% + var(--badge-offset-x)));}.var-badge--right-bottom { position: absolute; bottom: 0; right: 0; transform: translateY(calc(50% + var(--badge-offset-y))) translateX(calc(50% + var(--badge-offset-x)));}.var-badge--left-bottom { position: absolute; bottom: 0; left: 0; transform: translateY(calc(50% + var(--badge-offset-y))) translateX(calc(-50% + var(--badge-offset-x)));}.var-badge-fade-enter-active,.var-badge-fade-leave-active { transition: opacity 0.15s var(--cubic-bezier);}.var-badge-fade-enter-from,.var-badge-fade-leave-to { opacity: 0;}

package/es/badge/index.mjs

@@ -0,0 +1,12 @@
+import Badge from "./Badge.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as badgeProps } from "./props.mjs";
+withInstall(Badge);
+withPropsDefaultsSetter(Badge, badgeProps);
+const _BadgeComponent = Badge;
+var stdin_default = Badge;
+export {
+  _BadgeComponent,
+  badgeProps,
+  stdin_default as default
+};

package/es/badge/props.mjs

@@ -0,0 +1,33 @@
+import { pickProps } from "../utils/components.mjs";
+import { iconProps } from "../icon/index.mjs";
+const props = {
+  type: {
+    type: String,
+    default: "default"
+  },
+  position: {
+    type: String,
+    default: "right-top"
+  },
+  hidden: Boolean,
+  value: {
+    type: [String, Number],
+    default: 0
+  },
+  maxValue: [String, Number],
+  dot: Boolean,
+  icon: pickProps(iconProps, "name"),
+  namespace: pickProps(iconProps, "namespace"),
+  color: String,
+  offsetX: {
+    type: [String, Number],
+    default: 0
+  },
+  offsetY: {
+    type: [String, Number],
+    default: 0
+  }
+};
+export {
+  props
+};

package/es/badge/style/index.mjs

@@ -0,0 +1,4 @@
+import '../../styles/common.css'
+import '../../icon/icon.css'
+import '../badge.css'
+import '../BadgeSfc.css'

package/es/bottom-navigation/BottomNavigation.mjs

@@ -0,0 +1,188 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import VarButton from "../button/index.mjs";
+import { defineComponent, ref, computed, onUpdated, watch } from "vue";
+import { props } from "./props.mjs";
+import { useBottomNavigationItems } from "./provide.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { isNumber, normalizeToArray, call } from "@varlet/shared";
+import { onSmartMounted } from "@varlet/use";
+const { name, n, classes } = createNamespace("bottom-navigation");
+const { n: nItem } = createNamespace("bottom-navigation-item");
+const RIGHT_HALF_SPACE_CLASS = nItem("--right-half-space");
+const LEFT_HALF_SPACE_CLASS = nItem("--left-half-space");
+const RIGHT_SPACE_CLASS = nItem("--right-space");
+const 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";
+function __render__(_ctx, _cache) {
+  const _component_var_button = _resolveComponent("var-button");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.fixed, _ctx.n("--fixed")], [_ctx.border, _ctx.n("--border")], [_ctx.safeArea, _ctx.n("--safe-area")])),
+      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, ["class", "onClick"])) : _createCommentVNode("v-if", true)
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: { VarButton },
+  props,
+  setup(props2, { slots }) {
+    const bottomNavigationDom = ref(null);
+    const active = computed(() => props2.active);
+    const activeColor = computed(() => props2.activeColor);
+    const inactiveColor = computed(() => props2.inactiveColor);
+    const fabProps = ref({});
+    const { length, bottomNavigationItems, bindBottomNavigationItem } = useBottomNavigationItems();
+    const bottomNavigationProvider = {
+      active,
+      activeColor,
+      inactiveColor,
+      onToggle
+    };
+    bindBottomNavigationItem(bottomNavigationProvider);
+    watch(() => length.value, matchBoundary);
+    watch(
+      () => props2.fabProps,
+      (newValue) => {
+        fabProps.value = __spreadValues(__spreadValues({}, defaultFabProps), newValue);
+      },
+      { immediate: true, deep: true }
+    );
+    onSmartMounted(() => {
+      if (!slots.fab) {
+        return;
+      }
+      addMarginClass(length.value);
+    });
+    onUpdated(() => {
+      removeMarginClass();
+      if (!slots.fab) {
+        return;
+      }
+      addMarginClass(length.value);
+    });
+    function matchBoundary() {
+      if (length.value === 0 || matchName() || matchIndex()) {
+        return;
+      }
+      handleActiveIndex();
+    }
+    function matchName() {
+      return bottomNavigationItems.find(({ name: name2 }) => active.value === name2.value);
+    }
+    function matchIndex() {
+      return bottomNavigationItems.find(({ index }) => active.value === index.value);
+    }
+    function handleActiveIndex() {
+      if (!isNumber(active.value)) {
+        return;
+      }
+      if (active.value < 0) {
+        call(props2["onUpdate:active"], 0);
+      } else if (active.value > length.value - 1) {
+        call(props2["onUpdate:active"], length.value - 1);
+      }
+    }
+    function onToggle(changedValue) {
+      if (active.value === changedValue) {
+        return;
+      }
+      props2.onBeforeChange ? handleBeforeChange(changedValue) : handleChange(changedValue);
+    }
+    function handleBeforeChange(changedValue) {
+      const results = normalizeToArray(call(props2.onBeforeChange, changedValue));
+      Promise.all(results).then((results2) => {
+        if (results2.every(Boolean)) {
+          handleChange(changedValue);
+        }
+      });
+    }
+    function handleChange(changedValue) {
+      call(props2["onUpdate:active"], changedValue);
+      call(props2.onChange, changedValue);
+    }
+    function removeMarginClass() {
+      const bottomNavigationItems2 = getBottomNavigationItems();
+      bottomNavigationItems2.forEach((dom) => {
+        dom.classList.remove(RIGHT_HALF_SPACE_CLASS, LEFT_HALF_SPACE_CLASS, RIGHT_SPACE_CLASS);
+      });
+    }
+    function addMarginClass(length2) {
+      const bottomNavigationItems2 = getBottomNavigationItems();
+      const itemsNum = bottomNavigationItems2.length;
+      const isEven = length2 % 2 === 0;
+      bottomNavigationItems2.forEach((bottomNavigationItem, i) => {
+        handleMarginClass(isEven, bottomNavigationItem, i, itemsNum);
+      });
+    }
+    function handleMarginClass(isEven, dom, i, length2) {
+      const isLast = i === length2 - 1;
+      if (!isEven && isLast) {
+        dom.classList.add(RIGHT_SPACE_CLASS);
+        return;
+      }
+      const isFabLeft = i === length2 / 2 - 1;
+      const isFabRight = i === length2 / 2;
+      if (isFabLeft) {
+        dom.classList.add(RIGHT_HALF_SPACE_CLASS);
+      } else if (isFabRight) {
+        dom.classList.add(LEFT_HALF_SPACE_CLASS);
+      }
+    }
+    function getBottomNavigationItems() {
+      return Array.from(bottomNavigationDom.value.querySelectorAll(`.${nItem()}`));
+    }
+    function handleFabClick() {
+      call(props2.onFabClick);
+    }
+    return {
+      length,
+      bottomNavigationDom,
+      fabProps,
+      n,
+      classes,
+      handleFabClick
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

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--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box !important;}.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/index.mjs

@@ -0,0 +1,12 @@
+import BottomNavigation from "./BottomNavigation.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as bottomNavigationProps } from "./props.mjs";
+withInstall(BottomNavigation);
+withPropsDefaultsSetter(BottomNavigation, bottomNavigationProps);
+const _BottomNavigationComponent = BottomNavigation;
+var stdin_default = BottomNavigation;
+export {
+  _BottomNavigationComponent,
+  bottomNavigationProps,
+  stdin_default as default
+};