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

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 next = 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(),
+    next: next.value,
+    limit: props.pageSize,
+  }
+}
+
+function resetState () {
+  internalData.value = []
+  next.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
+    next.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 token returned by the previous page; absent on the first page */
+  next?: 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[]
+  /** Token for the next page; 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
+}

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

@@ -19,8 +19,8 @@ const meta = {
     end: undefined,
     min: 0,
     max: 100,
-    startPlaceholder: undefined,
-    endPlaceholder: undefined,
+    startPlaceholder: '',
+    endPlaceholder: '',
     disabled: false,
   },
   render: args => ({

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

@@ -38,7 +38,7 @@ const end = computed({
       v-bind="$attrs"
       :min="min"
       :max="end ?? max"
-      :placeholder="startPlaceholder ?? T('startPlaceholder')"
+      :placeholder="startPlaceholder || T('startPlaceholder')"
       fluid
     />
     <span class="leading-0 text-muted-foreground">
@@ -49,7 +49,7 @@ const end = computed({
       v-bind="$attrs"
       :min="start ?? min"
       :max="max"
-      :placeholder="endPlaceholder ?? T('endPlaceholder')"
+      :placeholder="endPlaceholder || T('endPlaceholder')"
       fluid
     />
   </div>

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

@@ -135,8 +135,8 @@ function handleSearch (value: string) {
 // -- Empty text --
 
 const computedEmptyText = computed(() => {
-  if (keyword.value) return props.searchEmptyText ?? T('noSearchItems')
-  return props.emptyText ?? T('noItems')
+  if (keyword.value) return props.searchEmptyText || T('noSearchItems')
+  return props.emptyText || T('noItems')
 })
 
 // -- Popover open/close --
@@ -188,9 +188,10 @@ defineExpose({ refresh: resetAndLoad })
     :options="displayedOptions"
     :filter="filterFunction"
     :placeholder="placeholder"
-    :disabled="disabled"
     :searchPlaceholder="searchPlaceholder"
     :emptyText="computedEmptyText"
+    :disabled="disabled"
+    :loading="isLoading"
     @search="handleSearch"
     @open="handleOpen"
     @close="handleClose"
@@ -220,7 +221,6 @@ defineExpose({ refresh: resetAndLoad })
       <EffectIntersectionChecker
         v-if="hasMore"
         :disabled="isLoading"
-        bao
         class="py-2 flex items-center justify-center"
         @show="loadMore"
       >

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

@@ -36,6 +36,7 @@ const meta = {
   argTypes: {
     placeholder: { control: 'text' },
     disabled: { control: 'boolean' },
+    loading: { control: 'boolean' },
     filter: { control: 'boolean' },
     multiple: { control: 'boolean' },
     searchPlaceholder: { control: 'text' },
@@ -44,6 +45,7 @@ const meta = {
   args: {
     placeholder: 'Select an option',
     disabled: false,
+    loading: false,
     filter: false,
     multiple: false,
     searchPlaceholder: '',
@@ -277,6 +279,14 @@ export const Disabled: Story = {
   }),
 }
 
+export const Loading: Story = {
+  parameters: noControls,
+  args: {
+    loading: true,
+    placeholder: 'Loading options',
+  },
+}
+
 export const EventHandling: Story = {
   parameters: noControls,
   render: () => ({

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

@@ -29,6 +29,7 @@ const props = withDefaults(defineProps<SelectProps<TValue, TMeta>>(), {
   modelValue: undefined,
   placeholder: undefined,
   disabled: false,
+  loading: false,
   filter: false,
   searchPlaceholder: undefined,
   emptyText: undefined,
@@ -188,7 +189,7 @@ function handleClear (event: MouseEvent) {
             v-else
             class="text-muted-foreground"
           >
-            {{ placeholder ?? T('placeholder') }}
+            {{ placeholder || T('placeholder') }}
           </span>
         </span>
         <InputGroupAddon
@@ -205,6 +206,12 @@ function handleClear (event: MouseEvent) {
         </InputGroupAddon>
         <InputGroupAddon align="inline-end">
           <Icon
+            v-if="loading"
+            name="loader-circle"
+            class="size-4 animate-spin opacity-50"
+          />
+          <Icon
+            v-else
             name="chevron-down"
             class="size-4 opacity-50"
           />
@@ -221,11 +228,11 @@ function handleClear (event: MouseEvent) {
       >
         <CommandInput
           v-if="!!filter"
-          :placeholder="searchPlaceholder ?? T('searchPlaceholder')"
+          :placeholder="searchPlaceholder || T('searchPlaceholder')"
         />
         <CommandList>
           <CommandEmpty>
-            {{ emptyText ?? T('noItems') }}
+            {{ emptyText || T('noItems') }}
           </CommandEmpty>
 
           <template

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

@@ -13,6 +13,8 @@ export type SelectBaseProps<V extends string | number = string, M = unknown> = {
   options?: SelectOption<V, M>[]
   placeholder?: string
   disabled?: boolean
+  /** Show a spinner in place of the chevron */
+  loading?: boolean
   /** true: enable client-side label filter; function: custom filter (disables internal filter) */
   filter?: boolean | SelectFilterFunction
   /** Search input placeholder */

package/i18n/messages/ar.json

@@ -51,6 +51,12 @@
       "Dropdown": {
         "empty": "لا توجد عناصر"
       },
+      "InfiniteDataTable": {
+        "allLoaded": "— تم تحميل الكل —",
+        "count": "{loaded} من {total} تم تحميله",
+        "refresh": "تحديث",
+        "scrollToTop": "الرجوع إلى الأعلى"
+      },
       "InputRange": {
         "endPlaceholder": "أقصى",
         "startPlaceholder": "أدنى"

package/i18n/messages/de.json

@@ -51,6 +51,12 @@
       "Dropdown": {
         "empty": "Keine Elemente"
       },
+      "InfiniteDataTable": {
+        "allLoaded": "— alle geladen —",
+        "count": "{loaded} von {total} geladen",
+        "refresh": "Aktualisieren",
+        "scrollToTop": "Nach oben scrollen"
+      },
       "InputRange": {
         "endPlaceholder": "Maximum",
         "startPlaceholder": "Minimum"

package/i18n/messages/en.json

@@ -51,6 +51,12 @@
       "Dropdown": {
         "empty": "No items"
       },
+      "InfiniteDataTable": {
+        "allLoaded": "— all loaded —",
+        "count": "{loaded} of {total} loaded",
+        "refresh": "Refresh",
+        "scrollToTop": "Scroll to top"
+      },
       "InputRange": {
         "endPlaceholder": "Max",
         "startPlaceholder": "Min"

package/i18n/messages/es.json

@@ -51,6 +51,12 @@
       "Dropdown": {
         "empty": "Sin elementos"
       },
+      "InfiniteDataTable": {
+        "allLoaded": "— todos cargados —",
+        "count": "{loaded} de {total} cargados",
+        "refresh": "Actualizar",
+        "scrollToTop": "Desplazarse hacia arriba"
+      },
       "InputRange": {
         "endPlaceholder": "Máximo",
         "startPlaceholder": "Mínimo"

package/i18n/messages/fr.json

@@ -51,6 +51,12 @@
       "Dropdown": {
         "empty": "Aucun élément"
       },
+      "InfiniteDataTable": {
+        "allLoaded": "— tout chargé —",
+        "count": "{loaded} sur {total} chargés",
+        "refresh": "Actualiser",
+        "scrollToTop": "Retour au haut"
+      },
       "InputRange": {
         "endPlaceholder": "Max",
         "startPlaceholder": "Min"

package/i18n/messages/hi.json

@@ -51,6 +51,12 @@
       "Dropdown": {
         "empty": "कोई आइटम नहीं"
       },
+      "InfiniteDataTable": {
+        "allLoaded": "— सभी लोड हो गए —",
+        "count": "{loaded} of {total} लोड हो गया",
+        "refresh": "ताज़ा करें",
+        "scrollToTop": "शीर्ष पर जाएं"
+      },
       "InputRange": {
         "endPlaceholder": "अधिकतम",
         "startPlaceholder": "न्यूनतम"

package/i18n/messages/id.json

@@ -51,6 +51,12 @@
       "Dropdown": {
         "empty": "Tidak ada item"
       },
+      "InfiniteDataTable": {
+        "allLoaded": "— semua dimuat —",
+        "count": "{loaded} dari {total} dimuat",
+        "refresh": "Segarkan",
+        "scrollToTop": "Gulir ke atas"
+      },
       "InputRange": {
         "endPlaceholder": "Maksimal",
         "startPlaceholder": "Minimal"

package/i18n/messages/it.json

@@ -51,6 +51,12 @@
       "Dropdown": {
         "empty": "Nessun elemento"
       },
+      "InfiniteDataTable": {
+        "allLoaded": "— completamente caricato —",
+        "count": "{loaded} di {total} caricati",
+        "refresh": "Aggiorna",
+        "scrollToTop": "Scorri verso l'alto"
+      },
       "InputRange": {
         "endPlaceholder": "Massimo",
         "startPlaceholder": "Minimo"

package/i18n/messages/ja.json

@@ -51,6 +51,12 @@
       "Dropdown": {
         "empty": "アイテムなし"
       },
+      "InfiniteDataTable": {
+        "allLoaded": "すべて読み込み完了",
+        "count": "{loaded}/{total} 読み込み済み",
+        "refresh": "更新",
+        "scrollToTop": "トップへスクロール"
+      },
       "InputRange": {
         "endPlaceholder": "最大値",
         "startPlaceholder": "最小値"

package/i18n/messages/ko.json

@@ -51,6 +51,12 @@
       "Dropdown": {
         "empty": "항목 없음"
       },
+      "InfiniteDataTable": {
+        "allLoaded": "— 모두 로드됨 —",
+        "count": "{loaded}개/{total}개 로드됨",
+        "refresh": "새로고침",
+        "scrollToTop": "상단으로 이동"
+      },
       "InputRange": {
         "endPlaceholder": "최대값",
         "startPlaceholder": "최소값"

package/i18n/messages/nl.json

@@ -51,6 +51,12 @@
       "Dropdown": {
         "empty": "Geen items"
       },
+      "InfiniteDataTable": {
+        "allLoaded": "— alles geladen —",
+        "count": "{loaded} van {total} geladen",
+        "refresh": "Vernieuwen",
+        "scrollToTop": "Naar boven schuiven"
+      },
       "InputRange": {
         "endPlaceholder": "Maximum",
         "startPlaceholder": "Minimum"

package/i18n/messages/pl.json

@@ -51,6 +51,12 @@
       "Dropdown": {
         "empty": "Brak elementów"
       },
+      "InfiniteDataTable": {
+        "allLoaded": "— wszystko załadowane —",
+        "count": "{loaded} z {total} załadowane",
+        "refresh": "Odśwież",
+        "scrollToTop": "Przewiń do góry"
+      },
       "InputRange": {
         "endPlaceholder": "Maksimum",
         "startPlaceholder": "Minimum"

package/i18n/messages/pt.json

@@ -51,6 +51,12 @@
       "Dropdown": {
         "empty": "Sem itens"
       },
+      "InfiniteDataTable": {
+        "allLoaded": "— Tudo carregado —",
+        "count": "{loaded} de {total} carregado(s)",
+        "refresh": "Atualizar",
+        "scrollToTop": "Voltar ao topo"
+      },
       "InputRange": {
         "endPlaceholder": "Máximo",
         "startPlaceholder": "Mínimo"

package/i18n/messages/ru.json

@@ -51,6 +51,12 @@
       "Dropdown": {
         "empty": "Нет элементов"
       },
+      "InfiniteDataTable": {
+        "allLoaded": "— все загружено —",
+        "count": "{loaded} из {total} загружено",
+        "refresh": "Обновить",
+        "scrollToTop": "Прокрутить вверх"
+      },
       "InputRange": {
         "endPlaceholder": "Максимум",
         "startPlaceholder": "Минимум"

package/i18n/messages/th.json

@@ -51,6 +51,12 @@
       "Dropdown": {
         "empty": "ไม่มีรายการ"
       },
+      "InfiniteDataTable": {
+        "allLoaded": "— โหลดเสร็จแล้วทั้งหมด —",
+        "count": "{loaded} จาก {total} โหลดแล้ว",
+        "refresh": "รีเฟรช",
+        "scrollToTop": "เลื่อนขึ้นด้านบน"
+      },
       "InputRange": {
         "endPlaceholder": "สูงสุด",
         "startPlaceholder": "ต่ำสุด"

package/i18n/messages/tr.json

@@ -51,6 +51,12 @@
       "Dropdown": {
         "empty": "Öğe yok"
       },
+      "InfiniteDataTable": {
+        "allLoaded": "— tümü yüklendi —",
+        "count": "{loaded} / {total} yüklendi",
+        "refresh": "Yenile",
+        "scrollToTop": "Başa dön"
+      },
       "InputRange": {
         "endPlaceholder": "Maks",
         "startPlaceholder": "Min"

package/i18n/messages/vi.json

@@ -51,6 +51,12 @@
       "Dropdown": {
         "empty": "Không có mục"
       },
+      "InfiniteDataTable": {
+        "allLoaded": "— tất cả đã tải —",
+        "count": "{loaded} của {total} đã tải",
+        "refresh": "Làm mới",
+        "scrollToTop": "Cuộn lên đầu"
+      },
       "InputRange": {
         "endPlaceholder": "Tối đa",
         "startPlaceholder": "Tối thiểu"

package/i18n/messages/zh-CN.json

@@ -51,6 +51,12 @@
       "Dropdown": {
         "empty": "无项目"
       },
+      "InfiniteDataTable": {
+        "allLoaded": "全部已加载",
+        "count": "{loaded} / {total} 已加载",
+        "refresh": "刷新",
+        "scrollToTop": "回到顶部"
+      },
       "InputRange": {
         "endPlaceholder": "最大值",
         "startPlaceholder": "最小值"