@dataloop-ai/components 0.20.156 → 0.20.158

package/package.json

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

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue

@@ -17,7 +17,7 @@
                                 ? defaultIconColor
                                 : statusIconColor || defaultIconColor
                         "
-                        size="12px"
+                        size="16px"
                         :inline="false"
                     />
                 </div>
@@ -49,7 +49,7 @@
                             :disabled="disabled"
                             @mousedown="onClear"
                         />
-                        <dl-tooltip> Clear Query </dl-tooltip>
+                        <dl-tooltip> Clear </dl-tooltip>
                     </div>
                 </div>
                 <dl-tooltip
@@ -62,9 +62,7 @@
                     self="top left"
                 >
                     <div style="padding: 10px">
-                        <div class="tooltip-title">
-                            Schema Based Search
-                        </div>
+                        <div class="tooltip-title">Schema Based Search</div>
                         <div class="tooltip-subtitle">
                             A powerful and flexible search. Allows users to
                             construct queries based on specific field selection
@@ -430,14 +428,12 @@ export default defineComponent({
 
         const _normalizeLogicalOperators = (value: string): string => {
             const logicalOperatorsRegEx = /\s(and|or)\s/g
-            return value.replace(
-                logicalOperatorsRegEx,
-                (match, op, offset) => {
-                    const textBeforeTheMatch = value.substring(0, offset)
-                    const isMatchInsideQuotes = isInsideQuotedString(textBeforeTheMatch)
-                    return isMatchInsideQuotes ? match : ` ${op.toUpperCase()} `
-                }
-            )
+            return value.replace(logicalOperatorsRegEx, (match, op, offset) => {
+                const textBeforeTheMatch = value.substring(0, offset)
+                const isMatchInsideQuotes =
+                    isInsideQuotedString(textBeforeTheMatch)
+                return isMatchInsideQuotes ? match : ` ${op.toUpperCase()} `
+            })
         }
 
         const setInputFromSuggestion = (suggestion: any) => {
@@ -448,7 +444,7 @@ export default defineComponent({
             const search = searchQuery.value ?? ''
             const tokens = tokenize(search)
             let leftTokenIndex = tokens.length
-            while(leftTokenIndex-- > 0) {
+            while (leftTokenIndex-- > 0) {
                 if (tokens[leftTokenIndex].pos < caretAt.value) {
                     break
                 }
@@ -459,15 +455,19 @@ export default defineComponent({
                 caretPosition = value.length + 1
             } else {
                 const token = tokens[leftTokenIndex]
-                const tokenLeftText = token.text.substring(0, caretAt.value - token.pos)
-                const tokenRightText = token.text.substring(caretAt.value - token.pos)
+                const tokenLeftText = token.text.substring(
+                    0,
+                    caretAt.value - token.pos
+                )
+                const tokenRightText = token.text.substring(
+                    caretAt.value - token.pos
+                )
 
                 if (token.type === TokenType.WHITESPACE) {
                     // caret after space
                     token.text = ' ' + value + ' '
                     caretPosition = token.pos + 1 + value.length + 1
-                } else
-                if (['AND', 'OR'].includes(value)) {
+                } else if (['AND', 'OR'].includes(value)) {
                     // do not replace text if the value is AND or OR
                     token.text = value + ' ' + token.text
                     caretPosition = token.pos + value.length + 1
@@ -485,22 +485,36 @@ export default defineComponent({
                     // if there are dots in left side expression...
                     // looks like a bug in findSuggestions TODO find it - for now work around it here
                     const leftover = tokenRightText.match(/^\S+/)?.[0] || ''
-                    token.text = tokenLeftText + leftover + ' ' + value + ' ' +
+                    token.text =
+                        tokenLeftText +
+                        leftover +
+                        ' ' +
+                        value +
+                        ' ' +
                         tokenRightText.substring(leftover.length).trimStart()
-                    caretPosition = token.pos + tokenLeftText.length +
-                        leftover.length + 1 + value.length + 1
+                    caretPosition =
+                        token.pos +
+                        tokenLeftText.length +
+                        leftover.length +
+                        1 +
+                        value.length +
+                        1
                 } else {
                     // this| situation: replace whatever is there on the left side with the value
                     // this|situation: replace whatever is there on both sides with the value
-                    const newValue = token.type === TokenType.COMMA ? ', ' + value : value
+                    const newValue =
+                        token.type === TokenType.COMMA ? ', ' + value : value
                     token.text = newValue
                     caretPosition = token.pos + newValue.length
-                    if (tokens[leftTokenIndex + 1]?.type !== TokenType.WHITESPACE) {
+                    if (
+                        tokens[leftTokenIndex + 1]?.type !==
+                        TokenType.WHITESPACE
+                    ) {
                         token.text += ' '
                         caretPosition += 1
                     }
                 }
-                stringValue = tokens.map(token => token.text).join('')
+                stringValue = tokens.map((token) => token.text).join('')
             }
 
             setInputValue(stringValue)
@@ -733,11 +747,7 @@ export default defineComponent({
                     selection.deleteFromDocument()
                     selection
                         .getRangeAt(0)
-                        .insertNode(
-                            document.createTextNode(
-                                text
-                            )
-                        )
+                        .insertNode(document.createTextNode(text))
                     selection.collapseToEnd()
 
                     e.preventDefault()

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

@@ -321,6 +321,21 @@ export default defineComponent({
             type: String,
             default: 'Cannot unselect child when parent is selected'
         },
+        /**
+         * Enforce restrictions that prevent parents from being dragged to child levels
+         * and children from being dragged to parent levels
+         */
+        enforceParentChildRestrictions: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * Enforce restrictions that prevent children from being dragged between different parents
+         */
+        enforceSameParentRestrictions: {
+            type: Boolean,
+            default: true
+        },
         ...useTableActionsProps,
         ...commonVirtScrollProps,
         ...useTableRowExpandProps,
@@ -773,13 +788,20 @@ export default defineComponent({
                 draggedRow: draggedRow.value,
                 targetRow: targetRow.value
             })
-            emit(
-                'row-reorder',
-                moveNestedRow(tableRows.value, event, sortingMovement.value)
+            const isDragValid = checkParentCondition(
+                draggedRow.value,
+                targetRow.value
             )
+            if (isDragValid) {
+                emit(
+                    'row-reorder',
+                    moveNestedRow(tableRows.value, event, sortingMovement.value)
+                )
+            } else {
+                mainTableKey.value = v4()
+            }
             draggedRow.value = null
             targetRow.value = null
-            mainTableKey.value = v4()
         }
 
         const handleChangeEvent = (event: any) => {
@@ -790,10 +812,30 @@ export default defineComponent({
             ) as HTMLElement
             if (passedElement) {
                 const targetRowId = passedElement.dataset.id
-                targetRow.value =
-                    tableRows.value.find(
-                        (row) => getRowKey.value(row) === targetRowId
-                    ) || null
+                const targetLevel = passedElement.getAttribute('data-level')
+
+                if (!targetRowId) {
+                    return
+                }
+
+                let foundRow = tableRows.value.find(
+                    (row: DlTableRow) => row.id === targetRowId
+                )
+                if (!foundRow) {
+                    foundRow = findRowInNestedStructure(targetRowId, props.rows)
+                }
+                if (!foundRow) {
+                    console.warn(
+                        `Row with ID ${targetRowId} not found in data structure`
+                    )
+                    return
+                }
+
+                targetRow.value = foundRow
+                if (targetLevel) {
+                    targetRow.value.level = parseInt(targetLevel)
+                }
+
                 emit('row-drag-over', {
                     draggedRow: draggedRow.value,
                     targetRow: targetRow.value
@@ -812,12 +854,141 @@ export default defineComponent({
         const handleStartEvent = (event: any) => {
             prevMouseY = event.originalEvent.clientY
             const rowIndex = event.oldIndex
-            if (rowIndex !== undefined && rowIndex >= 0) {
+            const draggedElement = event.item
+            if (!draggedElement) {
+                return
+            }
+
+            const draggedLevel = draggedElement.getAttribute('data-level')
+            let draggedId = draggedElement.getAttribute('data-id')
+
+            if (!draggedId && draggedElement.tagName === 'TBODY') {
+                const firstTr = draggedElement.querySelector('tr')
+                if (firstTr) {
+                    draggedId = firstTr.getAttribute('data-id')
+                }
+            }
+
+            if (draggedId) {
+                let foundRow = tableRows.value.find(
+                    (row: DlTableRow) => row.id === draggedId
+                )
+                if (!foundRow) {
+                    foundRow = findRowInNestedStructure(draggedId, props.rows)
+                }
+                if (!foundRow) {
+                    console.warn(
+                        `Dragged row with ID ${draggedId} not found in data structure`
+                    )
+                    return
+                }
+
+                draggedRow.value = foundRow
+                if (draggedLevel) {
+                    draggedRow.value.level = parseInt(draggedLevel)
+                }
+            } else if (rowIndex !== undefined && rowIndex >= 0) {
                 draggedRow.value = tableRows.value[rowIndex] || null
-                emit('row-drag-start', {
-                    draggedRow: draggedRow.value
-                })
             }
+            emit('row-drag-start', {
+                draggedRow: draggedRow.value,
+                targetRow: targetRow.value
+            })
+        }
+
+        const checkParentCondition = (
+            draggedRow: DlTableRow,
+            targetRow: DlTableRow
+        ): boolean => {
+            if (!draggedRow || !targetRow) {
+                return false
+            }
+
+            const originalRows = props.rows
+            const draggedIsTopLevel = originalRows.some(
+                (row: DlTableRow) => row.id === draggedRow.id
+            )
+            const targetIsTopLevel = originalRows.some(
+                (row: DlTableRow) => row.id === targetRow.id
+            )
+            if (
+                props.enforceParentChildRestrictions &&
+                draggedIsTopLevel !== targetIsTopLevel
+            ) {
+                return false
+            }
+            if (!draggedIsTopLevel && props.enforceSameParentRestrictions) {
+                const draggedParent = findParentForChild(
+                    draggedRow.id,
+                    originalRows
+                )
+                const targetParent = findParentForChild(
+                    targetRow.id,
+                    originalRows
+                )
+                if (draggedParent !== targetParent) {
+                    return false
+                }
+            }
+            return true
+        }
+
+        const buildParentMap = (rows: DlTableRow[]): Map<string, string> => {
+            const parentMap = new Map<string, string>()
+            const traverse = (rowList: DlTableRow[]) => {
+                for (const row of rowList) {
+                    if (row.children) {
+                        for (const child of row.children) {
+                            parentMap.set(child.id, row.id)
+                        }
+                        traverse(row.children)
+                    }
+                }
+            }
+            traverse(rows)
+            return parentMap
+        }
+
+        const findParentForChild = (
+            childId: string,
+            rows: DlTableRow[]
+        ): string | null => {
+            const parentMap = buildParentMap(rows)
+            return parentMap.get(childId) || null
+        }
+
+        const calculateRowLevel = (row: DlTableRow): number => {
+            const parentMap = buildParentMap(props.rows)
+            let level = 1
+            let currentId = row.id
+            while (parentMap.has(currentId)) {
+                level++
+                currentId = parentMap.get(currentId)!
+            }
+            return level
+        }
+
+        const findRowInNestedStructure = (
+            rowId: string,
+            rows: DlTableRow[]
+        ): DlTableRow | null => {
+            const searchRecursively = (
+                rowList: DlTableRow[]
+            ): DlTableRow | null => {
+                for (const row of rowList) {
+                    if (row.id === rowId) {
+                        return row
+                    }
+                    if (row.children && row.children.length > 0) {
+                        const found = searchRecursively(row.children)
+                        if (found) {
+                            return found
+                        }
+                    }
+                }
+                return null
+            }
+            return searchRecursively(rows)
         }
 
         const updateColumns = (newColumns: DlTableColumn[]) => {
@@ -851,11 +1022,12 @@ export default defineComponent({
                 const [renderRow] = rowBodySlot
                     ? rowBodySlot({ row })
                     : [renderTr(row, i)]
+                const actualLevel = calculateRowLevel(row)
                 return renderComponent(
                     vue2h.value,
                     'tbody',
                     {
-                        'data-level': 1,
+                        'data-level': actualLevel,
                         key: getRowKey.value(row) + i,
                         class: 'nested-tbody'
                     },

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

@@ -75,10 +75,7 @@ import {
     refocusTargetFn,
     conditionalHandler
 } from './utils'
-import {
-    addEvt,
-    isMobileOrTablet
-} from '../../../utils'
+import { addEvt, isMobileOrTablet } from '../../../utils'
 import { v4 } from 'uuid'
 import {
     arrowNavigationEvents,
@@ -223,12 +220,12 @@ export default defineComponent({
         const { anchorEl, canShow, anchorEvents } = useAnchor(
             props.hoverGroup && !isMobile.value
                 ? {
-                    configureAnchorEl
-                }
+                      configureAnchorEl
+                  }
                 : {
-                    toggleKey: toggleKey.value,
-                    ignoreEvents: ignoreEvents.value
-                }
+                      toggleKey: toggleKey.value,
+                      ignoreEvents: ignoreEvents.value
+                  }
         )
 
         Object.assign(anchorEvents, { delayShow })
@@ -517,7 +514,8 @@ export default defineComponent({
         }
 
         if (props.hoverGroup) {
-            hoverGroupHiders[props.hoverGroup] = hoverGroupHiders[props.hoverGroup] ?? []
+            hoverGroupHiders[props.hoverGroup] =
+                hoverGroupHiders[props.hoverGroup] ?? []
             hoverGroupHiders[props.hoverGroup].push(delayHide)
         }
 

package/src/demos/DlMenuDemo.vue

@@ -89,11 +89,7 @@
         </dl-button>
 
         <dl-button label="Auto-opening Submenus">
-            <dl-menu
-                auto-close
-                anchor="top end"
-                self="top start"
-            >
+            <dl-menu auto-close anchor="top end" self="top start">
                 <dl-list bordered>
                     <dl-list-item
                         v-for="i in 3"