{"_id":"@dotnetbrightener/vue-modal-dialog-service","_rev":"3-21e114a3378a8a8483b4e88bdf2e1530","name":"@dotnetbrightener/vue-modal-dialog-service","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@dotnetbrightener/vue-modal-dialog-service","version":"1.0.0","private":false,"description":"An injected service into your Vue Component for showing Modal Dialogs with ease","author":{"name":"DotNet Brightener","email":"dotnetbrightener@gmail.com"},"scripts":{"serve":"vue-cli-service serve ./example/main.js --open","build":"vue-cli-service build --name vueModalDialogService --entry ./src/index.js --target lib","lint":"vue-cli-service lint","prepublishOnly":"npm run lint && npm run build","test":"vue-cli-service test:unit"},"dependencies":{"node-sass":"^5.0.0"},"devDependencies":{"@vue/cli-plugin-babel":"^3.8.0","@vue/cli-plugin-eslint":"^3.8.0","@vue/cli-plugin-unit-jest":"^3.8.0","@vue/cli-service":"^3.8.0","@vue/eslint-config-standard":"^4.0.0","@vue/test-utils":"^1.0.0-beta.29","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","eslint":"^5.16.0","eslint-plugin-vue":"^5.2.2","lodash":"^4.17.20","sass-loader":"^10.1.0","vue":"^2.6.12","vue-jest":"^3.0.4","vue-simple-spinner":"^1.2.8","vue-template-compiler":"^2.6.12"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","@vue/standard"],"rules":{"space-before-blocks":"off","quotes":"off","no-extra-semi":"off","semi":"off","space-infix-ops":"off"},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"bugs":{"url":"https://github.com/dotnetbrightener/vue-modal-dialog-service/issues"},"homepage":"https://github.com/dotnetbrightener/vue-modal-dialog-service#readme","keywords":["vue","datatable","component"],"license":"MIT","main":"dist/vueModalDialogService.umd.min.js","repository":{"type":"git","url":"git+https://github.com/dotnetbrightener/vue-modal-dialog-service.git"},"jest":{"transform":{"^.+\\.vue$":"vue-jest","^.+\\.js?$":"babel-jest"},"moduleNameMapper":{"^@/(.*)$":"<rootDir>/src/$1","^\\$/(.*)$":"<rootDir>/tests/$1"}},"gitHead":"f918b1ab083112beeb927586fcafdf81ab5ccf91","_id":"@dotnetbrightener/vue-modal-dialog-service@1.0.0","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-Y8We1hDBtC6AzohIevCLYJjE3OToqGdrl0Mb3ZSFuz2nMxqrnHhir3HV2m01+Ff8151+fKvw4nbqmPwg/aYE6Q==","shasum":"bb66c5615e371901734401b5527367f846c51451","tarball":"https://registry.npmjs.org/@dotnetbrightener/vue-modal-dialog-service/-/vue-modal-dialog-service-1.0.0.tgz","fileCount":25,"unpackedSize":1027470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0ZIOCRA9TVsSAnZWagAAs9EQAJYUvH7fD6Yl3HK0M/pt\njnAILzAYuMV8wA8T+qREBJ4xfxBCBCtMRRchDzdcfLNmHsuN/WY+ENatR5Sf\n7RuKHdFlpz4w//BgdKhhpm7kb8kD/19ahrGA5aNXQfOqQM1dYoU4qw1MQ4Y1\npWWL6TYR1PweAMFst15BLE+QrNINiic309BjYRa7PHYlS9gR7mDXHaVhW/LC\nniE32Jwaj8ftrDJb8EKm6xoUc2wJxiFshfCm2nXInwPhf4uBUMTETN0XIgiQ\nqvET9+vDZFHj8soKEm3Al3wTbqO4Q+vCUxUbKRVAFCtat/hlK+53NppMVxDb\nTYizDvggOBj0Qpp1feE5yuKCG/UsYMi6YYBRVacwcwiTthMgPxTGMT7xg9Rr\nRcZqnameSYMUyJY1ci0jSjiKyFsi7e5tD+/4SFrrhcHiVSgCKJPHwkF6lR/F\nPb9xGZSvBGckFnVQinfR2MVTOv8aMz1DMCS/+H9kUdBoHzJPKMcbQkjIkLLc\n74wnzvmgtK0FiAZC6KqgJ2Ds9u8v8MFtX9LX0SNUD659SIl2mxSa6DNfWHJA\nhluyCMLQ4nao1shJgZ6ESkiqMuu6wMXR8alUl2ZNDJORCtOE4qVUXTnpLX/R\no9CfRDMHdDht8DI2HtVFgFTnRVR3KLkYLJwHlKgCRZ57IhdlrYbb0FS2FkaK\nZiQM\r\n=Ue3M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEgXzduU+SHZ83DGQXPdoENk7uMjwyGY5uw5IY++NT9xAiEAwygTZCFb5aQSyOLQMyag4pLj99tqKoLxZ2Az5JeZWMY="}]},"_npmUser":{"name":"dotnetbrightener","email":"dotnetbrightener@gmail.com"},"directories":{},"maintainers":[{"name":"dotnetbrightener","email":"dotnetbrightener@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-modal-dialog-service_1.0.0_1607569934415_0.8200173182606645"},"_hasShrinkwrap":false},"1.0.1":{"name":"@dotnetbrightener/vue-modal-dialog-service","version":"1.0.1","private":false,"description":"An injected service into your Vue Component for showing Modal Dialogs with ease","author":{"name":"DotNet Brightener","email":"dotnetbrightener@gmail.com"},"scripts":{"serve":"vue-cli-service serve ./example/main.js --open","build":"vue-cli-service build --name vueModalDialogService --entry ./src/index.js --target lib","lint":"vue-cli-service lint","prepublishOnly":"npm run lint && npm run build","test":"vue-cli-service test:unit"},"dependencies":{"node-sass":"^5.0.0"},"devDependencies":{"@vue/cli-plugin-babel":"^3.8.0","@vue/cli-plugin-eslint":"^3.8.0","@vue/cli-plugin-unit-jest":"^3.8.0","@vue/cli-service":"^3.8.0","@vue/eslint-config-standard":"^4.0.0","@vue/test-utils":"^1.0.0-beta.29","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","eslint":"^5.16.0","eslint-plugin-vue":"^5.2.2","lodash":"^4.17.20","sass-loader":"^10.1.0","vue":"^2.6.12","vue-jest":"^3.0.4","vue-simple-spinner":"^1.2.8","vue-template-compiler":"^2.6.12"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","@vue/standard"],"rules":{"space-before-blocks":"off","quotes":"off","no-extra-semi":"off","semi":"off","space-infix-ops":"off"},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"bugs":{"url":"https://github.com/dotnetbrightener/vue-modal-dialog-service/issues"},"homepage":"https://github.com/dotnetbrightener/vue-modal-dialog-service#readme","keywords":["vue","datatable","component"],"license":"MIT","main":"dist/vueModalDialogService.umd.min.js","repository":{"type":"git","url":"git+https://github.com/dotnetbrightener/vue-modal-dialog-service.git"},"jest":{"transform":{"^.+\\.vue$":"vue-jest","^.+\\.js?$":"babel-jest"},"moduleNameMapper":{"^@/(.*)$":"<rootDir>/src/$1","^\\$/(.*)$":"<rootDir>/tests/$1"}},"gitHead":"dd8d81276379b0355880951b0bb57a04f12b5752","_id":"@dotnetbrightener/vue-modal-dialog-service@1.0.1","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-3Ld3n449Sx+vU0SMM+Qs1cUAYJ1D2Phr6OwPznGXVOhB1oxVrmdi7IQsZTDdj9hylfjvSR+PU8DH6xQN1CYjVw==","shasum":"8ded6f1820efde555e59f921c36ed6be94199145","tarball":"https://registry.npmjs.org/@dotnetbrightener/vue-modal-dialog-service/-/vue-modal-dialog-service-1.0.1.tgz","fileCount":25,"unpackedSize":1027307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0ZPqCRA9TVsSAnZWagAAkpUP/ia4tviuYVcGmKsTT1mH\ne6smSWlyFWrNP5ttSLYsbk/xAnaN8vCgYMWqSp4+y0EibFFOdOoZkFGJIuvx\nN8cAH/R0PK/VsZ2qjZkMD9buls75K7E6UIVvSK05/aB9cBYDTDliZoq1/dGF\nVUg5Xo+jqJYK4BhIod670Zq0H/QmsUKI5T3GxGnxCdYvp27NlFIMLitxXGaf\ncbnKLjQAnOE5NKgwLrk/RDJ1x2JqhTqzyZcTov5YAll3zBV+bRy55eZsB0XU\nn7XU5RDPcvcQcZ6M3rarMmqzvygHjVvySv4T+sExIXeXpxrtqZVJaCLrg8+S\nM0duAvp8iA6huDB97irFaNP26mStx/WpZDGF9zeIOmNa6WsEt7TdDCW1CTtW\naNHj9Xd7O3LRKVBsFwztICFzix3vDl9tStunWfqGVrWocIieXktNmd0/ZUV7\ntQOobdEpHbDH3YjQkcggMqI4AaiqPENf4GuIv4jF6Vnu0OIVKQYSj6JBiCbZ\n6UFuQ19RvvhWS0eYEWodYOF01iRrjPwTlHmOqCFKbSHNhZ5t/hDlNPu8CLgy\njZoLkEOronJ3ICbg1UsIuIFMAkUvkV1iddEnXSwsXQldxUf8N13h7g5yHiba\nRVWnf3iWjgFY+A5OunwyTe4ohHzZet2nMHM/yuTf91i0uOThpMbM6HdFBZQs\nvqAX\r\n=c6f9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCS9v447gsqQ/gWarFmuvd1oD2BeH3/UJRVaGh57hMxTgIhAL9oskQ28YoAbRjsrPQBcLuFU8Jk86qlXP4X7f2W+531"}]},"_npmUser":{"name":"dotnetbrightener","email":"dotnetbrightener@gmail.com"},"directories":{},"maintainers":[{"name":"dotnetbrightener","email":"dotnetbrightener@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-modal-dialog-service_1.0.1_1607570410133_0.8885894912354491"},"_hasShrinkwrap":false},"1.0.2":{"name":"@dotnetbrightener/vue-modal-dialog-service","version":"1.0.2","private":false,"description":"An injected service into your Vue Component for showing Modal Dialogs with ease","author":{"name":"DotNet Brightener","email":"dotnetbrightener@gmail.com"},"scripts":{"serve":"vue-cli-service serve ./example/main.js --open","build":"vue-cli-service build --name vueModalDialogService --entry ./src/index.js --target lib","lint":"vue-cli-service lint","prepublishOnly":"npm run lint && npm run build","test":"vue-cli-service test:unit"},"dependencies":{"node-sass":"^5.0.0"},"devDependencies":{"@vue/cli-plugin-babel":"^3.8.0","@vue/cli-plugin-eslint":"^3.8.0","@vue/cli-plugin-unit-jest":"^3.8.0","@vue/cli-service":"^3.8.0","@vue/eslint-config-standard":"^4.0.0","@vue/test-utils":"^1.0.0-beta.29","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","eslint":"^5.16.0","eslint-plugin-vue":"^5.2.2","lodash":"^4.17.20","sass-loader":"^10.1.0","vue":"^2.6.12","vue-jest":"^3.0.4","vue-simple-spinner":"^1.2.8","vue-template-compiler":"^2.6.12"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","@vue/standard"],"rules":{"space-before-blocks":"off","quotes":"off","no-extra-semi":"off","semi":"off","space-infix-ops":"off"},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"bugs":{"url":"https://github.com/dotnetbrightener/vue-modal-dialog-service/issues"},"homepage":"https://github.com/dotnetbrightener/vue-modal-dialog-service#readme","keywords":["vue","datatable","component"],"license":"MIT","main":"dist/vueModalDialogService.umd.min.js","repository":{"type":"git","url":"git+https://github.com/dotnetbrightener/vue-modal-dialog-service.git"},"jest":{"transform":{"^.+\\.vue$":"vue-jest","^.+\\.js?$":"babel-jest"},"moduleNameMapper":{"^@/(.*)$":"<rootDir>/src/$1","^\\$/(.*)$":"<rootDir>/tests/$1"}},"gitHead":"82fc1e1b77691fdc3a796a4da0881bcb4ff89ad1","_id":"@dotnetbrightener/vue-modal-dialog-service@1.0.2","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-1rUY/wWnsulpqnT52FNjxwhQJqNPRG27iAWE8PenDLkNi2HU2+8hs7AO7+9wmPweQC4ZgnJcGFIxznyli13r6A==","shasum":"33b1419b484bdec8f9baf2e069d7ee888352a546","tarball":"https://registry.npmjs.org/@dotnetbrightener/vue-modal-dialog-service/-/vue-modal-dialog-service-1.0.2.tgz","fileCount":25,"unpackedSize":1030525,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0ZguCRA9TVsSAnZWagAAc6UP/i2wnpnTrlKR+9RsmRyB\nEk06sLGdpj27COjsMJitSlElFo5SlT4neAml9IxdXW5wvmURk238gDi0Grni\nIYp6DrGbRmm4MXC4xMPRPRVNNQkLNK7H6TtM76EjsS1Fhk5iBolEhRYq/ieK\nwyZdvD6pJcHIOrMx/kBvRWWZC4JqFB/99uAK+dr+uatfuxwCpqOb796DfXeY\nsnAzSTgckW6kLP0GrlRr6Qff8DwRan2wJbbzS67rZNsezaGg2p/aCAUVONKM\nkDONISV2vZM+l1vY91vwUReRxj+oyH/byfxBYgHp7cz1Q1I4Df/GGNISfjr6\n8tnn/IZVfepDFL+p+hsicC9jDpd7vTel80sDK5k291/vewmflm4gTBv/RxgX\nChZHYwka/9KuJQ4runVytqctJy6tDOGZ5O3vJc0Pa5yjI6VCEKIoSBquGByj\nboeF2EHnvCGRHyRzbG1H+5vMIvVGjHObeUn5FhgH6lmca7KEYdfwaJAWmKA2\nDysKB3rL2C8HwdeZOj0WxhtbEn2wSVh8XYOyR3XfpR2u1Fduvt1zQKjbjDqg\nT6hKRmfLhy5J8PIx1DSjYLBTCUHCK+fy+tKTsC1FfhNtHK3SnrV6EXnwLRnc\n5pygWGJJLhUxoOyIWeTF1gB448j0CUIqiE1YBoDIaehPYCjiQIpVi891jiKa\nqffP\r\n=XH5H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBs+UrAs9/rnQl+HMxEHDkp2lff3ZxDfeXOtmzVR88FJAiA/NlQ6I2gPxPzSv8VSRF8iVr7isKd8dL64LKhUzSy1AA=="}]},"_npmUser":{"name":"dotnetbrightener","email":"dotnetbrightener@gmail.com"},"directories":{},"maintainers":[{"name":"dotnetbrightener","email":"dotnetbrightener@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-modal-dialog-service_1.0.2_1607571501768_0.5223823401285825"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-10T03:12:14.379Z","1.0.0":"2020-12-10T03:12:14.582Z","modified":"2022-04-05T05:28:59.682Z","1.0.1":"2020-12-10T03:20:10.351Z","1.0.2":"2020-12-10T03:38:22.091Z"},"maintainers":[{"name":"dotnetbrightener","email":"dotnetbrightener@gmail.com"}],"description":"An injected service into your Vue Component for showing Modal Dialogs with ease","homepage":"https://github.com/dotnetbrightener/vue-modal-dialog-service#readme","keywords":["vue","datatable","component"],"repository":{"type":"git","url":"git+https://github.com/dotnetbrightener/vue-modal-dialog-service.git"},"author":{"name":"DotNet Brightener","email":"dotnetbrightener@gmail.com"},"bugs":{"url":"https://github.com/dotnetbrightener/vue-modal-dialog-service/issues"},"license":"MIT","readme":"# vue-modal-dialog-service\n\nAn injected service into your Vue Component for showing Modal Dialogs with ease\n\n[![GitHub open issues](https://img.shields.io/github/issues/dotnetbrightener/vue-modal-dialog-service.svg)](https://github.com/dotnetbrightener/vue-modal-dialog-service/issues)\n![GitHub](https://img.shields.io/github/license/dotnetbrightener/vue-modal-dialog-service.svg)\n\n\n## Features\n\n\n## Installation\n``` bash\nnpm install @dotnetbrightener/vue-modal-dialog-service --save\n```\n\n## Usage\n\nReference the plugin to your `main.js`\n\n```js\nimport Vue from 'vue';\nimport { ModalDialogPlugin } from '@dotnetbrightener/vue-modal-dialog-service';\n\n\nVue.use(ModalDialogPlugin);\n```\n\nIn your component methods:\n\n```js\n... // omitted code\nmethods: {\n    ... // ommited Code\n    /**\n    *   Show alert dialog with provided message\n    */\n    async showAlert() {\n        await this.$modalDialogService.showAlert(`This is alert message`, `This is alert title`);\n    },\n\n    /**\n    *   Show confirmation dialog with provided options\n    */\n    async showConfirmation() {\n      const confirmed = await this.$modalDialogService.showConfirmation(`This is confirmation message`,\n      `This is confirmation title`, \n      {\n        yesText: 'Yes',\n        noText: 'No'\n      });\n\n      // console.log('confirmed: ', confirmed); // will be true / false\n    }\n}\n```\n\n## Create custom dialog\n\nCreate a vue component as you would normally do\n\n```html\n<!-- dialog-components/custom-dialog-component.vue -->\n<template>\n    <div class=\"modal-content\">\n        <div class=\"modal-header\" v-if=\"!!title\">\n            <h5 class=\"modal-title\">\n                Your 'title' props will display here {{ title }}\n            </h5>\n        </div>\n        <div class=\"modal-body\">\n            This is content of custom dialog\n        </div>\n        <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-primary btn-yes\" @click=\"button1Clicked\">\n            Button 1\n        </button>\n        <button type=\"button\" class=\"btn btn-light\" @click=\"button2Clicked\">\n            Button 2\n        </button>\n        </div>\n    </div>\n</template>\n<script>\nexport default {\n    // the props will be passed from your execution\n    props: [\n        'title',\n        'customContent'\n    ],\n    methods: {\n        button1Clicked() {\n            alert('you clicked button 1. It will not close the dialog');\n        },\n\n        button2Clicked() {\n            alert('you clicked button 2. Now it will close the dialog');\n            // return whatever you want to the caller by passing the value to .closeModal() method\n            // ,closeModal is defined by the service\n            this.closeModal('this is response from custom dialog');\n        }\n    }\n};\n</script>\n\n```\n\nIn your component method, use the following to display the custom component\n\n```js\n... // omitted code\nmethods: {\n    ... // ommited Code\n    /**\n    *   Show alert dialog with provided message\n    */\n    async showCustomComponent() {\n        const dialogComponent = await import('./dialog-components/custom-dialog-component.vue').then(_ => _.default);\n\n        const dialogResult = await this.$modalDialogService.showModalDialog(dialogComponent, {\n            isCenter: true,\n            // custom props\n            title: 'This is custom props'\n        });\n\n        // dialogResult is whatever you return when you call this.closeModal() from the component;\n    },\n}\n```\n\n## Animation\nIf you would like to have animation in opening dialog modals, add the `link` to animated css stylesheet in your document's `head` section\n\n``` html\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css\" />\n```\n\n## Project Development \n\n### Setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Run your tests\n```\nnpm run test\n```\n\n### Lints and fixes files\n```\nnpm run lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n","readmeFilename":"README.md"}