best-dialog 1.0.0 → 1.0.1

package/README.md

@@ -6,11 +6,12 @@
 
 - **三种调用方式** — 模板组件 / 组合式（链式 API）/ 函数式
 - **高级方法** — `alert` / `confirm` / `prompt` 开箱即用
+- **语义回调** — `onOk` / `onCancel`，确定、取消、叉叉、ESC 一目了然
 - **精美动画** — zoom / slide / fade 三种过渡效果，GPU 加速
 - **灵活定位** — 9 种位置（center / top / bottom / left / right / 四角）
-- **丰富内容** — 文本 / HTML / iframe / Vue 组件 / 插槽
+- **丰富内容** — 文本 / HTML / iframe / Vue 组件 / 插槽（组件自动 `markRaw`，无响应式警告）
 - **actions 插槽** — 完全自定义底部按钮区域
-- **事件信息** — `onClose(e)` 返回触发事件详情（按钮 index / btn 配置）
+- **事件信息** — `onClose(e)` 返回触发事件详情（source / 按钮索引 / 按钮配置）
 - **暗色模式** — 自动跟随系统 `prefers-color-scheme`
 - **响应式** — 移动端自适应布局
 - **无障碍** — ARIA 属性 + ESC 关闭
@@ -31,7 +32,7 @@ export default defineNuxtConfig({
 })
 ```
 
-安装后即可直接使用 `<BestDialog>`、`useDialog`、`showDialog`，无需手动导入。
+> 安装后即可直接使用 `<BestDialog>`、`useDialog`、`showDialog`，无需手动导入。
 
 ### Vue 3 (Vite / Webpack)
 
@@ -42,8 +43,8 @@ npm install best-dialog
 ```ts
 // main.ts
 import { createApp, h } from 'vue'
-import { BestDialogContainer } from 'best-dialog/runtime'
-import 'best-dialog/src/runtime/style.css'
+import { BestDialogContainer } from 'best-dialog'
+import 'best-dialog/style.css'
 
 const app = createApp(App)
 
@@ -55,6 +56,8 @@ createApp({ render: () => h(BestDialogContainer) }).mount(el)
 app.mount('#app')
 ```
 
+> 若只使用模板组件 `<BestDialog>`，可以省略容器挂载。
+
 ---
 
 ## 使用方式
@@ -68,7 +71,7 @@ app.mount('#app')
   <!-- 基础 -->
   <BestDialog v-model="show" title="提示" content="内容"
     :actions="['取消', { label: '确定', primary: true }]"
-    @close="onClose" />
+    @ok="onOk" @cancel="onCancel" @close="onClose" />
 
   <!-- 插槽 -->
   <BestDialog v-model="show2">
@@ -91,16 +94,15 @@ const dialog = useDialog({
 })
 
 // ── 基础 ──
-const close = dialog.open()            // 返回 close 方法
-const close2 = dialog.open({ content: '新内容' }) // 合并新选项
+dialog.open()                          // 打开（返回 handle，支持链式）
+dialog.open({ content: '新内容' })      // 合并新选项
+dialog.close()                         // 关闭
 
-// ── 链式 onClose ──
+// ── 链式回调 ──
 dialog.open()
-  .onClose((e) => {
-    console.log('关闭来源:', e.source)         // 'button' | 'overlay' | 'close-btn' | 'esc'
-    console.log('按钮索引:', e.currentTarget.dataset.index)
-    console.log('按钮配置:', e.currentTarget.dataset.btn)
-  })
+  .onOk(() => { /* 点击了 primary 按钮 */ })
+  .onCancel((e) => { /* 取消按钮 / 叉叉 / ESC / 遮罩 */ })
+  .onClose((e) => { /* 任何方式关闭 */ })
 
 // ── alert ──
 dialog.alert('操作成功！')
@@ -108,7 +110,7 @@ dialog.alert('操作成功！')
 // ── confirm ──
 dialog.confirm('确定删除吗？')
   .onOk(() => { /* 用户点了确定 */ })
-  .onClose((e) => { /* 任何方式关闭 */ })
+  .onCancel(() => { /* 用户点了取消 */ })
 
 // ── prompt ──
 dialog.prompt('请输入您的姓名')
@@ -127,6 +129,37 @@ const close = showDialog({
 setTimeout(close, 3000)
 ```
 
+### 4. 语义回调 `onOk` / `onCancel`
+
+除 `onClose` 外，所有 API 均支持语义回调，关闭来源自动归类：
+
+| 关闭方式 | onOk | onCancel |
+|---------|------|----------|
+| 点击 primary 按钮（确定） | ✅ | — |
+| 点击普通按钮（取消） | — | ✅ |
+| 点击右上角叉叉 | — | ✅ |
+| 按 ESC | — | ✅ |
+| 点击遮罩 | — | ✅ |
+
+```ts
+// showDialog：options 直接传
+showDialog({
+  title: '删除确认',
+  content: '确定要删除这条记录吗？',
+  actions: ['取消', { label: '确定', primary: true }],
+  onOk: () => doDelete(),
+  onCancel: (e) => console.log('取消来源:', e.source),
+})
+
+// useDialog：链式或 options 均可
+dialog.confirm('确定删除吗？').onOk(doDelete)
+
+// BestDialog 组件：@ok / @cancel 事件
+<BestDialog v-model="show" @ok="doOk" @cancel="onCancel" />
+```
+
+> `prompt` 的 `onOk` 回调参数为输入框的值。
+
 ---
 
 ## API 参考
@@ -167,19 +200,17 @@ setTimeout(close, 3000)
 |------|------|------|
 | `update:modelValue` | `boolean` | v-model 更新 |
 | `open` | — | 打开 |
-| `close` | `DialogCloseEvent` | 关闭（含事件信息）|
+| `close` | `DialogCloseEvent` | 任何方式关闭（含事件信息）|
+| `ok` | — | 点击 primary 按钮 |
+| `cancel` | `DialogCloseEvent` | 取消按钮 / 叉叉 / ESC / 遮罩 |
 
 ### DialogCloseEvent
 
 ```ts
 interface DialogCloseEvent {
-  source: 'button' | 'overlay' | 'close-btn' | 'esc'
-  currentTarget: {
-    dataset: {
-      index?: number    // 按钮索引
-      btn?: DialogAction // 按钮配置
-    }
-  }
+  source: 'button' | 'overlay' | 'close-btn' | 'esc'  // 关闭来源
+  index: number                                       // 按钮索引，非按钮关闭为 -1
+  button?: DialogAction                               // 按钮配置（source 为 button 时）
 }
 ```
 
@@ -190,18 +221,22 @@ interface DialogCloseEvent {
 ```ts
 const dialog = useDialog(options?)
 
-dialog.open(opts?)          // 打开，返回 close 函数
-  .onClose(e => {})         // 链式：关闭回调
-  .onOk(value => {})        // 链式：确认回调（confirm/prompt 用）
-
+dialog.open(opts?)          // 打开，返回 DialogHandle（可继续链式）
 dialog.close()              // 关闭
 
-dialog.alert(content, title?)                  // 快捷提示
-dialog.confirm(content, title?).onOk(() => {})  // 确认框
-dialog.prompt(placeholder?, title?, default?)   // 输入框
-     .onOk(value => {})
+// DialogHandle 链式回调
+dialog.open()
+  .onOk(value => {})        // 确认回调（prompt 的 value 为输入值）
+  .onCancel(e => {})        // 取消回调（取消按钮 / 叉叉 / ESC / 遮罩）
+  .onClose(e => {})         // 任意关闭回调
+
+dialog.alert(content, title?)                     // 快捷提示
+dialog.confirm(content, title?)                   // 确认框
+dialog.prompt(placeholder?, title?, default?)    // 输入框
 ```
 
+`options` 中也可以直接声明 `onOk` / `onCancel` / `onClose`，与链式回调等价（两者会同时触发）。
+
 ---
 
 ## Actions 详解
@@ -214,7 +249,7 @@ type DialogActionItem = string | {
   href?: string
   target?: string
   class?: string
-  primary?: boolean   // 默认最后一个为 primary
+  primary?: boolean   // 默认最后一个按钮为 primary
 }
 ```
 
@@ -257,6 +292,15 @@ showDialog({
 
 ---
 
+## 内容渲染优先级
+
+`default 插槽` > `url`（iframe）> `content`：
+- `content` 为字符串 → 文本段落
+- `content` 为字符串且 `html: true` → HTML 渲染
+- `content` 为 Vue 组件 → 直接渲染（内部自动 `markRaw`，避免响应式代理警告）
+
+---
+
 ## 样式定制
 
 ```css

package/dist/{runtime/index.d.mts → index.d.mts}

@@ -39,12 +39,15 @@ interface DialogOptions {
     zIndex?: number;
     onOpen?: () => void;
     onClose?: (e: DialogCloseEvent) => void;
+    onOk?: (value?: any) => void;
+    onCancel?: (e: DialogCloseEvent) => void;
     [key: string]: any;
 }
 interface DialogHandle {
     close: () => void;
     onClose: (cb: (e: DialogCloseEvent) => void) => DialogHandle;
     onOk: (cb: (value?: any) => void) => DialogHandle;
+    onCancel: (cb: (e: DialogCloseEvent) => void) => DialogHandle;
     open: (opts?: DialogOptions) => DialogHandle;
     alert: (content: string, title?: string) => DialogHandle;
     confirm: (content: string, title?: string) => DialogHandle;
@@ -123,7 +126,7 @@ declare const BestDialog: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>, () => VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "open" | "close")[], "update:modelValue" | "open" | "close", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "open" | "close" | "ok" | "cancel")[], "update:modelValue" | "open" | "close" | "ok" | "cancel", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
@@ -196,6 +199,8 @@ declare const BestDialog: vue.DefineComponent<vue.ExtractPropTypes<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
+    onOk?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
 }>, {
     modelValue: boolean;
     title: string | object;

package/dist/{runtime/index.mjs → index.mjs}

@@ -1,16 +1,23 @@
-import { ref, defineComponent, h, computed, watch, onMounted, onUnmounted, Teleport, Transition, markRaw } from 'vue';
+import { ref, defineComponent, h, computed, watch, onMounted, onUnmounted, Teleport, Transition, shallowRef, markRaw } from 'vue';
 
 const store = ref([]);
 let _uid = 0;
 function uid() {
   return `bd-${++_uid}`;
 }
+function sanitizeOptions(o) {
+  const r = { ...o };
+  if (r.content && typeof r.content === "object") r.content = markRaw(r.content);
+  if (r.title && typeof r.title === "object") r.title = markRaw(r.title);
+  return r;
+}
 function storeAdd(id, options) {
+  const o = sanitizeOptions(options);
   const existing = store.value.find((d) => d.id === id);
   if (existing) {
-    existing.options = options;
+    existing.options = o;
     existing.visible = true;
-  } else store.value.push({ id, visible: true, options });
+  } else store.value.push({ id, visible: true, options: o });
 }
 function storeHide(id) {
   const d = store.value.find((d2) => d2.id === id);
@@ -25,13 +32,19 @@ function storeClose(id, e) {
   if (!item) return;
   item.visible = false;
   item.options.onClose?.(e || { source: "overlay", index: -1 });
+  if (e) {
+    if (e.source === "button" && e.button?.primary) item.options.onOk?.();
+    else item.options.onCancel?.(e);
+  }
   setTimeout(() => storeRemove(id), 420);
 }
 function useDialog(defaults = {}) {
   const id = uid();
-  const options = ref({ ...defaults });
+  const options = shallowRef({ ...defaults });
   let _onClose = null;
   let _onOk = null;
+  let _onCancel = null;
+  let _okValue;
   let _closing = false;
   onUnmounted(() => storeRemove(id));
   function doClose(e) {
@@ -49,6 +62,8 @@ function useDialog(defaults = {}) {
     if (opts) options.value = { ...options.value, ...opts };
     _onClose = null;
     _onOk = null;
+    _onCancel = null;
+    _okValue = void 0;
     _closing = false;
     const userOnClose = options.value.onClose;
     options.value.onClose = (e) => {
@@ -58,6 +73,16 @@ function useDialog(defaults = {}) {
         _onClose?.(e);
       }
     };
+    const userOnOk = options.value.onOk;
+    options.value.onOk = () => {
+      userOnOk?.(_okValue?.());
+      _onOk?.(_okValue?.());
+    };
+    const userOnCancel = options.value.onCancel;
+    options.value.onCancel = (e) => {
+      userOnCancel?.(e);
+      _onCancel?.(e);
+    };
     storeAdd(id, options.value);
     options.value.onOpen?.();
     return handle;
@@ -72,6 +97,10 @@ function useDialog(defaults = {}) {
       _onOk = cb;
       return handle;
     },
+    onCancel(cb) {
+      _onCancel = cb;
+      return handle;
+    },
     open,
     alert(content, title) {
       open({
@@ -87,13 +116,7 @@ function useDialog(defaults = {}) {
         content,
         actions: [
           { label: "\u53D6\u6D88" },
-          {
-            label: "\u786E\u5B9A",
-            primary: true,
-            onClick: () => {
-              _onOk?.();
-            }
-          }
+          { label: "\u786E\u5B9A", primary: true }
         ]
       });
       return handle;
@@ -118,15 +141,10 @@ function useDialog(defaults = {}) {
         content: PromptInput,
         actions: [
           { label: "\u53D6\u6D88" },
-          {
-            label: "\u786E\u5B9A",
-            primary: true,
-            onClick: () => {
-              _onOk?.(inputVal.value);
-            }
-          }
+          { label: "\u786E\u5B9A", primary: true }
         ]
       });
+      _okValue = () => inputVal.value;
       return handle;
     }
   };
@@ -290,7 +308,7 @@ const BestDialog = defineComponent({
     dialogClass: { type: [String, Array, Object], default: void 0 },
     dialogStyle: { type: [String, Object], default: void 0 }
   },
-  emits: ["update:modelValue", "open", "close"],
+  emits: ["update:modelValue", "open", "close", "ok", "cancel"],
   setup(props, { emit, slots }) {
     const localVisible = ref(props.modelValue);
     computed(() => props.effect || effectForPos(props.position));
@@ -302,6 +320,10 @@ const BestDialog = defineComponent({
       localVisible.value = false;
       emit("update:modelValue", false);
       emit("close", e);
+      if (e) {
+        if (e.source === "button" && e.button?.primary) emit("ok");
+        else emit("cancel", e);
+      }
     }
     function onKey(e) {
       if (e.key === "Escape" && localVisible.value && props.escClose) {

package/dist/module.mjs

@@ -13,18 +13,18 @@ const module$1 = defineNuxtModule({
     const { resolve } = createResolver(import.meta.url);
     addComponent({
       name: "BestDialog",
-      filePath: resolve("./runtime/index"),
+      filePath: resolve("./index"),
       export: "BestDialog"
     });
     addImports([
-      { name: "useDialog", from: resolve("./runtime/index") },
-      { name: "showDialog", from: resolve("./runtime/index") }
+      { name: "useDialog", from: resolve("./index") },
+      { name: "showDialog", from: resolve("./index") }
     ]);
     addPlugin({
-      src: resolve("./runtime/plugin"),
+      src: resolve("./plugin"),
       mode: "client"
     });
-    nuxt.options.css.push(resolve("./runtime/style.css"));
+    nuxt.options.css.push(resolve("./style.css"));
   }
 });
 

package/package.json

@@ -1,22 +1,26 @@
 {
   "name": "best-dialog",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Lightweight, beautiful Vue3 dialog component with Nuxt 3 support. Template / Composable / Functional API with alert, confirm, prompt.",
   "type": "module",
   "exports": {
     ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.mts"
+    },
+    "./module": {
       "import": "./dist/module.mjs",
-      "types": "./dist/module.d.ts"
+      "types": "./dist/module.d.mts"
     },
-    "./runtime": {
-      "import": "./dist/runtime/index.mjs",
-      "types": "./dist/runtime/index.d.ts"
+    "./nuxt": {
+      "import": "./dist/module.mjs",
+      "types": "./dist/module.d.mts"
     },
-    "./dist/runtime/style.css": "./dist/runtime/style.css"
+    "./style.css": "./dist/style.css"
   },
-  "main": "./dist/module.mjs",
-  "module": "./dist/module.mjs",
-  "types": "./dist/module.d.ts",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "files": [
     "dist"
   ],

package/dist/module.d.ts

@@ -1,3 +0,0 @@
-declare const _default: NuxtModule<TOptions, TOptions, false>;
-
-export { _default as default };

package/dist/runtime/index.d.ts

@@ -1,223 +0,0 @@
-import * as vue from 'vue';
-import { PropType, CSSProperties, VNode } from 'vue';
-
-type DialogPosition = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-type DialogEffect = 'fade' | 'slide' | 'zoom';
-type DialogContentType = string | object | null | undefined;
-interface DialogAction {
-    label?: string;
-    onClick?: (close: () => void) => void | Promise<void> | boolean;
-    as?: 'button' | 'a';
-    href?: string;
-    target?: string;
-    class?: string;
-    primary?: boolean;
-    [key: string]: any;
-}
-type DialogActionItem = string | DialogAction;
-interface DialogCloseEvent {
-    source: 'button' | 'overlay' | 'close-btn' | 'esc';
-    index: number;
-    button?: DialogAction;
-}
-interface DialogOptions {
-    title?: string | object;
-    content?: DialogContentType;
-    html?: boolean;
-    url?: string;
-    actions?: DialogActionItem[];
-    position?: DialogPosition;
-    effect?: DialogEffect;
-    overlay?: boolean;
-    overlayClose?: boolean;
-    escClose?: boolean;
-    closable?: boolean;
-    class?: string | string[] | Record<string, boolean>;
-    style?: CSSProperties | string;
-    width?: string | number;
-    fullscreen?: boolean;
-    zIndex?: number;
-    onOpen?: () => void;
-    onClose?: (e: DialogCloseEvent) => void;
-    [key: string]: any;
-}
-interface DialogHandle {
-    close: () => void;
-    onClose: (cb: (e: DialogCloseEvent) => void) => DialogHandle;
-    onOk: (cb: (value?: any) => void) => DialogHandle;
-    open: (opts?: DialogOptions) => DialogHandle;
-    alert: (content: string, title?: string) => DialogHandle;
-    confirm: (content: string, title?: string) => DialogHandle;
-    prompt: (placeholder?: string, title?: string, defaultValue?: string) => DialogHandle;
-}
-declare function useDialog(defaults?: DialogOptions): DialogHandle;
-declare function showDialog(options: DialogOptions): (e?: DialogCloseEvent) => void;
-declare const BestDialog: vue.DefineComponent<vue.ExtractPropTypes<{
-    modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    title: {
-        type: PropType<string | object>;
-        default: undefined;
-    };
-    content: {
-        type: PropType<DialogContentType>;
-        default: undefined;
-    };
-    html: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    url: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    actions: {
-        type: PropType<DialogActionItem[]>;
-        default: undefined;
-    };
-    position: {
-        type: PropType<DialogPosition>;
-        default: string;
-    };
-    effect: {
-        type: PropType<DialogEffect>;
-        default: undefined;
-    };
-    overlay: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    overlayClose: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    escClose: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    closable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    width: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-    fullscreen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    zIndex: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    dialogClass: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    dialogStyle: {
-        type: PropType<CSSProperties | string>;
-        default: undefined;
-    };
-}>, () => VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "open" | "close")[], "update:modelValue" | "open" | "close", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    title: {
-        type: PropType<string | object>;
-        default: undefined;
-    };
-    content: {
-        type: PropType<DialogContentType>;
-        default: undefined;
-    };
-    html: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    url: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    actions: {
-        type: PropType<DialogActionItem[]>;
-        default: undefined;
-    };
-    position: {
-        type: PropType<DialogPosition>;
-        default: string;
-    };
-    effect: {
-        type: PropType<DialogEffect>;
-        default: undefined;
-    };
-    overlay: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    overlayClose: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    escClose: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    closable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    width: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-    fullscreen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    zIndex: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    dialogClass: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    dialogStyle: {
-        type: PropType<CSSProperties | string>;
-        default: undefined;
-    };
-}>> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onOpen?: ((...args: any[]) => any) | undefined;
-    onClose?: ((...args: any[]) => any) | undefined;
-}>, {
-    modelValue: boolean;
-    title: string | object;
-    content: DialogContentType;
-    html: boolean;
-    url: string;
-    actions: DialogActionItem[];
-    position: DialogPosition;
-    effect: DialogEffect;
-    overlay: boolean;
-    overlayClose: boolean;
-    escClose: boolean;
-    closable: boolean;
-    width: string | number;
-    fullscreen: boolean;
-    zIndex: number;
-    dialogClass: any;
-    dialogStyle: string | CSSProperties;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-declare const BestDialogContainer: vue.DefineComponent<{}, () => VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-
-export { BestDialog, BestDialogContainer, showDialog, useDialog };
-export type { DialogAction, DialogActionItem, DialogCloseEvent, DialogContentType, DialogEffect, DialogHandle, DialogOptions, DialogPosition };

package/dist/runtime/plugin.d.ts

@@ -1,3 +0,0 @@
-declare const _default: any;
-
-export { _default as default };