@vestow/vue 0.1.0

package/src/components/data-table/DataTableViewOptions.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts" generic="TData extends RowData">
+import type { RowData, Table } from '@tanstack/vue-table'
+import type { ClassProps } from '../../lib/types'
+import type { DataTableFeatures } from './features'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { ChevronDown } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import DropdownMenu from '../dropdown-menu/DropdownMenu.vue'
+import DropdownMenuCheckboxItem from '../dropdown-menu/DropdownMenuCheckboxItem.vue'
+import DropdownMenuContent from '../dropdown-menu/DropdownMenuContent.vue'
+import DropdownMenuLabel from '../dropdown-menu/DropdownMenuLabel.vue'
+import DropdownMenuSeparator from '../dropdown-menu/DropdownMenuSeparator.vue'
+import DropdownMenuTrigger from '../dropdown-menu/DropdownMenuTrigger.vue'
+
+/**
+ * Gốc là `DropdownMenu`, một provider KHÔNG vẽ ra DOM — thuộc tính rơi tự do
+ * không có chỗ đáp và biến mất hẳn. Chuyển tay xuống chính cái trigger.
+ */
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<ClassProps & {
+  table: Table<DataTableFeatures, TData>
+}>()
+const { t } = useI18n()
+/**
+ * Chỉ liệt kê cột có thể ẩn. Cột điều khiển (checkbox chọn dòng, nút hành động)
+ * nên đặt enableHiding: false trong column def để không lọt vào đây.
+ */
+const hideableColumns = computed(() =>
+  props.table.getAllLeafColumns().filter(column => column.getCanHide()),
+)
+
+function labelOf(columnId: string, header: unknown): string {
+  return typeof header === 'string' && header.length > 0 ? header : columnId
+}
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger
+      v-bind="$attrs"
+      :class="cn(
+        'flex h-(--ui-field-height-sm) items-center gap-1.5 rounded-md border border-border px-(--ui-field-padding-x-sm)',
+        'text-[11.5px] font-medium transition-colors hover:bg-muted',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        props.class,
+      )"
+    >
+      {{ t('ui.table.columnsTrigger') }}
+      <ChevronDown class="size-3 text-muted-foreground" />
+    </DropdownMenuTrigger>
+
+    <DropdownMenuContent align="end" class="w-48">
+      <DropdownMenuLabel>{{ t('ui.table.columns') }}</DropdownMenuLabel>
+      <DropdownMenuSeparator />
+
+      <DropdownMenuCheckboxItem
+        v-for="column in hideableColumns"
+        :key="column.id"
+        :model-value="column.getIsVisible()"
+        @select="(event: Event) => event.preventDefault()"
+        @update:model-value="(value: boolean) => column.toggleVisibility(value)"
+      >
+        {{ labelOf(column.id, column.columnDef.header) }}
+      </DropdownMenuCheckboxItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

package/src/components/data-table/features.ts

@@ -0,0 +1,87 @@
+import type { CellData, ColumnDef, RowData } from '@tanstack/vue-table'
+import {
+  columnFilteringFeature,
+  columnPinningFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  filterFn_equals,
+  filterFn_includesString,
+  filterFn_inNumberRange,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_basic,
+  sortFn_datetime,
+  sortFn_text,
+  tableFeatures,
+} from '@tanstack/vue-table'
+
+/**
+ * Kiểu của `columnDef.meta`.
+ *
+ * v9 cho khai kiểu này qua slot `columnMeta` của tableFeatures — dùng cách đó
+ * thay vì `declare module`: augment sẽ cần `@tanstack/table-core` là dependency
+ * trực tiếp, mà nó chỉ là dependency gián tiếp của `@tanstack/vue-table`.
+ */
+export interface DataTableColumnMeta {
+  /**
+   * Căn chữ cho cả header và ô. Mặc định 'left'.
+   *
+   * `'number'` không phải một kiểu căn — nó nói cột này CHỨA SỐ, và kéo theo
+   * hai thứ luôn đi cùng nhau: căn phải + `tabular-nums`.
+   *
+   * Tách riêng khỏi `'right'` vì `'right'` một mình là chưa đủ: font mặc định
+   * (Geist) dùng chữ số tỉ lệ, nên `1.111` hẹp hơn `8.888` và cột số căn phải
+   * vẫn so le từng hàng. Phải có tabular figures thì các chữ số mới xếp thành
+   * lưới dọc quét được bằng mắt — vốn là lý do duy nhất để căn phải cột số.
+   *
+   * Để bên gọi tự nhớ `class: 'text-right tabular-nums'` thì kiểu gì cũng có
+   * bảng quên một nửa.
+   */
+  align?: 'left' | 'center' | 'right' | 'number'
+}
+
+/**
+ * v9 không bật feature nào sẵn — phải khai báo tường minh.
+ * Chỉ đăng ký đúng những gì DataTable cần, để bundle không kéo theo
+ * grouping / expanding / resizing khi không dùng.
+ *
+ * Row model client-side vẫn đăng ký cả khi chạy server-side: ở chế độ
+ * serverSide ta bật manual* nên các row model đó bị bỏ qua, đổi lại
+ * một component duy nhất phục vụ được cả hai chế độ.
+ */
+export const dataTableFeatures = tableFeatures({
+  columnVisibilityFeature,
+  columnPinningFeature,
+  columnSizingFeature,
+  columnFilteringFeature,
+  filteredRowModel: createFilteredRowModel(),
+  filterFns: {
+    includesString: filterFn_includesString,
+    equals: filterFn_equals,
+    inNumberRange: filterFn_inNumberRange,
+  },
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+    datetime: sortFn_datetime,
+    basic: sortFn_basic,
+  },
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowSelectionFeature,
+
+  columnMeta: {} as DataTableColumnMeta,
+})
+
+export type DataTableFeatures = typeof dataTableFeatures
+
+/** Kiểu column def đã gắn sẵn feature set — dùng ở app thay cho ColumnDef thô. */
+export type DataTableColumn<TData extends RowData, TValue extends CellData = CellData>
+  = ColumnDef<DataTableFeatures, TData, TValue>

package/src/components/data-table/index.ts

@@ -0,0 +1,27 @@
+export { default as DataTable } from './DataTable.vue'
+export { default as DataTableFacetedFilter } from './DataTableFacetedFilter.vue'
+export type { FacetOption } from './DataTableFacetedFilter.vue'
+export { default as DataTablePagination } from './DataTablePagination.vue'
+export { default as DataTableViewOptions } from './DataTableViewOptions.vue'
+export type { DataTableColumn, DataTableFeatures } from './features'
+export { dataTableFeatures } from './features'
+export {
+  createCustomAdapter,
+  createPageNumberAdapter,
+  createSkipTakeAdapter,
+} from './pagination-adapter'
+export { createSelectionColumn } from './selection-column'
+export type {
+  PageNumberParams,
+  PaginationAdapter,
+  SkipTakeParams,
+  TableQuery,
+} from './types'
+// Re-export type state của TanStack: app không được import thẳng
+// @tanstack/vue-table (nó không phải dependency của apps/admin).
+export type {
+  ColumnFiltersState,
+  PaginationState,
+  RowSelectionState,
+  SortingState,
+} from '@tanstack/vue-table'

package/src/components/data-table/pagination-adapter.ts

@@ -0,0 +1,67 @@
+import type {
+  PageNumberParams,
+  PaginationAdapter,
+  SkipTakeParams,
+  TableQuery,
+} from './types'
+
+function toFilterRecord(query: TableQuery): Record<string, unknown> | undefined {
+  if (query.filters.length === 0)
+    return undefined
+
+  return Object.fromEntries(query.filters.map(f => [f.id, f.value]))
+}
+
+/**
+ * Backend nhận `page` (1-based), `pageSize`, `sortBy`, `sortDir`.
+ *
+ *   const adapter = createPageNumberAdapter()
+ *   const params = adapter.toParams(query)
+ *   // { page: 1, pageSize: 20, sortBy: 'createdAt', sortDir: 'desc' }
+ */
+export function createPageNumberAdapter(): PaginationAdapter<PageNumberParams> {
+  return {
+    toParams(query) {
+      const primarySort = query.sorting[0]
+
+      return {
+        page: query.pageIndex + 1,
+        pageSize: query.pageSize,
+        sortBy: primarySort?.id,
+        sortDir: primarySort ? (primarySort.desc ? 'desc' : 'asc') : undefined,
+        filters: toFilterRecord(query),
+      }
+    },
+  }
+}
+
+/**
+ * Backend nhận `skip` / `take` và chuỗi `orderBy` kiểu OData ("name desc").
+ */
+export function createSkipTakeAdapter(): PaginationAdapter<SkipTakeParams> {
+  return {
+    toParams(query) {
+      const orderBy = query.sorting
+        .map(sort => `${sort.id} ${sort.desc ? 'desc' : 'asc'}`)
+        .join(', ')
+
+      return {
+        skip: query.pageIndex * query.pageSize,
+        take: query.pageSize,
+        orderBy: orderBy.length > 0 ? orderBy : undefined,
+        filters: toFilterRecord(query),
+      }
+    },
+  }
+}
+
+/**
+ * Khi backend có quy ước riêng: tự viết hàm map, vẫn giữ được kiểu.
+ *
+ *   const adapter = createCustomAdapter(q => ({ offset: q.pageIndex * q.pageSize }))
+ */
+export function createCustomAdapter<TParams>(
+  toParams: (query: TableQuery) => TParams,
+): PaginationAdapter<TParams> {
+  return { toParams }
+}

package/src/components/data-table/selection-column.ts

@@ -0,0 +1,48 @@
+import type { RowData } from '@tanstack/vue-table'
+import type { DataTableColumn } from './features'
+import { h } from 'vue'
+import { translate } from '../../composables/useI18n'
+import Checkbox from '../checkbox/Checkbox.vue'
+
+/**
+ * Cột checkbox chọn dòng. Đặt ở đầu mảng columns:
+ *
+ *   const columns = [createSelectionColumn<User>(), ...]
+ *
+ * Cột này không sort / không ẩn được / không lọt vào menu "Cột".
+ *
+ * Nhãn đi qua `translate` chứ không `useI18n`: đây là hàm thường, không phải
+ * component, nên không gọi được composable có `onMounted`. Vẫn reactive vì hai
+ * hàm render bên dưới chạy trong effect render của bảng.
+ */
+export function createSelectionColumn<TData extends RowData>(): DataTableColumn<TData> {
+  return {
+    id: '__select',
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+    header: ({ table }) =>
+      h(Checkbox, {
+        'modelValue': table.getIsAllPageRowsSelected()
+          ? true
+          : table.getIsSomePageRowsSelected()
+            ? 'indeterminate'
+            : false,
+        'aria-label': translate('ui.table.selectAll'),
+        'onUpdate:modelValue': (value: boolean | 'indeterminate') => {
+          table.toggleAllPageRowsSelected(value === true)
+        },
+      }),
+    cell: ({ row }) =>
+      h(Checkbox, {
+        'modelValue': row.getIsSelected(),
+        'disabled': !row.getCanSelect(),
+        'aria-label': translate('ui.table.selectRow'),
+        'onUpdate:modelValue': (value: boolean | 'indeterminate') => {
+          row.toggleSelected(value === true)
+        },
+        // Chọn dòng không được kéo theo sự kiện click của cả hàng.
+        'onClick': (event: Event) => event.stopPropagation(),
+      }),
+  }
+}

package/src/components/data-table/types.ts

@@ -0,0 +1,36 @@
+import type { ColumnFiltersState, SortingState } from '@tanstack/vue-table'
+
+/**
+ * Trạng thái truy vấn mà DataTable phát ra. Cố tình trung lập với backend:
+ * DataTable không biết .NET dùng page/pageSize hay skip/take.
+ * Việc dịch sang tham số thật do adapter lo (xem pagination-adapter.ts).
+ */
+export interface TableQuery {
+  /** 0-based, dùng nguyên bản của TanStack */
+  pageIndex: number
+  pageSize: number
+  sorting: SortingState
+  filters: ColumnFiltersState
+}
+
+/** Tham số kiểu page number — PagedList, X.PagedList... */
+export interface PageNumberParams {
+  page: number
+  pageSize: number
+  sortBy?: string
+  sortDir?: 'asc' | 'desc'
+  filters?: Record<string, unknown>
+}
+
+/** Tham số kiểu offset — OData, EF Core raw. */
+export interface SkipTakeParams {
+  skip: number
+  take: number
+  orderBy?: string
+  filters?: Record<string, unknown>
+}
+
+export interface PaginationAdapter<TParams> {
+  /** Biến TableQuery thành query string params gửi cho API. */
+  toParams: (query: TableQuery) => TParams
+}

package/src/components/data-view/DataView.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts" generic="TItem">
+import type { ClassProps } from '../../lib/types'
+import type { TableQuery } from '../data-table/types'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { LayoutGrid, List } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import Button from '../button/Button.vue'
+import Empty from '../empty/Empty.vue'
+import Pagination from '../pagination/Pagination.vue'
+import Spinner from '../spinner/Spinner.vue'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    items: TItem[]
+    /** Khoá duy nhất của một mục. Bắt buộc — `index` không sống sót qua sắp xếp. */
+    itemKey: (item: TItem, index: number) => string | number
+    /** Backend lo phân trang; khi đó `totalRecords` là bắt buộc. */
+    serverSide?: boolean
+    totalRecords?: number
+    pageSize?: number
+    paginate?: boolean
+    loading?: boolean
+    emptyMessage?: string
+    /** Cho người dùng đổi giữa danh sách và lưới. */
+    switchable?: boolean
+    /** Lớp lưới khi ở chế độ `grid`. Số cột là chuyện của trang, không phải của đây. */
+    gridClass?: string
+  }>(),
+  {
+    serverSide: false,
+    pageSize: 12,
+    paginate: true,
+    loading: false,
+    switchable: true,
+    gridClass: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+  },
+)
+
+const emit = defineEmits<{ 'page-change': [query: TableQuery] }>()
+
+const layout = defineModel<'list' | 'grid'>('layout', { default: 'list' })
+
+const { t } = useI18n()
+
+const pageIndex = ref(0)
+
+const total = computed(() =>
+  props.serverSide ? props.totalRecords ?? 0 : props.items.length,
+)
+
+/**
+ * Chế độ server-side thì KHÔNG tự cắt mảng.
+ *
+ * Cắt tiếp một trang mà backend đã cắt sẵn là hiện ra một trang của một trang —
+ * lỗi im lặng vì nó chỉ lộ ra khi tổng số vượt quá `pageSize`.
+ */
+const visible = computed(() => {
+  if (props.serverSide || !props.paginate)
+    return props.items
+  const start = pageIndex.value * props.pageSize
+  return props.items.slice(start, start + props.pageSize)
+})
+
+/** Cùng hình dạng `TableQuery` mà DataTable phát ra, nên dùng chung adapter. */
+function query(): TableQuery {
+  return { pageIndex: pageIndex.value, pageSize: props.pageSize, sorting: [], filters: [] }
+}
+
+watch(pageIndex, () => emit('page-change', query()))
+
+// Lọc lại ở tầng trên làm số trang co lại; đứng ở trang 7 của một danh sách còn
+// 2 trang thì màn hình trống trơn mà không có gì nói vì sao.
+watch(total, (value) => {
+  const last = Math.max(0, Math.ceil(value / props.pageSize) - 1)
+  if (pageIndex.value > last)
+    pageIndex.value = last
+})
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-4', props.class)">
+    <div v-if="props.switchable || $slots.toolbar" class="flex items-center justify-between gap-3">
+      <slot name="toolbar" />
+      <div v-if="props.switchable" class="ml-auto flex items-center gap-1">
+        <Button
+          v-for="mode in (['list', 'grid'] as const)"
+          :key="mode"
+          type="button"
+          :variant="layout === mode ? 'secondary' : 'ghost'"
+          size="icon-sm"
+          :aria-pressed="layout === mode"
+          :aria-label="t(`ui.dataView.${mode}`)"
+          @click="layout = mode"
+        >
+          <List v-if="mode === 'list'" aria-hidden="true" />
+          <LayoutGrid v-else aria-hidden="true" />
+        </Button>
+      </div>
+    </div>
+
+    <div v-if="props.loading" class="flex items-center justify-center py-10">
+      <Spinner class="text-muted-foreground" />
+    </div>
+
+    <slot v-else-if="visible.length === 0" name="empty">
+      <Empty :title="props.emptyMessage ?? t('ui.table.empty')" />
+    </slot>
+
+    <!--
+      `role="list"` khai TƯỜNG MINH, dù đây đã là một `<ul>`.
+
+      Preflight của Tailwind đặt `list-style: none`, và Safari bỏ ngữ nghĩa danh
+      sách của một `<ul>` không có dấu đầu dòng — nên số mục không còn được đọc
+      ra. Khai lại role là cách chữa đã biết, và nó chẳng tốn gì ở nơi khác.
+    -->
+    <ul
+      v-else
+      role="list"
+      :class="cn(layout === 'grid' ? cn('grid gap-4', props.gridClass) : 'flex flex-col gap-3')"
+    >
+      <li v-for="(item, index) in visible" :key="props.itemKey(item, index)">
+        <slot name="item" :item="item" :index="index" :layout="layout" />
+      </li>
+    </ul>
+
+    <Pagination
+      v-if="props.paginate && total > props.pageSize"
+      v-model:page-index="pageIndex"
+      :total="total"
+      :page-size="props.pageSize"
+      show-summary
+      class="justify-between"
+    />
+  </div>
+</template>

package/src/components/data-view/index.ts

@@ -0,0 +1 @@
+export { default as DataView } from './DataView.vue'

package/src/components/date-picker/DatePicker.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import type { DateValue } from '@internationalized/date'
+import type { ClassProps } from '../../lib/types'
+import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import { computed, ref } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { invalidRingStatic } from '../../lib/focus'
+import { CalendarIcon } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { Button } from '../button'
+import { Calendar } from '../calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '../popover'
+
+/**
+ * Gốc của component là một provider KHÔNG vẽ ra DOM, nên thuộc tính rơi tự do
+ * không có chỗ đáp và biến mất hẳn. Đo được: đặt `id` lên component thì nó
+ * không xuất hiện ở bất kỳ đâu trong DOM, và `<Label for>` trỏ vào hư không.
+ *
+ * Chuyển tay xuống chính cái trigger.
+ */
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    placeholder?: string
+    locale?: string
+    /** Kiểu hiện ngày trên nút. `long` ra "31 tháng 8, 2026". */
+    dateStyle?: 'short' | 'medium' | 'long'
+    size?: 'sm' | 'default'
+    invalid?: boolean
+    disabled?: boolean
+    minValue?: DateValue
+    maxValue?: DateValue
+  }>(),
+  {
+    dateStyle: 'medium',
+    size: 'default',
+    invalid: false,
+    disabled: false,
+  },
+)
+
+const { t, tag } = useI18n()
+
+/**
+ * Cả hai mặc định phải đi qua i18n, không đặt được trong `withDefaults`.
+ *
+ * `locale` cũng vậy chứ không riêng `placeholder`: chốt cứng 'vi-VN' thì đổi
+ * sang tiếng Anh xong nút vẫn hiện "31 tháng 8, 2026". Prop vẫn thắng khi có —
+ * hai picker trên cùng một trang được phép khác locale.
+ */
+const placeholder = computed(() => props.placeholder ?? t('ui.datePicker.placeholder'))
+const locale = computed(() => props.locale ?? tag.value)
+
+const model = defineModel<DateValue | undefined>()
+
+const open = ref(false)
+
+/**
+ * `DateFormatter` tạo lại mỗi khi đổi locale hoặc kiểu hiện — không cache sẵn ở
+ * cấp module, vì locale là prop và có thể khác nhau giữa hai picker trên cùng
+ * một trang.
+ */
+const formatter = computed(() => new DateFormatter(locale.value, { dateStyle: props.dateStyle }))
+
+const label = computed(() =>
+  model.value ? formatter.value.format(model.value.toDate(getLocalTimeZone())) : placeholder.value,
+)
+
+/**
+ * Chọn xong thì đóng.
+ *
+ * Reka không tự đóng — nó không biết popover có tồn tại hay không. Để mở là
+ * người dùng phải tự bấm ra ngoài sau mỗi lần chọn, mà thao tác chọn ngày thì
+ * gần như luôn là thao tác cuối.
+ */
+function onUpdate(value: DateValue | undefined): void {
+  model.value = value
+  if (value)
+    open.value = false
+}
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <Button
+        v-bind="$attrs"
+        variant="outline"
+        :size="props.size === 'sm' ? 'sm' : 'lg'"
+        :disabled="props.disabled"
+        :aria-invalid="props.invalid || undefined"
+        :class="cn(
+          'w-full justify-start gap-2 font-normal',
+          // Nút mặc định canh giữa; ở đây là một ô nhập nên chữ phải bám trái.
+          !model && 'text-muted-foreground',
+          props.invalid && invalidRingStatic,
+          props.class,
+        )"
+      >
+        <CalendarIcon class="text-muted-foreground" />
+        {{ label }}
+      </Button>
+    </PopoverTrigger>
+
+    <PopoverContent class="w-auto p-0" align="start">
+      <Calendar
+        :model-value="model"
+        :locale="locale"
+        :min-value="props.minValue"
+        :max-value="props.maxValue"
+        class="p-3"
+        @update:model-value="onUpdate"
+      />
+    </PopoverContent>
+  </Popover>
+</template>