@dataloop-ai/components 0.17.108 → 0.17.110

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.108",
+  "version": "0.17.110",
   "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/compound/DlDateTime/DlDateTimeRange/DlDateTimeRange.vue

@@ -416,7 +416,16 @@ export default defineComponent({
             this.$emit('set-type', value)
         },
         updateDateInterval(value: DateInterval | null) {
-            this.dateInterval = value
+            this.dateInterval = {
+                from: value.from,
+                to: new Date(
+                    value.from.getFullYear(),
+                    value.from.getMonth(),
+                    value.from.getDate(),
+                    23,
+                    59
+                )
+            }
             this.$emit('update:modelValue', value)
             this.$emit('change', value)
         },