@polymarbot/nuxt-layer-shadcn-ui 0.6.3 → 0.7.0

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/DatePicker/index.stories.ts

@@ -28,7 +28,7 @@ const meta = {
     showTime: false,
     disabled: false,
     readonly: false,
-    placeholder: undefined,
+    placeholder: '',
     minDate: undefined,
     maxDate: undefined,
     valueFormat: undefined,

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

@@ -86,7 +86,7 @@ const timeConfig = computed(() => {
       <div @click.stop>
         <Input
           :modelValue="value"
-          :placeholder="placeholder ?? T('placeholder')"
+          :placeholder="placeholder || T('placeholder')"
           :disabled="disabled"
           :readonly="readonly"
           @update:modelValue="(v: string | undefined) => onInput(v ?? '')"

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

@@ -27,8 +27,8 @@ const meta = {
     showTime: false,
     disabled: false,
     readonly: false,
-    startPlaceholder: undefined,
-    endPlaceholder: undefined,
+    startPlaceholder: '',
+    endPlaceholder: '',
     maxSpanDays: undefined,
     valueFormat: undefined,
     autoApply: true,

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

@@ -97,7 +97,7 @@ const endMaxDate = computed(() => {
       :showTime="showTime"
       :disabled="disabled"
       :readonly="readonly"
-      :placeholder="startPlaceholder ?? T('startPlaceholder')"
+      :placeholder="startPlaceholder || T('startPlaceholder')"
       :minDate="startMinDate"
       :maxDate="startMaxDate"
       :valueFormat="valueFormat"
@@ -112,7 +112,7 @@ const endMaxDate = computed(() => {
       :showTime="showTime"
       :disabled="disabled"
       :readonly="readonly"
-      :placeholder="endPlaceholder ?? T('endPlaceholder')"
+      :placeholder="endPlaceholder || T('endPlaceholder')"
       :minDate="endMinDate"
       :maxDate="endMaxDate"
       :valueFormat="valueFormat"

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 `next` token */
+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.next ? Number(params.next) : 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 },
+}