@dataloop-ai/components 0.20.167-ds-v3.0 → 0.20.167-ds-v3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.167-ds-v3.0",
+  "version": "0.20.167-ds-v3.2",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlTreeTable/DlTreeTable.vue

@@ -355,6 +355,7 @@ export default defineComponent({
         const hasFlatTreeData = true
         const draggedRow = ref<DlTableRow | null>(null)
         const targetRow = ref<DlTableRow | null>(null)
+        const storedValidTarget = ref<DlTableRow | null>(null)
 
         const vue2h = ref()
 
@@ -783,24 +784,43 @@ export default defineComponent({
         }
 
         const handleEndEvent = (event: SortableJs.SortableEvent) => {
+            let finalTarget = targetRow.value
+            let shouldSkipValidation = false
+
+            if (storedValidTarget.value && targetRow.value) {
+                const targetParent = findParentForChild(
+                    targetRow.value.id,
+                    tableRows.value
+                )
+                if (targetParent === storedValidTarget.value.id) {
+                    finalTarget = storedValidTarget.value
+                    shouldSkipValidation = true
+                }
+            }
+
             emit('row-drag-end', {
                 draggedRow: draggedRow.value,
-                targetRow: targetRow.value
+                targetRow: finalTarget
             })
-            const isDragValid = checkParentCondition(
-                draggedRow.value,
-                targetRow.value
-            )
+
+            const isDragValid =
+                shouldSkipValidation ||
+                checkParentCondition(draggedRow.value, finalTarget)
             if (isDragValid) {
+                const smartSortingMovement = {
+                    ...sortingMovement.value,
+                    lastId: finalTarget?.id || sortingMovement.value.lastId
+                }
                 emit(
                     'row-reorder',
-                    moveNestedRow(tableRows.value, event, sortingMovement.value)
+                    moveNestedRow(tableRows.value, event, smartSortingMovement)
                 )
             } else {
                 mainTableKey.value = v4()
             }
             draggedRow.value = null
             targetRow.value = null
+            storedValidTarget.value = null
         }
 
         const handleChangeEvent = (event: any) => {
@@ -905,7 +925,16 @@ export default defineComponent({
                 return false
             }
 
-            return checkParentCondition(draggedRow.value, targetRow)
+            if (targetRow.disableDraggable) {
+                return false
+            }
+
+            const isValid = checkParentCondition(draggedRow.value, targetRow)
+
+            if (isValid) {
+                storedValidTarget.value = targetRow
+            }
+            return isValid
         }
 
         const getTargetRowFromMoveEvent = (

package/src/components/essential/DlSwitch/DlSwitch.vue

@@ -7,12 +7,14 @@
         }`"
     >
         <label
-            v-if="!!leftLabel"
+            v-if="hasLeftLabel"
             class="left dl-switch-label"
             :for="computedId"
             :style="cssLabelVars"
         >
-            {{ leftLabel }}
+            <slot name="left-label">
+                {{ leftLabel }}
+            </slot>
         </label>
         <span
             class="dl-switch-container"
@@ -35,12 +37,14 @@
             />
         </span>
         <label
-            v-if="!!rightLabel"
+            v-if="hasRightLabel"
             class="right dl-switch-label"
             :for="computedId"
             :style="cssLabelVars"
         >
-            {{ rightLabel }}
+            <slot name="right-label">
+                {{ rightLabel }}
+            </slot>
         </label>
     </div>
 </template>
@@ -143,6 +147,12 @@ export default defineComponent({
                 ? this.index === -1
                 : toRaw(this.modelValue) === toRaw(this.falseValue)
         },
+        hasLeftLabel(): boolean {
+            return !!this.leftLabel || !!this.$slots['left-label']
+        },
+        hasRightLabel(): boolean {
+            return !!this.rightLabel || !!this.$slots['right-label']
+        },
         cssVars(): Record<string, string> {
             return {
                 '--dl-checkbox-height': `${this.size}px`,