@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/tabs/TabPane.svelte

@@ -1,92 +0,0 @@
-<!--
-  TabPane — 声明式内容面板，配合 Tabs 使用。
-  两种用法：
-  1) 父传 tabList（数据驱动标签栏）：TabPane 仅提供「内容」，按 context 的 activeKey getter 显隐，
-     itemKey 需与对应 tabList 项一致。
-  2) 父不传 tabList（纯声明式自动收集）：TabPane 额外把 tab/itemKey/disabled/closable 注册给父，
-     父据此推导标签栏。注册/注销/同步均在 $effect（mount/unmount/元数据变化），向父写普通数组 +
-     bump version（红线 #2：副作用写、render 读分离，绝不在注册 effect 读父快照 → 无自循环）。
--->
-<script lang="ts">
-  import { untrack, type Snippet } from 'svelte';
-  import { getTabsContext, type TabPaneRegistration } from './context.js';
-
-  type TabKey = string | number;
-
-  interface Props {
-    itemKey: TabKey;
-    tab?: string;
-    disabled?: boolean;
-    closable?: boolean;
-    children?: Snippet;
-  }
-
-  let { itemKey, tab, disabled, closable, children }: Props = $props();
-
-  const ctx = getTabsContext();
-  const active = $derived(ctx?.getActiveKey() === itemKey);
-  const lazy = $derived(ctx?.getLazy() ?? false);
-  const keepDOM = $derived(ctx?.getKeepDOM() ?? false);
-  // 与 tab 按钮双向关联的稳定 id（aria-controls ↔ id / aria-labelledby）。
-  const panelId = $derived(ctx?.getPanelId(itemKey));
-  const labelledBy = $derived(ctx?.getTabId(itemKey));
-
-  // 纯声明式自动收集：mount 注册自身标签元数据、unmount 注销；元数据变化时 update 同步。
-  // 红线 #2：注册 $effect 只向父写（普通数组 + version bump），绝不读父收集快照 → 无自循环。
-  // 注册不依赖挂载与否（lazy 模式面板未挂载也要在标签栏出现），故独立于 shouldMount。
-  // exactOptionalPropertyTypes：仅在有值时带 disabled/closable 键（不写 undefined）。
-  function buildReg(): TabPaneRegistration {
-    return {
-      itemKey,
-      tab: tab ?? String(itemKey),
-      ...(disabled !== undefined ? { disabled } : {}),
-      ...(closable !== undefined ? { closable } : {}),
-    };
-  }
-
-  let paneId = $state(-1);
-  $effect(() => {
-    const reg = ctx?.registerPane;
-    if (!reg) return;
-    // 注册仅在 mount/unmount 跑一次：untrack 读初值，避免 itemKey 等变化触发重注册（保序）。
-    const id = untrack(() => reg(buildReg()));
-    paneId = id;
-    return () => ctx?.unregisterPane?.(id);
-  });
-  // 元数据变化（tab/itemKey/disabled/closable）→ 同步给父（独立 effect，读响应值并写父）。
-  $effect(() => {
-    if (paneId === -1) return;
-    ctx?.updatePane?.(paneId, buildReg());
-  });
-
-  // 记录是否曾激活过（红线 #2：本地 $state 在 effect 内写，不在 render 期写）。
-  let everActive = $state(false);
-  $effect(() => {
-    if (active) everActive = true;
-  });
-
-  // 渲染策略：
-  // - 非 keepDOM：仅渲染当前激活面板（切走即卸载）——天然懒挂。
-  // - keepDOM + lazy：首次激活才挂，之后保留 DOM（display:none 隐藏）。
-  // - keepDOM 非 lazy：预挂全部面板并保留（无懒加载）。
-  const shouldMount = $derived(keepDOM ? (lazy ? everActive : true) : active);
-</script>
-
-{#if shouldMount}
-  <div
-    class="cd-tabs__panel"
-    role="tabpanel"
-    id={panelId}
-    aria-labelledby={labelledBy}
-    tabindex="0"
-    hidden={!active}
-  >
-    {@render children?.()}
-  </div>
-{/if}
-
-<style>
-  .cd-tabs__panel {
-    outline: none;
-  }
-</style>

package/src/tabs/Tabs.a11y.test.ts

@@ -1,47 +0,0 @@
-// Tabs a11y：标签页。
-// 容器 role=tablist，每个标签 role=tab + aria-selected，激活标签 aria-selected=true，
-// 面板 role=tabpanel（aria-controls ↔ id 关联）。
-// 用声明式 <Tabs.Pane> 夹具（TabsA11yFixture）渲染真实面板，使 aria-controls 不悬空。
-import { describe, it, expect, beforeAll } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import TabsFixture from './TabsA11yFixture.svelte';
-
-// jsdom 无 ResizeObserver（Tabs 用其检测标签栏溢出）。仅在本测试内补一个 no-op 桩，
-// 不改基建/组件源码——溢出滚动行为不在静态 a11y 测试范围（留给 Playwright）。
-beforeAll(() => {
-  if (!('ResizeObserver' in globalThis)) {
-    (globalThis as { ResizeObserver?: unknown }).ResizeObserver = class {
-      observe(): void {}
-      unobserve(): void {}
-      disconnect(): void {}
-    };
-  }
-});
-
-describe('Tabs a11y', () => {
-  it('默认渲染：role=tablist + tab + tabpanel，无 axe violations', async () => {
-    const { container } = renderWithLocale(TabsFixture, {});
-    expect(container.querySelector('[role="tablist"]')).not.toBeNull();
-    expect(container.querySelectorAll('[role="tab"]').length).toBe(3);
-    expect(container.querySelector('[role="tabpanel"]')).not.toBeNull();
-    await expectNoAxeViolations(container);
-  });
-
-  it('选中态：defaultValue 标签 aria-selected=true，其余 false', async () => {
-    const { container } = renderWithLocale(TabsFixture, {
-      props: { defaultValue: 'details' },
-    });
-    const selected = container.querySelectorAll('[role="tab"][aria-selected="true"]');
-    expect(selected.length).toBe(1);
-    expect(selected[0]?.textContent).toContain('Details');
-    await expectNoAxeViolations(container);
-  });
-
-  it('card 类型：role 语义不变，无 axe violations', async () => {
-    const { container } = renderWithLocale(TabsFixture, {
-      props: { type: 'card' },
-    });
-    expect(container.querySelectorAll('[role="tab"]').length).toBe(3);
-    await expectNoAxeViolations(container);
-  });
-});

package/src/tabs/Tabs.kbd.test.ts

@@ -1,74 +0,0 @@
-// Tabs 键盘 e2e（browser project / 真实 chromium），horizontal tablist roving。
-// 测真实焦点移动 + 「焦点即激活」（keyboardActivation='auto' 默认）——jsdom 测不了
-// （焦点模型不完整、命令式 focus() 不可靠）：
-//   1. roving 单停靠点：选中 tab 的 tabindex=0，其余 -1；Tab 从 before 进入只停在选中 tab。
-//   2. ←→ 真实移动焦点到相邻 tab（环绕），auto 模式下焦点移动即激活对应面板。
-//   3. Home/End 跳首/末 tab。
-//   4. Tab 离开 tablist 后落到 after 按钮（单停靠点，不困在 tablist 里）。
-//
-// 真实焦点断言用 page locator 的 .toHaveFocus()（对真实 document.activeElement 重试断言）。
-import { describe, it, expect } from 'vitest';
-import { page } from 'vitest/browser';
-import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
-import TabsKbdFixture from './TabsKbdFixture.svelte';
-
-function loc(el: Element) {
-  return page.elementLocator(el);
-}
-
-describe('Tabs 键盘 e2e（horizontal roving + auto 激活）', () => {
-  it('roving 单停靠点 + ←→ 移动焦点即激活 + Home/End 跳首末', async () => {
-    const { baseElement } = renderKbdFixture(TabsKbdFixture);
-
-    const tabs = Array.from(baseElement.querySelectorAll<HTMLElement>('[role="tab"]'));
-    expect(tabs.length).toBe(3);
-    const [overview, details, history] = tabs as [HTMLElement, HTMLElement, HTMLElement];
-
-    // 1. roving 单停靠点：默认选中首个 tab（defaultValue='overview'），其 tabindex=0，其余 -1。
-    expect(tabs.filter((el) => el.tabIndex === 0).length).toBe(1);
-    expect(overview.tabIndex).toBe(0);
-    expect(overview.getAttribute('aria-selected')).toBe('true');
-
-    // 从 before 按钮 Tab 进入：只停靠在选中 tab，不逐个进入。
-    const before = baseElement.querySelector('[data-testid="before"]') as HTMLElement;
-    before.focus();
-    await expect.element(loc(before)).toHaveFocus();
-    await userEvent.tab();
-    await expect.element(loc(overview)).toHaveFocus();
-
-    // 2. → 移动焦点到下一 tab；auto 模式焦点即激活（aria-selected + 停靠点同步）。
-    await userEvent.keyboard('{ArrowRight}');
-    await expect.element(loc(details)).toHaveFocus();
-    expect(details.getAttribute('aria-selected')).toBe('true');
-    expect(details.tabIndex).toBe(0);
-    expect(overview.tabIndex).toBe(-1);
-
-    await userEvent.keyboard('{ArrowRight}');
-    await expect.element(loc(history)).toHaveFocus();
-    expect(history.getAttribute('aria-selected')).toBe('true');
-
-    // 环绕：末项 → 回到首项。
-    await userEvent.keyboard('{ArrowRight}');
-    await expect.element(loc(overview)).toHaveFocus();
-
-    // ← 环绕到末项。
-    await userEvent.keyboard('{ArrowLeft}');
-    await expect.element(loc(history)).toHaveFocus();
-
-    // 3. Home/End 跳首/末。
-    await userEvent.keyboard('{Home}');
-    await expect.element(loc(overview)).toHaveFocus();
-    await userEvent.keyboard('{End}');
-    await expect.element(loc(history)).toHaveFocus();
-    expect(history.getAttribute('aria-selected')).toBe('true');
-
-    // 4. Tab 离开 tablist：单停靠点 → 焦点先到选中面板（APG tabpanel 为 tabindex=0 的 Tab 停靠点），
-    //    再 Tab 才到 after 按钮（不困在 tablist 内逐个 tab）。
-    const panel = baseElement.querySelector('[role="tabpanel"]') as HTMLElement;
-    await userEvent.tab();
-    await expect.element(loc(panel)).toHaveFocus();
-    const after = baseElement.querySelector('[data-testid="after"]') as HTMLElement;
-    await userEvent.tab();
-    await expect.element(loc(after)).toHaveFocus();
-  });
-});