@dataloop-ai/components 0.20.26 → 0.20.28

package/package.json

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

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

@@ -445,8 +445,15 @@ export default defineComponent({
                     queryRightSide = queryRightSide.trimStart()
                 } else {
                     // this|situation: replace whatever is there on both sides with the value
-                    if (/^[^']+('[^']?'[^']+)?'[^']+'?$/.test(queryLeftSide)) {
-                        queryLeftSide = queryLeftSide.replace(/'[^']+'?$/, '')
+                    if (
+                        /^[^']+((?<!\\)'.*(?<!\\)'[^']+)*(?<!\\)'([^']+\\')*[^']*((?<!\\)')?$/.test(
+                            queryLeftSide
+                        )
+                    ) {
+                        queryLeftSide = queryLeftSide.replace(
+                            /(?<!\\)'([^']+\\')*[^']*((?<!\\)')?$/,
+                            ''
+                        )
                     } else {
                         queryLeftSide = queryLeftSide.replace(/[^'\s]+$/, '')
                     }

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

@@ -159,7 +159,7 @@ export default defineComponent({
         const removeQuotes = (item: any) => {
             const str = '' + item
             const match = str.match(/^'(.*)'$/)
-            return match ? match[1] : str
+            return match ? match[1].replace(/\\'/g, "'") : str
         }
 
         const updatePosition = () => {

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

@@ -82,37 +82,27 @@
                         name="selected"
                     >
                         <span class="root-container--placeholder">
-                            <dl-ellipsis>
-                                {{ filterSelectLabel }}
-                            </dl-ellipsis>
+                            <dl-ellipsis :text="filterSelectLabel" />
                         </span>
                     </slot>
                 </div>
                 <template v-else>
                     <span
-                        v-show="
-                            (multiselect && !searchable) ||
-                                (multiselect && searchable && !isExpanded)
-                        "
+                        v-show="multiselect && (!searchable || !isExpanded)"
                         class="root-container--placeholder"
                     >
                         <template v-if="allFiltersModel">
-                            {{ computedAllItemsLabel }}
+                            <dl-ellipsis :text="computedAllItemsLabel" />
                         </template>
                         <template v-else>
-                            <dl-ellipsis> filterSelectLabel </dl-ellipsis>
+                            <dl-ellipsis :text="filterSelectLabel" />
                         </template>
                     </span>
                     <span
-                        v-show="
-                            (!multiselect && !searchable) ||
-                                (!multiselect && searchable && !isExpanded)
-                        "
+                        v-show="!multiselect && (!searchable || !isExpanded)"
                         class="selected-label"
                     >
-                        <dl-ellipsis>
-                            {{ getLabel(selectedOption) }}
-                        </dl-ellipsis>
+                        <dl-ellipsis :text="getLabel(selectedOption)" />
                     </span>
                 </template>
                 <div
@@ -635,10 +625,10 @@ export default defineComponent({
             }
             return this.modelValueLength > 0
                 ? `${this.modelValueLength} ${this.selectedResourceLabel}`
-                : this.computedPlaceholder
+                : String(this.computedPlaceholder)
         },
         computedAllItemsLabel(): string {
-            return this.allItemsOptionLabel || 'All Items'
+            return String(this.allItemsOptionLabel ?? 'All Items')
         },
         isModelValuePrimitiveType(): boolean {
             return this.isPrimitiveValue(this.modelValue)
@@ -674,7 +664,7 @@ export default defineComponent({
             return this.searchable && this.isExpanded
         },
         computedPlaceholder(): string {
-            return this.placeholder || 'Select option'
+            return String(this.placeholder ?? 'Select option')
         },
         placeholderStyles(): Record<string, string> {
             if (this.disabled) {

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

@@ -3,10 +3,10 @@ import { DlSelectOptionType } from './types'
 
 export const getLabel = (option: any) => {
     if (typeof option === 'object' && 'label' in option) {
-        return option.label
+        return String(option.label)
     }
 
-    return option
+    return String(option)
 }
 
 const ICON_SIZES = {
@@ -45,12 +45,12 @@ export const getLabelOfSelectedOption = (
             typeof selected === 'string' &&
             option === selected
         ) {
-            return option
+            return String(option)
         } else if (
             typeof option === 'object' &&
             isValueSelected(option, selected)
         ) {
-            return option.label
+            return String(option.label)
         }
     }
     return '1 Option Selected'

package/src/demos/DlSelectDemo.vue

@@ -697,6 +697,19 @@
                 <div>{{ scope.opt.label }}</div>
             </template>
         </dl-select>
+
+        Select numbers as labels
+        <dl-select
+            v-model="selectedNumbers"
+            :options="optionsAsNumbers"
+            multiselect
+            searchable
+            style="margin-bottom: 150px; width: 200px"
+        >
+            <template #selected="scope">
+                <div>{{ scope.opt.label }}</div>
+            </template>
+        </dl-select>
     </div>
 </template>
 
@@ -712,6 +725,12 @@ const defaultOptions = [
     { label: 'Contributor 3', value: 'c3' }
 ]
 
+const optionsAsNumbers = [
+    { label: 1, value: 1 },
+    { label: 2, value: 2 },
+    { label: 3, value: 3 }
+]
+
 const defaultOptions1 = [
     {
         label: 'Contributor 1 Contributor 1 Contributor 1 Contributor 1 Contributor 1 Contributor 1',
@@ -980,7 +999,9 @@ export default defineComponent({
             tasksFilter: [],
             showAllOption: true,
             disabledSelected: 'disabled option',
-            preSelectedValue: null
+            preSelectedValue: null,
+            optionsAsNumbers,
+            selectedNumbers: []
         }
     },
     computed: {

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -136,7 +136,7 @@ export default defineComponent({
                 '*': 'any'
             },
             type: ['dir', 'file'],
-            test0: ['why wont', 'this work', 123],
+            test0: ['why wont', 'this work', 123, '1\' = 12"'],
             test1: [...numbersArr, 'number'],
             test2: ['true', 'false']
         }

package/src/hooks/use-suggestions.ts

@@ -333,10 +333,12 @@ export const useSuggestions = (
                 const mappedTypes: string[] = []
                 for (const type of filteredTypes) {
                     if (typeof type === 'string') {
-                        mappedTypes.push(`'${type}'`)
+                        mappedTypes.push(enquoteString(type))
                     } else if (typeof type === 'object') {
                         mappedTypes.push(
-                            ...Object.keys(type).map((key) => `'${key}'`)
+                            ...Object.keys(type).map((key) =>
+                                enquoteString(key)
+                            )
                         )
                     } else {
                         mappedTypes.push(type)
@@ -614,10 +616,19 @@ const isValidBoolean = (str: string) => {
 }
 
 const isValidString = (str: string) => {
-    const match = str.match(/(?<=\")(.*?)(?=\")|(?<=\')(.*?)(?=\')/)
-    if (!match) return false
-    const trimmed = str.trim()
-    return match[0] === trimmed.substring(1, trimmed.length - 1)
+    const matchSingleQuotes = str.match(/^\s*(?<!\\)'(.*)(?<!\\)'\s*$/)
+    if (matchSingleQuotes) {
+        return !/(?<!\\)'/.test(matchSingleQuotes[1])
+    }
+    const matchDoubleQuotes = str.match(/^\s*(?<!\\)"(.*)(?<!\\)"\s*$/)
+    if (matchDoubleQuotes) {
+        return !/(?<!\\)"/.test(matchDoubleQuotes[1])
+    }
+    return false
+}
+
+const enquoteString = (str: string) => {
+    return `'${str.replace(/'/g, "\\'")}'`
 }
 
 const getOperatorByDataType = (dataType: string) => {
@@ -728,7 +739,9 @@ const getValueMatch = (
         let serach = s
 
         if (typeof str === 'string') {
-            term = insensitive(str.replace(/["']/gi, ''))
+            term = insensitive(
+                str.replace(/^["'](.*)["']$/, '$1').replace(/\\'/g, "'")
+            )
         }
         if (typeof s === 'string') {
             serach = insensitive(s)
@@ -844,7 +857,9 @@ const getValueSuggestions = (
                 !knownDataTypes.includes(type as string) &&
                 typeof type !== 'object'
             ) {
-                suggestion.push(typeof type === 'string' ? `'${type}'` : type)
+                suggestion.push(
+                    typeof type === 'string' ? enquoteString(type) : type
+                )
             }
         }
     }
@@ -863,7 +878,7 @@ const getValueSuggestions = (
             default:
                 if (typeof type === 'object') {
                     // value aliases: key is the alias, value is the actual value
-                    for (const key in type) suggestion.push(`'${key}'`)
+                    for (const key in type) suggestion.push(enquoteString(key))
                 }
                 break
         }

package/src/utils/parse-smart-query.ts

@@ -29,6 +29,17 @@ const GeneratePureValue = (value: any) => {
             if (isFinite(num)) {
                 return num
             }
+
+            let unquoted = value.replace(/^[^']*'(.*)'[^']*$/, '$1')
+            if (unquoted !== value) {
+                return unquoted.replace(/\\'/g, "'")
+            }
+
+            unquoted = value.replace(/^[^"]*"(.*)"[^"]*$/, '$1')
+            if (unquoted !== value) {
+                return unquoted.replace(/\\"/g, '"')
+            }
+
             return value.replaceAll('"', '').replaceAll("'", '')
         } catch (e) {}
     }
@@ -48,6 +59,14 @@ const Operators: string[] = [
     'DOESNT-EXIST'
 ]
 
+const SplitFirst = (what: string, by: string): string[] => {
+    const result = what.split(by)
+    if (result.length > 2) {
+        return [result.shift(), result.join(by)]
+    }
+    return result
+}
+
 /**
  * Method to convert a DlSmartSearch query string to Mongo based JSON query
  *
@@ -112,66 +131,67 @@ export const parseSmartQuery = (
         for (const term of andTerms) {
             pureValue = null
 
+            const termUpToQuote = term.replace(/^([^'"]+)['"].*$/, '$1')
+
             switch (true) {
-                case term.includes('>='):
-                    ;[key, value] = term.split('>=').map((x) => x.trim())
+                case termUpToQuote.includes('>='):
+                    ;[key, value] = SplitFirst(term, '>=').map((x) => x.trim())
                     pureValue = GeneratePureValue(value)
                     if (pureValue !== null) {
                         andQuery.push({ [key]: { $gte: pureValue } })
                     }
                     break
-                case term.includes('<='):
-                    ;[key, value] = term.split('<=').map((x) => x.trim())
+                case termUpToQuote.includes('<='):
+                    ;[key, value] = SplitFirst(term, '<=').map((x) => x.trim())
                     pureValue = GeneratePureValue(value)
                     if (pureValue !== null) {
                         andQuery.push({ [key]: { $lte: pureValue } })
                     }
                     break
-                case term.includes('>'):
-                    ;[key, value] = term.split('>').map((x) => x.trim())
+                case termUpToQuote.includes('>'):
+                    ;[key, value] = SplitFirst(term, '>').map((x) => x.trim())
                     pureValue = GeneratePureValue(value)
                     if (pureValue !== null) {
                         andQuery.push({ [key]: { $gt: pureValue } })
                     }
                     break
-                case term.includes('<'):
-                    ;[key, value] = term.split('<').map((x) => x.trim())
+                case termUpToQuote.includes('<'):
+                    ;[key, value] = SplitFirst(term, '<').map((x) => x.trim())
                     pureValue = GeneratePureValue(value)
                     if (pureValue !== null) {
                         andQuery.push({ [key]: { $lt: pureValue } })
                     }
                     break
-                case term.includes('!='):
-                    ;[key, value] = term.split('!=').map((x) => x.trim())
+                case termUpToQuote.includes('!='):
+                    ;[key, value] = SplitFirst(term, '!=').map((x) => x.trim())
                     pureValue = GeneratePureValue(value)
                     if (pureValue !== null) {
                         andQuery.push({ [key]: { $ne: pureValue } })
                     }
                     break
-                case term.includes('='):
-                    ;[key, value] = term.split('=').map((x) => x.trim())
+                case termUpToQuote.includes('='):
+                    ;[key, value] = SplitFirst(term, '=').map((x) => x.trim())
                     pureValue = GeneratePureValue(value)
                     if (pureValue !== null) {
                         andQuery.push({ [key]: pureValue })
                     }
                     break
-                case term.includes('EXISTS'):
+                case termUpToQuote.includes('EXISTS'):
                     key = term.split('EXISTS')[0].trim()
                     andQuery.push({ [key]: { $exists: true } })
                     break
-                case term.includes('DOESNT-EXIST'):
+                case termUpToQuote.includes('DOESNT-EXIST'):
                     key = term.split('DOESNT-EXIST')[0].trim()
                     andQuery.push({ [key]: { $exists: false } })
                     break
-                case term.includes('IN'):
-                    ;[key, value] = term.split('IN').map((x) => x.trim())
+                case termUpToQuote.includes('IN'):
+                    ;[key, value] = SplitFirst(term, 'IN').map((x) => x.trim())
                     if (key.includes('NOT-')) {
-                        ;[key, value] = term
-                            .split('NOT-IN')
-                            .map((x) => x.trim())
-                        queryValue = term
-                            .split('NOT-IN')
-                            .map((x) => x.trim())[1]
+                        ;[key, value] = SplitFirst(term, 'NOT-IN').map((x) =>
+                            x.trim()
+                        )
+                        // TODO make , inside quotes work
+                        queryValue = value
                             .split(',')
                             .map((x) => GeneratePureValue(x.trim()))
                             .filter((x) => x)
@@ -181,9 +201,8 @@ export const parseSmartQuery = (
                             andQuery.push({ [key]: { $nin: pureValue } })
                         }
                     } else {
-                        queryValue = term
-                            .split('IN')
-                            .map((x) => x.trim())[1]
+                        // TODO make , inside quotes work
+                        queryValue = value
                             .split(',')
                             .map((x) => GeneratePureValue(x.trim()))
                             .filter((x) => x)
@@ -344,7 +363,7 @@ export const stringifySmartQuery = (query: { [key: string]: any }): string => {
         } else if (isDatePattern(value)) {
             result += `${key} = (${value})`
         } else {
-            result += `${key} = '${value}'`
+            result += `${key} = '${value.toString().replace(/'/g, "\\'")}'`
         }
     }
 

package/src/utils/splitByQuotes.ts

@@ -3,7 +3,7 @@ export function splitByQuotes(input: string, split: string) {
         .replace('sp', split)
         .replace('o', '[\\(\\{\\[]')
         .replace('c', '[\\)\\}\\]]')
-        .replace('t', '[\'"]')
+        .replace('t', '(?<!\\\\)[\'"]')
         .replace('e', '[\\\\]')
     const r = new RegExp(pattern, 'gi')
     const stack: string[] = []
@@ -13,11 +13,20 @@ export function splitByQuotes(input: string, split: string) {
         if ($e) {
             buffer.push($1, $s || $o || $c || $t)
             return
-        } else if ($o) stack.push($o)
-        else if ($c) stack.pop()
-        else if ($t) {
-            if (stack[stack.length - 1] !== $t) stack.push($t)
-            else stack.pop()
+        } else if ($o) {
+            if (!stack.includes("'") && !stack.includes('"')) {
+                stack.push($o)
+            }
+        } else if ($c) {
+            if (!stack.includes("'") && !stack.includes('"')) {
+                stack.pop()
+            }
+        } else if ($t) {
+            const otherQuote = $t === '"' ? "'" : '"'
+            if (!stack.includes(otherQuote)) {
+                if (stack[stack.length - 1] !== $t) stack.push($t)
+                else stack.pop()
+            }
         } else {
             if ($s ? !stack.length : !$1) {
                 buffer.push($1)