@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/tree/TreeKbdFixture.svelte

@@ -1,30 +0,0 @@
-<!--
-  仅供 Tree.kbd.test.ts（browser project）使用的键盘 e2e 夹具。
-  Tree 高亮走 aria-activedescendant：焦点留在 role=tree 容器（tabindex=0），
-  treeitem tabindex=-1 从不真实聚焦；高亮由容器 aria-activedescendant 指向的
-  treeitem id 表达。顶层为叶子 + 一个可展开父节点，用于 ↑↓/Home/End/typeahead/`*`。
--->
-<script lang="ts">
-  import { LocaleProvider } from '../locale-provider/index.js';
-  import Tree from './Tree.svelte';
-
-  // 顶层：Apple / Banana / Cherry（叶子）+ Date（可展开，含子）。
-  // typeahead：输入 c 跳到 Cherry、b 跳到 Banana。
-  const treeData = [
-    { key: 'a', label: 'Apple' },
-    { key: 'b', label: 'Banana' },
-    { key: 'c', label: 'Cherry' },
-    {
-      key: 'd',
-      label: 'Date',
-      children: [
-        { key: 'd1', label: 'Deglet' },
-        { key: 'd2', label: 'Medjool' },
-      ],
-    },
-  ];
-</script>
-
-<LocaleProvider locale="en_US">
-  <Tree {treeData} ariaLabel="Fruit tree" />
-</LocaleProvider>

package/src/tree/index.ts

@@ -1,3 +0,0 @@
-export { default as Tree } from './Tree.svelte';
-export { meta as treeMeta } from './meta.js';
-export type { TreeNodeData, TreeKey } from '@chenzy-design/core';

package/src/tree/meta.ts

@@ -1,152 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * Tree — see specs/components/show/Tree.spec.md
- */
-export const meta = {
-  name: 'Tree',
-  category: 'show',
-  description:
-    '树形控件：层级展示节点，支持展开/收起、单选/多选、可勾选父子联动（含半选 mixed）、内置搜索高亮。受控 value/checkedKeys/expandedKeys 均不回写，仅通过 onChange/onCheck/onExpandedChange 通知。键盘导航遵循 WAI-ARIA APG Tree View（单一 tab stop + aria-activedescendant）。',
-  exports: ['Tree'],
-  props: [
-    { name: 'treeData', type: 'TreeNodeData[]', default: '[]', desc: '树数据源；字段名可经 fieldNames 自定义' },
-    {
-      name: 'fieldNames',
-      type: '{ key?: string; label?: string; children?: string }',
-      default: "{ key:'key', label:'label', children:'children' }",
-      desc: '自定义节点字段名映射，适配任意后端数据（如 { key:\'id\', label:\'name\', children:\'sub\' }）。派生只读映射，回调回传原始节点',
-    },
-    {
-      name: 'value',
-      type: 'TreeKey | TreeKey[] | null',
-      default: 'undefined',
-      desc: '受控选中；multiple 时为数组。受控时不回写',
-    },
-    {
-      name: 'defaultValue',
-      type: 'TreeKey | TreeKey[] | null',
-      default: 'null',
-      desc: '非受控初始选中',
-    },
-    { name: 'multiple', type: 'boolean', default: 'false', desc: '多选模式' },
-    { name: 'checkable', type: 'boolean', default: 'false', desc: '显示勾选框' },
-    {
-      name: 'checkedKeys',
-      type: 'TreeKey[]',
-      default: 'undefined',
-      desc: '受控勾选；内部用 conduct 归一。受控时不回写',
-    },
-    { name: 'defaultCheckedKeys', type: 'TreeKey[]', default: '[]', desc: '非受控初始勾选' },
-    {
-      name: 'checkStrictly',
-      type: 'boolean',
-      default: 'false',
-      desc: 'true 时父子解耦，仅切换单节点',
-    },
-    {
-      name: 'expandedKeys',
-      type: 'TreeKey[]',
-      default: 'undefined',
-      desc: '受控展开。受控时不回写',
-    },
-    { name: 'defaultExpandedKeys', type: 'TreeKey[]', default: '[]', desc: '非受控初始展开' },
-    { name: 'defaultExpandAll', type: 'boolean', default: 'false', desc: '初始展开全部' },
-    {
-      name: 'accordion',
-      type: 'boolean',
-      default: 'false',
-      desc: '手风琴模式：同层级最多展开一个，展开节点时自动收起同父级其它节点（不同层级互不影响）。受控 expandedKeys 同样生效，仅经 onExpandedChange 回传新集不回写',
-    },
-    { name: 'selectable', type: 'boolean', default: 'true', desc: '节点是否可选中' },
-    { name: 'showIcon', type: 'boolean', default: 'true', desc: '是否预留节点图标位' },
-    { name: 'showLine', type: 'boolean', default: 'false', desc: '显示层级连接线（├/└/竖线）' },
-    {
-      name: 'virtualized',
-      type: 'boolean',
-      default: 'false',
-      desc: '虚拟滚动：仅渲染视口内可见节点行，适合大数据树（1000+ 节点）',
-    },
-    { name: 'height', type: 'number', default: '320', desc: '虚拟滚动视口高度（px），virtualized 时生效' },
-    { name: 'itemHeight', type: 'number', default: '32', desc: '虚拟滚动行高（px），virtualized 时生效' },
-    { name: 'filterable', type: 'boolean', default: 'false', desc: '渲染内置搜索框' },
-    { name: 'blockNode', type: 'boolean', default: 'false', desc: '整行点击选中' },
-    { name: 'disabled', type: 'boolean', default: 'false', desc: '整树禁用' },
-    { name: 'size', type: "'small'|'default'|'large'", default: "'default'" },
-    { name: 'status', type: "'default'|'warning'|'error'", default: "'default'" },
-    { name: 'emptyContent', type: 'string', default: 'undefined', desc: '空态文案' },
-    { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '无障碍标签' },
-    {
-      name: 'loadData',
-      type: '(node) => Promise<TreeNodeData[]>',
-      default: 'undefined',
-      desc: '异步加载子节点：展开未加载的非叶子节点时调用',
-    },
-    {
-      name: 'draggable',
-      type: 'boolean',
-      default: 'false',
-      desc: '启用 HTML5 拖拽排序：节点可拖动改变层级/顺序（before/inside/after）',
-    },
-    {
-      name: 'onDrop',
-      type: '(info: { dragNode, dropNode, dropPosition }) => void',
-      default: 'undefined',
-      desc: '放下时回调；受控数据由父组件按 info 重排 treeData，组件不内部改',
-    },
-    { name: 'onChange', type: '(info) => void', default: 'undefined', desc: '选中变更' },
-    { name: 'onCheck', type: '(info) => void', default: 'undefined', desc: '勾选变更' },
-    {
-      name: 'onExpandedChange',
-      type: '(info) => void',
-      default: 'undefined',
-      desc: '展开变更',
-    },
-    { name: 'label', type: 'Snippet', default: 'undefined', desc: '自定义节点内容' },
-    { name: 'icon', type: 'Snippet<[{ node, expanded, level }]>', default: 'undefined', desc: '自定义节点图标（showIcon 时渲染在 label 前）' },
-  ],
-  events: [
-    { name: 'onChange', desc: '选中节点变更：{ value, node, selected }' },
-    { name: 'onCheck', desc: '勾选变更：{ checked, node, halfChecked }' },
-    { name: 'onExpandedChange', desc: '展开/收起：{ expanded, node, expand }' },
-    { name: 'onDrop', desc: '拖拽放下：{ dragNode, dropNode, dropPosition: before|inside|after }' },
-  ],
-  slots: [{ name: 'label', desc: '自定义节点渲染：{ node, level, searchValue, selected, checked }' }],
-  a11y: {
-    hasRole: true,
-    focusable: true,
-    note: 'role=tree（aria-multiselectable）容器为单一 tab stop，焦点通过 aria-activedescendant 指向当前高亮 treeitem；每行 role=treeitem 含 aria-level/setsize/posinset/expanded/selected/disabled，可勾选时 aria-checked 支持 true/false/"mixed"（半选）。方向键导航：↑↓ 移动、→ 展开/进入子、← 折叠/回父、Home/End 首末、Enter 选中、Space 勾选或选中。',
-  },
-  tokens: [
-    '--cd-tree-node-height',
-    '--cd-tree-node-height-small',
-    '--cd-tree-node-height-large',
-    '--cd-tree-indent',
-    '--cd-tree-node-color',
-    '--cd-tree-node-color-disabled',
-    '--cd-tree-node-bg-hover',
-    '--cd-tree-node-bg-selected',
-    '--cd-tree-node-color-selected',
-    '--cd-tree-expand-icon-color',
-    '--cd-tree-search-highlight-bg',
-    '--cd-tree-search-highlight-color',
-    '--cd-tree-focus-ring',
-    '--cd-tree-border-color',
-    '--cd-tree-border-color-warning',
-    '--cd-tree-border-color-error',
-  ],
-  responsive: false,
-  examples: [
-    {
-      title: '基础',
-      code: '<Tree treeData={data} defaultExpandAll onChange={(i) => (v = i.value)} />',
-    },
-    {
-      title: '可勾选联动',
-      code: '<Tree treeData={data} checkable onCheck={(i) => (keys = i.checked)} />',
-    },
-    {
-      title: '可搜索',
-      code: '<Tree treeData={data} filterable />',
-    },
-  ],
-} as const;

package/src/tree-select/TreeSelect.a11y.test.ts

@@ -1,52 +0,0 @@
-// TreeSelect a11y：combobox 触发器 + role=tree 面板 + role=treeitem（use:floating portal 到 body）。
-// 只断言静态 ARIA + axe 0 violations，不测真实键盘/焦点（jsdom 限制）。
-// 打开态面板 portal 到 document.body，故扫描 document.body。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import TreeSelect from './TreeSelect.svelte';
-
-const treeData = [
-  {
-    key: 'parent',
-    label: 'Parent',
-    children: [
-      { key: 'child-1', label: 'Child 1' },
-      { key: 'child-2', label: 'Child 2' },
-    ],
-  },
-  { key: 'leaf', label: 'Leaf' },
-];
-
-describe('TreeSelect a11y', () => {
-  it('关闭态：触发器 role=combobox / aria-expanded=false，无 axe violations', async () => {
-    const { container } = renderWithLocale(TreeSelect, {
-      props: { treeData, ariaLabel: 'Department', placeholder: 'Select node' },
-    });
-    const combobox = container.querySelector('[role="combobox"]');
-    expect(combobox).not.toBeNull();
-    expect(combobox?.getAttribute('aria-expanded')).toBe('false');
-    expect(combobox?.getAttribute('aria-label')).toBe('Department');
-    await expectNoAxeViolations(container);
-  });
-
-  it('打开态：role=tree + treeitem 渲染（portal 到 body），无 axe violations', async () => {
-    renderWithLocale(TreeSelect, {
-      props: { treeData, defaultOpen: true, defaultExpandAll: true, ariaLabel: 'Department' },
-    });
-    const tree = document.querySelector('[role="tree"]');
-    expect(tree).not.toBeNull();
-    const items = document.querySelectorAll('[role="treeitem"]');
-    expect(items.length).toBeGreaterThan(0);
-    await expectNoAxeViolations(document.body);
-  });
-
-  it('有 children 节点：aria-expanded 标记展开态', async () => {
-    renderWithLocale(TreeSelect, {
-      props: { treeData, defaultOpen: true, defaultExpandAll: true, ariaLabel: 'Department' },
-    });
-    const expandable = document.querySelector('[role="treeitem"][aria-expanded]');
-    expect(expandable).not.toBeNull();
-    expect(['true', 'false']).toContain(expandable?.getAttribute('aria-expanded'));
-    await expectNoAxeViolations(document.body);
-  });
-});

package/src/tree-select/TreeSelect.kbd.test.ts

@@ -1,53 +0,0 @@
-// TreeSelect 键盘 e2e（browser project / 真实 chromium），浮层方向键 roving。
-// TreeSelect 高亮走 aria-activedescendant 模型：焦点留在 role=combobox 触发器上
-// （treeitem tabindex=-1，从不真实聚焦），高亮由触发器 aria-activedescendant 指向的
-// treeitem id 表达。故断言 activedescendant 指向的 treeitem 文本变化，而非 toHaveFocus。
-// 浮层经 use:floating portal 到 document.body —— 在 document 范围查 role=tree。
-//   1. 打开后首次 ↓ 高亮首项；再 ↓ 移到下一项；↑ 回上一项。
-//   2. Home/End 跳可见列表首/末项。
-import { describe, it, expect } from 'vitest';
-import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
-import TreeSelectKbdFixture from './TreeSelectKbdFixture.svelte';
-
-// 读触发器 aria-activedescendant 指向的 treeitem，断言其可见文本。
-function activeNodeText(combobox: HTMLElement): string | null {
-  const id = combobox.getAttribute('aria-activedescendant');
-  if (!id) return null;
-  const el = document.getElementById(id);
-  return el?.textContent?.trim() ?? null;
-}
-
-describe('TreeSelect 键盘 e2e（aria-activedescendant 浮层 roving）', () => {
-  it('打开后 ↑↓ 移高亮 + Home/End 首末', async () => {
-    renderKbdFixture(TreeSelectKbdFixture);
-
-    const combobox = document.querySelector('[role="combobox"]') as HTMLElement;
-    expect(combobox).not.toBeNull();
-
-    // 点击触发器打开浮层（焦点留在 combobox）。
-    await userEvent.click(combobox);
-    const tree = document.querySelector('[role="tree"]') as HTMLElement;
-    expect(tree).not.toBeNull();
-    const nodes = Array.from(tree.querySelectorAll<HTMLElement>('[role="treeitem"]'));
-    expect(nodes.length).toBe(3);
-    expect(nodes.every((n) => n.tabIndex === -1)).toBe(true);
-
-    // 1. 首次 ↓ 高亮首项（Apple）。
-    await userEvent.keyboard('{ArrowDown}');
-    expect(activeNodeText(combobox)).toBe('Apple');
-
-    // 再 ↓ 移到下一项（Banana）。
-    await userEvent.keyboard('{ArrowDown}');
-    expect(activeNodeText(combobox)).toBe('Banana');
-
-    // ↑ 回到上一项（Apple）。
-    await userEvent.keyboard('{ArrowUp}');
-    expect(activeNodeText(combobox)).toBe('Apple');
-
-    // 2. End 跳末项（Cherry）；Home 回首项（Apple）。
-    await userEvent.keyboard('{End}');
-    expect(activeNodeText(combobox)).toBe('Cherry');
-    await userEvent.keyboard('{Home}');
-    expect(activeNodeText(combobox)).toBe('Apple');
-  });
-});