{"_id":"@duncte123/vue-notify-me","name":"@duncte123/vue-notify-me","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@duncte123/vue-notify-me","version":"1.1.0","description":"Stackable notification Alert for Vue","main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/PygmySlowLoris/vue-notify-me.git"},"keywords":["vue","notify","notification","notify me","alert"],"author":{"name":"PygmySlowLoris Team","email":"team@pygmyslowloris.org","url":"https://github.com/PygmySlowLoris"},"contributors":[{"name":"Eduardo Marcos","email":"edujugon@gmail.com","url":"https://github.com/Edujugon"},{"name":"Guido Ceraso","email":"guidoceraso@gmail.com","url":"https://github.com/hazzo"}],"license":"MIT","bugs":{"url":"https://github.com/PygmySlowLoris/vue-notify-me/issues"},"homepage":"https://github.com/PygmySlowLoris/vue-notify-me#readme","scripts":{"dev":"webpack serve --open --mode=development","build":"webpack --mode=production --progress","prepublish":"npm run build"},"dependencies":{"vue":"^3.2.36"},"devDependencies":{"@babel/preset-env":"7.16.11","babel-loader":"8.2.3","clean-webpack-plugin":"4.0.0","cross-env":"^3.0.0","css-loader":"6.5.1","css-minimizer-webpack-plugin":"3.4.1","file-loader":"6.2.0","html-webpack-plugin":"5.5.0","mini-css-extract-plugin":"2.5.3","style-loader":"3.3.1","vue-loader":"17.0.0","webpack":"5.67.0","webpack-cli":"^5.1.4","webpack-dev-server":"4.7.3"},"gitHead":"eab34a4c6a811ac755c44bdb4fd15a9aa5142045","_id":"@duncte123/vue-notify-me@1.1.0","_nodeVersion":"18.12.1","_npmVersion":"9.6.4","dist":{"integrity":"sha512-PUlInjV4tvzrQQB0KDX7EEITI++2R+khJylSrbgShCW3MU0mRi425rqVRYQ8EyDg74TkN6JE53TNKHsdLk+jVA==","shasum":"5321c9d728bd66be36e5d2ae93967fa7538802d0","tarball":"https://registry.npmjs.org/@duncte123/vue-notify-me/-/vue-notify-me-1.1.0.tgz","fileCount":12,"unpackedSize":88406,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzfCJAeKZHFhM65mknLovhxCNhc8TmvuMrQy4nsUpyiAIhANDJxe8AOZEhJdCOpF7hNIZoObj92Q5g/VeK2dcW4wah"}]},"_npmUser":{"name":"duncte123","email":"contact@duncte123.me"},"directories":{},"maintainers":[{"name":"duncte123","email":"contact@duncte123.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-notify-me_1.1.0_1689591343067_0.9980861339289742"},"_hasShrinkwrap":false}},"time":{"created":"2023-07-17T10:55:42.927Z","1.1.0":"2023-07-17T10:55:43.283Z","modified":"2023-07-17T10:55:43.578Z"},"maintainers":[{"name":"duncte123","email":"contact@duncte123.me"}],"description":"Stackable notification Alert for Vue","homepage":"https://github.com/PygmySlowLoris/vue-notify-me#readme","keywords":["vue","notify","notification","notify me","alert"],"repository":{"type":"git","url":"git+https://github.com/PygmySlowLoris/vue-notify-me.git"},"contributors":[{"name":"Eduardo Marcos","email":"edujugon@gmail.com","url":"https://github.com/Edujugon"},{"name":"Guido Ceraso","email":"guidoceraso@gmail.com","url":"https://github.com/hazzo"}],"author":{"name":"PygmySlowLoris Team","email":"team@pygmyslowloris.org","url":"https://github.com/PygmySlowLoris"},"bugs":{"url":"https://github.com/PygmySlowLoris/vue-notify-me/issues"},"license":"MIT","readme":"#   vue-notify-me\n\n<p align=\"center\">\n<img src=\"https://media.giphy.com/media/GoTlxRAapcEVy/giphy.gif\" />\n</p>\n\nNotification Alert for Vue.\n\n## Features\n\n* Customizable template\n* Stackable notifications\n\n<a href=\"https://pygmyslowloris.github.io/vue-notify-me/\"> Live Demo</a>\n\n##  Installation\n\n```bash\nnpm install vue-notify-me --save\n```\n\n##  Properties\n\n| Properties                    | Type      | Values     |\n| :---------------              | :-------  | :--------- |\n|  `event-bus`                  | Object    | <b>Central event Bus </b>|\n|  `event-show` (not required)  | String    | <b>Default </b> `notify-me`|\n|  `event-hide` (not required)  | String    | <b>Default </b> `hide-notify-me`|\n|  `close` (not required)       | String    | <b>Default </b>`bulma`, options: bootstrap or any other class for the closing icon|\n|  `permanent` (not required)   | Bool      | <b>Default </b>false|\n|  `container` (not required)   | String    | <b>Default </b>`notification`, (Class for the notification container)|\n|  `status` (not required)      | String    | <b>Default </b>`is-success`, (Class for the notification status)|\n|  `width` (not required)       | String    | <b>Default </b>`350px`. It's **mandatory** to set the **unit** for the width. For example: `rem`, `em`, `px`    |\n|  `timeout` (not required)       | Number    | <b>Default `4000`</b>. Value is in miliseconds. If notification is not `permanent` you can set the timeout for it    |\n\n##  Examples\n\nInclude the component in your .vue file.\n\n```html\n<template>\n  <notify-me\n        :event-bus=\"bus\">\n      <template slot=\"content\" scope=\"{data}\">\n          <div style=\"width: 100%; word-break: break-all; text-align: left\">\n              <h4><b>{{data.title}}</b></h4>\n              <p style=\"margin: 0\">{{data.text}}</p>\n          </div>\n      </template>\n  </notify-me>\n</template>\n```\n\nIf you'd like to use the component in a SPA set a single template on your layout application\nand fire your notification through your central event bus.\nSet any available prop for the component like this:\n\n```html\n<notify-me\n    container=\"notification\"\n    status=\"alert-success\"\n    :width=\"300\"\n    close=\"bulma\"\n    :event-bus=\"bus\"\n>\n      <template slot=\"content\" scope=\"{data}\">\n          <div style=\"width: 100%; word-break: break-all; text-align: left\">\n              <h4><b>{{data.title}}</b></h4>\n              <p style=\"margin: 0\">{{data.text}}</p>\n          </div>\n      </template>\n  </notify-me>\n```\n\nTo show a notification just fire an event like this:\n \n```js\n<script>\nimport Notify from 'vue-notify-me'\n\nconst bus = new Vue();\n\nexport default {\n  components: {\n    'notify-me': Notify\n  },\n  data(){\n      return {\n          bus\n      }\n  },\n  mounted(){\n      this.bus.$emit('notify-me', {\n        data: {\n            title: 'The pygmy team :)',\n            text: 'this is my notification'\n        }\n  \n      });\n  }\n  \n}\n</script>\n```\n\nYou may also add any available prop through the event emitter:\n\n```js\nthis.bus.$emit('notify-me', {\n    permanent: true,\n    status: this.status,\n    data: {\n        title: 'The pygmy team :)',\n        text: this.text\n    }\n\n});\n```\n\nEnjoy :)\n","readmeFilename":"README.md"}