@daflow-ui/ui-dialog

Dialog component for DaFlow UI.

Installation

pnpm add @daflow-ui/ui-dialog

Usage

全局引入样式（在 main.ts 中）：

import '@daflow-ui/ui-dialog/style.css';

在组件中使用：

<script setup lang="ts">
import { ref } from 'vue';
import { DfDialog } from '@daflow-ui/ui-dialog';

const open = ref(false);
</script>

<template>
  <button @click="open = true">
    打开对话框
  </button>

  <DfDialog v-model="open" title="基础对话框">
    <p>这是对话框的主体内容。</p>

    <template #footer>
      <button @click="open = false">
        关闭
      </button>
    </template>
  </DfDialog>
</template>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | modelValue | boolean | false | 控制显示/隐藏 | | title | string | — | 标题文字；存在 header slot 时不生效 | | id | string | 自动生成 | Dialog 根 id；只接受字母、数字、- 和 _；非法值会在开发环境告警，并回退到内部生成的安全 id | | ids | Partial<DialogIds> | 自动生成 | 覆盖 trigger / content / positioner / backdrop / title / description / closeTrigger 的最终 DOM id；各项只接受字母、数字、- 和 _，非法值会回退到默认派生 id | | width | string \| number | '640px' | 宽度，传 number 自动加 px | | fullscreen | boolean | false | 是否以全屏布局渲染 Dialog | | destroyOnClose | boolean | false | 关闭后销毁内容 DOM，下次打开重新挂载 | | closeOnBackdropClick | boolean | true | 点击遮罩是否关闭 | | closeOnEscape | boolean | true | 按 ESC 是否关闭 | | restoreFocus | boolean | true | 关闭时是否恢复焦点到打开前的元素 | | initialFocusEl | () => HTMLElement \| null | — | 指定 Dialog 打开时的初始焦点元素 | | finalFocusEl | () => HTMLElement \| null | 自动回退 | 指定 Dialog 关闭时的返回焦点元素；未传时优先回退到打开前缓存的 activeElement | | showClose | boolean | true | 是否显示右上角关闭按钮；存在 header slot 时不生效 | | beforeClose | () => void \| boolean \| Promise<void \| boolean> | — | 关闭前拦截，显式返回 false 阻止关闭 |

Emits

| Event | Payload | Description | |-------|---------|-------------| | update:modelValue | boolean | v-model 同步 | | open | — | 开始打开时触发 | | opened | — | 打开动画结束后触发 | | close | — | 开始关闭时触发 | | closed | — | 关闭动画结束后触发 |

Slots

| Slot | Description | |------|-------------| | default | 主体内容区，内容过长时 body 区域自动滚动 | | header | 自定义头部，完全替换默认头部结构；title、内置关闭按钮和默认头部内边距都不会保留 | | footer | 底部操作区，内置布局与间距，不含预置按钮 |

Notes

• 始终 Teleport 到 body
• 遮罩始终存在，不暴露 modal 开关
• body scroll 锁定由 Ark UI 处理
• class 会透传到 content 根节点
• body-inner 是内部布局用 data-part，当前不作为公开 selector contract 承诺
• 默认会生成不含冒号的安全 ids；显式传入的 id / ids 不会被静默改写，非法值会在开发环境告警并回退到安全默认值
• 如需稳定控制打开/关闭时的焦点行为，优先使用 initialFocusEl 与 finalFocusEl

Development

Install dependencies

pnpm install

Start playground (at monorepo root)

cd ../..
pnpm dev

Build

pnpm build

Type check

pnpm typecheck

License

MIT