@dataloop-ai/components 0.20.100 → 0.20.102

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.100",
+  "version": "0.20.102",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -23,7 +23,7 @@
     "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
   },
   "dependencies": {
-    "@dataloop-ai/icons": "^3.0.185",
+    "@dataloop-ai/icons": "^3.0.191",
     "@types/flat": "^5.0.2",
     "@types/lodash": "^4.14.184",
     "@types/sortablejs": "^1.15.7",

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

@@ -246,7 +246,7 @@ export default defineComponent({
             default: () => [] as string[]
         },
         operatorsOverride: {
-            type: Object as PropType<{[name: string]: string[]}>,
+            type: Object as PropType<{ [name: string]: string[] }>,
             default: () => ({})
         },
         forbiddenKeys: {
@@ -335,28 +335,7 @@ export default defineComponent({
 
             showSuggestions.value = false
 
-            // to handle typing . or , after accepting a suggestion
-            const dotOrCommaRegEx = /\s+([\.|\,]\s?)$/
-            const dotOrCommaMatch = value.match(dotOrCommaRegEx)
-            if (dotOrCommaMatch) {
-                value = value.replace(dotOrCommaRegEx, dotOrCommaMatch[1])
-            }
-
-            // to handle date suggestion modal to open automatically.
-            if (value.includes(dateSuggestionPattern)) {
-                value = value.trimEnd()
-            }
-
-            const specialSuggestions = suggestions.value.filter(
-                (suggestion) =>
-                    typeof suggestion === 'string' && suggestion.startsWith('.')
-            )
-
-            for (const suggestion of specialSuggestions) {
-                if (value.includes(suggestion)) {
-                    value = value.replace(` ${suggestion}`, suggestion)
-                }
-            }
+            value = _normalizeInputValue(value)
 
             searchQuery.value = value
 
@@ -408,6 +387,43 @@ export default defineComponent({
             }
         }
 
+        const _normalizeInputValue = (value: string): string => {
+            // Normalize logical operators (' and ' -> ' AND ', ' or ' -> ' OR ')
+            const logicalOperatorsRegEx = /\s(and|or)\s/g
+            const logicalMatch = value.match(logicalOperatorsRegEx)
+            if (logicalMatch) {
+                value = value.replace(
+                    logicalOperatorsRegEx,
+                    (_, match) => ` ${match.toUpperCase()} `
+                )
+            }
+
+            // Handle typing '.' or ',' after accepting a suggestion
+            const dotOrCommaRegEx = /\s+([.,]\s?)$/
+            const dotOrCommaMatch = value.match(dotOrCommaRegEx)
+            if (dotOrCommaMatch) {
+                value = value.replace(dotOrCommaRegEx, dotOrCommaMatch[1])
+            }
+
+            // Handle date suggestion modal to open automatically.
+            if (value.includes(dateSuggestionPattern)) {
+                value = value.trimEnd()
+            }
+
+            // Handle special suggestions (suggestions that start with '.')
+            const specialSuggestions = suggestions.value.filter(
+                (suggestion) =>
+                    typeof suggestion === 'string' && suggestion.startsWith('.')
+            )
+            for (const suggestion of specialSuggestions) {
+                if (value.includes(suggestion)) {
+                    value = value.replace(` ${suggestion}`, suggestion)
+                }
+            }
+
+            return value
+        }
+
         const setInputFromSuggestion = (suggestion: any) => {
             const value = '' + suggestion
             let stringValue = ''
@@ -639,18 +655,7 @@ export default defineComponent({
         }
 
         const endsWithOperator = computed(() => {
-            const operators = [
-                '>=',
-                '<=',
-                '!=',
-                '=',
-                '>',
-                '<',
-                'IN',
-                'NOT-IN',
-                'EXISTS',
-                'DOESNT-EXIST'
-            ]
+            const operators = ['>=', '<=', '!=', '=', '>', '<', 'IN', 'NOT-IN']
 
             for (const op of operators) {
                 if (
@@ -689,7 +694,9 @@ export default defineComponent({
         const onPaste = (e: ClipboardEvent) => {
             const selection = window.getSelection()
             if (selection.rangeCount) {
-                let text = (e.clipboardData || (window as any).clipboardData).getData('text')
+                let text = (
+                    e.clipboardData || (window as any).clipboardData
+                ).getData('text')
                 if (text?.length > 0) {
                     const range = selection.getRangeAt(0)
 
@@ -701,19 +708,27 @@ export default defineComponent({
 
                     const stringOperators = getStringOperators()
                     if (
-                        new RegExp(`(,|\\s(${stringOperators.join('|')}))\\s*$`).test(preceedingText) &&
+                        new RegExp(
+                            `(,|\\s(${stringOperators.join('|')}))\\s*$`
+                        ).test(preceedingText) &&
                         !/^\s*['"]/.test(text) &&
                         isNaN(Number(text)) &&
-                        text !== "false" &&
-                        text !== "true"
+                        text !== 'false' &&
+                        text !== 'true'
                     ) {
                         text = enquoteString(text)
                     }
 
                     selection.deleteFromDocument()
-                    selection.getRangeAt(0).insertNode(document.createTextNode(
-                        (preceedingText.endsWith(' ') ? '' : ' ') + text + ' '
-                    ))
+                    selection
+                        .getRangeAt(0)
+                        .insertNode(
+                            document.createTextNode(
+                                (preceedingText.endsWith(' ') ? '' : ' ') +
+                                    text +
+                                    ' '
+                            )
+                        )
                     selection.collapseToEnd()
 
                     e.preventDefault()
@@ -893,7 +908,11 @@ export default defineComponent({
 
         //#region computed
         const editorStyle = computed((): SyntaxColorSchema => {
-            return createColorSchema(colorSchema.value, aliases.value, schema.value)
+            return createColorSchema(
+                colorSchema.value,
+                aliases.value,
+                schema.value
+            )
         })
 
         const defaultIcon = 'icon-dl-stars'

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

@@ -290,6 +290,8 @@ export default defineComponent({
         const denseState = ref([])
         const resizableState = ref([])
         const hasFlatTreeData = true
+        const draggedRow = ref<DlTableRow | null>(null)
+        const targetRow = ref<DlTableRow | null>(null)
 
         const vue2h = ref()
 
@@ -553,7 +555,7 @@ export default defineComponent({
                 onUpdateExpandedRow: () =>
                     updateExpandedRow(!row.isExpanded, getRowKey.value(row)),
                 on: {
-                    'update:modelValue': (adding: boolean, evt: Event) => {
+                    'update:model-value': (adding: boolean, evt: Event) => {
                         updateSelectionHierarchy(adding, evt, row)
                     },
                     rowClick: (event: Event, row: any, index: number) => {
@@ -656,10 +658,16 @@ export default defineComponent({
         }
 
         const handleEndEvent = (event: SortableJs.SortableEvent) => {
+            emit('row-drag-end', {
+                draggedRow: draggedRow.value,
+                targetRow: targetRow.value
+            })
             emit(
                 'row-reorder',
                 moveNestedRow(tableRows.value, event, sortingMovement.value)
             )
+            draggedRow.value = null
+            targetRow.value = null
             mainTableKey.value = v4()
         }
 
@@ -669,6 +677,17 @@ export default defineComponent({
                 originalEvent.srcElement,
                 'dl-tr'
             ) as HTMLElement
+            if (passedElement) {
+                const targetRowId = passedElement.dataset.id
+                targetRow.value =
+                    tableRows.value.find(
+                        (row) => getRowKey.value(row) === targetRowId
+                    ) || null
+                emit('row-drag-over', {
+                    draggedRow: draggedRow.value,
+                    targetRow: targetRow.value
+                })
+            }
             const currentY = originalEvent.clientY
             if (currentY > prevMouseY) {
                 sortingMovement.value.direction = 'down'
@@ -679,8 +698,16 @@ export default defineComponent({
             sortingMovement.value.lastId = passedElement.dataset.id
         }
 
-        const handleStartEvent = (event: any) =>
-            (prevMouseY = event.originalEvent.clientY)
+        const handleStartEvent = (event: any) => {
+            prevMouseY = event.originalEvent.clientY
+            const rowIndex = event.oldIndex
+            if (rowIndex !== undefined && rowIndex >= 0) {
+                draggedRow.value = tableRows.value[rowIndex] || null
+                emit('row-drag-start', {
+                    draggedRow: draggedRow.value
+                })
+            }
+        }
 
         const updateColumns = (newColumns: DlTableColumn[]) => {
             emit('col-update', newColumns)

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

@@ -16,7 +16,7 @@ export const useTreeTableRowSelectionProps = {
     }
 }
 
-export const useTreeTableRowSelectionEmits = ['selection', 'selected-iitems']
+export const useTreeTableRowSelectionEmits = ['selection', 'selected-items']
 
 export function useTreeTableRowSelection(
     props: DlTableProps,
@@ -119,7 +119,7 @@ export function useTreeTableRowSelection(
         const { selectedItems } = convertToNestedObject(payload)
         selectedItemsNested.value = selectedItems
 
-        emit('selectedItems', selectedItems)
+        emit('selected-items', selectedItems)
     }
 
     function isIncludedInSelectedNestedItems(