@dataloop-ai/components 0.18.139 → 0.18.141

package/package.json

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

package/src/components/compound/DlCounters/DlCounters.vue

@@ -12,13 +12,13 @@
             >
                 <div :class="computeClass('item-content')">
                     <dl-kpi
-                        :counter="kpiValue(item.value)"
+                        :counter="kpiValue(item)"
                         :counter-font-size="counterFontSize"
                         :title="capitalize(item.text)"
                         :title-font-size="titleFontSize"
                         :subtitle="item.subtext && capitalize(item.subtext)"
                         :subtitle-font-size="subtitleFontSize"
-                        :info-message="null"
+                        :info-message="kpiInfoMessage(item)"
                         :progress="null"
                         :small="small"
                     />
@@ -89,11 +89,14 @@ export default defineComponent({
         computeClass(value: string): (string | boolean)[] {
             return [value, this.small && `${value}--small`]
         },
-        kpiValue(value: string | number) {
+        kpiValue(item: DlCounterItem) {
             return {
-                value: value ?? 0,
-                format: DlKpiCounterFormat.long
+                value: item.value ?? 0,
+                format: item.format ?? DlKpiCounterFormat.long
             }
+        },
+        kpiInfoMessage(item: DlCounterItem) {
+            return item.infoMessage || null
         }
     }
 })

package/src/components/compound/DlCounters/types.ts

@@ -2,4 +2,6 @@ export interface DlCounterItem {
     value?: number
     text: string
     subtext?: string
+    infoMessage?: string
+    format?: string
 }

package/src/components/compound/DlSearches/DlSmartSearch/utils/index.ts

@@ -38,7 +38,11 @@ export const isEndingWithDateIntervalPattern = (str: string) => {
 
 export const replaceDateInterval = (str: string, date: DateInterval) => {
     const newStr = `${formatDate(date.from)}`
-    const replaced = replaceLastOccurrence(str, newStr, datePatternNoBrackets)
+    const replaced = replaceFirstOrLastOccurrence(
+        str,
+        newStr,
+        datePatternNoBrackets
+    )
     return replaced
 }
 
@@ -46,16 +50,39 @@ const formatDate = (date: Date | string | number): string => {
     return moment.utc(date).format('DD/MM/YYYY')
 }
 
-const replaceLastOccurrence = (
+const replaceFirstOrLastOccurrence = (
     string: string,
     replaceValue: string,
     pattern: RegExp
 ) => {
-    const matches = string.match(pattern)
+    const regex = RegExp(pattern, 'g')
 
-    return matches && matches.length
-        ? string.replace(matches[matches.length - 1], replaceValue)
-        : string
+    let firstMatch
+    let lastMatch
+    let match
+
+    while ((match = regex.exec(string))) {
+        if (match[0] === 'dd/mm/yyyy' && !firstMatch) {
+            firstMatch = match
+        }
+        lastMatch = match
+    }
+
+    if (firstMatch) {
+        const modifiedString =
+            string.slice(0, firstMatch.index) +
+            string.slice(firstMatch.index).replace(firstMatch[0], replaceValue)
+
+        return modifiedString
+    } else if (lastMatch) {
+        const modifiedString =
+            string.slice(0, lastMatch.index) +
+            string.slice(lastMatch.index).replace(lastMatch[0], replaceValue)
+
+        return modifiedString
+    }
+
+    return string
 }
 
 export function getTabItems(filters: Filters) {

package/src/demos/DlCounterDemo.vue

@@ -38,6 +38,33 @@
                 }
             ]"
         />
+        <dl-counters
+            small
+            :items="[
+                {
+                    value: 100000000,
+                    text: 'lorem',
+                    format: 'short',
+                    infoMessage:
+                        'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+                },
+                {
+                    value: '154h:35m:20s',
+                    text: 'ipsum lorem',
+                    subtext:
+                        'Cupidatat est labore et nisi do culpa veniam reprehenderit anim consectetur dolor mollit.',
+                    format: 'hms',
+                    infoMessage: '154h:35m:20s'
+                },
+                {
+                    value: 6789,
+                    text: 'lorem lorem ipsum',
+                    subtext: 'Minim exercitation ipsum elit cillum magna.',
+                    format: 'short',
+                    infoMessage: '6789'
+                }
+            ]"
+        />
     </div>
 </template>
 

package/src/hooks/use-suggestions.ts

@@ -447,11 +447,16 @@ const getOperatorByDataType = (dataType: string) => {
         return []
     }
 
-    const operators = Object.keys(operatorToDataTypeMap).filter((key) => {
+    let operators = Object.keys(operatorToDataTypeMap).filter((key) => {
         const value = operatorToDataTypeMap[key]
         return value.length === 0 || value.includes(dataType)
     })
 
+    if (dataType === 'date' || dataType === 'datetime') {
+        const toExclude = ['$in', '$nin']
+        operators = operators.filter((s) => !toExclude.includes(s))
+    }
+
     return operators
 }