@varlet/ui 2.22.0 → 2.22.1

package/es/bottom-navigation-item/BottomNavigationItem.mjs

@@ -1,7 +1,7 @@
 import Ripple from "../ripple/index.mjs";
 import VarBadge from "../badge/index.mjs";
 import VarIcon from "../icon/index.mjs";
-import { defineComponent, computed, ref, watch } from "vue";
+import { defineComponent, computed } from "vue";
 import { props } from "./props.mjs";
 import { useBottomNavigation } from "./provide.mjs";
 import { createNamespace } from "../utils/components.mjs";
@@ -11,7 +11,7 @@ const defaultBadgeProps = {
   type: "danger",
   dot: true
 };
-import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, mergeProps as _mergeProps, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, Fragment as _Fragment, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from "vue";
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
 function __render__(_ctx, _cache) {
   const _component_var_icon = _resolveComponent("var-icon");
   const _component_var_badge = _resolveComponent("var-badge");
@@ -19,24 +19,23 @@ function __render__(_ctx, _cache) {
   return _withDirectives((_openBlock(), _createElementBlock(
     "button",
     {
-      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.active === _ctx.index || _ctx.active === _ctx.name, _ctx.n("--active")])),
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.isActive, _ctx.n("--active")])),
       style: _normalizeStyle({
-        color: _ctx.computeColorStyle()
+        color: _ctx.isActive ? _ctx.activeColor : _ctx.inactiveColor
       }),
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
     },
     [
-      _ctx.icon && !_ctx.$slots.icon ? (_openBlock(), _createBlock(_component_var_icon, {
-        key: 0,
-        name: _ctx.icon,
-        namespace: _ctx.namespace,
-        class: _normalizeClass(_ctx.n("icon")),
-        "var-bottom-navigation-item-cover": ""
-      }, null, 8, ["name", "namespace", "class"])) : _createCommentVNode("v-if", true),
-      _renderSlot(_ctx.$slots, "icon", {
-        active: _ctx.active === _ctx.index || _ctx.active === _ctx.name
-      }),
-      _ctx.badge ? (_openBlock(), _createBlock(_component_var_badge, _mergeProps({ key: 1 }, _ctx.badgeProps, {
+      _renderSlot(_ctx.$slots, "icon", { active: _ctx.isActive }, () => [
+        _ctx.icon ? (_openBlock(), _createBlock(_component_var_icon, {
+          key: 0,
+          name: _ctx.icon,
+          namespace: _ctx.namespace,
+          class: _normalizeClass(_ctx.n("icon")),
+          "var-bottom-navigation-item-cover": ""
+        }, null, 8, ["name", "namespace", "class"])) : _createCommentVNode("v-if", true)
+      ]),
+      _ctx.badge ? (_openBlock(), _createBlock(_component_var_badge, _mergeProps({ key: 0 }, _ctx.badgeProps, {
         class: _ctx.n("badge"),
         "var-bottom-navigation-item-cover": ""
       }), null, 16, ["class"])) : _createCommentVNode("v-if", true),
@@ -46,20 +45,13 @@ function __render__(_ctx, _cache) {
           class: _normalizeClass(_ctx.n("label"))
         },
         [
-          !_ctx.$slots.default ? (_openBlock(), _createElementBlock(
-            _Fragment,
-            { key: 0 },
-            [
-              _createTextVNode(
-                _toDisplayString(_ctx.label),
-                1
-                /* TEXT */
-              )
-            ],
-            64
-            /* STABLE_FRAGMENT */
-          )) : _createCommentVNode("v-if", true),
-          _renderSlot(_ctx.$slots, "default")
+          _renderSlot(_ctx.$slots, "default", {}, () => [
+            _createTextVNode(
+              _toDisplayString(_ctx.label),
+              1
+              /* TEXT */
+            )
+          ])
         ],
         2
         /* CLASS */
@@ -81,8 +73,8 @@ const __sfc__ = defineComponent({
   props,
   setup(props2) {
     const name2 = computed(() => props2.name);
-    const badge = computed(() => props2.badge);
-    const badgeProps = ref({});
+    const isActive = computed(() => [name2.value, index.value].includes(active.value));
+    const badgeProps = computed(() => props2.badge === true ? defaultBadgeProps : props2.badge);
     const { index, bottomNavigation, bindBottomNavigation } = useBottomNavigation();
     const { active, activeColor, inactiveColor } = bottomNavigation;
     const bottomNavigationItemProvider = {
@@ -90,16 +82,6 @@ const __sfc__ = defineComponent({
       index
     };
     bindBottomNavigation(bottomNavigationItemProvider);
-    watch(
-      () => badge.value,
-      (newValue) => {
-        badgeProps.value = newValue === true ? defaultBadgeProps : badge.value;
-      },
-      { immediate: true }
-    );
-    function computeColorStyle() {
-      return active.value === name2.value || active.value === index.value ? activeColor.value : inactiveColor.value;
-    }
     function handleClick() {
       var _a;
       const active2 = (_a = name2.value) != null ? _a : index.value;
@@ -107,13 +89,12 @@ const __sfc__ = defineComponent({
       call(bottomNavigation.onToggle, active2);
     }
     return {
-      index,
-      active,
-      badge,
+      activeColor,
+      inactiveColor,
       badgeProps,
+      isActive,
       n,
       classes,
-      computeColorStyle,
       handleClick
     };
   }

package/es/index-anchor/IndexAnchor.mjs

@@ -42,7 +42,6 @@ const __sfc__ = defineComponent({
   inheritAttrs: false,
   props,
   setup(props2) {
-    const ownTop = ref(0);
     const disabled = ref(false);
     const name2 = computed(() => props2.index);
     const anchorEl = ref(null);
@@ -51,16 +50,15 @@ const __sfc__ = defineComponent({
     const indexAnchorProvider = {
       index,
       name: name2,
-      ownTop,
-      setOwnTop,
-      setDisabled
+      setDisabled,
+      getOffsetTop
     };
     bindIndexBar(indexAnchorProvider);
-    function setOwnTop() {
+    function getOffsetTop() {
       if (!anchorEl.value) {
-        return;
+        return 0;
       }
-      ownTop.value = anchorEl.value.$el ? anchorEl.value.$el.offsetTop : anchorEl.value.offsetTop;
+      return anchorEl.value.$el ? anchorEl.value.$el.offsetTop : anchorEl.value.offsetTop;
     }
     function setDisabled(value) {
       disabled.value = value;

package/es/index-bar/IndexBar.mjs

@@ -112,10 +112,9 @@ const __sfc__ = defineComponent({
       () => length.value,
       () => __async(this, null, function* () {
         yield doubleRaf();
-        indexAnchors.forEach(({ name: name2, setOwnTop }) => {
+        indexAnchors.forEach(({ name: name2 }) => {
           if (name2.value)
             anchorNameList.value.push(name2.value);
-          setOwnTop();
         });
       })
     );
@@ -158,9 +157,9 @@ const __sfc__ = defineComponent({
       const scrollHeight = scroller === window ? document.body.scrollHeight : scroller.scrollHeight;
       const offsetTop = getOffsetTop();
       indexAnchors.forEach((anchor, index) => {
-        const anchorTop = anchor.ownTop.value;
+        const anchorTop = anchor.getOffsetTop();
         const top = scrollTop - anchorTop + stickyOffsetTop.value - offsetTop;
-        const distance = index === indexAnchors.length - 1 ? scrollHeight : indexAnchors[index + 1].ownTop.value - anchor.ownTop.value;
+        const distance = index === indexAnchors.length - 1 ? scrollHeight : indexAnchors[index + 1].getOffsetTop() - anchor.getOffsetTop();
         anchor.setDisabled(true);
         if (top >= 0 && top < distance && clickedName.value === "") {
           anchor.setDisabled(false);
@@ -181,7 +180,8 @@ const __sfc__ = defineComponent({
           return;
         }
         const offsetTop = getOffsetTop();
-        const top = indexAnchor.ownTop.value - stickyOffsetTop.value + offsetTop;
+        const indexAnchorTop = indexAnchor.getOffsetTop();
+        const top = indexAnchorTop - stickyOffsetTop.value + offsetTop;
         const left = getScrollLeft(scroller);
         clickedName.value = anchorName;
         emitEvent(anchorName, options);

package/es/index.bundle.mjs

@@ -262,7 +262,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '2.22.0'
+const version = '2.22.1'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -174,7 +174,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '2.22.0'
+const version = '2.22.1'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/menu/usePopover.mjs

@@ -67,6 +67,9 @@ function usePopover(options) {
   let enterPopover = false;
   let enterHost = false;
   const computeHostSize = () => {
+    if (!host.value) {
+      return;
+    }
     const { width, height } = getStyle(host.value);
     hostSize.value = {
       width: toPxNum(width),