@polymarbot/nuxt-layer-shadcn-ui 0.6.4 → 0.7.1

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

@@ -27,6 +27,7 @@ const props = withDefaults(defineProps<DataTableProps<TData>>(), {
   sortOrder: undefined,
   loading: false,
   clickable: false,
+  height: undefined,
 })
 
 const emit = defineEmits<{
@@ -46,6 +47,8 @@ defineSlots<
   }) => any> & {
     empty?: () => any
     footer?: () => any
+    bodyStart?: () => any
+    bodyEnd?: () => any
   } & Record<`header-${string}`, (_: { column: DataTableColumn }) => any>
 >()
 
@@ -252,6 +255,9 @@ function buildColumnStyle (column: DataTableColumn): Record<string, string> {
   return style
 }
 
+// CSS var bound on outer wrapper, read by table-container via :deep selector
+const heightStyle = computed(() => props.height ? { '--data-table-height': props.height } : undefined)
+
 // Reusable class fragments
 const headerCellClass = 'h-auto bg-border px-4 py-3 text-xs font-normal text-foreground'
 const headerDividerClass = 'relative after:absolute after:top-1/2 after:right-0 after:h-4 after:w-px after:-translate-y-1/2 after:bg-muted-foreground/25'
@@ -263,13 +269,21 @@ const selectionColumnStyle = { width: '1%' }
 const selectionColumnShadowDir = computed<FrozenShadow | undefined>(() =>
   showSelectionColumn.value && !lastLeftFrozenField.value && !atStart.value ? 'left' : undefined,
 )
+
+defineExpose({
+  /** The shadcn table-container element — useful as IntersectionObserver root. */
+  scrollEl,
+})
 </script>
 
 <template>
   <div
-    :class="cn('rounded-lg bg-border px-1 text-foreground relative', !$slots.footer && `
-      pb-1
-    `)"
+    :class="cn(
+      'rounded-lg bg-border px-1 text-foreground relative',
+      !$slots.footer && 'pb-1',
+      height && 'has-sticky-bounds',
+    )"
+    :style="heightStyle"
   >
     <!-- Loading overlay -->
     <Transition
@@ -281,7 +295,7 @@ const selectionColumnShadowDir = computed<FrozenShadow | undefined>(() =>
       <div
         v-if="loading"
         class="
-          inset-0 rounded-lg bg-background/60 absolute z-20 flex items-center
+          inset-0 rounded-lg bg-background/60 absolute z-30 flex items-center
           justify-center
         "
       >
@@ -292,7 +306,10 @@ const selectionColumnShadowDir = computed<FrozenShadow | undefined>(() =>
       </div>
     </Transition>
 
-    <Table ref="tableRef">
+    <Table
+      ref="tableRef"
+      class="h-full"
+    >
       <TableHeader>
         <TableRow
           class="hover:bg-transparent"
@@ -354,6 +371,17 @@ const selectionColumnShadowDir = computed<FrozenShadow | undefined>(() =>
           [&_tr]:h-15
         "
       >
+        <!-- Top body slot (e.g. infinite-scroll trigger) -->
+        <TableRow
+          v-if="$slots.bodyStart"
+          data-virtual-row
+          class="hover:bg-transparent"
+        >
+          <TableCell :colspan="totalColumns">
+            <slot name="bodyStart" />
+          </TableCell>
+        </TableRow>
+
         <template v-if="data?.length">
           <TableRow
             v-for="(row, index) in data"
@@ -409,89 +437,90 @@ const selectionColumnShadowDir = computed<FrozenShadow | undefined>(() =>
           </TableRow>
         </template>
 
-        <template v-else>
-          <TableEmpty :colspan="totalColumns">
-            <slot name="empty">
-              <div
-                class="gap-2 text-muted-foreground flex flex-col items-center"
-              >
-                <Icon
-                  name="inbox"
-                  class="size-8"
-                />
-                <span class="text-sm">
-                  {{ T('empty') }}
-                </span>
-              </div>
-            </slot>
-          </TableEmpty>
-        </template>
+        <TableEmpty
+          v-else-if="!loading"
+          :colspan="totalColumns"
+        >
+          <slot name="empty">
+            <div
+              class="gap-2 text-muted-foreground flex flex-col items-center"
+            >
+              <Icon
+                name="inbox"
+                class="size-8"
+              />
+              <span class="text-sm">
+                {{ T('empty') }}
+              </span>
+            </div>
+          </slot>
+        </TableEmpty>
+
+        <!-- Bottom body slot (e.g. infinite-scroll trigger / "all loaded") -->
+        <TableRow
+          v-if="$slots.bodyEnd"
+          data-virtual-row
+          class="hover:bg-transparent"
+        >
+          <TableCell :colspan="totalColumns">
+            <slot name="bodyEnd" />
+          </TableCell>
+        </TableRow>
       </TableBody>
 
       <TableFooter
         v-if="$slots.footer"
-        class="border-t-0 bg-transparent"
+        class="
+          [&_td]:px-4 [&_td]:py-2
+          border-t-0 bg-transparent
+        "
       >
-        <slot name="footer" />
+        <TableRow>
+          <TableCell
+            :colspan="totalColumns"
+            class="bg-border"
+          >
+            <slot name="footer" />
+          </TableCell>
+        </TableRow>
       </TableFooter>
     </Table>
   </div>
 </template>
 
 <style scoped>
-/* CSS variable on tr, background on td — sticky cells need opaque bg */
-:deep(tbody tr) {
-  --cell-bg: var(--color-card);
-  --corner-r: 8px;
-}
-
-:deep(tbody tr:hover) {
-  --cell-bg: var(--color-muted);
-}
-
-:deep(tbody td) {
-  background: var(--cell-bg);
+:deep([data-slot="table-container"]) {
+  height: var(--data-table-height, auto);
 }
 
-/* Rounded corners: radial-gradient positioned at each corner,
-   transparent circle inside reveals cell-bg, accent fills the corner gap */
-:deep(tbody tr:first-child td:first-child) {
-  background:
-    radial-gradient(circle at var(--corner-r) var(--corner-r), transparent var(--corner-r), var(--color-accent) var(--corner-r)) 0 0 / var(--corner-r) var(--corner-r) no-repeat,
-    var(--cell-bg);
+/* sticky on <th>/<td>, not <tr> — row-level sticky lacks browser support */
+.has-sticky-bounds :deep(thead th) {
+  position: sticky;
+  top: 0;
+  z-index: 20;
 }
 
-:deep(tbody tr:first-child td:last-child) {
-  background:
-    radial-gradient(circle at 0 var(--corner-r), transparent var(--corner-r), var(--color-accent) var(--corner-r)) 100% 0 / var(--corner-r) var(--corner-r) no-repeat,
-    var(--cell-bg);
+.has-sticky-bounds :deep(tfoot td) {
+  position: sticky;
+  bottom: 0;
+  z-index: 20;
 }
 
-:deep(tbody tr:last-child td:first-child) {
-  background:
-    radial-gradient(circle at var(--corner-r) 0, transparent var(--corner-r), var(--color-accent) var(--corner-r)) 0 100% / var(--corner-r) var(--corner-r) no-repeat,
-    var(--cell-bg);
+/* clip-path is reliable on table-row-group, unlike overflow:hidden */
+:deep(tbody) {
+  clip-path: inset(0 round 8px);
 }
 
-:deep(tbody tr:last-child td:last-child) {
-  background:
-    radial-gradient(circle at 0 0, transparent var(--corner-r), var(--color-accent) var(--corner-r)) 100% 100% / var(--corner-r) var(--corner-r) no-repeat,
-    var(--cell-bg);
+:deep(tbody tr) {
+  --cell-bg: var(--color-card);
 }
 
-/* Single row: combine top + bottom gradients */
-:deep(tbody tr:first-child:last-child td:first-child) {
-  background:
-    radial-gradient(circle at var(--corner-r) var(--corner-r), transparent var(--corner-r), var(--color-accent) var(--corner-r)) 0 0 / var(--corner-r) var(--corner-r) no-repeat,
-    radial-gradient(circle at var(--corner-r) 0, transparent var(--corner-r), var(--color-accent) var(--corner-r)) 0 100% / var(--corner-r) var(--corner-r) no-repeat,
-    var(--cell-bg);
+:deep(tbody tr:hover) {
+  --cell-bg: var(--color-muted);
 }
 
-:deep(tbody tr:first-child:last-child td:last-child) {
-  background:
-    radial-gradient(circle at 0 var(--corner-r), transparent var(--corner-r), var(--color-accent) var(--corner-r)) 100% 0 / var(--corner-r) var(--corner-r) no-repeat,
-    radial-gradient(circle at 0 0, transparent var(--corner-r), var(--color-accent) var(--corner-r)) 100% 100% / var(--corner-r) var(--corner-r) no-repeat,
-    var(--cell-bg);
+:deep(tbody td) {
+  background: var(--cell-bg);
 }
 
 /* Frozen column shadow via ::before — ::after is reserved for header divider */

package/app/components/ui/DataTable/types.ts

@@ -41,4 +41,6 @@ export interface DataTableProps<T = Record<string, any>> {
   loading?: boolean
   /** Whether rows are clickable (shows pointer cursor and pairs with `@rowClick`) */
   clickable?: boolean
+  /** Fixed height for the inner scroll container (e.g. '400px'). Enables internal vertical scroll, with sticky header and footer. */
+  height?: string
 }

package/app/components/ui/InfiniteDataTable/en.json

@@ -0,0 +1,6 @@
+{
+  "allLoaded": "— all loaded —",
+  "count": "{loaded} of {total} loaded",
+  "refresh": "Refresh",
+  "scrollToTop": "Scroll to top"
+}

package/app/components/ui/InfiniteDataTable/index.stories.ts

@@ -0,0 +1,165 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import type { DataTableColumn } from '../DataTable/types'
+import type { InfiniteDataTableFetchParams, InfiniteDataTableFetchResult } from './types'
+import InfiniteDataTable from './index.vue'
+
+interface User {
+  id: number
+  name: string
+  email: string
+  role: string
+  status: string
+  amount: number
+  createdAt: string
+}
+
+const allUsers: User[] = Array.from({ length: 120 }, (_, i) => ({
+  id: i + 1,
+  name: `User ${i + 1}`,
+  email: `user${i + 1}@example.com`,
+  role: [ 'Admin', 'Editor', 'User' ][i % 3]!,
+  status: i % 4 === 0 ? 'inactive' : 'active',
+  amount: Math.round(Math.random() * 10000) / 100,
+  createdAt: new Date(2024, 0, 1 + i).toISOString(),
+}))
+
+const columns: DataTableColumn[] = [
+  { field: 'name', title: 'Name', width: '120px', sortable: true },
+  { field: 'email', title: 'Email', minWidth: '200px' },
+  { field: 'role', title: 'Role', width: '100px', sortable: true },
+  { field: 'status', title: 'Status', width: '100px' },
+  { field: 'amount', title: 'Amount', width: '120px', type: 'currency', sortable: true },
+  { field: 'createdAt', title: 'Created', width: '140px', type: 'date' },
+]
+
+/** Mock fetch using offset as the opaque cursor */
+function mockFetch (params: InfiniteDataTableFetchParams): Promise<InfiniteDataTableFetchResult<User>> {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      const data = [ ...allUsers ]
+
+      if (params.role) {
+        data.splice(0, data.length, ...data.filter(u => u.role === params.role))
+      }
+
+      if (params.sortBy) {
+        const order = params.sortOrder ?? 1
+        data.sort((a, b) => {
+          const av = a[params.sortBy as keyof User]
+          const bv = b[params.sortBy as keyof User]
+          if (av! < bv!) return -1 * order
+          if (av! > bv!) return 1 * order
+          return 0
+        })
+      }
+
+      const offset = params.cursor ? Number(params.cursor) : 0
+      const items = data.slice(offset, offset + params.limit)
+      const nextOffset = offset + items.length
+      resolve({
+        items,
+        next: nextOffset < data.length ? String(nextOffset) : undefined,
+        total: data.length,
+      })
+    }, 400)
+  })
+}
+
+const meta = {
+  title: 'UI/InfiniteDataTable',
+  component: InfiniteDataTable as any,
+  argTypes: {
+    columns: { control: 'object' },
+    fetchMethod: { control: false },
+    autoFetch: { control: 'boolean' },
+    filters: { control: 'object' },
+    pageSize: { control: 'number' },
+    height: { control: 'text' },
+    clickable: { control: 'boolean' },
+  },
+  args: {
+    columns,
+    fetchMethod: mockFetch,
+    autoFetch: true,
+    filters: undefined,
+    pageSize: 30,
+    height: '360px',
+    clickable: false,
+  },
+  render: args => ({
+    components: { InfiniteDataTable: InfiniteDataTable as any },
+    setup: () => ({ args }),
+    template: '<InfiniteDataTable v-bind="args" />',
+  }),
+} satisfies Meta<typeof InfiniteDataTable>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
+/** Internal scroll container — scrolling inside the table fetches the next page */
+export const Default: Story = {}
+
+/** External `filters` changes also reset pagination — try toggling the role filter */
+export const WithFilters: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <select v-model="role">
+    <option value="">All</option>
+    <option value="Admin">Admin</option>
+    <option value="Editor">Editor</option>
+    <option value="User">User</option>
+  </select>
+  <InfiniteDataTable
+    :columns="columns"
+    :fetchMethod="mockFetch"
+    :filters="{ role: role || undefined }"
+    height="360px"
+  />
+</template>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { InfiniteDataTable: InfiniteDataTable as any },
+    setup () {
+      const role = ref('')
+      const filters = computed(() => ({ role: role.value || undefined }))
+      return { columns, mockFetch, role, filters }
+    },
+    template: `
+      <div class="space-y-3">
+        <label class="gap-2 text-sm flex items-center">
+          Role:
+          <select
+            v-model="role"
+            class="px-2 py-1 border rounded"
+          >
+            <option value="">All</option>
+            <option value="Admin">Admin</option>
+            <option value="Editor">Editor</option>
+            <option value="User">User</option>
+          </select>
+        </label>
+        <InfiniteDataTable
+          :columns="columns"
+          :fetchMethod="mockFetch"
+          :filters="filters"
+          height="360px"
+        />
+      </div>
+    `,
+  }),
+}
+
+/** No fixed height — the page scrolls and triggers loading at the bottom */
+export const PageScroll: Story = {
+  parameters: noControls,
+  args: { height: undefined },
+}

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

@@ -0,0 +1,239 @@
+<script setup lang="ts" generic="TData extends Record<string, any>">
+import type { InfiniteDataTableFetchParams, InfiniteDataTableProps } from './types'
+
+const props = withDefaults(defineProps<InfiniteDataTableProps<TData>>(), {
+  columns: () => [],
+  fetchMethod: undefined,
+  autoFetch: true,
+  filters: undefined,
+  pageSize: 30,
+  height: undefined,
+  clickable: false,
+})
+
+const emit = defineEmits<{
+  'update:filters': [filters: Record<string, any>]
+  'rowClick': [row: TData, index: number, event: MouseEvent]
+}>()
+
+const T = useTranslations('components.ui.InfiniteDataTable')
+
+// -- Internal state --
+
+const loading = ref(false)
+const internalData = ref<TData[]>([]) as Ref<TData[]>
+const cursor = ref<string | undefined>(undefined)
+const hasMore = ref(true)
+const total = ref<number | undefined>(undefined)
+const requestVersion = ref(0)
+
+const sortState = ref<{ sortBy: string | null, sortOrder: number | null }>({
+  sortBy: props.filters?.sortBy ? String(props.filters.sortBy) : null,
+  sortOrder: props.filters?.sortOrder ? Number(props.filters.sortOrder) : null,
+})
+
+const isInitialLoad = computed(() => loading.value && internalData.value.length === 0)
+
+// -- IntersectionObserver root: only when internal scroll is active --
+
+const dataTableRef = ref<{ scrollEl?: HTMLElement } | null>(null)
+const intersectionOptions = computed<IntersectionObserverInit | undefined>(() => { // eslint-disable-line no-undef
+  if (!props.height) return undefined
+  const root = dataTableRef.value?.scrollEl
+  return root ? { root } : undefined
+})
+
+// -- Helpers --
+
+function getFilters (): Record<string, any> {
+  return {
+    ...(props.filters ?? {}),
+    sortBy: sortState.value.sortBy,
+    sortOrder: sortState.value.sortOrder,
+  }
+}
+
+function buildFetchParams (): InfiniteDataTableFetchParams {
+  return {
+    ...getFilters(),
+    cursor: cursor.value,
+    limit: props.pageSize,
+  }
+}
+
+function resetState () {
+  internalData.value = []
+  cursor.value = undefined
+  hasMore.value = true
+  total.value = undefined
+}
+
+// -- Loading --
+
+async function loadMore () {
+  if (!props.fetchMethod) return
+  if (loading.value || !hasMore.value) return
+
+  const currentVersion = ++requestVersion.value
+  loading.value = true
+  try {
+    const result = await props.fetchMethod(buildFetchParams())
+    if (currentVersion !== requestVersion.value) return
+
+    internalData.value = [ ...internalData.value, ...result.items ]
+    if (result.total != null) total.value = result.total
+    cursor.value = result.next
+    hasMore.value = !!result.next
+  } catch (error) {
+    if (currentVersion !== requestVersion.value) return
+    console.error('InfiniteDataTable loadMore failed:', error)
+  } finally {
+    if (currentVersion === requestVersion.value) loading.value = false
+  }
+}
+
+async function refresh () {
+  resetState()
+  emit('update:filters', getFilters())
+  await loadMore()
+}
+
+function scrollToTop () {
+  const el = dataTableRef.value?.scrollEl
+  if (!el) return
+  if (el.scrollHeight > el.clientHeight) {
+    el.scrollTo({ top: 0, behavior: 'smooth' })
+  } else {
+    el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
+}
+
+// -- Sort: incremental loading requires a full reset on sort change --
+
+let sortUpdatePending = false
+
+function onSortByUpdate (value: string | null) {
+  sortState.value.sortBy = value
+  scheduleAfterSort()
+}
+
+function onSortOrderUpdate (value: number | null) {
+  sortState.value.sortOrder = value
+  scheduleAfterSort()
+}
+
+function scheduleAfterSort () {
+  if (sortUpdatePending) return
+  sortUpdatePending = true
+  nextTick(() => {
+    sortUpdatePending = false
+    refresh()
+  })
+}
+
+// -- External filters: any change resets and reloads --
+
+watch(() => props.filters, (newVal, oldVal) => {
+  if (JSON.stringify(newVal) === JSON.stringify(oldVal)) return
+  refresh()
+}, { deep: true })
+
+// -- Expose --
+
+defineExpose({
+  refresh,
+  loadMore,
+  scrollToTop,
+})
+
+// -- Lifecycle --
+
+onMounted(() => {
+  emit('update:filters', getFilters())
+  if (props.autoFetch) loadMore()
+})
+</script>
+
+<template>
+  <DataTable
+    ref="dataTableRef"
+    :data="internalData"
+    :columns
+    :height
+    :loading="isInitialLoad"
+    :clickable
+    :sortBy="sortState.sortBy"
+    :sortOrder="sortState.sortOrder"
+    @update:sortBy="onSortByUpdate"
+    @update:sortOrder="onSortOrderUpdate"
+    @rowClick="(row, i, e) => emit('rowClick', row as TData, i, e)"
+  >
+    <template
+      v-for="name in Object.keys($slots).filter(n => n !== 'bodyEnd' && n !== 'footer')"
+      :key="name"
+      #[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData ?? {}"
+      />
+    </template>
+
+    <template
+      v-if="hasMore || internalData.length > 0"
+      #bodyEnd
+    >
+      <div
+        v-if="!hasMore"
+        class="py-2 text-xs text-muted-foreground text-center"
+      >
+        {{ T('allLoaded') }}
+      </div>
+      <EffectIntersectionChecker
+        v-else-if="!isInitialLoad"
+        :disabled="loading"
+        :options="intersectionOptions"
+        class="py-2 flex items-center justify-center"
+        @show="loadMore"
+      >
+        <Icon
+          name="loader-circle"
+          class="size-4 animate-spin text-muted-foreground"
+        />
+      </EffectIntersectionChecker>
+    </template>
+
+    <template #footer>
+      <slot name="footer">
+        <div class="gap-2 text-xs flex items-center justify-between">
+          <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"
+                @click="scrollToTop"
+              />
+            </Tooltip>
+            <Tooltip :text="T('refresh')">
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                icon="rotate-cw"
+                :disabled="loading"
+                @click="refresh"
+              />
+            </Tooltip>
+          </div>
+          <span
+            v-if="total != null"
+            class="text-muted-foreground"
+          >
+            {{ T('count', { loaded: internalData.length, total }) }}
+          </span>
+        </div>
+      </slot>
+    </template>
+  </DataTable>
+</template>

package/app/components/ui/InfiniteDataTable/types.ts

@@ -0,0 +1,35 @@
+import type { DataTableColumn } from '../DataTable/types'
+
+export interface InfiniteDataTableFetchParams {
+  /** Opaque cursor pointing at the next page; absent on the first page */
+  cursor?: string
+  /** Page size requested */
+  limit: number
+  /** Filter / sort fields are spread onto the params object */
+  [key: string]: any
+}
+
+export interface InfiniteDataTableFetchResult<T = Record<string, any>> {
+  items: T[]
+  /** Cursor for the next page; pass back as `cursor` on the next request. Absent signals "no more". */
+  next?: string
+  /** Optional total count */
+  total?: number
+}
+
+export interface InfiniteDataTableProps<T = Record<string, any>> {
+  /** Column definitions */
+  columns?: DataTableColumn[]
+  /** Async function to fetch a page of rows */
+  fetchMethod?: (params: InfiniteDataTableFetchParams) => Promise<InfiniteDataTableFetchResult<T>>
+  /** Whether to fetch the first page on mount (default: true) */
+  autoFetch?: boolean
+  /** External filter state — changing this resets and reloads */
+  filters?: Record<string, any>
+  /** Number of rows per page (default: 30) */
+  pageSize?: number
+  /** Fixed height enabling internal vertical scroll (e.g. '400px') */
+  height?: string
+  /** Whether rows are clickable (shows pointer cursor and pairs with `@rowClick`) */
+  clickable?: boolean
+}