@dataloop-ai/components 0.19.176 → 0.19.178

package/package.json

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

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

@@ -11,7 +11,9 @@
             :auto-close="false"
             :toggle-key="null"
             max-width="250px"
+            max-height="40vh"
             :ignore-events="['click']"
+            menu-class="DlSmartSearchSuggestionsMenu"
             @update:model-value="emitModelValue($event)"
             @show="onShow"
             @hide="onHide"
@@ -19,16 +21,24 @@
             @selected-item="handleSelectedItem"
             @escapekey="onEscapeKey"
         >
-            <dl-list>
-                <dl-list-item
-                    v-for="(item, suggestionIndex) in suggestions"
-                    :key="item"
-                    :clickable="true"
-                    :highlighted="suggestionIndex === highlightedIndex"
-                    @click="handleOption(item)"
+            <dl-list
+                style="height: 100%; max-height: inherit; overflow-y: hidden"
+            >
+                <DlInfiniteScroll
+                    :items="computedSuggestions"
+                    :page-size="30"
+                    style="height: 100%; max-height: inherit"
                 >
-                    <dl-ellipsis :text="removeQuotes(item)" />
-                </dl-list-item>
+                    <template #default="{ item, index }">
+                        <dl-list-item
+                            :clickable="true"
+                            :highlighted="index === highlightedIndex"
+                            @click="handleOption(item.value)"
+                        >
+                            <dl-ellipsis :text="removeQuotes(item.value)" />
+                        </dl-list-item>
+                    </template>
+                </DlInfiniteScroll>
             </dl-list>
         </dl-menu>
     </div>
@@ -44,13 +54,15 @@ import {
 } from 'vue-demi'
 import { DlMenu, DlList, DlEllipsis } from '../../../../essential'
 import { DlListItem } from '../../../../basic'
+import { DlInfiniteScroll } from '../../../../shared'
 
 export default defineComponent({
     components: {
         DlMenu,
         DlList,
         DlListItem,
-        DlEllipsis
+        DlEllipsis,
+        DlInfiniteScroll
     },
     model: {
         prop: 'modelValue',
@@ -148,8 +160,19 @@ export default defineComponent({
             highlightedIndex.value = -1
         })
 
+        const computedSuggestions = computed(() => {
+            return (
+                suggestions.value?.map((val: string) => ({
+                    id: val,
+                    value: val,
+                    key: val
+                })) ?? []
+            )
+        })
+
         return {
             menu,
+            computedSuggestions,
             defaultTarget,
             setHighlightedIndex,
             handleSelectedItem,
@@ -165,4 +188,8 @@ export default defineComponent({
     }
 })
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss">
+.DlSmartSearchSuggestionsMenu {
+    overflow: hidden !important;
+}
+</style>

package/src/components/shared/DlInfiniteScroll/DlInfiniteScroll.vue

@@ -10,8 +10,8 @@
             @scroll-to-top="onScrollToTop"
         />
         <slot name="content" :items="displayItems">
-            <div v-for="item in displayItems" :key="itemKey(item)">
-                <slot :item="item" />
+            <div v-for="(item, index) in displayItems" :key="itemKey(item)">
+                <slot :item="item" :index="index" />
             </div>
         </slot>
         <DlBottomScroll
@@ -66,10 +66,10 @@ export default defineComponent({
         const lastOp = ref<string>('')
 
         const computedStyles = computed<any>(() => {
-            return attrs.style
+            return attrs.style as any
         })
         const computedClasses = computed<any>(() => {
-            return attrs.class
+            return attrs.class as any
         })
 
         const displayItems = computed(() => {

package/src/components/shared/DlInfiniteScroll/components/DlBottomScroll.vue

@@ -1,8 +1,5 @@
 <template>
-    <div
-        ref="bottomRow"
-        class="infinite-scroll-bottom"
-    />
+    <div ref="bottomRow" class="infinite-scroll-bottom" />
 </template>
 
 <script lang="ts">
@@ -55,4 +52,3 @@ export default defineComponent({
     height: 3px;
 }
 </style>
-createIntersectionObservercreateIntersectionObserver./utils/create-observer./utils/createIntersectionObserver

package/src/components/shared/DlInfiniteScroll/components/DlTopScroll.vue

@@ -1,8 +1,5 @@
 <template>
-    <div
-        ref="topRow"
-        class="infinite-scroll-top"
-    />
+    <div ref="topRow" class="infinite-scroll-top" />
 </template>
 
 <script lang="ts">
@@ -55,4 +52,3 @@ export default defineComponent({
     height: 3px;
 }
 </style>
-createIntersectionObservercreateIntersectionObserver./utils/create-observer./utils/createIntersectionObserver

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -103,6 +103,10 @@ export default defineComponent({
         DlInput
     },
     data() {
+        const numbersArr: string[] = []
+        for (let i = 0; i < 1000; i++) {
+            numbersArr.push('' + i)
+        }
         const schema: any = {
             'very very very very very very long key': 'string',
             'very very very very very very long key  very very very very very very long key very very very very very very long key very very very very very very long key very very very very very very long key':
@@ -132,7 +136,7 @@ export default defineComponent({
             },
             type: ['dir', 'file'],
             test0: ['why wont', 'this work', 123],
-            test1: ['5', '6', 'number'],
+            test1: [...numbersArr, 'number'],
             test2: ['true', 'false']
         }
         const schema2: any = {