{"_id":"vue3-confirm-dialog-box","_rev":"29-d211d0901aa7df987b64b7b392297de6","name":"vue3-confirm-dialog-box","dist-tags":{"latest":"1.1.4"},"versions":{"1.0.0":{"name":"vue3-confirm-dialog-box","version":"1.0.0","keywords":["vue3","confirm","dialog","popup"],"author":"","license":"MIT","_id":"vue3-confirm-dialog-box@1.0.0","maintainers":[{"name":"anilshr90","email":"anilshr25@gmail.com"}],"homepage":"https://github.com/anilshr25/vue3-confirm-dialog-box/#readme","bugs":{"url":"https://github.com/anilshr25/vue3-confirm-dialog-box/issues"},"dist":{"shasum":"b26fb3e626224edd8b43542b49ac944abc60b9e1","tarball":"https://registry.npmjs.org/vue3-confirm-dialog-box/-/vue3-confirm-dialog-box-1.0.0.tgz","fileCount":6,"integrity":"sha512-2w4TNfYhfMpoYhEthboKKxZn59c6DKzFFLqqMTmCfmSnNCv7sXfVyWJaRMOI1ZSPPaI0ywiSTBAhTAcFjrFzIQ==","signatures":[{"sig":"MEUCICj4e7LZsCtLY97gFLxePXftu52j5wdlhb7i1a7qDzrTAiEAn+76nbBGcYiLaTtx1+EiyrgbRuVx7nI7df1E2GT+7N4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16879},"main":"dist/vue3-confirm-dialog-box.umd.cjs","type":"module","module":"dist/vue3-confirm-dialog-box.js","exports":{".":{"import":"./dist/vue3-confirm-dialog-box.js","require":"./dist/vue3-confirm-dialog-box.umd.cjs"},"./style":"./dist/style.css"},"gitHead":"158ea3f35ff1c231159d752e9cac307a005d9b73","scripts":{"build":"vite build"},"_npmUser":{"name":"anilshr90","email":"anilshr25@gmail.com"},"repository":{"url":"git+https://github.com/anilshr25/vue3-confirm-dialog-box.git","type":"git"},"_npmVersion":"6.14.18","description":"Simple Confirm Dialog verification plugin with Vue 3.","directories":{},"_nodeVersion":"14.21.3","dependencies":{"vue":"^3.3.4"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.65.1","vite":"^4.4.9","@vitejs/plugin-vue":"^4.2.3"},"_npmOperationalInternal":{"tmp":"tmp/vue3-confirm-dialog-box_1.0.0_1691991730510_0.0350737415521436","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"vue3-confirm-dialog-box","version":"1.0.1","keywords":["vue3","confirm","dialog","popup"],"author":"","license":"MIT","_id":"vue3-confirm-dialog-box@1.0.1","maintainers":[{"name":"anilshr90","email":"anilshr25@gmail.com"}],"homepage":"https://github.com/anilshr25/vue3-confirm-dialog-box/#readme","bugs":{"url":"https://github.com/anilshr25/vue3-confirm-dialog-box/issues"},"dist":{"shasum":"e3ed5fb2798db0a2276eafd7aa406c89b5ccc59d","tarball":"https://registry.npmjs.org/vue3-confirm-dialog-box/-/vue3-confirm-dialog-box-1.0.1.tgz","fileCount":6,"integrity":"sha512-/1BPZ2WCWkjfRaJbYpX8MFXcjPl7knXce3dpxUCVCkObepuoVuI64ctTd77MOzFHjwh4CFNUCXx1GzzMSZt+QA==","signatures":[{"sig":"MEQCIAXgOj1a3K/Dccqx5mBk/xv3cK6jl8bvdXK/2DNPVLS2AiAgL1OPMMIA404k2Zke6Zz8diFMXb3NL4ZouE6PzufCuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16899},"main":"dist/vue3-confirm-dialog-box.umd.cjs","type":"module","module":"dist/vue3-confirm-dialog-box.js","exports":{".":{"import":"./dist/vue3-confirm-dialog-box.js","require":"./dist/vue3-confirm-dialog-box.umd.cjs"},"./style":"./dist/style.css"},"gitHead":"ffa18de6a17e46f02e669f87d0f5604a325f686a","scripts":{"build":"vite build"},"_npmUser":{"name":"anilshr90","email":"anilshr25@gmail.com"},"repository":{"url":"git+https://github.com/anilshr25/vue3-confirm-dialog-box.git","type":"git"},"_npmVersion":"6.14.18","description":"Simple Confirm Dialog verification plugin with Vue 3.","directories":{},"_nodeVersion":"14.21.3","dependencies":{"vue":"^3.3.4"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.65.1","vite":"^4.4.9","@vitejs/plugin-vue":"^4.2.3","vite-plugin-libcss":"^1.1.1"},"_npmOperationalInternal":{"tmp":"tmp/vue3-confirm-dialog-box_1.0.1_1692504438630_0.9700366638209104","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"vue3-confirm-dialog-box","version":"1.1.1","keywords":["vue3","confirm","dialog","popup","modal","typescript","accessible","a11y","promise","composition-api"],"author":{"name":"Anil Shrestha"},"license":"MIT","_id":"vue3-confirm-dialog-box@1.1.1","maintainers":[{"name":"anilshr90","email":"anilshr25@gmail.com"}],"homepage":"https://github.com/anilshr25/vue3-confirm-dialog-box/#readme","bugs":{"url":"https://github.com/anilshr25/vue3-confirm-dialog-box/issues"},"dist":{"shasum":"37b34061f1a1e13c88eb8dcb4de9861be92ab6f4","tarball":"https://registry.npmjs.org/vue3-confirm-dialog-box/-/vue3-confirm-dialog-box-1.1.1.tgz","fileCount":9,"integrity":"sha512-CLS691v8f7gJ+zMbtfTQ1iDXFDmT8EMVKh0Ek1pRpvaCpyopWLHsLGjVrfRcrP40u7Y4cEZiFiDM7whfIXjrVw==","signatures":[{"sig":"MEYCIQCJIYCJtUPNDZixsKwqhDTABT0bLgH6Yf5gn89niw+NbAIhANTXVrvGlXbU4tL/YddU6bat/b7W4/twaTeGg+2y641S","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":89482},"main":"dist/vue3-confirm-dialog-box.umd.js","type":"module","types":"index.d.ts","module":"dist/vue3-confirm-dialog-box.es.js","exports":{".":{"types":"./index.d.ts","import":"./dist/vue3-confirm-dialog-box.es.js","require":"./dist/vue3-confirm-dialog-box.umd.js"},"./style":"./dist/style.css"},"gitHead":"56907f7ab0181cc79297cfb5fa8724989777420b","scripts":{"dev":"vite","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","test":"vitest","build":"vite build","format":"prettier --write src/","preview":"vite preview","test:ui":"vitest --ui","test:coverage":"vitest --coverage"},"_npmUser":{"name":"anilshr90","email":"anilshr25@gmail.com"},"repository":{"url":"git+https://github.com/anilshr25/vue3-confirm-dialog-box.git","type":"git"},"_npmVersion":"11.4.2","description":"A modern, accessible confirmation dialog plugin for Vue 3 with TypeScript support","directories":{},"sideEffects":["*.css","*.scss","*.sass"],"_nodeVersion":"22.14.0","dependencies":{"vue":"^3.3.4"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.65.1","vite":"^4.4.9","jsdom":"^22.1.0","eslint":"^8.45.0","vitest":"^0.34.0","vue-tsc":"^1.8.0","prettier":"^3.0.0","@vitest/ui":"^0.34.0","typescript":"^5.1.0","@types/node":"^20.5.0","@vue/test-utils":"^2.4.0","vite-plugin-dts":"^3.6.0","eslint-plugin-vue":"^9.15.0","@vitejs/plugin-vue":"^4.2.3","vite-plugin-libcss":"^1.1.1"},"peerDependencies":{"vue":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/vue3-confirm-dialog-box_1.1.1_1759324547790_0.965737167696832","host":"s3://npm-registry-packages-npm-production"}},"1.1.2":{"name":"vue3-confirm-dialog-box","version":"1.1.2","keywords":["vue3","confirm","dialog","popup","modal","typescript","accessible","a11y","promise","composition-api"],"author":{"name":"Anil Shrestha"},"license":"MIT","_id":"vue3-confirm-dialog-box@1.1.2","maintainers":[{"name":"anilshr90","email":"anilshr25@gmail.com"}],"homepage":"https://github.com/anilshr25/vue3-confirm-dialog-box/#readme","bugs":{"url":"https://github.com/anilshr25/vue3-confirm-dialog-box/issues"},"dist":{"shasum":"8ab06f4fbf98db375961ea8e92938065bc40f2c4","tarball":"https://registry.npmjs.org/vue3-confirm-dialog-box/-/vue3-confirm-dialog-box-1.1.2.tgz","fileCount":9,"integrity":"sha512-PEmp/FOFL20RYEiJi3/jJUjf/aK4O3QwcLMhVR7NqE+aYIAWbYk5upHww4/S9U81hLT9lbcs4Z3inpDtuBE0nw==","signatures":[{"sig":"MEQCIBB9MGx8d8d2JU66z4ZxpRo/Bfpy1/1tOLOGs38R+deuAiBatZSZPETNI26CMS1Ug+6rQarZ/FbZjsj8hfycci+7Yg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":89482},"main":"dist/vue3-confirm-dialog-box.umd.js","type":"module","types":"index.d.ts","module":"dist/vue3-confirm-dialog-box.es.js","exports":{".":{"types":"./index.d.ts","import":"./dist/vue3-confirm-dialog-box.es.js","require":"./dist/vue3-confirm-dialog-box.umd.js"},"./style":"./dist/style.css"},"gitHead":"56907f7ab0181cc79297cfb5fa8724989777420b","scripts":{"dev":"vite","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","test":"vitest","build":"vite build","format":"prettier --write src/","preview":"vite preview","test:ui":"vitest --ui","test:coverage":"vitest --coverage"},"_npmUser":{"name":"anilshr90","email":"anilshr25@gmail.com"},"repository":{"url":"git+https://github.com/anilshr25/vue3-confirm-dialog-box.git","type":"git"},"_npmVersion":"11.4.2","description":"A modern, accessible confirmation dialog plugin for Vue 3 with TypeScript support","directories":{},"sideEffects":["*.css","*.scss","*.sass"],"_nodeVersion":"22.14.0","dependencies":{"vue":"^3.3.4"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.65.1","vite":"^4.4.9","jsdom":"^22.1.0","eslint":"^8.45.0","vitest":"^0.34.0","vue-tsc":"^1.8.0","prettier":"^3.0.0","@vitest/ui":"^0.34.0","typescript":"^5.1.0","@types/node":"^20.5.0","@vue/test-utils":"^2.4.0","vite-plugin-dts":"^3.6.0","eslint-plugin-vue":"^9.15.0","@vitejs/plugin-vue":"^4.2.3","vite-plugin-libcss":"^1.1.1"},"peerDependencies":{"vue":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/vue3-confirm-dialog-box_1.1.2_1759325861587_0.6987770027097537","host":"s3://npm-registry-packages-npm-production"}},"1.1.3":{"name":"vue3-confirm-dialog-box","version":"1.1.3","keywords":["vue3","confirm","dialog","popup","modal","typescript","accessible","a11y","promise","composition-api"],"author":{"name":"Anil Shrestha"},"license":"MIT","_id":"vue3-confirm-dialog-box@1.1.3","maintainers":[{"name":"anilshr90","email":"anilshr25@gmail.com"}],"homepage":"https://github.com/anilshr25/vue3-confirm-dialog-box/#readme","bugs":{"url":"https://github.com/anilshr25/vue3-confirm-dialog-box/issues"},"dist":{"shasum":"ce55dc57254aacae0483a1e43a4895e656b7b00f","tarball":"https://registry.npmjs.org/vue3-confirm-dialog-box/-/vue3-confirm-dialog-box-1.1.3.tgz","fileCount":9,"integrity":"sha512-faoiFz0udLtqCgx9aVVdEQKoOflXdJjXf8po8zcX+3VRpTepDsTCBNsV4JQ0Cly6LX0uvo76zWYw6U8GUVUQ4g==","signatures":[{"sig":"MEUCIQDbHb21KmpXESGv2YTUBUu6fMzaJ6cV7xg1PleNbQtiPAIgS+HMka3dnGORHcb4Pomui7zg3/QIsJxp9zDBQ0op/1Y=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":89482},"main":"dist/vue3-confirm-dialog-box.umd.js","type":"module","types":"index.d.ts","module":"dist/vue3-confirm-dialog-box.es.js","exports":{".":{"types":"./index.d.ts","import":"./dist/vue3-confirm-dialog-box.es.js","require":"./dist/vue3-confirm-dialog-box.umd.js"},"./style":"./dist/style.css"},"gitHead":"56907f7ab0181cc79297cfb5fa8724989777420b","scripts":{"dev":"vite","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","test":"vitest","build":"vite build","format":"prettier --write src/","preview":"vite preview","test:ui":"vitest --ui","test:coverage":"vitest --coverage"},"_npmUser":{"name":"anilshr90","email":"anilshr25@gmail.com"},"repository":{"url":"git+https://github.com/anilshr25/vue3-confirm-dialog-box.git","type":"git"},"_npmVersion":"11.4.2","description":"A modern, accessible confirmation dialog plugin for Vue 3 with TypeScript support","directories":{},"sideEffects":["*.css","*.scss","*.sass"],"_nodeVersion":"22.14.0","dependencies":{"vue":"^3.3.4"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.65.1","vite":"^4.4.9","jsdom":"^22.1.0","eslint":"^8.45.0","vitest":"^0.34.0","vue-tsc":"^1.8.0","prettier":"^3.0.0","@vitest/ui":"^0.34.0","typescript":"^5.1.0","@types/node":"^20.5.0","@vue/test-utils":"^2.4.0","vite-plugin-dts":"^3.6.0","eslint-plugin-vue":"^9.15.0","@vitejs/plugin-vue":"^4.2.3","vite-plugin-libcss":"^1.1.1"},"peerDependencies":{"vue":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/vue3-confirm-dialog-box_1.1.3_1759328563673_0.13320562497771782","host":"s3://npm-registry-packages-npm-production"}},"1.1.4":{"name":"vue3-confirm-dialog-box","version":"1.1.4","type":"module","description":"A modern, accessible confirmation dialog plugin for Vue 3 with TypeScript support","author":{"name":"Anil Shrestha"},"license":"MIT","homepage":"https://github.com/anilshr25/vue3-confirm-dialog-box/#readme","repository":{"type":"git","url":"git+https://github.com/anilshr25/vue3-confirm-dialog-box.git"},"bugs":{"url":"https://github.com/anilshr25/vue3-confirm-dialog-box/issues"},"keywords":["vue3","confirm","dialog","popup","modal","typescript","accessible","a11y","promise","composition-api"],"main":"dist/vue3-confirm-dialog-box.umd.js","module":"dist/vue3-confirm-dialog-box.es.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","import":"./dist/vue3-confirm-dialog-box.es.js","require":"./dist/vue3-confirm-dialog-box.umd.js"},"./style":"./dist/style.css"},"scripts":{"dev":"vite","build":"vite build","preview":"vite preview","test":"vitest","test:ui":"vitest --ui","test:coverage":"vitest --coverage","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","format":"prettier --write src/"},"peerDependencies":{"vue":"^3.3.0"},"dependencies":{"vue":"^3.3.4"},"devDependencies":{"@types/node":"^20.5.0","@vitejs/plugin-vue":"^4.2.3","@vitest/ui":"^0.34.0","@vue/test-utils":"^2.4.0","eslint":"^8.45.0","eslint-plugin-vue":"^9.15.0","jsdom":"^22.1.0","prettier":"^3.0.0","sass":"^1.65.1","typescript":"^5.1.0","vite":"^4.4.9","vite-plugin-dts":"^3.6.0","vite-plugin-libcss":"^1.1.1","vitest":"^0.34.0","vue-tsc":"^1.8.0"},"sideEffects":["*.css","*.scss","*.sass"],"_id":"vue3-confirm-dialog-box@1.1.4","gitHead":"56907f7ab0181cc79297cfb5fa8724989777420b","_nodeVersion":"22.14.0","_npmVersion":"11.4.2","dist":{"integrity":"sha512-iGBQC6ilEAGR7Wk4CR7c/gzV4tO/SmyyQu+doaXI6p+d/vYOWGY6s5EgdUxIlvUHzzfPaIF+Cjx46fnFxlGu2g==","shasum":"b0871fd92ab536a2c0b5428923182df0965f9d99","tarball":"https://registry.npmjs.org/vue3-confirm-dialog-box/-/vue3-confirm-dialog-box-1.1.4.tgz","fileCount":9,"unpackedSize":89482,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEVJenlFywzyuQwntf9LxtghEUk7Fc6Ia6dtEr3RbqDpAiAtjamp9BGYsbfGgfHHAvHkomQv6R5yUS0pxA0UVeQnvQ=="}]},"_npmUser":{"name":"anilshr90","email":"anilshr25@gmail.com"},"directories":{},"maintainers":[{"name":"anilshr90","email":"anilshr25@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue3-confirm-dialog-box_1.1.4_1759330682620_0.465181482926166"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-14T05:42:10.509Z","modified":"2025-10-01T14:58:02.997Z","0.0.1":"2023-08-06T15:55:06.746Z","0.0.2":"2023-08-12T05:44:23.599Z","0.0.3":"2023-08-12T05:56:59.881Z","0.0.4":"2023-08-12T06:02:55.172Z","0.0.5":"2023-08-12T06:20:48.894Z","0.0.6":"2023-08-12T06:24:16.556Z","0.1.1":"2023-08-12T09:25:37.912Z","0.1.2":"2023-08-12T09:42:42.276Z","0.1.3":"2023-08-12T14:47:21.407Z","0.1.4":"2023-08-12T15:44:50.227Z","0.1.5":"2023-08-12T15:52:27.225Z","0.1.6":"2023-08-12T16:28:55.478Z","0.1.8":"2023-08-12T18:00:38.116Z","0.1.9":"2023-08-12T18:08:16.090Z","0.2.0":"2023-08-12T18:10:28.337Z","0.2.1":"2023-08-12T18:18:53.627Z","0.2.2":"2023-08-12T18:30:52.151Z","0.2.3":"2023-08-12T18:46:18.857Z","0.2.4":"2023-08-12T19:28:42.289Z","0.2.5":"2023-08-12T19:37:58.354Z","0.2.6":"2023-08-12T19:57:22.481Z","0.2.7":"2023-08-12T20:00:19.056Z","1.0.0":"2023-08-14T05:42:10.680Z","1.0.1":"2023-08-20T04:07:18.816Z","1.1.1":"2025-10-01T13:15:47.970Z","1.1.2":"2025-10-01T13:37:41.835Z","1.1.3":"2025-10-01T14:22:43.892Z","1.1.4":"2025-10-01T14:58:02.825Z"},"bugs":{"url":"https://github.com/anilshr25/vue3-confirm-dialog-box/issues"},"author":{"name":"Anil Shrestha"},"license":"MIT","homepage":"https://github.com/anilshr25/vue3-confirm-dialog-box/#readme","keywords":["vue3","confirm","dialog","popup","modal","typescript","accessible","a11y","promise","composition-api"],"repository":{"type":"git","url":"git+https://github.com/anilshr25/vue3-confirm-dialog-box.git"},"description":"A modern, accessible confirmation dialog plugin for Vue 3 with TypeScript support","maintainers":[{"name":"anilshr90","email":"anilshr25@gmail.com"}],"readme":"# vue3-confirm-dialog-box\r\n\r\nA modern, accessible, and customizable confirmation dialog plugin for Vue 3 applications.\r\n\r\n![confirm-dialog](https://raw.githubusercontent.com/anilshr25/vue3-confirm-dialog-box/main/src/assets/confirm-dialog.png)\r\n\r\n## Features\r\n\r\n- ✅ **Vue 3 Composition API** - Built with modern Vue 3 patterns\r\n- ✅ **TypeScript Support** - Full type definitions included\r\n- ✅ **Accessible** - WCAG compliant with proper ARIA labels and keyboard navigation\r\n- ✅ **Promise & Callback API** - Support both modern promises and traditional callbacks\r\n- ✅ **Customizable** - Easy theming with CSS custom properties\r\n- ✅ **Focus Management** - Automatic focus trapping and restoration\r\n- ✅ **Mobile Friendly** - Responsive design with touch support\r\n- ✅ **Dark Mode** - Automatic dark mode detection\r\n- ✅ **Password Protection** - Optional password confirmation\r\n- ✅ **SSR Compatible** - Works with Nuxt.js and other SSR frameworks\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install vue3-confirm-dialog-box\r\n# or\r\nyarn add vue3-confirm-dialog-box\r\n# or\r\npnpm add vue3-confirm-dialog-box\r\n```\r\n\r\n## Quick Start\r\n\r\n### 1. Register the Plugin\r\n\r\n```js\r\n// main.js\r\nimport { createApp } from \"vue\";\r\nimport Vue3ConfirmDialogBox from \"vue3-confirm-dialog-box\";\r\nimport \"vue3-confirm-dialog-box/style\";\r\n\r\nconst app = createApp(App);\r\napp.use(Vue3ConfirmDialogBox);\r\n```\r\n\r\n### 2. Add the Component to Your App\r\n\r\n```vue\r\n<!-- App.vue -->\r\n<template>\r\n  <div id=\"app\">\r\n    <vue3-confirm-dialog-box />\r\n    <!-- Your app content -->\r\n  </div>\r\n</template>\r\n```\r\n\r\n### 3. Use in Your Components\r\n\r\n**Options API:**\r\n```js\r\nexport default {\r\n  methods: {\r\n    async handleDelete() {\r\n      const result = await this.$confirm({\r\n        title: \"Delete Item\",\r\n        message: \"Are you sure you want to delete this item? This action cannot be undone.\",\r\n        button: {\r\n          no: \"Cancel\",\r\n          yes: \"Delete\"\r\n        }\r\n      });\r\n      \r\n      if (result.confirmed) {\r\n        // User clicked \"Delete\"\r\n        console.log(\"Item deleted\");\r\n      }\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n**Composition API:**\r\n```js\r\nimport { inject } from \"vue\";\r\n\r\nexport default {\r\n  setup() {\r\n    const confirm = inject('vue3-confirm-dialog-box');\r\n    \r\n    const handleDelete = async () => {\r\n      try {\r\n        const result = await confirm({\r\n          title: \"Delete Item\",\r\n          message: \"Are you sure you want to delete this item?\",\r\n          button: {\r\n            no: \"Cancel\",\r\n            yes: \"Delete\"\r\n          }\r\n        });\r\n        \r\n        if (result.confirmed) {\r\n          console.log(\"Confirmed!\");\r\n        }\r\n      } catch (error) {\r\n        console.error(\"Dialog error:\", error);\r\n      }\r\n    };\r\n    \r\n    return { handleDelete };\r\n  }\r\n}\r\n```\r\n\r\n**Script Setup:**\r\n```vue\r\n<script setup>\r\nimport { inject } from 'vue';\r\n\r\nconst confirm = inject('vue3-confirm-dialog-box');\r\n\r\nasync function handleAction() {\r\n  const { confirmed } = await confirm({\r\n    title: \"Confirm Action\",\r\n    message: \"Do you want to proceed?\",\r\n  });\r\n  \r\n  if (confirmed) {\r\n    // Handle confirmation\r\n  }\r\n}\r\n</script>\r\n```\r\n\r\n## API Reference\r\n\r\n### Configuration Options\r\n\r\n| Option | Type | Default | Description |\r\n|--------|------|---------|-------------|\r\n| `title` | `string` | `\"Confirm\"` | Dialog title |\r\n| `message` | `string` | `\"Are you sure?\"` | Dialog message content |\r\n| `button.yes` | `string` | `\"Yes\"` | Confirm button text |\r\n| `button.no` | `string` | `\"Cancel\"` | Cancel button text |\r\n| `auth` | `boolean` | `false` | Enable password confirmation |\r\n| `authPlaceholder` | `string` | `\"Password\"` | Password input placeholder |\r\n| `callback` | `function` | `undefined` | Legacy callback function |\r\n\r\n### Return Value (Promise)\r\n\r\n```js\r\n{\r\n  confirmed: boolean, // true if user clicked confirm, false if cancelled\r\n  password: string    // password value if auth is enabled\r\n}\r\n```\r\n\r\n### Methods\r\n\r\n#### `$confirm(options)` / `confirm(options)`\r\nShows the confirmation dialog and returns a promise.\r\n\r\n#### `$confirm.close()` / `confirm.close()`\r\nProgrammatically closes the dialog.\r\n\r\n#### `$confirm.setDefaults(defaults)`\r\nSets default options for all future dialogs.\r\n\r\n```js\r\nthis.$confirm.setDefaults({\r\n  button: {\r\n    yes: \"OK\",\r\n    no: \"Cancel\"\r\n  }\r\n});\r\n```\r\n\r\n## Advanced Usage\r\n\r\n### Password Protection\r\n\r\n```js\r\nconst result = await this.$confirm({\r\n  title: \"Dangerous Action\",\r\n  message: \"Please enter your password to continue\",\r\n  auth: true,\r\n  authPlaceholder: \"Enter password\",\r\n  button: {\r\n    no: \"Cancel\",\r\n    yes: \"Confirm\"\r\n  }\r\n});\r\n\r\nif (result.confirmed) {\r\n  console.log(\"Password:\", result.password);\r\n}\r\n```\r\n\r\n### Custom Button Labels\r\n\r\n```js\r\nawait this.$confirm({\r\n  title: \"Save Changes\",\r\n  message: \"Do you want to save your changes before leaving?\",\r\n  button: {\r\n    no: \"Discard\",\r\n    yes: \"Save\"\r\n  }\r\n});\r\n```\r\n\r\n### Single Button Dialog\r\n\r\n```js\r\nawait this.$confirm({\r\n  title: \"Information\",\r\n  message: \"Your changes have been saved successfully!\",\r\n  button: {\r\n    no: null, // Hide cancel button\r\n    yes: \"OK\"\r\n  }\r\n});\r\n```\r\n\r\n### Legacy Callback API\r\n\r\n```js\r\nthis.$confirm({\r\n  title: \"Legacy Support\",\r\n  message: \"This still works with callbacks\",\r\n  callback: (confirmed, password) => {\r\n    if (confirmed) {\r\n      console.log(\"Confirmed with password:\", password);\r\n    }\r\n  }\r\n});\r\n```\r\n\r\n### Event Listeners\r\n\r\n```vue\r\n<template>\r\n  <vue3-confirm-dialog-box \r\n    @confirm=\"onConfirm\" \r\n    @cancel=\"onCancel\" \r\n  />\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  methods: {\r\n    onConfirm(result) {\r\n      console.log(\"Confirmed:\", result);\r\n    },\r\n    onCancel(result) {\r\n      console.log(\"Cancelled:\", result);\r\n    }\r\n  }\r\n}\r\n</script>\r\n```\r\n\r\n## Customization\r\n\r\n### CSS Custom Properties\r\n\r\nYou can customize the appearance using CSS custom properties:\r\n\r\n```css\r\n:root {\r\n  --vc-title-color: #1a1a1a;\r\n  --vc-message-color: #4a4a4a;\r\n  --vc-overlay-background-color: rgba(0, 0, 0, 0.5);\r\n  --vc-base-background-color: #ffffff;\r\n  --vc-button-color: #007bff;\r\n  --vc-button-background-color: #ffffff;\r\n  --vc-button-border-color: #e0e0e0;\r\n  --vc-primary-button-background: #007bff;\r\n  --vc-primary-button-color: #ffffff;\r\n  --vc-input-background-color: #f8f9fa;\r\n  --vc-input-border-color: #dee2e6;\r\n  --vc-border-radius: 12px;\r\n  --vc-font-size-base: 16px;\r\n}\r\n\r\n/* Custom theme example */\r\n.my-app {\r\n  --vc-title-color: #2c3e50;\r\n  --vc-button-color: #e74c3c;\r\n  --vc-primary-button-background: #e74c3c;\r\n  --vc-border-radius: 8px;\r\n}\r\n```\r\n\r\n### Component Styling\r\n\r\nOverride component classes for more granular control:\r\n\r\n```css\r\n.vc-container {\r\n  /* Custom container styles */\r\n  min-width: 320px;\r\n}\r\n\r\n.vc-title {\r\n  /* Custom title styles */\r\n  font-family: 'Inter', sans-serif;\r\n}\r\n\r\n.vc-btn {\r\n  /* Custom button styles */\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n}\r\n```\r\n\r\n## Accessibility Features\r\n\r\n- **Keyboard Navigation**: Full keyboard support with Tab, Enter, and Escape keys\r\n- **Focus Management**: Automatic focus trapping and restoration\r\n- **Screen Reader Support**: Proper ARIA labels and semantic HTML\r\n- **High Contrast**: Supports system high contrast modes\r\n- **Reduced Motion**: Respects `prefers-reduced-motion` settings\r\n\r\n### Keyboard Shortcuts\r\n\r\n| Key | Action |\r\n|-----|--------|\r\n| `Tab` / `Shift+Tab` | Navigate between buttons |\r\n| `Enter` | Confirm action |\r\n| `Escape` | Cancel/close dialog |\r\n| `Space` | Activate focused button |\r\n\r\n## TypeScript Support\r\n\r\nFull TypeScript definitions are included:\r\n\r\n```typescript\r\ninterface ConfirmOptions {\r\n  title?: string;\r\n  message?: string;\r\n  button?: {\r\n    yes?: string;\r\n    no?: string | null;\r\n  };\r\n  auth?: boolean;\r\n  authPlaceholder?: string;\r\n  callback?: (confirmed: boolean, password?: string) => void;\r\n}\r\n\r\ninterface ConfirmResult {\r\n  confirmed: boolean;\r\n  password?: string;\r\n}\r\n\r\ndeclare function confirm(options?: ConfirmOptions): Promise<ConfirmResult>;\r\n```\r\n\r\n## Framework Integration\r\n\r\n### Nuxt.js Plugin\r\n\r\nCreate `plugins/confirm-dialog.client.js`:\r\n\r\n```js\r\nimport Vue3ConfirmDialogBox from \"vue3-confirm-dialog-box\";\r\nimport \"vue3-confirm-dialog-box/style\";\r\n\r\nexport default defineNuxtPlugin((nuxtApp) => {\r\n  nuxtApp.vueApp.use(Vue3ConfirmDialogBox);\r\n});\r\n```\r\n\r\n### Quasar Framework\r\n\r\n```js\r\n// quasar.config.js\r\nmodule.exports = configure(function (ctx) {\r\n  return {\r\n    boot: ['confirm-dialog'],\r\n    // ... other config\r\n  }\r\n})\r\n\r\n// boot/confirm-dialog.js\r\nimport { boot } from 'quasar/wrappers';\r\nimport Vue3ConfirmDialogBox from \"vue3-confirm-dialog-box\";\r\nimport \"vue3-confirm-dialog-box/style\";\r\n\r\nexport default boot(({ app }) => {\r\n  app.use(Vue3ConfirmDialogBox);\r\n});\r\n```\r\n\r\n### Vite/Webpack Bundle Optimization\r\n\r\nFor optimal bundle size, you can import only what you need:\r\n\r\n```js\r\n// Import component and styles separately\r\nimport { Vue3ConfirmDialogBox } from \"vue3-confirm-dialog-box/components\";\r\nimport \"vue3-confirm-dialog-box/dist/style.css\";\r\n\r\napp.component('ConfirmDialog', Vue3ConfirmDialogBox);\r\n```\r\n\r\n## Testing\r\n\r\n### Unit Tests\r\n\r\n```js\r\n// Example with Vue Test Utils\r\nimport { mount } from '@vue/test-utils';\r\nimport Vue3ConfirmDialogBox from 'vue3-confirm-dialog-box';\r\n\r\ndescribe('ConfirmDialog', () => {\r\n  it('shows dialog with correct title', async () => {\r\n    const wrapper = mount(Vue3ConfirmDialogBox);\r\n    \r\n    // Trigger dialog\r\n    wrapper.vm.open({\r\n      title: 'Test Title',\r\n      message: 'Test Message'\r\n    });\r\n    \r\n    await wrapper.vm.$nextTick();\r\n    \r\n    expect(wrapper.find('.vc-title').text()).toBe('Test Title');\r\n  });\r\n});\r\n```\r\n\r\n### E2E Tests\r\n\r\n```js\r\n// Example with Playwright\r\ntest('confirm dialog workflow', async ({ page }) => {\r\n  await page.goto('/');\r\n  \r\n  // Click button that opens dialog\r\n  await page.click('[data-testid=\"delete-button\"]');\r\n  \r\n  // Check dialog appears\r\n  await expect(page.locator('[role=\"dialog\"]')).toBeVisible();\r\n  \r\n  // Click confirm\r\n  await page.click('text=Delete');\r\n  \r\n  // Verify action was taken\r\n  await expect(page.locator('.success-message')).toBeVisible();\r\n});\r\n```\r\n\r\n## Migration Guide\r\n\r\n### From v1.0.0 to v1.1.0\r\n\r\nThe main breaking changes involve the inject key and improved API:\r\n\r\n**Before:**\r\n```js\r\nconst confirm = inject(\"vue3-confirm-dialog\");\r\n```\r\n\r\n**After:**\r\n```js\r\nconst confirm = inject(\"vue3-confirm-dialog-box\");\r\n// or the shorter alias\r\nconst confirm = inject(\"confirm\");\r\n```\r\n\r\n**New Promise API:**\r\n```js\r\n// Old callback style (still supported)\r\nthis.$confirm({\r\n  title: \"Test\",\r\n  callback: (result) => console.log(result)\r\n});\r\n\r\n// New promise style (recommended)\r\nconst result = await this.$confirm({\r\n  title: \"Test\"\r\n});\r\nconsole.log(result.confirmed);\r\n```\r\n\r\n## Troubleshooting\r\n\r\n### Common Issues\r\n\r\n**Dialog not showing:**\r\n- Ensure the component is added to your template\r\n- Check for CSS conflicts with z-index\r\n- Verify the plugin is properly registered\r\n\r\n**Styling issues:**\r\n- Import the CSS file: `import \"vue3-confirm-dialog-box/style\"`\r\n- Check for CSS custom property conflicts\r\n- Ensure Teleport target (body) is available\r\n\r\n**TypeScript errors:**\r\n- Install latest version which includes type definitions\r\n- Add proper type imports in your components\r\n\r\n**SSR hydration mismatches:**\r\n- Use `.client.js` suffix for Nuxt plugins\r\n- Ensure component is wrapped in `<ClientOnly>` if needed\r\n\r\n### Performance Tips\r\n\r\n- Use `v-if` instead of `v-show` for conditional rendering\r\n- Import styles only once at the application level\r\n- Consider lazy loading for large applications\r\n\r\n## Contributing\r\n\r\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\r\n\r\n### Development Setup\r\n\r\n```bash\r\n# Clone the repository\r\ngit clone https://github.com/anilshr25/vue3-confirm-dialog-box.git\r\n\r\n# Install dependencies\r\nnpm install\r\n\r\n# Start development server\r\nnpm run dev\r\n\r\n# Run tests\r\nnpm run test\r\n\r\n# Build for production\r\nnpm run build\r\n```\r\n\r\n## License\r\n\r\nMIT © [Anil Shrestha](https://github.com/anilshr25)\r\n\r\n## Changelog\r\n\r\n### v1.1.0\r\n- ✅ Added full accessibility support\r\n- ✅ Promise-based API alongside callback support\r\n- ✅ Improved focus management and keyboard navigation\r\n- ✅ TypeScript definitions included\r\n- ✅ Better error handling and validation\r\n- ✅ Dark mode support\r\n- ✅ Memory leak fixes\r\n- ✅ Enhanced styling and theming options\r\n\r\n### v1.0.1\r\n- 🐛 Fixed component registration issues\r\n- 🐛 Improved bundle size\r\n\r\n### v1.0.0\r\n- 🎉 Initial release","readmeFilename":"README.md"}