refactor(tooltip): ts

src/_mixins/use-theme.ts

@@ -26,20 +26,20 @@ type UseThemeProps<T> = Readonly<{
   [key: string]: unknown
 }>
 
-export interface MergedTheme<T> {
+export interface MergedTheme<T, R = any> {
   common: ThemeCommonVars
   self: T
-  peers: any
+  peers: R
   overrides: any
 }
 
-function useTheme<T> (
+function useTheme<T, R> (
   resolveId: string,
   mountId: string,
   style: CNode | undefined,
-  defaultTheme: Theme<T>,
+  defaultTheme: Theme<T, R>,
   props: UseThemeProps<T>
-): ComputedRef<MergedTheme<T>> {
+): ComputedRef<MergedTheme<T, R>> {
   if (style) {
     onBeforeMount(() => {
       style.mount({

src/dropdown/styles/dark.ts

@@ -7,7 +7,7 @@ const dropdownDark: DropdownTheme = {
   name: 'Dropdown',
   common: commonDark,
   peers: {
-    NPopover: popoverDark
+    Popover: popoverDark
   },
   self (vars) {
     const {

src/dropdown/styles/light.ts

@@ -52,13 +52,13 @@ export type DropdownThemeVars = ReturnType<typeof self>
 const dropdownLight: Theme<
   DropdownThemeVars,
   {
-    NPopover: PopoverTheme
+    Popover?: PopoverTheme
   }
 > = {
   name: 'Dropdown',
   common: commonLight,
   peers: {
-    NPopover: popoverLight
+    Popover: popoverLight
   },
   self
 }

src/popover/index.ts

@@ -1 +1,2 @@
 export { default as NPopover, popoverProps } from './src/Popover'
+export type { PopoverRef } from './src/Popover'

src/popover/src/Popover.ts

@@ -64,6 +64,10 @@ const textVNodeType = createTextVNode('').type
 
 type BodyInstance = { syncPosition: () => void; [key: string]: unknown }
 
+export interface PopoverRef {
+  syncPosition(): void
+}
+
 export interface PopoverInjection {
   handleMouseLeave: (e: MouseEvent) => void
   handleMouseEnter: (e: MouseEvent) => void

src/tooltip/index.js

@@ -1 +0,0 @@
-export { default as NTooltip } from './src/Tooltip.js'

src/tooltip/index.ts

@@ -0,0 +1 @@
+export { default as NTooltip } from './src/Tooltip'

src/tooltip/src/Tooltip.ts

@@ -1,25 +1,35 @@
 // Tooltip: popover wearing waistcoat
 import { h, defineComponent, ref, computed } from 'vue'
-import { NPopover } from '../../popover'
+import { NPopover, popoverProps } from '../../popover'
+import type { PopoverRef } from '../../popover'
 import { useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
 import { tooltipLight } from '../styles'
+import type { TooltipTheme } from '../styles'
 
 export default defineComponent({
   name: 'Tooltip',
   props: {
-    ...NPopover.props,
+    ...popoverProps,
+    ...(useTheme.props as ThemeProps<TooltipTheme>),
     showArrow: {
       type: Boolean,
       default: false
     }
   },
   setup (props) {
-    const themeRef = useTheme('Tooltip', 'Tooltip', null, tooltipLight, props)
-    const popoverRef = ref(null)
+    const themeRef = useTheme(
+      'Tooltip',
+      'Tooltip',
+      undefined,
+      tooltipLight,
+      props
+    )
+    const popoverRef = ref<PopoverRef | null>(null)
     return {
       popoverRef,
       syncPosition () {
-        popoverRef.value.syncPosition()
+        (popoverRef.value as PopoverRef).syncPosition()
       },
       mergedTheme: themeRef,
       popoverThemeOverrides: computed(() => {

src/tooltip/styles/dark.ts

@@ -1,8 +1,9 @@
 import { commonDark } from '../../_styles/new-common'
 import { popoverDark } from '../../popover/styles'
 import commonVars from './_common'
+import type { TooltipTheme } from './light'
 
-export default {
+const tooltipDark: TooltipTheme = {
   name: 'Tooltip',
   common: commonDark,
   peers: {
@@ -19,3 +20,5 @@ export default {
     }
   }
 }
+
+export default tooltipDark

src/tooltip/styles/index.js

@@ -1,2 +0,0 @@
-export { default as tooltipDark } from './dark.js'
-export { default as tooltipLight } from './light.js'

src/tooltip/styles/index.ts

@@ -0,0 +1,3 @@
+export { default as tooltipDark } from './dark'
+export { default as tooltipLight } from './light'
+export type { TooltipThemeVars, TooltipTheme } from './light'

src/tooltip/styles/light.js

@@ -1,21 +0,0 @@
-import { commonLight } from '../../_styles/new-common'
-import { popoverLight } from '../../popover/styles'
-import commonVars from './_common'
-
-export default {
-  name: 'Tooltip',
-  common: commonLight,
-  peers: {
-    Popover: popoverLight
-  },
-  self (vars) {
-    const { borderRadius, boxShadow2, baseColor } = vars
-    return {
-      ...commonVars,
-      borderRadius: borderRadius,
-      boxShadow: boxShadow2,
-      color: 'rgba(0, 0, 0, .85)',
-      textColor: baseColor
-    }
-  }
-}

src/tooltip/styles/light.ts

@@ -0,0 +1,35 @@
+import { commonLight } from '../../_styles/new-common'
+import type { ThemeCommonVars } from '../../_styles/new-common'
+import { popoverLight, PopoverTheme } from '../../popover/styles'
+import commonVars from './_common'
+import type { Theme } from '../../_mixins/use-theme'
+
+const self = (vars: ThemeCommonVars) => {
+  const { borderRadius, boxShadow2, baseColor } = vars
+  return {
+    ...commonVars,
+    borderRadius: borderRadius,
+    boxShadow: boxShadow2,
+    color: 'rgba(0, 0, 0, .85)',
+    textColor: baseColor
+  }
+}
+
+export type TooltipThemeVars = ReturnType<typeof self>
+
+const tooltipLight: Theme<
+  TooltipThemeVars,
+  {
+    Popover?: PopoverTheme
+  }
+> = {
+  name: 'Tooltip',
+  common: commonLight,
+  peers: {
+    Popover: popoverLight
+  },
+  self
+}
+
+export default tooltipLight
+export type TooltipTheme = typeof tooltipLight