fix(tooltip): 还原所有属性的功能，核验所有示例

Author: shenjunjian

packages/renderless/src/tooltip/new-index.ts

@@ -16,17 +16,33 @@ export const handlePopEvent =
   ({ props, api }) =>
   (type: string) => {
     if (props.manual) return
+    if (!props.enterable) return
 
     if (type === 'mouseenter') {
       api.cancelDelayHide()
+    } else if (type === 'mouseleave') {
+      api.delayHide()
     }
   }
 
 export const toggleShow =
-  ({ state, props, emit }) =>
+  ({ state, props, emit, api }) =>
   (isShow: boolean) => {
+    // 智能识别模式
+    if (props.visible === 'auto' && state.referenceElm) {
+      const { clientWidth, scrollWidth } = state.referenceElm.firstElementChild
+      if (scrollWidth <= clientWidth) {
+        return
+      }
+    }
+
     state.showPopper = isShow
     if (props.manual) {
-      emit('update:show', isShow)
+      emit('update:modelValue', isShow)
+    }
+
+    // 自动隐藏: 如果显示，且要自动隐藏，则延时后关闭
+    if (!props.manual && props.hideAfter && isShow) {
+      api.delayHideAfter()
     }
   }

packages/renderless/src/tooltip/new-vue.ts

@@ -1,17 +1,6 @@
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-
 import { handlePopEvent, handleRefEvent, toggleShow } from './new-index'
 import { userPopper, useTimer } from '@opentiny/vue-hooks'
+import { guid } from '@opentiny/utils'
 
 export const api = ['state', 'handlePopEvent', 'handleRefEvent']
 
@@ -21,7 +10,7 @@ export const renderless = (
   { vm, emit, slots, nextTick, parent }
 ) => {
   const api = {} as any
-
+  const popperVmRef = {}
   const { showPopper, updatePopper, popperElm, referenceElm, doDestroy, popperJS } = userPopper({
     emit,
     props,
@@ -33,32 +22,51 @@ export const renderless = (
     slots,
     onBeforeUnmount,
     onDeactivated,
-    watch
+    watch,
+    popperVmRef
   } as any)
 
   const state = reactive({
     showPopper,
     popperElm,
     referenceElm,
+    tooltipId: guid('tiny-tooltip-', 4),
     showContent: inject('showContent', null),
     tipsMaxWidth: inject('tips-max-width', null)
   })
+  state.showPopper = false // 初始为false
 
   const { start: delayShow, clear: cancelDelayShow } = useTimer(() => api.toggleShow(true), toRef(props, 'openDelay'))
   const { start: delayHide, clear: cancelDelayHide } = useTimer(() => api.toggleShow(false), toRef(props, 'closeDelay'))
+  const { start: delayHideAfter } = useTimer(() => api.toggleShow(false), toRef(props, 'hideAfter'))
 
   Object.assign(api, {
     state,
     delayShow,
     cancelDelayShow,
     delayHide,
     cancelDelayHide,
+    delayHideAfter,
     handlePopEvent: handlePopEvent({ props, api }),
     handleRefEvent: handleRefEvent({ props, api }),
-    toggleShow: toggleShow({ state, props, emit })
+    toggleShow: toggleShow({ state, props, emit, api })
+  })
+  watch(
+    () => props.modelValue,
+    (val) => {
+      if (props.manual) {
+        val ? delayShow() : delayHide()
+      }
+    }
+  )
+  onMounted(() => {
+    state.popperElm = vm.$refs.popperRef
+    state.referenceElm = vm.$refs.referenceRef
+    // 初始显示
+    if (props.manual && props.modelValue) {
+      state.showPopper = true
+    }
   })
-
-  onMounted(() => {})
 
   vm.$on('tooltip-update', updatePopper())
 

packages/vue/src/tooltip/src/tooltip.vue

@@ -1,31 +1,35 @@
 <template>
-  <span
+  <div
     ref="referenceRef"
     class="tiny-tooltip"
     v-bind="$attrs"
+    style="display: inline-block"
+    :tabindex="tabindex"
+    :aria-describeby="state.tooltipId"
     @mouseenter="handleRefEvent('mouseenter')"
     @mouseleave="handleRefEvent('mouseleave')"
   >
     <slot></slot>
-  </span>
+  </div>
   <Transition :name="transition">
     <div
       ref="popperRef"
       v-show="!disabled && state.showPopper"
+      :id="state.tooltipId"
       class="tiny-tooltip tiny-tooltip__popper"
-      :class="['is-' + (type || effect), popperClass, state.showContent ? 'tiny-tooltip__show-tips' : '']"
+      :class="['is-' + (type || effect || 'dark'), popperClass, state.showContent ? 'tiny-tooltip__show-tips' : '']"
       :style="{ ['max-width']: state.tipsMaxWidth }"
       @mouseenter="handlePopEvent('mouseenter')"
       @mouseleave="handlePopEvent('mouseleave')"
     >
       <slot name="content">
         <template v-if="renderContent">
-          <render-content-node />
+          <render-content-node :renderContent="renderContent" :content="content" />
         </template>
         <template v-else>
-          <span v-if="!pre" class="tiny-tooltip__content-wrapper" :style="{ ['max-height']: contentMaxHeight }">
+          <div v-if="!pre" class="tiny-tooltip__content-wrapper" :style="{ ['max-height']: contentMaxHeight }">
             {{ content }}
-          </span>
+          </div>
           <pre v-else>{{ content }}</pre>
         </template>
       </slot>
@@ -43,8 +47,9 @@ export default defineComponent({
   componentName: 'Tooltip',
   components: {
     RenderContentNode: {
+      props: ['renderContent', 'content'],
       render() {
-        return this.$parent.renderContent(h, this.$parent.content)
+        return this.renderContent(h, this.content)
       }
     }
   },
@@ -55,21 +60,22 @@ export default defineComponent({
       default: () => 'always',
       validator: (value: string) => ['always', 'auto'].includes(value)
     },
-    // 原来未暴露的属性
+    // 原来未暴露的属性, 自动传入vue-popper
     adjustArrow: {
       type: Boolean,
       default: () => false
     },
+    //  自动传入vue-popper
     appendToBody: {
       type: Boolean,
       default: () => true
     },
-    // 原来未暴露的属性
+    // 原来未暴露的属性, 自动传入vue-popper
     arrowOffset: {
       type: Number,
       default: () => 0
     },
-    // 原来未暴露的属性
+    // 原来未暴露的属性, 未入 vue-popper， 可能bug
     boundariesPadding: {
       type: Number,
       default: () => 5
@@ -94,6 +100,7 @@ export default defineComponent({
     },
     manual: { type: Boolean },
     modelValue: { type: Boolean },
+    //  自动传入vue-popper
     offset: {
       default: () => 0
     },