feat: trigger

.eslintrc.cjs

@@ -4,4 +4,7 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 'latest',
   },
+  rules: {
+    'sort-imports': 'error',
+  },
 }

package.json

@@ -52,6 +52,7 @@
     "@vue/tsconfig": "^0.4.0",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.40.0",
+    "eslint-plugin-perfectionist": "^1.3.0",
     "jsdom": "^22.0.0",
     "postcss": "^8.4.23",
     "postcss-import": "^15.1.0",

src/components/Popper/PopperTrigger.tsx

@@ -0,0 +1,71 @@
+import {
+  Fragment,
+  type InjectionKey,
+  type Ref,
+  type VNode,
+  cloneVNode,
+  defineComponent,
+  h,
+  inject,
+  withDirectives,
+} from 'vue'
+import { isObject } from 'kotl'
+
+export const POPPER_TRIGGER_TOKEN: InjectionKey<Ref> = Symbol('popper-trigger')
+
+export function getFirstValidChild(nodes: VNode[]): VNode | null {
+  for (const child of nodes) {
+    if (isObject(child)) {
+      if (child.type === Comment) {
+        continue
+      }
+      if (child.type === 'svg' || child.type === Text) {
+        return h('span', child)
+      }
+      if (child.type === Fragment) {
+        return getFirstValidChild(child.children as VNode[])
+      }
+      return child
+    }
+    return h('span', child)
+  }
+
+  return null
+}
+
+// https://github.com/DevCloudFE/vue-devui/blob/dev/packages/devui-vue/devui/shared/components/popper-trigger/src/use-popper-trigger.ts
+export default defineComponent({
+  name: 'TPopperTrigger',
+  setup(_, { slots, attrs }) {
+    return () => {
+      const defaultSlot = slots.default?.(attrs)
+      const triggerRef = inject(POPPER_TRIGGER_TOKEN) as Ref<HTMLElement | null>
+
+      if (!defaultSlot) {
+        return null
+      }
+
+      const firstValidChild = getFirstValidChild(defaultSlot)
+
+      if (!firstValidChild) {
+        return null
+      }
+
+      return withDirectives(cloneVNode(firstValidChild, attrs), [
+        [
+          {
+            mounted(el) {
+              triggerRef.value = el
+            },
+            updated(el) {
+              triggerRef.value = el
+            },
+            unmounted() {
+              triggerRef.value = null
+            },
+          },
+        ],
+      ])
+    }
+  },
+})

src/components/Popper/index.tsx

@@ -1,37 +1,22 @@
 import {
-  ref,
-  computed,
-  defineComponent,
   type ExtractPropTypes,
   type ExtractPublicPropTypes,
+  type InjectionKey,
   type PropType,
-  type SlotsType,
-  type VNode,
+  type Ref,
   Teleport,
+  computed,
+  defineComponent,
+  inject,
   onBeforeMount,
-  onBeforeUnmount,
+  onMounted,
+  onUnmounted,
+  provide,
   shallowRef,
-  toRef,
-  watchEffect,
   toRefs,
-  provide,
-  onUnmounted,
-  inject,
-  type InjectionKey,
-  type Ref,
-  type ShallowRef,
-  onMounted,
+  watchEffect,
 } from 'vue'
-import {
-  useFloating,
-  type UseFloatingOptions,
-  type Placement,
-  type Strategy,
-  type Middleware,
-  autoUpdate,
-  offset,
-  shift,
-} from '@floating-ui/vue'
+import { type Placement, type Strategy, autoUpdate, offset, shift, useFloating } from '@floating-ui/vue'
 import { uid } from 'kotl'
 
 const props = {
@@ -111,7 +96,6 @@ export const Popper = defineComponent({
     })
     onMounted(() => {
       parent?.append({ id, floatingEl, open })
-      // click outside floatingEl to close
     })
     const clickOutsideHandler = (e: MouseEvent) => {
       console.log('clickOutsideHandler', e.target)

src/components/Tooltip/index.tsx

@@ -1,13 +1,13 @@
 import {
-  ref,
-  computed,
-  defineComponent,
   type ExtractPropTypes,
   type ExtractPublicPropTypes,
   type PropType,
   type SlotsType,
-  type VNode,
   Teleport,
+  type VNode,
+  computed,
+  defineComponent,
+  ref,
 } from 'vue'
 import { Popper } from '../Popper'
 import { useFloating } from '@floating-ui/vue'