refactor(tooltip): ts to sfc (#511)

* refactor(tooltip): ts to sfc

* Update package dependencies

* Refactor tooltip components and import statements

* Refactor tooltip components

* Fix type casting in Switch and Tooltip components

* Refactor tooltip event handlers to use arrow functions

* Update Vue tooltip component

* Delete tooltipArrow, tooltipPortal, and tooltipProvider components

* Update tooltip component

* Refactor tooltip and dismissable-layer components

* Update tooltip component and visually hidden content

* Update tooltip component and related files

* refactor: PopperContent and Tooltip components

package.json

@@ -40,11 +40,11 @@
     "scripts:genpackage": "esno scripts/generateAliasCode.ts"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.6.1",
+    "@antfu/eslint-config": "^2.6.3",
     "@clack/prompts": "^0.7.0",
-    "@egoist/tailwindcss-icons": "^1.7.1",
-    "@floating-ui/vue": "^1.0.3",
-    "@iconify-json/ph": "^1.1.9",
+    "@egoist/tailwindcss-icons": "^1.7.2",
+    "@floating-ui/vue": "^1.0.5",
+    "@iconify-json/ph": "^1.1.10",
     "@oku-ui/accordion": "workspace:^",
     "@oku-ui/alert-dialog": "workspace:^",
     "@oku-ui/arrow": "workspace:^",
@@ -84,22 +84,22 @@
     "@oku-ui/use-composable": "workspace:^",
     "@oku-ui/utils": "workspace:^",
     "@oku-ui/visually-hidden": "workspace:^",
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-interactions": "^7.6.7",
-    "@storybook/addon-links": "^7.6.7",
-    "@storybook/blocks": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/blocks": "^7.6.10",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/vue3": "^7.6.7",
-    "@storybook/vue3-vite": "^7.6.7",
-    "@types/node": "^20.10.6",
-    "@vitejs/plugin-vue": "^5.0.2",
-    "@vitest/coverage-v8": "^1.1.3",
-    "@vue/test-utils": "^2.4.3",
-    "autoprefixer": "^10.4.16",
-    "bumpp": "^9.2.1",
+    "@storybook/vue3": "^7.6.10",
+    "@storybook/vue3-vite": "^7.6.10",
+    "@types/node": "^20.11.7",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitest/coverage-v8": "^1.2.1",
+    "@vue/test-utils": "^2.4.4",
+    "autoprefixer": "^10.4.17",
+    "bumpp": "^9.3.0",
     "changelogen": "^0.5.5",
     "chokidar": "^3.5.3",
-    "chromatic": "^10.2.0",
+    "chromatic": "^10.6.0",
     "eslint": "^8.56.0",
     "eslint-plugin-storybook": "^0.6.15",
     "esno": "^4.0.0",
@@ -110,13 +110,13 @@
     "lint-staged": "^15.2.0",
     "nx": "^18.0.0",
     "ofetch": "^1.3.3",
-    "pathe": "^1.1.1",
+    "pathe": "^1.1.2",
     "postcss": "^8.4.33",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
     "simple-git-hooks": "^2.9.0",
-    "storybook": "^7.6.7",
+    "storybook": "^7.6.10",
     "storybook-dark-mode": "^3.0.3",
     "tailwindcss": "^3.4.1",
     "tsup": "^8.0.1",

packages/nuxt-module/package.json

@@ -46,25 +46,25 @@
   },
   "dependencies": {
     "@antfu/ni": "^0.21.12",
-    "@nuxt/kit": "^3.9.1",
+    "@nuxt/kit": "^3.9.3",
     "chalk": "^5.3.0",
     "consola": "^3.2.3",
     "install": "^0.13.0",
     "local-pkg": "^0.5.0",
     "ofetch": "^1.3.3",
-    "pacote": "^17.0.5",
-    "pathe": "^1.1.1",
+    "pacote": "^17.0.6",
+    "pathe": "^1.1.2",
     "pkg-types": "^1.0.3",
     "semver": "^7.5.4"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@nuxt/module-builder": "^0.5.5",
-    "@nuxt/schema": "^3.9.1",
-    "@nuxt/test-utils": "^3.9.0",
-    "@types/node": "^20.10.6",
+    "@nuxt/schema": "^3.9.3",
+    "@nuxt/test-utils": "^3.10.0",
+    "@types/node": "^20.11.7",
     "@types/pacote": "^11.1.8",
-    "nuxt": "^3.9.1"
+    "nuxt": "^3.9.3"
   },
   "publishConfig": {
     "access": "public"

packages/package-build/alert-dialog/package.json

@@ -46,7 +46,7 @@
     "@oku-ui/slot": "latest",
     "@oku-ui/use-composable": "latest",
     "@oku-ui/utils": "latest",
-    "@types/node": "^20.10.6"
+    "@types/node": "^20.11.7"
   },
   "devDependencies": {
     "tsconfig": "workspace:^"

packages/package-build/dialog/package.json

@@ -50,7 +50,7 @@
     "@oku-ui/slot": "latest",
     "@oku-ui/use-composable": "latest",
     "@oku-ui/utils": "latest",
-    "@types/node": "^20.10.6",
+    "@types/node": "^20.11.7",
     "aria-hidden": "^1.2.3"
   },
   "devDependencies": {

packages/package-build/hover-card/package.json

@@ -40,7 +40,7 @@
     "vue": "^3.3.0"
   },
   "dependencies": {
-    "@floating-ui/vue": "^1.0.3",
+    "@floating-ui/vue": "^1.0.5",
     "@oku-ui/dismissable-layer": "latest",
     "@oku-ui/popper": "latest",
     "@oku-ui/portal": "latest",

packages/package-build/menu/package.json

@@ -40,12 +40,12 @@
     "vue": "^3.3.0"
   },
   "dependencies": {
-    "@floating-ui/vue": "^1.0.3",
+    "@floating-ui/vue": "^1.0.5",
     "@oku-ui/collection": "latest",
     "@oku-ui/direction": "latest",
     "@oku-ui/dismissable-layer": "latest",
     "@oku-ui/focus-guards": "latest",
-    "@oku-ui/focus-scope": "workspace:^",
+    "@oku-ui/focus-scope": "latest",
     "@oku-ui/popper": "latest",
     "@oku-ui/portal": "latest",
     "@oku-ui/presence": "latest",

packages/package-build/popover/package.json

@@ -41,7 +41,7 @@
     "vue": "^3.3.0"
   },
   "dependencies": {
-    "@floating-ui/vue": "^1.0.3",
+    "@floating-ui/vue": "^1.0.5",
     "@oku-ui/dismissable-layer": "latest",
     "@oku-ui/focus-guards": "latest",
     "@oku-ui/focus-scope": "latest",

packages/package-build/popper/package.json

@@ -39,7 +39,7 @@
     "vue": "^3.3.0"
   },
   "dependencies": {
-    "@floating-ui/vue": "^1.0.3",
+    "@floating-ui/vue": "^1.0.5",
     "@oku-ui/arrow": "latest",
     "@oku-ui/primitive": "latest",
     "@oku-ui/provide": "latest",

packages/package-build/tooltip/package.json

@@ -40,7 +40,7 @@
     "vue": "^3.3.0"
   },
   "dependencies": {
-    "@floating-ui/vue": "^1.0.3",
+    "@floating-ui/vue": "^1.0.5",
     "@oku-ui/dismissable-layer": "latest",
     "@oku-ui/popper": "latest",
     "@oku-ui/portal": "latest",

packages/package-build/use-composable/package.json

@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@oku-ui/utils": "latest",
-    "@vueuse/core": "^10.7.1"
+    "@vueuse/core": "^10.7.2"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",

packages/vue/package.json

@@ -12,8 +12,8 @@
     "@rollup/plugin-alias": "^5.1.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.2",
-    "@vueuse/core": "^10.7.1",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vueuse/core": "^10.7.2",
     "filter-anything": "^3.0.7",
     "typescript": "^5.3.3",
     "unplugin-vue-components": "^0.26.0",

packages/vue/src/dismissable-layer/DismissableLayer.vue

@@ -50,12 +50,12 @@ export type DismissableLayerEmits = {
    * Event handler called when the escape key is down.
    * Can be prevented.
    */
-  escapeKeydown: [event: KeyboardEvent]
+  escapeKeyDown: [event: KeyboardEvent]
   /**
    * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.
    * Can be prevented.
    */
-  pointerdownOutside: [event: PointerdownOutsideEvent]
+  pointerDownOutside: [event: PointerdownOutsideEvent]
   /**
    * Event handler called when the focus moves outside of the `DismissableLayer`.
    * Can be prevented.
@@ -127,7 +127,7 @@ const pointerdownOutside = usePointerdownOutside(async (event) => {
   if (!isPointerEventsEnabled.value || isPointerdownOnBranch)
     return
 
-  emit('pointerdownOutside', event)
+  emit('pointerDownOutside', event)
   emit('interactOutside', event)
 
   if (!event.defaultPrevented)
@@ -139,7 +139,7 @@ useEscapeKeydown((event) => {
   if (!isHighestLayer)
     return
 
-  emit('escapeKeydown', event)
+  emit('escapeKeyDown', event)
 
   if (!event.defaultPrevented) {
     event.preventDefault()

packages/vue/src/dismissable-layer/index.ts

@@ -1,5 +1,6 @@
 export {
   default as OkuDismissableLayer,
+  type DismissableLayerEmits,
 } from './DismissableLayer.vue'
 
 export type * from './DismissableLayer.vue'

packages/vue/src/dismissable-layer/stories/Basic.vue

@@ -80,11 +80,11 @@ function alert(text: string) {
         borderRadius: '10px',
         marginBottom: '20px',
       }"
-      @escape-keydown="(event) => {
+      @escape-key-down="(event) => {
         if (dismissOnEscape === false)
           event.preventDefault()
       }"
-      @pointerdown-outside="(event) => {
+      @pointer-down-outside="(event) => {
         if (dismissOnPointerdownOutside === false || event.target === openButtonRef)
           event.preventDefault()
       }"

packages/vue/src/dismissable-layer/stories/DummyPopover.vue

@@ -51,13 +51,13 @@ const { componentRef } = useComponentRef<HTMLElement | null>()
           <OkuDismissableLayer
             as-child
             :disable-outside-pointer-events="disableOutsidePointerEvents"
-            @escape-keydown="(event) => emit('escapeKeydown', event)"
-            @pointerdown-outside="(event) => {
+            @escape-key-down="(event) => emit('escapeKeyDown', event)"
+            @pointer-down-outside="(event) => {
               skipUnmountAutoFocus = !disableOutsidePointerEvents
               if (event.target === openButtonRef)
                 event.preventDefault()
               else
-                emit('pointerdownOutside', event)
+                emit('pointerDownOutside', event)
             }"
             @focus-outside="(event) => emit('focusOutside', event)"
             @interact-outside="(event) => emit('interactOutside', event)"

packages/vue/src/popper/PopperArrow.vue

@@ -6,6 +6,8 @@ export interface PopperArrowProps extends ArrowProps {
   scopeOkuPopper?: any
 }
 
+export type PopperArrowElement = SVGSVGElement
+
 export const OPPOSITE_SIDE: Record<Side, Side> = {
   top: 'bottom',
   right: 'left',
@@ -26,7 +28,7 @@ defineOptions({
 
 const props = defineProps<PopperArrowProps>()
 
-const { componentRef, currentElement } = useComponentRef()
+const { componentRef, currentElement } = useComponentRef<PopperArrowElement>()
 
 const contentInject = usePopperContentInject('OkuPopperContent', props.scopeOkuPopper)
 const baseSide = computed(() => {

packages/vue/src/popper/PopperContent.vue

@@ -205,9 +205,9 @@ const cannotCenterArrow = computed(() => middlewareData.value.arrow?.centerOffse
 
 const contentZIndex = ref()
 
-watch(currentElement, () => {
-  if (currentElement.value)
-    contentZIndex.value = window.getComputedStyle(currentElement.value).zIndex
+watch(currentElement, (newValue) => {
+  if (newValue)
+    contentZIndex.value = window.getComputedStyle(newValue).zIndex
 })
 
 usePopperContentProvide({

packages/vue/src/popper/index.ts

@@ -16,6 +16,7 @@ export {
 export {
   default as OkuPopperArrow,
   type PopperArrowProps,
+  type PopperArrowElement,
 } from './PopperArrow.vue'
 
 export {

packages/vue/src/presence/Presence.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { defineOptions, h, toRefs, useSlots } from 'vue'
-import { useComponentRef } from '@oku-ui/use-composable'
+import { defineOptions, h, ref, toRefs, useSlots } from 'vue'
+import { unrefElement } from '@oku-ui/use-composable'
 import { usePresence } from './usePresence'
 
 export interface PresenceProps {
@@ -18,8 +18,8 @@ const props = withDefaults(defineProps<PresenceProps>(), {
 
 const { present } = toRefs(props)
 
-const { componentRef, currentElement } = useComponentRef<HTMLElement | undefined>()
-const { isPresent } = usePresence(present, currentElement)
+const nodeElement = ref<HTMLElement | undefined>()
+const { isPresent } = usePresence(present, nodeElement)
 
 const slots = useSlots()
 
@@ -35,13 +35,21 @@ function Comp() {
 
   return isPresent.value
     ? h(child, {
-      ref: componentRef,
+      ref: (element: any) => {
+        const el = unrefElement(element as HTMLElement)
+        if (typeof el?.hasAttribute === 'undefined')
+          return el
+
+        nodeElement.value = el
+
+        return el
+      },
     })
     : null
 }
 
 defineExpose({
-  $el: currentElement,
+  $el: nodeElement,
 })
 </script>