@dataloop-ai/components 0.16.39 → 0.16.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.16.39",
+  "version": "0.16.41",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/basic/DlButton/DlButton.vue

@@ -347,7 +347,7 @@ export default defineComponent({
 }
 
 .dl-button-icon {
-    margin: var(--dl-button-icon-margin, '0px 7px 0px 0px');
+    margin: var(--dl-button-icon-margin, 0px 7px 0px 0px);
 }
 
 .dl-button-container {

package/src/components/essential/DlMenu/DlMenu.vue

@@ -268,9 +268,12 @@ export default defineComponent({
                 })
             }
 
-            registerTick(() => {
-                updatePosition()
-            })
+            registerTick(
+                () => {
+                    updatePosition()
+                },
+                { continuous: true }
+            )
 
             registerTimeout(() => {
                 // required in order to avoid the "double-tap needed" issue
@@ -357,7 +360,7 @@ export default defineComponent({
             })
         }
 
-        async function updatePosition() {
+        const updatePosition = async () => {
             const el = innerRef.value
 
             if (el === null || anchorEl.value === null) {
@@ -367,6 +370,7 @@ export default defineComponent({
             const isAnchorElVisible = await CheckAnchorElVisiblity(
                 anchorEl.value
             )
+
             if (!isAnchorElVisible) {
                 hide()
                 return

package/src/hooks/use-tick.ts

@@ -1,32 +1,52 @@
 import { nextTick, onBeforeUnmount } from 'vue-demi'
 
-/*
- * Usage:
- *    registerTick(fn)
- *    registerTick(fn)
+/**
+ * @description a tick hook that allows you to register a function to be called on the next tick or on the next animation frame.
+ * @returns {Object} registerTick, removeTick
  */
-
 export default function () {
-    let tickFn: Function | undefined
+    let tickFn: Function | null = null
+    let animationFrameId: number | null = null
 
     onBeforeUnmount(() => {
-        tickFn = void 0
+        removeTick()
     })
 
-    return {
-        registerTick(fn: Function) {
-            tickFn = fn
+    const registerTick = (
+        fn: Function,
+        options: { continuous?: boolean } = {}
+    ) => {
+        tickFn = fn
+
+        const { continuous } = options
 
+        if (continuous) {
+            animationFrameId = requestAnimationFrame(() => {
+                if (tickFn === fn) {
+                    tickFn()
+                    registerTick(fn, { continuous })
+                }
+            })
+        } else {
             nextTick(() => {
                 if (tickFn === fn) {
                     tickFn()
-                    tickFn = void 0
+                    tickFn = null
                 }
             })
-        },
+        }
+    }
 
-        removeTick() {
-            tickFn = void 0
+    const removeTick = () => {
+        tickFn = null
+        if (animationFrameId) {
+            cancelAnimationFrame(animationFrameId)
         }
+        animationFrameId = null
+    }
+
+    return {
+        registerTick,
+        removeTick
     }
 }