@dataloop-ai/components 0.18.68 → 0.18.70

package/package.json

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

package/src/components/compound/DlCodeEditor/components/CodeEditor.vue

@@ -410,7 +410,7 @@ export default defineComponent({
                 if (scrolling.value) {
                     scrolling.value = false
                 } else {
-                    debouncedGetLinesCount()
+                    debouncedGetLinesCount.value()
                 }
             }
             hljs.highlightElement(code.value)
@@ -443,7 +443,7 @@ export default defineComponent({
                     if (scrolling.value) {
                         scrolling.value = false
                     } else {
-                        debouncedGetLinesCount()
+                        debouncedGetLinesCount.value()
                     }
                 }
             })
@@ -454,7 +454,7 @@ export default defineComponent({
                 if (scrolling.value) {
                     scrolling.value = false
                 } else {
-                    debouncedGetLinesCount()
+                    debouncedGetLinesCount.value()
                 }
             }
         })

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

@@ -53,14 +53,14 @@
                         dlTableRef.getBodySelectionScope({
                             key: getRowKey(props.item),
                             row: props.item,
-                            pageIndex: props.index
+                            rowIndex: props.index
                         })
                     "
                     :bind-body-cell-scope="
                         dlTableRef.getBodyCellScope({
                             key: getRowKey(props.item),
                             row: props.item,
-                            pageIndex: props.index
+                            rowIndex: props.index
                         })
                     "
                     :color="color"
@@ -102,7 +102,7 @@
                                 dlTableRef.getBodyCellScope({
                                     key: getRowKey(props.item),
                                     row: props.item,
-                                    pageIndex: props.index
+                                    rowIndex: props.index
                                 })
                             "
                         />
@@ -112,9 +112,10 @@
             <template v-else>
                 <template v-if="dlTableRef && !isEmpty">
                     <DlTrTreeView
-                        v-for="(row, pageIndex) in computedRows"
-                        :key="pageIndex"
+                        v-for="(row, rowIndex) in computedRows"
+                        :key="rowIndex"
                         :row="row"
+                        :row-key="rowKey"
                         :is-row-selected="
                             isRowSelected(rowKey, getRowKey(row))
                                 ? 'selected'
@@ -122,21 +123,21 @@
                         "
                         :has-any-action="dlTableRef.hasAnyAction"
                         :no-hover="dlTableRef.noHover"
-                        :page-index="pageIndex"
+                        :row-index="rowIndex"
                         :has-draggable-rows="dlTableRef.hasDraggableRows"
                         :has-selection-mode="dlTableRef.hasSelectionMode"
                         :bind-body-selection="
                             dlTableRef.getBodySelectionScope({
                                 key: getRowKey(row),
                                 row,
-                                pageIndex
+                                rowIndex
                             })
                         "
                         :bind-body-cell-scope="
                             dlTableRef.getBodyCellScope({
                                 key: getRowKey(row),
                                 row,
-                                pageIndex
+                                rowIndex
                             })
                         "
                         :color="color"
@@ -148,12 +149,12 @@
                             (adding, evt) =>
                                 updateSelectionHierarchy(adding, evt, row)
                         "
-                        @rowClick="dlTableRef.onTrClick($event, row, pageIndex)"
+                        @rowClick="dlTableRef.onTrClick($event, row, rowIndex)"
                         @rowDoubleClick="
-                            dlTableRef.onTrDblClick($event, row, pageIndex)
+                            dlTableRef.onTrDblClick($event, row, rowIndex)
                         "
                         @rowContextMenu="
-                            dlTableRef.onTrContextMenu($event, row, pageIndex)
+                            dlTableRef.onTrContextMenu($event, row, rowIndex)
                         "
                         @updateExpandedRow="
                             updateExpandedRow(!row.expanded, getRowKey(row))
@@ -169,7 +170,7 @@
                                     dlTableRef.getBodySelectionScope({
                                         key: getRowKey(row),
                                         row,
-                                        pageIndex
+                                        rowIndex
                                     })
                                 "
                             />
@@ -222,6 +223,7 @@ export default defineComponent({
         const tableRows = ref(cloneDeep(props.rows))
         const tableColumns = ref(props.columns)
         const hasFlatTreeData = true
+
         const hasEmptyStateProps = computed(
             () => Object.keys(props.emptyStateProps).length > 0
         )

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

@@ -1,7 +1,9 @@
 <template>
     <tr
+        ref="dlTrTreeRef"
         :class="trClasses"
         v-bind="$attrs"
+        :children="children"
         v-on="listeners"
     >
         <slot />
@@ -9,15 +11,22 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, isVue2 } from 'vue-demi'
+import { defineComponent, isVue2, watch } from 'vue-demi'
 
 export default defineComponent({
     name: 'DlTrTree',
     props: {
         props: { type: Object, default: () => {} },
-        noHover: Boolean
+        noHover: Boolean,
+        children: {
+            type: Number,
+            default: null
+        }
     },
     computed: {
+        childrenComputed() {
+            return this.children
+        },
         listeners(): any {
             if (isVue2) {
                 // @ts-ignore
@@ -45,6 +54,25 @@ export default defineComponent({
 
             return classes
         }
+    },
+    watch: {
+        childrenComputed(value) {
+            (this.$refs.dlTrTreeRef as any).setAttribute(
+                'data-children',
+                value
+            )
+        }
+    },
+    mounted(): void {
+        this.setAttributeChildren()
+    },
+    methods: {
+        setAttributeChildren() {
+            (this.$refs.dlTrTreeRef as any).setAttribute(
+                'data-children',
+                this.children
+            )
+        }
     }
 })
 </script>

package/src/components/compound/DlTreeTable/utils/getFromChildren.ts

@@ -32,6 +32,7 @@ export function getFromChildren(
             traverseChildren(child)
         }
     }
+
     traverseChildren(clonedParentRows)
 
     return { childrenKeys, childrenCollection }

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

@@ -3,9 +3,10 @@
         v-show="row.isExpandedParent || row.level === 1"
         :class="rowClass"
         :no-hover="noHover"
-        @click="emitRowClick($event, row, pageIndex)"
-        @dblclick="onTrDoubleClick($event, row, pageIndex)"
-        @contextmenu="onTrContextMenu($event, row, pageIndex)"
+        :children="childrenCount"
+        @click="emitRowClick($event, row, rowIndex)"
+        @dblclick="onTrDoubleClick($event, row, rowIndex)"
+        @contextmenu="onTrContextMenu($event, row, rowIndex)"
     >
         <td v-if="hasDraggableRows">
             <dl-icon
@@ -62,7 +63,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue-demi'
+import {
+    defineComponent,
+    PropType,
+    onMounted,
+    ref,
+    toRefs,
+    watch
+} from 'vue-demi'
 import DlTrTree from '../components/DlTrTree.vue'
 import DlTdTree from '../components/DlTdTree.vue'
 import DlIcon from '../../../essential/DlIcon/DlIcon.vue'
@@ -84,6 +92,9 @@ export default defineComponent({
             type: Object as PropType<Record<string, any>>,
             default: () => ({} as Record<string, any>)
         },
+        rowKey: {
+            type: [String, Function]
+        },
         isRowSelected: {
             type: [Boolean, String],
             default: null
@@ -96,7 +107,7 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
-        pageIndex: {
+        rowIndex: {
             type: Number,
             default: null
         },
@@ -153,28 +164,43 @@ export default defineComponent({
         'updateExpandedRow'
     ],
     setup(props, context) {
+        const visibleChildren = ref(1)
+        const childrenCount = ref(1)
+        const { row } = toRefs(props)
+
+        watch(
+            row,
+            () => {
+                getChildrenCount()
+            },
+            {
+                deep: true,
+                flush: 'post'
+            }
+        )
+
         const emitRowClick = (
             event: MouseEvent,
             row: Record<string, any>,
-            pageIndex: number
+            rowIndex: number
         ) => {
-            context.emit('rowClick', event, row, pageIndex)
+            context.emit('rowClick', event, row, rowIndex)
         }
 
         const onTrDoubleClick = (
             evt: MouseEvent,
             row: DlTableRow,
-            pageIndex: number
+            rowIndex: number
         ) => {
-            context.emit('rowDoubleClick', evt, row, pageIndex)
+            context.emit('rowDoubleClick', evt, row, rowIndex)
         }
 
         const onTrContextMenu = (
             evt: MouseEvent,
             row: DlTableRow,
-            pageIndex: number
+            rowIndex: number
         ) => {
-            context.emit('rowContextMenu', evt, row, pageIndex)
+            context.emit('rowContextMenu', evt, row, rowIndex)
         }
 
         const emitUpdateModelValue = (adding: boolean, evt: Event) => {
@@ -234,7 +260,65 @@ export default defineComponent({
             return ''
         }
 
+        const getExpandedvisibleChildren = (): void => {
+            visibleChildren.value = 1
+            updateExpandedvisibleChildren(row.value)
+        }
+
+        const updateExpandedvisibleChildren = (
+            parentRow: Record<string, any>
+        ): void => {
+            if (!parentRow) {
+                return
+            }
+
+            if (!parentRow.expanded) {
+                visibleChildren.value = 1
+                return
+            } else {
+                visibleChildren.value += parentRow.children.length
+            }
+
+            if (!parentRow?.children) {
+                return
+            }
+
+            for (const child of parentRow.children) {
+                if (child.expanded) {
+                    updateExpandedvisibleChildren(child)
+                }
+            }
+        }
+
+        const getChildrenCount = (): void => {
+            childrenCount.value = 1
+            let arr = []
+
+            if (!Array.isArray(row.value)) {
+                arr.push(row.value)
+            } else {
+                arr = row.value
+            }
+
+            getLength(arr)
+        }
+
+        const getLength = (data: any) => {
+            for (let count = 0; count < data.length; count++) {
+                if (data[count]?.children?.length) {
+                    childrenCount.value += data[count].children.length
+                    getLength(data[count].children)
+                }
+            }
+        }
+
+        onMounted(() => {
+            getChildrenCount()
+        })
+
         return {
+            visibleChildren,
+            childrenCount,
             getRowKey,
             emitRowClick,
             onTrDoubleClick,
@@ -245,7 +329,9 @@ export default defineComponent({
             getCellValue,
             hasSlotByName,
             rowClass,
-            getSlotByName
+            getSlotByName,
+            getExpandedvisibleChildren,
+            updateExpandedvisibleChildren
         }
     }
 })

package/src/utils/draggable-table.ts

@@ -68,7 +68,7 @@ export function applyDraggableRows(
 ) {
     const tbody = table.querySelector('tbody.dl-virtual-scroll__content')!
 
-    let currRow: any = null
+    let draggableParentRow: any = null
     let dragElem: any = null
     let oldIndex = 0
     let newIndex = 0
@@ -79,6 +79,8 @@ export function applyDraggableRows(
     let mouseDrag = false
     let rowHeight = 0
     let wasMoved = false
+    let draggableTable: any = null
+    let childrenCount: number
 
     function bindMouse() {
         table.addEventListener('mousedown', handleMouseDown)
@@ -89,14 +91,60 @@ export function applyDraggableRows(
     function handleMouseDown(event: MouseEvent) {
         if (event.button != 0) return true
 
-        const target = getTargetRow(event.target)
+        const parentRow = getTargetRow(event.target)
 
-        if (target) {
+        if (!parentRow) {
+            return
+        }
+
+        parentRow.classList.add('dl-table__is-dragging')
+        const targetRow = parentRow.cloneNode(true)
+
+        const allRows = [...(table.querySelectorAll('tr') as any)]
+        let draggableParentRowIndex = allRows.indexOf(parentRow)
+
+        const parentRowStyle = window.getComputedStyle(parentRow)
+
+        draggableTable = document.createElement('table')
+
+        draggableTable.style.backgroundColor =
+            'var(--dl-color-panel-background)'
+        draggableTable.style.width = parentRowStyle.width
+        draggableTable.style.color = 'var(--dl-color-darker)'
+        draggableTable.style.fontSize = '13px'
+        draggableTable.style.boxShadow = `var(--dl-menu-shadow)`
+        draggableTable.style.zIndex = '9999'
+        draggableTable.style.position = 'absolute'
+        draggableTable.classList.add('dl-table--horizontal-separator')
+
+        draggableTable.append(targetRow)
+
+        childrenCount = targetRow.dataset.children
+            ? Number(targetRow.dataset.children)
+            : 1
+
+        for (let i = 1; i < childrenCount; i++) {
+            draggableParentRowIndex += 1
+            allRows[draggableParentRowIndex].classList.add(
+                'dl-table__is-dragging'
+            )
+            draggableTable.append(
+                allRows[draggableParentRowIndex].cloneNode(true)
+            )
+        }
+
+        Array.from(draggableTable.children).forEach((element) => {
+            (element as HTMLElement).classList.remove('dl-table__is-dragging')
+        })
+
+        if (targetRow) {
             table.style.userSelect = 'none'
-            rowHeight = target.cells[0].getBoundingClientRect().height
+            rowHeight =
+                targetRow.cells[0].getBoundingClientRect().height *
+                (childrenCount ? childrenCount : 1)
 
-            currRow = target
-            addDraggableRow(target)
+            draggableParentRow = parentRow
+            addDraggableRow(draggableTable)
 
             const coords = getMouseCoords(event, root)
 
@@ -122,7 +170,7 @@ export function applyDraggableRows(
     function handleMouseUp() {
         if (!mouseDrag) return
 
-        currRow.classList.remove('dl-table__is-dragging')
+        draggableParentRow.classList.remove('dl-table__is-dragging')
         table.removeChild(dragElem)
 
         if (oldIndex !== newIndex) vm?.emit('row-reorder', oldIndex, newIndex)
@@ -133,25 +181,47 @@ export function applyDraggableRows(
         wasMoved = false
 
         table.style.userSelect = 'auto'
+
+        Array.from(tbody.children).forEach((element) => {
+            element.classList.remove('dl-table__is-dragging')
+        })
     }
 
     function swapRow(row: any, index: number) {
-        const currIndex = Array.from(tbody.children).indexOf(currRow)
-        const row1 = currIndex > index ? currRow : row
-        const row2 = currIndex > index ? row : currRow
+        const allRows = Array.from(tbody.children)
 
         newIndex = index + 1
         wasMoved = oldIndex !== newIndex
-        tbody.insertBefore(row1, row2)
+
+        let indexOfParentRow = allRows.indexOf(draggableParentRow)
+        if (indexOfParentRow === -1) {
+            return
+        }
+        const indexEnd = indexOfParentRow + childrenCount
+        const hierarchyData = allRows.slice(indexOfParentRow, indexEnd)
+        const rowIndex = hierarchyData.indexOf(row)
+        const isDraggingOverChildren = rowIndex > -1
+
+        /**
+         * Prevent insertBefore when dragging over the item in the children hierarchy
+         * */
+        if (isDraggingOverChildren) {
+            return
+        }
+
+        for (let i = 0; i < childrenCount; i++) {
+            tbody.insertBefore(allRows[indexOfParentRow], row)
+            indexOfParentRow++
+        }
     }
 
     function moveRow(x: number, y: number) {
         dragElem.style.top = y + 'px'
         dragElem.style.left = x + 'px'
 
-        const dPos = dragElem.getBoundingClientRect()
-        const currStartY = dPos.y
-        const currEndY = currStartY + dPos.height
+        const draggingPosition = dragElem.getBoundingClientRect()
+        const currentStartY = draggingPosition.y
+        const currentEndY = currentStartY + draggingPosition.height
         const rows = getRows(table)
 
         for (let i = 0; i < rows.length; i++) {
@@ -161,25 +231,25 @@ export function applyDraggableRows(
             const rowEndY = rowStartY + rowSize.height
 
             if (
-                currRow !== rowElem &&
-                isIntersecting(currStartY, currEndY, rowStartY, rowEndY)
+                draggableParentRow !== rowElem &&
+                isIntersecting(currentStartY, currentEndY, rowStartY, rowEndY)
             ) {
-                if (Math.abs(currStartY - rowStartY) < rowSize.height / 2)
+                if (Math.abs(currentStartY - rowStartY) < rowSize.height / 2)
                     swapRow(rowElem, i)
             }
         }
     }
 
-    function addDraggableRow(target: any) {
-        target.classList.add('dl-table__is-dragging')
-        dragElem = target.cloneNode(true)
-        oldIndex = target.rowIndex
-        newIndex = target.rowIndex
+    function addDraggableRow(targetRow: any) {
+        targetRow.classList.add('dl-table__is-dragging')
+        dragElem = targetRow.cloneNode(true)
+        oldIndex = targetRow.rowIndex
+        newIndex = targetRow.rowIndex
 
         dragElem.classList.add('dl-table__drag')
         dragElem.style.height = `${rowHeight}px`
-        for (let i = 0; i < target.children.length; i++) {
-            const oldTD = target.children[i]
+        for (let i = 0; i < targetRow.children.length; i++) {
+            const oldTD = targetRow.children[i]
             const newTD = dragElem.children[i]
             newTD.style.width = getStyle(oldTD, 'width')
             newTD.style.height = getStyle(oldTD, 'height')
@@ -189,7 +259,7 @@ export function applyDraggableRows(
 
         table.appendChild(dragElem)
 
-        const tPos = target.getBoundingClientRect()
+        const tPos = targetRow.getBoundingClientRect()
         const dPos = dragElem.getBoundingClientRect()
         dragElem.style.bottom = dPos.y - tPos.y - tPos.height + 'px'
         dragElem.style.left = '-1px'