@jumerry/elplus-hooks 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+## 0.1.0 - 2026-03-06
+
+- 初始化 `elplus-hooks` npm 包。
+- 新增 `useDialog` 组合式函数导出。
+- 增加 `README.md`（安装、API、示例、发布说明）。
+- 增加 `tsup` 构建配置（ESM/CJS/类型声明）。
+- 配置 `peerDependencies`：`vue`、`element-plus`、`lodash`。
+
+## 0.1.1 - 2026-03-06
+
+- 包名调整为 `@jumerry/elplus-hooks`
+- README 安装与导入示例已同步 scoped 包名

package/README.md

@@ -0,0 +1,86 @@
+# elplus-hooks
+
+Element Plus 相关 Vue 组合式函数库（当前仅包含 `useDialog`）。
+
+## 安装
+
+```bash
+npm i @jumerry/elplus-hooks
+```
+
+你还需要在业务项目中安装以下 peer 依赖（若已安装可忽略）：
+
+```bash
+npm i vue element-plus lodash
+```
+
+## 导出
+
+```ts
+import { useDialog } from "@jumerry/elplus-hooks";
+```
+
+## API
+
+### `useDialog<P = any>(content, options?)`
+
+#### 参数
+
+- `content`: `string | Component | JSX.Element`
+- `options`: `DialogOptions<P> | Ref<DialogOptions<P>>`
+
+#### `DialogOptions<P>`
+
+- `dialogProps`: 透传给 `ElDialog` 的属性，额外支持 `onBeforeOpen?: () => boolean | void`
+- `dialogSlots`: Dialog 插槽（`header`、`footer`）
+- `contentProps`: 透传给内容组件 props
+- `callBack`: 内容组件触发回调时执行
+- `closeEventName`: 自定义关闭事件名（默认 `closeDialog`）
+- `emits`: 事件映射，会自动转换为 `onXxx` 监听
+
+#### 返回值
+
+- `openDialog(modifyOptions?)`: 打开弹窗，可临时覆盖 `options`
+- `closeDialog()`: 关闭弹窗
+
+## 使用示例
+
+```ts
+import { defineComponent } from "vue";
+import { useDialog } from "@jumerry/elplus-hooks";
+
+const ContentComp = defineComponent({
+  props: {
+    title: String,
+    closeDialog: Function
+  },
+  setup(props) {
+    return () => (
+      <div>
+        <p>{props.title}</p>
+        <button onClick={() => props.closeDialog?.()}>关闭</button>
+      </div>
+    );
+  }
+});
+
+const { openDialog } = useDialog(ContentComp, {
+  contentProps: { title: "弹窗内容" },
+  dialogProps: { title: "提示", width: "480px" }
+});
+
+openDialog();
+```
+
+## 发布
+
+```bash
+npm login
+npm run build
+npm publish --access public
+```
+
+## 注意事项
+
+- 本库会操作 `document.body`，请仅在浏览器端调用。
+- SSR 场景请在客户端生命周期中调用 `openDialog`。

package/dist/index.cjs

@@ -0,0 +1,135 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useDialog: () => useDialog
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/useDialog.ts
+var import_element_plus = require("element-plus");
+var import_lodash = require("lodash");
+var import_merge = __toESM(require("lodash/merge"), 1);
+var import_vue = require("vue");
+function getOptions(options) {
+  if (!options) return {};
+  return (0, import_vue.isRef)(options) ? options.value : options;
+}
+function useDialog(content, options) {
+  let dialogInstance = null;
+  let fragment = null;
+  const closeAfter = () => {
+    if (fragment) {
+      (0, import_vue.render)(null, fragment);
+      fragment.textContent = "";
+      fragment = null;
+    }
+    dialogInstance = null;
+  };
+  async function closeDialog() {
+    if (dialogInstance) {
+      dialogInstance.props.modelValue = false;
+    }
+  }
+  const instance = (0, import_vue.getCurrentInstance)();
+  function openDialog(modifyOptions) {
+    if (dialogInstance) {
+      closeDialog().then(() => closeAfter());
+    }
+    const baseOptions = getOptions(options);
+    const mergedOptions = modifyOptions ? (0, import_merge.default)({}, baseOptions, modifyOptions) : baseOptions;
+    const { dialogProps, contentProps } = mergedOptions;
+    if (dialogProps?.onBeforeOpen?.() === false) {
+      return;
+    }
+    fragment = document.createDocumentFragment();
+    const closeEventName = `on${(0, import_lodash.upperFirst)(
+      mergedOptions.closeEventName || "closeDialog"
+    )}`;
+    let onBeforeClose = null;
+    const contentAttrs = {
+      ...contentProps,
+      [closeEventName]: closeDialog,
+      callBack: (data) => {
+        mergedOptions.callBack?.(data);
+        closeDialog();
+      },
+      beforeCloseDialog: (fn) => {
+        onBeforeClose = fn;
+      }
+    };
+    const eventListeners = {};
+    if (mergedOptions.emits) {
+      for (const [eventName, handler] of Object.entries(mergedOptions.emits)) {
+        const listenerName = `on${(0, import_lodash.upperFirst)(eventName)}`;
+        eventListeners[listenerName] = handler;
+      }
+    }
+    const vNode = (0, import_vue.h)(
+      import_element_plus.ElDialog,
+      {
+        ...dialogProps,
+        modelValue: true,
+        beforeClose: async (done) => {
+          const result = await onBeforeClose?.();
+          if (result === false) return;
+          done();
+        },
+        onClosed: () => {
+          dialogProps?.onClosed?.();
+          closeAfter();
+          onBeforeClose = null;
+        }
+      },
+      {
+        default: () => [
+          typeof content === "string" ? content : (0, import_vue.h)(content, {
+            ...contentAttrs,
+            ...eventListeners
+          })
+        ],
+        ...mergedOptions.dialogSlots
+      }
+    );
+    vNode.appContext = instance?.appContext || null;
+    (0, import_vue.render)(vNode, fragment);
+    dialogInstance = vNode.component;
+    document.body.appendChild(fragment);
+  }
+  (0, import_vue.onUnmounted)(() => {
+    closeDialog();
+  });
+  return { openDialog, closeDialog };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useDialog
+});

package/dist/index.d.cts

@@ -0,0 +1,27 @@
+import { ElDialog } from 'element-plus';
+import { h, Ref } from 'vue';
+import { JSX } from 'vue/jsx-runtime';
+
+type Content = Parameters<typeof h>[0] | string | object | JSX.Element;
+type ElDialogInstance = InstanceType<typeof ElDialog>;
+type DialogProps = ElDialogInstance["$props"] & {
+    onBeforeOpen?: () => boolean | void;
+};
+interface ElDialogSlots {
+    header?: (...args: any[]) => Content;
+    footer?: (...args: any[]) => Content;
+}
+interface DialogOptions<P> {
+    dialogProps?: DialogProps;
+    dialogSlots?: ElDialogSlots;
+    contentProps?: P;
+    callBack?: (data: any) => void;
+    closeEventName?: string;
+    emits?: Record<string, (...args: any[]) => void>;
+}
+declare function useDialog<P = any>(content: Content, options?: Ref<DialogOptions<P>> | DialogOptions<P>): {
+    openDialog: (modifyOptions?: Partial<DialogOptions<P>>) => void;
+    closeDialog: () => Promise<void>;
+};
+
+export { type DialogOptions, useDialog };

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+import { ElDialog } from 'element-plus';
+import { h, Ref } from 'vue';
+import { JSX } from 'vue/jsx-runtime';
+
+type Content = Parameters<typeof h>[0] | string | object | JSX.Element;
+type ElDialogInstance = InstanceType<typeof ElDialog>;
+type DialogProps = ElDialogInstance["$props"] & {
+    onBeforeOpen?: () => boolean | void;
+};
+interface ElDialogSlots {
+    header?: (...args: any[]) => Content;
+    footer?: (...args: any[]) => Content;
+}
+interface DialogOptions<P> {
+    dialogProps?: DialogProps;
+    dialogSlots?: ElDialogSlots;
+    contentProps?: P;
+    callBack?: (data: any) => void;
+    closeEventName?: string;
+    emits?: Record<string, (...args: any[]) => void>;
+}
+declare function useDialog<P = any>(content: Content, options?: Ref<DialogOptions<P>> | DialogOptions<P>): {
+    openDialog: (modifyOptions?: Partial<DialogOptions<P>>) => void;
+    closeDialog: () => Promise<void>;
+};
+
+export { type DialogOptions, useDialog };

package/dist/index.js

@@ -0,0 +1,98 @@
+// src/useDialog.ts
+import { ElDialog } from "element-plus";
+import { upperFirst } from "lodash";
+import merge from "lodash/merge";
+import { getCurrentInstance, h, isRef, onUnmounted, render } from "vue";
+function getOptions(options) {
+  if (!options) return {};
+  return isRef(options) ? options.value : options;
+}
+function useDialog(content, options) {
+  let dialogInstance = null;
+  let fragment = null;
+  const closeAfter = () => {
+    if (fragment) {
+      render(null, fragment);
+      fragment.textContent = "";
+      fragment = null;
+    }
+    dialogInstance = null;
+  };
+  async function closeDialog() {
+    if (dialogInstance) {
+      dialogInstance.props.modelValue = false;
+    }
+  }
+  const instance = getCurrentInstance();
+  function openDialog(modifyOptions) {
+    if (dialogInstance) {
+      closeDialog().then(() => closeAfter());
+    }
+    const baseOptions = getOptions(options);
+    const mergedOptions = modifyOptions ? merge({}, baseOptions, modifyOptions) : baseOptions;
+    const { dialogProps, contentProps } = mergedOptions;
+    if (dialogProps?.onBeforeOpen?.() === false) {
+      return;
+    }
+    fragment = document.createDocumentFragment();
+    const closeEventName = `on${upperFirst(
+      mergedOptions.closeEventName || "closeDialog"
+    )}`;
+    let onBeforeClose = null;
+    const contentAttrs = {
+      ...contentProps,
+      [closeEventName]: closeDialog,
+      callBack: (data) => {
+        mergedOptions.callBack?.(data);
+        closeDialog();
+      },
+      beforeCloseDialog: (fn) => {
+        onBeforeClose = fn;
+      }
+    };
+    const eventListeners = {};
+    if (mergedOptions.emits) {
+      for (const [eventName, handler] of Object.entries(mergedOptions.emits)) {
+        const listenerName = `on${upperFirst(eventName)}`;
+        eventListeners[listenerName] = handler;
+      }
+    }
+    const vNode = h(
+      ElDialog,
+      {
+        ...dialogProps,
+        modelValue: true,
+        beforeClose: async (done) => {
+          const result = await onBeforeClose?.();
+          if (result === false) return;
+          done();
+        },
+        onClosed: () => {
+          dialogProps?.onClosed?.();
+          closeAfter();
+          onBeforeClose = null;
+        }
+      },
+      {
+        default: () => [
+          typeof content === "string" ? content : h(content, {
+            ...contentAttrs,
+            ...eventListeners
+          })
+        ],
+        ...mergedOptions.dialogSlots
+      }
+    );
+    vNode.appContext = instance?.appContext || null;
+    render(vNode, fragment);
+    dialogInstance = vNode.component;
+    document.body.appendChild(fragment);
+  }
+  onUnmounted(() => {
+    closeDialog();
+  });
+  return { openDialog, closeDialog };
+}
+export {
+  useDialog
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@jumerry/elplus-hooks",
+  "version": "0.1.1",
+  "description": "Element Plus 相关 Vue 组合式函数集合（当前仅 useDialog）",
+  "keywords": [
+    "vue",
+    "element-plus",
+    "composable",
+    "hook",
+    "dialog"
+  ],
+  "license": "MIT",
+  "author": "zyc",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean --external vue,element-plus,lodash,lodash/merge",
+    "check": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "element-plus": ">=2.8.0",
+    "lodash": ">=4.17.21",
+    "vue": ">=3.4.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}