@dataloop-ai/components 0.19.128 → 0.19.129

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.19.128",
+  "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,
@@ -538,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 }) => {
@@ -628,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
@@ -897,6 +920,8 @@ export default defineComponent({
             onKeyPress,
             onInput,
             onDateSelection,
+            onDateSelectionCancel,
+            onDateSelectionApply,
             computedStatus,
             setInputFromSuggestion,
             inputPlaceholder,
@@ -1129,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')
 }