@dataloop-ai/components 0.18.85 → 0.18.87

package/package.json

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

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

@@ -113,7 +113,8 @@ import {
     replaceJSDatesWithStringifiedDates,
     replaceStringifiedDatesWithJSDates,
     setAliases,
-    revertAliases
+    revertAliases,
+    clearPartlyTypedSuggestion
 } from '../utils'
 import { v4 } from 'uuid'
 import {
@@ -260,14 +261,13 @@ export default defineComponent({
             }
 
             searchQuery.value = value
-            input.value.innerHTML = value
 
-            // const resetCursor = restoreCursorPosition(input.value)
+            if (value !== input.value.innerText) {
+                input.value.innerHTML = value
+            }
+
             updateEditor(input.value, editorStyle.value)
             setMenuOffset(isEligibleToChange(input.value, expanded.value))
-            // resetCursor()
-
-            setCaret(input.value)
 
             if (!expanded.value) {
                 isOverflowing.value =
@@ -330,7 +330,10 @@ export default defineComponent({
                 stringValue = value + ' '
             }
 
-            setInputValue(stringValue)
+            setInputValue(
+                clearPartlyTypedSuggestion(input.value.innerText, stringValue)
+            )
+            setCaret(input.value)
         }
 
         const debouncedSetInputValue = debounce(setInputValue, 300)

package/src/components/compound/DlSearches/DlSmartSearch/utils/highlightSyntax.ts

@@ -52,7 +52,6 @@ export function updateEditor(
     })
 
     editor.innerHTML = renderText(textContent, colorSchema)
-
     restoreSelection(editor, anchorIndex, focusIndex)
 }
 
@@ -120,3 +119,24 @@ export function setCaret(target: HTMLElement) {
     sel.addRange(range)
     target.focus()
 }
+
+export function clearPartlyTypedSuggestion(oldValue: string, newValue: string) {
+    const oldSuggestion = oldValue.split(' ').at(-1)
+    const newSuggestion = newValue.split(' ').at(-2)
+    if (oldSuggestion && newSuggestion?.includes(oldSuggestion)) {
+        newValue = removeOldSuggestion(newValue)
+    }
+    return newValue
+}
+
+function removeOldSuggestion(inputString: string) {
+    const words = inputString.trim().split(' ')
+
+    if (words.length >= 2) {
+        words.splice(-2, 1)
+        const resultString = words.join(' ')
+        return resultString + ' '
+    } else {
+        return inputString
+    }
+}

package/src/components/compound/DlTable/styles/dl-table-styles.scss

@@ -8,9 +8,9 @@
   border-collapse: separate;
   border-spacing: 0;
 
-  &__drag-icon > div {
+  &__drag-icon>div {
     transition: all ease-in 0.1s;
-      opacity: 0;
+    opacity: 0;
   }
 
   //markup-table 
@@ -53,6 +53,10 @@
     }
   }
 
+  .trigger-icon {
+    margin-right: 5px
+  }
+
   th:first-child,
   td:first-child {
     padding-left: 8px;
@@ -71,9 +75,10 @@
     height: 40px;
 
     &:not(.dl-tr--no-hover):hover {
-      .dl-table__drag-icon > div {
+      .dl-table__drag-icon>div {
         opacity: 1;
       }
+
       td:not(.dl-td--no-hover) {
         background-color: var(--dl-color-fill-hover);
       }
@@ -86,6 +91,7 @@
     white-space: nowrap;
     overflow: hidden;
     padding: 10px 8px;
+    display: flex;
   }
 
   th {

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

@@ -45,6 +45,7 @@
             <template #icon="{}">
                 <DlIcon
                     v-if="(row.children || []).length > 0 && colIndex === 0"
+                    style="margin-right: 5px"
                     :icon="`icon-dl-${row.expanded ? 'down' : 'right'}-chevron`"
                     @click="emitUpdateExpandedRow"
                 />