@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/select/SelectKbdFixture.svelte

@@ -1,29 +0,0 @@
-<!--
-  仅供 Select.kbd.test.ts（browser project）使用的键盘 e2e 夹具。
-  Select 浮层 portal 到 document.body；高亮走 aria-activedescendant（焦点留在
-  role=combobox 触发器上不动，由 aria-activedescendant 指向高亮 option）。
-  夹具暴露 onChange 写入 lastValue，供测试断言 Enter 选中。
--->
-<script lang="ts">
-  import { LocaleProvider } from '../locale-provider/index.js';
-  import Select from './Select.svelte';
-
-  const options = [
-    { label: 'Apple', value: 'apple' },
-    { label: 'Banana', value: 'banana' },
-    { label: 'Cherry', value: 'cherry' },
-  ];
-
-  let lastValue = $state<unknown>(undefined);
-</script>
-
-<LocaleProvider locale="en_US">
-  <Select
-    {options}
-    ariaLabel="Fruit"
-    onChange={(v) => {
-      lastValue = v;
-    }}
-  />
-  <output data-testid="value">{JSON.stringify(lastValue ?? null)}</output>
-</LocaleProvider>

package/src/select/index.ts

@@ -1,3 +0,0 @@
-export { default as Select } from './Select.svelte';
-export { meta as selectMeta } from './meta.js';
-export type { OptionData } from './types.js';

package/src/select/meta.ts

@@ -1,78 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * See specs/00-foundation/ai-friendly.spec.md.
- */
-export const meta = {
-  name: 'Select',
-  category: 'input',
-  description: '下拉选择器，支持单选 / 多选 / 本地过滤 / 键盘导航 / 浮层。',
-  props: [
-    { name: 'value', type: 'string|number|(string|number)[]', default: 'undefined' },
-    { name: 'defaultValue', type: 'string|number|(string|number)[]', default: 'undefined' },
-    { name: 'options', type: 'OptionData[] | OptionGroup[]', default: '[]', desc: '选项；含 { label, options:[] } 即分组' },
-    { name: 'multiple', type: 'boolean', default: 'false' },
-    { name: 'filter', type: 'boolean', default: 'false' },
-    { name: 'open', type: 'boolean', default: 'undefined' },
-    { name: 'defaultOpen', type: 'boolean', default: 'false' },
-    { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
-    { name: 'status', type: "'default'|'warning'|'error'", default: 'default' },
-    { name: 'placeholder', type: 'string', default: "'请选择'" },
-    { name: 'ariaLabel', type: 'string', default: 'undefined', desc: 'combobox 触发器可访问名' },
-    { name: 'ariaLabelledby', type: 'string', default: 'undefined', desc: '关联外部 label 的 id（优先于 ariaLabel）' },
-    { name: 'id', type: 'string', default: 'undefined', desc: '触发器 id，用于关联外部 <label for="...">' },
-    { name: 'disabled', type: 'boolean', default: 'false' },
-    { name: 'clearable', type: 'boolean', default: 'false' },
-    { name: 'borderless', type: 'boolean', default: 'false', desc: '无边框模式' },
-    { name: 'autoFocus', type: 'boolean', default: 'false', desc: '挂载后自动聚焦触发器' },
-    { name: 'maxTagCount', type: 'number', default: '0', desc: '多选 tag 超出折叠为 +N（0=不折叠）' },
-    { name: 'maxTagTextLength', type: 'number', default: 'undefined', desc: '单个 Tag 文本最大长度，超出截断为「前缀…」，完整文本经 title 查看' },
-    { name: 'showRestTagsPopover', type: 'boolean', default: 'false', desc: '超出 maxTagCount 时，将 +N 悬停展示剩余 tags（title）' },
-    { name: 'restTagsPopoverProps', type: 'object', default: 'undefined', desc: '透传给 +N 悬停 popover 的参数（预留）' },
-    { name: 'allowCreate', type: 'boolean', default: 'false', desc: 'filter 无匹配时可创建新选项' },
-    { name: 'autoClearSearchValue', type: 'boolean', default: 'true', desc: '多选选中后自动清空搜索词' },
-    { name: 'optionLabelProp', type: 'string', default: "'label'", desc: '用作回显的字段名' },
-    { name: 'onSearch', type: '(query: string) => void', default: 'undefined', desc: '远程搜索（防抖回调，外部更新 options）' },
-    { name: 'loading', type: 'boolean', default: 'false', desc: '远程加载中（显示 spinner）' },
-    { name: 'searchDebounce', type: 'number', default: '300', desc: 'onSearch 防抖毫秒' },
-    { name: 'virtualized', type: 'boolean', default: 'false', desc: '选项虚拟化：大数据下拉只渲染视口内 option（仅非分组生效，分组时回退全量）' },
-    { name: 'optionHeight', type: 'number', default: '32', desc: '虚拟化选项行高（px），需与样式实际行高一致' },
-    { name: 'maxHeight', type: 'number', default: '256', desc: '下拉最大高度（px）；虚拟化时同时作为视口高度' },
-    { name: 'dropdownMatchSelectWidth', type: 'boolean', default: 'true', desc: '浮层宽度是否跟随触发器；false 时浮层自适应内容宽度' },
-    { name: 'destroyOnClose', type: 'boolean', default: 'false', desc: '关闭时销毁浮层 DOM' },
-    { name: 'getPopupContainer', type: '() => HTMLElement', default: 'undefined', desc: '浮层挂载目标容器' },
-    { name: 'onChange', type: '(v: string|number|(string|number)[]) => void', default: 'undefined' },
-    { name: 'onOpenChange', type: '(open: boolean) => void', default: 'undefined' },
-    { name: 'onSelect', type: '(value, option) => void', default: 'undefined', desc: '选中某项时触发' },
-    { name: 'onDeselect', type: '(value, option) => void', default: 'undefined', desc: '多选取消某项时触发' },
-    { name: 'onClear', type: '() => void', default: 'undefined', desc: '点击清除按钮时触发' },
-    { name: 'onCreate', type: '(value: string) => void', default: 'undefined', desc: 'allowCreate 创建新项时触发' },
-    { name: 'onFocus', type: '() => void', default: 'undefined', desc: '触发器获焦时触发' },
-    { name: 'onBlur', type: '() => void', default: 'undefined', desc: '触发器失焦时触发' },
-    { name: 'onScrollToBottom', type: '() => void', default: 'undefined', desc: '浮层列表滚动触底时触发' },
-    { name: 'onExceed', type: '(option) => void', default: 'undefined', desc: '多选超出 maxTagCount 时触发（携带被隐藏的 option）' },
-    { name: 'onChangeWithObject', type: '(option | option[]) => void', default: 'undefined', desc: '携带完整 option 对象的 change 回调' },
-  ],
-  snippets: [
-    { name: 'prefix', desc: '触发器左侧前缀' },
-    { name: 'suffix', desc: '触发器右侧后缀（覆盖默认箭头区域）' },
-    { name: 'clearIcon', desc: '自定义清除按钮图标' },
-    { name: 'arrowIcon', desc: '自定义下拉箭头图标' },
-    { name: 'emptyContent', type: 'string | Snippet', desc: '自定义空态内容' },
-    { name: 'empty', desc: '自定义空态 Snippet（与 emptyContent 等价）' },
-    { name: 'dropdownHeader', desc: '浮层顶部固定区' },
-    { name: 'dropdownFooter', desc: '浮层底部固定区' },
-    { name: 'option', params: '[{ option, selected, active }]', desc: '自定义单项渲染' },
-    { name: 'label', params: '[{ option }]', desc: '自定义选中值/Tag 渲染' },
-    { name: 'renderCreateItem', params: '[queryString]', desc: '自定义"创建xxx"项渲染' },
-  ],
-  a11y: {
-    role: 'combobox',
-    notes: [
-      'combobox + listbox + option ARIA 模式',
-      'aria-activedescendant 指向高亮项',
-      '选中项 aria-selected；多选 aria-multiselectable',
-      '键盘：↑↓ 移动、Enter 选中、Esc 关闭',
-    ],
-  },
-  tokens: ['--cd-select-*', '--cd-focus-ring', '--cd-motion-*'],
-} as const;

package/src/select/types.ts

@@ -1,2 +0,0 @@
-/** Select 选项数据结构。 */
-export type OptionData = { label: string; value: string | number; disabled?: boolean };

package/src/side-sheet/SideSheet.a11y.test.ts

@@ -1,53 +0,0 @@
-// SideSheet a11y：侧边滑出浮层（APG dialog/modal，与 Modal 同构）。
-// role=dialog；mask=true 加 aria-modal=true；有 title 用 aria-labelledby，无则 aria-label。
-// portal 到 body，故扫描 document.body（参照 Modal）。
-// 不测真实 focus-trap/scroll-lock（jsdom 焦点模型不完整），只断言静态 ARIA + axe。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import SideSheet from './SideSheet.svelte';
-
-describe('SideSheet a11y', () => {
-  it('open + title：role=dialog / aria-modal / aria-labelledby，无 axe violations', async () => {
-    renderWithLocale(SideSheet, {
-      props: { open: true, title: 'Edit user' },
-    });
-
-    // portal 到 body —— 在 document 全局查询而非 container。
-    const dialog = document.querySelector('[role="dialog"]') as HTMLElement | null;
-    expect(dialog).not.toBeNull();
-    // mask 默认 true → 模态。
-    expect(dialog?.getAttribute('aria-modal')).toBe('true');
-
-    // 有 title 时用 aria-labelledby 指向标题 h2，且该 id 存在。
-    const labelledby = dialog?.getAttribute('aria-labelledby');
-    expect(labelledby).toBeTruthy();
-    const titleEl = labelledby ? document.getElementById(labelledby) : null;
-    expect(titleEl?.textContent).toContain('Edit user');
-
-    // 关闭按钮 aria-label 来自 en_US locale（验证 LocaleProvider 管线）。
-    const closeBtn = document.querySelector('.cd-sidesheet__close') as HTMLElement | null;
-    expect(closeBtn?.getAttribute('aria-label')).toBeTruthy();
-
-    await expectNoAxeViolations(document.body);
-  });
-
-  it('无 title + ariaLabel：role=dialog 用 aria-label 提供可访问名', async () => {
-    renderWithLocale(SideSheet, {
-      props: { open: true, ariaLabel: 'Notification center', closable: false },
-    });
-    const dialog = document.querySelector('[role="dialog"]') as HTMLElement | null;
-    expect(dialog?.getAttribute('aria-label')).toBe('Notification center');
-    expect(dialog?.getAttribute('aria-labelledby')).toBeNull();
-    await expectNoAxeViolations(document.body);
-  });
-
-  it('mask=false 非模态：不设 aria-modal（避免误导锁定语义）', async () => {
-    renderWithLocale(SideSheet, {
-      props: { open: true, title: 'Filters', mask: false },
-    });
-    const dialog = document.querySelector('[role="dialog"]') as HTMLElement | null;
-    expect(dialog).not.toBeNull();
-    expect(dialog?.getAttribute('aria-modal')).toBeNull();
-    await expectNoAxeViolations(document.body);
-  });
-});

package/src/side-sheet/SideSheet.kbd.test.ts

@@ -1,63 +0,0 @@
-// SideSheet 键盘 e2e（browser project / 真实 chromium）。
-// 测 focus-trap 的真实焦点行为——jsdom 完全测不了（焦点模型不完整）：
-//   1. 打开 SideSheet 后焦点进入对话框内（首个可聚焦元素）。
-//   2. Tab 循环被困在内：Tab 到最后一个再 Tab 回第一个；Shift+Tab 反向。
-//   3. Esc 关闭后焦点归还触发元素（trigger 按钮）。
-//
-// SideSheet portal 到 body（与 Modal/Drawer 同构），故在 document 范围查 [role=dialog]。
-// 仅 mask=true（默认）启用 focus trap；fixture 用 motionDisabled 关动效稳住时序。
-import { describe, it, expect } from 'vitest';
-import { page } from 'vitest/browser';
-import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
-import SideSheetKbdFixture from './SideSheetKbdFixture.svelte';
-
-function loc(el: Element) {
-  return page.elementLocator(el);
-}
-
-function focusablesIn(dialog: HTMLElement) {
-  return Array.from(
-    dialog.querySelectorAll<HTMLElement>(
-      'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])',
-    ),
-  ).filter((el) => el.offsetParent !== null);
-}
-
-describe('SideSheet 键盘 e2e（focus trap）', () => {
-  it('打开后焦点进入对话框；Tab 循环困在内；Esc 关闭后焦点归还 trigger', async () => {
-    const { baseElement } = renderKbdFixture(SideSheetKbdFixture);
-
-    const trigger = baseElement.querySelector('[data-testid="trigger"]') as HTMLButtonElement;
-    expect(trigger).not.toBeNull();
-    await userEvent.click(trigger);
-
-    // SideSheet portal 到 body —— 在 document 范围查询对话框。
-    const dialog = document.querySelector('[role="dialog"]') as HTMLElement;
-    expect(dialog).not.toBeNull();
-    await expect.element(loc(dialog)).toBeInTheDocument();
-
-    // 1. 焦点进入对话框内（focus-trap activate 聚焦首个可聚焦元素）。
-    expect(dialog.contains(document.activeElement)).toBe(true);
-
-    const focusables = focusablesIn(dialog);
-    expect(focusables.length).toBeGreaterThan(1);
-    const first = focusables[0]!;
-    const last = focusables[focusables.length - 1]!;
-
-    // 2a. 焦点移到最后一个，再 Tab → 循环回第一个（被困住）。
-    last.focus();
-    await expect.element(loc(last)).toHaveFocus();
-    await userEvent.tab();
-    await expect.element(loc(first)).toHaveFocus();
-    expect(dialog.contains(document.activeElement)).toBe(true);
-
-    // 2b. Shift+Tab 从第一个 → 循环回最后一个。
-    await userEvent.tab({ shift: true });
-    await expect.element(loc(last)).toHaveFocus();
-    expect(dialog.contains(document.activeElement)).toBe(true);
-
-    // 3. Esc 关闭（closeOnEsc 默认 true）—— focus-trap deactivate 归还焦点 trigger。
-    await userEvent.keyboard('{Escape}');
-    await expect.element(loc(trigger)).toHaveFocus();
-  });
-});