@varlet/ui 2.22.0 → 2.22.1-alpha.1706370837642

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.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-alpha.1706370837642'
 
 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-alpha.1706370837642'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)