@expcat/tigercat-vue 2.1.0 → 2.1.1

package/dist/{chunk-EZYOCPMM.mjs → chunk-IK2WHKDA.mjs}

@@ -1,6 +1,9 @@
+import {
+  useResponsiveChartSize
+} from "./chunk-UEGNXN5B.mjs";
 import {
   useChartInteraction
-} from "./chunk-PE5OA4YG.mjs";
+} from "./chunk-FHUGOSEY.mjs";
 import {
   ChartSeries
 } from "./chunk-2ZUEXCVJ.mjs";
@@ -12,7 +15,7 @@ import {
 } from "./chunk-ZWVA7HT3.mjs";
 import {
   ChartCanvas
-} from "./chunk-W5RZPTFD.mjs";
+} from "./chunk-SNNT64HK.mjs";
 import {
   ChartGrid
 } from "./chunk-MI6TL3CQ.mjs";
@@ -30,7 +33,6 @@ import {
   createPointScale,
   getStableChartGradientPrefix,
   getChartElementOpacity,
-  getChartInnerRect,
   getNumberExtent,
   linePointTransitionClasses,
   stackSeriesData,
@@ -255,7 +257,12 @@ var AreaChart = defineComponent({
     const hoveredPointInfo = ref(null);
     const tooltipPosition = ref({ x: 0, y: 0 });
     const gradientPrefix = getStableChartGradientPrefix("area", useId());
-    const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
+    const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+      () => props.width,
+      () => props.height,
+      () => props.padding,
+      () => props.responsive
+    );
     const resolvedSeries = computed(
       () => resolveSeriesData(props.series, props.data, {
         color: props.areaColor,
@@ -275,6 +282,7 @@ var AreaChart = defineComponent({
       wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
+      showTooltip: computed(() => props.showTooltip),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
       selectedIndexProp: () => props.selectedIndex,
@@ -401,19 +409,23 @@ var AreaChart = defineComponent({
     const handlePointMouseEnter = (seriesIndex, pointIndex, event) => {
       hoveredPointInfo.value = { seriesIndex, pointIndex };
       tooltipPosition.value = { x: event.clientX, y: event.clientY };
-      emit(
-        "point-hover",
-        seriesIndex,
-        pointIndex,
-        resolvedSeries.value[seriesIndex]?.data[pointIndex]
-      );
+      if (props.hoverable) {
+        emit(
+          "point-hover",
+          seriesIndex,
+          pointIndex,
+          resolvedSeries.value[seriesIndex]?.data[pointIndex]
+        );
+      }
     };
     const handlePointMouseMove = (event) => {
       tooltipPosition.value = { x: event.clientX, y: event.clientY };
     };
     const handlePointMouseLeave = () => {
       hoveredPointInfo.value = null;
-      emit("point-hover", null, null, null);
+      if (props.hoverable) {
+        emit("point-hover", null, null, null);
+      }
     };
     const showPointTooltipFromElement = (el, seriesIndex, pointIndex) => {
       if (!props.hoverable) return;
@@ -444,6 +456,7 @@ var AreaChart = defineComponent({
     };
     return () => {
       const pointClickable = props.selectable || typeof instance?.vnode.props?.onPointClick === "function";
+      const trackPointHover = props.showTooltip || props.hoverable;
       const reversedSeriesData = [...seriesData.value].reverse();
       const chart = h(
         ChartCanvas,
@@ -454,7 +467,8 @@ var AreaChart = defineComponent({
           responsive: props.responsive,
           title: props.title,
           desc: props.desc,
-          className: classNames(props.className)
+          className: classNames(props.className),
+          onResolvedSizeChange
         },
         {
           default: () => [
@@ -673,9 +687,9 @@ var AreaChart = defineComponent({
                     tabindex: pointInteractive ? 0 : void 0,
                     "data-point-index": point.pointIndex,
                     "data-series-key": sd.seriesKey,
-                    onMouseenter: props.hoverable ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
-                    onMousemove: props.hoverable ? handlePointMouseMove : void 0,
-                    onMouseleave: props.hoverable ? handlePointMouseLeave : void 0,
+                    onMouseenter: trackPointHover ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
+                    onMousemove: trackPointHover ? handlePointMouseMove : void 0,
+                    onMouseleave: trackPointHover ? handlePointMouseLeave : void 0,
                     onClick: pointClickable ? (e) => {
                       e.stopPropagation();
                       handlePointClick(sd.seriesIndex, point.pointIndex);

package/dist/{chunk-HGXD57QM.mjs → chunk-JBS3AESR.mjs}

@@ -17,11 +17,34 @@ import {
   floatButtonSizeClasses,
   floatButtonTypeClasses,
   floatButtonDisabledClasses,
-  floatButtonGroupClasses,
+  floatButtonIconSizeClasses,
+  floatButtonPlusIconPath,
+  getFloatButtonGroupClasses,
   getViewportOffsetStyle,
   viewportFloatingBaseClasses,
   viewportPlacementClasses
 } from "@expcat/tigercat-core";
+function renderDefaultPlusIcon(size) {
+  return h(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      class: floatButtonIconSizeClasses[size],
+      "aria-hidden": "true"
+    },
+    [
+      h("path", {
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        d: floatButtonPlusIconPath
+      })
+    ]
+  );
+}
 var FloatButtonGroupShapeKey = /* @__PURE__ */ Symbol("FloatButtonGroupShape");
 var FloatButton = defineComponent({
   name: "TigerFloatButton",
@@ -101,6 +124,7 @@ var FloatButton = defineComponent({
     };
     return () => {
       const attrsRecord = attrs;
+      const content = slots.default ? slots.default() : renderDefaultPlusIcon(props.size);
       const btn = h(
         "button",
         {
@@ -113,11 +137,11 @@ var FloatButton = defineComponent({
           ),
           type: "button",
           disabled: props.disabled,
-          "aria-label": props.ariaLabel ?? props.tooltip,
+          "aria-label": slots.default ? props.ariaLabel ?? props.tooltip : props.ariaLabel ?? props.tooltip ?? "Add",
           title: props.tooltip,
           onClick: handleClick
         },
-        slots.default?.()
+        content
       );
       return btn;
     };
@@ -146,6 +170,18 @@ var FloatButtonGroup = defineComponent({
     style: {
       type: Object,
       default: void 0
+    },
+    placement: {
+      type: String,
+      default: "bottom-right"
+    },
+    offset: {
+      type: [Number, String, Object],
+      default: void 0
+    },
+    portal: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ["update:open"],
@@ -163,7 +199,10 @@ var FloatButtonGroup = defineComponent({
     };
     const groupClasses = computed(
       () => classNames(
-        floatButtonGroupClasses,
+        getFloatButtonGroupClasses({
+          placement: props.placement,
+          portal: props.portal
+        }),
         props.className,
         coerceClassValue(attrs.class)
       )
@@ -182,25 +221,28 @@ var FloatButtonGroup = defineComponent({
           children.push(node);
         }
       }
-      return h(Teleport, { to: "body" }, [
-        h(
-          "div",
-          {
-            ...attrs,
-            class: groupClasses.value,
-            style: mergeStyleValues(attrsRecord.style, props.style),
-            onMouseenter: props.trigger === "hover" ? () => {
-              internalOpen.value = true;
-              emit("update:open", true);
-            } : void 0,
-            onMouseleave: props.trigger === "hover" ? () => {
-              internalOpen.value = false;
-              emit("update:open", false);
-            } : void 0
-          },
-          children
-        )
-      ]);
+      const groupRoot = h(
+        "div",
+        {
+          ...attrs,
+          class: groupClasses.value,
+          style: mergeStyleValues(
+            getViewportOffsetStyle(props.placement, props.offset),
+            attrsRecord.style,
+            props.style
+          ),
+          onMouseenter: props.trigger === "hover" ? () => {
+            internalOpen.value = true;
+            emit("update:open", true);
+          } : void 0,
+          onMouseleave: props.trigger === "hover" ? () => {
+            internalOpen.value = false;
+            emit("update:open", false);
+          } : void 0
+        },
+        children
+      );
+      return props.portal ? h(Teleport, { to: "body" }, [groupRoot]) : groupRoot;
     };
   }
 });

package/dist/{chunk-PYRKFQ6J.mjs → chunk-JIU5UEOU.mjs}

@@ -3,30 +3,48 @@ import {
 } from "./chunk-HS4YQGZQ.mjs";
 import {
   Input
-} from "./chunk-XLNK3Z2P.mjs";
+} from "./chunk-POWDTOMF.mjs";
 import {
   Empty
 } from "./chunk-SJINC5NF.mjs";
 import {
   Textarea
-} from "./chunk-2OI6GWOT.mjs";
+} from "./chunk-3KAHJF7D.mjs";
 import {
   Button
 } from "./chunk-YZBQ6IR7.mjs";
 import {
   Avatar
 } from "./chunk-ZFTRR3KW.mjs";
+import {
+  useTigerConfig
+} from "./chunk-UOJOJBEU.mjs";
 
 // src/components/ChatWindow.ts
-import { defineComponent, h, computed, ref, watch, onMounted, onUpdated } from "vue";
+import { defineComponent, h, computed, ref, watch, onMounted } from "vue";
 import {
   classNames,
   coerceClassValue,
   getChatMessageStatusInfo,
+  buildChatMessageStatusInfo,
   getChatStatusBarClasses,
   formatChatTime,
-  mergeStyleValues
+  mergeStyleValues,
+  getChatWindowLabels,
+  mergeTigerLocale,
+  resolveLocaleText
 } from "@expcat/tigercat-core";
+var CHAT_STICK_TO_BOTTOM_PX = 32;
+function resolveChatScroller(virtual, messageList, virtualWrapper) {
+  if (virtual) {
+    const wrapper = virtualWrapper;
+    return wrapper?.firstElementChild ?? wrapper;
+  }
+  return messageList;
+}
+function isChatScrollerNearBottom(scroller) {
+  return scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight <= CHAT_STICK_TO_BOTTOM_PX;
+}
 var ChatWindow = defineComponent({
   name: "TigerChatWindow",
   inheritAttrs: false,
@@ -44,7 +62,7 @@ var ChatWindow = defineComponent({
     },
     placeholder: {
       type: String,
-      default: "\u8BF7\u8F93\u5165\u6D88\u606F"
+      default: void 0
     },
     disabled: {
       type: Boolean,
@@ -55,11 +73,19 @@ var ChatWindow = defineComponent({
     },
     emptyText: {
       type: String,
-      default: "\u6682\u65E0\u6D88\u606F"
+      default: void 0
     },
     sendText: {
       type: String,
-      default: "\u53D1\u9001"
+      default: void 0
+    },
+    locale: {
+      type: Object,
+      default: void 0
+    },
+    labels: {
+      type: Object,
+      default: void 0
     },
     messageListAriaLabel: {
       type: String
@@ -143,6 +169,10 @@ var ChatWindow = defineComponent({
     send: null
   },
   setup(props, { emit, attrs, slots }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getChatWindowLabels(mergedLocale.value, props.labels));
+    const statusMap = computed(() => buildChatMessageStatusInfo(labels.value));
     const localValue = ref(props.modelValue ?? props.defaultValue ?? "");
     watch(
       () => props.modelValue,
@@ -194,29 +224,35 @@ var ChatWindow = defineComponent({
     };
     const messageListRef = ref(null);
     const virtualWrapperRef = ref(null);
+    const stickToBottom = ref(true);
+    const resolveScroller = () => resolveChatScroller(props.virtual, messageListRef.value, virtualWrapperRef.value);
+    const syncStickToBottom = () => {
+      const scroller = resolveScroller();
+      if (!scroller) return;
+      stickToBottom.value = isChatScrollerNearBottom(scroller);
+    };
     const scrollToBottom = () => {
       if (!props.autoScrollToBottom) return;
       requestAnimationFrame(() => {
-        if (props.virtual) {
-          const wrapper = virtualWrapperRef.value;
-          const scroller = wrapper?.firstElementChild ?? wrapper;
-          if (scroller) {
-            scroller.scrollTop = scroller.scrollHeight;
-          }
-        } else if (messageListRef.value) {
-          messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
+        const scroller = resolveScroller();
+        if (scroller) {
+          scroller.scrollTop = scroller.scrollHeight;
+          stickToBottom.value = true;
         }
       });
     };
     onMounted(scrollToBottom);
-    onUpdated(scrollToBottom);
     watch(
       () => props.messages.length,
-      () => scrollToBottom()
+      () => {
+        if (!resolveScroller() || stickToBottom.value) {
+          scrollToBottom();
+        }
+      }
     );
     const renderMessageItem = (message, index) => {
       const isSelf = message.direction === "self";
-      const statusInfo = message.status ? getChatMessageStatusInfo(message.status) : void 0;
+      const statusInfo = message.status ? getChatMessageStatusInfo(message.status, statusMap.value) : void 0;
       const timeText = props.showTime ? formatChatTime(message.time) : "";
       const customContent = slots.message?.({ message, index });
       return h(
@@ -270,10 +306,11 @@ var ChatWindow = defineComponent({
       );
     };
     const renderInput = () => {
-      const resolvedInputLabel = props.inputAriaLabel ?? props.placeholder ?? "\u6D88\u606F\u8F93\u5165";
+      const resolvedPlaceholder = resolveLocaleText(labels.value.placeholder, props.placeholder);
+      const resolvedInputLabel = props.inputAriaLabel ?? resolvedPlaceholder;
       const commonProps = {
         modelValue: inputValue.value,
-        placeholder: props.placeholder,
+        placeholder: resolvedPlaceholder,
         disabled: props.disabled,
         maxLength: props.maxLength,
         onKeydown: handleKeydown,
@@ -302,7 +339,8 @@ var ChatWindow = defineComponent({
             role: "log",
             "aria-live": "polite",
             "aria-relevant": "additions text",
-            "aria-label": props.messageListAriaLabel ?? "\u6D88\u606F\u5217\u8868"
+            "aria-label": props.messageListAriaLabel ?? "Message list",
+            onScroll: syncStickToBottom
           },
           [
             h(
@@ -310,7 +348,8 @@ var ChatWindow = defineComponent({
               {
                 itemCount: props.messages.length,
                 itemHeight: props.virtualItemHeight,
-                height: props.virtualHeight
+                height: props.virtualHeight,
+                onScroll: syncStickToBottom
               },
               {
                 default: ({ index }) => renderMessageItem(props.messages[index], index)
@@ -325,7 +364,8 @@ var ChatWindow = defineComponent({
             role: "log",
             "aria-live": "polite",
             "aria-relevant": "additions text",
-            "aria-label": props.messageListAriaLabel ?? "\u6D88\u606F\u5217\u8868"
+            "aria-label": props.messageListAriaLabel ?? "Message list",
+            onScroll: syncStickToBottom
           },
           props.messages.length === 0 ? [
             h(
@@ -333,7 +373,11 @@ var ChatWindow = defineComponent({
               {
                 class: "h-full flex items-center justify-center py-8"
               },
-              [h(Empty, { description: props.emptyText })]
+              [
+                h(Empty, {
+                  description: resolveLocaleText(labels.value.emptyText, props.emptyText)
+                })
+              ]
             )
           ] : props.messages.map((message, index) => renderMessageItem(message, index))
         ),
@@ -356,9 +400,9 @@ var ChatWindow = defineComponent({
               {
                 disabled: !canSend.value,
                 onClick: handleSend,
-                "aria-label": props.sendAriaLabel ?? props.sendText
+                "aria-label": props.sendAriaLabel ?? resolveLocaleText(labels.value.sendText, props.sendText)
               },
-              () => props.sendText
+              () => resolveLocaleText(labels.value.sendText, props.sendText)
             )
           ]
         )

package/dist/{chunk-JALHMWKW.mjs → chunk-K5MHUMKR.mjs}

@@ -1,9 +1,9 @@
 import {
   ImagePreview
-} from "./chunk-LPZBXTJ6.mjs";
+} from "./chunk-SAC4PAG3.mjs";
 import {
   useFloatingPopup
-} from "./chunk-26OI3TEA.mjs";
+} from "./chunk-PMQSXEMT.mjs";
 import {
   renderVueOverlayTeleport
 } from "./chunk-Q7Y22OFX.mjs";

package/dist/{chunk-5E4LINDO.mjs → chunk-LH2V2JMZ.mjs}

@@ -1,5 +1,5 @@
 // src/components/Stepper.ts
-import { defineComponent, h, onBeforeUnmount } from "vue";
+import { computed, defineComponent, h, onBeforeUnmount, ref, watch } from "vue";
 import {
   stepperBaseClasses,
   getStepperInputClasses,
@@ -15,7 +15,8 @@ import {
 var Stepper = defineComponent({
   name: "TigerStepper",
   props: {
-    modelValue: { type: Number, default: 0 },
+    modelValue: { type: Number },
+    defaultValue: { type: Number, default: 0 },
     min: { type: Number, default: -Infinity },
     max: { type: Number, default: Infinity },
     step: { type: Number, default: 1 },
@@ -27,17 +28,32 @@ var Stepper = defineComponent({
   },
   emits: ["update:modelValue", "change"],
   setup(props, { emit, attrs }) {
+    const inner = ref(props.defaultValue ?? 0);
+    const currentValue = computed(
+      () => props.modelValue !== void 0 ? props.modelValue : inner.value
+    );
+    watch(
+      () => props.modelValue,
+      (value) => {
+        if (value !== void 0) {
+          inner.value = value;
+        }
+      }
+    );
     const repeatController = createRafRepeatActionController();
-    let repeatValue = props.modelValue;
+    let repeatValue = currentValue.value;
     let suppressNextClick = false;
     onBeforeUnmount(() => repeatController.stop());
     function setValue(v) {
       const clamped = clampStepperValue(v, props.min, props.max, props.precision);
+      if (props.modelValue === void 0) {
+        inner.value = clamped;
+      }
       emit("update:modelValue", clamped);
       emit("change", clamped);
       return clamped;
     }
-    function stepBy(direction, baseValue = props.modelValue) {
+    function stepBy(direction, baseValue = currentValue.value) {
       return setValue(direction === "up" ? baseValue + props.step : baseValue - props.step);
     }
     function decrement() {
@@ -60,10 +76,10 @@ var Stepper = defineComponent({
       return (event) => {
         event.preventDefault();
         if (props.disabled) return;
-        if (direction === "down" && props.modelValue <= props.min) return;
-        if (direction === "up" && props.modelValue >= props.max) return;
+        if (direction === "down" && currentValue.value <= props.min) return;
+        if (direction === "up" && currentValue.value >= props.max) return;
         suppressNextClick = true;
-        repeatValue = props.modelValue;
+        repeatValue = currentValue.value;
         repeatController.start(() => {
           const baseValue = repeatValue;
           const nextValue = stepBy(direction, baseValue);
@@ -91,8 +107,8 @@ var Stepper = defineComponent({
       [h("path", { d, "fill-rule": "evenodd", "clip-rule": "evenodd" })]
     );
     return () => {
-      const atMin = props.modelValue <= props.min;
-      const atMax = props.modelValue >= props.max;
+      const atMin = currentValue.value <= props.min;
+      const atMax = currentValue.value >= props.max;
       return h(
         "div",
         {
@@ -119,7 +135,7 @@ var Stepper = defineComponent({
           h("input", {
             type: "text",
             class: getStepperInputClasses(props.size),
-            value: props.precision !== void 0 ? props.modelValue.toFixed(props.precision) : String(props.modelValue),
+            value: props.precision !== void 0 ? currentValue.value.toFixed(props.precision) : String(currentValue.value),
             disabled: props.disabled,
             "aria-label": "Value",
             onChange: handleInput

package/dist/{chunk-PQBKN2NH.mjs → chunk-LRFKHJDU.mjs}

@@ -114,7 +114,13 @@ var Transfer = defineComponent({
       default: void 0
     }
   },
-  emits: ["update:modelValue", "update:searchValue", "change", "search-change"],
+  emits: [
+    "update:modelValue",
+    "update:targetKeys",
+    "update:searchValue",
+    "change",
+    "search-change"
+  ],
   setup(props, { emit, attrs }) {
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
@@ -183,6 +189,11 @@ var Transfer = defineComponent({
       }
       targetSelectedKeys.value = next;
     }
+    function updateTargetKeys(newTargetKeys, direction, movedKeys) {
+      emit("update:modelValue", newTargetKeys);
+      emit("update:targetKeys", newTargetKeys);
+      emit("change", newTargetKeys, direction, movedKeys);
+    }
     function moveRight() {
       if (!canMoveRight.value) return;
       const { targetKeys: newTargetKeys, movedKeys } = moveTransferItems(
@@ -192,8 +203,7 @@ var Transfer = defineComponent({
         props.dataSource
       );
       sourceSelectedKeys.value = /* @__PURE__ */ new Set();
-      emit("update:modelValue", newTargetKeys);
-      emit("change", newTargetKeys, "right", movedKeys);
+      updateTargetKeys(newTargetKeys, "right", movedKeys);
     }
     function moveLeft() {
       if (!canMoveLeft.value) return;
@@ -204,8 +214,7 @@ var Transfer = defineComponent({
         props.dataSource
       );
       targetSelectedKeys.value = /* @__PURE__ */ new Set();
-      emit("update:modelValue", newTargetKeys);
-      emit("change", newTargetKeys, "left", movedKeys);
+      updateTargetKeys(newTargetKeys, "left", movedKeys);
     }
     function renderPanel(title, items, selectedKeys, toggleFn, searchValue, onSearchInput) {
       return h("div", { class: transferPanelClasses, role: "group", "aria-label": title }, [

package/dist/{chunk-W5XFWVNV.mjs → chunk-M4FWWEMX.mjs}

@@ -1,6 +1,9 @@
+import {
+  useResponsiveChartSize
+} from "./chunk-UEGNXN5B.mjs";
 import {
   useChartInteraction
-} from "./chunk-PE5OA4YG.mjs";
+} from "./chunk-FHUGOSEY.mjs";
 import {
   ChartSeries
 } from "./chunk-2ZUEXCVJ.mjs";
@@ -12,7 +15,7 @@ import {
 } from "./chunk-ZWVA7HT3.mjs";
 import {
   ChartCanvas
-} from "./chunk-W5RZPTFD.mjs";
+} from "./chunk-SNNT64HK.mjs";
 import {
   ChartGrid
 } from "./chunk-MI6TL3CQ.mjs";
@@ -30,7 +33,6 @@ import {
   ensureBarMinHeight,
   getStableChartGradientPrefix,
   getBarValueLabelY,
-  getChartInnerRect,
   getNumberExtent,
   resolveChartPalette,
   buildChartLegendItems,
@@ -245,6 +247,7 @@ var BarChart = defineComponent({
       wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
+      showTooltip: computed(() => props.showTooltip),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
       selectedIndexProp: () => props.selectedIndex,
@@ -255,7 +258,12 @@ var BarChart = defineComponent({
       getData: (index) => props.data[index],
       eventNames: { hover: "bar-hover", click: "bar-click" }
     });
-    const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
+    const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+      () => props.width,
+      () => props.height,
+      () => props.padding,
+      () => props.responsive
+    );
     const xDomain = computed(() => props.data.map((item) => String(item.x)));
     const yValues = computed(() => props.data.map((item) => item.y));
     const resolvedXScale = computed(() => {
@@ -379,7 +387,8 @@ var BarChart = defineComponent({
           responsive: props.responsive,
           title: props.title,
           desc: props.desc,
-          className: classNames(props.className)
+          className: classNames(props.className),
+          onResolvedSizeChange
         },
         {
           default: () => [
@@ -452,7 +461,7 @@ var BarChart = defineComponent({
           ].filter(Boolean)
         }
       );
-      const tooltip = props.showTooltip && props.hoverable ? h(ChartTooltip, {
+      const tooltip = props.showTooltip ? h(ChartTooltip, {
         content: tooltipContent.value,
         open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,