@dataloop-ai/components 0.17.109 → 0.17.111

package/package.json

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

package/src/components/basic/DlGrid/DlGrid.vue

@@ -41,7 +41,7 @@ export default defineComponent({
             default: 3
         }
     },
-    emits: ['update:modelValue'],
+    emits: ['update:modelValue', 'layout-changed'],
     computed: {
         gridStyles(): object {
             return {
@@ -88,10 +88,14 @@ export default defineComponent({
                 const htmlElement = element as HTMLElement
                 htmlElement.style.order = `${orderIndex}`
                 htmlElement.style.gridColumn = gridTemplate[orderIndex - 1]
-                htmlElement.addEventListener('change-position', (e) => {
+                htmlElement.addEventListener('position-changing', (e) => {
                     if (!isCustomEvent(e)) return
                     this.changePosition(e)
                 })
+                htmlElement.addEventListener(
+                    'position-changed',
+                    this.layoutChanged.bind(this)
+                )
             })
         },
         changePosition(e: CustomEvent) {
@@ -123,7 +127,14 @@ export default defineComponent({
                 side,
                 this.maxElementsPerRow
             )
+            // Update modelValue is required to trigger visualization of the changes
             this.$emit('update:modelValue', newLayout)
+            if (e.detail.endDragging) {
+                this.layoutChanged()
+            }
+        },
+        layoutChanged() {
+            this.$emit('layout-changed', this.modelValue)
         }
     }
 })

package/src/components/basic/DlWidget/DlWidget.vue

@@ -128,13 +128,17 @@ export default defineComponent({
             const target = getElementAbove(e.target as HTMLElement, 'dl-widget')
             const change = {
                 source: this.draggedWidget,
-                target
+                target,
+                endDragging: true
             }
+            const wrapper = this.$refs.wrapper as HTMLElement
             if (target && this.draggedWidget) {
-                const event = new CustomEvent('change-position', {
+                const event = new CustomEvent('position-changing', {
                     detail: change
                 })
-                ;(this.$refs.wrapper as HTMLElement).dispatchEvent(event)
+                wrapper.dispatchEvent(event)
+            } else {
+                wrapper.dispatchEvent(new CustomEvent('position-changed'))
             }
             window.removeEventListener('mousemove', this.moveClone)
             window.removeEventListener('mouseup', this.stopDragging)
@@ -165,7 +169,7 @@ export default defineComponent({
                 this.hoveredWidget,
                 'widget-wrapper'
             )
-            const event = new CustomEvent('change-position', {
+            const event = new CustomEvent('position-changing', {
                 detail: {
                     source: this.$refs.wrapper,
                     target: targetWidget,

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

@@ -131,6 +131,13 @@ export default defineComponent({
             default: 'left',
             validator: (v: string) =>
                 ['left', 'right', 'justify', 'center'].includes(v)
+        },
+        /**
+         * the % of the parent element that triggers the tooltips visibility
+         */
+        triggerPercentage: {
+            type: Number,
+            default: 1
         }
     },
     setup(props, { emit, attrs }) {
@@ -266,9 +273,10 @@ export default defineComponent({
         }
 
         function CheckAnchorElVisiblity(domElement: any) {
+            const intersectionRatio = props.triggerPercentage ?? 1
             return new Promise((resolve) => {
                 const o = new IntersectionObserver(([entry]) => {
-                    resolve(entry.intersectionRatio === 1)
+                    resolve(entry.intersectionRatio >= intersectionRatio)
                     o.disconnect()
                 })
                 o.observe(domElement)