@dataloop-ai/components 0.18.20 → 0.18.22

package/package.json

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

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

@@ -249,7 +249,7 @@ export default defineComponent({
 
             this.dateInterval = { from: date, to: date }
 
-            if (this.singleSelection) {
+            if (!this.singleSelection) {
                 this.isSelectionMode = true
             } else {
                 this.updateModelValue(this.dateInterval)
@@ -297,7 +297,10 @@ export default defineComponent({
                 }
             }
 
-            this.dateInterval = { from: this.dateInterval.from, to: date }
+            this.dateInterval = {
+                from: this.dateInterval.from,
+                to: date
+            }
         }
     }
 })

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

@@ -442,9 +442,9 @@ export default defineComponent({
                 this.dateInterval = {
                     from: value.from,
                     to: new Date(
-                        value.from.getFullYear(),
-                        value.from.getMonth(),
-                        value.from.getDate(),
+                        value.to.getFullYear(),
+                        value.to.getMonth(),
+                        value.to.getDate(),
                         23,
                         59
                     )

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)
+}