@vestow/vue 0.1.0

package/src/components/order-list/OrderList.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts" generic="TItem">
+import type { ClassProps } from '../../lib/types'
+import { computed, ref } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { ChevronDown, ChevronsDown, ChevronsUp, ChevronUp } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { moveItem, moveSelectionByStep, moveSelectionToEdge } from '../../variants/lib/list-move'
+import Button from '../button/Button.vue'
+import SelectableList from './SelectableList.vue'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    itemKey: (item: TItem, index: number) => string | number
+    header?: string
+    disabled?: boolean
+    /** Bật kéo thả. Mấy cái nút vẫn ở đó — xem ghi chú trợ năng. */
+    dragging?: boolean
+    maxHeight?: string
+    emptyMessage?: string
+  }>(),
+  { disabled: false, dragging: true },
+)
+
+const items = defineModel<TItem[]>({ default: () => [] })
+const selection = defineModel<(string | number)[]>('selection', { default: () => [] })
+
+const { t } = useI18n()
+
+const keys = computed(() => items.value.map((item, index) => props.itemKey(item, index)))
+
+/** Thông báo lần dời gần nhất. Xem ghi chú trợ năng ở template. */
+const announcement = ref('')
+
+const selectedIndexes = computed(() => {
+  const set = new Set<number>()
+  items.value.forEach((item, index) => {
+    if (selection.value.includes(props.itemKey(item, index)))
+      set.add(index)
+  })
+  return set
+})
+
+const canMoveUp = computed(() =>
+  selectedIndexes.value.size > 0 && !selectedIndexes.value.has(0),
+)
+
+const canMoveDown = computed(() =>
+  selectedIndexes.value.size > 0 && !selectedIndexes.value.has(items.value.length - 1),
+)
+
+function apply(next: TItem[], indexes: Set<number>): void {
+  items.value = next
+  selection.value = [...indexes].map(index => props.itemKey(next[index], index))
+  announcement.value = t('ui.orderList.moved', { count: indexes.size })
+}
+
+function step(direction: -1 | 1): void {
+  const indexes = new Set(selectedIndexes.value)
+  apply(moveSelectionByStep(items.value, indexes, direction), indexes)
+}
+
+function edge(target: 'start' | 'end'): void {
+  const indexes = new Set(selectedIndexes.value)
+  apply(moveSelectionToEdge(items.value, indexes, target), indexes)
+}
+
+function onDrop(payload: { fromListId: string, fromIndex: number, toIndex: number }): void {
+  if (payload.fromListId !== 'order')
+    return
+  // Bỏ chính mục đang kéo ra khỏi phép đếm: thả xuống ngay dưới chỗ cũ của nó
+  // thì chỉ số đích đã bị dịch đi một.
+  const to = payload.toIndex > payload.fromIndex ? payload.toIndex - 1 : payload.toIndex
+  items.value = moveItem(items.value, payload.fromIndex, to)
+  announcement.value = t('ui.orderList.moved', { count: 1 })
+}
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-2', props.class)">
+    <p v-if="props.header || $slots.header" class="text-sm font-medium">
+      <slot name="header">
+        {{ props.header }}
+      </slot>
+    </p>
+
+    <div class="flex items-start gap-2">
+      <!--
+        Bốn cái nút KHÔNG phải phương án dự phòng cho việc kéo thả — chúng là
+        cơ chế chính, và kéo thả là phần thêm.
+
+        WCAG 2.5.7 đòi mọi thao tác kéo phải có một đường thay thế chỉ cần một
+        cú chạm. Dựng nút trước rồi thêm kéo sau thì thứ tự đó tự đúng; làm
+        ngược lại thì phần trợ năng luôn là thứ được ghép vào sau cùng.
+      -->
+      <div class="flex flex-col gap-1">
+        <Button
+          type="button"
+          variant="outline"
+          size="icon-sm"
+          :disabled="props.disabled || !canMoveUp"
+          :aria-label="t('ui.orderList.toTop')"
+          @click="edge('start')"
+        >
+          <ChevronsUp aria-hidden="true" />
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon-sm"
+          :disabled="props.disabled || !canMoveUp"
+          :aria-label="t('ui.orderList.up')"
+          @click="step(-1)"
+        >
+          <ChevronUp aria-hidden="true" />
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon-sm"
+          :disabled="props.disabled || !canMoveDown"
+          :aria-label="t('ui.orderList.down')"
+          @click="step(1)"
+        >
+          <ChevronDown aria-hidden="true" />
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon-sm"
+          :disabled="props.disabled || !canMoveDown"
+          :aria-label="t('ui.orderList.toBottom')"
+          @click="edge('end')"
+        >
+          <ChevronsDown aria-hidden="true" />
+        </Button>
+      </div>
+
+      <SelectableList
+        v-model:selection="selection"
+        :items="items"
+        :keys="keys"
+        list-id="order"
+        :label="props.header ?? t('ui.orderList.label')"
+        :disabled="props.disabled"
+        :dragging="props.dragging"
+        :max-height="props.maxHeight"
+        :empty-message="props.emptyMessage ?? t('ui.table.empty')"
+        class="flex-1"
+        @move="onDrop"
+      >
+        <template #item="slotProps">
+          <slot name="item" v-bind="slotProps" />
+        </template>
+      </SelectableList>
+    </div>
+
+    <!--
+      Dời một dòng là một thay đổi KHÔNG nhìn thấy được nếu bạn không nhìn.
+
+      Focus không đi đâu cả, chữ trên nút không đổi, và thứ tự mới thì phải đọc
+      lại cả danh sách mới biết. Một vùng live nói "đã dời 2 mục" là chỗ duy
+      nhất phản hồi đó tồn tại.
+    -->
+    <p class="sr-only" role="status" aria-live="polite">
+      {{ announcement }}
+    </p>
+  </div>
+</template>

package/src/components/order-list/SelectableList.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts" generic="TItem">
+import type { ClassProps } from '../../lib/types'
+import { ref } from 'vue'
+import { cn } from '../../lib/utils'
+
+/**
+ * Danh sách chọn được nhiều mục, kéo thả được — phần chung của `OrderList` và
+ * `PickList`. KHÔNG export ra ngoài package: nó là bộ phận, không phải sản phẩm.
+ *
+ * PickList đúng nghĩa là hai cái này cộng mấy nút chuyển, nên nó nằm ở thư mục
+ * của `OrderList` — chỗ nó sinh ra — thay vì được nhân bản ở cả hai nơi.
+ */
+const props = withDefaults(
+  defineProps<ClassProps & {
+    items: TItem[]
+    /**
+     * Khoá của từng mục, tính SẴN bởi bên gọi.
+     *
+     * Không nhận `itemKey` là một hàm: tham số hàm contravariant, nên một
+     * `(item: TItem) => …` không gán được vào một prop khai `(item: unknown) => …`,
+     * và suy luận generic của Vue rơi về `unknown` khi component này nằm trong
+     * một component generic khác. Cùng cái bẫy đã ghi cho `FormField`.
+     *
+     * Mà con cũng đâu cần biết khoá được tính thế nào — nó chỉ cần khoá.
+     */
+    keys: (string | number)[]
+    /** Phân biệt danh sách nguồn với danh sách đích lúc thả. */
+    listId: string
+    /**
+     * Tên trợ năng. Đặt tên là `label` chứ KHÔNG phải `ariaLabel`.
+     *
+     * `:aria-label="…"` trong template không camel-hoá thành prop `ariaLabel`:
+     * Vue coi đó là một thuộc tính HTML thật và để nguyên, nên prop vẫn thiếu.
+     * Cùng họ với cái bẫy `VisCrosshair` đã ghi ở mục Chart.
+     */
+    label: string
+    disabled?: boolean
+    dragging?: boolean
+    maxHeight?: string
+    emptyMessage?: string
+  }>(),
+  { disabled: false, dragging: true, maxHeight: '220px' },
+)
+
+const emit = defineEmits<{
+  move: [payload: { fromListId: string, fromIndex: number, toIndex: number }]
+}>()
+
+/** Khoá của các mục đang chọn. Dùng khoá chứ không dùng chỉ số: chỉ số đổi sau mỗi lần dời. */
+const selection = defineModel<(string | number)[]>('selection', { default: () => [] })
+
+const activeIndex = ref(0)
+/** Vị trí mà mục đang kéo sẽ rơi vào. `undefined` là không kéo gì. */
+const dropIndex = ref<number>()
+
+function isSelected(index: number): boolean {
+  return selection.value.includes(props.keys[index])
+}
+
+function toggle(index: number, additive: boolean): void {
+  if (props.disabled)
+    return
+  const key = props.keys[index]
+  if (!additive) {
+    selection.value = isSelected(index) && selection.value.length === 1 ? [] : [key]
+    return
+  }
+  selection.value = isSelected(index)
+    ? selection.value.filter(existing => existing !== key)
+    : [...selection.value, key]
+}
+
+function focusOption(container: HTMLElement, index: number): void {
+  activeIndex.value = index
+  container.querySelector<HTMLElement>(`[data-option="${index}"]`)?.focus()
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  const container = event.currentTarget as HTMLElement
+  const last = props.items.length - 1
+  if (last < 0)
+    return
+
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      focusOption(container, Math.min(activeIndex.value + 1, last))
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      focusOption(container, Math.max(activeIndex.value - 1, 0))
+      break
+    case 'Home':
+      event.preventDefault()
+      focusOption(container, 0)
+      break
+    case 'End':
+      event.preventDefault()
+      focusOption(container, last)
+      break
+    case ' ':
+      event.preventDefault()
+      toggle(activeIndex.value, true)
+      break
+  }
+}
+
+const DRAG_TYPE = 'application/x-woodblock-list'
+
+function onDragStart(event: DragEvent, index: number): void {
+  if (event.dataTransfer === null)
+    return
+  event.dataTransfer.effectAllowed = 'move'
+  event.dataTransfer.setData(DRAG_TYPE, JSON.stringify({ listId: props.listId, index }))
+  // Firefox không bắt đầu kéo nếu không có dữ liệu kiểu text/plain.
+  event.dataTransfer.setData('text/plain', String(props.keys[index]))
+}
+
+/**
+ * `preventDefault()` trong `dragover` là BẮT BUỘC.
+ *
+ * Mặc định mọi phần tử đều từ chối nhận thả, và cách nói "tôi nhận" là huỷ sự
+ * kiện này. Thiếu nó thì `drop` không bao giờ bắn — con trỏ hiện dấu cấm, mà
+ * không có lỗi nào cả. Đây là cái bẫy số một của kéo thả gốc.
+ */
+function onDragOver(event: DragEvent, index: number): void {
+  event.preventDefault()
+  if (event.dataTransfer !== null)
+    event.dataTransfer.dropEffect = 'move'
+
+  // Nửa dưới của một mục nghĩa là thả xuống SAU nó.
+  const box = (event.currentTarget as HTMLElement).getBoundingClientRect()
+  dropIndex.value = event.clientY - box.top > box.height / 2 ? index + 1 : index
+}
+
+function onDrop(event: DragEvent): void {
+  event.preventDefault()
+  const raw = event.dataTransfer?.getData(DRAG_TYPE)
+  const to = dropIndex.value
+  dropIndex.value = undefined
+  if (raw === undefined || raw === '' || to === undefined)
+    return
+
+  const payload = JSON.parse(raw) as { listId: string, index: number }
+  emit('move', { fromListId: payload.listId, fromIndex: payload.index, toIndex: to })
+}
+</script>
+
+<template>
+  <!--
+    `listbox` với `aria-multiselectable`: các mục là LỰA CHỌN, không phải nút.
+    Trạng thái chọn nằm ở `aria-selected` nên nó được đọc ra, thay vì chỉ là một
+    mảng màu nổi mà người không nhìn thấy phải tự đoán.
+  -->
+  <div
+    role="listbox"
+    aria-multiselectable="true"
+    :aria-label="props.label"
+    :aria-disabled="props.disabled || undefined"
+    :style="{ maxHeight: props.maxHeight }"
+    :class="cn(
+      'overflow-y-auto rounded-md border border-border bg-background p-1',
+      props.disabled && 'pointer-events-none opacity-50',
+      props.class,
+    )"
+    @keydown="onKeydown"
+    @dragover.prevent
+    @drop="onDrop"
+  >
+    <p v-if="props.items.length === 0" class="px-2 py-6 text-center text-sm text-muted-foreground">
+      {{ props.emptyMessage }}
+    </p>
+
+    <div
+      v-for="(item, index) in props.items"
+      :key="props.keys[index]"
+      role="option"
+      :data-option="index"
+      :aria-selected="isSelected(index)"
+      :tabindex="index === activeIndex ? 0 : -1"
+      :draggable="props.dragging && !props.disabled"
+      :class="cn(
+        'flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors',
+        'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',
+        isSelected(index) ? 'bg-accent text-accent-foreground' : 'hover:bg-accent/50',
+        // Vạch chỉ chỗ thả — vẽ bằng viền của chính mục, không chèn thêm thẻ,
+        // để danh sách không nhảy một dòng mỗi lần con trỏ đi qua.
+        dropIndex === index && 'border-t-2 border-t-primary',
+        dropIndex === index + 1 && 'border-b-2 border-b-primary',
+      )"
+      @click="toggle(index, $event.ctrlKey || $event.metaKey)"
+      @focus="activeIndex = index"
+      @dragstart="onDragStart($event, index)"
+      @dragover="onDragOver($event, index)"
+      @dragend="dropIndex = undefined"
+    >
+      <slot name="item" :item="item" :index="index" :selected="isSelected(index)" />
+    </div>
+  </div>
+</template>

package/src/components/order-list/index.ts

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

package/src/components/pagination/Pagination.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { ButtonVariants } from '../button'
+import {
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationLast,
+  PaginationList,
+  PaginationListItem,
+  PaginationNext,
+  PaginationPrev,
+  PaginationRoot,
+} from 'reka-ui'
+import { computed } from 'vue'
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, MoreHorizontal } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { buttonVariants } from '../button'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    /** Tổng số bản ghi, không phải số trang. */
+    total?: number
+    pageSize?: number
+    /** Số nút trang hiện mỗi bên trang hiện tại. */
+    siblingCount?: number
+    /** Thêm nút về đầu và về cuối. */
+    showEdges?: boolean
+    /** Dòng "1–20 of 137" ở bên trái. */
+    showSummary?: boolean
+    size?: Extract<ButtonVariants['size'], 'sm' | 'default' | 'lg'>
+    disabled?: boolean
+  }>(),
+  {
+    total: 0,
+    pageSize: 20,
+    siblingCount: 1,
+    showEdges: false,
+    showSummary: false,
+    size: 'default',
+    disabled: false,
+  },
+)
+
+/**
+ * Chỉ số trang tính từ **0**, khớp `TableQuery` của DataTable.
+ *
+ * Reka đánh số trang từ 1. Nếu để nguyên thì mọi chỗ nối Pagination với
+ * DataTable đều phải tự cộng trừ 1 — đúng chỗ sinh ra lỗi lệch một đơn vị. Quy
+ * đổi gói gọn ở đây, đúng một lần.
+ */
+const pageIndex = defineModel<number>('pageIndex', { default: 0 })
+
+const page = computed({
+  get: () => pageIndex.value + 1,
+  set: (value: number) => { pageIndex.value = value - 1 },
+})
+
+/** Nút số trang là nút vuông; nút trước/sau cùng cỡ để hàng không gợn. */
+const ICON_SIZE = { sm: 'icon-sm', default: 'icon', lg: 'icon-lg' } as const
+const iconSize = computed(() => ICON_SIZE[props.size])
+
+const from = computed(() => (props.total === 0 ? 0 : pageIndex.value * props.pageSize + 1))
+const to = computed(() => Math.min((pageIndex.value + 1) * props.pageSize, props.total))
+</script>
+
+<template>
+  <PaginationRoot
+    v-model:page="page"
+    :total="props.total"
+    :items-per-page="props.pageSize"
+    :sibling-count="props.siblingCount"
+    :show-edges="props.showEdges"
+    :disabled="props.disabled"
+    :class="cn('flex w-full flex-wrap items-center justify-between gap-3', props.class)"
+  >
+    <p v-if="props.showSummary" class="text-sm text-muted-foreground">
+      <template v-if="props.total > 0">
+        {{ from }}–{{ to }} of {{ props.total }}
+      </template>
+      <template v-else>
+        No results
+      </template>
+    </p>
+
+    <!--
+      `flex-wrap` ở đây chứ không chỉ ở gốc: bật `showEdges` là thêm hai nút,
+      hàng nút vượt 390px và tràn ra ngoài khung ở màn 375px.
+    -->
+    <PaginationList v-slot="{ items }" class="flex flex-wrap items-center justify-center gap-1">
+      <PaginationFirst v-if="props.showEdges" :class="buttonVariants({ variant: 'outline', size: iconSize })">
+        <ChevronsLeft />
+      </PaginationFirst>
+      <PaginationPrev :class="buttonVariants({ variant: 'outline', size: iconSize })">
+        <ChevronLeft />
+      </PaginationPrev>
+
+      <template v-for="(item, index) in items">
+        <!--
+          Trang hiện tại dùng nút ĐẶC, không phải outline: đây là thông tin "bạn
+          đang ở đâu", nó phải đọc ra trước các nút xung quanh chứ không chỉ là
+          một nút được chọn.
+        -->
+        <PaginationListItem
+          v-if="item.type === 'page'"
+          :key="`page-${item.value}`"
+          :value="item.value"
+          :class="buttonVariants({
+            variant: item.value === page ? 'default' : 'outline',
+            size: iconSize,
+          })"
+        >
+          {{ item.value }}
+        </PaginationListItem>
+
+        <!-- Dấu ba chấm KHÔNG bấm được, nên không tô như nút. -->
+        <PaginationEllipsis
+          v-else
+          :key="`ellipsis-${index}`"
+          class="grid size-8 place-items-center text-muted-foreground"
+        >
+          <MoreHorizontal class="size-4" />
+        </PaginationEllipsis>
+      </template>
+
+      <PaginationNext :class="buttonVariants({ variant: 'outline', size: iconSize })">
+        <ChevronRight />
+      </PaginationNext>
+      <PaginationLast v-if="props.showEdges" :class="buttonVariants({ variant: 'outline', size: iconSize })">
+        <ChevronsRight />
+      </PaginationLast>
+    </PaginationList>
+  </PaginationRoot>
+</template>

package/src/components/pagination/index.ts

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

package/src/components/panel/Panel.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'reka-ui'
+import { ChevronDown } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    title?: string
+    /** Cho gập lại. Không bật thì tiêu đề không phải là nút. */
+    collapsible?: boolean
+    defaultOpen?: boolean
+  }>(),
+  { collapsible: false, defaultOpen: true },
+)
+
+const open = defineModel<boolean>('open')
+</script>
+
+<template>
+  <!--
+    Không gập được thì render `<section>` thường, KHÔNG bọc Collapsible.
+    Collapsible luôn dựng một `<button>` cho tiêu đề; tiêu đề bấm vào không làm
+    gì là thứ người dùng bàn phím sẽ tab vào rồi mắc kẹt.
+  -->
+  <CollapsibleRoot
+    v-if="props.collapsible"
+    v-model:open="open"
+    :default-open="props.defaultOpen"
+    :class="cn('overflow-hidden rounded-xl border border-border bg-card', props.class)"
+  >
+    <CollapsibleTrigger
+      class="group/panel flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition-colors hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+    >
+      <span class="text-sm font-medium">
+        <slot name="title">{{ props.title }}</slot>
+      </span>
+      <span class="flex items-center gap-2">
+        <slot name="actions" />
+        <ChevronDown
+          class="size-4 shrink-0 text-muted-foreground transition-transform duration-(--duration-base) group-data-[state=open]/panel:rotate-180 motion-reduce:transition-none"
+          aria-hidden="true"
+        />
+      </span>
+    </CollapsibleTrigger>
+    <CollapsibleContent class="overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up">
+      <div class="border-t border-border px-4 py-3 text-sm">
+        <slot />
+      </div>
+    </CollapsibleContent>
+  </CollapsibleRoot>
+
+  <section v-else :class="cn('overflow-hidden rounded-xl border border-border bg-card', props.class)">
+    <header
+      v-if="props.title || $slots.title || $slots.actions"
+      class="flex items-center justify-between gap-3 px-4 py-3"
+    >
+      <h3 class="text-sm font-medium">
+        <slot name="title">
+          {{ props.title }}
+        </slot>
+      </h3>
+      <slot name="actions" />
+    </header>
+    <div :class="cn('px-4 py-3 text-sm', (props.title || $slots.title) && 'border-t border-border')">
+      <slot />
+    </div>
+  </section>
+</template>

package/src/components/panel/index.ts

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