@dataloop-ai/components 0.16.9 → 0.16.11

package/package.json

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

package/src/components/essential/DlIcon/DlIcon.vue

@@ -32,6 +32,7 @@
 import { v4 } from 'uuid'
 import { defineComponent } from 'vue-demi'
 import { getColor, loggerFactory } from '../../../utils'
+import { dynamicSvgImport } from '../../../utils/dynamicSvgImport'
 
 export default defineComponent({
     name: 'DlIcon',
@@ -104,7 +105,12 @@ export default defineComponent({
     },
     methods: {
         loadSvg() {
-            return new Promise<void>((resolve, reject) => {
+            return new Promise<void>(async (resolve, reject) => {
+                let dynamicalImagePath = null
+                await dynamicSvgImport(this.icon).then((path: any) => {
+                    dynamicalImagePath = path
+                })
+
                 const svgElement = new Image()
                 svgElement.setAttribute('height', this.size)
                 svgElement.setAttribute('width', this.size)
@@ -128,7 +134,7 @@ export default defineComponent({
                 try {
                     svgElement.src = this.svgSource
                         ? `${this.svgSource}/${this.icon}.svg`
-                        : require(`@dataloop-ai/icons/assets/${this.icon}.svg`)
+                        : dynamicalImagePath
                 } catch (e) {
                     reject(e)
                 }

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

@@ -347,13 +347,31 @@ export default defineComponent({
             hide(evt)
         }
 
-        function updatePosition() {
+        function CheckAnchorElVisiblity(domElement: any) {
+            return new Promise((resolve) => {
+                const o = new IntersectionObserver(([entry]) => {
+                    resolve(entry.intersectionRatio === 1)
+                    o.disconnect()
+                })
+                o.observe(domElement)
+            })
+        }
+
+        async function updatePosition() {
             const el = innerRef.value
 
             if (el === null || anchorEl.value === null) {
                 return
             }
 
+            const isAnchorElVisible = await CheckAnchorElVisiblity(
+                anchorEl.value
+            )
+            if (!isAnchorElVisible) {
+                hide()
+                return
+            }
+
             setPosition({
                 el,
                 offset: props.offset as number[],

package/src/components/essential/DlTooltip/DlTooltip.vue

@@ -258,13 +258,31 @@ export default defineComponent({
             cleanEvt(anchorEvents, 'tooltipTemp')
         }
 
-        function updatePosition() {
+        function CheckAnchorElVisiblity(domElement: any) {
+            return new Promise((resolve) => {
+                const o = new IntersectionObserver(([entry]) => {
+                    resolve(entry.intersectionRatio === 1)
+                    o.disconnect()
+                })
+                o.observe(domElement)
+            })
+        }
+
+        async function updatePosition() {
             const el = innerRef.value
 
             if (anchorEl.value === null || !el) {
                 return
             }
 
+            const isAnchorElVisible = await CheckAnchorElVisiblity(
+                anchorEl.value
+            )
+            if (!isAnchorElVisible) {
+                hide()
+                return
+            }
+
             setPosition({
                 el,
                 offset: props.offset as number[],

package/src/hooks/use-model-toggle.ts

@@ -113,7 +113,7 @@ export default function ({
         }
     }
 
-    function hide(evt: AnchorEvent) {
+    function hide(evt?: AnchorEvent) {
         if (props.disabled === true) {
             return
         }
@@ -138,7 +138,7 @@ export default function ({
         }
     }
 
-    function processHide(evt: AnchorEvent) {
+    function processHide(evt?: AnchorEvent) {
         if (!showing.value) {
             return
         }

package/src/utils/dynamicSvgImport.ts

@@ -0,0 +1,5 @@
+export function dynamicSvgImport(iconName: string) {
+    return import(
+        `../../node_modules/@dataloop-ai/icons/assets/${iconName}.svg`
+    ).then((d) => d.default)
+}