{"_id":"@determaer/vue-use-modal","_rev":"6-c611c0d45688a080b819512423774170","name":"@determaer/vue-use-modal","dist-tags":{"latest":"1.0.2"},"versions":{"0.0.1":{"name":"@determaer/vue-use-modal","version":"0.0.1","keywords":["vue3-use-modal","use-modal","vue3","modal"],"author":{"url":"https://github.com/determaer","name":"Georgii Smirnov"},"license":"MIT","_id":"@determaer/vue-use-modal@0.0.1","maintainers":[{"name":"determaer","email":"determaer2012@gmail.com"}],"homepage":"https://github.com/determaer/vue-use-modal#readme","bugs":{"url":"https://github.com/determaer/vue-use-modal/issues"},"dist":{"shasum":"0d3645ab90b3cafbcb6b30e2fd9c1c4aa150c369","tarball":"https://registry.npmjs.org/@determaer/vue-use-modal/-/vue-use-modal-0.0.1.tgz","fileCount":6,"integrity":"sha512-GrVuDW+C9l4W0JCs3Wc3f33YdV9AVSIdbuhYi9rD2E0lcLFEiwdniVzjF1X6Nyxky1ulhudT76mq3+CiIlY7KA==","signatures":[{"sig":"MEQCIAZvb81cNaerT0W/rEFCB9R7G4dY0nitj6jVpuzXQ/y9AiA9+OfcCBEPyetiJAOIut9HIrS7TQxEqnvIh3ldQNyS2g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6429},"main":"./dist/vue3-use-modal.umd.js","type":"module","module":"./dist/vue3-use-modal.es.js","styles":"./dist/style.css","exports":{".":{"import":"./dist/vue3-use-modal.umd.js","require":"./dist/vue3-use-modal.umd.js"}},"gitHead":"d2a446ee27a80ff73b32fd3ca749af60f1b9e091","private":false,"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview"},"typings":"./dist/index.d.ts","_npmUser":{"name":"determaer","email":"determaer2012@gmail.com"},"repository":{"url":"git+https://github.com/determaer/vue-use-modal.git","type":"git"},"_npmVersion":"10.8.2","description":"This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.","directories":{},"_nodeVersion":"22.19.0","dependencies":{"vue":"^3.5.22"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.7","vue-tsc":"^3.1.0","typescript":"~5.9.3","@types/node":"^24.6.0","@vue/tsconfig":"^0.8.1","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.1"},"peerDependencies":{"vue":"^3.5.22"},"_npmOperationalInternal":{"tmp":"tmp/vue-use-modal_0.0.1_1760594340386_0.8497822464041587","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@determaer/vue-use-modal","version":"0.0.2","keywords":["vue3-use-modal","use-modal","vue3","modal"],"author":{"url":"https://github.com/determaer","name":"Georgii Smirnov"},"license":"MIT","_id":"@determaer/vue-use-modal@0.0.2","maintainers":[{"name":"determaer","email":"determaer2012@gmail.com"}],"homepage":"https://github.com/determaer/vue-use-modal#readme","bugs":{"url":"https://github.com/determaer/vue-use-modal/issues"},"dist":{"shasum":"f0b59d516436592beaebf5d5817c60f942cdca43","tarball":"https://registry.npmjs.org/@determaer/vue-use-modal/-/vue-use-modal-0.0.2.tgz","fileCount":6,"integrity":"sha512-dQppc/lSqQ+Ibx0ezS/d9VwPiETHlRbJ5zhfUIr7E3Xn4IIOARUSpaJtL8BeiT54R1B8Q968nOcYhAakM/iojg==","signatures":[{"sig":"MEUCIFGv5FaS7u65NvMRRJ7s/x5aWg+1e326uMidiGTU/JlNAiEAiGlyIfzuDlP+F92nInWG1kN3n6iGESGSkt1fvFTOp+0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6466},"main":"./dist/vue3-use-modal.umd.js","type":"module","module":"./dist/vue3-use-modal.es.js","styles":"./dist/style.css","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/vue3-use-modal.umd.js","require":"./dist/vue3-use-modal.umd.js"}},"gitHead":"d2a446ee27a80ff73b32fd3ca749af60f1b9e091","private":false,"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview"},"typings":"./dist/index.d.ts","_npmUser":{"name":"determaer","email":"determaer2012@gmail.com"},"repository":{"url":"git+https://github.com/determaer/vue-use-modal.git","type":"git"},"_npmVersion":"10.8.2","description":"This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.","directories":{},"_nodeVersion":"22.19.0","dependencies":{"vue":"^3.5.22"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.7","vue-tsc":"^3.1.0","typescript":"~5.9.3","@types/node":"^24.6.0","@vue/tsconfig":"^0.8.1","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.1"},"peerDependencies":{"vue":"^3.5.22"},"_npmOperationalInternal":{"tmp":"tmp/vue-use-modal_0.0.2_1760594674392_0.6124423130460113","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@determaer/vue-use-modal","version":"0.0.3","keywords":["vue3-use-modal","use-modal","vue3","modal"],"author":{"url":"https://github.com/determaer","name":"Georgii Smirnov"},"license":"MIT","_id":"@determaer/vue-use-modal@0.0.3","maintainers":[{"name":"determaer","email":"determaer2012@gmail.com"}],"homepage":"https://github.com/determaer/vue-use-modal#readme","bugs":{"url":"https://github.com/determaer/vue-use-modal/issues"},"dist":{"shasum":"39202246b149cbb8657990abb1be36d257eb25c9","tarball":"https://registry.npmjs.org/@determaer/vue-use-modal/-/vue-use-modal-0.0.3.tgz","fileCount":5,"integrity":"sha512-drHP6DipME8Fo5Zfhq3vl4Nf9GnEMI9nuUSbk3a9EWlR6cuMtmcH7fbBaRJEhiUSyYF5fpC80eMlZjody2SJNw==","signatures":[{"sig":"MEYCIQCtcGv3gV7PrWocLo+LEz/LwjDddGxaETy1N8Mk6i7SawIhALj+nwvKYEu8coREuZWNM6WPGYcZ+qESx30X8fYiUR3v","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7482},"main":"./dist/vue3-use-modal.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/vue3-use-modal.es.js","styles":"./dist/style.css","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/vue3-use-modal.umd.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/vue3-use-modal.umd.js"}}},"gitHead":"d2a446ee27a80ff73b32fd3ca749af60f1b9e091","private":false,"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"determaer","email":"determaer2012@gmail.com"},"repository":{"url":"git+https://github.com/determaer/vue-use-modal.git","type":"git"},"_npmVersion":"10.8.2","description":"This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.","directories":{},"_nodeVersion":"22.19.0","dependencies":{"vue":"^3.5.22"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.7","vue-tsc":"^3.1.0","typescript":"~5.9.3","@types/node":"^24.6.0","@vue/tsconfig":"^0.8.1","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.1","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"vue":"^3.5.22"},"_npmOperationalInternal":{"tmp":"tmp/vue-use-modal_0.0.3_1760597380240_0.09445548508819424","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@determaer/vue-use-modal","version":"1.0.0","keywords":["vue3-use-modal","use-modal","vue3","modal"],"author":{"url":"https://github.com/determaer","name":"Georgii Smirnov"},"license":"MIT","_id":"@determaer/vue-use-modal@1.0.0","maintainers":[{"name":"determaer","email":"determaer2012@gmail.com"}],"homepage":"https://github.com/determaer/vue-use-modal#readme","bugs":{"url":"https://github.com/determaer/vue-use-modal/issues"},"dist":{"shasum":"26cd8ed51e3b5d3da79804696009173886a2e14c","tarball":"https://registry.npmjs.org/@determaer/vue-use-modal/-/vue-use-modal-1.0.0.tgz","fileCount":5,"integrity":"sha512-hECXQdMTstPwuTN1pp9LS9uP30vwCWk2WPFuX+CxCyVReUtQZF+4UElSvZ8XXgzP0Y7gOVKICgwST+JSWGzYqg==","signatures":[{"sig":"MEUCIHrZGxvB7Yekt3NzPuWGN1FMsyuVYl5Bzj7i0v/7MHHjAiEAqE2woRW5XyVU2kEV+5xJghA5nwsQ8swKPC4btUjE38o=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10222},"main":"./dist/vue3-use-modal.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/vue3-use-modal.es.js","styles":"./dist/style.css","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/vue3-use-modal.umd.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/vue3-use-modal.umd.js"}}},"gitHead":"6c9706911628196fb1aca30a5e0f50e477d364f3","private":false,"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"determaer","email":"determaer2012@gmail.com"},"repository":{"url":"git+https://github.com/determaer/vue-use-modal.git","type":"git"},"_npmVersion":"10.8.2","description":"This library was created to simplify utilization process of modal windows in Vue applications with use of async components.","directories":{},"_nodeVersion":"22.19.0","dependencies":{"vue":"^3.5.22"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.7","vue-tsc":"^3.1.0","typescript":"~5.9.3","@types/node":"^24.6.0","@vue/tsconfig":"^0.8.1","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.1","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"vue":"^3.5.22"},"_npmOperationalInternal":{"tmp":"tmp/vue-use-modal_1.0.0_1760608915071_0.6069107909106193","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@determaer/vue-use-modal","version":"1.0.1","keywords":["vue3-use-modal","use-modal","vue3","modal"],"author":{"url":"https://github.com/determaer","name":"Georgii Smirnov"},"license":"MIT","_id":"@determaer/vue-use-modal@1.0.1","maintainers":[{"name":"determaer","email":"determaer2012@gmail.com"}],"homepage":"https://github.com/determaer/vue-use-modal#readme","bugs":{"url":"https://github.com/determaer/vue-use-modal/issues"},"dist":{"shasum":"252e61b908c94536a326c7c712880fe6f9a9586d","tarball":"https://registry.npmjs.org/@determaer/vue-use-modal/-/vue-use-modal-1.0.1.tgz","fileCount":5,"integrity":"sha512-/abwJcc1tZmPQZLWyiMbgPzLZSiuEMFOhm2sAVKqwLhphEn7aa6wsPk6Ll5jSimyTvDmqa8mFUro/h3UWvx5Aw==","signatures":[{"sig":"MEUCIQD/lQlgO50EpVa4+7jMN25oSRLF7ZGBuuiP8JBWoxU+fQIgdTW/dtY/jvpYBjUW6frbSdmbqpCZWfT01xYUtMPzebw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11674},"main":"./dist/vue3-use-modal.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/vue3-use-modal.es.js","styles":"./dist/style.css","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/vue3-use-modal.umd.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/vue3-use-modal.umd.js"}}},"gitHead":"3f7e1c8ef13add0bf8fb2d24c868fabd44ada5e4","private":false,"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"determaer","email":"determaer2012@gmail.com"},"repository":{"url":"git+https://github.com/determaer/vue-use-modal.git","type":"git"},"_npmVersion":"10.8.2","description":"This library was created to simplify utilization process of modal windows in Vue applications with use of async components.","directories":{},"_nodeVersion":"22.19.0","dependencies":{"vue":"^3.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.7","vue-tsc":"^3.1.0","typescript":"~5.9.3","@types/node":"^24.6.0","@vue/tsconfig":"^0.8.1","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.1","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"vue":"^3.x"},"_npmOperationalInternal":{"tmp":"tmp/vue-use-modal_1.0.1_1761740976051_0.4864677801693378","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@determaer/vue-use-modal","private":false,"version":"1.0.2","type":"module","author":{"name":"Georgii Smirnov","url":"https://github.com/determaer"},"main":"./dist/vue3-use-modal.umd.js","module":"./dist/vue3-use-modal.es.js","types":"./dist/index.d.ts","styles":"./dist/style.css","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/vue3-use-modal.umd.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/vue3-use-modal.umd.js"}}},"peerDependencies":{"vue":"^3.x"},"keywords":["vue3-use-modal","use-modal","vue3","modal"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/determaer/vue-use-modal.git"},"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview","lint-fix":"npx eslint . --fix","lint":"npx eslint ."},"dependencies":{"vue":"^3.0"},"devDependencies":{"@types/node":"^24.6.0","@vitejs/plugin-vue":"^6.0.1","@vue/tsconfig":"^0.8.1","typescript":"~5.9.3","vite":"^7.1.7","vite-plugin-css-injected-by-js":"^3.5.2","vite-plugin-dts":"^4.5.4","vue-tsc":"^3.1.0","eslint":"^9.38.0","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.4","eslint-plugin-vue":"^10.5.1","prettier":"^3.6.2","typescript-eslint":"^8.46.2"},"_id":"@determaer/vue-use-modal@1.0.2","gitHead":"e0eb383932482d576747d204a81d209727ac9d98","description":"This library was created to simplify utilization process of modal windows in Vue applications with use of async components.","bugs":{"url":"https://github.com/determaer/vue-use-modal/issues"},"homepage":"https://github.com/determaer/vue-use-modal#readme","_nodeVersion":"22.19.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-tw5tCsbdO4Vc0W6dL/cbEUY88ow1+NR/TbYl6/gKCbolMdAlmLb995of+qx6yH9BDf0/AaHfNMdWMaAosJ19tA==","shasum":"3f06a3dc03285390d950f1f165e3a597110eaeb8","tarball":"https://registry.npmjs.org/@determaer/vue-use-modal/-/vue-use-modal-1.0.2.tgz","fileCount":5,"unpackedSize":12015,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGwLs7PMN92v65NMYSICwCVTlnx5bKC3Kctj34i2LQBcAiEAl9vn0xGfRLdCyUgQ8+wBMDhwKetZUFhuFoy8rk//u0Y="}]},"_npmUser":{"name":"determaer","email":"determaer2012@gmail.com"},"directories":{},"maintainers":[{"name":"determaer","email":"determaer2012@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-use-modal_1.0.2_1761905378104_0.8221208924847747"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-16T05:59:00.319Z","modified":"2025-10-31T10:09:38.499Z","0.0.1":"2025-10-16T05:59:00.571Z","0.0.2":"2025-10-16T06:04:34.571Z","0.0.3":"2025-10-16T06:49:40.416Z","1.0.0":"2025-10-16T10:01:55.250Z","1.0.1":"2025-10-29T12:29:36.254Z","1.0.2":"2025-10-31T10:09:38.320Z"},"bugs":{"url":"https://github.com/determaer/vue-use-modal/issues"},"author":{"name":"Georgii Smirnov","url":"https://github.com/determaer"},"license":"MIT","homepage":"https://github.com/determaer/vue-use-modal#readme","keywords":["vue3-use-modal","use-modal","vue3","modal"],"repository":{"type":"git","url":"git+https://github.com/determaer/vue-use-modal.git"},"description":"This library was created to simplify utilization process of modal windows in Vue applications with use of async components.","maintainers":[{"name":"determaer","email":"determaer2012@gmail.com"}],"readme":"# Vue Use Modal\r\n\r\nThis library was created to simplify utilization process of modal windows in Vue applications with use of async components.\r\n\r\n## Description\r\n\r\nThere are 2 main entities presented in library you can import:\r\n\r\n- useModal - a composable function for reusing the modal window work logic\r\n- Modal - a Vue component realizing modal wrapper\r\n\r\n### useModal\r\n\r\nuseModal function allows to work with preloaded modal wrappers and dynamically imported target content components. It using embedded vue API - createApp, defineComponent, h, defineAsyncComponent.\r\n\r\n| Prop             | Type               | Destination                                                          |\r\n| ---------------- | ------------------ | -------------------------------------------------------------------- |\r\n| component        | Promise<Component> | Required: Dynamically imported target content components             |\r\n| loadingComponent | Component          | Optional: Component using while target component not available       |\r\n| errorComponent   | Component          | Optional: Component using in case of target component download error |\r\n| timeout          | number             | Optional: delay time to show an errorComponent                       |\r\n| attrs            | generic            | Optional: Target content component props from defineProps            |\r\n| Modal            | Component          | Required: Modal wrapper component                                    |\r\n| modalAttrs       | generic            | Optional: Modal wrapper component props from defineProps             |\r\n\r\n| Type of return value | In case                                                           |\r\n| -------------------- | ----------------------------------------------------------------- |\r\n| generic              | Inner component emitted \"change\" according to passed generic type |\r\n| true                 | Inner component emitted \"submit\" with no data                     |\r\n| false                | Inner component emitted \"close\" with no data                      |\r\n\r\nYou can set generic types for return value, attributes for target content component and attributes for modal wrapper component <b>accordingly</b>. They are optional, but make sure you define them in right order. You can define them by the aproach described below.\r\n\r\n```ts\r\nuseModal<ReturnT>(...){...}\r\nuseModal<ReturnT, AttrsT>(...){...}\r\nuseModal<ReturnT, AttrsT, ModalAttrsT>(...){...}\r\n```\r\n\r\n### useModal Lifecycle\r\n\r\nLifecycle of such modal window includes several events:\r\n\r\n- 'change' - changing inner Data object's field with {key: value} syntax\r\n- 'submit' - resolving modal window with return value (generic or true as mentioned in table before) and unmounting\r\n- 'close' - resolving modal window with return value <i>false</i> and unmounting\r\n\r\n### Modal Wrapper\r\n\r\nModal wrapper includes modal backdrop and active frame with slot #default. You can define your own style attributes via existing classes:\r\n\r\n- .use-modal-wrapper-backdrop\r\n- .use-modal-wrapper-frame\r\n\r\nIf necessary you can define your own modal wrapper and use it in Modal prop of useModal function\r\n\r\n## Usage\r\n\r\nMake sure you have some component need to be presented in modal window. This component must have emits enlisted previously in useModal Lifecycle.\r\n\r\n```vue\r\n<script setup lang=\"ts\">\r\n//example of using in some vue component\r\nconst emit = defineEmits(['change', 'submit', 'close']);\r\n\r\nconst handleChange = (key: string, value: Define your type here) => {\r\n  emit('change', {[key]: value})\r\n}\r\n</script>\r\n```\r\n\r\nCreate useModal'...'.ts, where\r\n\r\n```ts\r\nimport { Modal, useModal } from '@determaer/vue-use-modal'\r\n\r\nexport const useModalShowExample = async () : Promise<Define your return type here> => {\r\n  const data = await useModal<ReturnT, AttrsT, ModalAttrsT>({ //here you can set generic types\r\n    component: import('./ModalContent.vue'),\r\n    Modal, //here you can use any another component\r\n    attrs: {\r\n      info: 2223\r\n    },\r\n    modalAttrs: {\r\n      modalInfo: 'info in modal section'\r\n    }\r\n  })\r\n\r\n  //some action with result\r\n}\r\n\r\n```\r\n\r\nCall this function somewhere in your app\r\n\r\n```vue\r\n<script setup>\r\nimport { useModalShowExample } from \"./useModalShowExample\";\r\n\r\nconst handleClick = async () => {\r\n  const data = await useModalShowExample();\r\n  // some action with result\r\n};\r\n</script>\r\n```\r\n\r\n## Installation\r\n\r\n`npm install @determaer/vue-use-modal`\r\n","readmeFilename":"README.md"}