{"_id":"@cimom/vben-core-popup-ui","_rev":"9-6f173f4eb15af782a27a27b4b465d10a","name":"@cimom/vben-core-popup-ui","dist-tags":{"latest":"5.6.8"},"versions":{"5.5.9":{"name":"@cimom/vben-core-popup-ui","version":"5.5.9","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-popup-ui@5.5.9","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"03109b38b764a83b04d518ef53882deee697f740","tarball":"https://registry.npmjs.org/@cimom/vben-core-popup-ui/-/vben-core-popup-ui-5.5.9.tgz","fileCount":35,"integrity":"sha512-F57jNkDkd/1LiwE+pE3W2C7Zrv2mtcJzqkE2heUZXZ+ikewYVatxiqrf9b4xxF+qwKDxiMqzVR67m/JCXqEBQA==","signatures":[{"sig":"MEQCICUMk3vkzU1VSSarTClnSBy9QKwCnylBuiSe8ph1Jg9VAiAEymuZOlJS7XvNO5jgYQzarmdPr6Jhvzt49+CB+ftRqg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":81996},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./src/index.ts","default":"./dist/index.mjs","development":"./src/index.ts"}},"private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/popup-ui"},"_npmVersion":"10.5.1","description":"Popup UI 组件是一个基于 Vue 3 的弹出层组件库，包含模态框（Modal）、抽屉（Drawer）和警告框（Alert）等组件，提供了丰富的配置选项和 API 调用方式。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","@vueuse/core":"^13.1.0","@cimom/vben-core-icons":"^5.5.9","@cimom/vben-core-shared":"^5.5.9","@cimom/vben-core-typings":"^5.5.9","@cimom/vben-core-shadcn-ui":"^5.5.9","@cimom/vben-core-composables":"^5.5.9"},"publishConfig":{"access":"public","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}}},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-popup-ui_5.5.9_1748415904164_0.9536827227603011","host":"s3://npm-registry-packages-npm-production"}},"5.5.12":{"name":"@cimom/vben-core-popup-ui","version":"5.5.12","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-popup-ui@5.5.12","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"7b966c3744c8b027f4d99d474526c7575fb2491f","tarball":"https://registry.npmjs.org/@cimom/vben-core-popup-ui/-/vben-core-popup-ui-5.5.12.tgz","fileCount":20,"integrity":"sha512-eXr9Y4ecbHGT01nba1TktUEaQuSMz2aDG6gKgYHFtVzPUlT6iahsM484QkYDI3OD5qhg+gd8NQk7dF1szR6XpA==","signatures":[{"sig":"MEQCIAaD4MKIQcOKbrRKr/mAb6gTkpdys99JeL8Ac3UGF0ogAiBGOCy0VQ19EWreNFnAfkLPogQJGM+RCDDnX1NkQPbgRg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":81789},"main":"./src/index.ts","type":"module","module":"./src/index.ts","exports":{".":{"types":"./src/index.ts","default":"./src/index.ts"}},"gitHead":"3633a71e4d39ae0d85548e430d1b5e1e9caf19db","private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/popup-ui"},"_npmVersion":"10.5.1","description":"Popup UI 组件是一个基于 Vue 3 的弹出层组件库，包含模态框（Modal）、抽屉（Drawer）和警告框（Alert）等组件，提供了丰富的配置选项和 API 调用方式。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","@vueuse/core":"^13.1.0","@cimom/vben-core-icons":"^5.5.12","@cimom/vben-core-shared":"^5.5.15","@cimom/vben-core-typings":"^5.5.12","@cimom/vben-core-shadcn-ui":"^5.5.15","@cimom/vben-core-composables":"^5.5.12"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-popup-ui_5.5.12_1749107711905_0.21077804849530635","host":"s3://npm-registry-packages-npm-production"}},"5.2.1":{"name":"@cimom/vben-core-popup-ui","version":"5.2.1","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-popup-ui@5.2.1","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"68ee0a1183d665793a62502916d8a5e906d9082a","tarball":"https://registry.npmjs.org/@cimom/vben-core-popup-ui/-/vben-core-popup-ui-5.2.1.tgz","fileCount":34,"integrity":"sha512-fTEnDZnWDnFsf7pfZu7H2ldVOrAumIkZRoGleGDl8BULkE1o+SA8SU/cJi4zBZ/lgZxlO7TkPGW3fEmLb0ZRDw==","signatures":[{"sig":"MEUCICOSD9XBJCP1oTnFS6uzulY4SvLdG/HjMWoGEg60Jf4OAiEApgqjnEbRNE0kuSCg5HcA9eip1uFNlNrCxYmxxzMZf00=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":67487},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"gitHead":"24e92c6254ccf3ebf0a31fecdee560339ed47e46","private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/popup-ui"},"_npmVersion":"10.5.1","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","@vueuse/core":"^13.1.0","@cimom/vben-core-icons":"^5.6.0","@cimom/vben-core-shared":"^5.6.1","@cimom/vben-core-typings":"^5.6.0","@cimom/vben-core-shadcn-ui":"^5.6.0","@cimom/vben-core-composables":"^5.6.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-popup-ui_5.2.1_1749435238988_0.1987956625308933","host":"s3://npm-registry-packages-npm-production"}},"5.6.0":{"name":"@cimom/vben-core-popup-ui","version":"5.6.0","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-popup-ui@5.6.0","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"52ed4d6d4a9ef6dfe8aea427b4d0a8a1d2322701","tarball":"https://registry.npmjs.org/@cimom/vben-core-popup-ui/-/vben-core-popup-ui-5.6.0.tgz","fileCount":34,"integrity":"sha512-u++QpDZjnrTwUMEOI1ZgmGgHtEp/Jugd8Fubt+KqfkGqxbbUDt1rqHaHCf71xTUU3IiUcbtfhOr4HqBWz0qBRw==","signatures":[{"sig":"MEQCIGZS8Yde8Q+NPN0OciSRsw4iHxfr8xQsTqZvKEXqNrFzAiA+Dl3bESogJRLAn1SznkG1QOaLbsk4eWdnpe1t9P42WQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":67487},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"gitHead":"24e92c6254ccf3ebf0a31fecdee560339ed47e46","private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/popup-ui"},"_npmVersion":"10.5.1","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","@vueuse/core":"^13.1.0","@cimom/vben-core-icons":"^5.6.0","@cimom/vben-core-shared":"^5.6.1","@cimom/vben-core-typings":"^5.6.0","@cimom/vben-core-shadcn-ui":"^5.6.0","@cimom/vben-core-composables":"^5.6.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-popup-ui_5.6.0_1749435701402_0.41947201496419995","host":"s3://npm-registry-packages-npm-production"}},"5.6.1":{"name":"@cimom/vben-core-popup-ui","version":"5.6.1","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-popup-ui@5.6.1","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"abb1dc83a57d855eb02c81caa7dd5fa626d76786","tarball":"https://registry.npmjs.org/@cimom/vben-core-popup-ui/-/vben-core-popup-ui-5.6.1.tgz","fileCount":35,"integrity":"sha512-RUrAcpOGddGqoMW0NqturSjRSAAlWQ9lBO0H3AYqLGC3SaakR8u1bEptz+smmSJKcyeKBPvck/tx2ji3VYIP1Q==","signatures":[{"sig":"MEYCIQDuF+sobPtdY9NTcVtXlce9DTEmIawvyEWu6hOjxkYLgwIhAKAc56lPjYRwvb/hz3ETTEiUktDo4Fhbm6l2uI+YmSsE","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":81837},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"gitHead":"24e92c6254ccf3ebf0a31fecdee560339ed47e46","private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/popup-ui"},"_npmVersion":"10.5.1","description":"Popup UI 组件是一个基于 Vue 3 的弹出层组件库，包含模态框（Modal）、抽屉（Drawer）和警告框（Alert）等组件，提供了丰富的配置选项和 API 调用方式。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","@vueuse/core":"^13.1.0","@cimom/vben-core-icons":"^5.6.0","@cimom/vben-core-shared":"^5.6.1","@cimom/vben-core-typings":"^5.6.0","@cimom/vben-core-shadcn-ui":"^5.6.0","@cimom/vben-core-composables":"^5.6.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-popup-ui_5.6.1_1749440307733_0.08920165616853604","host":"s3://npm-registry-packages-npm-production"}},"5.6.2":{"name":"@cimom/vben-core-popup-ui","version":"5.6.2","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-popup-ui@5.6.2","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"cc34377c6f6e0aa2ba039ba22dd83d2f73b934e1","tarball":"https://registry.npmjs.org/@cimom/vben-core-popup-ui/-/vben-core-popup-ui-5.6.2.tgz","fileCount":35,"integrity":"sha512-SHGYcSNxvsAZYP4muBtAbdh5EWBf4ZkS5op+09uY1sT3YpLoEOjh2nbohE+xvMYGCCinlEVadRjDSCNA0xDT5Q==","signatures":[{"sig":"MEUCIQDjW2tzkfTirMAqZLAQCyyNy/z8NMfnpEf5kMB2oAtNtAIgKls6sUVMJeMbm2wE7KdgAwy1iTPVUa0i6zQ1Nikf1ok=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":81626},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"gitHead":"24e92c6254ccf3ebf0a31fecdee560339ed47e46","private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/popup-ui"},"_npmVersion":"10.5.1","description":"Popup UI 组件是一个基于 Vue 3 的弹出层组件库，包含模态框（Modal）、抽屉（Drawer）和警告框（Alert）等组件，提供了丰富的配置选项和 API 调用方式。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","@vueuse/core":"^13.1.0","@cimom/vben-core-icons":"*","@cimom/vben-core-shared":"*","@cimom/vben-core-typings":"*","@cimom/vben-core-shadcn-ui":"*","@cimom/vben-core-composables":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-popup-ui_5.6.2_1749457113546_0.3687997516371473","host":"s3://npm-registry-packages-npm-production"}},"5.6.3":{"name":"@cimom/vben-core-popup-ui","version":"5.6.3","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-popup-ui@5.6.3","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"3c036dfd5b501320362f8905d73c4f11e144dd45","tarball":"https://registry.npmjs.org/@cimom/vben-core-popup-ui/-/vben-core-popup-ui-5.6.3.tgz","fileCount":53,"integrity":"sha512-D4JcdhxV9cC5Zo6TiUMB0KHS+2dHOayo0/WjTH8OuzLobUmlI7zUaAXHUNqpQa56YmA1Ce0cOBq56oWH/No4Yg==","signatures":[{"sig":"MEYCIQCs+kz+CxfZqMOdByt8f58G8IwdkfZ2WAQiZ8cs+sp4FAIhAMY1PL8bXCrgH9l4gYo9PIY+aegj+afrLqFfAq36+Qhz","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":149152},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"gitHead":"4658e451554fb07b03bcd870c1694010f7362c31","private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/popup-ui"},"_npmVersion":"10.5.1","description":"Popup UI 组件是一个基于 Vue 3 的弹出层组件库，包含模态框（Modal）、抽屉（Drawer）和警告框（Alert）等组件，提供了丰富的配置选项和 API 调用方式。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","@vueuse/core":"^13.1.0","@cimom/vben-core-icons":"*","@cimom/vben-core-shared":"*","@cimom/vben-core-typings":"*","@cimom/vben-core-shadcn-ui":"*","@cimom/vben-core-composables":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-popup-ui_5.6.3_1749566962428_0.09221683141603854","host":"s3://npm-registry-packages-npm-production"}},"5.6.8":{"name":"@cimom/vben-core-popup-ui","version":"5.6.8","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-popup-ui@5.6.8","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"53aaf442516690284457a8a3cd041e43902b469a","tarball":"https://registry.npmjs.org/@cimom/vben-core-popup-ui/-/vben-core-popup-ui-5.6.8.tgz","fileCount":53,"integrity":"sha512-dT2pFetCD7J+J6ctAQlV1RSlUrDeqKSamFRIyQ+I1l0sMPU848caErCAYxdwCpKQl4H3D6viTP8QvsmlxuomRw==","signatures":[{"sig":"MEYCIQD1ZBPJxnUvpMbnLl94h4c7FRmZunks0EGg3x/4Sm+6UQIhAO/m38Pmk6ZA5K6Pvs5KTIUSvwl3za1XBgQvg5sMotc9","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":149202},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"gitHead":"59e2231aeb00db23143220cc2a9229aabfdaceb4","private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/popup-ui"},"_npmVersion":"10.5.1","description":"Popup UI 组件是一个基于 Vue 3 的弹出层组件库，包含模态框（Modal）、抽屉（Drawer）和警告框（Alert）等组件，提供了丰富的配置选项和 API 调用方式。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","@vueuse/core":"^13.1.0","@cimom/vben-core-icons":"*","@cimom/vben-core-shared":"*","@cimom/vben-core-typings":"*","@cimom/vben-core-shadcn-ui":"*","@cimom/vben-core-composables":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"vue":"^3.5.13"},"_npmOperationalInternal":{"tmp":"tmp/vben-core-popup-ui_5.6.8_1749621093416_0.013570649956313963","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-05-28T07:05:04.068Z","modified":"2026-01-14T01:37:29.284Z","5.5.9":"2025-05-28T07:05:04.324Z","5.5.12":"2025-06-05T07:15:12.100Z","5.2.1":"2025-06-09T02:13:59.175Z","5.6.0":"2025-06-09T02:21:41.599Z","5.6.1":"2025-06-09T03:38:27.926Z","5.6.2":"2025-06-09T08:18:33.789Z","5.6.3":"2025-06-10T14:49:22.604Z","5.6.8":"2025-06-11T05:51:33.597Z"},"bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","homepage":"https://github.com/vbenjs/vue-vben-admin","repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/popup-ui"},"description":"Popup UI 组件是一个基于 Vue 3 的弹出层组件库，包含模态框（Modal）、抽屉（Drawer）和警告框（Alert）等组件，提供了丰富的配置选项和 API 调用方式。","maintainers":[{"email":"msj1370380114@gmail.com","name":"moushangjie"},{"email":"57237184@qq.com","name":"hdeqi2005"},{"email":"6983376@qq.com","name":"xxcazzy"}],"readme":"# Popup UI 组件\n\nPopup UI 组件是一个基于 Vue 3 的弹出层组件库，包含模态框（Modal）、抽屉（Drawer）和警告框（Alert）等组件，提供了丰富的配置选项和 API 调用方式。\n\n## 安装\n\n```bash\nnpm install @cimom/vben-core-ui-kit-popup-ui\n```\n\n## 组件列表\n\n- **Modal**: 模态对话框\n- **Drawer**: 抽屉组件\n- **Alert**: 警告提示框\n\n## Modal 模态对话框\n\n### 基本使用\n\n```vue\n<script setup lang=\"ts\">\nimport { Modal } from '@cimom/vben-core-ui-kit-popup-ui';\nimport { ref } from 'vue';\n\nconst visible = ref(false);\n\nconst handleOpen = () => {\n  visible.value = true;\n};\n\nconst handleClose = () => {\n  visible.value = false;\n};\n\nconst handleConfirm = () => {\n  console.log('确认');\n  visible.value = false;\n};\n</script>\n\n<template>\n  <button @click=\"handleOpen\">打开模态框</button>\n\n  <Modal\n    v-model:isOpen=\"visible\"\n    title=\"基本模态框\"\n    @confirm=\"handleConfirm\"\n    @cancel=\"handleClose\"\n  >\n    <div>这是一个基本的模态框内容</div>\n  </Modal>\n</template>\n```\n\n### 使用 API 方式调用\n\n```vue\n<script setup lang=\"ts\">\nimport { useModal } from '@cimom/vben-core-ui-kit-popup-ui';\n\nconst modal = useModal();\n\nconst openModal = () => {\n  modal.open({\n    title: 'API 调用模态框',\n    content: '这是通过 API 方式打开的模态框',\n    onConfirm: () => {\n      console.log('确认');\n      modal.close();\n    },\n  });\n};\n</script>\n\n<template>\n  <button @click=\"openModal\">API 打开模态框</button>\n</template>\n```\n\n### Modal 属性\n\n| 属性名             | 类型      | 默认值   | 说明                 |\n| ------------------ | --------- | -------- | -------------------- |\n| isOpen             | `boolean` | `false`  | 是否显示模态框       |\n| title              | `string`  | `''`     | 标题                 |\n| titleTooltip       | `string`  | -        | 标题提示信息         |\n| description        | `string`  | -        | 描述信息             |\n| confirmText        | `string`  | `'确认'` | 确认按钮文本         |\n| cancelText         | `string`  | `'取消'` | 取消按钮文本         |\n| showConfirmButton  | `boolean` | `true`   | 是否显示确认按钮     |\n| showCancelButton   | `boolean` | `true`   | 是否显示取消按钮     |\n| confirmDisabled    | `boolean` | `false`  | 确认按钮是否禁用     |\n| confirmLoading     | `boolean` | `false`  | 确认按钮是否加载中   |\n| closable           | `boolean` | `true`   | 是否显示关闭按钮     |\n| closeOnClickModal  | `boolean` | `true`   | 点击遮罩是否关闭     |\n| closeOnPressEscape | `boolean` | `true`   | 按 ESC 是否关闭      |\n| centered           | `boolean` | `false`  | 是否居中显示         |\n| fullscreen         | `boolean` | `false`  | 是否全屏显示         |\n| fullscreenButton   | `boolean` | `true`   | 是否显示全屏按钮     |\n| draggable          | `boolean` | `false`  | 是否可拖拽           |\n| bordered           | `boolean` | `true`   | 是否显示边框         |\n| destroyOnClose     | `boolean` | `true`   | 关闭时是否销毁子元素 |\n| loading            | `boolean` | `false`  | 是否显示加载状态     |\n| submitting         | `boolean` | `false`  | 是否处于提交状态     |\n| modal              | `boolean` | `true`   | 是否显示遮罩         |\n| openAutoFocus      | `boolean` | `false`  | 打开时是否自动聚焦   |\n| header             | `boolean` | `true`   | 是否显示头部         |\n| footer             | `boolean` | `true`   | 是否显示底部         |\n| class              | `string`  | `''`     | 自定义类名           |\n| headerClass        | `string`  | `''`     | 头部自定义类名       |\n| contentClass       | `string`  | `''`     | 内容自定义类名       |\n| footerClass        | `string`  | `''`     | 底部自定义类名       |\n| zIndex             | `number`  | -        | z-index 层级         |\n| appendToMain       | `boolean` | `false`  | 是否挂载到主内容区域 |\n| overlayBlur        | `boolean` | `false`  | 是否模糊背景         |\n\n### Modal 事件\n\n| 事件名        | 参数                        | 说明                     |\n| ------------- | --------------------------- | ------------------------ |\n| update:isOpen | `(isOpen: boolean) => void` | 更新打开状态             |\n| confirm       | -                           | 点击确认按钮时触发       |\n| cancel        | -                           | 点击取消按钮时触发       |\n| close         | -                           | 关闭模态框时触发         |\n| closed        | -                           | 模态框关闭动画结束后触发 |\n| open          | -                           | 打开模态框时触发         |\n| opened        | -                           | 模态框打开动画结束后触发 |\n\n### Modal API 方法\n\n| 方法名 | 参数 | 返回值 | 说明 |\n| --- | --- | --- | --- |\n| open | `(options?: ModalOptions) => void` | - | 打开模态框 |\n| close | - | `Promise<void>` | 关闭模态框 |\n| setData | `<T>(data: T) => ModalApi` | `ModalApi` | 设置数据 |\n| getData | - | `<T>() => T` | 获取数据 |\n| setState | `(state: Partial<ModalState>) => ModalApi` | `ModalApi` | 设置状态 |\n| lock | `(isLocked?: boolean) => ModalApi` | `ModalApi` | 锁定模态框 |\n| unlock | - | `ModalApi` | 解锁模态框 |\n\n## Drawer 抽屉组件\n\n### 基本使用\n\n```vue\n<script setup lang=\"ts\">\nimport { Drawer } from '@cimom/vben-core-ui-kit-popup-ui';\nimport { ref } from 'vue';\n\nconst visible = ref(false);\nconst placement = ref('right');\n\nconst handleOpen = () => {\n  visible.value = true;\n};\n\nconst handleClose = () => {\n  visible.value = false;\n};\n</script>\n\n<template>\n  <button @click=\"handleOpen\">打开抽屉</button>\n\n  <Drawer\n    v-model:isOpen=\"visible\"\n    :placement=\"placement\"\n    title=\"基本抽屉\"\n    @close=\"handleClose\"\n  >\n    <div>这是一个基本的抽屉内容</div>\n  </Drawer>\n</template>\n```\n\n### 使用 API 方式调用\n\n```vue\n<script setup lang=\"ts\">\nimport { useDrawer } from '@cimom/vben-core-ui-kit-popup-ui';\n\nconst drawer = useDrawer();\n\nconst openDrawer = () => {\n  drawer.open({\n    title: 'API 调用抽屉',\n    content: '这是通过 API 方式打开的抽屉',\n    placement: 'right',\n    width: '30%',\n    onClose: () => {\n      console.log('关闭');\n    },\n  });\n};\n</script>\n\n<template>\n  <button @click=\"openDrawer\">API 打开抽屉</button>\n</template>\n```\n\n### Drawer 属性\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| isOpen | `boolean` | `false` | 是否显示抽屉 |\n| title | `string` | `''` | 标题 |\n| placement | `'top' \\| 'right' \\| 'bottom' \\| 'left'` | `'right'` | 抽屉位置 |\n| width | `string \\| number` | `'30%'` | 宽度（placement 为 left 或 right 时有效） |\n| height | `string \\| number` | `'30%'` | 高度（placement 为 top 或 bottom 时有效） |\n| closable | `boolean` | `true` | 是否显示关闭按钮 |\n| closeOnClickModal | `boolean` | `true` | 点击遮罩是否关闭 |\n| closeOnPressEscape | `boolean` | `true` | 按 ESC 是否关闭 |\n| destroyOnClose | `boolean` | `true` | 关闭时是否销毁子元素 |\n| loading | `boolean` | `false` | 是否显示加载状态 |\n| submitting | `boolean` | `false` | 是否处于提交状态 |\n| modal | `boolean` | `true` | 是否显示遮罩 |\n| header | `boolean` | `true` | 是否显示头部 |\n| footer | `boolean` | `false` | 是否显示底部 |\n| showConfirmButton | `boolean` | `false` | 是否显示确认按钮 |\n| showCancelButton | `boolean` | `false` | 是否显示取消按钮 |\n| confirmText | `string` | `'确认'` | 确认按钮文本 |\n| cancelText | `string` | `'取消'` | 取消按钮文本 |\n| class | `string` | `''` | 自定义类名 |\n| headerClass | `string` | `''` | 头部自定义类名 |\n| contentClass | `string` | `''` | 内容自定义类名 |\n| footerClass | `string` | `''` | 底部自定义类名 |\n| zIndex | `number` | - | z-index 层级 |\n\n### Drawer 事件\n\n| 事件名        | 参数                        | 说明                   |\n| ------------- | --------------------------- | ---------------------- |\n| update:isOpen | `(isOpen: boolean) => void` | 更新打开状态           |\n| confirm       | -                           | 点击确认按钮时触发     |\n| cancel        | -                           | 点击取消按钮时触发     |\n| close         | -                           | 关闭抽屉时触发         |\n| closed        | -                           | 抽屉关闭动画结束后触发 |\n| open          | -                           | 打开抽屉时触发         |\n| opened        | -                           | 抽屉打开动画结束后触发 |\n\n### Drawer API 方法\n\n| 方法名 | 参数 | 返回值 | 说明 |\n| --- | --- | --- | --- |\n| open | `(options?: DrawerOptions) => void` | - | 打开抽屉 |\n| close | - | `Promise<void>` | 关闭抽屉 |\n| setData | `<T>(data: T) => DrawerApi` | `DrawerApi` | 设置数据 |\n| getData | - | `<T>() => T` | 获取数据 |\n| setState | `(state: Partial<DrawerState>) => DrawerApi` | `DrawerApi` | 设置状态 |\n| lock | `(isLocked?: boolean) => DrawerApi` | `DrawerApi` | 锁定抽屉 |\n| unlock | - | `DrawerApi` | 解锁抽屉 |\n\n## Alert 警告提示框\n\n### 基本使用\n\n```vue\n<script setup lang=\"ts\">\nimport { useAlert } from '@cimom/vben-core-ui-kit-popup-ui';\n\nconst alert = useAlert();\n\nconst showSuccess = () => {\n  alert.success('操作成功', '成功提示');\n};\n\nconst showError = () => {\n  alert.error('操作失败', '错误提示');\n};\n\nconst showWarning = () => {\n  alert.warning('注意事项', '警告提示');\n};\n\nconst showInfo = () => {\n  alert.info('提示信息', '信息提示');\n};\n</script>\n\n<template>\n  <div class=\"space-x-2\">\n    <button @click=\"showSuccess\">成功提示</button>\n    <button @click=\"showError\">错误提示</button>\n    <button @click=\"showWarning\">警告提示</button>\n    <button @click=\"showInfo\">信息提示</button>\n  </div>\n</template>\n```\n\n### Alert API 方法\n\n| 方法名 | 参数 | 返回值 | 说明 |\n| --- | --- | --- | --- |\n| success | `(message: string, title?: string, options?: AlertOptions) => void` | - | 显示成功提示 |\n| error | `(message: string, title?: string, options?: AlertOptions) => void` | - | 显示错误提示 |\n| warning | `(message: string, title?: string, options?: AlertOptions) => void` | - | 显示警告提示 |\n| info | `(message: string, title?: string, options?: AlertOptions) => void` | - | 显示信息提示 |\n| confirm | `(message: string, title?: string, options?: AlertOptions) => Promise<boolean>` | `Promise<boolean>` | 显示确认提示框 |\n\n### AlertOptions 配置项\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| confirmText | `string` | `'确认'` | 确认按钮文本 |\n| cancelText | `string` | `'取消'` | 取消按钮文本 |\n| showCancelButton | `boolean` | `false` | 是否显示取消按钮 |\n| centered | `boolean` | `true` | 是否居中显示 |\n| closable | `boolean` | `true` | 是否显示关闭按钮 |\n| closeOnClickModal | `boolean` | `true` | 点击遮罩是否关闭 |\n| closeOnPressEscape | `boolean` | `true` | 按 ESC 是否关闭 |\n| duration | `number` | `3000` | 自动关闭的延时（毫秒），设为 0 则不自动关闭 |\n\n## 示例\n\n### 自定义内容的模态框\n\n```vue\n<template>\n  <button @click=\"openCustomModal\">打开自定义模态框</button>\n</template>\n\n<script setup lang=\"ts\">\nimport { useModal } from '@cimom/vben-core-ui-kit-popup-ui';\nimport { h } from 'vue';\n\nconst modal = useModal();\n\nconst openCustomModal = () => {\n  modal.open({\n    title: '自定义内容',\n    content: h('div', { class: 'p-4' }, [\n      h('h3', { class: 'text-lg font-bold mb-2' }, '用户信息'),\n      h('div', { class: 'mb-2' }, [\n        h('span', { class: 'font-medium' }, '用户名: '),\n        h('span', 'admin'),\n      ]),\n      h('div', { class: 'mb-2' }, [\n        h('span', { class: 'font-medium' }, '邮箱: '),\n        h('span', 'admin@example.com'),\n      ]),\n      h('div', { class: 'mb-2' }, [\n        h('span', { class: 'font-medium' }, '角色: '),\n        h('span', '管理员'),\n      ]),\n    ]),\n    width: '500px',\n    centered: true,\n  });\n};\n</script>\n```\n\n### 异步操作的模态框\n\n```vue\n<template>\n  <button @click=\"openAsyncModal\">打开异步操作模态框</button>\n</template>\n\n<script setup lang=\"ts\">\nimport { useModal } from '@cimom/vben-core-ui-kit-popup-ui';\n\nconst modal = useModal();\n\nconst openAsyncModal = () => {\n  const modalInstance = modal.open({\n    title: '异步操作',\n    content: '确认执行此操作吗？此操作需要一些时间完成。',\n    onConfirm: async () => {\n      try {\n        // 锁定模态框，防止重复提交\n        modalInstance.lock();\n\n        // 模拟异步操作\n        await new Promise((resolve) => setTimeout(resolve, 2000));\n\n        // 操作成功后关闭模态框\n        modalInstance.close();\n\n        // 显示成功提示\n        modal.success('操作成功完成');\n      } catch (error) {\n        // 解锁模态框，允许用户重试\n        modalInstance.unlock();\n\n        // 显示错误提示\n        modal.error('操作失败: ' + error.message);\n      }\n    },\n  });\n};\n</script>\n```\n\n### 表单抽屉\n\n```vue\n<template>\n  <button @click=\"openFormDrawer\">打开表单抽屉</button>\n</template>\n\n<script setup lang=\"ts\">\nimport { useDrawer } from '@cimom/vben-core-ui-kit-popup-ui';\nimport { ref, h } from 'vue';\n\nconst drawer = useDrawer();\n\nconst openFormDrawer = () => {\n  const formData = ref({\n    name: '',\n    email: '',\n    description: '',\n  });\n\n  const drawerInstance = drawer.open({\n    title: '添加用户',\n    content: h('div', { class: 'p-4' }, [\n      h('div', { class: 'mb-4' }, [\n        h('label', { class: 'block mb-1' }, '姓名'),\n        h('input', {\n          class: 'w-full p-2 border rounded',\n          value: formData.value.name,\n          onInput: (e) => (formData.value.name = e.target.value),\n        }),\n      ]),\n      h('div', { class: 'mb-4' }, [\n        h('label', { class: 'block mb-1' }, '邮箱'),\n        h('input', {\n          class: 'w-full p-2 border rounded',\n          value: formData.value.email,\n          onInput: (e) => (formData.value.email = e.target.value),\n        }),\n      ]),\n      h('div', { class: 'mb-4' }, [\n        h('label', { class: 'block mb-1' }, '描述'),\n        h('textarea', {\n          class: 'w-full p-2 border rounded',\n          rows: 4,\n          value: formData.value.description,\n          onInput: (e) => (formData.value.description = e.target.value),\n        }),\n      ]),\n    ]),\n    footer: true,\n    showConfirmButton: true,\n    showCancelButton: true,\n    confirmText: '保存',\n    cancelText: '取消',\n    width: '400px',\n    onConfirm: async () => {\n      // 验证表单\n      if (!formData.value.name || !formData.value.email) {\n        drawer.error('请填写必填字段');\n        return;\n      }\n\n      // 锁定抽屉\n      drawerInstance.lock();\n\n      try {\n        // 模拟提交数据\n        await new Promise((resolve) => setTimeout(resolve, 1000));\n\n        // 关闭抽屉\n        drawerInstance.close();\n\n        // 显示成功提示\n        drawer.success('用户添加成功');\n      } catch (error) {\n        // 解锁抽屉\n        drawerInstance.unlock();\n\n        // 显示错误提示\n        drawer.error('保存失败: ' + error.message);\n      }\n    },\n  });\n};\n</script>\n```\n","readmeFilename":"README.md"}