@dataloop-ai/components 0.18.19 → 0.18.21

package/package.json

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

package/src/components/compound/DlDateTime/DlDateTimeRange/DlDateTimeRange.vue

@@ -53,6 +53,17 @@
                             :model-value="dateInterval"
                             @update:model-value="updateDateInterval"
                         />
+
+                        <dl-button
+                            size="s"
+                            outlined
+                            class="dl-date-time-range--button"
+                            @click="handleClearAction"
+                        >
+                            <span style="text-transform: capitalize">
+                                Clear
+                            </span>
+                        </dl-button>
                     </div>
                 </div>
             </dl-menu>
@@ -74,6 +85,7 @@ import DlDatePicker from '../DlDatePicker/DlDatePicker.vue'
 import { CalendarDate } from '../DlDatePicker/models/CalendarDate'
 import DateInput from './DateInput.vue'
 import { DlMenu } from '../../../essential'
+import { DlButton } from '../../../basic'
 import { defineComponent, PropType } from 'vue-demi'
 import { isInRange } from '../DlDatePicker/utils'
 import { v4 } from 'uuid'
@@ -84,7 +96,8 @@ export default defineComponent({
         DlDatePicker,
         DlTimePicker,
         DateInput,
-        DlMenu
+        DlMenu,
+        DlButton
     },
     model: {
         prop: 'modelValue',
@@ -407,6 +420,11 @@ export default defineComponent({
         }
     },
     methods: {
+        handleClearAction() {
+            this.currentSidebarOption = DAY_SIDEBAR_OPTION.custom
+            this.isInputDisabled = false
+            this.updateDateInterval(null)
+        },
         handleTypeChange(value: 'day' | 'month') {
             this.isInputDisabled = false
             this.currentSidebarOption =
@@ -418,15 +436,19 @@ export default defineComponent({
             this.$emit('set-type', value)
         },
         updateDateInterval(value: DateInterval | null) {
-            this.dateInterval = {
-                from: value.from,
-                to: new Date(
-                    value.from.getFullYear(),
-                    value.from.getMonth(),
-                    value.from.getDate(),
-                    23,
-                    59
-                )
+            if (value === null) {
+                this.dateInterval = null
+            } else {
+                this.dateInterval = {
+                    from: value.from,
+                    to: new Date(
+                        value.from.getFullYear(),
+                        value.from.getMonth(),
+                        value.from.getDate(),
+                        23,
+                        59
+                    )
+                }
             }
             this.$emit('update:model-value', value)
             this.$emit('change', value)
@@ -484,10 +506,19 @@ export default defineComponent({
         z-index: 1;
         display: flex;
         border-radius: 2px;
+        border-radius: 2px;
     }
 
     &--card_content {
         width: var(--card-content-width);
     }
+
+    &--button {
+        display: flex;
+        margin-left: auto;
+        width: fit-content;
+        margin-right: 16px;
+        margin-bottom: 16px;
+    }
 }
 </style>

package/src/components/compound/DlSelect/DlSelect.vue

@@ -324,7 +324,8 @@ import {
     getIconSize,
     optionsValidator,
     DlSelectOptionType,
-    getLabelOfSelectedOption
+    getLabelOfSelectedOption,
+    getCaseInsensitiveInput
 } from './utils'
 import DlSelectOption from './components/DlSelectOption.vue'
 import { isEqual } from 'lodash'
@@ -836,14 +837,15 @@ export default defineComponent({
             this.$emit('search-input', searchValue)
         },
         getOptionHtml(option: DlSelectOptionType) {
-            let label = `${this.getOptionLabel(option)}`
-            if (this.capitalizedOptions) {
-                label = label.toLowerCase()
-            }
+            const label = `${this.getOptionLabel(option)}`
+            const toReplace = new RegExp(this.searchInputValue, 'gi')
 
             const highlightedHtml = label.replace(
-                this.searchInputValue,
-                `<span style="background: var(--dl-color-warning)">${this.searchInputValue}</span>`
+                toReplace,
+                `<span style="background: var(--dl-color-warning)">${getCaseInsensitiveInput(
+                    label,
+                    this.searchInputValue
+                )}</span>`
             )
             const html = `<span>${highlightedHtml}</span>`
 

package/src/components/compound/DlSelect/utils.ts

@@ -44,3 +44,9 @@ export const optionsValidator = (opts: DlSelectOptionType[]) => {
         return keys.includes('value') && keys.includes('label')
     })
 }
+
+export const getCaseInsensitiveInput = (label: string, input: string) => {
+    const inputRegexp = new RegExp(input, 'gi')
+    const position = label.search(inputRegexp)
+    return label.slice(position, input.length)
+}