@vestow/vue 0.1.0

package/src/components/tree/Tree.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { TreeNode } from './index'
+import { TreeRoot } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    items: TreeNode[]
+    multiple?: boolean
+    /**
+     * Chọn một nút cha thì chọn luôn toàn bộ con.
+     *
+     * Đúng cho cây phân quyền ("cấp quyền cả nhánh"), sai cho cây thư mục
+     * ("mở thư mục" khác "chọn mọi file trong đó"). Nên mặc định tắt.
+     */
+    propagateSelect?: boolean
+  }>(),
+  { multiple: false, propagateSelect: false },
+)
+
+const model = defineModel<TreeNode | TreeNode[] | undefined>()
+const expanded = defineModel<string[]>('expanded', { default: () => [] })
+
+function getKey(item: TreeNode): string {
+  return item.id
+}
+
+function getChildren(item: TreeNode): TreeNode[] | undefined {
+  return item.children
+}
+</script>
+
+<template>
+  <TreeRoot
+    v-slot="{ flattenItems }"
+    v-model="model"
+    v-model:expanded="expanded"
+    :items="props.items"
+    :multiple="props.multiple"
+    :propagate-select="props.propagateSelect"
+    :get-key="getKey"
+    :get-children="getChildren"
+    :class="cn('flex w-full select-none flex-col gap-0.5', props.class)"
+  >
+    <!--
+      Reka trả về danh sách đã **làm phẳng**: mỗi nút đang thấy là một dòng, kèm
+      `level` để thụt lề. Nhờ vậy điều hướng bàn phím chạy trên một danh sách
+      tuyến tính thay vì phải đệ quy qua các component lồng nhau.
+    -->
+    <slot :items="flattenItems" />
+  </TreeRoot>
+</template>

package/src/components/tree/TreeItem.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { TreeItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import type { TreeNode } from './index'
+import { TreeItem } from 'reka-ui'
+import { computed } from 'vue'
+import { ChevronRight } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<TreeItemProps<TreeNode> & ClassProps & {
+  /** Nút này có con hay không — quyết định có vẽ mũi tên. */
+  hasChildren?: boolean
+}>()
+
+const delegated = computed(() => {
+  const { class: _class, hasChildren: _hasChildren, ...rest } = props
+  return rest
+})
+
+/**
+ * Thụt lề bằng padding tính ra px, không dùng thang `pl-*` của Tailwind.
+ *
+ * Cây sâu tuỳ ý; khai sẵn một class cho mỗi cấp là không khả thi, mà
+ * `pl-[calc(...)]` với biến thì Tailwind không sinh ra được vì nó cần biết giá
+ * trị lúc build.
+ */
+const indent = computed(() => ({ paddingLeft: `${(props.level - 1) * 18 + 8}px` }))
+</script>
+
+<template>
+  <TreeItem
+    v-slot="{ isExpanded, isSelected }"
+    v-bind="delegated"
+    :style="indent"
+    :class="cn(
+      'flex h-8 items-center gap-1.5 rounded-md pr-2 text-sm outline-none transition-colors',
+      'focus-visible:ring-2 focus-visible:ring-ring',
+      'hover:bg-accent/50',
+      'data-[selected]:bg-accent data-[selected]:text-accent-foreground',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <!--
+      Lá vẫn chừa đúng chỗ của mũi tên, chỉ để trống. Bỏ hẳn thì nhãn của lá
+      thụt sang trái so với nhãn của nhánh cùng cấp và cột chữ gãy.
+    -->
+    <span class="grid size-4 shrink-0 place-items-center text-muted-foreground">
+      <ChevronRight
+        v-if="props.hasChildren"
+        class="size-3.5 transition-transform duration-(--duration-fast) motion-reduce:transition-none"
+        :class="isExpanded && 'rotate-90'"
+        aria-hidden="true"
+      />
+    </span>
+
+    <slot :is-expanded="isExpanded" :is-selected="isSelected" />
+  </TreeItem>
+</template>

package/src/components/tree/index.ts

@@ -0,0 +1,21 @@
+/**
+ * Khuôn dữ liệu và hai phép tra nằm ở `src/variants/lib/tree`, KHÔNG khai
+ * ở đây.
+ *
+ * Cùng lý do `lib/mask` chuyển lên đó: bản React nhận đúng hình dạng nút này,
+ * và một `TreeNode` khai hai lần là hai lần để chúng trôi khỏi nhau. Re-export
+ * để 20 chỗ đang `import type { TreeNode } from '../tree'` không phải sửa.
+ */
+export {
+  branchIds,
+  branchNodes,
+  findNode,
+  findPath,
+  flattenTree,
+  isBranch,
+  type TreeNode,
+  type TreeRow,
+} from '../../variants/lib/tree'
+export { default as Tree } from './Tree.vue'
+
+export { default as TreeItem } from './TreeItem.vue'

package/src/components/tree-select/TreeSelect.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { TreeNode } from '../tree'
+import { computed, ref } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { focusRing, invalidRing } from '../../lib/focus'
+import { ChevronDown } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { pickerTriggerVariants } from '../../variants/components/picker-trigger'
+import { Popover, PopoverContent, PopoverTrigger } from '../popover'
+import { Tree, TreeItem } from '../tree'
+
+/**
+ * Gốc của component là `Popover`, mà `PopoverRoot` không vẽ ra DOM nào — nên
+ * thuộc tính rơi tự do KHÔNG có chỗ đáp và biến mất lặng lẽ. `id` là cái mất
+ * đau nhất: `<Label for>` trỏ vào một id không tồn tại thì nhãn vẫn hiện ra
+ * bình thường và chẳng làm gì cả.
+ *
+ * Chuyển tay xuống chính cái nút, cùng cách `Input.vue` làm.
+ */
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    items: TreeNode[]
+    multiple?: boolean
+    placeholder?: string
+    disabled?: boolean
+    invalid?: boolean
+    size?: 'sm' | 'default'
+    /** Chọn nút cha thì chọn luôn cả nhánh. Chuyển thẳng xuống `Tree`. */
+    propagateSelect?: boolean
+    /** Chiều cao tối đa của bảng trước khi nó cuộn. */
+    maxHeight?: string
+  }>(),
+  {
+    multiple: false,
+    disabled: false,
+    invalid: false,
+    size: 'default',
+    propagateSelect: false,
+    maxHeight: '260px',
+  },
+)
+
+const model = defineModel<TreeNode | TreeNode[] | undefined>()
+const expanded = defineModel<string[]>('expanded', { default: () => [] })
+
+const { t } = useI18n()
+
+const open = ref(false)
+
+const placeholder = computed(() => props.placeholder ?? t('ui.treeSelect.placeholder'))
+
+const selected = computed<TreeNode[]>(() => {
+  if (model.value === undefined)
+    return []
+  return Array.isArray(model.value) ? model.value : [model.value]
+})
+
+const label = computed(() =>
+  selected.value.length === 0
+    ? placeholder.value
+    : selected.value.map(node => node.label).join(', '),
+)
+
+/**
+ * Chế độ một lựa chọn thì chọn xong là đóng; chế độ nhiều thì KHÔNG.
+ *
+ * Đóng sau mỗi lần tick trong chế độ nhiều nghĩa là mỗi mục phải mở lại bảng
+ * một lần — và người ta bật chế độ nhiều chính vì sắp chọn nhiều thứ.
+ */
+function onUpdate(value: TreeNode | TreeNode[] | undefined): void {
+  model.value = value
+  if (!props.multiple && value !== undefined)
+    open.value = false
+}
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <!--
+        Nút mang `role="combobox"`, đúng khuôn "combobox chỉ để chọn" của APG.
+
+        `aria-haspopup` để nguyên `dialog` chứ KHÔNG đổi thành `tree`: reka
+        hard-code `role="dialog"` cho `PopoverContentImpl` và không thuộc tính
+        nào đè được, nên cái cây thật sự nằm TRONG một dialog. Khai `tree` ở nút
+        là tự mâu thuẫn với chính DOM của mình.
+      -->
+      <button
+        v-bind="$attrs"
+        type="button"
+        role="combobox"
+        aria-haspopup="dialog"
+        :aria-expanded="open"
+        :disabled="props.disabled"
+        :aria-invalid="props.invalid || undefined"
+        :data-invalid="props.invalid || undefined"
+        :data-placeholder="selected.length === 0 ? '' : undefined"
+        :class="cn(pickerTriggerVariants({ size: props.size }), focusRing, invalidRing, props.class)"
+      >
+        <span class="truncate text-left">{{ label }}</span>
+        <ChevronDown class="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+      </button>
+    </PopoverTrigger>
+
+    <!--
+      `w-(--reka-popover-trigger-width)` bám đúng bề rộng của nút, giống cách
+      Select làm: một bảng rộng hơn hay hẹp hơn ô của nó đọc ra như đang thuộc
+      về thứ khác.
+    -->
+    <PopoverContent
+      class="w-(--reka-popover-trigger-width) p-1"
+      align="start"
+      :style="{ maxHeight: props.maxHeight }"
+    >
+      <div class="overflow-y-auto" :style="{ maxHeight: `calc(${props.maxHeight} - 0.5rem)` }">
+        <Tree
+          v-slot="{ items: rows }"
+          v-model:expanded="expanded"
+          :model-value="model"
+          :items="props.items"
+          :multiple="props.multiple"
+          :propagate-select="props.propagateSelect"
+          @update:model-value="onUpdate"
+        >
+          <TreeItem
+            v-for="row in rows"
+            :key="row._id"
+            v-bind="row.bind"
+            :disabled="row.value.disabled"
+            :has-children="!!row.value.children?.length"
+          >
+            {{ row.value.label }}
+          </TreeItem>
+        </Tree>
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>

package/src/components/tree-select/index.ts

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

package/src/components/tree-table/TreeTable.vue

@@ -0,0 +1,302 @@
+<script setup lang="ts" generic="TData extends RowData">
+import type { ExpandedState, RowData, Updater } from '@tanstack/vue-table'
+import type { ClassProps } from '../../lib/types'
+import type { DataTableColumnMeta } from '../data-table/features'
+import type { TreeTableColumn } from './features'
+import { FlexRender, useTable } from '@tanstack/vue-table'
+import { computed, ref, toRef } from 'vue'
+import { ChevronRight } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import Table from '../table/Table.vue'
+import TableBody from '../table/TableBody.vue'
+import TableCell from '../table/TableCell.vue'
+import TableEmpty from '../table/TableEmpty.vue'
+import TableHead from '../table/TableHead.vue'
+import TableHeader from '../table/TableHeader.vue'
+import TableRow from '../table/TableRow.vue'
+import { treeTableFeatures } from './features'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    columns: TreeTableColumn<TData>[]
+    data: TData[]
+    /**
+     * Lấy nút con. Mặc định đọc trường `children`.
+     *
+     * Khai riêng thay vì ép dữ liệu phải có đúng tên đó — cây từ API hay gọi nó
+     * là `items`, `nodes`, `subRows`, và đổi tên cả một cây chỉ để hợp một
+     * component là cái giá không đáng.
+     */
+    getSubRows?: (row: TData) => TData[] | undefined
+    getRowId?: (row: TData, index: number) => string
+    /** Cột mang mũi tên và phần thụt lề. Mặc định là cột đầu tiên. */
+    expandColumn?: string
+    loading?: boolean
+    emptyMessage?: string
+    stickyHeader?: boolean
+    maxHeight?: string
+  }>(),
+  { loading: false, stickyHeader: true },
+)
+
+const expanded = defineModel<ExpandedState>('expanded', { default: () => ({}) })
+
+function defaultSubRows(row: TData): TData[] | undefined {
+  const children = (row as { children?: unknown }).children
+  return Array.isArray(children) ? (children as TData[]) : undefined
+}
+
+const tableState = computed(() => ({ expanded: expanded.value }))
+
+function onExpandedChange(updater: Updater<ExpandedState>): void {
+  expanded.value = typeof updater === 'function'
+    ? (updater as (old: ExpandedState) => ExpandedState)(expanded.value)
+    : updater
+}
+
+const table = useTable({
+  features: treeTableFeatures,
+  columns: toRef(props, 'columns'),
+  data: toRef(props, 'data'),
+  state: tableState,
+  getRowId: props.getRowId,
+  getSubRows: props.getSubRows ?? defaultSubRows,
+  onExpandedChange,
+})
+
+/** Dòng đang THẤY được, đã làm phẳng theo trạng thái mở. */
+const rows = computed(() => table.getRowModel().rows)
+
+const expanderId = computed(() =>
+  props.expandColumn ?? table.getAllLeafColumns()[0]?.id,
+)
+
+/**
+ * Chỉ ép bề rộng cho cột MÀ NGƯỜI VIẾT khai `size`.
+ *
+ * Không đọc `column.columnDef.size`: `columnSizingFeature` nhét sẵn `size: 150`
+ * vào mọi cột, nên đọc từ đó thì cột nào cũng cứng và không còn cột nào co giãn.
+ * Cùng cái bẫy đã ghi cho DataTable.
+ */
+const declared = computed(() => {
+  const widths = new Map<string, number>()
+  const aligns = new Map<string, NonNullable<DataTableColumnMeta['align']>>()
+
+  for (const column of props.columns) {
+    const id = column.id ?? ('accessorKey' in column ? String(column.accessorKey) : undefined)
+    if (id === undefined)
+      continue
+    if (typeof column.size === 'number')
+      widths.set(id, column.size)
+    if (column.meta?.align !== undefined)
+      aligns.set(id, column.meta.align)
+  }
+
+  return { widths, aligns }
+})
+
+function widthStyle(columnId: string): { width: string } | undefined {
+  const width = declared.value.widths.get(columnId)
+  return width === undefined ? undefined : { width: `${width}px` }
+}
+
+/** Cột số căn phải VÀ tabular figures — xem chú thích ở `DataTableColumnMeta`. */
+function alignClass(columnId: string): string | undefined {
+  const align = declared.value.aligns.get(columnId)
+  if (align === 'number')
+    return 'text-right tabular-nums'
+  if (align === 'right')
+    return 'text-right'
+  if (align === 'center')
+    return 'text-center'
+  return undefined
+}
+
+/**
+ * Roving tabindex chạy trên DÒNG, không chạy trên ô.
+ *
+ * APG cho phép cả hai với `treegrid`; ở đây chọn dòng vì thứ người dùng đang
+ * duyệt là một cây, còn các cột chỉ là thuộc tính của nút. Điều hướng tới từng
+ * ô sẽ là một lời hứa khác hẳn — và nếu khai `treegrid` rồi chỉ làm một nửa thì
+ * lời hứa đó là lời hứa sai.
+ */
+const focusedId = ref<string>()
+
+const activeId = computed(() => {
+  const list = rows.value
+  if (list.length === 0)
+    return undefined
+  return list.some(row => row.id === focusedId.value) ? focusedId.value : list[0].id
+})
+
+/**
+ * Vùng chứa lấy từ CHÍNH sự kiện, không lấy từ một template ref.
+ *
+ * `ref` đặt trên `<TableBody>` trả về instance component chứ không phải
+ * element, nên `querySelector` trên đó ném lỗi — mà `vue-tsc` không bắt được
+ * vì ref được khai kiểu `HTMLElement`. Còn `currentTarget` của `keydown` thì
+ * đúng là cái `<tbody>` thật.
+ */
+function focusRow(container: HTMLElement, id: string | undefined): void {
+  if (id === undefined)
+    return
+  focusedId.value = id
+  container.querySelector<HTMLElement>(`[data-row="${CSS.escape(id)}"]`)?.focus()
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  const container = event.currentTarget as HTMLElement
+  const list = rows.value
+  const at = list.findIndex(row => row.id === activeId.value)
+  if (at < 0)
+    return
+  const row = list[at]
+
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      focusRow(container, list[Math.min(at + 1, list.length - 1)]?.id)
+      break
+
+    case 'ArrowUp':
+      event.preventDefault()
+      focusRow(container, list[Math.max(at - 1, 0)]?.id)
+      break
+
+    case 'ArrowRight':
+      event.preventDefault()
+      // Đóng thì mở ra; đã mở rồi thì đi vào con đầu tiên. Hai nhịp cho hai
+      // việc khác nhau, đúng như cây thư mục.
+      if (row.getCanExpand() && !row.getIsExpanded())
+        row.toggleExpanded(true)
+      else if (row.getIsExpanded())
+        focusRow(container, list[at + 1]?.id)
+      break
+
+    case 'ArrowLeft':
+      event.preventDefault()
+      if (row.getIsExpanded()) {
+        row.toggleExpanded(false)
+      }
+      else {
+        // Lên nút cha: dòng gần nhất phía trên có độ sâu nhỏ hơn.
+        for (let i = at - 1; i >= 0; i -= 1) {
+          if (list[i].depth < row.depth) {
+            focusRow(container, list[i].id)
+            break
+          }
+        }
+      }
+      break
+
+    case 'Home':
+      event.preventDefault()
+      focusRow(container, list[0]?.id)
+      break
+
+    case 'End':
+      event.preventDefault()
+      focusRow(container, list[list.length - 1]?.id)
+      break
+
+    case 'Enter':
+    case ' ':
+      if (row.getCanExpand()) {
+        event.preventDefault()
+        row.toggleExpanded()
+      }
+      break
+  }
+}
+</script>
+
+<template>
+  <!--
+    `role="treegrid"` đặt lên chính `<table>`.
+
+    Không phải đặt thêm role cho `<tr>` và `<td>`: HTML-AAM nói `<td>` ánh xạ
+    thành `gridcell` khi bảng tổ tiên là `grid` hoặc `treegrid`, và thành `cell`
+    khi là `table`. Đổi đúng một thuộc tính ở gốc là cả bảng đổi theo.
+  -->
+  <Table
+    role="treegrid"
+    :aria-busy="props.loading || undefined"
+    :class="cn(props.class)"
+    :container-class="props.maxHeight ? 'overflow-auto' : undefined"
+    :style="props.maxHeight ? { maxHeight: props.maxHeight } : undefined"
+  >
+    <TableHeader>
+      <TableRow v-for="group in table.getHeaderGroups()" :key="group.id">
+        <TableHead
+          v-for="header in group.headers"
+          :key="header.id"
+          :style="widthStyle(header.column.id)"
+          :class="cn(props.stickyHeader && 'sticky top-0 z-(--z-raised) bg-background', alignClass(header.column.id))"
+        >
+          <FlexRender
+            v-if="!header.isPlaceholder"
+            :render="header.column.columnDef.header"
+            :props="header.getContext()"
+          />
+        </TableHead>
+      </TableRow>
+    </TableHeader>
+
+    <TableBody @keydown="onKeydown">
+      <!-- `TableEmpty` không có slot: nội dung con bị bỏ im lặng, phải đi qua prop `message`. -->
+      <TableEmpty v-if="rows.length === 0" :colspan="props.columns.length" :message="props.emptyMessage" />
+
+      <TableRow
+        v-for="row in rows"
+        v-else
+        :key="row.id"
+        :data-row="row.id"
+        :aria-level="row.depth + 1"
+        :aria-expanded="row.getCanExpand() ? row.getIsExpanded() : undefined"
+        :tabindex="row.id === activeId ? 0 : -1"
+        class="outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+        @focus="focusedId = row.id"
+      >
+        <TableCell
+          v-for="cell in row.getAllCells()"
+          :key="cell.id"
+          :class="alignClass(cell.column.id)"
+        >
+          <div
+            v-if="cell.column.id === expanderId"
+            class="flex items-center gap-1"
+            :style="{ paddingLeft: `${row.depth * 18}px` }"
+          >
+            <!--
+              Mũi tên là `tabindex="-1"`: chuỗi Tab đi qua DÒNG, không qua từng
+              nút gập. Một cây trăm nút mà mỗi nút là một điểm dừng Tab thì bàn
+              phím không đi qua nổi.
+            -->
+            <button
+              v-if="row.getCanExpand()"
+              type="button"
+              tabindex="-1"
+              aria-hidden="true"
+              class="grid size-4 shrink-0 place-items-center rounded text-muted-foreground hover:text-foreground"
+              @click.stop="row.toggleExpanded()"
+            >
+              <ChevronRight
+                class="size-3.5 transition-transform duration-(--duration-fast) motion-reduce:transition-none"
+                :class="row.getIsExpanded() && 'rotate-90'"
+              />
+            </button>
+            <span v-else class="size-4 shrink-0" />
+
+            <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+          </div>
+
+          <FlexRender
+            v-else
+            :render="cell.column.columnDef.cell"
+            :props="cell.getContext()"
+          />
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</template>

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

@@ -0,0 +1,49 @@
+import type { CellData, ColumnDef, RowData } from '@tanstack/vue-table'
+import type { DataTableColumnMeta } from '../data-table/features'
+import {
+  columnSizingFeature,
+  createExpandedRowModel,
+  createSortedRowModel,
+  rowExpandingFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_basic,
+  sortFn_datetime,
+  sortFn_text,
+  tableFeatures,
+} from '@tanstack/vue-table'
+
+/**
+ * Bộ feature riêng của TreeTable — KHÔNG dùng lại bộ của DataTable.
+ *
+ * v9 không bật sẵn feature nào, và bộ của DataTable cố tình không đăng ký
+ * expanding để bundle của nó khỏi kéo theo. Ngược lại ở đây không có phân trang:
+ * cắt một cái cây theo trang thì một nút cha nằm cuối trang 1 còn con nó ở đầu
+ * trang 2, và cái thụt lề bên trái thành ra vô nghĩa.
+ *
+ * `columnMeta` dùng chung `DataTableColumnMeta` — cùng một chuyện căn chữ, khai
+ * hai lần là hai chỗ để chúng trôi khỏi nhau.
+ */
+export const treeTableFeatures = tableFeatures({
+  columnSizingFeature,
+  rowExpandingFeature,
+  expandedRowModel: createExpandedRowModel(),
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+    datetime: sortFn_datetime,
+    basic: sortFn_basic,
+  },
+  rowSelectionFeature,
+
+  columnMeta: {} as DataTableColumnMeta,
+})
+
+export type TreeTableFeatures = typeof treeTableFeatures
+
+/** Column def đã gắn sẵn feature set — dùng ở app thay cho `ColumnDef` thô. */
+export type TreeTableColumn<TData extends RowData, TValue extends CellData = CellData>
+  = ColumnDef<TreeTableFeatures, TData, TValue>

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

@@ -0,0 +1,3 @@
+export type { TreeTableColumn, TreeTableFeatures } from './features'
+export { treeTableFeatures } from './features'
+export { default as TreeTable } from './TreeTable.vue'