@dataloop-ai/components 0.19.267 → 0.19.269

package/package.json

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

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

@@ -822,6 +822,18 @@ export default defineComponent({
             input.value.blur()
             processBlur()
         }
+
+        const updateParentElementWidth = () => {
+            if (!input.value) {
+                return
+            }
+            if (focused.value) {
+                input.value.parentElement.style.width = '100%'
+                setMenuOffset(isEligibleToChange(input.value, focused.value))
+            } else {
+                input.value.parentElement.style.width = '1px'
+            }
+        }
         //#endregion
 
         //#region computed
@@ -988,12 +1000,7 @@ export default defineComponent({
                 return
             }
 
-            if (!value) {
-                input.value.parentElement.style.width = '1px'
-            } else {
-                setMenuOffset(isEligibleToChange(input.value, value))
-                input.value.parentElement.style.width = '100%'
-            }
+            updateParentElementWidth()
         })
 
         watch(showDatePicker, (value, old) => {
@@ -1045,6 +1052,7 @@ export default defineComponent({
             }
             window.addEventListener('mousemove', watchMouseMove)
             window.addEventListener('keyup', watchKeyUp)
+            updateParentElementWidth()
         })
         onBeforeUnmount(() => {
             window.removeEventListener('mousemove', watchMouseMove)

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

@@ -4,6 +4,7 @@
         class="dl-infinite-scroll"
         :style="computedStyles"
         :class="computedClasses"
+        @scrollend="onScrollEnd"
     >
         <DlTopScroll
             :container-ref="containerRef"
@@ -15,6 +16,7 @@
             </div>
         </slot>
         <DlBottomScroll
+            ref="bottomRef"
             :container-ref="containerRef"
             @scroll-to-bottom="onScrollToBottom"
         />
@@ -59,6 +61,7 @@ export default defineComponent({
     emits: ['scroll-to-top', 'scroll-to-bottom'],
     setup(props, { emit, attrs }) {
         const { items, pageSize, scrollDebounce } = toRefs(props)
+        const bottomRef = ref(null)
         const containerRef = ref(null)
         const currentPage = ref(0)
         const pagesCount = ref(0)
@@ -105,6 +108,8 @@ export default defineComponent({
                     containerRef.value.scrollTop -=
                         containerRef.value.scrollHeight * 0.333
                 }
+
+                onScrollEnd()
             })
 
             return toDisplay
@@ -114,6 +119,15 @@ export default defineComponent({
             return item.id ?? item.key ?? JSON.stringify(item)
         }
 
+        const onScrollEnd = () => {
+            const top =
+                bottomRef.value.$el.offsetTop - containerRef.value.scrollTop
+            if (top < containerRef.value.offsetHeight) {
+                containerRef.value.scrollTop +=
+                    top - containerRef.value.offsetHeight
+            }
+        }
+
         const onScrollToTop = () => {
             lastOp.value = 'top'
             if (currentPage.value <= 0) {
@@ -154,13 +168,18 @@ export default defineComponent({
                     items.value,
                     pageSize.value
                 )
+                if (!itemPages.value.get(currentPage.value)) {
+                    currentPage.value = 0
+                }
                 onScrollToTop()
             },
             { immediate: true }
         )
 
         return {
+            bottomRef,
             containerRef,
+            onScrollEnd,
             onScrollToTop,
             onScrollToBottom,
             displayItems,