@chenzy-design/svelte 0.1.0

package/dist/dropdown/types.test.js

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import { isDropdownDivider, isDropdownGroup, hasDropdownChildren, } from './types.js';
+describe('dropdown type guards', () => {
+    const leaf = { key: 'a', label: 'A' };
+    const submenu = {
+        key: 'b',
+        label: 'B',
+        children: [{ key: 'b1', label: 'B1' }],
+    };
+    const divider = { type: 'divider' };
+    const group = {
+        type: 'group',
+        label: 'G',
+        children: [{ key: 'g1', label: 'G1' }],
+    };
+    it('isDropdownDivider only matches divider nodes', () => {
+        expect(isDropdownDivider(divider)).toBe(true);
+        expect(isDropdownDivider(leaf)).toBe(false);
+        expect(isDropdownDivider(group)).toBe(false);
+        expect(isDropdownDivider(submenu)).toBe(false);
+    });
+    it('isDropdownGroup only matches group nodes', () => {
+        expect(isDropdownGroup(group)).toBe(true);
+        expect(isDropdownGroup(leaf)).toBe(false);
+        expect(isDropdownGroup(divider)).toBe(false);
+        expect(isDropdownGroup(submenu)).toBe(false);
+    });
+    it('hasDropdownChildren detects expandable submenu items', () => {
+        expect(hasDropdownChildren(submenu)).toBe(true);
+        expect(hasDropdownChildren(leaf)).toBe(false);
+        expect(hasDropdownChildren({ key: 'c', label: 'C', children: [] })).toBe(false);
+    });
+    it('backward compat: a flat item without type is a valid DropdownItem', () => {
+        const items = [
+            { key: 'edit', label: '编辑' },
+            { key: 'del', label: '删除', danger: true, disabled: true },
+        ];
+        expect(items.every((i) => !isDropdownDivider(i) && !isDropdownGroup(i))).toBe(true);
+    });
+});

package/dist/empty/Empty.a11y.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Empty.a11y.test.d.ts.map

package/dist/empty/Empty.a11y.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Empty.a11y.test.d.ts","sourceRoot":"","sources":["../../src/empty/Empty.a11y.test.ts"],"names":[],"mappings":""}

package/dist/empty/Empty.a11y.test.js

@@ -0,0 +1,22 @@
+// Empty a11y：预设插画 aria-hidden；外部图片 <img> 带 alt。
+import { describe, it, expect } from 'vitest';
+import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
+import Empty from './Empty.svelte';
+describe('Empty a11y', () => {
+    it('预设插画：image 容器 aria-hidden，无 axe violations', async () => {
+        const { container } = renderWithLocale(Empty, {
+            props: { image: 'noData', description: 'No data available' },
+        });
+        const imageBox = container.querySelector('.cd-empty__image');
+        expect(imageBox?.getAttribute('aria-hidden')).toBe('true');
+        await expectNoAxeViolations(container);
+    });
+    it('外部图片 URL：<img> 带 alt（取标题/空串），无 axe violations', async () => {
+        const { container } = renderWithLocale(Empty, {
+            props: { image: 'https://example.com/empty.png', title: 'Nothing here' },
+        });
+        const img = container.querySelector('.cd-empty__img');
+        expect(img?.getAttribute('alt')).toBe('Nothing here');
+        await expectNoAxeViolations(container);
+    });
+});

package/dist/empty/Empty.svelte

@@ -0,0 +1,304 @@
+<!--
+  Empty — see specs/components/show/Empty.spec.md
+  内置预设插画 (noData/noResult/error/construction/success/noAccess)
+  | 外部图片 URL | 自定义 snippet
+  + 标题 + 描述 + 动作 slot。layout=vertical|horizontal，responsive 窄容器收缩。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { useLocale } from '../locale-provider/index.js';
+
+  type EmptyImage =
+    | 'noData'
+    | 'noResult'
+    | 'error'
+    | 'construction'
+    | 'success'
+    | 'noAccess';
+  type Size = 'small' | 'default' | 'large';
+  type Layout = 'vertical' | 'horizontal';
+
+  interface Props {
+    /** 内置预设名，或外部图片 URL（非预设字符串按 URL 渲染 <img>） */
+    image?: EmptyImage | (string & {});
+    title?: string;
+    description?: string;
+    size?: Size;
+    /** 排布方向；horizontal 在窄容器自动降级为 vertical（需 responsive） */
+    layout?: Layout;
+    /** 是否启用容器宽度自适应收缩（CSS 容器查询，纯样式） */
+    responsive?: boolean;
+    class?: string;
+    children?: Snippet;
+    imageSlot?: Snippet;
+  }
+
+  let {
+    image = 'noData',
+    title,
+    description,
+    size = 'default',
+    layout = 'vertical',
+    responsive = true,
+    class: className = '',
+    children,
+    imageSlot,
+  }: Props = $props();
+
+  const loc = useLocale();
+
+  const presets = [
+    'noData',
+    'noResult',
+    'error',
+    'construction',
+    'success',
+    'noAccess',
+  ] as const;
+  // 纯派生：image 是否为内置预设；否则按外部图片 URL 处理。
+  const isPreset = $derived(
+    (presets as readonly string[]).includes(image),
+  );
+
+  const defaultTitles = $derived<Record<EmptyImage, string>>({
+    noData: loc().t('Empty.noData'),
+    noResult: loc().t('Empty.noResult'),
+    error: loc().t('Empty.error'),
+    construction: loc().t('Empty.construction'),
+    success: loc().t('Empty.success'),
+    noAccess: loc().t('Empty.noAccess'),
+  });
+
+  const resolvedTitle = $derived(
+    title ?? (isPreset ? defaultTitles[image as EmptyImage] : undefined),
+  );
+
+  const cls = $derived(
+    [
+      'cd-empty',
+      `cd-empty--${size}`,
+      responsive && 'cd-empty--responsive',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
+  // 内层承载 flex 布局方向；root 仅作 CSS 容器（容器查询只能影响后代）
+  const layoutCls = $derived(`cd-empty__layout cd-empty__layout--${layout}`);
+</script>
+
+<div class={cls}>
+  <div class={layoutCls}>
+  <div class="cd-empty__image" aria-hidden={isPreset ? 'true' : undefined}>
+    {#if imageSlot}
+      {@render imageSlot()}
+    {:else if !isPreset}
+      <img
+        class="cd-empty__img"
+        src={image}
+        alt={resolvedTitle ?? ''}
+        loading="lazy"
+      />
+    {:else if image === 'noData'}
+      <svg viewBox="0 0 64 64" width="64" height="64" focusable="false">
+        <rect
+          x="12"
+          y="16"
+          width="40"
+          height="32"
+          rx="3"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        />
+        <line x1="20" y1="26" x2="44" y2="26" stroke="currentColor" stroke-width="2" />
+        <line x1="20" y1="34" x2="44" y2="34" stroke="currentColor" stroke-width="2" />
+      </svg>
+    {:else if image === 'noResult'}
+      <svg viewBox="0 0 64 64" width="64" height="64" focusable="false">
+        <circle
+          cx="28"
+          cy="28"
+          r="14"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        />
+        <line x1="38" y1="38" x2="50" y2="50" stroke="currentColor" stroke-width="2" />
+      </svg>
+    {:else if image === 'construction'}
+      <svg viewBox="0 0 64 64" width="64" height="64" focusable="false">
+        <path
+          d="M10 48 24 18l3 6-11 24Z"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M54 48 40 18l-3 6 11 24Z"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linejoin="round"
+        />
+        <line x1="24" y1="18" x2="40" y2="18" stroke="currentColor" stroke-width="2" />
+        <line x1="8" y1="48" x2="56" y2="48" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+      </svg>
+    {:else if image === 'success'}
+      <svg viewBox="0 0 64 64" width="64" height="64" focusable="false">
+        <circle
+          cx="32"
+          cy="32"
+          r="20"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        />
+        <path
+          d="M22 33 29 40 43 25"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    {:else if image === 'noAccess'}
+      <svg viewBox="0 0 64 64" width="64" height="64" focusable="false">
+        <rect
+          x="18"
+          y="30"
+          width="28"
+          height="20"
+          rx="3"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        />
+        <path
+          d="M24 30v-6a8 8 0 0 1 16 0v6"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+        <circle cx="32" cy="38" r="2" fill="currentColor" />
+        <line x1="32" y1="40" x2="32" y2="44" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+      </svg>
+    {:else}
+      <svg viewBox="0 0 64 64" width="64" height="64" focusable="false">
+        <path
+          d="M32 12 56 52H8L32 12Z"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linejoin="round"
+        />
+        <line x1="32" y1="28" x2="32" y2="40" stroke="currentColor" stroke-width="2" />
+        <circle cx="32" cy="46" r="1.5" fill="currentColor" />
+      </svg>
+    {/if}
+  </div>
+
+  {#if resolvedTitle || description || children}
+    <div class="cd-empty__content">
+      {#if resolvedTitle}
+        <p class="cd-empty__title">{resolvedTitle}</p>
+      {/if}
+
+      {#if description}
+        <p class="cd-empty__description">{description}</p>
+      {/if}
+
+      {#if children}
+        <div class="cd-empty__footer">
+          {@render children()}
+        </div>
+      {/if}
+    </div>
+  {/if}
+  </div>
+</div>
+
+<style>
+  /* root 仅负责作 CSS 查询容器（responsive 时）；布局在内层 __layout */
+  .cd-empty--responsive {
+    container-type: inline-size;
+  }
+  .cd-empty__layout {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--cd-empty-gap);
+    text-align: center;
+  }
+  .cd-empty__image {
+    display: inline-flex;
+    color: var(--cd-empty-image-color);
+  }
+  .cd-empty__content {
+    display: flex;
+    flex-direction: column;
+    align-items: inherit;
+    gap: var(--cd-empty-gap);
+  }
+  .cd-empty__img {
+    display: block;
+    inline-size: 64px;
+    block-size: auto;
+    object-fit: contain;
+  }
+  .cd-empty--small .cd-empty__image :global(svg),
+  .cd-empty--small .cd-empty__img {
+    inline-size: 48px;
+    block-size: 48px;
+  }
+  .cd-empty--large .cd-empty__image :global(svg),
+  .cd-empty--large .cd-empty__img {
+    inline-size: 80px;
+    block-size: 80px;
+  }
+  .cd-empty__title {
+    margin: 0;
+    color: var(--cd-empty-title-color);
+  }
+  .cd-empty__description {
+    margin: 0;
+    color: var(--cd-empty-desc-color);
+  }
+  .cd-empty__footer {
+    margin-block-start: var(--cd-empty-gap);
+  }
+
+  /* horizontal：插画在前、文案在后，左右排列并垂直居中 */
+  .cd-empty__layout--horizontal {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    text-align: start;
+  }
+  /* horizontal 下文案列左对齐 */
+  .cd-empty__layout--horizontal .cd-empty__content {
+    align-items: flex-start;
+  }
+
+  /* 响应式收缩：root 容器窄于断点时插画变小，horizontal 降级为 vertical。
+     容器查询只作用于后代，故查询 root、命中内层 __layout */
+  @container (max-width: 320px) {
+    .cd-empty--responsive .cd-empty__layout--horizontal {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+    .cd-empty--responsive .cd-empty__layout--horizontal .cd-empty__content {
+      align-items: center;
+    }
+    .cd-empty--responsive .cd-empty__image :global(svg),
+    .cd-empty--responsive .cd-empty__img {
+      inline-size: 48px;
+      block-size: 48px;
+    }
+  }
+</style>

package/dist/empty/Empty.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+type EmptyImage = 'noData' | 'noResult' | 'error' | 'construction' | 'success' | 'noAccess';
+type Size = 'small' | 'default' | 'large';
+type Layout = 'vertical' | 'horizontal';
+interface Props {
+    /** 内置预设名，或外部图片 URL（非预设字符串按 URL 渲染 <img>） */
+    image?: EmptyImage | (string & {});
+    title?: string;
+    description?: string;
+    size?: Size;
+    /** 排布方向；horizontal 在窄容器自动降级为 vertical（需 responsive） */
+    layout?: Layout;
+    /** 是否启用容器宽度自适应收缩（CSS 容器查询，纯样式） */
+    responsive?: boolean;
+    class?: string;
+    children?: Snippet;
+    imageSlot?: Snippet;
+}
+declare const Empty: import("svelte").Component<Props, {}, "">;
+type Empty = ReturnType<typeof Empty>;
+export default Empty;
+//# sourceMappingURL=Empty.svelte.d.ts.map

package/dist/empty/Empty.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Empty.svelte.d.ts","sourceRoot":"","sources":["../../src/empty/Empty.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,KAAK,UAAU,GACX,QAAQ,GACR,UAAU,GACV,OAAO,GACP,cAAc,GACd,SAAS,GACT,UAAU,CAAC;AACf,KAAK,IAAI,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAC1C,KAAK,MAAM,GAAG,UAAU,GAAG,YAAY,CAAC;AAExC,UAAU,KAAK;IACb,4CAA4C;IAC5C,KAAK,CAAC,EAAE,UAAU,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAsIH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/empty/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Empty } from './Empty.svelte';
+export { meta as emptyMeta } from './meta.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/empty/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/empty/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,MAAM,WAAW,CAAC"}

package/dist/empty/index.js

@@ -0,0 +1,2 @@
+export { default as Empty } from './Empty.svelte';
+export { meta as emptyMeta } from './meta.js';

package/dist/empty/meta.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * See specs/00-foundation/ai-friendly.spec.md.
+ */
+export declare const meta: {
+    readonly name: "Empty";
+    readonly category: "show";
+    readonly description: "空状态，用于无数据/无搜索结果/加载失败等场景，含内置预设插画、标题、描述与动作区。";
+    readonly props: readonly [{
+        readonly name: "image";
+        readonly type: "'noData'|'noResult'|'error'|'construction'|'success'|'noAccess'|(string&{})";
+        readonly default: "'noData'";
+        readonly desc: "内置预设插画名，或外部图片 URL（非预设字符串按 URL 渲染 img）";
+    }, {
+        readonly name: "title";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "标题，默认按 image 取内置文案";
+    }, {
+        readonly name: "description";
+        readonly type: "string";
+        readonly default: "undefined";
+    }, {
+        readonly name: "size";
+        readonly type: "'small'|'default'|'large'";
+        readonly default: "default";
+    }, {
+        readonly name: "layout";
+        readonly type: "'vertical'|'horizontal'";
+        readonly default: "'vertical'";
+        readonly desc: "排布方向；horizontal 在窄容器自动降级为 vertical";
+    }, {
+        readonly name: "responsive";
+        readonly type: "boolean";
+        readonly default: "true";
+        readonly desc: "启用容器宽度自适应收缩（CSS 容器查询，纯样式）";
+    }, {
+        readonly name: "class";
+        readonly type: "string";
+        readonly default: "''";
+    }, {
+        readonly name: "children";
+        readonly type: "Snippet";
+        readonly default: "undefined";
+        readonly desc: "动作区（如按钮）";
+    }, {
+        readonly name: "imageSlot";
+        readonly type: "Snippet";
+        readonly default: "undefined";
+        readonly desc: "自定义插画";
+    }];
+    readonly a11y: {
+        readonly role: "none";
+        readonly notes: readonly ["插画 aria-hidden=true", "标题与描述为可读文本"];
+    };
+    readonly tokens: readonly ["--cd-empty-*"];
+};
+//# sourceMappingURL=meta.d.ts.map

package/dist/empty/meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/empty/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCP,CAAC"}

package/dist/empty/meta.js

@@ -0,0 +1,40 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * See specs/00-foundation/ai-friendly.spec.md.
+ */
+export const meta = {
+    name: 'Empty',
+    category: 'show',
+    description: '空状态，用于无数据/无搜索结果/加载失败等场景，含内置预设插画、标题、描述与动作区。',
+    props: [
+        {
+            name: 'image',
+            type: "'noData'|'noResult'|'error'|'construction'|'success'|'noAccess'|(string&{})",
+            default: "'noData'",
+            desc: '内置预设插画名，或外部图片 URL（非预设字符串按 URL 渲染 img）',
+        },
+        { name: 'title', type: 'string', default: 'undefined', desc: '标题，默认按 image 取内置文案' },
+        { name: 'description', type: 'string', default: 'undefined' },
+        { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
+        {
+            name: 'layout',
+            type: "'vertical'|'horizontal'",
+            default: "'vertical'",
+            desc: '排布方向；horizontal 在窄容器自动降级为 vertical',
+        },
+        {
+            name: 'responsive',
+            type: 'boolean',
+            default: 'true',
+            desc: '启用容器宽度自适应收缩（CSS 容器查询，纯样式）',
+        },
+        { name: 'class', type: 'string', default: "''" },
+        { name: 'children', type: 'Snippet', default: 'undefined', desc: '动作区（如按钮）' },
+        { name: 'imageSlot', type: 'Snippet', default: 'undefined', desc: '自定义插画' },
+    ],
+    a11y: {
+        role: 'none',
+        notes: ['插画 aria-hidden=true', '标题与描述为可读文本'],
+    },
+    tokens: ['--cd-empty-*'],
+};