@dataloop-ai/components 0.19.127 → 0.19.129

package/package.json

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

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

@@ -84,6 +84,18 @@
                     :single-selection="true"
                     @change="onDateSelection"
                 />
+                <div class="dl-smart-search-input__date-picker-buttons">
+                    <dl-button
+                        label="Cancel"
+                        outlined
+                        @mousedown="onDateSelectionCancel"
+                    />
+                    <dl-button
+                        label="Apply"
+                        :disabled="!datePickerSelection"
+                        @mousedown="onDateSelectionApply"
+                    />
+                </div>
             </div>
         </dl-menu>
     </div>
@@ -118,6 +130,7 @@ import { DateInterval } from '../../../DlDateTime/types'
 import {
     isEndingWithDateIntervalPattern,
     replaceDateInterval,
+    removeDateInterval,
     updateEditor,
     isEligibleToChange,
     createColorSchema,
@@ -255,11 +268,8 @@ export default defineComponent({
         //#region hooks
         // todo: these can be stale data. we need to update them on schema change.
         const { hasEllipsis } = useSizeObserver(input)
-        const { suggestions, error, findSuggestions } = useSuggestions(
-            schema,
-            aliases,
-            { strict, omitSuggestions }
-        )
+        const { suggestions, error, findSuggestions, checkErrors } =
+            useSuggestions(schema, aliases, { strict, omitSuggestions })
         //#endregion
 
         //#region methods
@@ -328,6 +338,7 @@ export default defineComponent({
 
             nextTick(() => {
                 findSuggestions(value.substring(0, caretAt.value))
+                checkErrors(value)
             })
 
             if (!noEmit) {
@@ -492,6 +503,7 @@ export default defineComponent({
             }
             nextTick(() => {
                 findSuggestions('')
+                checkErrors('')
             })
         }
 
@@ -539,8 +551,27 @@ export default defineComponent({
 
         const onDateSelection = (value: DateInterval) => {
             datePickerSelection.value = value
-            searchQuery.value = replaceDateInterval(searchQuery.value, value)
-            input.value.innerHTML = searchQuery.value
+        }
+
+        const onDateSelectionCancel = () => {
+            searchQuery.value = removeDateInterval(searchQuery.value)
+            showDatePicker.value = false
+            showSuggestions.value = true
+            datePickerSelection.value = null
+            setInputValue(searchQuery.value + ' ', { noEmit: true })
+            setCaretAtTheEnd(input.value)
+        }
+
+        const onDateSelectionApply = () => {
+            searchQuery.value = replaceDateInterval(
+                searchQuery.value,
+                datePickerSelection.value
+            )
+            showDatePicker.value = false
+            showSuggestions.value = true
+            datePickerSelection.value = null
+            setInputValue(searchQuery.value + ' ', { noEmit: true })
+            setCaretAtTheEnd(input.value)
         }
 
         const readModelValue = (val: { [key: string]: any }) => {
@@ -629,15 +660,6 @@ export default defineComponent({
                 return
             }
 
-            if (showDatePicker.value) {
-                showDatePicker.value = false
-                showSuggestions.value = true
-                datePickerSelection.value = null
-                setInputValue(searchQuery.value + ' ', { noEmit: true })
-                setCaretAtTheEnd(input.value)
-                return
-            }
-
             if (showSuggestions.value) {
                 showSuggestions.value = false
                 return
@@ -898,6 +920,8 @@ export default defineComponent({
             onKeyPress,
             onInput,
             onDateSelection,
+            onDateSelectionCancel,
+            onDateSelectionApply,
             computedStatus,
             setInputFromSuggestion,
             inputPlaceholder,
@@ -1130,6 +1154,14 @@ export default defineComponent({
     &__date-picker-wrapper {
         width: 562px;
     }
+
+    &__date-picker-buttons {
+        padding: 0 16px 16px;
+        text-align: right;
+        > * {
+            margin-left: 16px;
+        }
+    }
 }
 .focus {
     word-break: break-all;

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

@@ -47,6 +47,10 @@ export const replaceDateInterval = (str: string, date: DateInterval) => {
     return replaced
 }
 
+export const removeDateInterval = (str: string) => {
+    return replaceFirstOrLastOccurrence(str, '', datePattern)
+}
+
 const formatDate = (date: Date | string | number): string => {
     return moment(date).format('DD/MM/YYYY')
 }

package/src/hooks/use-suggestions.ts

@@ -151,6 +151,18 @@ export const useSuggestions = (
     const suggestions: Ref<Suggestion[]> = ref(sortedSuggestions)
     const error: Ref<string | null> = ref(null)
 
+    const checkErrors = (input: string) => {
+        input = input.replace(/\s+/g, ' ').trimStart()
+
+        const words = splitByQuotes(input, space)
+        const mergedWords = mergeWords(words)
+        const expressions = mapWordsToExpressions(mergedWords)
+
+        error.value = input.length
+            ? getError(schemaValue, aliasesArray, expressions, { strict })
+            : null
+    }
+
     const findSuggestions = (input: string) => {
         input = input.replace(/\s+/g, ' ').trimStart()
         localSuggestions = sortedSuggestions
@@ -288,17 +300,13 @@ export const useSuggestions = (
             localSuggestions = sortedSuggestions
         }
 
-        error.value = input.length
-            ? getError(schemaValue, aliasesArray, expressions, { strict })
-            : null
-
         suggestions.value = localSuggestions.filter(
             (value) =>
                 !omitSuggestions || !omitSuggestions.value.includes(value)
         )
     }
 
-    return { suggestions, findSuggestions, error }
+    return { suggestions, findSuggestions, error, checkErrors }
 }
 
 const errors = {