@vestow/vue 0.1.0

package/src/variants/lib/form-errors.ts

@@ -0,0 +1,59 @@
+/**
+ * Một field của TanStack Form giữ lỗi trong `meta.errorMap`, khoá theo **nguyên
+ * nhân** chứ không phải một chuỗi duy nhất:
+ *
+ *   { onChange: …, onBlur: …, onSubmit: …, onMount: … }
+ *
+ * Mỗi giá trị có thể là chuỗi (lỗi tự đặt), một issue, hoặc **mảng issue** —
+ * đây là chỗ dễ hụt: validator ở cấp form gom issue theo path rồi gán cả
+ * `[issue, …]` cho từng field (`prefixSchemaToErrors` trong form-core), nên
+ * một field hỏng vì hai luật sẽ nhận mảng hai phần tử. Đọc thẳng `.message`
+ * của mảng ra `undefined` và lỗi biến mất **âm thầm** — không cảnh báo, không
+ * throw, chỉ là form không bao giờ báo sai.
+ *
+ * Nằm ở `src/variants` vì `form-core` là chung cho cả hai adapter, nên cả
+ * hai cây gặp đúng hình dạng errorMap này. Viết hai lần là hai cơ hội để một
+ * bên quên nhánh mảng.
+ */
+export type FieldErrorMap = Record<string, unknown>
+
+/**
+ * Không có `onServer` trong danh sách: lỗi từ server đi đường riêng chứ không
+ * ghi vào errorMap. Lý do ở `Form` của mỗi cây.
+ */
+const CAUSE_ORDER = ['onChange', 'onBlur', 'onSubmit', 'onDynamic', 'onMount'] as const
+
+function toMessage(error: unknown): string | undefined {
+  if (typeof error === 'string')
+    return error === '' ? undefined : error
+
+  if (Array.isArray(error)) {
+    for (const item of error) {
+      const message = toMessage(item)
+      if (message !== undefined)
+        return message
+    }
+    return undefined
+  }
+
+  if (error !== null && typeof error === 'object' && 'message' in error) {
+    const { message } = error as { message: unknown }
+    return typeof message === 'string' ? message : undefined
+  }
+
+  return undefined
+}
+
+/** Quy errorMap về đúng MỘT chuỗi để hiển thị — chỗ báo lỗi chỉ vẽ một dòng. */
+export function firstErrorMessage(errorMap: FieldErrorMap | undefined): string | undefined {
+  if (errorMap === undefined)
+    return undefined
+
+  for (const cause of CAUSE_ORDER) {
+    const message = toMessage(errorMap[cause])
+    if (message !== undefined)
+      return message
+  }
+
+  return undefined
+}

package/src/variants/lib/highlight.ts

@@ -0,0 +1,548 @@
+/**
+ * Tô màu cú pháp cho các đoạn code trong trang tài liệu.
+ *
+ * Tự viết thay vì thêm Shiki hay Prism: trang docs chỉ hiển thị chính các ví
+ * dụ do repo này viết ra — một tập nhỏ, biết trước — nên không cần bộ
+ * highlight đầy đủ nặng cả megabyte. Đổi lại nó *không* phải parser thật:
+ * chỉ nhận đúng những cấu trúc dùng trong ví dụ (template Vue và vài dòng
+ * import/khai báo TypeScript). Gặp cú pháp lạ thì phần đó rơi về `text`,
+ * mất màu chứ không vỡ.
+ *
+ * Muốn tô đúng một file bất kỳ do người dùng dán vào thì phải đổi sang Shiki.
+ */
+
+export type TokenKind
+  = | 'text'
+    | 'comment'
+    | 'tag'
+    | 'component'
+    | 'attr'
+    | 'string'
+    | 'keyword'
+    | 'function'
+    | 'number'
+    | 'punctuation'
+
+export interface Token {
+  kind: TokenKind
+  value: string
+}
+
+export type Language = 'vue' | 'ts' | 'tsx'
+
+const KEYWORDS = new Set([
+  'as',
+  'async',
+  'await',
+  'break',
+  'case',
+  'catch',
+  'class',
+  'const',
+  'continue',
+  'default',
+  'delete',
+  'else',
+  'export',
+  'extends',
+  'finally',
+  'for',
+  'from',
+  'function',
+  'if',
+  'import',
+  'in',
+  'interface',
+  'let',
+  'new',
+  'of',
+  'return',
+  'satisfies',
+  'switch',
+  'throw',
+  'try',
+  'type',
+  'typeof',
+  'var',
+  'while',
+])
+
+const LITERALS = new Set(['true', 'false', 'null', 'undefined'])
+
+/** Gộp token liền kề cùng loại để bớt số thẻ span phải render. */
+function push(tokens: Token[], kind: TokenKind, value: string): void {
+  if (value === '')
+    return
+
+  const last = tokens[tokens.length - 1]
+  if (last?.kind === kind)
+    last.value += value
+  else
+    tokens.push({ kind, value })
+}
+
+/** Một dòng TypeScript: chú thích, chuỗi, từ khoá, số, tên hàm. */
+const TS_PATTERN = /(?<comment>\/\/[^\n]*|\/\*[\s\S]*?\*\/)|(?<string>'[^']*'|"[^"]*"|`[^`]*`)|(?<number>\b\d+(?:\.\d+)?\b)|(?<word>[A-Z_$][\w$]*)|(?<punctuation>[{}()[\].,;:=<>!?+\-*/&|]+)/gi
+
+function tokenizeScript(code: string, tokens: Token[]): void {
+  let index = 0
+
+  for (const match of code.matchAll(TS_PATTERN)) {
+    push(tokens, 'text', code.slice(index, match.index))
+    index = match.index + match[0].length
+
+    const groups = match.groups ?? {}
+
+    if (groups.comment !== undefined)
+      push(tokens, 'comment', groups.comment)
+    else if (groups.string !== undefined)
+      push(tokens, 'string', groups.string)
+    else if (groups.number !== undefined)
+      push(tokens, 'number', groups.number)
+    else if (groups.punctuation !== undefined)
+      push(tokens, 'punctuation', groups.punctuation)
+    else if (groups.word !== undefined)
+      push(tokens, wordKind(groups.word, code, index), groups.word)
+  }
+
+  push(tokens, 'text', code.slice(index))
+}
+
+function wordKind(word: string, code: string, after: number): TokenKind {
+  if (KEYWORDS.has(word))
+    return 'keyword'
+
+  if (LITERALS.has(word))
+    return 'number'
+
+  // Theo sau là dấu `(` thì coi là lời gọi hàm.
+  return code[after] === '(' ? 'function' : 'text'
+}
+
+/** Nội dung bên trong một cặp ngoặc nhọn: tên thẻ, thuộc tính, giá trị. */
+// Thân thẻ liệt kê tường minh chuỗi-trong-nháy và ký tự thường, không dùng
+// [sS]*? — kiểu lười đó chồng lấn với tên thẻ nên regex backtrack rất tệ.
+const TAG_PATTERN = /(?<open><\/?)(?<name>[a-z][\w.-]*)(?![\w.-])(?<body>(?:"[^"]*"|'[^']*'|[^>"'])*)(?<close>>)/gi
+
+const ATTR_PATTERN = /(?<name>[\w:@.[\]-]+)|(?<equals>=)|(?<value>"[^"]*"|'[^']*')/g
+
+function tokenizeTagBody(body: string, tokens: Token[]): void {
+  let index = 0
+
+  for (const match of body.matchAll(ATTR_PATTERN)) {
+    push(tokens, 'text', body.slice(index, match.index))
+    index = match.index + match[0].length
+
+    const groups = match.groups ?? {}
+
+    if (groups.name !== undefined)
+      push(tokens, 'attr', groups.name)
+    else if (groups.equals !== undefined)
+      push(tokens, 'keyword', groups.equals)
+    else if (groups.value !== undefined)
+      push(tokens, 'string', groups.value)
+  }
+
+  push(tokens, 'text', body.slice(index))
+}
+
+/** Thẻ viết hoa là component, viết thường là thẻ HTML — hai màu khác nhau. */
+function tagKind(name: string): TokenKind {
+  return /^[A-Z]/.test(name) ? 'component' : 'tag'
+}
+
+const COMMENT_PATTERN = /<!--[\s\S]*?-->/g
+
+function tokenizeMarkup(code: string, tokens: Token[]): void {
+  let index = 0
+
+  for (const match of code.matchAll(TAG_PATTERN)) {
+    const before = code.slice(index, match.index)
+    tokenizeMarkupText(before, tokens)
+    index = match.index + match[0].length
+
+    const groups = match.groups ?? {}
+
+    // Dấu `<` `>` `</` để màu chữ thường, chỉ tên thẻ mới đổi màu — GitHub và
+    // shadcn đều tô như vậy.
+    push(tokens, 'punctuation', groups.open ?? '')
+    push(tokens, tagKind(groups.name ?? ''), groups.name ?? '')
+    tokenizeTagBody(groups.body ?? '', tokens)
+    push(tokens, 'punctuation', groups.close ?? '')
+  }
+
+  tokenizeMarkupText(code.slice(index), tokens)
+}
+
+/** Phần nằm ngoài thẻ: chỉ cần tách chú thích HTML ra khỏi chữ thường. */
+function tokenizeMarkupText(text: string, tokens: Token[]): void {
+  let index = 0
+
+  for (const match of text.matchAll(COMMENT_PATTERN)) {
+    push(tokens, 'text', text.slice(index, match.index))
+    push(tokens, 'comment', match[0])
+    index = match.index + match[0].length
+  }
+
+  push(tokens, 'text', text.slice(index))
+}
+
+/** Tách khối <script> ra khỏi phần template của một SFC. */
+const SCRIPT_PATTERN = /(<script\b[^>]*>)([\s\S]*?)(<\/script>)/g
+
+function tokenizeSfc(code: string, tokens: Token[]): void {
+  let index = 0
+
+  for (const match of code.matchAll(SCRIPT_PATTERN)) {
+    tokenizeMarkup(code.slice(index, match.index), tokens)
+    index = match.index + match[0].length
+
+    tokenizeMarkup(match[1], tokens)
+    tokenizeScript(match[2], tokens)
+    tokenizeMarkup(match[3], tokens)
+  }
+
+  tokenizeMarkup(code.slice(index), tokens)
+}
+
+export function highlight(code: string, language: Language = 'vue'): Token[] {
+  const tokens: Token[] = []
+
+  if (language === 'tsx')
+    tokenizeTsx(code, tokens)
+  else if (language === 'ts')
+    tokenizeScript(code, tokens)
+  else
+    tokenizeSfc(code, tokens)
+
+  return tokens
+}
+
+/**
+ * Tô màu cả khối rồi mới cắt theo dòng.
+ *
+ * Đừng gọi `highlight()` cho từng dòng một: `<script>` và `</script>` nằm ở hai
+ * dòng khác nhau nên regex tách khối script không bao giờ khớp, và toàn bộ phần
+ * TypeScript rơi về `text` — mất màu sạch. Chú thích nhiều dòng cũng vậy.
+ */
+export function highlightLines(code: string, language: Language = 'vue'): Token[][] {
+  const lines: Token[][] = [[]]
+
+  for (const token of highlight(code.replace(/\n+$/, ''), language)) {
+    const parts = token.value.split('\n')
+
+    parts.forEach((part, index) => {
+      if (index > 0)
+        lines.push([])
+
+      if (part !== '')
+        lines[lines.length - 1].push({ kind: token.kind, value: part })
+    })
+  }
+
+  return lines
+}
+
+/* ------------------------------------------------------------------------- *
+ * TSX
+ * ------------------------------------------------------------------------- */
+
+/**
+ * JSX KHÔNG tách được bằng cách cắt khối như SFC.
+ *
+ * `tokenizeSfc` chạy được vì `<script>` và `<template>` là hai vùng rời nhau,
+ * cắt một lần là xong. Trong `.tsx` thì JSX lồng vào giữa biểu thức — một `<`
+ * có thể là thẻ, là toán tử nhỏ hơn, hay là tham số generic — nên phải quét
+ * tuần tự và đổi chế độ tại chỗ.
+ *
+ * Vẫn theo đúng tinh thần của cả file: không phải parser thật, chỉ nhận những
+ * cấu trúc mà ví dụ trong repo dùng, gặp cú pháp lạ thì rơi về `text` chứ
+ * không vỡ.
+ */
+
+/** Ký tự đứng ngay trước `<` cho phép nó mở một thẻ JSX. */
+const JSX_OPENERS = new Set(['(', '{', '}', '=', ',', '&', '|', '?', ':', ';', '>', '['])
+
+/** Từ khoá đứng trước `<` cũng mở được — `return <div/>`. */
+const JSX_OPENER_WORDS = /(?:return|=>|\?\?|&&|\|\|)\s*$/
+
+/**
+ * `<` này có phải mở đầu một thẻ JSX không.
+ *
+ * Hai điều kiện, và cần cả hai. Sau `<` phải là chữ cái, `_`, `$` (tên thẻ)
+ * hoặc `>` (fragment). Trước `<` phải là chỗ mà một BIỂU THỨC được phép bắt
+ * đầu — nếu không thì `a < b` và `Array<string>` đều bị đọc thành thẻ.
+ */
+function opensJsx(code: string, at: number): boolean {
+  const next = code[at + 1]
+  if (next === undefined || !/[A-Z_$>]/i.test(next))
+    return false
+
+  const before = code.slice(0, at)
+  const trimmed = before.trimEnd()
+  if (trimmed === '')
+    return true
+
+  const last = trimmed[trimmed.length - 1]!
+  return JSX_OPENERS.has(last) || JSX_OPENER_WORDS.test(trimmed)
+}
+
+/**
+ * Bỏ qua chuỗi và chú thích khi đi tìm `<`.
+ *
+ * Không có bước này thì một `<` nằm trong `'a < b'` hay trong chú thích cũng mở
+ * ra một thẻ, và phần còn lại của file bị đọc nhầm hết.
+ */
+function findJsxStart(code: string, from: number): number {
+  let i = from
+
+  while (i < code.length) {
+    const ch = code[i]!
+
+    if (ch === '/' && code[i + 1] === '/') {
+      const end = code.indexOf('\n', i)
+      i = end === -1 ? code.length : end
+      continue
+    }
+
+    if (ch === '/' && code[i + 1] === '*') {
+      const end = code.indexOf('*/', i + 2)
+      i = end === -1 ? code.length : end + 2
+      continue
+    }
+
+    if (ch === '\'' || ch === '"' || ch === '`') {
+      i = skipString(code, i)
+      continue
+    }
+
+    if (ch === '<' && opensJsx(code, i))
+      return i
+
+    i += 1
+  }
+
+  return -1
+}
+
+/** Trả về chỉ số NGAY SAU dấu đóng của chuỗi bắt đầu tại `start`. */
+function skipString(code: string, start: number): number {
+  const quote = code[start]!
+  let i = start + 1
+
+  while (i < code.length) {
+    if (code[i] === '\\') {
+      i += 2
+      continue
+    }
+    if (code[i] === quote)
+      return i + 1
+    i += 1
+  }
+
+  return code.length
+}
+
+/**
+ * Quét thân thẻ mở, có ĐẾM NGOẶC NHỌN.
+ *
+ * `TAG_PATTERN` của phần markup không dùng lại được ở đây: nó coi `>` đầu tiên
+ * là hết thẻ, mà JSX thì `onClick={() => x}` có một `>` nằm giữa thân. Thẻ bị
+ * cắt sớm và phần còn lại của file lệch hết.
+ *
+ * Trả về chỉ số của `>` đóng thẻ.
+ */
+function findTagEnd(code: string, from: number): number {
+  let i = from
+  let braces = 0
+
+  while (i < code.length) {
+    const ch = code[i]!
+
+    if (ch === '\'' || ch === '"' || ch === '`') {
+      i = skipString(code, i)
+      continue
+    }
+    if (ch === '{') {
+      braces += 1
+      i += 1
+      continue
+    }
+    if (ch === '}') {
+      braces -= 1
+      i += 1
+      continue
+    }
+    if (ch === '>' && braces === 0)
+      return i
+
+    i += 1
+  }
+
+  return code.length
+}
+
+const JSX_NAME = /^<\/?([A-Z_$][\w$.]*)?/i
+
+/** Thuộc tính JSX: tên, `=`, rồi chuỗi hoặc một biểu thức trong ngoặc nhọn. */
+function tokenizeJsxAttrs(body: string, tokens: Token[]): void {
+  let i = 0
+
+  while (i < body.length) {
+    const ch = body[i]!
+
+    if (/\s/.test(ch)) {
+      const start = i
+      while (i < body.length && /\s/.test(body[i]!))
+        i += 1
+      push(tokens, 'text', body.slice(start, i))
+      continue
+    }
+
+    if (ch === '=') {
+      push(tokens, 'keyword', '=')
+      i += 1
+      continue
+    }
+
+    if (ch === '\'' || ch === '"') {
+      const end = skipString(body, i)
+      push(tokens, 'string', body.slice(i, end))
+      i = end
+      continue
+    }
+
+    // `{...}`: ngoặc là dấu câu, ruột quay lại chế độ script.
+    if (ch === '{') {
+      const end = findMatchingBrace(body, i)
+      push(tokens, 'punctuation', '{')
+      tokenizeTsx(body.slice(i + 1, end), tokens)
+      if (end < body.length)
+        push(tokens, 'punctuation', '}')
+      i = end + 1
+      continue
+    }
+
+    const name = /^[\w:.$-]+/.exec(body.slice(i))
+    if (name !== null) {
+      push(tokens, 'attr', name[0])
+      i += name[0].length
+      continue
+    }
+
+    push(tokens, 'text', ch)
+    i += 1
+  }
+}
+
+/** Chỉ số của `}` khớp với `{` tại `start`; `code.length` nếu không có. */
+function findMatchingBrace(code: string, start: number): number {
+  let depth = 0
+  let i = start
+
+  while (i < code.length) {
+    const ch = code[i]!
+
+    if (ch === '\'' || ch === '"' || ch === '`') {
+      i = skipString(code, i)
+      continue
+    }
+    if (ch === '{') {
+      depth += 1
+    }
+    else if (ch === '}') {
+      depth -= 1
+      if (depth === 0)
+        return i
+    }
+    i += 1
+  }
+
+  return code.length
+}
+
+/**
+ * Một phần tử JSX, từ `<` mở tới hết thẻ đóng. Trả về chỉ số ngay sau nó.
+ *
+ * Đệ quy cho phần tử lồng nhau; `{...}` trong nội dung quay lại chế độ script,
+ * nên `{items.map(x => <Row key={x} />)}` được tô đúng ở cả ba tầng.
+ */
+function tokenizeJsxElement(code: string, start: number, tokens: Token[]): number {
+  const tagEnd = findTagEnd(code, start)
+  const raw = code.slice(start, tagEnd + 1)
+  const name = JSX_NAME.exec(raw)?.[1] ?? ''
+
+  const openLen = 1
+  push(tokens, 'punctuation', '<')
+  push(tokens, tagKind(name), name)
+
+  const bodyEnd = raw.endsWith('/>') ? tagEnd - 1 : tagEnd
+  tokenizeJsxAttrs(code.slice(start + openLen + name.length, bodyEnd), tokens)
+
+  if (raw.endsWith('/>')) {
+    push(tokens, 'punctuation', '/>')
+    return tagEnd + 1
+  }
+
+  push(tokens, 'punctuation', '>')
+
+  let i = tagEnd + 1
+  while (i < code.length) {
+    const ch = code[i]!
+
+    // Thẻ đóng: hết phần tử này.
+    if (ch === '<' && code[i + 1] === '/') {
+      const end = code.indexOf('>', i)
+      const closeName = JSX_NAME.exec(code.slice(i))?.[1] ?? ''
+      push(tokens, 'punctuation', '</')
+      push(tokens, tagKind(closeName), closeName)
+      push(tokens, 'punctuation', '>')
+      return end === -1 ? code.length : end + 1
+    }
+
+    if (ch === '<' && /[A-Z_$>]/i.test(code[i + 1] ?? '')) {
+      i = tokenizeJsxElement(code, i, tokens)
+      continue
+    }
+
+    if (ch === '{') {
+      const end = findMatchingBrace(code, i)
+      push(tokens, 'punctuation', '{')
+      tokenizeTsx(code.slice(i + 1, end), tokens)
+      if (end < code.length)
+        push(tokens, 'punctuation', '}')
+      i = end + 1
+      continue
+    }
+
+    // Chữ thường giữa hai thẻ.
+    const start2 = i
+    while (i < code.length && code[i] !== '<' && code[i] !== '{')
+      i += 1
+    push(tokens, 'text', code.slice(start2, i))
+  }
+
+  return code.length
+}
+
+/**
+ * Chế độ `tsx`: script và JSX xen kẽ.
+ *
+ * Đệ quy lẫn nhau với `tokenizeJsxElement` — đó là hình dạng thật của JSX, và
+ * cũng là lý do `tokenizeSfc` không dùng lại được.
+ */
+function tokenizeTsx(code: string, tokens: Token[]): void {
+  let i = 0
+
+  while (i < code.length) {
+    const next = findJsxStart(code, i)
+
+    if (next === -1) {
+      tokenizeScript(code.slice(i), tokens)
+      return
+    }
+
+    tokenizeScript(code.slice(i, next), tokens)
+    i = tokenizeJsxElement(code, next, tokens)
+  }
+}

package/src/variants/lib/list-move.ts

@@ -0,0 +1,63 @@
+/**
+ * Phép dời phần tử trong mảng, dùng chung cho `OrderList` và `PickList`.
+ *
+ * KHÔNG dính framework nào — cùng lý do `lib/mask` và `lib/tree` nằm ở đây. Bốn
+ * component (`OrderList`, `PickList` của cả hai cây) chạy đúng một thuật toán
+ * dời chỗ, chứ không phải hai bản hôm nay còn khớp.
+ *
+ * Hàm thuần, trả về mảng MỚI — không sửa tại chỗ. Danh sách ở đây luôn là giá
+ * trị do bên ngoài giữ, mà sửa tại chỗ thì cả hai framework đều không thấy tham
+ * chiếu đổi và một nửa số chỗ đọc sẽ không vẽ lại.
+ */
+
+/** Dời một phần tử từ `from` tới `to`. Chỉ số ngoài phạm vi thì trả nguyên mảng. */
+export function moveItem<T>(items: T[], from: number, to: number): T[] {
+  if (from === to || from < 0 || from >= items.length)
+    return items
+  const next = [...items]
+  const [moved] = next.splice(from, 1)
+  next.splice(Math.max(0, Math.min(to, next.length)), 0, moved)
+  return next
+}
+
+/**
+ * Dời cả một nhóm đang chọn lên hoặc xuống một bậc.
+ *
+ * `step` là `-1` hoặc `1`. Nhóm giữ nguyên thứ tự tương đối, và một phần tử
+ * đang chọn KHÔNG đổi chỗ với một phần tử cũng đang chọn — nếu không thì chọn
+ * ba dòng liền nhau rồi bấm lên sẽ đảo lộn chính ba dòng đó.
+ *
+ * Duyệt theo chiều ngược với hướng dời: đi lên thì duyệt từ đầu, đi xuống thì
+ * duyệt từ cuối. Duyệt sai chiều là phần tử vừa dời bị dời tiếp.
+ */
+export function moveSelectionByStep<T>(items: T[], selected: Set<number>, step: -1 | 1): T[] {
+  const next = [...items]
+  const order = [...selected].sort((a, b) => (step === -1 ? a - b : b - a))
+
+  for (const index of order) {
+    const target = index + step
+    if (target < 0 || target >= next.length || selected.has(target))
+      continue
+    const temp = next[index]
+    next[index] = next[target]
+    next[target] = temp
+    selected.delete(index)
+    selected.add(target)
+  }
+
+  return next
+}
+
+/** Dồn nhóm đang chọn về đầu hoặc cuối, giữ nguyên thứ tự tương đối của nhóm. */
+export function moveSelectionToEdge<T>(items: T[], selected: Set<number>, edge: 'start' | 'end'): T[] {
+  const picked = items.filter((_, index) => selected.has(index))
+  const rest = items.filter((_, index) => !selected.has(index))
+  const next = edge === 'start' ? [...picked, ...rest] : [...rest, ...picked]
+
+  selected.clear()
+  const offset = edge === 'start' ? 0 : rest.length
+  for (let i = 0; i < picked.length; i += 1)
+    selected.add(offset + i)
+
+  return next
+}