@dataloop-ai/components 0.18.66 → 0.18.67

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

@@ -1,4 +1,3 @@
-import { DlSmartSearchInput } from './components'
 import DlSmartSearch from './DlSmartSearch.vue'
 
-export { DlSmartSearch, DlSmartSearchInput }
+export { DlSmartSearch }

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

@@ -5,6 +5,9 @@ const SPAN_STYLES = `overflow: hidden;
                      display: inline-block;
                      max-width: 100%`
 
+let editor = document.getElementById('editor')
+let styleModel: SyntaxColorSchema
+
 function getTextSegments(element: HTMLElement) {
     if (!element) return
     const textSegments: { text: string; node: Node }[] = []
@@ -29,12 +32,10 @@ function getTextSegments(element: HTMLElement) {
     return textSegments
 }
 
-export function updateEditor(
-    editor: HTMLElement,
-    colorSchema: SyntaxColorSchema
-) {
+export function updateEditor(model: SyntaxColorSchema) {
+    styleModel = model
+    editor = document.getElementById('editor')
     if (!editor) return
-
     const sel = window.getSelection()
     const textSegments = getTextSegments(editor)
     const textContent = textSegments?.map(({ text }) => text).join('')
@@ -51,13 +52,12 @@ export function updateEditor(
         currentIndex += text.length
     })
 
-    editor.innerHTML = renderText(textContent, colorSchema)
+    editor.innerHTML = renderText(textContent)
 
-    restoreSelection(editor, anchorIndex, focusIndex)
+    restoreSelection(anchorIndex, focusIndex)
 }
 
 function restoreSelection(
-    editor: HTMLElement,
     absoluteAnchorIndex: number,
     absoluteFocusIndex: number
 ) {
@@ -91,16 +91,16 @@ function restoreSelection(
     sel.setBaseAndExtent(anchorNode, anchorIndex, focusNode, focusIndex)
 }
 
-function renderText(text: string, colorSchema: SyntaxColorSchema) {
+function renderText(text: string) {
     const words = text?.split(/(\s+)/)
     const output = words?.map((word) => {
-        if (colorSchema) {
-            if (colorSchema.keywords.values.includes(word)) {
-                return `<strong style='${SPAN_STYLES}; color:${colorSchema.keywords.color}'>${word}</strong>`
-            } else if (colorSchema.fields.values.includes(word)) {
-                return `<span style='color:${colorSchema.fields.color}; ${SPAN_STYLES}'>${word}</span>`
-            } else if (colorSchema.operators.values.includes(word)) {
-                return `<span style='color:${colorSchema.operators.color}; ${SPAN_STYLES}'>${word}</span>`
+        if (styleModel) {
+            if (styleModel.keywords.values.includes(word)) {
+                return `<strong style='${SPAN_STYLES}; color:${styleModel.keywords.color}'>${word}</strong>`
+            } else if (styleModel.fields.values.includes(word)) {
+                return `<span style='color:${styleModel.fields.color}; ${SPAN_STYLES}'>${word}</span>`
+            } else if (styleModel.operators.values.includes(word)) {
+                return `<span style='color:${styleModel.operators.color}; ${SPAN_STYLES}'>${word}</span>`
             } else {
                 return `<span style='${SPAN_STYLES}'>${word}</span>`
             }

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

@@ -9,8 +9,8 @@ import {
     datePatternNoBrackets,
     removeBrackets
 } from '../../../../../hooks/use-suggestions'
+import { flatten, unflatten } from 'flat'
 import moment from 'moment'
-import { cloneDeep } from 'lodash'
 
 export const isEndOfString = (
     str: string,
@@ -109,26 +109,21 @@ export function replaceJSDatesWithStringifiedDates(
         return json
     }
 
-    const toReturn = cloneDeep(json)
-
-    for (const key of Object.keys(toReturn)) {
-        if (typeof toReturn[key] === 'object') {
-            toReturn[key] = replaceJSDatesWithStringifiedDates(
-                toReturn[key],
-                dateKeys
-            )
+    for (const key of Object.keys(json)) {
+        if (typeof json[key] === 'object') {
+            json[key] = replaceJSDatesWithStringifiedDates(json[key], dateKeys)
             continue
         }
 
-        const value = toReturn[key]
+        const value = json[key]
         const keyToCheck = key.split('.').pop()
 
         if (dateKeys.includes(keyToCheck)) {
-            toReturn[key] = formatToStringDate(value)
+            json[key] = formatToStringDate(value)
         }
     }
 
-    return toReturn
+    return json
 }
 
 export function revertAliases(json: string, aliases: Alias[]) {

package/src/components/compound/DlSlider/DlSlider.vue

@@ -231,13 +231,14 @@ export default defineComponent({
         }
     },
     methods: {
-        handleChange(value: string) {
+        handleChange(value: number) {
             this.$emit('change', value)
         },
         handleResetButtonClick() {
             if (this.value === this.initialValue) return
 
             this.sliderValue = this.initialValue
+            this.handleChange(this.initialValue)
         }
     }
 })

package/src/components/compound/types.ts

@@ -13,4 +13,3 @@ export * from './DlCodeEditor/types'
 export * from './DlCard/types'
 export * from './DlThumbnailGallery/types'
 export * from './DlCounters/types'
-export * from './DlSelect/types'

package/src/demos/DlSliderDemo.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <dl-slider
-            v-model.number="value"
+            v-model="value"
             width="500px"
             text="slider"
             :step="1"
@@ -10,6 +10,7 @@
             :editable="editable"
             :readonly="readonly"
             :disabled="disabled"
+            @change="handleChange"
         />
         <div>
             <button @click="editable = !editable">
@@ -42,6 +43,16 @@ export default defineComponent({
             readonly: false
         }
     },
+    watch: {
+        value(newValue, oldValue) {
+            console.log(`@@@ value changed from ${oldValue} to ${newValue}`)
+        }
+    },
+    methods: {
+        handleChange(value: number) {
+            console.log(`@@@ value changed to ${value}`)
+        }
+    },
     template: 'dl-slider-demo'
 })
 </script>

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -32,7 +32,6 @@
             :disabled="switchState"
             :is-loading="isLoading"
             :strict="strictState"
-            style="width: 600px"
             @remove-query="handleRemoveQuery"
             @save-query="handleSaveQuery"
             @search-query="handleSearchQuery"
@@ -43,28 +42,20 @@
         <br>
         <br>
         <br>
-        Only the search
-
-        <dl-smart-search-input
+        <br>
+        Test second if they work on same page..
+        <dl-smart-search
             v-model="queryObject2"
-            :aliases="aliases"
-            :schema="schema"
+            :aliases="[]"
+            :schema="schema2"
             :color-schema="colorSchema"
-            :strict="strictState"
-            :disabled="switchState"
         />
-        {{ queryObject2 }}
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import {
-    DlSmartSearch,
-    DlSmartSearchInput,
-    DlCheckbox,
-    DlInput
-} from '../../components'
+import { DlSmartSearch, DlCheckbox, DlInput } from '../../components'
 import { DlSmartSearchFilters, Query } from '../../components/types'
 import { parseSmartQuery } from '../../utils'
 
@@ -72,7 +63,6 @@ export default defineComponent({
     name: 'DlSmartSearchDemo',
     components: {
         DlSmartSearch,
-        DlSmartSearchInput,
         DlCheckbox,
         DlInput
     },

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

@@ -43,11 +43,7 @@ const Operators: string[] = ['>=', '<=', '!=', '=', '>', '<', 'IN', 'NOT-IN']
  * @param { string } query DlSmartSearch query string
  * @returns Mongo based JSON
  */
-export const parseSmartQuery = (
-    query: string
-): {
-    [key: string]: any
-} => {
+export const parseSmartQuery = (query: string) => {
     const queryArr = query.split(' OR ')
     for (let i = 0; i < queryArr.length; i++) {
         const term: string = queryArr[i]
@@ -66,7 +62,7 @@ export const parseSmartQuery = (
     const orTerms: { [key: string]: any }[] = []
 
     for (const query of queryArr) {
-        const andTerms = query.split(' AND ').filter((q) => !!q.length)
+        const andTerms = query.split(' AND ')
         for (let i = 0; i < andTerms.length; i++) {
             const term: string = andTerms[i]
             let withOperator = false
@@ -192,7 +188,7 @@ export const parseSmartQuery = (
  * @param { { [key: string]: any } } query Mongo based JSON that represents a query
  * @returns DlSmartSearch query string
  */
-export const stringifySmartQuery = (query: { [key: string]: any }): string => {
+export const stringifySmartQuery = (query: { [key: string]: any }) => {
     let result = ''
 
     for (const key in query) {

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

@@ -1,4 +0,0 @@
-export interface DlSelectOption {
-    label: string
-    value: any
-}