@dataloop-ai/components 0.18.8 → 0.18.10

package/package.json

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

package/src/components/compound/DlCharts/charts/DlConfusionMatrix/DlConfusionMatrix.vue

@@ -282,6 +282,7 @@ export default defineComponent({
         const cellWidth = ref<number | null>(null)
         const rotateXLabels = ref(true)
         const resizeObserver = ref<ResizeObserver>(null)
+        const isDisposed = ref(false)
 
         const getCellBackground = (value: number = 1): string => {
             const object: { [key: string]: any } = {
@@ -306,6 +307,9 @@ export default defineComponent({
             if (Array.isArray(el)) {
                 el = el[0]
             }
+            if (!el) {
+                return [0, 0]
+            }
             const height = el.clientHeight
             const offsetHeight = -1 * (height / 2)
             return [0, offsetHeight]
@@ -325,7 +329,8 @@ export default defineComponent({
             currentBrushState,
             rotateXLabels,
             calculateXAxisElOffset,
-            debouncedCalculateXAxisElOffset
+            debouncedCalculateXAxisElOffset,
+            isDisposed
         }
     },
     computed: {
@@ -385,18 +390,21 @@ export default defineComponent({
         }
     },
     mounted() {
+        this.isDisposed = false
         if (!this.isValidMatrix) return
         if (this.isEmpty) return
 
         this.handleResizeObserver()
         this.$nextTick(() => {
             setTimeout(() => {
+                if (this.isDisposed) return
                 this.calculateRotatedXLabels()
                 this.updateBrush(this, this.currentBrushState)
             }, 300)
         })
     },
     beforeUnmount() {
+        this.isDisposed = true
         this.handleResizeObserver({ dispose: true })
     },
     methods: {
@@ -410,6 +418,7 @@ export default defineComponent({
             this.rotateXLabels = longest * 12 > getCellWidth()
         },
         handleResizeObserver(options: { dispose?: boolean } = {}) {
+            if (this.isDisposed) return
             const { dispose } = options
             if (dispose && this.resizeObserver) {
                 this.resizeObserver.unobserve(this.$refs.wrapper as Element)
@@ -425,6 +434,7 @@ export default defineComponent({
             }
         },
         resizeMatrix() {
+            if (this.isDisposed) return
             const colorSpectrum = this.$refs.colorSpectrum as HTMLElement
             const verticalWrapper = this.$refs.verticalWrapper as HTMLElement
             const labelY = this.$refs.labelY as HTMLElement

package/src/components/compound/DlSelect/DlSelect.vue

@@ -155,6 +155,7 @@
                 :disabled="disabled || readonly"
                 :arrow-nav-items="options"
                 :max-height="dropdownMaxHeight"
+                :trigger-percentage="triggerPercentage"
                 @show="onMenuOpen"
                 @hide="closeMenu"
                 @highlightedIndex="setHighlightedIndex"
@@ -389,7 +390,14 @@ export default defineComponent({
         clearButtonTooltip: { type: Boolean, default: false },
         dropdownMaxHeight: { type: String, default: '30vh' },
         preserveSearch: { type: Boolean, default: false },
-        disabledTooltip: { type: String, default: 'Disabled' }
+        disabledTooltip: { type: String, default: 'Disabled' },
+        /**
+         * the % of the select element to display the menu
+         */
+        triggerPercentage: {
+            type: Number,
+            default: 1
+        }
     },
     emits: [
         'search-focus',

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

@@ -37,7 +37,10 @@ import {
 } from 'vue-demi'
 
 import useWindowSize from '../../../hooks/use-window-size'
-import useAnchor, { useAnchorProps } from '../../../hooks/use-anchor'
+import useAnchor, {
+    CheckAnchorElVisibility,
+    useAnchorProps
+} from '../../../hooks/use-anchor'
 import useScrollTarget from '../../../hooks/use-scroll-target'
 import useModelToggle, {
     useModelToggleProps,
@@ -149,6 +152,13 @@ export default defineComponent({
         zIndex: {
             type: [Number, String],
             default: 'var(--dl-z-index-menu)'
+        },
+        /**
+         * the % of the parent element that triggers the tooltips visibility
+         */
+        triggerPercentage: {
+            type: Number,
+            default: 1
         }
     },
 
@@ -373,16 +383,6 @@ export default defineComponent({
             hide(evt)
         }
 
-        function CheckAnchorElVisiblity(domElement: any) {
-            return new Promise((resolve) => {
-                const o = new IntersectionObserver(([entry]) => {
-                    resolve(entry.intersectionRatio === 1)
-                    o.disconnect()
-                })
-                o.observe(domElement)
-            })
-        }
-
         const updatePosition = async () => {
             const el = innerRef.value
 
@@ -390,8 +390,11 @@ export default defineComponent({
                 return
             }
 
-            const isAnchorElVisible = await CheckAnchorElVisiblity(
-                anchorEl.value
+            const isAnchorElVisible = await CheckAnchorElVisibility(
+                anchorEl.value,
+                {
+                    triggerPercentage: props.triggerPercentage
+                }
             )
 
             if (!isAnchorElVisible) {

package/src/components/shared/DlTooltip/DlTooltip.vue

@@ -34,7 +34,10 @@ import {
     PropType,
     onMounted
 } from 'vue-demi'
-import useAnchor, { useAnchorProps } from '../../../hooks/use-anchor'
+import useAnchor, {
+    CheckAnchorElVisibility,
+    useAnchorProps
+} from '../../../hooks/use-anchor'
 import useModelToggle, { AnchorEvent } from '../../../hooks/use-model-toggle'
 import usePortal from '../../../hooks/use-portal'
 import useScrollTarget from '../../../hooks/use-scroll-target'
@@ -272,17 +275,6 @@ export default defineComponent({
             cleanEvt(anchorEvents, 'tooltipTemp')
         }
 
-        function CheckAnchorElVisiblity(domElement: any) {
-            const intersectionRatio = props.triggerPercentage ?? 1
-            return new Promise((resolve) => {
-                const o = new IntersectionObserver(([entry]) => {
-                    resolve(entry.intersectionRatio >= intersectionRatio)
-                    o.disconnect()
-                })
-                o.observe(domElement)
-            })
-        }
-
         async function updatePosition() {
             const el = innerRef.value
 
@@ -290,8 +282,11 @@ export default defineComponent({
                 return
             }
 
-            const isAnchorElVisible = await CheckAnchorElVisiblity(
-                anchorEl.value
+            const isAnchorElVisible = await CheckAnchorElVisibility(
+                anchorEl.value,
+                {
+                    triggerPercentage: props.triggerPercentage
+                }
             )
             if (!isAnchorElVisible) {
                 hide()

package/src/hooks/use-anchor.ts

@@ -32,6 +32,21 @@ export const useAnchorProps = {
     contextMenu: Boolean
 }
 
+export function CheckAnchorElVisibility(
+    domElement: any,
+    options: { triggerPercentage?: number } = {}
+) {
+    const { triggerPercentage } = options
+    const intersectionRatio = triggerPercentage ?? 1
+    return new Promise((resolve) => {
+        const o = new IntersectionObserver(([entry]) => {
+            resolve(entry.intersectionRatio >= intersectionRatio)
+            o.disconnect()
+        })
+        o.observe(domElement)
+    })
+}
+
 export default function useAnchor({
     configureAnchorEl
 }: {