@polymarbot/nuxt-layer-shadcn-ui 0.7.5 → 0.7.7

package/app/components/ui/InfiniteDataTable/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts" generic="TData extends Record<string, any>">
 import type { InfiniteDataTableFetchParams, InfiniteDataTableProps } from './types'
+import { useEventListener } from '@vueuse/core'
 
 const props = withDefaults(defineProps<InfiniteDataTableProps<TData>>(), {
   columns: () => [],
@@ -37,12 +38,28 @@ const isInitialLoad = computed(() => loading.value && internalData.value.length
 // -- IntersectionObserver root: only when internal scroll is active --
 
 const dataTableRef = ref<{ scrollEl?: HTMLElement } | null>(null)
+const scrollEl = computed<HTMLElement | undefined>(() => dataTableRef.value?.scrollEl)
 const intersectionOptions = computed<IntersectionObserverInit | undefined>(() => { // eslint-disable-line no-undef
   if (!props.height) return undefined
-  const root = dataTableRef.value?.scrollEl
+  const root = scrollEl.value
   return root ? { root } : undefined
 })
 
+// -- Scroll-to-top availability --
+
+const { isOverflowing, atStart } = useScrollState(scrollEl)
+const isWindowAboveTable = ref(false)
+
+function updateWindowPosition () {
+  const el = scrollEl.value
+  isWindowAboveTable.value = !!el && el.getBoundingClientRect().top < 0
+}
+
+useEventListener(window, 'scroll', updateWindowPosition, { passive: true })
+onMounted(() => nextTick(updateWindowPosition))
+
+const isAtTop = computed(() => isOverflowing.value ? atStart.value : !isWindowAboveTable.value)
+
 // -- Helpers --
 
 function getFilters (): Record<string, any> {
@@ -99,9 +116,9 @@ async function refresh () {
 }
 
 function scrollToTop () {
-  const el = dataTableRef.value?.scrollEl
+  const el = scrollEl.value
   if (!el) return
-  if (el.scrollHeight > el.clientHeight) {
+  if (isOverflowing.value) {
     el.scrollTo({ top: 0, behavior: 'smooth' })
   } else {
     el.scrollIntoView({ behavior: 'smooth', block: 'start' })
@@ -207,19 +224,21 @@ onMounted(() => {
     <template #footer>
       <slot name="footer">
         <div class="gap-2 text-xs flex items-center justify-between">
-          <span
-            v-if="total != null"
-            class="text-muted-foreground"
-          >
-            {{ T('count', { loaded: internalData.length, total }) }}
-          </span>
+          <div>
+            <span
+              v-if="total != null"
+              class="text-muted-foreground"
+            >
+              {{ T('count', { loaded: internalData.length, total }) }}
+            </span>
+          </div>
           <div class="gap-2 flex items-center">
             <Tooltip :text="T('scrollToTop')">
               <Button
                 variant="ghost"
                 size="icon-sm"
                 icon="arrow-up-to-line"
-                :disabled="loading || internalData.length === 0"
+                :disabled="loading || internalData.length === 0 || isAtTop"
                 @click="scrollToTop"
               />
             </Tooltip>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.7.5",
+  "version": "0.7.7",
   "description": "Nuxt layer providing shadcn-vue based UI components",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -42,5 +42,5 @@
     "vue-i18n": "^11",
     "vue-router": "^4 || ^5"
   },
-  "gitHead": "30f6ac393aad4980ad4a01e84597b0769566ec9e"
+  "gitHead": "e053ea4dd7358d5974b1118be8588d88be36e376"
 }