@sum-one/hooks 0.0.1

package/dist/index.d.mts

@@ -0,0 +1,40 @@
+import { DialogProps } from "element-plus";
+import * as _$vue from "vue";
+import { Component, ComponentPublicInstance, Ref } from "vue";
+
+//#region ../utils/dist/index.d.mts
+//#region src/typescript.d.ts
+/**
+ * 提取组件的 props 类型
+ * 支持类组件和函数式组件
+ */
+type ExtractComponentProps<T> = T extends (new (...args: any) => {
+  $props: infer P;
+}) ? Omit<P, keyof _$vue.VNodeProps> : T extends ((props: infer P, ...args: any) => any) ? P : Record<string, any>; //#endregion
+//#region src/utils.d.ts
+//#endregion
+//#region src/use-modal/types.d.ts
+type ModalSlot = (...args: any[]) => unknown;
+interface ModalOptions<T = any> {
+  props?: ExtractComponentProps<T>;
+  modalProps?: Partial<DialogProps> & {
+    slots?: Record<string, ModalSlot>;
+  };
+}
+interface ModalInstance<T = ComponentPublicInstance> {
+  /** 卸载模态框的方法 */
+  close: () => void;
+  /** 组件实例的引用 */
+  componentInstance: Ref<T | null>;
+  /** 模态框是否打开的状态 */
+  isOpen: Ref<boolean>;
+}
+//#endregion
+//#region src/use-modal/index.d.ts
+declare function useModal<T extends Component>(component: T, {
+  props,
+  modalProps
+}: ModalOptions<T>): ModalInstance;
+//#endregion
+export { useModal };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -0,0 +1,78 @@
+import { ElDialog } from "element-plus";
+import { createApp, h, ref } from "vue";
+//#region src/use-modal/index.ts
+/** 动画持续时间（毫秒） */
+const ANIMATION_DURATION = 1e3;
+const DEFAULT_MODAL_PROPS = {
+	width: "50%",
+	top: "15vh",
+	closeOnClickModal: false,
+	closeOnPressEscape: true,
+	destroyOnClose: true,
+	draggable: true,
+	lockScroll: true
+};
+function useModal(component, { props, modalProps }) {
+	const open = ref(true);
+	const componentInstance = ref(null);
+	let unmountTimer = null;
+	const dialogComponent = () => {
+		const { slots: modalSlots, ...restModalProps } = modalProps ?? {};
+		return h(ElDialog, {
+			...DEFAULT_MODAL_PROPS,
+			...restModalProps,
+			modelValue: open.value,
+			beforeClose(done) {
+				done();
+				unmount();
+			}
+		}, {
+			default: () => h(component, {
+				...props,
+				ref: componentInstance
+			}),
+			...modalSlots
+		});
+	};
+	let app = null;
+	let container = null;
+	try {
+		app = createApp(dialogComponent);
+		container = document.createElement("div");
+		document.body.appendChild(container);
+		app.mount(container);
+	} catch (error) {
+		console.error("Failed to create modal:", error);
+		throw error;
+	}
+	function unmount() {
+		if (!open.value) return;
+		open.value = false;
+		if (unmountTimer) clearTimeout(unmountTimer);
+		unmountTimer = setTimeout(() => {
+			try {
+				if (app) {
+					app.unmount();
+					app = null;
+				}
+				if (container?.parentNode) {
+					container.parentNode.removeChild(container);
+					container = null;
+				}
+			} catch (error) {
+				console.error(error);
+			} finally {
+				unmountTimer = null;
+			}
+		}, ANIMATION_DURATION);
+	}
+	return {
+		close: unmount,
+		componentInstance,
+		isOpen: open
+	};
+}
+//#endregion
+export { useModal };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/use-modal/index.ts"],"sourcesContent":["import type { DialogProps } from 'element-plus'\nimport type { Component, ComponentPublicInstance, VNode } from 'vue'\nimport type { ModalInstance, ModalOptions } from './types'\nimport { ElDialog } from 'element-plus'\nimport { createApp, h, ref } from 'vue'\n\n/** 动画持续时间（毫秒） */\nconst ANIMATION_DURATION = 1000\n\nconst DEFAULT_MODAL_PROPS: Partial<DialogProps> = {\n  width: '50%',\n  top: '15vh',\n  closeOnClickModal: false,\n  closeOnPressEscape: true,\n  destroyOnClose: true,\n  draggable: true,\n  lockScroll: true\n} as const\n\nexport function useModal<T extends Component>(component: T, { props, modalProps }: ModalOptions<T>): ModalInstance {\n  const open = ref(true)\n  const componentInstance = ref<ComponentPublicInstance | null>(null)\n  let unmountTimer: ReturnType<typeof setTimeout> | null = null\n\n  const dialogComponent = (): VNode => {\n    const { slots: modalSlots, ...restModalProps } = modalProps ?? {}\n    const dialogProps = {\n      ...DEFAULT_MODAL_PROPS,\n      ...restModalProps,\n      modelValue: open.value,\n      beforeClose(done: () => void) {\n        done()\n        unmount()\n      }\n    }\n    const slots = {\n      default: () => h(component, {\n        ...props,\n        ref: componentInstance\n      }),\n      ...modalSlots\n    }\n    return h(ElDialog, dialogProps, slots)\n  }\n\n  let app: ReturnType<typeof createApp> | null = null\n  let container: HTMLElement | null = null\n\n  try {\n    app = createApp(dialogComponent)\n    container = document.createElement('div')\n    document.body.appendChild(container)\n    app.mount(container)\n  }\n  catch (error) {\n    console.error('Failed to create modal:', error)\n    throw error\n  }\n\n  function unmount(): void {\n    if (!open.value)\n      return\n    open.value = false\n    if (unmountTimer)\n      clearTimeout(unmountTimer)\n\n    unmountTimer = setTimeout(() => {\n      try {\n        if (app) {\n          app.unmount()\n          app = null\n        }\n        if (container?.parentNode) {\n          container.parentNode.removeChild(container)\n          container = null\n        }\n      }\n      catch (error) {\n        console.error(error)\n      }\n      finally {\n        unmountTimer = null\n      }\n    }, ANIMATION_DURATION)\n  }\n\n  return {\n    close: unmount,\n    componentInstance,\n    isOpen: open\n  }\n}\n"],"mappings":";;;;AAOA,MAAM,qBAAqB;AAE3B,MAAM,sBAA4C;CAChD,OAAO;CACP,KAAK;CACL,mBAAmB;CACnB,oBAAoB;CACpB,gBAAgB;CAChB,WAAW;CACX,YAAY;CACb;AAED,SAAgB,SAA8B,WAAc,EAAE,OAAO,cAA8C;CACjH,MAAM,OAAO,IAAI,KAAK;CACtB,MAAM,oBAAoB,IAAoC,KAAK;CACnE,IAAI,eAAqD;CAEzD,MAAM,wBAA+B;EACnC,MAAM,EAAE,OAAO,YAAY,GAAG,mBAAmB,cAAc,EAAE;EAiBjE,OAAO,EAAE,UAAU;GAfjB,GAAG;GACH,GAAG;GACH,YAAY,KAAK;GACjB,YAAY,MAAkB;IAC5B,MAAM;IACN,SAAS;;GAUiB,EAAE;GAN9B,eAAe,EAAE,WAAW;IAC1B,GAAG;IACH,KAAK;IACN,CAAC;GACF,GAAG;GAEgC,CAAC;;CAGxC,IAAI,MAA2C;CAC/C,IAAI,YAAgC;CAEpC,IAAI;EACF,MAAM,UAAU,gBAAgB;EAChC,YAAY,SAAS,cAAc,MAAM;EACzC,SAAS,KAAK,YAAY,UAAU;EACpC,IAAI,MAAM,UAAU;UAEf,OAAO;EACZ,QAAQ,MAAM,2BAA2B,MAAM;EAC/C,MAAM;;CAGR,SAAS,UAAgB;EACvB,IAAI,CAAC,KAAK,OACR;EACF,KAAK,QAAQ;EACb,IAAI,cACF,aAAa,aAAa;EAE5B,eAAe,iBAAiB;GAC9B,IAAI;IACF,IAAI,KAAK;KACP,IAAI,SAAS;KACb,MAAM;;IAER,IAAI,WAAW,YAAY;KACzB,UAAU,WAAW,YAAY,UAAU;KAC3C,YAAY;;YAGT,OAAO;IACZ,QAAQ,MAAM,MAAM;aAEd;IACN,eAAe;;KAEhB,mBAAmB;;CAGxB,OAAO;EACL,OAAO;EACP;EACA,QAAQ;EACT"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@sum-one/hooks",
+  "type": "module",
+  "version": "0.0.1",
+  "packageManager": "pnpm@10.28.2",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "tsdown"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "element-plus": ">=2.0.0 <3.0.0",
+    "vue": ">=3.2.0 <4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "element-plus": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@vueuse/core": "^14.3.0"
+  },
+  "devDependencies": {
+    "@sum-one/config": "workspace:*",
+    "@sum-one/utils": "workspace:*",
+    "tsdown": "^0.22.0"
+  }
+}