@dataloop-ai/components 0.19.27 → 0.19.29

package/package.json

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

package/src/components/basic/DlGrid/DlGrid.vue

@@ -2,7 +2,8 @@
     <div v-if="hasVirtualScroll">
         <dl-virtual-scroll
             v-slot="{ item }"
-            style="height: 500px"
+            :scroll-debounce="scrollDebounce"
+            style="height: var(--dl-virtual-scroll-height, 500px)"
             :items="items"
             :styles="{ gridStyles, gridClass }"
         >
@@ -73,6 +74,10 @@ export default defineComponent({
         mode: {
             type: String as PropType<DlGridMode>,
             default: DlGridMode.LAYOUT
+        },
+        scrollDebounce: {
+            type: Number,
+            default: 100
         }
     },
     emits: ['update:model-value', 'layout-changed'],

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

@@ -1,7 +1,7 @@
 export interface DlInputSuggestion {
     suggestion: string
-    image: string
-    click: boolean
+    image?: string
+    click?: boolean
 }
 
 export interface DlInputFile {

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

@@ -10,6 +10,7 @@
             class="text-input-area"
             type="text"
             clear-button-tooltip
+            style="width: 100%"
             :size="size"
             :model-value="modelValue"
             :placeholder="placeholder"
@@ -50,6 +51,7 @@ import { defineComponent, PropType } from 'vue-demi'
 import { DlButton } from '../../../basic'
 import { DlIcon } from '../../../essential'
 import { DlInput } from '../../DlInput'
+import { DlInputSuggestion } from '../../DlInput/types'
 
 const SearchSizes = {
     l: 'l',
@@ -83,8 +85,8 @@ export default defineComponent({
         },
         placeholder: { type: String, default: '' },
         autoSuggestItems: {
-            type: Array as PropType<string[]>,
-            default: (): string[] => []
+            type: Array as PropType<DlInputSuggestion[]>,
+            default: (): DlInputSuggestion[] => []
         },
         highlightMatches: { type: Boolean, default: false },
         dense: { type: Boolean, default: false },

package/src/demos/DlSearchDemo.vue

@@ -16,12 +16,30 @@
             placeholder="Search here"
             :auto-suggest-items="suggestItems"
         />
+        <dl-search
+            v-model="searchValue"
+            size="s"
+            with-search-button
+            highlight-matches
+            placeholder="Search here"
+            :auto-suggest-items="suggestItems"
+        />
+        <dl-search
+            v-model="searchValue"
+            size="s"
+            with-search-button
+            highlight-matches
+            placeholder="Search here"
+            :auto-suggest-items="suggestItems"
+            style="height: 28px"
+        />
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
 import { DlSearch } from '../components'
+import { DlInputSuggestion } from '../components/compound/DlInput/types'
 export default defineComponent({
     name: 'DlSearchDemo',
     components: {
@@ -29,7 +47,12 @@ export default defineComponent({
     },
     setup() {
         const searchValue = ref<string>('')
-        const suggestItems = ['foo', 'foo bar', 'bar', 'bar foo']
+        const suggestItems: DlInputSuggestion[] = [
+            { suggestion: 'foo' },
+            { suggestion: 'foo bar' },
+            { suggestion: 'bar' },
+            { suggestion: 'bar foo' }
+        ]
         return { searchValue, suggestItems }
     }
 })