best-dialog 1.0.0

package/dist/runtime/index.d.ts

@@ -0,0 +1,223 @@
+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/index.mjs

@@ -0,0 +1,380 @@
+import { ref, defineComponent, h, computed, watch, onMounted, onUnmounted, Teleport, Transition, markRaw } from 'vue';
+
+const store = ref([]);
+let _uid = 0;
+function uid() {
+  return `bd-${++_uid}`;
+}
+function storeAdd(id, options) {
+  const existing = store.value.find((d) => d.id === id);
+  if (existing) {
+    existing.options = options;
+    existing.visible = true;
+  } else store.value.push({ id, visible: true, options });
+}
+function storeHide(id) {
+  const d = store.value.find((d2) => d2.id === id);
+  if (d) d.visible = false;
+}
+function storeRemove(id) {
+  const i = store.value.findIndex((d) => d.id === id);
+  if (i !== -1) store.value.splice(i, 1);
+}
+function storeClose(id, e) {
+  const item = store.value.find((d) => d.id === id);
+  if (!item) return;
+  item.visible = false;
+  item.options.onClose?.(e || { source: "overlay", index: -1 });
+  setTimeout(() => storeRemove(id), 420);
+}
+function useDialog(defaults = {}) {
+  const id = uid();
+  const options = ref({ ...defaults });
+  let _onClose = null;
+  let _onOk = null;
+  let _closing = false;
+  onUnmounted(() => storeRemove(id));
+  function doClose(e) {
+    if (_closing) return;
+    _closing = true;
+    const evt = { source: "overlay", index: -1 };
+    _onClose?.(evt);
+    storeHide(id);
+    setTimeout(() => {
+      storeRemove(id);
+      _closing = false;
+    }, 420);
+  }
+  function open(opts) {
+    if (opts) options.value = { ...options.value, ...opts };
+    _onClose = null;
+    _onOk = null;
+    _closing = false;
+    const userOnClose = options.value.onClose;
+    options.value.onClose = (e) => {
+      userOnClose?.(e);
+      if (!_closing) {
+        _closing = true;
+        _onClose?.(e);
+      }
+    };
+    storeAdd(id, options.value);
+    options.value.onOpen?.();
+    return handle;
+  }
+  const handle = {
+    close: () => doClose(),
+    onClose(cb) {
+      _onClose = cb;
+      return handle;
+    },
+    onOk(cb) {
+      _onOk = cb;
+      return handle;
+    },
+    open,
+    alert(content, title) {
+      open({
+        title: title || "\u63D0\u793A",
+        content,
+        actions: [{ label: "\u786E\u5B9A", primary: true }]
+      });
+      return handle;
+    },
+    confirm(content, title) {
+      open({
+        title: title || "\u786E\u8BA4",
+        content,
+        actions: [
+          { label: "\u53D6\u6D88" },
+          {
+            label: "\u786E\u5B9A",
+            primary: true,
+            onClick: () => {
+              _onOk?.();
+            }
+          }
+        ]
+      });
+      return handle;
+    },
+    prompt(placeholder, title, defaultValue) {
+      const inputVal = ref(defaultValue ?? "");
+      const PromptInput = markRaw(defineComponent({
+        setup() {
+          return () => h("input", {
+            class: "bd-dialog__input",
+            type: "text",
+            placeholder: placeholder || "\u8BF7\u8F93\u5165...",
+            value: inputVal.value,
+            onInput: (e) => {
+              inputVal.value = e.target.value;
+            }
+          });
+        }
+      }));
+      open({
+        title: title || "\u8F93\u5165",
+        content: PromptInput,
+        actions: [
+          { label: "\u53D6\u6D88" },
+          {
+            label: "\u786E\u5B9A",
+            primary: true,
+            onClick: () => {
+              _onOk?.(inputVal.value);
+            }
+          }
+        ]
+      });
+      return handle;
+    }
+  };
+  return handle;
+}
+function showDialog(options) {
+  const id = uid();
+  storeAdd(id, options);
+  options.onOpen?.();
+  const close = (e) => storeClose(id, e);
+  return close;
+}
+function effectForPos(pos) {
+  return pos === "center" ? "zoom" : "slide";
+}
+function normActions(raw) {
+  if (!raw?.length) return [];
+  return raw.map((a) => typeof a === "string" ? { label: a } : a);
+}
+const XIcon = defineComponent({
+  setup() {
+    return () => h("svg", {
+      viewBox: "0 0 24 24",
+      width: 18,
+      height: 18,
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": 2,
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, [
+      h("line", { x1: 18, y1: 6, x2: 6, y2: 18 }),
+      h("line", { x1: 6, y1: 6, x2: 18, y2: 18 })
+    ]);
+  }
+});
+function renderBtn(a, close, isLast, index) {
+  const label = a.label || "\u786E\u5B9A";
+  const primary = a.primary ?? isLast;
+  const cls = ["bd-dialog__btn", { "bd-dialog__btn--primary": primary }, a.class];
+  if (a.as === "a") {
+    return h("a", {
+      class: cls,
+      href: a.href || "#",
+      target: a.target,
+      "data-index": String(index)
+    }, label);
+  }
+  async function click() {
+    const evt = { source: "button", index, button: a };
+    if (!a.onClick) {
+      close(evt);
+      return;
+    }
+    const r = a.onClick(() => close(evt));
+    if (r instanceof Promise) {
+      if (await r !== false) close(evt);
+    } else if (r !== false) close(evt);
+  }
+  return h("button", {
+    class: cls,
+    type: "button",
+    onClick: click,
+    "data-index": String(index)
+  }, label);
+}
+function renderDialogBox(o, close, bodySlot, actionsSlot) {
+  const pos = o.position || "center";
+  const showOverlay = o.overlay !== false;
+  const showClose = o.closable !== false;
+  const isFS = !!o.fullscreen;
+  const w = o.width ?? "440px";
+  const wStyle = typeof w === "number" ? `${w}px` : w;
+  const dStyle = {
+    ...typeof o.style === "string" ? {} : o.style || {},
+    ...isFS ? {} : { width: wStyle },
+    ...o.zIndex ? { zIndex: o.zIndex } : {}
+  };
+  const actions = normActions(o.actions);
+  let body = null;
+  if (bodySlot) {
+    body = bodySlot;
+  } else if (o.url) {
+    body = h("iframe", { src: o.url, class: "bd-dialog__iframe", frameborder: "0", allow: "fullscreen" });
+  } else if (o.html && typeof o.content === "string") {
+    body = h("div", { class: "bd-dialog__html", innerHTML: o.content });
+  } else if (typeof o.content === "string") {
+    body = h("p", { class: "bd-dialog__text" }, o.content);
+  } else if (o.content) {
+    body = [h(o.content)];
+  }
+  let titleNode = null;
+  if (o.title) {
+    titleNode = typeof o.title === "string" ? h("span", { class: "bd-dialog__title" }, o.title) : Array.isArray(o.title) ? o.title : h(o.title);
+  }
+  let footer = null;
+  if (actionsSlot) {
+    footer = h("div", { class: "bd-dialog__footer" }, actionsSlot);
+  } else if (actions.length > 0) {
+    footer = h(
+      "div",
+      { class: "bd-dialog__footer" },
+      actions.map((a, i) => renderBtn(a, close, i === actions.length - 1, i))
+    );
+  }
+  return h("div", {
+    class: ["bd-overlay", pos, { "bd-fullscreen": isFS }],
+    style: showOverlay ? void 0 : { background: "transparent", pointerEvents: "none" },
+    onClick: (e) => {
+      if (e.target === e.currentTarget && o.overlayClose !== false) {
+        close({ source: "overlay", index: -1 });
+      }
+    }
+  }, [
+    h(
+      Transition,
+      {
+        name: `bd-${o.effect || effectForPos(pos)}`,
+        appear: true
+      },
+      () => h("div", {
+        class: ["bd-dialog", o.class, { "bd-dialog--fullscreen": isFS }],
+        style: dStyle,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": typeof o.title === "string" ? o.title : void 0,
+        onClick: (e) => e.stopPropagation()
+      }, [
+        showClose && h("button", {
+          class: "bd-dialog__close",
+          type: "button",
+          "aria-label": "\u5173\u95ED",
+          onClick: () => close({ source: "close-btn", index: -1 })
+        }, [h(XIcon)]),
+        titleNode && h("div", { class: "bd-dialog__header" }, [titleNode]),
+        h("div", { class: "bd-dialog__body" }, [body]),
+        footer
+      ])
+    )
+  ]);
+}
+const BestDialog = defineComponent({
+  name: "BestDialog",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: Boolean, default: false },
+    title: { type: [String, Object], default: void 0 },
+    content: { type: [String, Object], default: void 0 },
+    html: { type: Boolean, default: false },
+    url: { type: String, default: void 0 },
+    actions: { type: Array, default: void 0 },
+    position: { type: String, default: "center" },
+    effect: { type: String, default: void 0 },
+    overlay: { type: Boolean, default: true },
+    overlayClose: { type: Boolean, default: true },
+    escClose: { type: Boolean, default: true },
+    closable: { type: Boolean, default: true },
+    width: { type: [String, Number], default: "440px" },
+    fullscreen: { type: Boolean, default: false },
+    zIndex: { type: Number, default: void 0 },
+    dialogClass: { type: [String, Array, Object], default: void 0 },
+    dialogStyle: { type: [String, Object], default: void 0 }
+  },
+  emits: ["update:modelValue", "open", "close"],
+  setup(props, { emit, slots }) {
+    const localVisible = ref(props.modelValue);
+    computed(() => props.effect || effectForPos(props.position));
+    watch(() => props.modelValue, (v) => {
+      localVisible.value = v;
+      if (v) emit("open");
+    });
+    function close(e) {
+      localVisible.value = false;
+      emit("update:modelValue", false);
+      emit("close", e);
+    }
+    function onKey(e) {
+      if (e.key === "Escape" && localVisible.value && props.escClose) {
+        close({ source: "esc", index: -1 });
+      }
+    }
+    onMounted(() => document.addEventListener("keydown", onKey));
+    onUnmounted(() => document.removeEventListener("keydown", onKey));
+    return () => {
+      if (!localVisible.value) return null;
+      const bodySlot = slots.default ? slots.default() : void 0;
+      const actionsSlot = slots.actions ? slots.actions({ close }) : void 0;
+      const opts = {
+        title: props.title,
+        content: props.content,
+        html: props.html,
+        url: props.url,
+        actions: props.actions,
+        position: props.position,
+        effect: props.effect,
+        overlay: props.overlay,
+        overlayClose: props.overlayClose,
+        closable: props.closable,
+        class: props.dialogClass,
+        style: props.dialogStyle,
+        width: props.width,
+        fullscreen: props.fullscreen,
+        zIndex: props.zIndex
+      };
+      if (slots.title) opts.title = slots.title();
+      return h(Teleport, { to: "body" }, [
+        h(
+          Transition,
+          { name: "bd-overlay", appear: true },
+          () => renderDialogBox(opts, close, bodySlot, actionsSlot)
+        )
+      ]);
+    };
+  }
+});
+const BestDialogContainer = defineComponent({
+  name: "BestDialogContainer",
+  setup() {
+    function onKey(e) {
+      if (e.key !== "Escape") return;
+      for (let i = store.value.length - 1; i >= 0; i--) {
+        const d = store.value[i];
+        if (d.visible && d.options.escClose !== false) {
+          storeClose(d.id, { source: "esc", index: -1 });
+          break;
+        }
+      }
+    }
+    onMounted(() => document.addEventListener("keydown", onKey));
+    onUnmounted(() => document.removeEventListener("keydown", onKey));
+    return () => h(
+      Teleport,
+      { to: "body" },
+      store.value.map((item) => {
+        const o = item.options;
+        const close = (e) => storeClose(item.id, e);
+        return h(
+          Transition,
+          {
+            name: "bd-overlay",
+            appear: true,
+            key: item.id
+          },
+          () => item.visible ? renderDialogBox(o, close) : null
+        );
+      })
+    );
+  }
+});
+
+export { BestDialog, BestDialogContainer, showDialog, useDialog };

package/dist/runtime/plugin.d.mts

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

package/dist/runtime/plugin.d.ts

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

package/dist/runtime/plugin.mjs

@@ -0,0 +1,17 @@
+import { defineNuxtPlugin } from '#app';
+import { createApp, h } from 'vue';
+import { BestDialogContainer } from './index.mjs';
+
+const plugin = defineNuxtPlugin((_nuxtApp) => {
+  if (import.meta.client) {
+    const el = document.createElement("div");
+    el.id = "__best-dialog";
+    document.body.appendChild(el);
+    const app = createApp({
+      render: () => h(BestDialogContainer)
+    });
+    app.mount(el);
+  }
+});
+
+export { plugin as default };