@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/tag-input/meta.ts

@@ -1,43 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * See specs/00-foundation/ai-friendly.spec.md.
- */
-export const meta = {
-  name: 'TagInput',
-  category: 'input',
-  description: '标签输入框，支持回车 / 分隔符提交、退格删除、去重、上限与失焦提交。',
-  props: [
-    { name: 'value', type: 'string[]', default: 'undefined' },
-    { name: 'defaultValue', type: 'string[]', default: '[]' },
-    { name: 'inputValue', type: 'string', default: 'undefined' },
-    { name: 'defaultInputValue', type: 'string', default: "''" },
-    { name: 'placeholder', type: 'string', default: 'undefined' },
-    { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
-    { name: 'status', type: "'default'|'warning'|'error'", default: 'default' },
-    { name: 'disabled', type: 'boolean', default: 'false' },
-    { name: 'readonly', type: 'boolean', default: 'false' },
-    { name: 'max', type: 'number', default: 'undefined' },
-    { name: 'maxLength', type: 'number', default: 'undefined' },
-    { name: 'maxTagTextLength', type: 'number', default: 'undefined' },
-    { name: 'separator', type: 'string|string[]', default: "['Enter']" },
-    { name: 'addOnBlur', type: 'boolean', default: 'false' },
-    { name: 'allowDuplicates', type: 'boolean', default: 'false' },
-    { name: 'trimWhitespace', type: 'boolean', default: 'true' },
-    { name: 'draggable', type: 'boolean', default: 'false' },
-    { name: 'onChange', type: '(tags: string[]) => void', default: 'undefined' },
-    { name: 'onInputChange', type: '(value: string) => void', default: 'undefined' },
-    { name: 'ariaLabel', type: 'string', default: 'undefined' },
-  ],
-  a11y: {
-    role: 'group',
-    notes: [
-      '容器 role=group + aria-label',
-      '每个标签删除按钮含 aria-label，文案取自 locale（TagInput.remove，默认中文「删除」）',
-      '键盘：分隔符（默认 Enter）提交、输入为空时 Backspace 删除末尾标签',
-      'draggable 仅为鼠标增强（HTML5 DnD）；键盘增删标签交互不受影响',
-      'error 状态时 aria-invalid 标注于内部输入',
-    ],
-  },
-  i18nKeys: ['TagInput.remove'],
-  tokens: ['--cd-input-*', '--cd-focus-ring', '--cd-motion-*', '--cd-color-fill-*'],
-} as const;

package/src/tag-input/reorder.test.ts

@@ -1,59 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { computeInsertSide, reorder } from './reorder.js';
-
-describe('tag-input/reorder', () => {
-  describe('computeInsertSide', () => {
-    it('left half → before', () => {
-      expect(computeInsertSide(0, 100)).toBe('before');
-      expect(computeInsertSide(49, 100)).toBe('before');
-    });
-    it('mid and right half → after', () => {
-      expect(computeInsertSide(50, 100)).toBe('after');
-      expect(computeInsertSide(99, 100)).toBe('after');
-    });
-  });
-
-  describe('reorder', () => {
-    const list = ['a', 'b', 'c', 'd'];
-
-    it('moves an item forward (before a later target)', () => {
-      expect(reorder(list, 0, 2, 'before')).toEqual(['b', 'a', 'c', 'd']);
-    });
-
-    it('moves an item forward (after a later target)', () => {
-      expect(reorder(list, 0, 2, 'after')).toEqual(['b', 'c', 'a', 'd']);
-    });
-
-    it('moves an item backward (before an earlier target)', () => {
-      expect(reorder(list, 3, 1, 'before')).toEqual(['a', 'd', 'b', 'c']);
-    });
-
-    it('moves an item backward (after an earlier target)', () => {
-      expect(reorder(list, 3, 1, 'after')).toEqual(['a', 'b', 'd', 'c']);
-    });
-
-    it('moves to the very end', () => {
-      expect(reorder(list, 0, 3, 'after')).toEqual(['b', 'c', 'd', 'a']);
-    });
-
-    it('moves to the very start', () => {
-      expect(reorder(list, 3, 0, 'before')).toEqual(['d', 'a', 'b', 'c']);
-    });
-
-    it('no-op when result position equals source (drop after previous neighbor)', () => {
-      expect(reorder(list, 1, 0, 'after')).toEqual(list);
-      expect(reorder(list, 1, 2, 'before')).toEqual(list);
-    });
-
-    it('returns a new array (immutable)', () => {
-      const out = reorder(list, 0, 1, 'after');
-      expect(out).not.toBe(list);
-      expect(list).toEqual(['a', 'b', 'c', 'd']);
-    });
-
-    it('out-of-range indices return a copy unchanged', () => {
-      expect(reorder(list, -1, 2, 'before')).toEqual(list);
-      expect(reorder(list, 0, 9, 'after')).toEqual(list);
-    });
-  });
-});

package/src/tag-input/reorder.ts

@@ -1,41 +0,0 @@
-/**
- * 标签拖拽重排的纯函数 (红线 #2)：不触碰组件状态，仅做数组计算，便于单测。
- */
-
-/** dragover 时根据指针在目标标签内的水平位置判断插入在其「前」或「后」。 */
-export type InsertSide = 'before' | 'after';
-
-/**
- * 以目标标签中线为界：指针在左半区插入到目标之前，右半区插入到目标之后。
- * @param offsetX 指针相对目标标签左边缘的水平偏移
- * @param width 目标标签宽度
- */
-export function computeInsertSide(offsetX: number, width: number): InsertSide {
-  return offsetX < width / 2 ? 'before' : 'after';
-}
-
-/**
- * 把 `from` 处的元素移动到目标 `to` 的 `before`/`after` 侧，返回新数组（不可变）。
- * 越界或目标即自身（移动后位置不变）时原样返回原数组的浅拷贝。
- */
-export function reorder<T>(
-  list: readonly T[],
-  from: number,
-  to: number,
-  side: InsertSide,
-): T[] {
-  const n = list.length;
-  if (from < 0 || from >= n || to < 0 || to >= n) return list.slice();
-
-  // 目标插入下标（在「移除 from 之前」的坐标系中）。
-  let insert = side === 'before' ? to : to + 1;
-  // 移除被拖项后，位于其右侧的插入点需左移一位。
-  if (from < insert) insert -= 1;
-
-  if (insert === from) return list.slice();
-
-  const next = list.slice();
-  const removed = next.splice(from, 1);
-  next.splice(insert, 0, ...removed);
-  return next;
-}

package/src/test-utils/LocaleHarness.svelte

@@ -1,29 +0,0 @@
-<!--
-  LocaleHarness — a11y 测试专用包装组件。
-  把被测组件包进 <LocaleProvider>，使 useLocale() 能拿到 context（默认 en_US）。
-  通过 component prop 接收被测组件构造器，props 透传，children 作为默认插槽渲染。
-  注意：仅用于测试，不对外导出。
--->
-<script lang="ts">
-  import type { Component, Snippet } from 'svelte';
-  import { LocaleProvider } from '../locale-provider/index.js';
-
-  interface Props {
-    // 被测组件构造器（Svelte 5 Component）。
-    component: Component<any>;
-    // 透传给被测组件的 props。
-    props?: Record<string, unknown>;
-    // 语言码，默认 en_US。
-    locale?: string;
-    // 默认插槽内容（如 Button 的文字）。
-    children?: Snippet;
-  }
-
-  let { component: Cmp, props = {}, locale = 'en_US', children }: Props = $props();
-</script>
-
-<LocaleProvider {locale}>
-  <Cmp {...props}>
-    {#if children}{@render children()}{/if}
-  </Cmp>
-</LocaleProvider>

package/src/test-utils/a11y.ts

@@ -1,108 +0,0 @@
-// a11y 渲染测试基建（仅 dom project / jsdom 下使用）。
-//
-// 提供两个帮手：
-//  - renderWithLocale：用 testing-library 的 render 把组件挂到 jsdom，
-//    并用 LocaleHarness 包一层 LocaleProvider（默认 en_US），使 useLocale() 可用。
-//  - expectNoAxeViolations：对容器跑 axe-core，断言 0 violations。
-//
-// 设计取舍：本套件只做 axe 静态规则 + role/aria 断言，不测真实键盘/焦点行为
-// （jsdom 焦点模型不完整、委托事件合成不可靠——见项目已知教训）。焦点陷阱/键盘
-// 导航留给将来 Playwright。
-import { render, type RenderResult } from '@testing-library/svelte';
-import type { Component } from 'svelte';
-import axe, { type RunOptions, type Result } from 'axe-core';
-
-// 被测组件的宽松构造器类型——props 形态各异，测试帮手不关心其精确 prop 签名。
-// 用 Record<string, unknown> 而非 any，既满足 eslint no-explicit-any，又能接收任意组件。
-type AnyComponent = Component<Record<string, unknown>>;
-import { expect } from 'vitest';
-import LocaleHarness from './LocaleHarness.svelte';
-
-export interface RenderWithLocaleOptions {
-  /** 透传给被测组件的 props。 */
-  props?: Record<string, unknown>;
-  /** 语言码，默认 en_US。 */
-  locale?: string;
-}
-
-/**
- * 把组件包进 LocaleProvider 渲染到 jsdom。
- * 返回 testing-library 的 RenderResult（含 container / baseElement / queries）。
- *
- * 用法：
- *   const { container } = renderWithLocale(Button, { props: { type: 'primary' } });
- *
- * 纯展示组件（无 useLocale）同样可用——Provider 包裹无副作用。
- */
-export function renderWithLocale(
-  component: AnyComponent,
-  options: RenderWithLocaleOptions = {},
-): RenderResult<AnyComponent> {
-  const { props = {}, locale = 'en_US' } = options;
-  return render(LocaleHarness as unknown as AnyComponent, {
-    props: { component, props, locale },
-  });
-}
-
-// jsdom 下不可靠 / 无意义、需禁用的 axe 规则及原因：
-//  - color-contrast：jsdom 不做布局与渲染，拿不到真实计算后的颜色/尺寸，
-//    对比度无法计算（axe 本就会 incomplete，这里显式关掉避免噪音）。对比度
-//    交给将来的真实浏览器（Playwright）或专门的 token 对比度校验。
-const JSDOM_DISABLED_RULES = ['color-contrast'] as const;
-
-export interface AxeAssertOptions {
-  /** 额外要禁用的规则 id（在默认禁用项之外追加）。 */
-  disableRules?: string[];
-  /** 覆盖默认 runOptions（一般不需要）。 */
-  runOptions?: RunOptions;
-}
-
-function formatViolations(violations: Result[]): string {
-  return violations
-    .map((v) => {
-      const nodes = v.nodes.map((n) => `      - ${n.html}\n        ${n.failureSummary ?? ''}`).join('\n');
-      return `  [${v.id}] ${v.help} (${v.impact ?? 'n/a'})\n    ${v.helpUrl}\n${nodes}`;
-    })
-    .join('\n\n');
-}
-
-/**
- * 对容器跑 axe-core，断言 0 violations。
- * 默认规则集：WCAG 2.0/2.1 A & AA（axe tags wcag2a/wcag2aa/wcag21a/wcag21aa）。
- * 默认禁用 jsdom 下不可靠的规则（见 JSDOM_DISABLED_RULES）。
- *
- * 用法：await expectNoAxeViolations(container);
- */
-export async function expectNoAxeViolations(
-  container: Element,
-  options: AxeAssertOptions = {},
-): Promise<void> {
-  const { disableRules = [], runOptions } = options;
-
-  const rules: RunOptions['rules'] = {};
-  for (const id of [...JSDOM_DISABLED_RULES, ...disableRules]) {
-    rules[id] = { enabled: false };
-  }
-
-  const results = await axe.run(
-    container,
-    runOptions ?? {
-      runOnly: {
-        type: 'tag',
-        values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'],
-      },
-      rules,
-    },
-  );
-
-  if (results.violations.length > 0) {
-    throw new Error(
-      `Expected no axe violations but found ${results.violations.length}:\n\n${formatViolations(
-        results.violations,
-      )}`,
-    );
-  }
-
-  // 给 vitest 一个显式断言计数，便于报告/快照。
-  expect(results.violations).toHaveLength(0);
-}

package/src/test-utils/kbd.ts

@@ -1,52 +0,0 @@
-// 键盘 e2e 测试基建（仅 browser project / 真实 chromium 下使用）。
-//
-// 与 a11y.ts（jsdom + axe）的关键区别：本套件在真实 chromium 里 mount 组件，
-// 用 vitest browser 的 userEvent 触发真实键盘/Tab，并用 page locator 的
-// `.toHaveFocus()` 断言真实 document.activeElement。jsdom 测不了的焦点陷阱、
-// roving 漫游、焦点归还都在这里覆盖。
-//
-// 渲染走 vitest-browser-svelte 的 render（基于 @testing-library/svelte-core，
-// 真实 mount 到 document.body），外层用 LocaleHarness 包一层 LocaleProvider
-// （复用 a11y 套件的同一 harness），使 useLocale() 可用。
-import { render } from 'vitest-browser-svelte';
-import { userEvent } from 'vitest/browser';
-import type { Component } from 'svelte';
-import LocaleHarness from './LocaleHarness.svelte';
-
-// 被测组件的宽松构造器类型——props 形态各异，帮手不关心精确 prop 签名。
-type AnyComponent = Component<Record<string, unknown>>;
-
-export interface RenderKbdOptions {
-  /** 透传给被测组件的 props。 */
-  props?: Record<string, unknown>;
-  /** 语言码，默认 en_US。 */
-  locale?: string;
-}
-
-/**
- * 在真实浏览器里把组件包进 LocaleProvider 渲染。
- * 返回 vitest-browser-svelte 的 RenderResult（含 baseElement / container / 各 locator 查询）。
- *
- * 用法：
- *   const screen = renderKbd(Modal, { props: { open: true, title: '...' } });
- *   const dialog = screen.baseElement.querySelector('[role="dialog"]');
- */
-export function renderKbd(component: AnyComponent, options: RenderKbdOptions = {}) {
-  const { props = {}, locale = 'en_US' } = options;
-  return render(LocaleHarness as unknown as AnyComponent, {
-    props: { component, props, locale },
-  });
-}
-
-/**
- * 直接渲染一个已自带 LocaleProvider/不需要 locale 的 fixture 组件。
- * fixture 通常无 props（构造器类型为 Component<Record<string, never>>），
- * 故入参用宽松的 Component<any> 接收，避免与具体 fixture 的精确 props 类型冲突。
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function renderKbdFixture(component: Component<any>, props: Record<string, unknown> = {}) {
-  return render(component as AnyComponent, { props });
-}
-
-// 重新导出 userEvent，键盘 e2e 统一从这里取（tab()/keyboard()/click()）。
-export { userEvent };

package/src/textarea/TextArea.a11y.test.ts

@@ -1,44 +0,0 @@
-// TextArea a11y：原生 <textarea> + ariaLabel 可访问名；error 态 aria-invalid；
-// showClear 清除按钮 locale 可访问名。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import TextArea from './TextArea.svelte';
-
-describe('TextArea a11y', () => {
-  it('默认渲染：ariaLabel 提供可访问名，无 axe violations', async () => {
-    const { container } = renderWithLocale(TextArea, {
-      props: { ariaLabel: 'Bio', placeholder: 'Tell us about yourself' },
-    });
-    const ta = container.querySelector('textarea');
-    expect(ta).not.toBeNull();
-    expect(ta?.getAttribute('aria-label')).toBe('Bio');
-    await expectNoAxeViolations(container);
-  });
-
-  it('error 状态：aria-invalid=true', async () => {
-    const { container } = renderWithLocale(TextArea, {
-      props: { ariaLabel: 'Notes', status: 'error' },
-    });
-    const ta = container.querySelector('textarea');
-    expect(ta?.getAttribute('aria-invalid')).toBe('true');
-    await expectNoAxeViolations(container);
-  });
-
-  it('showClear + showCount：清除按钮 locale 可访问名，无 axe violations', async () => {
-    const { container } = renderWithLocale(TextArea, {
-      props: {
-        ariaLabel: 'Comment',
-        defaultValue: 'hello',
-        showClear: true,
-        showCount: true,
-        maxLength: 100,
-      },
-    });
-    const clearBtn = container.querySelector('.cd-textarea__clear');
-    expect(clearBtn).not.toBeNull();
-    const label = clearBtn?.getAttribute('aria-label');
-    expect(label).toBeTruthy();
-    expect(label).not.toBe('Textarea.clear');
-    await expectNoAxeViolations(container);
-  });
-});