Update wowerlay

Author: kadiryazici

package.json

@@ -24,7 +24,7 @@
     "tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store",
     "vue": "^3.3.4",
     "vue-selectable-items": "^1.0.1",
-    "wowerlay": "1.0.2"
+    "wowerlay": "1.1.0"
   },
   "files": [
     "README.md",

pnpm-lock.yaml

@@ -34,8 +34,8 @@ const transformOriginMap: Record<AlignedPlacement | Side, string> = {
   'top': 'center bottom',
 }
 
-const handleTransition: WowerlayTransitionFn = (type, element, done) => {
-  const placement = element.getAttribute('data-popover-placement') as AlignedPlacement | Side
+const handleTransition: WowerlayTransitionFn = (type, { popover }, done) => {
+  const placement = popover.getAttribute('data-popover-placement') as AlignedPlacement | Side
   const side = placement.split('-')[0] as Side
 
   const vertical = side === 'top' || side === 'bottom'
@@ -51,25 +51,25 @@ const handleTransition: WowerlayTransitionFn = (type, element, done) => {
     opacity: 1,
   }
 
-  const oldTransformOrigin = element.style.transformOrigin
-  element.style.transformOrigin = transformOriginMap[placement]
+  const oldTransformOrigin = popover.style.transformOrigin
+  popover.style.transformOrigin = transformOriginMap[placement]
 
   if (type === 'leave') {
-    const background = element.parentElement
+    const background = popover.parentElement
     if (background) {
       background.style.setProperty('pointer-events', 'none')
-      element.style.setProperty('pointer-events', 'auto')
+      popover.style.setProperty('pointer-events', 'auto')
     }
   }
 
-  const animation = element.animate(type === 'enter' ? [from, to] : [to, from], {
+  const animation = popover.animate(type === 'enter' ? [from, to] : [to, from], {
     duration: 200,
     easing: 'ease',
   })
 
   animation.onfinish = () => {
     if (type === 'enter')
-      element.style.transformOrigin = oldTransformOrigin
+      popover.style.transformOrigin = oldTransformOrigin
 
     done()
   }
@@ -192,7 +192,7 @@ useEventListener(
   flex-direction: column;
   padding: 4px;
 
-  > * + * {
+  >*+* {
     margin-top: 2px;
   }
 }

src/components/Popover.vue

@@ -11,8 +11,8 @@ interface Props {
   target?: HTMLElement | null
 }
 
-const handleTransition: WowerlayTransitionFn = (type, element, done) => {
-  const placement = element.getAttribute('data-popover-placement')!.split('-')[0]
+const handleTransition: WowerlayTransitionFn = (type, { popover }, done) => {
+  const placement = popover.getAttribute('data-popover-placement')!.split('-')[0]
 
   const vertical = placement === 'top' || placement === 'bottom'
   const transformFunction = vertical ? 'translateY' : 'translateX'
@@ -27,7 +27,7 @@ const handleTransition: WowerlayTransitionFn = (type, element, done) => {
     opacity: 1,
   }
 
-  const animation = element.animate(type === 'enter' ? [from, to] : [to, from], {
+  const animation = popover.animate(type === 'enter' ? [from, to] : [to, from], {
     duration: 200,
     easing: 'ease',
   })

src/components/Tooltip.vue

@@ -15,8 +15,8 @@ export const transformOriginMap: Record<AlignedPlacement | Side, string> = {
   'top': 'center bottom',
 }
 
-export const handleTransition: WowerlayTransitionFn = (type, element, done) => {
-  const placement = element.getAttribute('data-popover-placement') as AlignedPlacement | Side
+export const handleTransition: WowerlayTransitionFn = (type, { popover }, done) => {
+  const placement = popover.getAttribute('data-popover-placement') as AlignedPlacement | Side
   const side = placement.split('-')[0] as Side
 
   const vertical = side === 'top' || side === 'bottom'
@@ -32,25 +32,25 @@ export const handleTransition: WowerlayTransitionFn = (type, element, done) => {
     opacity: 1,
   }
 
-  const oldTransformOrigin = element.style.transformOrigin
-  element.style.transformOrigin = transformOriginMap[placement]
+  const oldTransformOrigin = popover.style.transformOrigin
+  popover.style.transformOrigin = transformOriginMap[placement]
 
   if (type === 'leave') {
-    const background = element.parentElement
+    const background = popover.parentElement
     if (background) {
       background.style.setProperty('pointer-events', 'none')
-      element.style.setProperty('pointer-events', 'auto')
+      popover.style.setProperty('pointer-events', 'auto')
     }
   }
 
-  const animation = element.animate(type === 'enter' ? [from, to] : [to, from], {
+  const animation = popover.animate(type === 'enter' ? [from, to] : [to, from], {
     duration: 200,
     easing: 'ease',
   })
 
   animation.onfinish = () => {
     if (type === 'enter')
-      element.style.transformOrigin = oldTransformOrigin
+      popover.style.transformOrigin = oldTransformOrigin
 
     done()
   }