@daflow-ui/ui-dialog

@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