@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/menu/types.ts

@@ -1,120 +0,0 @@
-import type { Snippet } from 'svelte';
-
-/** Menu 项键类型。 */
-export type MenuKey = string | number;
-
-/** 普通菜单项；含 children 即为可展开的 SubMenu。 */
-export interface MenuItemNode {
-  /** 非分隔符/分组时无需 type，默认即普通项；显式可写 'item' */
-  type?: 'item';
-  key: MenuKey;
-  label: string;
-  disabled?: boolean;
-  /** 项前自定义图标 */
-  icon?: Snippet;
-  children?: MenuItemDef[];
-  /**
-   * 链接地址。仅 navigation 用途生效：叶子项渲染为原生 `<a href>` 走站点导航语义；
-   * menu 用途（默认命令式菜单）忽略此字段，叶子仍为 button + onClick。
-   */
-  href?: string;
-  /** 链接 target（如 '_blank'）；仅 navigation + href 渲染 `<a>` 时透传。 */
-  target?: string;
-  /** 链接 rel（如 'noopener noreferrer'）；仅 navigation + href 渲染 `<a>` 时透传。 */
-  rel?: string;
-}
-
-/**
- * 分隔符项：渲染为一条水平分隔线，不可选不可聚焦（role=separator）。
- * 无需 key/label；为避免 #each 缺 key 警告，渲染时按索引生成兜底 key。
- */
-export interface MenuDividerNode {
-  type: 'divider';
-  key?: MenuKey;
-}
-
-/**
- * 分组项：渲染为不可点击的组标题 + 其下始终展开的菜单项。
- * 区别于 SubMenu（可展开/收起）——group 是始终展开的分区标题。
- */
-export interface MenuGroupNode {
-  type: 'group';
-  key?: MenuKey;
-  /** 分组标题文案 */
-  label: string;
-  children: MenuItemDef[];
-}
-
-/**
- * Menu 数据项。向后兼容：普通项可省略 type；
- * 通过 type='divider' / type='group' 扩展分隔符与分组标题。
- */
-export type MenuItemDef = MenuItemNode | MenuDividerNode | MenuGroupNode;
-
-/** 类型守卫：分隔符项。 */
-export function isDivider(item: MenuItemDef): item is MenuDividerNode {
-  return (item as MenuDividerNode).type === 'divider';
-}
-
-/** 类型守卫：分组项。 */
-export function isGroup(item: MenuItemDef): item is MenuGroupNode {
-  return (item as MenuGroupNode).type === 'group';
-}
-
-/**
- * Menu 用途（语义区分）：
- * - 'menu'（默认）：命令式菜单，执行操作。容器 role=menu/menubar，
- *   叶子 role=menuitem（多选 menuitemcheckbox），button + onClick，roving 键盘。
- * - 'navigation'：站点导航。容器为 nav landmark（无 menu role），
- *   含 href 的叶子渲染原生 `<a href>`，沿用浏览器原生链接 + Tab 键序，不用 menuitem role。
- */
-export type MenuPurpose = 'menu' | 'navigation';
-
-/** 容器 ARIA 角色集合，由 purpose + mode 纯函数派生（红线 #2）。 */
-export interface MenuSemantics {
-  /** 是否为 navigation 用途（原生链接语义）。 */
-  navigation: boolean;
-  /** 最外层 ul 的 role；navigation 下为 undefined（用原生 list 语义 + nav landmark 包裹）。 */
-  listRole: 'menu' | 'menubar' | undefined;
-  /** 叶子项控件 role；navigation 下为 undefined（原生 a/button 语义）。 */
-  leafRole: 'menuitem' | 'menuitemcheckbox' | undefined;
-  /** SubMenu 标题控件 role；navigation 下为 undefined。 */
-  submenuTitleRole: 'menuitem' | undefined;
-  /** 内嵌/浮层子列表 role；navigation 下为 undefined。 */
-  subListRole: 'menu' | undefined;
-  /** 分组/分隔等结构 li 的 role（none）；navigation 下为 undefined（原生 li）。 */
-  structuralRole: 'none' | undefined;
-  /** group 子列表 role；navigation 下为 undefined。 */
-  groupListRole: 'group' | undefined;
-}
-
-/**
- * 纯函数：据 purpose + mode + multiple 派生容器/项的 ARIA 角色。
- * 无副作用、不读 DOM/registry（红线 #2）。
- */
-export function deriveMenuSemantics(
-  purpose: MenuPurpose,
-  mode: 'vertical' | 'inline' | 'horizontal',
-  multiple: boolean,
-): MenuSemantics {
-  if (purpose === 'navigation') {
-    return {
-      navigation: true,
-      listRole: undefined,
-      leafRole: undefined,
-      submenuTitleRole: undefined,
-      subListRole: undefined,
-      structuralRole: undefined,
-      groupListRole: undefined,
-    };
-  }
-  return {
-    navigation: false,
-    listRole: mode === 'horizontal' ? 'menubar' : 'menu',
-    leafRole: multiple ? 'menuitemcheckbox' : 'menuitem',
-    submenuTitleRole: 'menuitem',
-    subListRole: 'menu',
-    structuralRole: 'none',
-    groupListRole: 'group',
-  };
-}

package/src/meta.test.ts

@@ -1,173 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { meta as buttonMeta } from './button/meta.js';
-import { meta as iconMeta } from './icon/meta.js';
-import { meta as dividerMeta } from './divider/meta.js';
-import { meta as spaceMeta } from './space/meta.js';
-import { meta as typographyMeta } from './typography/meta.js';
-import { meta as gridMeta } from './grid/meta.js';
-import { meta as layoutMeta } from './layout/meta.js';
-import { meta as inputMeta } from './input/meta.js';
-import { meta as textareaMeta } from './textarea/meta.js';
-import { meta as switchMeta } from './switch/meta.js';
-import { meta as checkboxMeta } from './checkbox/meta.js';
-import { meta as radioMeta } from './radio/meta.js';
-import { meta as inputNumberMeta } from './input-number/meta.js';
-import { meta as ratingMeta } from './rating/meta.js';
-import { meta as sliderMeta } from './slider/meta.js';
-import { meta as formMeta } from './form/meta.js';
-import { meta as selectMeta } from './select/meta.js';
-import { meta as autocompleteMeta } from './autocomplete/meta.js';
-import { meta as tagInputMeta } from './tag-input/meta.js';
-import { meta as colorPickerMeta } from './color-picker/meta.js';
-import { meta as datePickerMeta } from './date-picker/meta.js';
-import { meta as timePickerMeta } from './time-picker/meta.js';
-import { meta as cascaderMeta } from './cascader/meta.js';
-import { meta as treeSelectMeta } from './tree-select/meta.js';
-import { meta as transferMeta } from './transfer/meta.js';
-import { meta as uploadMeta } from './upload/meta.js';
-import { meta as breadcrumbMeta } from './breadcrumb/meta.js';
-import { meta as paginationMeta } from './pagination/meta.js';
-import { meta as stepsMeta } from './steps/meta.js';
-import { meta as tabsMeta } from './tabs/meta.js';
-import { meta as dropdownMeta } from './dropdown/meta.js';
-import { meta as menuMeta } from './menu/meta.js';
-import { meta as anchorMeta } from './anchor/meta.js';
-import { meta as tagMeta } from './tag/meta.js';
-import { meta as avatarMeta } from './avatar/meta.js';
-import { meta as badgeMeta } from './badge/meta.js';
-import { meta as cardMeta } from './card/meta.js';
-import { meta as tooltipMeta } from './tooltip/meta.js';
-import { meta as popoverMeta } from './popover/meta.js';
-import { meta as emptyMeta } from './empty/meta.js';
-import { meta as descriptionsMeta } from './descriptions/meta.js';
-import { meta as collapseMeta } from './collapse/meta.js';
-import { meta as timelineMeta } from './timeline/meta.js';
-import { meta as listMeta } from './list/meta.js';
-import { meta as imageMeta } from './image/meta.js';
-import { meta as highlightMeta } from './highlight/meta.js';
-import { meta as virtualListMeta } from './virtual-list/meta.js';
-import { meta as carouselMeta } from './carousel/meta.js';
-import { meta as treeMeta } from './tree/meta.js';
-import { meta as tableMeta } from './table/meta.js';
-import { meta as calendarMeta } from './calendar/meta.js';
-import { meta as scrollListMeta } from './scroll-list/meta.js';
-import { meta as overflowListMeta } from './overflow-list/meta.js';
-import { meta as spinMeta } from './spin/meta.js';
-import { meta as progressMeta } from './progress/meta.js';
-import { meta as skeletonMeta } from './skeleton/meta.js';
-import { meta as bannerMeta } from './banner/meta.js';
-import { meta as modalMeta } from './modal/meta.js';
-import { meta as popconfirmMeta } from './popconfirm/meta.js';
-import { meta as drawerMeta } from './drawer/meta.js';
-import { meta as sideSheetMeta } from './side-sheet/meta.js';
-import { meta as toastMeta } from './toast/meta.js';
-import { meta as notificationMeta } from './notification/meta.js';
-import { meta as backTopMeta } from './back-top/meta.js';
-import { meta as localeProviderMeta } from './locale-provider/meta.js';
-import { meta as configProviderMeta } from './config-provider/meta.js';
-import { meta as resizeObserverMeta } from './resize-observer/meta.js';
-import { meta as lottieIconMeta } from './lottie-icon/meta.js';
-
-const metas = {
-  buttonMeta,
-  iconMeta,
-  dividerMeta,
-  spaceMeta,
-  typographyMeta,
-  gridMeta,
-  layoutMeta,
-  inputMeta,
-  textareaMeta,
-  switchMeta,
-  checkboxMeta,
-  radioMeta,
-  inputNumberMeta,
-  ratingMeta,
-  sliderMeta,
-  formMeta,
-  selectMeta,
-  autocompleteMeta,
-  tagInputMeta,
-  colorPickerMeta,
-  datePickerMeta,
-  timePickerMeta,
-  cascaderMeta,
-  treeSelectMeta,
-  transferMeta,
-  uploadMeta,
-  breadcrumbMeta,
-  paginationMeta,
-  stepsMeta,
-  tabsMeta,
-  dropdownMeta,
-  menuMeta,
-  anchorMeta,
-  tagMeta,
-  avatarMeta,
-  badgeMeta,
-  cardMeta,
-  tooltipMeta,
-  popoverMeta,
-  emptyMeta,
-  descriptionsMeta,
-  collapseMeta,
-  timelineMeta,
-  listMeta,
-  imageMeta,
-  highlightMeta,
-  virtualListMeta,
-  carouselMeta,
-  treeMeta,
-  tableMeta,
-  calendarMeta,
-  scrollListMeta,
-  overflowListMeta,
-  spinMeta,
-  progressMeta,
-  skeletonMeta,
-  bannerMeta,
-  modalMeta,
-  popconfirmMeta,
-  drawerMeta,
-  sideSheetMeta,
-  toastMeta,
-  notificationMeta,
-  backTopMeta,
-  localeProviderMeta,
-  configProviderMeta,
-  resizeObserverMeta,
-  lottieIconMeta,
-};
-
-type PropEntry = { name?: string; type?: string };
-
-/** collect prop entries from either a flat `props` or aggregated `subComponents[].props` */
-function allProps(m: Record<string, unknown>): PropEntry[] {
-  if (Array.isArray(m.props)) return m.props as PropEntry[];
-  if (Array.isArray(m.subComponents)) {
-    return (m.subComponents as Array<{ props?: PropEntry[] }>).flatMap(
-      (sc) => sc.props ?? [],
-    );
-  }
-  return [];
-}
-
-describe('component metadata', () => {
-  it.each(Object.entries(metas))('%s is well-formed', (_name, m) => {
-    expect(m.name).toBeTruthy();
-    expect(['basic', 'input', 'navigation', 'show', 'feedback', 'other']).toContain(
-      m.category,
-    );
-    expect(m.description).toBeTruthy();
-    expect(allProps(m).length).toBeGreaterThan(0);
-  });
-
-  it('every prop entry has name and type', () => {
-    for (const m of Object.values(metas)) {
-      for (const p of allProps(m)) {
-        expect(p.name, `${m.name} prop`).toBeTruthy();
-        expect(p.type, `${m.name}.${p.name} type`).toBeTruthy();
-      }
-    }
-  });
-});

package/src/modal/ConfirmModal.svelte

@@ -1,173 +0,0 @@
-<!--
-  ConfirmModal — 命令式 modal.confirm/info/... 的渲染外壳。
-  包装基础 Modal，加类型图标 + 标题/内容；onOk 返回 Promise 时自动 confirmLoading，
-  resolve 后关闭、reject 复位保持打开。仅供 command.ts mount 使用，不在 barrel 暴露为组件。
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { Modal } from './index.js';
-  import { Button } from '../button/index.js';
-  import { useLocale } from '../locale-provider/index.js';
-
-  type ConfirmType = 'confirm' | 'info' | 'success' | 'warning' | 'error';
-
-  interface Props {
-    type?: ConfirmType;
-    title?: string;
-    content?: string;
-    okText?: string;
-    cancelText?: string;
-    /** confirm 显示取消按钮；info/success/warning/error 默认单按钮 */
-    showCancel?: boolean;
-    width?: number | string;
-    centered?: boolean;
-    zIndex?: number;
-    /** 返回 Promise 时自动 loading，resolve 关闭 / reject 复位 */
-    onOk?: () => void | Promise<unknown>;
-    onCancel?: () => void;
-    /** 关闭动画结束后由宿主卸载用 */
-    onClose?: () => void;
-    /** 自定义图标（Snippet），覆盖内置类型图标 */
-    icon?: Snippet;
-  }
-
-  let {
-    type = 'confirm',
-    title,
-    content,
-    okText,
-    cancelText,
-    showCancel = type === 'confirm',
-    width = 416,
-    centered = true,
-    zIndex,
-    onOk,
-    onCancel,
-    onClose,
-    icon,
-  }: Props = $props();
-
-  const loc = useLocale();
-
-  let open = $state(true);
-  let loading = $state(false);
-
-  const okType = $derived<'primary' | 'danger'>(
-    type === 'error' || type === 'warning' ? 'danger' : 'primary',
-  );
-
-  function close() {
-    open = false;
-    // 静态显示无动画，关闭后下一微任务通知宿主卸载
-    queueMicrotask(() => onClose?.());
-  }
-
-  async function handleOk() {
-    if (loading) return;
-    const result = onOk?.();
-    if (result instanceof Promise) {
-      loading = true;
-      try {
-        await result;
-        close();
-      } catch {
-        loading = false; // reject：复位，保持打开
-      }
-    } else {
-      close();
-    }
-  }
-
-  function handleCancel() {
-    onCancel?.();
-    close();
-  }
-</script>
-
-<div class="cd-confirm-modal" style={zIndex !== undefined ? `--cd-modal-z:${zIndex}` : undefined}>
-  <Modal
-    {open}
-    title={title ?? ''}
-    {width}
-    {centered}
-    closable={false}
-    maskClosable={false}
-    confirmLoading={loading}
-    onOk={handleOk}
-    onCancel={handleCancel}
-  >
-    {#snippet footer()}
-      {#if showCancel}
-        <Button onclick={handleCancel} disabled={loading}>
-          {cancelText ?? loc().t('Modal.cancelText')}
-        </Button>
-      {/if}
-      <Button type={okType} loading={loading} onclick={handleOk}>
-        {okText ?? loc().t('Modal.okText')}
-      </Button>
-    {/snippet}
-    <div class="cd-confirm-modal__body">
-      <span class="cd-confirm-modal__icon cd-confirm-modal__icon--{type}" aria-hidden="true">
-        {#if icon}
-          {@render icon()}
-        {:else if type === 'success'}
-          <svg width="22" height="22" viewBox="0 0 16 16" fill="none">
-            <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" />
-            <path d="M5 8.2 7 10.2 11 5.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-          </svg>
-        {:else if type === 'error'}
-          <svg width="22" height="22" viewBox="0 0 16 16" fill="none">
-            <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" />
-            <path d="M5.5 5.5 10.5 10.5M10.5 5.5 5.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-          </svg>
-        {:else if type === 'warning' || type === 'confirm'}
-          <svg width="22" height="22" viewBox="0 0 16 16" fill="none">
-            <path d="M8 2 1.5 13.5h13L8 2Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
-            <path d="M8 6.3v3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-            <circle cx="8" cy="11.4" r="0.85" fill="currentColor" />
-          </svg>
-        {:else}
-          <svg width="22" height="22" viewBox="0 0 16 16" fill="none">
-            <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" />
-            <path d="M8 7.2v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-            <circle cx="8" cy="4.7" r="0.9" fill="currentColor" />
-          </svg>
-        {/if}
-      </span>
-      {#if content}
-        <p class="cd-confirm-modal__content">{content}</p>
-      {/if}
-    </div>
-  </Modal>
-</div>
-
-<style>
-  .cd-confirm-modal__body {
-    display: flex;
-    gap: var(--cd-spacing-3);
-    align-items: flex-start;
-  }
-  .cd-confirm-modal__icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    line-height: 1;
-  }
-  .cd-confirm-modal__icon--success {
-    color: var(--cd-color-success);
-  }
-  .cd-confirm-modal__icon--error {
-    color: var(--cd-color-danger);
-  }
-  .cd-confirm-modal__icon--warning,
-  .cd-confirm-modal__icon--confirm {
-    color: var(--cd-color-warning);
-  }
-  .cd-confirm-modal__icon--info {
-    color: var(--cd-color-primary);
-  }
-  .cd-confirm-modal__content {
-    margin: 0;
-    color: var(--cd-color-text-1);
-    line-height: 1.6;
-  }
-</style>

package/src/modal/Modal.a11y.test.ts

@@ -1,46 +0,0 @@
-// Modal a11y 试点：复杂浮层组件（portal 到 body、focus-trap、scroll-lock）。
-// 验证复杂组件能在 jsdom 渲染 + axe 扫描通过。
-//
-// 注意：本套件不测真实焦点移动/focus-trap 行为（jsdom 焦点模型不完整），
-// 只断言静态 ARIA（role=dialog / aria-modal / aria-labelledby）+ axe 0 violations。
-// Modal 用 use:portal 把面板 appendChild 到 document.body，故扫描 document.body。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import Modal from './Modal.svelte';
-
-describe('Modal a11y', () => {
-  it('open + title：role=dialog / aria-modal / aria-labelledby，无 axe violations', async () => {
-    renderWithLocale(Modal, {
-      props: { open: true, title: 'Delete item' },
-    });
-
-    // portal 到 body —— 在 document 全局查询而非 container。
-    const dialog = document.querySelector('[role="dialog"]') as HTMLElement | null;
-    expect(dialog).not.toBeNull();
-    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('Delete item');
-
-    // 默认 footer 的 ok/cancel 文案来自 en_US locale（验证 LocaleProvider 管线）。
-    const closeBtn = document.querySelector('.cd-modal__close') as HTMLElement | null;
-    expect(closeBtn?.getAttribute('aria-label')).toBeTruthy();
-
-    await expectNoAxeViolations(document.body);
-  });
-
-  it('无 title + ariaLabel：role=dialog 用 aria-label 提供可访问名', async () => {
-    renderWithLocale(Modal, {
-      props: { open: true, ariaLabel: 'Settings dialog', closable: false, footer: null },
-    });
-
-    const dialog = document.querySelector('[role="dialog"]') as HTMLElement | null;
-    expect(dialog?.getAttribute('aria-label')).toBe('Settings dialog');
-    expect(dialog?.getAttribute('aria-labelledby')).toBeNull();
-
-    await expectNoAxeViolations(document.body);
-  });
-});

package/src/modal/Modal.kbd.test.ts

@@ -1,65 +0,0 @@
-// Modal 键盘 e2e（browser project / 真实 chromium）。
-// 测 focus-trap 的真实焦点行为——jsdom 完全测不了（焦点模型不完整）：
-//   1. 打开 Modal 后焦点进入对话框内（首个可聚焦元素）。
-//   2. Tab 循环被困在 Modal 内：Tab 到最后一个可聚焦元素后再 Tab 回到第一个；
-//      Shift+Tab 从第一个回到最后一个。
-//   3. 关闭后焦点归还触发元素（trigger 按钮）。
-//
-// 真实焦点断言用 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 ModalKbdFixture from './ModalKbdFixture.svelte';
-
-// 把任意 DOM 元素包成可断言焦点的 locator。
-function loc(el: Element) {
-  return page.elementLocator(el);
-}
-
-describe('Modal 键盘 e2e（focus trap）', () => {
-  it('打开后焦点进入对话框；Tab 循环困在 Modal 内；关闭后焦点归还 trigger', async () => {
-    const { baseElement } = renderKbdFixture(ModalKbdFixture);
-
-    // 先聚焦 trigger，再点击打开（点击会先聚焦该按钮，作为归还焦点的锚点）。
-    const trigger = baseElement.querySelector('[data-testid="trigger"]') as HTMLButtonElement;
-    expect(trigger).not.toBeNull();
-    await userEvent.click(trigger);
-
-    // Modal portal 到 body —— 在 document 范围查询对话框。
-    const dialog = document.querySelector('[role="dialog"]') as HTMLElement;
-    expect(dialog).not.toBeNull();
-
-    // 1. 焦点进入对话框内（首个可聚焦元素，焦点陷阱 activate 时聚焦它）。
-    await expect.element(loc(dialog)).toBeInTheDocument();
-    // activeElement 落在对话框内部（而非 trigger 或 body）。
-    expect(dialog.contains(document.activeElement)).toBe(true);
-
-    // 收集对话框内所有可聚焦元素，按 DOM 顺序（焦点陷阱用同一选择器循环）。
-    const focusables = 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);
-    expect(focusables.length).toBeGreaterThan(1);
-    const first = focusables[0]!;
-    const last = focusables[focusables.length - 1]!;
-
-    // 2a. 把焦点移到最后一个可聚焦元素，再 Tab → 焦点循环回第一个（被困住，不逃出 Modal）。
-    last.focus();
-    await expect.element(loc(last)).toHaveFocus();
-    await userEvent.tab();
-    await expect.element(loc(first)).toHaveFocus();
-    // 焦点没逃到 trigger（仍在对话框内）。
-    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 关闭（keyboard=true 默认）—— focus-trap deactivate 把焦点归还 trigger。
-    await userEvent.keyboard('{Escape}');
-    const triggerLoc = baseElement.querySelector('[data-testid="trigger"]') as HTMLElement;
-    await expect.element(loc(triggerLoc)).toHaveFocus();
-  });
-});