@vestow/vue 0.1.0

package/src/components/cascade-select/CascadeSelect.vue

@@ -0,0 +1,314 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { TreeNode } from '../tree'
+import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { focusRing, invalidRing } from '../../lib/focus'
+import { ChevronDown, ChevronRight } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { Popover, PopoverContent, PopoverTrigger } from '../popover'
+import { findPath, isBranch, pickerTriggerVariants } from './index'
+
+/**
+ * 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[]
+    placeholder?: string
+    disabled?: boolean
+    invalid?: boolean
+    size?: 'sm' | 'default'
+    /**
+     * Hiện cả đường đi trên nút chứ không chỉ mỗi lá.
+     *
+     * Bật sẵn, và đó là chỗ khác PrimeVue một cách có chủ ý: hai thành phố
+     * trùng tên ở hai tỉnh khác nhau thì riêng cái lá không nói được bạn đã
+     * chọn cái nào — mà phân biệt đúng chuyện đó là lý do người ta dùng cascade.
+     */
+    showPath?: boolean
+    /** Chiều cao tối đa của một cột trước khi nó cuộn. */
+    maxHeight?: string
+  }>(),
+  {
+    disabled: false,
+    invalid: false,
+    size: 'default',
+    showPath: true,
+    maxHeight: '260px',
+  },
+)
+
+const model = defineModel<TreeNode | undefined>()
+
+const { t } = useI18n()
+
+const open = ref(false)
+
+/** Chuỗi nhánh đang mở. Cột thứ k hiện con của `activePath[k - 1]`. */
+const activePath = ref<TreeNode[]>([])
+
+/** Nút đang giữ focus. Roving tabindex chạy quanh giá trị này. */
+const focusedId = ref<string>()
+
+const panel = ref<HTMLElement>()
+
+const placeholder = computed(() => props.placeholder ?? t('ui.cascadeSelect.placeholder'))
+
+const selectedPath = computed(() =>
+  model.value === undefined ? [] : findPath(props.items, model.value.id),
+)
+
+const label = computed(() => {
+  if (selectedPath.value.length === 0)
+    return placeholder.value
+  return props.showPath
+    ? selectedPath.value.map(node => node.label).join(' / ')
+    : selectedPath.value[selectedPath.value.length - 1].label
+})
+
+/**
+ * Các cột đang hiện: cột gốc, rồi con của từng nhánh đang mở.
+ *
+ * Nhánh không có con thì không sinh ra cột — `activePath` chỉ nhận nhánh, nhưng
+ * dữ liệu do bên ngoài đưa vào nên vẫn phải lọc.
+ */
+const columns = computed<{ parent?: TreeNode, nodes: TreeNode[] }[]>(() => {
+  const list: { parent?: TreeNode, nodes: TreeNode[] }[] = [{ nodes: props.items }]
+  for (const branch of activePath.value) {
+    if (branch.children !== undefined && branch.children.length > 0)
+      list.push({ parent: branch, nodes: branch.children })
+  }
+  return list
+})
+
+function columnOf(id: string): number {
+  return columns.value.findIndex(column => column.nodes.some(node => node.id === id))
+}
+
+function focusNode(id: string | undefined): void {
+  focusedId.value = id
+  if (id === undefined)
+    return
+  void nextTick(() => {
+    panel.value?.querySelector<HTMLElement>(`[data-node="${CSS.escape(id)}"]`)?.focus()
+  })
+}
+
+/** Mở một nhánh, cắt bỏ mọi cột sâu hơn nó. */
+function openBranch(node: TreeNode, column: number): void {
+  activePath.value = [...activePath.value.slice(0, column), node]
+}
+
+/**
+ * Mở nhánh khi rê chuột — nhưng nghe `pointermove`, KHÔNG nghe `pointerenter`.
+ *
+ * `pointerenter` bắn cả khi con trỏ đứng yên còn phần tử thì vừa xuất hiện dưới
+ * nó. Cột mới luôn vẽ ra ngay chỗ con trỏ vừa bấm, nên đi bằng bàn phím một
+ * nhịp `ArrowRight` lại mở ra HAI cột: một cột do mình mở, một cột do cái nhánh
+ * tình cờ nằm dưới con trỏ. Đo được đúng như vậy trước khi sửa.
+ *
+ * `pointermove` chỉ bắn khi con trỏ thật sự nhúc nhích.
+ */
+function hoverBranch(node: TreeNode, column: number): void {
+  if (!isBranch(node) || node.disabled === true)
+    return
+  // Không mở lại cái đang mở: `pointermove` bắn liên tục, mà mỗi lần gán là một
+  // mảng mới và cả bảng vẽ lại.
+  if (activePath.value[column] === node)
+    return
+  openBranch(node, column)
+}
+
+function choose(node: TreeNode, column: number): void {
+  if (node.disabled === true)
+    return
+
+  if (isBranch(node)) {
+    openBranch(node, column)
+    const first = node.children?.find(child => child.disabled !== true)
+    focusNode(first?.id)
+    return
+  }
+
+  model.value = node
+  open.value = false
+}
+
+function moveWithin(column: number, from: string, step: number): void {
+  const nodes = columns.value[column]?.nodes.filter(node => node.disabled !== true) ?? []
+  if (nodes.length === 0)
+    return
+  const at = nodes.findIndex(node => node.id === from)
+  // Chạy vòng: từ mục cuối bấm xuống thì về mục đầu, đúng như một menu.
+  const next = at < 0 ? 0 : (at + step + nodes.length) % nodes.length
+  focusNode(nodes[next].id)
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  const id = focusedId.value
+  if (id === undefined)
+    return
+  const column = columnOf(id)
+  if (column < 0)
+    return
+  const node = columns.value[column].nodes.find(item => item.id === id)
+  if (node === undefined)
+    return
+
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      moveWithin(column, id, 1)
+      break
+
+    case 'ArrowUp':
+      event.preventDefault()
+      moveWithin(column, id, -1)
+      break
+
+    case 'ArrowRight':
+      if (isBranch(node)) {
+        event.preventDefault()
+        choose(node, column)
+      }
+      break
+
+    case 'ArrowLeft':
+      // Lùi ra cột trước và đứng lại đúng cái nhánh đã mở cột này — không phải
+      // mục đầu cột. Người dùng vừa đi vào từ đó, trả họ về chỗ khác là mất dấu.
+      if (column > 0) {
+        event.preventDefault()
+        const parent = columns.value[column].parent
+        activePath.value = activePath.value.slice(0, column - 1)
+        focusNode(parent?.id)
+      }
+      break
+
+    case 'Home':
+    case 'End': {
+      event.preventDefault()
+      const nodes = columns.value[column].nodes.filter(item => item.disabled !== true)
+      if (nodes.length > 0)
+        focusNode(event.key === 'Home' ? nodes[0].id : nodes[nodes.length - 1].id)
+      break
+    }
+
+    case 'Enter':
+    case ' ':
+      event.preventDefault()
+      choose(node, column)
+      break
+  }
+}
+
+/**
+ * Mở bảng thì dựng lại đường đi theo giá trị đang chọn.
+ *
+ * Mở ra ở cột gốc trong khi ô đang hiện "Việt Nam / Hà Nội" thì người dùng phải
+ * đi lại từ đầu chỉ để xem mình đang ở đâu.
+ */
+watch(open, (isOpen) => {
+  if (!isOpen)
+    return
+  const path = selectedPath.value
+  activePath.value = path.slice(0, -1)
+  focusNode(path.length > 0
+    ? path[path.length - 1].id
+    : props.items.find(node => node.disabled !== true)?.id)
+})
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <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="selectedPath.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>
+
+    <!--
+      Bảng KHÔNG bám bề rộng của nút, khác `TreeSelect`: số cột đổi theo việc
+      người dùng đi sâu tới đâu, nên bề rộng phải do nội dung quyết định.
+    -->
+    <PopoverContent class="w-auto p-0" align="start">
+      <!--
+        `role="tree"` phải nằm ở một thẻ BÊN TRONG, không đặt lên `PopoverContent`.
+
+        reka hard-code `role: "dialog"` trong `PopoverContentImpl` và nó thắng
+        mọi thuộc tính truyền vào — thử đặt `role="tree"` lên đó thì `treeitem`
+        rơi thẳng vào một `dialog`, tức là nằm ngoài cây mà nó khai là thuộc về.
+        Không lỗi, không cảnh báo, chỉ là quan hệ cha con biến mất.
+
+        Vì vẫn còn một `dialog` bọc ngoài nên nút cũng khai `aria-haspopup="dialog"`
+        chứ không phải `"tree"`: DOM nói gì thì khai đúng thứ đó.
+      -->
+      <div
+        ref="panel"
+        role="tree"
+        :aria-label="placeholder"
+        class="flex items-stretch"
+        @keydown="onKeydown"
+      >
+        <div
+          v-for="(column, columnIndex) in columns"
+          :key="column.parent?.id ?? '__root'"
+          role="group"
+          :aria-label="column.parent?.label"
+          class="min-w-[168px] overflow-y-auto p-1 not-first:border-l not-first:border-border"
+          :style="{ maxHeight: props.maxHeight }"
+        >
+          <div
+            v-for="node in column.nodes"
+            :key="node.id"
+            role="treeitem"
+            :data-node="node.id"
+            :aria-level="columnIndex + 1"
+            :aria-expanded="isBranch(node) ? activePath.includes(node) : undefined"
+            :aria-selected="model?.id === node.id ? true : undefined"
+            :aria-disabled="node.disabled === true ? true : undefined"
+            :tabindex="focusedId === node.id ? 0 : -1"
+            :class="cn(
+              'flex h-8 cursor-default items-center justify-between gap-2 rounded-md px-2 text-sm outline-none transition-colors',
+              'focus-visible:ring-2 focus-visible:ring-ring',
+              node.disabled === true
+                ? 'pointer-events-none opacity-50'
+                : 'hover:bg-accent/50',
+              activePath.includes(node) && 'bg-accent/50',
+              model?.id === node.id && 'bg-accent text-accent-foreground',
+            )"
+            @click="choose(node, columnIndex)"
+            @focus="focusedId = node.id"
+            @pointermove="hoverBranch(node, columnIndex)"
+          >
+            <span class="truncate">{{ node.label }}</span>
+            <ChevronRight
+              v-if="isBranch(node)"
+              class="size-3.5 shrink-0 text-muted-foreground"
+              aria-hidden="true"
+            />
+          </div>
+        </div>
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>

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

@@ -0,0 +1,11 @@
+/**
+ * Dùng chung `TreeNode` với `Tree` và `TreeSelect`, và cả hai phép tra.
+ *
+ * Ba component này nhận cùng một hình dạng dữ liệu vì chúng đang nói về cùng
+ * một thứ — một cây. Nguồn nằm ở `src/variants/lib/tree` nên bản React
+ * đọc đúng file đó chứ không chép lại.
+ */
+export { pickerTriggerVariants } from '../../variants/components/picker-trigger'
+
+export { findPath, isBranch, type TreeNode } from '../../variants/lib/tree'
+export { default as CascadeSelect } from './CascadeSelect.vue'

package/src/components/chart/AreaChart.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts" generic="T extends Record<string, unknown>">
+import type { ClassProps } from '../../lib/types'
+import type { ChartBaseProps, ChartCurve } from './types'
+import { VisArea, VisAxis, VisXYContainer } from '@unovis/vue'
+import { computed, ref, useId } from 'vue'
+import { cn } from '../../lib/utils'
+import ChartContainer from './ChartContainer.vue'
+import ChartCrosshair from './ChartCrosshair.vue'
+import ChartLegend from './ChartLegend.vue'
+import { toCurveType, useChartSeries } from './useChartSeries'
+
+const props = withDefaults(defineProps<ClassProps & ChartBaseProps<T> & {
+  /** @default 'monotone' */
+  curve?: ChartCurve
+  /** Xếp chồng các chuỗi lên nhau. @default false */
+  stacked?: boolean
+  /** Chuẩn hoá mỗi cột về 100%. Chỉ có nghĩa khi `stacked`. @default false */
+  expand?: boolean
+  /** Tô nền vùng bằng gradient nhạt dần. @default true */
+  showGradient?: boolean
+  /**
+   * Độ đục của nền khi tô PHẲNG (`show-gradient="false"`). Không đụng tới gradient
+   * — gradient có hai chặng riêng, 0,8 xuống 0,1.
+   * @default 0.4
+   */
+  fillOpacity?: number
+  /** Vẽ đường viền trên mặt vùng. @default true */
+  showLine?: boolean
+  /** Bấm vào legend để ẩn/hiện chuỗi. @default false */
+  interactiveLegend?: boolean
+  /**
+   * Thời lượng animation vào trang, mili giây. Mặc định **0**: 68 biểu đồ cùng
+   * mount một lúc, animation từ 0 làm cả trang trông như cột bị nén dí xuống
+   * đáy trong ~0,7 giây đầu — đã đo, và đã khiến chính tôi lẫn người dùng tưởng
+   * là lỗi hình học. Đặt 400–600 nếu muốn hiệu ứng ở màn dashboard chỉ có vài
+   * biểu đồ.
+   * @default 0
+   */
+  duration?: number
+}>(), {
+  duration: 0,
+  curve: 'monotone',
+  stacked: false,
+  expand: false,
+  showGradient: true,
+  fillOpacity: 0.4,
+  showLine: true,
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: false,
+  showGridLine: true,
+  showCursor: true,
+  interactiveLegend: false,
+  margin: () => ({ top: 8, right: 8, bottom: 0, left: 0 }),
+})
+
+const uid = useId()
+const hidden = ref<string[]>([])
+
+const { categories, plotData, xTicks, isMounted, valueOf, baseOf } = useChartSeries(props, {
+  stacked: () => props.stacked,
+  expand: () => props.expand,
+})
+
+const curveType = computed(() => toCurveType(props.curve))
+
+function colorOf(key: string): string {
+  return `var(--color-${key})`
+}
+
+function labelOf(key: string): string {
+  return props.config[key]?.label ?? key
+}
+
+/**
+ * Chuỗi bị tắt thì làm mờ bằng chính MÀU, không dùng `stroke-opacity`:
+ * `_renderLines` của Unovis đặt cứng `stroke-opacity: 1` ở mỗi lần vẽ nên ghi
+ * đè thuộc tính đó sẽ bị xoá ngay lần render kế tiếp.
+ */
+function strokeOf(key: string): string {
+  return hidden.value.includes(key)
+    ? `color-mix(in oklab, var(--color-${key}) 12%, transparent)`
+    : `var(--color-${key})`
+}
+
+/** Vùng bị legend tắt vẫn vẽ nhưng mờ hẳn đi, giống cách shadcn làm. */
+function opacityOf(key: string): number {
+  return hidden.value.includes(key) ? 0.1 : 1
+}
+
+function gradientId(key: string): string {
+  return `${uid}-fill-${key}`
+}
+
+/** Nhãn trục hoành lấy từ chính dữ liệu gốc theo chỉ số. */
+function formatX(tick: number | Date, i: number, ticks: number[] | Date[]): string {
+  if (props.xFormatter)
+    return props.xFormatter(tick, i, ticks)
+  return String(props.data[Number(tick)]?.[props.index] ?? '')
+}
+
+function toggle(key: string): void {
+  hidden.value = hidden.value.includes(key)
+    ? hidden.value.filter(k => k !== key)
+    : [...hidden.value, key]
+}
+</script>
+
+<template>
+  <ChartContainer :config="props.config" :show-cursor="props.showCursor" :class="cn(props.class)">
+    <VisXYContainer
+      :data="plotData"
+      :margin="props.margin"
+      :duration="props.duration"
+      :style="{ height: isMounted ? '100%' : 'auto' }"
+    >
+      <!--
+        Gradient khai bằng SVG rời 0x0 rồi tham chiếu qua `url(#…)`.
+        `stop-color` nhận được `var(--color-<key>)`, nên gradient cũng đổi theo
+        bảng màu và theme y như phần còn lại — không phải resolve màu bằng JS.
+      -->
+      <svg width="0" height="0" aria-hidden="true" class="absolute">
+        <defs>
+          <linearGradient
+            v-for="key in categories"
+            :id="gradientId(key)"
+            :key="key"
+            x1="0"
+            y1="0"
+            x2="0"
+            y2="1"
+          >
+            <template v-if="props.showGradient">
+              <stop offset="5%" :stop-color="colorOf(key)" stop-opacity="0.8" />
+              <stop offset="95%" :stop-color="colorOf(key)" stop-opacity="0.1" />
+            </template>
+            <template v-else>
+              <stop offset="0%" :stop-color="colorOf(key)" :stop-opacity="props.fillOpacity" />
+            </template>
+          </linearGradient>
+        </defs>
+      </svg>
+
+      <VisArea
+        v-for="key in categories"
+        :key="key"
+        :x="(_d: Record<string, unknown>, i: number) => i"
+        :y="valueOf(key)"
+        :baseline="baseOf(key)"
+        :color="`url(#${gradientId(key)})`"
+        :curve-type="curveType"
+        :opacity="opacityOf(key)"
+        :line="props.showLine"
+        :line-color="strokeOf(key)"
+        :line-width="2"
+      />
+
+      <ChartCrosshair
+        v-if="props.showTooltip"
+        :index="props.index"
+        :categories="categories as Extract<keyof T, string>[]"
+        :hidden="hidden"
+        :color-of="colorOf"
+        :label-of="labelOf"
+        :value-formatter="props.valueFormatter"
+        :options="props.tooltip"
+        :default-index="props.defaultIndex"
+        :show-cursor="props.showCursor"
+      />
+
+      <VisAxis
+        v-if="props.showXAxis"
+        type="x"
+        :tick-values="xTicks"
+        :tick-format="formatX"
+        :grid-line="false"
+        :tick-line="false"
+        :domain-line="false"
+      />
+      <VisAxis
+        v-if="props.showYAxis"
+        type="y"
+        :tick-format="props.yFormatter"
+        :grid-line="props.showGridLine"
+        :tick-line="false"
+        :domain-line="false"
+      />
+
+      <slot />
+    </VisXYContainer>
+
+    <ChartLegend
+      v-if="props.showLegend"
+      :categories="categories"
+      :hidden="hidden"
+      :interactive="props.interactiveLegend"
+      @toggle="toggle"
+    />
+  </ChartContainer>
+</template>