fix(calendar-view): fix popper cant mouse enter (#3218)

packages/renderless/src/calendar-view/index.ts

@@ -57,18 +57,17 @@ export const handleMouseenter =
   ($event, val) => {
     const tooltip = vm.$refs.tooltip
     tooltip.state.referenceElm = $event.target
-    tooltip.state.popperElm && (tooltip.state.popperElm.style.display = 'none')
-    tooltip.doDestroy()
 
     state.eventTipContent = val
-    state.eventTipVisible = true
-    setTimeout(tooltip.updatePopper, 20)
+    setTimeout(tooltip.show(), 20)
   }
 
 export const handleMouseleave =
-  ({ state }) =>
+  ({ vm }) =>
   () => {
-    state.eventTipVisible = false
+    const tooltip = vm.$refs.tooltip
+    tooltip.setExpectedState(false)
+    tooltip.debounceClose()
   }
 
 export const isSelectedDate =

packages/renderless/src/calendar-view/vue.ts

@@ -120,7 +120,6 @@ const initState = ({ reactive, props, computed, api, images, modesIcon }) => {
     showMonth: false,
     showSelectedDateEvents: false,
     multiSelect: computed(() => props.multiSelect),
-    eventTipVisible: false,
     cascaderVisible: false,
     eventTipContent: {},
     activeYear: props.year,
@@ -287,7 +286,7 @@ const initApi = ({ vm, api, state, t, props, emit, nextTick }) => {
     goPrevMonth: throttle(50, true, goPrevMonth({ state })),
     goNextMonth: throttle(50, true, goNextMonth({ state })),
     handleMouseenter: handleMouseenter({ vm, state }),
-    handleMouseleave: handleMouseleave({ state }),
+    handleMouseleave: handleMouseleave({ vm }),
     isSelectedDate: isSelectedDate({ state }),
     isStartOrEndDay: isStartOrEndDay({ state }),
     getDayBgColor: getDayBgColor({ props }),

packages/vue/src/calendar-view/src/mobile-first.vue

@@ -1,13 +1,6 @@
 <template>
   <div data-tag="tiny-calendar-view" class="w-full h-auto">
-    <tiny-tooltip
-      ref="tooltip"
-      v-model="state.eventTipVisible"
-      popper-class="absolute max-w-[theme(spacing.80)]"
-      :manual="true"
-      effect="light"
-      placement="right"
-    >
+    <tiny-tooltip ref="tooltip" popper-class="absolute max-w-[theme(spacing.80)]" effect="light" placement="right">
       <template #content>
         <div class="p-2 max-h-[80vh] overflow-auto">
           <div class="px-1.5 mb-1.5 border-l-2 border-color-brand">{{ state.eventTipContent.title }}</div>

packages/vue/src/calendar-view/src/pc.vue

@@ -58,8 +58,8 @@
                   day.isLast || day.isNext
                     ? 'is-next-or-last'
                     : isToday(day) || isSelectedDate(day)
-                    ? 'is-selected'
-                    : '',
+                      ? 'is-selected'
+                      : '',
                   day.disabled ? 'is-disabled' : ''
                 ]"
               >
@@ -212,14 +212,7 @@
         </ul>
       </div>
     </div>
-    <tiny-tooltip
-      ref="tooltip"
-      v-model="state.eventTipVisible"
-      popper-class="tiny-calendar-view-tooltip"
-      :manual="true"
-      effect="light"
-      placement="right"
-    >
+    <tiny-tooltip ref="tooltip" popper-class="tiny-calendar-view-tooltip" effect="light" placement="right">
       <template #content>
         <div class="tooltip-main">
           <div class="title">{{ state.eventTipContent.title }}</div>