@dataloop-ai/components 0.20.45 → 0.20.47

package/package.json

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

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

@@ -2,7 +2,7 @@
     <div v-if="infiniteScroll">
         <dl-infinite-scroll
             :items="items"
-            :page-size="infiniteScrollPageSize"
+            :page-size="maxElementsPerRowForInfinite"
             :style="$attrs.style"
             :class="$attrs.class"
             style="height: var(--dl-virtual-scroll-height, 500px)"
@@ -10,20 +10,13 @@
             @scroll-to-bottom="$emit('scroll-to-bottom')"
         >
             <template #content="{ items }">
-                <div
-                    ref="grid"
-                    :style="gridStyles"
-                    :class="gridClass"
-                >
+                <div ref="grid" :style="gridStyles" :class="gridClass">
                     <div
                         v-for="item in items"
                         :key="item.id"
                         class="item-wrapper"
                     >
-                        <slot
-                            name="item-slot"
-                            v-bind="{ item }"
-                        />
+                        <slot name="item-slot" v-bind="{ item }" />
                     </div>
                 </div>
             </template>
@@ -37,21 +30,9 @@
     >
         <slot />
     </div>
-    <div
-        v-else
-        ref="grid"
-        :style="gridStyles"
-        :class="gridClass"
-    >
-        <div
-            v-for="item in items"
-            :key="item.id"
-            class="item-wrapper"
-        >
-            <slot
-                name="item-slot"
-                v-bind="{ item }"
-            />
+    <div v-else ref="grid" :style="gridStyles" :class="gridClass">
+        <div v-for="item in items" :key="item.id" class="item-wrapper">
+            <slot name="item-slot" v-bind="{ item }" />
         </div>
     </div>
 </template>
@@ -158,10 +139,14 @@ export default defineComponent({
             if (!isGridMode.value) {
                 gridStyles['--element-per-row'] = maxElementsPerRow.value
             }
-
             return gridStyles
         })
 
+        const maxElementsPerRowForInfinite = computed(() => {
+            const pageSize = props.infiniteScrollPageSize ?? 15
+            const maxElements = maxElementsPerRow.value ?? 3
+            return pageSize + (maxElements - (pageSize % maxElements))
+        })
         const layoutChanged = () => {
             emit('layout-changed', modelValue.value)
         }
@@ -268,7 +253,8 @@ export default defineComponent({
             gridClass,
             gridStyles,
             grid,
-            hasItems
+            hasItems,
+            maxElementsPerRowForInfinite
         }
     }
 })

package/src/components/compound/DlInput/DlInput.vue

@@ -720,7 +720,7 @@ export default defineComponent({
 
             const target = e.target as HTMLElement
             let toEmit: string | number = target.innerText.replace(
-                new RegExp(' ', 'g'),
+                new RegExp(' |\u00A0', 'g'),
                 ' '
             )
 

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

@@ -92,11 +92,11 @@ export default defineComponent({
             } else if (nextPage?.length) {
                 toDisplay.push(...nextPage.slice(0, pageSize.value))
             }
-
+            const movePercent = (prevPage?.length ?? 0) / toDisplay.length
             nextTick(() => {
                 if (lastOp.value === 'top' && page !== 0) {
                     containerRef.value.scrollTop +=
-                        containerRef.value.scrollHeight * 0.333
+                        containerRef.value.scrollHeight * movePercent
                 } else if (
                     lastOp.value === 'bottom' &&
                     page !== pagesCount.value
@@ -104,9 +104,6 @@ export default defineComponent({
                     if (currentPage.value - 1 === 0) {
                         return
                     }
-
-                    containerRef.value.scrollTop -=
-                        containerRef.value.scrollHeight * 0.333
                 }
 
                 onScrollEnd()