@dataloop-ai/components 0.17.120 → 0.17.122

package/package.json

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

package/src/components/basic/DlButton/DlButton.vue

@@ -97,7 +97,7 @@ export default defineComponent({
          * The color of the button
          */
         color: {
-            type: String! as PropType<keyof typeof colorNames>,
+            type: String! as PropType<keyof typeof colorNames | string>,
             default: ''
         },
         /**

package/src/components/basic/DlButton/utils.ts

@@ -1,7 +1,7 @@
 import { getColor } from '../../../utils'
 import { getLighterGradient } from '../../../utils/getLighterGradient'
 
-export type ButtonSizes = 's' | 'm' | 'l' | 'xl'
+export type ButtonSizes = 's' | 'm' | 'l' | 'xl' | string
 
 const paddings = {
     s: '7px 16px',

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

@@ -9,6 +9,7 @@
             class="dl-smart-search__input-wrapper"
         >
             <dl-smart-search-input
+                ref="smartSearchInput"
                 :status="computedStatus"
                 :style-model="defineStyleModel"
                 :with-save-button="true"
@@ -27,40 +28,44 @@
             />
         </div>
         <div class="dl-smart-search__buttons">
-            <div
-                style="height: 28px"
-                class="dl-smart-search__search-btn-wrapper"
-            >
-                <dl-button
-                    icon="icon-dl-search"
-                    :styles="{
-                        height: '28px'
-                    }"
-                    :disabled="disabled"
-                    @click="emitSearchQuery"
-                />
-            </div>
-
-            <dl-button
-                class="dl-smart-search__buttons--filters"
-                shaded
-                outlined
-                size="s"
-            >
-                Saved Filters
-                <dl-menu
-                    v-model="filtersModel"
-                    :offset="[0, 5]"
-                    anchor="bottom middle"
-                    self="top middle"
+            <slot name="buttons">
+                <div
+                    style="height: 28px"
+                    class="dl-smart-search__search-btn-wrapper"
                 >
-                    <dl-smart-search-filters
-                        :filters="filters"
-                        @filters-select="handleFiltersSelect"
-                        @filters-delete="handleFiltersDelete"
+                    <dl-button
+                        icon="icon-dl-search"
+                        :styles="{
+                            height: '28px'
+                        }"
+                        :disabled="disabled"
+                        @click="emitSearchQuery"
                     />
-                </dl-menu>
-            </dl-button>
+                </div>
+
+                <slot name="extra-actions" />
+
+                <dl-button
+                    class="dl-smart-search__buttons--filters"
+                    shaded
+                    outlined
+                    size="s"
+                >
+                    Saved Filters
+                    <dl-menu
+                        v-model="filtersModel"
+                        :offset="[0, 5]"
+                        anchor="bottom middle"
+                        self="top middle"
+                    >
+                        <dl-smart-search-filters
+                            :filters="filters"
+                            @filters-select="handleFiltersSelect"
+                            @filters-delete="handleFiltersDelete"
+                        />
+                    </dl-menu>
+                </dl-button>
+            </slot>
         </div>
         <dl-dialog-box
             v-model="jsonEditorModel"
@@ -222,7 +227,13 @@ import {
     Alias,
     removeBrackets
 } from '../../../../hooks/use-suggestions'
-import { Filters, Query, ColorSchema, SearchStatus } from './types'
+import {
+    Filters,
+    Query,
+    ColorSchema,
+    SearchStatus,
+    SyntaxColorSchema
+} from './types'
 import {
     replaceAliases,
     setAliases,
@@ -480,11 +491,8 @@ export default defineComponent({
                 '--dl-search-max-width': this.isFocused ? '100%' : this.width
             }
         },
-        defineStyleModel(): Record<string, string> {
-            return createColorSchema(
-                this.colorSchema,
-                this.aliases
-            ) as any as Record<string, string>
+        defineStyleModel(): SyntaxColorSchema {
+            return createColorSchema(this.colorSchema, this.aliases)
         },
         computedStatus(): SearchStatus {
             if (this.isQuerying) return

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

@@ -1,5 +1,6 @@
 <template>
     <div
+        :id="`DlSmartSearchInput${uuid}`"
         class="dl-smart-search-input"
         :style="cssVars"
     >
@@ -19,7 +20,7 @@
                 </div>
                 <div class="dl-smart-search-input__textarea-wrapper">
                     <div
-                        id="editor"
+                        :id="`dl-smart-search-input-text-area-${uuid}`"
                         ref="input"
                         :class="inputClass"
                         :style="textareaStyles"
@@ -27,7 +28,7 @@
                         :contenteditable="!disabled"
                         @keypress="keyPress"
                         @input="handleValueChange"
-                        @click="focus"
+                        @click.stop.prevent="focus"
                         @blur="blur"
                     />
                 </div>
@@ -104,6 +105,7 @@
         </div>
         <dl-suggestions-dropdown
             v-model="suggestionModal"
+            :parent-id="`${uuid}`"
             :disabled="disabled"
             :suggestions="suggestions"
             :offset="menuOffset"
@@ -144,6 +146,7 @@ import {
     updateEditor,
     isEligibleToChange
 } from '../utils'
+import { v4 } from 'uuid'
 
 export default defineComponent({
     components: {
@@ -298,6 +301,7 @@ export default defineComponent({
         )
 
         return {
+            uuid: v4(),
             input,
             label,
             hasEllipsis,
@@ -455,9 +459,7 @@ export default defineComponent({
             }
 
             if (!this.suggestionModal && val.length > 0 && this.focused) {
-                nextTick(() => {
-                    this.suggestionModal = true
-                })
+                this.suggestionModal = true
             }
         },
         expanded(value) {

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

@@ -10,6 +10,7 @@
             fit-container
             :model-value="modelValue"
             :arrow-nav-items="suggestions"
+            :auto-close="false"
             @update:modelValue="emitModelValue($event)"
             @show="onShow"
             @hide="onHide"
@@ -31,7 +32,7 @@
     </div>
 </template>
 <script lang="ts">
-import { defineComponent, PropType, ref } from 'vue-demi'
+import { computed, defineComponent, PropType, ref } from 'vue-demi'
 import { DlMenu, DlList } from '../../../../essential'
 import { DlListItem } from '../../../../basic'
 
@@ -46,6 +47,10 @@ export default defineComponent({
         event: 'update:modelValue'
     },
     props: {
+        parentId: {
+            type: String,
+            required: true
+        },
         expanded: {
             type: Boolean,
             default: false
@@ -91,7 +96,12 @@ export default defineComponent({
             emit('set-input-value', item)
         }
 
+        const defaultTarget = computed(() => {
+            return `#dl-smart-search-input-text-area-${props.parentId}`
+        })
+
         return {
+            defaultTarget,
             setHighlightedIndex,
             handleSelectedItem,
             highlightedIndex,
@@ -100,11 +110,6 @@ export default defineComponent({
             emitModelValue,
             handleOption
         }
-    },
-    computed: {
-        defaultTarget() {
-            return '.dl-smart-search-input__textarea'
-        }
     }
 })
 </script>

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

@@ -34,3 +34,17 @@ export type SyntaxColorSchema = {
         color: string
     }
 }
+
+import {
+    Alias as DlSmartSearchAlias,
+    Schema as DlSmartSearchSchema
+} from '../../../../hooks/use-suggestions'
+
+type DlSmartSearchFilters = Filters & { [key: string]: any }
+
+export type {
+    DlSmartSearchAlias,
+    DlSmartSearchSchema,
+    ColorSchema as DlSmartSearchColorSchema,
+    DlSmartSearchFilters
+}

package/src/components/essential/DlIcon/DlIcon.vue

@@ -22,7 +22,7 @@
     <div
         v-else
         :id="uuid"
-        style="display: inline"
+        :style="[inlineStyles, computedStyles]"
         @click="$emit('click', $event)"
         @mousedown="$emit('mousedown', $event)"
         @mouseup="$emit('mouseup', $event)"
@@ -156,7 +156,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .dl-icon {
-    display: inline-block;
+    display: inline-flex;
     color: var(--dl-icon-color);
     font-size: var(--dl-icon-font-size);
 }

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -36,13 +36,26 @@
             @search-query="handleSearchQuery"
         />
         {{ queryObject }}
+
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+        Test second if they work on same page..
+        <dl-smart-search
+            v-model="queryObject"
+            :aliases="[]"
+            :schema="schema2"
+            :color-schema="colorSchema"
+        />
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
 import { DlSmartSearch, DlCheckbox, DlInput } from '../../components'
-import { Query } from '../../components/types'
+import { DlSmartSearchFilters, Query } from '../../components/types'
 import { parseSmartQuery } from '../../utils'
 
 export default defineComponent({
@@ -76,6 +89,43 @@ export default defineComponent({
                 '*': 'any'
             }
         }
+        const schema2: any = {
+            type: [
+                'class',
+                'point',
+                'line',
+                'box',
+                'cube',
+                'segment',
+                'ellipse',
+                'binary',
+                'note',
+                'polyline',
+                'comparison',
+                'recording',
+                'subtitle',
+                'item_description',
+                'text_mark',
+                'pose',
+                'cube_3d',
+                'semantic_3d',
+                'polyline_3d',
+                'string'
+            ],
+            label: 'string',
+            itemId: 'string',
+            creator: 'string',
+            parentId: ['null', 'string'],
+            attributes: ['string', 'number', 'object', 'boolean'],
+            metadata: {
+                system: {
+                    attributes: ['string', 'number', 'object', 'boolean'],
+                    status: 'string',
+                    '*': 'any'
+                },
+                '*': 'any'
+            }
+        }
 
         const colorSchema: any = {
             fields: 'var(--dl-color-secondary)',
@@ -98,8 +148,32 @@ export default defineComponent({
             }
         ]
 
+        const filters: DlSmartSearchFilters = {
+            saved: [
+                {
+                    name: 'Query 1',
+                    query: '{"q": 1}'
+                },
+                {
+                    name: 'Query 2',
+                    query: '{"query2": "query2"}'
+                },
+                {
+                    name: 'Query 3',
+                    query: '{"query3": "query3"}'
+                },
+                {
+                    name: 'Query 4',
+                    query: '{"age": 12, "name": "john"}'
+                }
+            ],
+            recent: [],
+            suggested: []
+        }
+
         return {
             schema,
+            schema2,
             aliases,
             colorSchema,
             switchState: false,
@@ -107,28 +181,7 @@ export default defineComponent({
             isLoading: false,
             queryObject: {},
             textQuery: '',
-            filters: {
-                saved: [
-                    {
-                        name: 'Query 1',
-                        query: '{"q": 1}'
-                    },
-                    {
-                        name: 'Query 2',
-                        query: '{"query2": "query2"}'
-                    },
-                    {
-                        name: 'Query 3',
-                        query: '{"query3": "query3"}'
-                    },
-                    {
-                        name: 'Query 4',
-                        query: '{"age": 12, "name": "john"}'
-                    }
-                ],
-                recent: [],
-                suggested: []
-            } as { [key: string]: Query[] }
+            filters
         }
     },
     watch: {
@@ -162,7 +215,6 @@ export default defineComponent({
                 this.filters[type].push(query)
             }
         },
-
         handleRemoveQuery(query: Query, type: string) {
             this.filters[type] = this.filters[type].filter(
                 (q: Query) => q.name !== query.name

package/src/hooks/use-anchor.ts

@@ -17,6 +17,7 @@ interface AnchorEvent extends KeyboardEvent {
 
 export const useAnchorProps = {
     target: {
+        type: [String, Boolean],
         default: true
     },
     noParentEvent: Boolean,
@@ -144,7 +145,6 @@ export default function ({
             setAnchorEl(proxy.$el.parentNode as HTMLElement)
         } else {
             let el = props.target
-
             if (typeof props.target === 'string') {
                 try {
                     el = document.querySelector(props.target)