@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/popconfirm/meta.js

@@ -1,200 +1,83 @@
 /**
  * Machine-readable component metadata for AI/docs consumption.
  * See specs/00-foundation/ai-friendly.spec.md.
+ * 严格对齐 Semi Design semi-ui/popconfirm。Popconfirm 封装 Popover（对齐 Semi
+ * `Popconfirm extends PopoverProps` + `<Popover content={renderConfirmPopCard}>`），
+ * 复用 Popover→Tooltip 的全部定位/触发/焦点/dismiss/12 方位/箭头基建。
+ * 无自造能力：无 type 分级 / 无 showCancel，风格由 icon + okType 搭配（对齐 Semi）。
  */
 export const meta = {
     name: 'Popconfirm',
     category: 'feedback',
-    description: '气泡确认：锚定触发元素的就地二次确认。支持 title/content、危险分级 type（default/warning/danger）、确认/取消双按钮、placement 4 向；triggerType=click/hover、onConfirm 返回 Promise 时确认按钮 loading（resolve 关闭 / reject 保持）、getPopupContainer 自定义浮层容器；destroyOnClose 关闭卸载浮层、arrowPointAtCenter 箭头指向中心、okButtonProps/cancelButtonProps 透传按钮属性、motion 入场动效（reduced-motion 退化）；role=dialog non-modal，复用 useDismiss/useFocusTrap/useFloating。',
+    description: '气泡确认框：目标元素操作需二次确认时使用。封装 Popover，内置确认/取消双按钮 + 可选右上角关闭按钮，比 Modal 更轻量。支持 title/content（content 可为函数注入 initialFocusRef）、icon（缺省 IconAlertTriangle）、okType/cancelType、okButtonProps/cancelButtonProps（含 autoFocus）、onConfirm/onCancel 返回 Promise 时对应按钮 loading（resolve 关闭 / reject 保持）、12 方位 position（默认 bottomLeft）。role=dialog non-modal。',
     exports: ['Popconfirm'],
     props: [
-        { name: 'open', type: 'boolean', default: 'undefined', desc: '受控显隐；受控时不回写，仅 onOpenChange' },
-        { name: 'visible', type: 'boolean', default: 'undefined', desc: 'open 别名（Semi 原始拼写）；open 优先' },
-        { name: 'defaultOpen', type: 'boolean', default: 'false', desc: '非受控初始显隐' },
-        { name: 'defaultVisible', type: 'boolean', default: 'undefined', desc: 'defaultOpen 别名（优先于 defaultOpen）' },
-        { name: 'title', type: 'string', default: 'undefined', desc: '确认标题' },
-        { name: 'titleSnippet', type: 'Snippet', default: 'undefined', desc: '覆盖 title' },
-        { name: 'content', type: 'string', default: 'undefined', desc: '补充说明' },
-        { name: 'contentSnippet', type: 'Snippet', default: 'undefined', desc: '覆盖 content' },
-        {
-            name: 'type',
-            type: "'default'|'danger'|'warning'",
-            default: "'default'",
-            desc: '影响图标色与默认确认按钮类型',
-        },
-        {
-            name: 'icon',
-            type: 'Snippet | false',
-            default: 'undefined',
-            desc: '自定义图标；false 隐藏；缺省按 type 默认图标',
-        },
-        { name: 'okText', type: 'string', default: "'确定'" },
-        { name: 'cancelText', type: 'string', default: "'取消'" },
-        {
-            name: 'okType',
-            type: "'primary'|'danger'",
-            default: 'undefined',
-            desc: '覆盖确认按钮类型；缺省 type=danger→danger 否则 primary',
-        },
-        {
-            name: 'cancelType',
-            type: "'primary'|'secondary'|'tertiary'|'warning'|'danger'",
-            default: "'secondary'",
-            desc: '取消按钮 type；优先级高于 cancelButtonProps.type',
-        },
-        {
-            name: 'okButtonProps',
-            type: 'Partial<ButtonProps>',
-            default: 'undefined',
-            desc: '透传确认按钮额外属性（type/theme/size 等；onclick/loading 由组件托管，不被覆盖）',
-        },
-        {
-            name: 'cancelButtonProps',
-            type: 'Partial<ButtonProps>',
-            default: 'undefined',
-            desc: '透传取消按钮额外属性（type/theme/size 等；onclick/disabled 由组件托管，不被覆盖）',
-        },
-        { name: 'showCancel', type: 'boolean', default: 'true', desc: '是否显示取消按钮' },
-        {
-            name: 'placement',
-            type: "'top'|'bottom'|'left'|'right'",
-            default: "'top'",
-            desc: '浮层方向',
-        },
-        {
-            name: 'position',
-            type: "'top'|'bottom'|'left'|'right'",
-            default: 'undefined',
-            desc: 'placement 别名（Semi 原始拼写）；placement 优先',
-        },
-        { name: 'disabled', type: 'boolean', default: 'false', desc: '禁用触发' },
-        { name: 'closeOnEsc', type: 'boolean', default: 'true', desc: 'Esc 是否关闭' },
-        {
-            name: 'closeOnOutsideClick',
-            type: 'boolean',
-            default: 'true',
-            desc: '外部点击是否关闭',
-        },
-        {
-            name: 'destroyOnClose',
-            type: 'boolean',
-            default: 'true',
-            desc: '关闭时销毁浮层 DOM（卸载释放内存）；false 时首开后保留，仅 --hidden 隐藏',
-        },
-        {
-            name: 'arrowPointAtCenter',
-            type: 'boolean',
-            default: 'false',
-            desc: 'start/end 对齐时箭头指向触发元素中心',
-        },
-        {
-            name: 'motion',
-            type: 'boolean | { duration?: number }',
-            default: 'true',
-            desc: '入场动效开关/配置（淡入+轻缩放）；传 number duration 覆盖时长，false 关闭；受 prefers-reduced-motion 覆盖',
-        },
-        {
-            name: 'triggerType',
-            type: "'click'|'hover'",
-            default: "'click'",
-            desc: "触发方式：click 点击 toggle；hover 悬停开关（enter/leave 延迟），指针移入浮层维持打开",
-        },
-        {
-            name: 'mouseEnterDelay',
-            type: 'number',
-            default: '150',
-            desc: 'hover 触发：指针进入到打开的延迟（ms）',
-        },
-        {
-            name: 'mouseLeaveDelay',
-            type: 'number',
-            default: '150',
-            desc: 'hover 触发：指针离开到关闭的延迟（ms）',
-        },
-        {
-            name: 'getPopupContainer',
-            type: '() => HTMLElement | null',
-            default: 'undefined',
-            desc: '浮层 portal 容器，缺省 document.body；脱离 overflow 裁剪与父层叠上下文',
-        },
-        { name: 'zIndex', type: 'number', default: '1030', desc: '浮层 z-index，覆盖 --cd-popconfirm-z token' },
-        { name: 'guardFocus', type: 'boolean', default: 'true', desc: 'Tab 键是否在浮层内循环（焦点陷阱）' },
-        { name: 'returnFocusOnClose', type: 'boolean', default: 'true', desc: 'Esc/外部点击关闭时是否将焦点归还给触发元素' },
-        { name: 'showArrow', type: 'boolean', default: 'false', desc: '是否显示箭头三角' },
-        { name: 'stopPropagation', type: 'boolean', default: 'true', desc: '点击浮层内容是否阻止事件冒泡到文档' },
-        { name: 'trigger', type: 'Snippet', default: 'undefined', desc: '触发元素（被包裹）' },
-        {
-            name: 'onOpenChange',
-            type: "(info: { open: boolean; reason: 'trigger'|'confirm'|'cancel'|'esc'|'outsideClick' }) => void",
-            default: 'undefined',
-        },
-        {
-            name: 'onConfirm',
-            type: '() => void | Promise<unknown>',
-            default: 'undefined',
-            desc: '点击确认回调；返回 Promise 时确认按钮进入 loading，resolve 后关闭、reject 保持打开',
-        },
-        { name: 'onCancel', type: '() => void', default: 'undefined', desc: '点击取消/外部关闭回调' },
-        { name: 'onClickOutside', type: '(e: MouseEvent) => void', default: 'undefined', desc: '点击浮层外部时触发（关闭前，可 preventDefault 阻止关闭）' },
-        { name: 'onClickOutSide', type: '(e: MouseEvent) => void', default: 'undefined', desc: 'onClickOutside 别名（Semi 大写 S 拼写）' },
-        { name: 'onEscKeyDown', type: '(e: KeyboardEvent) => void', default: 'undefined', desc: 'Esc 键按下时触发（在 closeOnEsc 关闭之前）' },
-        { name: 'class', type: 'string', default: 'undefined', desc: '附加到浮层的类名' },
-    ],
-    events: [
-        { name: 'onOpenChange', desc: '显隐变化，附带 reason 来源' },
-        { name: 'onConfirm', desc: '确认按钮点击' },
-        { name: 'onCancel', desc: '取消按钮点击或外部关闭' },
-        { name: 'onClickOutside', desc: '点击浮层外部（关闭前触发，可 preventDefault 阻止默认关闭）' },
-        { name: 'onClickOutSide', desc: 'onClickOutside 别名（Semi 原始大写 S 拼写）' },
-        { name: 'onEscKeyDown', desc: 'Esc 键按下时触发（在 closeOnEsc 关闭之前）' },
-        { name: 'onAfterOpen', desc: '入场动效结束、浮层完全可见' },
-        { name: 'onAfterClose', desc: '出场动效结束、DOM 卸载后' },
-    ],
-    slots: [
-        { name: 'trigger', desc: '触发元素（被包裹）' },
-        { name: 'titleSnippet', desc: '覆盖 title 的富内容标题' },
-        { name: 'contentSnippet', desc: '覆盖 content 的富内容说明' },
-        { name: 'icon', desc: '自定义图标（Snippet 或 false 隐藏）' },
+        { name: 'visible', type: 'boolean', default: 'undefined', desc: '受控显隐（配合 trigger=custom）；不回写，仅 onVisibleChange' },
+        { name: 'defaultVisible', type: 'boolean', default: 'false', desc: '非受控初始显隐' },
+        { name: 'title', type: 'string | Snippet', default: 'undefined', desc: '标题（文本或富文本 Snippet）' },
+        { name: 'content', type: 'string | Snippet<[{ initialFocusRef }]>', default: 'undefined', desc: '正文；函数 Snippet 入参含 initialFocusRef，绑定后打开时聚焦（对齐 Semi）' },
+        { name: 'icon', type: 'Snippet | false', default: '<IconAlertTriangle size="extra-large"/>', desc: '自定义图标；false 隐藏；缺省 IconAlertTriangle（警示色）' },
+        { name: 'okText', type: 'string', default: "'确认'（locale）", desc: '确认按钮文字' },
+        { name: 'cancelText', type: 'string', default: "'取消'（locale）", desc: '取消按钮文字' },
+        { name: 'okType', type: "'primary'|'secondary'|'tertiary'|'warning'|'danger'", default: "'primary'", desc: '确认按钮类型（对齐 Semi）' },
+        { name: 'cancelType', type: 'ButtonType', default: "'tertiary'", desc: '取消按钮类型（对齐 Semi）' },
+        { name: 'okButtonProps', type: 'ExtraButtonProps', default: 'undefined', desc: '透传确认按钮额外属性（含 autoFocus；onclick/loading/theme 组件托管）' },
+        { name: 'cancelButtonProps', type: 'ExtraButtonProps', default: 'undefined', desc: '透传取消按钮额外属性（含 autoFocus；onclick/loading/disabled 组件托管）' },
+        { name: 'showCloseIcon', type: 'boolean', default: 'true', desc: '是否显示右上角关闭按钮（对齐 Semi）' },
+        { name: 'position', type: "'top'|'topLeft'|...|'bottomRight' 等 12 方位", default: "'bottomLeft'", desc: '弹出方位（对齐 Semi 默认 bottomLeft）' },
+        { name: 'trigger', type: "'click'|'hover'|'focus'|'custom'", default: "'click'", desc: '触发方式（对齐 Semi）' },
+        { name: 'disabled', type: 'boolean', default: 'false', desc: '点击子元素是否弹出，false 不弹（对齐 Semi）' },
+        { name: 'closeOnEsc', type: 'boolean', default: 'true', desc: 'Esc 关闭，受控时不生效（对齐 Semi）' },
+        { name: 'arrowPointAtCenter', type: 'boolean', default: 'false', desc: '箭头指向触发元素中心（需 showArrow，对齐 Semi）' },
+        { name: 'showArrow', type: 'boolean', default: 'false', desc: '是否显示箭头三角（对齐 Semi）' },
+        { name: 'motion', type: 'boolean', default: 'true', desc: '入场动效（reduced-motion 退化）' },
+        { name: 'mouseEnterDelay', type: 'number', default: '50', desc: 'hover 进入延迟(ms)' },
+        { name: 'mouseLeaveDelay', type: 'number', default: '50', desc: 'hover 离开延迟(ms)' },
+        { name: 'getPopupContainer', type: '() => HTMLElement', default: 'undefined', desc: '自定义浮层容器（对齐 Semi）' },
+        { name: 'zIndex', type: 'number', default: '1030', desc: '浮层层级（对齐 Semi）' },
+        { name: 'guardFocus', type: 'boolean', default: 'true', desc: 'Tab 焦点在浮层内循环（对齐 Semi）' },
+        { name: 'returnFocusOnClose', type: 'boolean', default: 'true', desc: 'Esc 后焦点回到 trigger（仅 click，对齐 Semi）' },
+        { name: 'stopPropagation', type: 'boolean', default: 'true', desc: '阻止浮层内事件冒泡（对齐 Semi）' },
+        { name: 'rePosKey', type: 'string | number', default: 'undefined', desc: '手动触发重新定位' },
+        { name: 'class', type: 'string', default: "''", desc: '卡片自定义类名（对齐 Semi className）' },
+        { name: 'style', type: 'string', default: "''", desc: '卡片自定义内联样式（对齐 Semi）' },
+        { name: 'children', type: 'Snippet', default: 'undefined', desc: '触发元素（必填）' },
+        { name: 'onVisibleChange', type: '(visible: boolean) => void', default: 'undefined', desc: '显隐切换回调（对齐 Semi）' },
+        { name: 'onClickOutSide', type: '(e: MouseEvent) => void', default: 'undefined', desc: '点击浮层外部回调（对齐 Semi）' },
+        { name: 'onEscKeyDown', type: '(e: KeyboardEvent) => void', default: 'undefined', desc: 'trigger/浮层按 Esc 回调（对齐 Semi）' },
+        { name: 'onConfirm', type: '(e: MouseEvent) => void | Promise<unknown>', default: 'undefined', desc: '确认回调；返回 Promise 时按钮 loading，resolve 关闭 / reject 保持' },
+        { name: 'onCancel', type: '(e: MouseEvent) => void | Promise<unknown>', default: 'undefined', desc: '取消回调；返回 Promise 时按钮 loading，resolve 关闭 / reject 保持' },
     ],
     a11y: {
-        hasRole: true,
-        note: '触发器 aria-haspopup=dialog + aria-expanded + aria-controls；浮层 role=dialog（non-modal，不设 aria-modal）+ aria-labelledby(title) + aria-describedby(content)；Esc 关闭，Tab 在浮层内循环（useFocusTrap），关闭归还焦点；危险/警示图标 aria-hidden（语义靠文案）。',
+        role: 'dialog',
+        keyboard: ['Escape', 'Tab', 'Shift+Tab', 'Enter', 'Space'],
+        notes: [
+            '浮层 role=dialog（aria-modal=false，复用 Popover），aria-labelledby 指向 Popconfirm 标题',
+            '触发元素承载 role=button + aria-haspopup=dialog + aria-expanded/controls（复用 Popover dialog 语义）',
+            'guardFocus（默认 true）用 useFocusTrap 陷入焦点，关闭后 returnFocusOnClose 归还触发器',
+            'okButtonProps/cancelButtonProps.autoFocus 或 content 函数 initialFocusRef 控制打开时初始焦点（对齐 Semi）',
+            'closeOnEsc 与外部点击关闭复用 Popover→Tooltip 的 useDismiss',
+        ],
     },
     tokens: [
-        '--cd-popconfirm-bg',
-        '--cd-popconfirm-color-text',
-        '--cd-popconfirm-color-text-secondary',
-        '--cd-popconfirm-border',
-        '--cd-popconfirm-shadow',
-        '--cd-popconfirm-radius',
-        '--cd-popconfirm-padding',
-        '--cd-popconfirm-icon-color-danger',
-        '--cd-popconfirm-icon-color-warning',
-        '--cd-popconfirm-icon-color-info',
-        '--cd-popconfirm-title-color',
-        '--cd-popconfirm-title-size',
-        '--cd-popconfirm-title-weight',
-        '--cd-popconfirm-content-size',
-        '--cd-popconfirm-max-width',
-        '--cd-popconfirm-z',
-        '--cd-popconfirm-gap-footer',
-        '--cd-popconfirm-arrow-size',
-        '--cd-popconfirm-motion-duration',
-        '--cd-popconfirm-motion-easing',
-    ],
-    responsive: false,
-    examples: [
-        {
-            title: '删除确认（danger）',
-            code: '<Popconfirm type="danger" title="确定删除该项？" content="删除后不可恢复" onConfirm={() => remove()}>\n  {#snippet trigger()}<Button type="danger">删除</Button>{/snippet}\n</Popconfirm>',
-        },
-        {
-            title: '普通确认',
-            code: '<Popconfirm title="确认提交？" onConfirm={() => submit()}>\n  {#snippet trigger()}<Button>提交</Button>{/snippet}\n</Popconfirm>',
-        },
-        {
-            title: '自定义图标',
-            code: '<Popconfirm title="保存更改？" placement="bottom">\n  {#snippet icon()}<SaveIcon />{/snippet}\n  {#snippet trigger()}<Button>保存</Button>{/snippet}\n</Popconfirm>',
-        },
+        // Popconfirm 卡片消费 token（正名，值全量对齐 Semi popconfirm/variables.scss；无自造中间层）
+        '--cd-color-popconfirm-header-text',
+        '--cd-color-popconfirm-body-text',
+        '--cd-color-popconfirm-header-alert-icon',
+        '--cd-width-popconfirm-icon',
+        '--cd-width-popconfirm-maxwidth',
+        '--cd-spacing-popconfirm-top',
+        '--cd-spacing-popconfirm-bottom',
+        '--cd-spacing-popconfirm-header-title-marginbottom',
+        '--cd-spacing-popconfirm-header-icon-marginright',
+        '--cd-spacing-popconfirm-footer-margintop',
+        '--cd-spacing-popconfirm-footer-btn-marginright',
+        '--cd-spacing-popconfirm-body-p-margin',
+        '--cd-spacing-popconfirm-body-p-padding',
+        '--cd-font-popconfirm-header-title-fontweight',
+        '--cd-font-size-header-6',
+        // 卡面/定位/箭头复用 Popover→Tooltip
+        '--cd-popover-*',
+        '--cd-tooltip-*',
     ],
 };