@daflow-ui/ui-dialog 0.1.0

package/README.md

@@ -0,0 +1,114 @@
+# @daflow-ui/ui-dialog
+
+Dialog component for DaFlow UI.
+
+## Installation
+
+```bash
+pnpm add @daflow-ui/ui-dialog
+```
+
+## Usage
+
+全局引入样式（在 `main.ts` 中）：
+
+```ts
+import '@daflow-ui/ui-dialog/style.css';
+```
+
+在组件中使用：
+
+```vue
+<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 时不生效 |
+| `width` | `string \| number` | `'500px'` | 宽度，传 `number` 自动加 `px` |
+| `destroyOnClose` | `boolean` | `false` | 关闭后销毁内容 DOM，下次打开重新挂载 |
+| `closeOnBackdropClick` | `boolean` | `true` | 点击遮罩是否关闭 |
+| `closeOnEscape` | `boolean` | `true` | 按 `ESC` 是否关闭 |
+| `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 承诺
+
+## Development
+
+### Install dependencies
+
+```bash
+pnpm install
+```
+
+### Start playground (at monorepo root)
+
+```bash
+cd ../..
+pnpm dev
+```
+
+### Build
+
+```bash
+pnpm build
+```
+
+### Type check
+
+```bash
+pnpm typecheck
+```
+
+## License
+
+MIT

package/dist/Dialog.vue.d.ts

@@ -0,0 +1,31 @@
+import type { DialogProps } from './types';
+declare var __VLS_35: {}, __VLS_49: {}, __VLS_51: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_35) => any;
+} & {
+    default?: (props: typeof __VLS_49) => any;
+} & {
+    footer?: (props: typeof __VLS_51) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+    open: () => any;
+    opened: () => any;
+    close: () => any;
+    closed: () => any;
+}, string, import("vue").PublicProps, Readonly<DialogProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    onOpened?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onClosed?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Dialog.vue.d.ts.map

package/dist/Dialog.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.vue.d.ts","sourceRoot":"","sources":["../src/Dialog.vue"],"names":[],"mappings":"AA8JA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAkQ3C,QAAA,IAAI,QAAQ,IAAW,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACpE,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU;;;;;;;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DfDialog } from './Dialog.vue';
+export type { DialogEmits, DialogProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -0,0 +1,129 @@
+import { defineComponent as B, ref as h, watch as V, computed as w, openBlock as n, createBlock as r, unref as d, withCtx as u, Teleport as O, createVNode as f, normalizeStyle as b, normalizeClass as D, renderSlot as m, createElementBlock as C, createTextVNode as N, toDisplayString as $, createCommentVNode as c, createElementVNode as y } from "vue";
+import { Dialog as s } from "@ark-ui/vue";
+const E = {
+  key: 0,
+  "data-scope": "dialog",
+  "data-part": "header"
+}, T = {
+  "data-scope": "dialog",
+  "data-part": "body"
+}, S = {
+  "data-scope": "dialog",
+  "data-part": "body-inner"
+}, x = {
+  key: 0,
+  "data-scope": "dialog",
+  "data-part": "footer"
+}, P = /* @__PURE__ */ B({
+  name: "DfDialog",
+  inheritAttrs: !1,
+  __name: "Dialog",
+  props: {
+    modelValue: { type: Boolean },
+    title: {},
+    width: { default: "640px" },
+    fullscreen: { type: Boolean, default: !1 },
+    destroyOnClose: { type: Boolean, default: !1 },
+    closeOnBackdropClick: { type: Boolean, default: !0 },
+    closeOnEscape: { type: Boolean, default: !0 },
+    showClose: { type: Boolean, default: !0 },
+    beforeClose: { type: Function }
+  },
+  emits: ["update:modelValue", "open", "opened", "close", "closed"],
+  setup(e, { emit: g }) {
+    const o = g, a = h(e.modelValue), i = h(!1);
+    V(
+      () => e.modelValue,
+      (t, l) => {
+        if (a.value = t, t !== l) {
+          if (t) {
+            o("open");
+            return;
+          }
+          o("close");
+        }
+      }
+    );
+    const p = w(() => {
+      if (!e.fullscreen)
+        return { "--df-dialog-width": typeof e.width == "number" ? `${e.width}px` : e.width };
+    }), v = ({ open: t }) => {
+      if (t) {
+        i.value = !1, a.value = !0, o("update:modelValue", !0);
+        return;
+      }
+      if (!e.beforeClose) {
+        i.value = !1, a.value = !1, o("update:modelValue", !1);
+        return;
+      }
+      Promise.resolve(e.beforeClose()).then((l) => {
+        if (l === !1) {
+          i.value = !0, a.value = !0, o("update:modelValue", !0);
+          return;
+        }
+        i.value = !1, a.value = !1, o("update:modelValue", !1);
+      });
+    }, k = (t) => {
+      t.target === t.currentTarget && (t.animationName === "df-dialog-content-in" && o("opened"), t.animationName === "df-dialog-content-out" && !i.value && o("closed"));
+    };
+    return (t, l) => (n(), r(d(s).Root, {
+      open: a.value,
+      "lazy-mount": "",
+      "unmount-on-exit": e.destroyOnClose,
+      "close-on-interact-outside": e.closeOnBackdropClick,
+      "close-on-escape": e.closeOnEscape,
+      onOpenChange: v
+    }, {
+      default: u(() => [
+        (n(), r(O, { to: "body" }, [
+          f(d(s).Backdrop),
+          f(d(s).Positioner, {
+            "data-fullscreen": e.fullscreen ? "true" : void 0
+          }, {
+            default: u(() => [
+              f(d(s).Content, {
+                class: D(t.$attrs.class),
+                style: b(p.value),
+                "data-fullscreen": e.fullscreen ? "true" : void 0,
+                onAnimationend: k
+              }, {
+                default: u(() => [
+                  m(t.$slots, "header", {}, () => [
+                    e.title || e.showClose ? (n(), C("div", E, [
+                      e.title ? (n(), r(d(s).Title, { key: 0 }, {
+                        default: u(() => [
+                          N($(e.title), 1)
+                        ]),
+                        _: 1
+                      })) : c("", !0),
+                      e.showClose ? (n(), r(d(s).CloseTrigger, { key: 1 }, {
+                        default: u(() => [...l[0] || (l[0] = [
+                          y("span", { "aria-hidden": "true" }, "×", -1)
+                        ])]),
+                        _: 1
+                      })) : c("", !0)
+                    ])) : c("", !0)
+                  ]),
+                  y("div", T, [
+                    y("div", S, [
+                      m(t.$slots, "default")
+                    ])
+                  ]),
+                  t.$slots.footer ? (n(), C("div", x, [
+                    m(t.$slots, "footer")
+                  ])) : c("", !0)
+                ]),
+                _: 3
+              }, 8, ["class", "style", "data-fullscreen"])
+            ]),
+            _: 3
+          }, 8, ["data-fullscreen"])
+        ]))
+      ]),
+      _: 3
+    }, 8, ["open", "unmount-on-exit", "close-on-interact-outside", "close-on-escape"]));
+  }
+});
+export {
+  P as DfDialog
+};

package/dist/style.css

@@ -0,0 +1 @@
+:root{--df-z-index-base: 1000;--df-dialog-vertical-margin: 24px;--df-dialog-width: 640px;--df-dialog-padding: 24px;--df-dialog-header-gap: 24px;--df-dialog-backdrop-color: rgba(15, 14, 14, 0.5);--df-dialog-bg: #fff;--df-dialog-radius: 0;--df-dialog-border-width: 0;--df-dialog-border-color: #e7e7e7;--df-dialog-footer-border-width: 0;--df-dialog-footer-border-color: #e7e7e7;--df-dialog-header-padding: var(--df-dialog-padding);--df-dialog-body-padding: 0 var(--df-dialog-padding) var(--df-dialog-padding);--df-dialog-footer-padding: 16px var(--df-dialog-padding);--df-dialog-footer-gap: 8px;--df-dialog-title-font-family: inherit;--df-dialog-title-font-size: 32px;--df-dialog-title-font-weight: 500;--df-dialog-title-line-height: 1.3;--df-dialog-title-color: #0f0e0e;--df-dialog-body-font-family: inherit;--df-dialog-body-font-size: 16px;--df-dialog-body-font-weight: 400;--df-dialog-body-line-height: 24px;--df-dialog-body-color: #4b4a4a;--df-dialog-close-trigger-size: 36px;--df-dialog-close-trigger-color: #878686;--df-dialog-close-trigger-bg: #f8f8f8;--df-dialog-close-trigger-hover-color: #4b4a4a;--df-dialog-close-trigger-hover-bg: #e7e7e7}[data-scope=dialog]{box-sizing:border-box}[data-scope=dialog][data-part=backdrop]{position:fixed;inset:0;z-index:calc(var(--df-z-index-base) + var(--layer-index, 0))}[data-scope=dialog][data-part=positioner]{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--df-dialog-vertical-margin) 0;box-sizing:border-box;z-index:calc(var(--df-z-index-base) + var(--layer-index, 0));pointer-events:none}[data-scope=dialog][data-part=positioner][data-fullscreen]{padding:0}[data-scope=dialog][data-part=content]{width:var(--df-dialog-width);max-height:calc(100vh - 2*var(--df-dialog-vertical-margin));display:flex;flex-direction:column;overflow:hidden;outline:none;pointer-events:auto;z-index:calc(var(--df-z-index-base) + var(--layer-index, 0))}[data-scope=dialog][data-part=content][data-fullscreen]{width:100vw;height:100vh;max-height:none;border-width:0;border-radius:0}[data-scope=dialog][data-part=header]{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}[data-scope=dialog][data-part=close-trigger]{display:flex;align-items:center;justify-content:center;width:var(--df-dialog-close-trigger-size);height:var(--df-dialog-close-trigger-size);border:none;background:none;padding:0;margin:0;font-family:inherit;flex-shrink:0;cursor:pointer}[data-scope=dialog][data-part=body]{flex:1;min-height:0;overflow-y:auto}[data-scope=dialog][data-part=body-inner]{padding:var(--df-dialog-body-padding)}[data-scope=dialog][data-part=footer]{display:flex;flex-shrink:0}[data-scope=dialog][data-part=backdrop][hidden],[data-scope=dialog][data-part=positioner][hidden],[data-scope=dialog][data-part=content][hidden]{display:none}:where([data-scope=dialog][data-part=backdrop]){background-color:var(--df-dialog-backdrop-color)}:where([data-scope=dialog][data-part=backdrop])[data-state=open]{animation:df-dialog-backdrop-in .15s ease-out}:where([data-scope=dialog][data-part=backdrop])[data-state=closed]{animation:df-dialog-backdrop-out .15s ease-in forwards}:where([data-scope=dialog][data-part=content]){background-color:var(--df-dialog-bg);border-radius:var(--df-dialog-radius);border:var(--df-dialog-border-width) solid var(--df-dialog-border-color);color:var(--df-dialog-body-color)}:where([data-scope=dialog][data-part=content])[data-state=open]{animation:df-dialog-content-in .15s ease-out}:where([data-scope=dialog][data-part=content])[data-state=closed]{animation:df-dialog-content-out .15s ease-in forwards}:where([data-scope=dialog][data-part=header]){gap:var(--df-dialog-header-gap);padding:var(--df-dialog-header-padding)}:where([data-scope=dialog][data-part=title]){margin:0;font-family:var(--df-dialog-title-font-family);font-size:var(--df-dialog-title-font-size);font-weight:var(--df-dialog-title-font-weight);line-height:var(--df-dialog-title-line-height);color:var(--df-dialog-title-color)}:where([data-scope=dialog][data-part=body]){font-family:var(--df-dialog-body-font-family);font-size:var(--df-dialog-body-font-size);font-weight:var(--df-dialog-body-font-weight);line-height:var(--df-dialog-body-line-height);color:var(--df-dialog-body-color)}:where([data-scope=dialog][data-part=close-trigger]){background-color:var(--df-dialog-close-trigger-bg);color:var(--df-dialog-close-trigger-color)}:where([data-scope=dialog][data-part=close-trigger]):hover{background-color:var(--df-dialog-close-trigger-hover-bg);color:var(--df-dialog-close-trigger-hover-color)}:where([data-scope=dialog][data-part=close-trigger] span){display:inline-flex;align-items:center;justify-content:center;font-size:32px;line-height:1}:where([data-scope=dialog][data-part=footer]){align-items:center;justify-content:flex-end;gap:var(--df-dialog-footer-gap);padding:var(--df-dialog-footer-padding);border-top:var(--df-dialog-footer-border-width) solid var(--df-dialog-footer-border-color)}@keyframes df-dialog-backdrop-in{from{opacity:0}to{opacity:1}}@keyframes df-dialog-backdrop-out{from{opacity:1}to{opacity:0}}@keyframes df-dialog-content-in{from{opacity:0;transform:translateY(-8px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes df-dialog-content-out{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-8px) scale(0.97)}}@media(max-height: 480px){[data-scope=dialog][data-part=positioner]{align-items:flex-start}}

package/dist/types.d.ts

@@ -0,0 +1,82 @@
+export interface DialogProps {
+    /**
+     * 受控开关状态。
+     * 业务通常通过 v-model 控制 Dialog 打开与关闭。
+     * @default false
+     */
+    modelValue: boolean;
+    /**
+     * 标题文字。
+     * 存在 `header` 插槽时不生效。
+     * 使用 `header` 插槽时，默认头部结构会被完全替换，内置关闭按钮和默认头部内边距也不会保留。
+     */
+    title?: string;
+    /**
+     * 对话框内容区宽度。
+     * 传入 number 时自动补 `px`，默认宽度为 `640px`。
+     * 此宽度表示最终可见的 Dialog 外框宽度，包含内边距与边框，不是 body 内容区的净宽。
+     * `fullscreen=true` 时该属性不生效。
+     * @default '640px'
+     */
+    width?: string | number;
+    /**
+     * 是否以全屏布局渲染 Dialog。
+     * 开启后会覆盖普通模式下的宽度、最大高度、圆角与上下安全边距。
+     * 当前仅表示布局模式，不包含内置的全屏切换控件。
+     * @default false
+     */
+    fullscreen?: boolean;
+    /**
+     * 关闭后卸载内容 DOM，下次打开时重新挂载。
+     * 适合需要在每次打开时重建内部状态的场景。
+     * @default false
+     */
+    destroyOnClose?: boolean;
+    /**
+     * 是否允许通过点击遮罩关闭。
+     * 设为 `false` 时，只能通过显式关闭操作或外部修改 `v-model` 关闭。
+     * @default true
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * 是否允许通过按下 `ESC` 关闭。
+     * 设为 `false` 时，键盘 `ESC` 不会触发关闭流程。
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * 是否显示右上角关闭按钮。
+     * 存在 `header` 插槽时不生效。
+     * @default true
+     */
+    showClose?: boolean;
+    /**
+     * 关闭前拦截。
+     * 显式返回 `false` 时阻止本次关闭；返回其他值或不返回时放行。
+     * 支持同步和异步场景，适合在关闭前做确认或校验。
+     */
+    beforeClose?: () => void | boolean | Promise<void | boolean>;
+}
+export interface DialogEmits {
+    /**
+     * v-model 状态同步
+     */
+    'update:modelValue': [value: boolean];
+    /**
+     * 开始打开时触发
+     */
+    open: [];
+    /**
+     * 打开动画结束后触发，适合执行依赖稳定 DOM 的逻辑
+     */
+    opened: [];
+    /**
+     * 开始关闭时触发，不建议在此阶段重置表单或清空数据
+     */
+    close: [];
+    /**
+     * 关闭动画结束后触发，适合做状态清理、表单重置等收尾逻辑
+     */
+    closed: [];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAA;CAC7D;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,mBAAmB,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;IACrC;;OAEG;IACH,IAAI,EAAE,EAAE,CAAA;IACR;;OAEG;IACH,MAAM,EAAE,EAAE,CAAA;IACV;;OAEG;IACH,KAAK,EAAE,EAAE,CAAA;IACT;;OAEG;IACH,MAAM,EAAE,EAAE,CAAA;CACX"}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@daflow-ui/ui-dialog",
+  "version": "0.1.0",
+  "description": "Dialog component for DaFlow UI",
+  "type": "module",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "dependencies": {
+    "@ark-ui/vue": "5.30.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@seemusic/eslint-config-vue3": "^2.0.0",
+    "@types/node": "^22.10.5",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vue/compiler-sfc": "^3.5.27",
+    "eslint": "^9.39.2",
+    "sass-embedded": "^1.97.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-vue-devtools": "^8.0.5",
+    "vue": "^3.5.27",
+    "vue-tsc": "^3.2.4"
+  },
+  "keywords": [
+    "vue",
+    "ui",
+    "component",
+    "daflow",
+    "dialog"
+  ],
+  "scripts": {
+    "build": "vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "typecheck": "vue-tsc -p tsconfig.json --noEmit"
+  }
+}