vue-modal-core - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

package.json

 {
     "name": "vue-modal-core",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "license": "MIT",
-    "description": "A lightweight and flexible Vue 3 modal component library that provides a better way to handle modals in your Vue applications",
+    "description": "一个轻量级的 Vue 3 模态框管理库，提供灵活的模态框控制和生命周期管理",
     "repository": {
@@ -10,11 +10,30 @@ "type": "git",
     },
-    "main": "src/index.ts",
     "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",
+        "LICENSE"
+    ],
+    "scripts": {
+        "build": "tsup src/index.ts --format cjs,esm --dts",
+        "prepublishOnly": "npm run build"
+    },
     "author": "ZhangSan",
     "peerDependencies": {
-        "typescript": "^5.2.2",
-        "vue": "^3.4.37"
+        "vue": "^3.4.0"
     },
     "devDependencies": {
-        "typescript": "^5.2.2"
+        "typescript": "^5.2.2",
+        "tsup": "^8.0.2",
+        "vue": "^3.4.0"
     },
@@ -21,0 +40,0 @@ "keywords": [

README.md

@@ -1,4 +0,4 @@
-# vue-modal-core
+# Vue Modal Core
 
-一个轻量级且灵活的 Vue 3 模态框组件库，为您的 Vue 应用提供更好的模态框管理方案。
+一个轻量级的 Vue 3 模态框管理库，提供灵活的模态框控制和生命周期管理。
 
@@ -10,8 +10,8 @@ [![npm version](https://img.shields.io/npm/v/vue-modal-core.svg)](https://www.npmjs.com/package/vue-modal-core)
 
-- 🎯 完全基于 TypeScript 开发，提供完整的类型支持
-- 🚀 轻量级设计，无外部依赖
-- 💪 支持异步关闭控制
-- 🎨 灵活的自定义样式
+- 🎯 TypeScript 支持
+- 🔄 响应式状态管理
+- 🎨 灵活的模态框组件复用
+- 🔒 完整的生命周期控制
+- ⚡ 支持异步关闭控制
 - 📦 支持多模态框管理
-- 🔧 简单易用的 API
 
@@ -28,38 +28,11 @@ ## 安装
 
-## 快速开始
+## 基础用法
 
-1.创建实例
+1. 首先创建你的模态框组件（例如 `MyModal.vue`）：
 
-```typescript
-// dialog.ts
-import { createModalContext } from 'vue-modal-core';
-
-export { makeModal, ModalRenderer } = createModalContext({
-  baseZIndex: 1000,
-  allowMultiple: true
-});
-```
-
-2. 创建模态框组件：
-
 ```vue
-<!-- MyModal.vue -->
-<script setup lang="ts">
-import { onBeforeClose } from 'vue-modal-core';
-
-defineProps<{
-  content: string;
-}>()
-defineModel<boolean>('show')
-
-// 在模态框组件中使用关闭前钩子
-onBeforeClose(async () => {
-  await new Promise(resolve => setTimeout(resolve, 1000));// 等待 1 秒
-  // 返回 false 可以阻止模态框关闭
-});
-</script>
 <template>
-  <div class="modal" :class="{ 'show': show }">
+  <div v-if="visible" class="modal">
     <div class="modal-content">
-      {{ content }}
+      <!-- 你的模态框内容 -->
       <button @click="$emit('update:visible', false)">关闭</button>
@@ -69,44 +42,119 @@ </div>
 </template>
+
+<script setup lang="ts">
+defineProps<{
+  visible: boolean
+}>()
+</script>
 ```
 
-3. 在应用中使用：
+2. 在应用中使用：
 
 ```typescript
-import { makeModal } from './dialog';
-import MyModal from './MyModal.vue';
+import { createModalContext } from 'vue-modal-core'
+import MyModal from './MyModal.vue'
 
 // 创建模态框上下文
+const { makeModal, ModalRenderer } = createModalContext({
+  baseZIndex: 1000,  // 基础 z-index
+  allowMultiple: true,  // 是否允许多个模态框同时存在
+  debug: false  // 是否开启调试日志
+})
 
-
 // 创建模态框实例
-const modal = makeModal(MyModal);
+const modal = makeModal(MyModal)
 
 // 打开模态框
 modal.open({
-  // 传入 props
-  content: 'Hello, World!'
-});
+  // 传入 props（除了 visible）
+  title: '标题',
+  content: '内容'
+})
 
-setTimeout(() => {
-  modal.close();
-}, 3000);
+// 关闭模态框
+await modal.close()
 
-
+// 检查模态框是否可见
+const isVisible = modal.isVisible()
 ```
 
-4. 在应用根组件中挂载渲染器：
+3. 在 App.vue 中挂载渲染器：
 
 ```vue
-<!-- App.vue -->
-<script setup lang="ts">
-import { ModalRenderer } from './dialog';
-</script>
 <template>
-  <Teleport to="body">
-    <ModalRenderer />
-  </Teleport>
-  <!-- Page Content -->
+  <div>
+    <!-- 你的应用内容 -->
+    <modal-renderer />
+  </div>
 </template>
 ```
 
+## 高级特性
+
+### 关闭前钩子
+
+你可以使用 `onBeforeClose` 钩子来控制模态框的关闭行为：
+
+```typescript
+import { onBeforeClose } from 'vue-modal-core'
+
+// 在模态框组件中
+onBeforeClose(async () => {
+  // 返回 false 可以阻止模态框关闭
+  const shouldClose = await askUser()
+  return shouldClose
+})
+```
+
+### 多模态框管理
+
+```typescript
+// 创建多个模态框实例
+const modal1 = makeModal(MyModal, Symbol('Modal1'))
+const modal2 = makeModal(MyModal, Symbol('Modal2'))
+
+// 控制是否允许多个模态框同时显示
+const { makeModal, ModalRenderer } = createModalContext({
+  allowMultiple: false  // 设置为 false 时会自动关闭之前的模态框
+})
+```
+
+### TypeScript 支持
+
+库提供完整的 TypeScript 类型支持，可以获得完整的类型提示：
+
+```typescript
+import type { ExtractComponentOptions } from 'vue-modal-core'
+
+// 模态框的 props 类型会自动推导
+const modal = makeModal(MyModal)
+modal.open({
+  // 这里会获得完整的类型提示
+})
+```
+
+## API 参考
+
+### createModalContext 配置项
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| baseZIndex | number | 1000 | 模态框基础 z-index 值 |
+| allowMultiple | boolean | true | 是否允许多个模态框同时存在 |
+| debug | boolean | false | 是否开启调试日志 |
+
+### Modal 实例方法
+
+| 方法 | 参数 | 返回值 | 说明 |
+|------|------|--------|------|
+| open | props: ExtractComponentOptions<C> | void | 打开模态框 |
+| close | - | Promise<boolean> | 关闭模态框 |
+| isVisible | - | boolean | 获取模态框可见状态 |
+
+## 注意事项
+
+1. 确保在模态框组件中正确处理 `visible` prop 和 `update:visible` 事件
+2. `onBeforeClose` 钩子必须在组件的 setup 函数或 `<script setup>` 中使用
+3. 多个 `onBeforeClose` 钩子会按照后进先出（LIFO）的顺序执行
+
 ## API 文档
@@ -113,0 +161,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25849

67.93%

Dependency count

1

-50%

Number of package files

7

16.67%

Lines of code

485

71.99%

Number of lines in readme file

208

30%

Worsened metrics

Dev dependency count

3

200%

No dependency changes