@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/modal/meta.js

@@ -1,164 +1,150 @@
 /**
  * Machine-readable component metadata for AI/docs consumption.
- * Modal — see specs/components/feedback/Modal.spec.md
+ * Modal — 严格镜像 Semi Design。见 Modal.svelte 顶部注释。
  */
 export const meta = {
     name: 'Modal',
     category: 'feedback',
-    description: '模态对话框：fixed 遮罩 + 面板，portal 到 body（或 getContainer）脱离父层叠上下文，role=dialog aria-modal；useFocusTrap 焦点捕获与归还、Esc/遮罩点击关闭（受 keyboard/maskClosable 控制）、useScrollLock 锁背景滚动；头/体/尾结构，ok/cancel 默认按钮可换自定义尾部，danger okType；reduced-motion 关闭过渡。受控 open 不回写，仅 onOpenChange/onCancel 通知。destroyOnClose 关闭即卸载内容、重开重建（默认 false 保留 DOM）。draggable 按住标题栏拖动面板（偏移派生 transform 叠加定位，重开重置，pointer 事件绑 window）。堆叠 z-index 由模块级计数器分配（声明式与命令式共享，后开者在上、关闭回收）。命令式工厂 Modal.confirm/info/success/warning/error（亦可解构 modal）：mount 到 body 临时 host、async onOk 自动 loading、返回 { destroy, update }。',
-    exports: ['Modal', 'modal'],
+    description: '模态对话框，严格镜像 Semi Design。DOM：.cd-modal-fixed > .cd-modal-mask + .cd-modal-wrap(role=none 滚动/遮罩点击) > .cd-modal(尺寸壳) > .cd-modal-content(role=dialog aria-modal)。API 对齐 Semi 名：visible/closeOnEsc/getPopupContainer/afterClose/motion/okType(5 种)/size(small|medium|large|full-width)/header(Snippet)/footerFill 等。关闭按钮用 IconButton + IconClose（@chenzy-design/icons），标题用 Typography.Title heading=5。受控 visible 不回写，仅 onVisibleChange/onCancel 通知。命令式工厂 Modal.confirm/info/success/warning/error（异步 onOk 自动 loading）+ Modal.destroyAll + Modal.useModal（配合 ModalContextHolder 继承 context）。可拖拽经 modalRender + DragMove（对齐 Semi）。堆叠 z-index 由模块级计数器分配（声明式与命令式共享）。',
+    exports: ['Modal', 'ModalContextHolder', 'modal', 'useModal'],
     props: [
-        { name: 'open', type: 'boolean', default: 'undefined', desc: '受控显隐；受控时不回写' },
+        { name: 'visible', type: 'boolean', default: 'undefined', desc: '对话框是否可见（受控；受控时不回写）' },
         { name: 'title', type: 'string', default: 'undefined', desc: '标题文案' },
+        { name: 'header', type: 'Snippet | null', default: 'undefined', desc: '自定义头部，null 不展示头部' },
+        { name: 'width', type: 'number | string', default: '448', desc: '宽度' },
+        { name: 'height', type: 'number | string', default: 'undefined', desc: '高度' },
         {
-            name: 'titleSnippet',
-            type: 'Snippet',
+            name: 'size',
+            type: "'small' | 'medium' | 'large' | 'full-width'",
             default: 'undefined',
-            desc: '自定义标题，覆盖 title',
+            desc: '预设宽度：small(448) / medium(684) / large(920) / full-width(100vw-64px)',
         },
-        { name: 'width', type: 'number|string', default: '448', desc: '面板宽度' },
-        { name: 'centered', type: 'boolean', default: 'false', desc: '垂直居中（否则距顶）' },
+        { name: 'centered', type: 'boolean', default: 'false', desc: '垂直居中' },
         { name: 'closable', type: 'boolean', default: 'true', desc: '右上角关闭按钮' },
+        { name: 'closeIcon', type: 'Snippet', default: 'undefined', desc: '自定义关闭图标' },
         { name: 'maskClosable', type: 'boolean', default: 'true', desc: '点遮罩关闭' },
-        { name: 'keyboard', type: 'boolean', default: 'true', desc: 'Esc 关闭' },
-        {
-            name: 'draggable',
-            type: 'boolean',
-            default: 'false',
-            desc: '按住标题栏拖动面板（偏移叠加在定位上，重开重置）；鼠标增强不影响键盘/焦点',
-        },
-        {
-            name: 'confirmLoading',
-            type: 'boolean',
-            default: 'false',
-            desc: '确认按钮 loading 态',
-        },
-        { name: 'okText', type: 'string', default: "'确定'" },
-        { name: 'cancelText', type: 'string', default: "'取消'" },
-        { name: 'okType', type: "'primary'|'danger'", default: "'primary'", desc: '确认按钮类型' },
+        { name: 'closeOnEsc', type: 'boolean', default: 'true', desc: 'Esc 关闭' },
+        { name: 'confirmLoading', type: 'boolean', default: 'false', desc: '确认按钮 loading' },
+        { name: 'okText', type: 'string', default: 'undefined', desc: '确认按钮文字' },
+        { name: 'cancelText', type: 'string', default: 'undefined', desc: '取消按钮文字' },
+        {
+            name: 'okType',
+            type: "'primary'|'secondary'|'tertiary'|'warning'|'danger'",
+            default: "'primary'",
+            desc: '确认按钮类型',
+        },
+        { name: 'okButtonProps', type: 'Record<string, unknown>', default: 'undefined', desc: '确认按钮额外 props' },
+        { name: 'cancelButtonProps', type: 'Record<string, unknown>', default: 'undefined', desc: '取消按钮额外 props' },
+        { name: 'hasCancel', type: 'boolean', default: 'true', desc: '是否显示取消按钮' },
         {
-            name: 'destroyOnClose',
-            type: 'boolean',
-            default: 'false',
-            desc: '关闭即卸载内部内容（{#if} 卸载），重开重建；默认保留 DOM 仅隐藏',
+            name: 'footer',
+            type: 'Snippet<[{ ok; cancel }]> | null',
+            default: 'undefined',
+            desc: 'null 隐藏默认按钮；snippet 自定义尾部（接收 { ok, cancel }）',
         },
-        {
-            name: 'getContainer',
+        { name: 'footerFill', type: 'boolean', default: 'false', desc: '底部按钮撑满' },
+        { name: 'mask', type: 'boolean', default: 'true', desc: '是否显示遮罩' },
+        { name: 'maskStyle', type: 'string', default: 'undefined', desc: '遮罩内联样式' },
+        { name: 'bodyStyle', type: 'string', default: 'undefined', desc: '内容区内联样式' },
+        { name: 'style', type: 'string', default: 'undefined', desc: '根节点内联样式（如 top）' },
+        { name: 'class', type: 'string', default: 'undefined', desc: '根节点类名' },
+        { name: 'modalContentClass', type: 'string', default: 'undefined', desc: '内容区类名' },
+        { name: 'fullScreen', type: 'boolean', default: 'false', desc: '全屏（覆盖 width/height）' },
+        { name: 'motion', type: 'boolean', default: 'true', desc: '动画开关' },
+        {
+            name: 'getPopupContainer',
             type: '() => HTMLElement | null',
             default: 'undefined',
-            desc: 'Portal 容器，缺省 document.body',
+            desc: '指定父级 DOM，缺省 document.body',
         },
+        { name: 'zIndex', type: 'number', default: 'undefined', desc: '遮罩/面板的 z-index（缺省由堆叠计数分配）' },
+        { name: 'keepDOM', type: 'boolean', default: 'false', desc: '关闭时保留内部组件不销毁' },
+        { name: 'lazyRender', type: 'boolean', default: 'true', desc: '配合 keepDOM，为 true 时挂载时不渲染' },
+        { name: 'icon', type: 'Snippet', default: 'undefined', desc: '命令式类型图标' },
         {
-            name: 'footer',
-            type: 'Snippet<[{ ok; cancel }]>|null',
+            name: 'modalRender',
+            type: 'Snippet<[Snippet]>',
             default: 'undefined',
-            desc: 'null 隐藏默认按钮；snippet 自定义尾部',
+            desc: '自定义渲染 Modal content；接收默认 content Snippet，返回包裹结构（可拖拽经此 + DragMove）',
         },
         { name: 'children', type: 'Snippet', default: 'undefined', desc: '内容主体' },
         { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '无 title 时的 aria-label' },
-        { name: 'onOk', type: '() => void', default: 'undefined' },
-        { name: 'onCancel', type: '() => void', default: 'undefined' },
-        { name: 'onOpenChange', type: '(open: boolean) => void', default: 'undefined' },
-        { name: 'onAfterClose', type: '() => void', default: 'undefined', desc: '关闭过渡结束触发' },
+        { name: 'onOk', type: '() => void', default: 'undefined', desc: '点击确认' },
+        { name: 'onCancel', type: '() => void', default: 'undefined', desc: '取消/关闭' },
+        { name: 'afterClose', type: '() => void', default: 'undefined', desc: '对话框完全关闭后回调' },
+        { name: 'onVisibleChange', type: '(visible: boolean) => void', default: 'undefined', desc: '显隐变化通知' },
         {
-            name: 'okButtonProps',
-            type: 'Record<string, unknown>',
-            default: 'undefined',
-            desc: '透传给确定按钮的额外 props（如 disabled、size 等）',
-        },
-        {
-            name: 'cancelButtonProps',
-            type: 'Record<string, unknown>',
-            default: 'undefined',
-            desc: '透传给取消按钮的额外 props',
-        },
-        { name: 'hasCancel', type: 'boolean', default: 'true', desc: '是否显示取消按钮' },
-        {
-            name: 'size',
-            type: "'small'|'medium'|'large'|'full-width'",
-            default: 'undefined',
-            desc: '预设宽度枚举（small=480px, medium=600px, large=800px, full-width=100vw），优先级低于 width',
-        },
-        { name: 'fullScreen', type: 'boolean', default: 'false', desc: '全屏模式' },
-        {
-            name: 'keepDOM',
-            type: 'boolean',
-            default: 'false',
-            desc: '关闭时保留 DOM（display:none 隐藏），与 destroyOnClose 反义',
-        },
-        {
-            name: 'lazyRender',
+            name: 'maskFixed',
             type: 'boolean',
             default: 'true',
-            desc: '配合 keepDOM 的懒挂载：true 时首次打开前不渲染内容',
+            desc: '遮罩是否 position:fixed；false 时 absolute，配合 getPopupContainer 局部弹层',
         },
-        { name: 'bodyStyle', type: 'string', default: 'undefined', desc: '内容区内联 style 字符串' },
-        { name: 'maskStyle', type: 'string', default: 'undefined', desc: '遮罩层内联 style 字符串' },
-        { name: 'height', type: 'number|string', default: 'undefined', desc: 'Modal 高度' },
-        { name: 'footerFill', type: 'boolean', default: 'false', desc: '底部按钮撑满宽度' },
-        {
-            name: 'modalContentClass',
-            type: 'string',
-            default: 'undefined',
-            desc: '内容区域额外 class',
-        },
-        { name: 'closeIcon', type: 'Snippet', default: 'undefined', desc: '自定义关闭图标' },
-        { name: 'mask', type: 'boolean', default: 'true', desc: '是否显示遮罩' },
     ],
     events: [
         { name: 'onOk', desc: '确认按钮点击（非受控自动关闭）' },
         { name: 'onCancel', desc: '取消/关闭按钮/遮罩/Esc 关闭' },
-        { name: 'onOpenChange', desc: '显隐变化通知' },
-        { name: 'onAfterClose', desc: '关闭过渡结束' },
+        { name: 'onVisibleChange', desc: '显隐变化通知' },
+        { name: 'afterClose', desc: '完全关闭后' },
     ],
     slots: [
         { name: 'children', desc: '内容主体' },
-        { name: 'titleSnippet', desc: '自定义标题' },
+        { name: 'header', desc: '自定义头部（null 不展示）' },
         { name: 'footer', desc: '自定义尾部（接收 { ok, cancel }）' },
         { name: 'closeIcon', desc: '自定义关闭图标' },
+        { name: 'icon', desc: '命令式类型图标' },
+        { name: 'modalRender', desc: '自定义渲染 content（可拖拽）' },
+    ],
+    methods: [
+        { name: 'Modal.info / success / error / warning / confirm', type: '(config) => { destroy, update }', desc: '命令式弹出，异步 onOk 自动 loading' },
+        { name: 'Modal.destroyAll', type: '() => void', desc: '销毁所有命令式弹窗' },
+        { name: 'Modal.useModal', type: '() => [modal, holder]', desc: '返回命令式 api + holder，配合 <ModalContextHolder> 继承 context' },
     ],
     a11y: {
         hasRole: true,
         focusable: true,
-        note: 'role=dialog + aria-modal=true；有 title 用 aria-labelledby，无则 aria-label；useFocusTrap 捕获 Tab 焦点并在关闭时归还触发元素；Esc 关闭受 keyboard 控制；useScrollLock 锁背景滚动；关闭按钮 aria-label「关闭」。',
+        note: 'role=dialog + aria-modal=true；有 title 用 aria-labelledby 指向 Typography.Title，无则 aria-label；aria-describedby 指向 body；useFocusTrap 捕获 Tab 并在关闭时归还触发元素；closeOnEsc 控制 Esc；useScrollLock 锁背景滚动；背景 inert；关闭按钮 IconButton 有 aria-label；motion 关闭过渡受 prefers-reduced-motion 抑制。',
     },
     tokens: [
-        '--cd-modal-radius',
-        '--cd-modal-bg',
-        '--cd-modal-shadow',
-        '--cd-modal-mask-bg',
-        '--cd-modal-padding',
-        '--cd-modal-header-gap',
-        '--cd-modal-footer-gap',
-        '--cd-modal-title-color',
-        '--cd-modal-title-size',
-        '--cd-modal-body-color',
-        '--cd-modal-close-color',
-        '--cd-modal-close-hover-bg',
-        '--cd-modal-z',
-        '--cd-modal-motion-duration',
+        '--cd-color-modal-bg',
+        '--cd-color-modal-mask-bg',
+        '--cd-color-modal-main-text',
+        '--cd-color-modal-info-icon',
+        '--cd-color-modal-primary-icon',
+        '--cd-color-modal-success-icon',
+        '--cd-color-modal-danger-icon',
+        '--cd-color-modal-warning-icon',
+        '--cd-color-modal-content-border',
+        '--cd-spacing-modal-marginy',
+        '--cd-spacing-modal-content-paddingx',
+        '--cd-spacing-modal-header-marginy',
+        '--cd-spacing-modal-footer-marginy',
+        '--cd-spacing-modal-footer-button-marginleft',
+        '--cd-width-modal-small',
+        '--cd-width-modal-medium',
+        '--cd-width-modal-large',
+        '--cd-width-modal-full-width',
+        '--cd-radius-modal-content',
+        '--cd-font-modal-header-fontsize',
+        '--cd-font-modal-header-fontweight',
+        '--cd-shadow-modal-content',
     ],
     responsive: false,
     examples: [
         {
-            title: '基础确认框',
-            code: '<Modal open={visible} title="提示" onOk={() => (visible = false)} onCancel={() => (visible = false)}>确认操作？</Modal>',
-        },
-        {
-            title: '自定义尾部',
-            code: '<Modal open={visible} title="标题">\n  内容\n  {#snippet footer({ cancel })}<Button onclick={cancel}>知道了</Button>{/snippet}\n</Modal>',
+            title: '基本',
+            code: '<Modal visible={visible} title="基本对话框" onOk={() => (visible = false)} onCancel={() => (visible = false)}>内容</Modal>',
         },
         {
-            title: 'danger 确认',
-            code: '<Modal open={visible} title="删除" okType="danger" okText="删除" onOk={remove}>不可恢复，确定删除？</Modal>',
+            title: '命令式',
+            code: "Modal.confirm({ title: 'Are you sure ?', content: '...', onOk: () => fetch('/api/do') });",
         },
         {
-            title: '命令式确认（异步 onOk 自动 loading）',
-            code: "Modal.confirm({ title: '确认操作', content: '确定执行？', onOk: () => fetch('/api/do') });",
+            title: '可拖拽',
+            code: '<Modal visible={visible} title="可拖拽">\n  {#snippet modalRender(modal)}<DragMove>{@render modal()}</DragMove>{/snippet}\n  内容\n</Modal>',
         },
         {
-            title: 'destroyOnClose 重开重建',
-            code: '<Modal open={visible} title="表单" destroyOnClose>...每次重开重置内部状态...</Modal>',
+            title: 'Hooks（继承 context）',
+            code: 'const [modal, holder] = Modal.useModal();\n// <ModalContextHolder items={holder.items} /> 插入组件树',
         },
     ],
 };

package/dist/modal/use-modal.svelte.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Modal.useModal —— 对齐 Semi @douyinfe/semi-ui/modal/useModal。
+ * 返回 [modal, holder]：holder.items 传给 <ModalContextHolder {items}/> 渲染到组件树中你希望
+ * 继承 context 的位置；命令式 modal.confirm/info/… 创建的 ConfirmModal 在该位置（组件树内）
+ * 声明式渲染，从而继承该处的 Svelte context（LocaleProvider / ConfigProvider 等）——解决命令式
+ * 弹窗读不到 context 的问题（与 Semi 同理；Semi 用 ReactNode contextHolder，本库因 Svelte
+ * snippet 不能在 .ts 内定义，改为 holder.items + <ModalContextHolder>）。
+ *
+ * 与全局 `modal.confirm`（mount 到 body、脱离 context）的区别：此处在组件树内渲染、继承 context。
+ */
+import type { ModalCommandConfig, ModalCommandHandle } from './command.svelte.js';
+type ConfirmType = 'confirm' | 'info' | 'success' | 'warning' | 'error';
+export interface HookModalItem {
+    id: number;
+    type: ConfirmType;
+    config: ModalCommandConfig;
+    onClose: () => void;
+}
+type HookConfirmFn = (config: ModalCommandConfig) => ModalCommandHandle;
+export interface ModalHookApi {
+    confirm: HookConfirmFn;
+    info: HookConfirmFn;
+    success: HookConfirmFn;
+    warning: HookConfirmFn;
+    error: HookConfirmFn;
+}
+/** holder：传给 <ModalContextHolder {...holder} /> 的响应式弹窗列表载体。 */
+export interface ModalHolder {
+    readonly items: HookModalItem[];
+}
+export declare function useModal(): [ModalHookApi, ModalHolder];
+export {};
+//# sourceMappingURL=use-modal.svelte.d.ts.map

package/dist/modal/use-modal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-modal.svelte.d.ts","sourceRoot":"","sources":["../../src/modal/use-modal.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAElF,KAAK,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAExE,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,KAAK,aAAa,GAAG,CAAC,MAAM,EAAE,kBAAkB,KAAK,kBAAkB,CAAC;AAExE,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,EAAE,aAAa,CAAC;IACvB,OAAO,EAAE,aAAa,CAAC;IACvB,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,+DAA+D;AAC/D,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,KAAK,EAAE,aAAa,EAAE,CAAC;CACjC;AAID,wBAAgB,QAAQ,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,CA4CtD"}

package/dist/modal/use-modal.svelte.js

@@ -0,0 +1,44 @@
+let uuid = 0;
+export function useModal() {
+    const items = $state([]);
+    function remove(id) {
+        const idx = items.findIndex((it) => it.id === id);
+        if (idx !== -1)
+            items.splice(idx, 1);
+    }
+    function makeFn(type, defaults) {
+        return (config) => {
+            uuid += 1;
+            const id = uuid;
+            items.push({
+                id,
+                type,
+                config: { ...defaults, ...config },
+                onClose: () => remove(id),
+            });
+            return {
+                destroy: () => remove(id),
+                update: (next) => {
+                    const it = items.find((x) => x.id === id);
+                    if (it)
+                        it.config = { ...it.config, ...next };
+                },
+            };
+        };
+    }
+    const api = {
+        confirm: makeFn('confirm', { hasCancel: true }),
+        info: makeFn('info'),
+        success: makeFn('success'),
+        warning: makeFn('warning'),
+        error: makeFn('error'),
+    };
+    return [
+        api,
+        {
+            get items() {
+                return items;
+            },
+        },
+    ];
+}