@varlet/ui 2.22.0 → 2.22.1

package/lib/varlet.cjs.js

@@ -3849,24 +3849,23 @@ function __render__$1b(_ctx, _cache) {
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
     "button",
     {
-      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.active === _ctx.index || _ctx.active === _ctx.name, _ctx.n("--active")])),
+      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.isActive, _ctx.n("--active")])),
       style: vue.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 ? (vue.openBlock(), vue.createBlock(_component_var_icon, {
-        key: 0,
-        name: _ctx.icon,
-        namespace: _ctx.namespace,
-        class: vue.normalizeClass(_ctx.n("icon")),
-        "var-bottom-navigation-item-cover": ""
-      }, null, 8, ["name", "namespace", "class"])) : vue.createCommentVNode("v-if", true),
-      vue.renderSlot(_ctx.$slots, "icon", {
-        active: _ctx.active === _ctx.index || _ctx.active === _ctx.name
-      }),
-      _ctx.badge ? (vue.openBlock(), vue.createBlock(_component_var_badge, vue.mergeProps({ key: 1 }, _ctx.badgeProps, {
+      vue.renderSlot(_ctx.$slots, "icon", { active: _ctx.isActive }, () => [
+        _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_var_icon, {
+          key: 0,
+          name: _ctx.icon,
+          namespace: _ctx.namespace,
+          class: vue.normalizeClass(_ctx.n("icon")),
+          "var-bottom-navigation-item-cover": ""
+        }, null, 8, ["name", "namespace", "class"])) : vue.createCommentVNode("v-if", true)
+      ]),
+      _ctx.badge ? (vue.openBlock(), vue.createBlock(_component_var_badge, vue.mergeProps({ key: 0 }, _ctx.badgeProps, {
         class: _ctx.n("badge"),
         "var-bottom-navigation-item-cover": ""
       }), null, 16, ["class"])) : vue.createCommentVNode("v-if", true),
@@ -3876,20 +3875,13 @@ function __render__$1b(_ctx, _cache) {
           class: vue.normalizeClass(_ctx.n("label"))
         },
         [
-          !_ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock(
-            vue.Fragment,
-            { key: 0 },
-            [
-              vue.createTextVNode(
-                vue.toDisplayString(_ctx.label),
-                1
-                /* TEXT */
-              )
-            ],
-            64
-            /* STABLE_FRAGMENT */
-          )) : vue.createCommentVNode("v-if", true),
-          vue.renderSlot(_ctx.$slots, "default")
+          vue.renderSlot(_ctx.$slots, "default", {}, () => [
+            vue.createTextVNode(
+              vue.toDisplayString(_ctx.label),
+              1
+              /* TEXT */
+            )
+          ])
         ],
         2
         /* CLASS */
@@ -3911,8 +3903,8 @@ const __sfc__$1c = vue.defineComponent({
   props: props$14,
   setup(props2) {
     const name2 = vue.computed(() => props2.name);
-    const badge = vue.computed(() => props2.badge);
-    const badgeProps = vue.ref({});
+    const isActive = vue.computed(() => [name2.value, index.value].includes(active.value));
+    const badgeProps = vue.computed(() => props2.badge === true ? defaultBadgeProps : props2.badge);
     const { index, bottomNavigation, bindBottomNavigation } = useBottomNavigation();
     const { active, activeColor, inactiveColor } = bottomNavigation;
     const bottomNavigationItemProvider = {
@@ -3920,16 +3912,6 @@ const __sfc__$1c = vue.defineComponent({
       index
     };
     bindBottomNavigation(bottomNavigationItemProvider);
-    vue.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;
@@ -3937,13 +3919,12 @@ const __sfc__$1c = vue.defineComponent({
       call(bottomNavigation.onToggle, active2);
     }
     return {
-      index,
-      active,
-      badge,
+      activeColor,
+      inactiveColor,
       badgeProps,
+      isActive,
       n: n$1b,
       classes: classes$Z,
-      computeColorStyle,
       handleClick
     };
   }
@@ -13202,6 +13183,9 @@ function usePopover(options) {
   let enterPopover = false;
   let enterHost = false;
   const computeHostSize = () => {
+    if (!host.value) {
+      return;
+    }
     const { width, height } = getStyle$1(host.value);
     hostSize.value = {
       width: toPxNum(width),
@@ -15799,7 +15783,6 @@ const __sfc__$G = vue.defineComponent({
   inheritAttrs: false,
   props: props$C,
   setup(props2) {
-    const ownTop = vue.ref(0);
     const disabled = vue.ref(false);
     const name2 = vue.computed(() => props2.index);
     const anchorEl = vue.ref(null);
@@ -15808,16 +15791,15 @@ const __sfc__$G = vue.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;
@@ -15963,10 +15945,9 @@ const __sfc__$F = vue.defineComponent({
       () => length.value,
       () => __async$6(this, null, function* () {
         yield doubleRaf();
-        indexAnchors.forEach(({ name: name2, setOwnTop }) => {
+        indexAnchors.forEach(({ name: name2 }) => {
           if (name2.value)
             anchorNameList.value.push(name2.value);
-          setOwnTop();
         });
       })
     );
@@ -16009,9 +15990,9 @@ const __sfc__$F = vue.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 top2 = 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 (top2 >= 0 && top2 < distance && clickedName.value === "") {
           anchor.setDisabled(false);
@@ -16032,7 +16013,8 @@ const __sfc__$F = vue.defineComponent({
           return;
         }
         const offsetTop = getOffsetTop();
-        const top2 = indexAnchor.ownTop.value - stickyOffsetTop.value + offsetTop;
+        const indexAnchorTop = indexAnchor.getOffsetTop();
+        const top2 = indexAnchorTop - stickyOffsetTop.value + offsetTop;
         const left2 = getScrollLeft(scroller);
         clickedName.value = anchorName;
         emitEvent(anchorName, options);
@@ -25165,7 +25147,7 @@ withInstall(stdin_default$1);
 withPropsDefaultsSetter(stdin_default$1, props);
 const _WatermarkComponent = stdin_default$1;
 var stdin_default = stdin_default$1;
-const version = "2.22.0";
+const version = "2.22.1";
 function install(app) {
   stdin_default$3m.install && app.use(stdin_default$3m);
   stdin_default$3k.install && app.use(stdin_default$3k);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "2.22.0",
+  "version": "2.22.1",
   "description": "A material like components library",
   "main": "lib/varlet.cjs.js",
   "module": "es/index.mjs",
@@ -48,9 +48,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/icons": "2.22.0",
-    "@varlet/shared": "2.22.0",
-    "@varlet/use": "2.22.0"
+    "@varlet/icons": "2.22.1",
+    "@varlet/shared": "2.22.1",
+    "@varlet/use": "2.22.1"
   },
   "devDependencies": {
     "@vue/runtime-core": "3.4.3",
@@ -66,9 +66,9 @@
     "typescript": "^5.1.5",
     "vue": "3.4.3",
     "vue-router": "4.2.0",
-    "@varlet/cli": "2.22.0",
-    "@varlet/ui": "2.22.0",
-    "@varlet/touch-emulator": "2.22.0"
+    "@varlet/cli": "2.22.1",
+    "@varlet/ui": "2.22.1",
+    "@varlet/touch-emulator": "2.22.1"
   },
   "scripts": {
     "dev": "varlet-cli dev",

package/types/slider.d.ts

@@ -30,7 +30,7 @@ export interface SliderProps extends BasicAttributes {
   disabled?: boolean
   readonly?: boolean
   direction?: SliderDirection
-  rules?: Array<(value: any) => any>
+  rules?: Array<(value: number | Array<number>) => any>
   onChange?: ListenerProp<(value: number | Array<number>) => void>
   onStart?: ListenerProp<() => void>
   onEnd?: ListenerProp<(value: number | Array<number>) => void>