feat(tooltip): use the template syntax and rewrite the tooltip component.

examples/sites/src/main.js

@@ -12,7 +12,7 @@ import './assets/index.less'
 import './style.css'
 
 // 覆盖默认的github markdown样式
-import './assets/custom-markdown.css'
+import './assets/custom-markdown.less'
 import './assets/custom-block.less'
 import './assets/md-preview.less'
 

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

@@ -0,0 +1,48 @@
+export const handleRefEvent =
+  ({ props, api }) =>
+  (type: string) => {
+    if (props.manual) return
+
+    if (type === 'mouseenter') {
+      api.cancelDelayHide()
+      api.delayShow()
+    } else if (type === 'mouseleave') {
+      api.cancelDelayShow()
+      api.delayHide()
+    }
+  }
+
+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, 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:modelValue', isShow)
+    }
+
+    // 自动隐藏: 如果显示，且要自动隐藏，则延时后关闭
+    if (!props.manual && props.hideAfter && isShow) {
+      api.delayHideAfter()
+    }
+  }

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

@@ -0,0 +1,75 @@
+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']
+
+export const renderless = (
+  props,
+  { ref, watch, toRefs, toRef, reactive, onBeforeUnmount, onDeactivated, onMounted, onUnmounted, inject },
+  { vm, emit, slots, nextTick, parent }
+) => {
+  const api = {} as any
+  const popperVmRef = {}
+  const { showPopper, updatePopper, popperElm, referenceElm } = userPopper({
+    emit,
+    props,
+    nextTick,
+    toRefs,
+    reactive,
+    parent: parent.$parent,
+    vm,
+    slots,
+    onBeforeUnmount,
+    onDeactivated,
+    watch,
+    popperVmRef
+  } as any)
+
+  showPopper.value = false // 初始为false
+  const state = reactive({
+    showPopper,
+    popperElm,
+    referenceElm,
+    tooltipId: guid('tiny-tooltip-', 4),
+    showContent: inject('showContent', null),
+    tipsMaxWidth: inject('tips-max-width', null)
+  })
+
+  const useTimerFn = useTimer({ onUnmounted, ref })
+  const toggleShowFn = toggleShow({ state, props, emit, api })
+  const { start: delayShow, clear: cancelDelayShow } = useTimerFn(() => toggleShowFn(true), toRef(props, 'openDelay'))
+  const { start: delayHide, clear: cancelDelayHide } = useTimerFn(() => toggleShowFn(false), toRef(props, 'closeDelay'))
+  const { start: delayHideAfter } = useTimerFn(() => toggleShowFn(false), toRef(props, 'hideAfter'))
+
+  Object.assign(api, {
+    state,
+    delayShow,
+    cancelDelayShow,
+    delayHide,
+    cancelDelayHide,
+    delayHideAfter,
+    handlePopEvent: handlePopEvent({ props, api }),
+    handleRefEvent: handleRefEvent({ props, 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
+    }
+  })
+
+  vm.$on('tooltip-update', updatePopper())
+
+  return api
+}

packages/vue-hooks/index.ts

@@ -21,3 +21,4 @@ export { useUserAgent } from './src/useUserAgent'
 export { useWindowSize } from './src/useWindowSize'
 export { userPopper } from './src/vue-popper'
 export { usePopup } from './src/vue-popup'
+export { useTimer } from './src/useTimer'

packages/vue-hooks/src/useTimer.ts

@@ -0,0 +1,36 @@
+/** 延时触发的通用定时器。  setTimeout/ debounce 的地方均由该函数代替。
+ *  比如按钮禁用， 1秒后修改disable为false
+ * 1、 防止连续触发
+ * 2、 组件卸载时，自动取消
+ * @example
+ * const {start: resetDisabled } = useTimer(()=> state.disabled=false,  1000)
+ * resetDisabled();
+ *
+ * const {start: debounceQuery } = useTimer((page)=> grid.query(page),  500)
+ * debounceQuery(1);
+ * debounceQuery(2);  // 仅请求第2页
+ */
+export const useTimer =
+  ({ onUnmounted, ref }) =>
+  (cb: (...args: any[]) => void, delay: any) => {
+    let timerId = 0
+    const $delay = ref(delay)
+
+    function start(...args: any[]) {
+      clear()
+      timerId = setTimeout(() => {
+        cb(...args)
+        timerId = 0
+      }, $delay.value)
+    }
+    function clear() {
+      if (timerId) {
+        clearTimeout(timerId)
+        timerId = 0
+      }
+    }
+
+    onUnmounted(() => clear())
+
+    return { start, clear, delay: $delay }
+  }

packages/vue/src/tooltip/src/index.ts

@@ -1,7 +1,13 @@
 import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
 import type { ITooltipApi } from '@opentiny/vue-renderless/types/tooltip.type'
+import TooltipPc from './tooltip.vue'
+import TooltipMf from './mobile-first.vue'
 
-import template from 'virtual-template?pc|mobile-first'
+// 切换下面，以发布不同的tooltip组件
+
+// import template // from 'virtual-template?pc|mobile-first'
+
+const template = (mode) => (mode === 'mobile-first' ? TooltipMf : TooltipPc) // 新PC, 老 MF
 
 export const tooltipProps = {
   ...$props,

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

@@ -0,0 +1,155 @@
+<template>
+  <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>
+    <Transition :name="transition">
+      <div
+        ref="popperRef"
+        v-show="!disabled && state.showPopper"
+        :id="state.tooltipId"
+        class="tiny-tooltip tiny-tooltip__popper"
+        :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 :renderContent="renderContent" :content="content" />
+          </template>
+          <template v-else>
+            <div v-if="!pre" class="tiny-tooltip__content-wrapper" :style="{ ['max-height']: contentMaxHeight }">
+              {{ content }}
+            </div>
+            <pre v-else>{{ content }}</pre>
+          </template>
+        </slot>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script lang="tsx">
+import { renderless, api } from '@opentiny/vue-renderless/tooltip/new-vue'
+import { $prefix, setup, defineComponent, $props, h } from '@opentiny/vue-common'
+import '@opentiny/vue-theme/tooltip/index.less'
+
+export default defineComponent({
+  name: $prefix + 'Tooltip',
+  componentName: 'Tooltip',
+  components: {
+    RenderContentNode: {
+      props: ['renderContent', 'content'],
+      render() {
+        return this.renderContent(h, this.content)
+      }
+    }
+  },
+  props: {
+    ...$props,
+    visible: {
+      type: String,
+      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
+    },
+    closeDelay: {
+      type: Number,
+      default: () => 300
+    },
+    content: { type: [String, Object] },
+    disabled: { type: Boolean },
+    effect: {
+      type: String,
+      default: () => 'dark'
+    },
+    enterable: {
+      type: Boolean,
+      default: () => true
+    },
+    hideAfter: {
+      type: Number,
+      default: () => 0
+    },
+    manual: { type: Boolean },
+    modelValue: { type: Boolean },
+    //  自动传入vue-popper
+    offset: {
+      default: () => 0
+    },
+    openDelay: {
+      type: Number,
+      default: () => 0
+    },
+    placement: {
+      type: String,
+      default: () => 'bottom'
+    },
+    popperClass: { type: String },
+    popperOptions: {
+      default: () => ({ gpuAcceleration: false, boundariesPadding: 10 })
+    },
+    pre: { type: Boolean },
+    // 原来未暴露的属性， 不明确作用
+    reference: {},
+    popper: {},
+
+    renderContent: { type: Function },
+    tabindex: {
+      type: Number,
+      default: () => 0
+    },
+    transition: {
+      type: String,
+      default: () => 'tiny-fade-in-linear'
+    },
+    // 优先级 > effect
+    type: {
+      type: String,
+      validator: (value: string) => Boolean(~['normal', 'warning', 'error', 'info', 'success'].indexOf(value))
+    },
+    visibleArrow: {
+      type: Boolean,
+      default: () => true
+    },
+    // 原来未暴露的属性
+    zIndex: {
+      type: String,
+      default: () => 'next'
+    },
+    contentMaxHeight: {
+      type: String
+    }
+  },
+  setup(props, context) {
+    return setup({ props, context, renderless, api })
+  }
+})
+</script>