@dataloop-ai/components 0.18.20 → 0.18.21

package/package.json

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

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