{"_id":"@codekraft-studio/vue-context-menu","_rev":"3-d209d5e8cc4e360ffe4b87a7377c108e","name":"@codekraft-studio/vue-context-menu","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@codekraft-studio/vue-context-menu","version":"0.1.0","_id":"@codekraft-studio/vue-context-menu@0.1.0","maintainers":[{"name":"b4dnewz","email":"filippo@codekraft.it"}],"dist":{"shasum":"459597e7bdc97b9d54cbdb74c9fbf3749d697c81","tarball":"https://registry.npmjs.org/@codekraft-studio/vue-context-menu/-/vue-context-menu-0.1.0.tgz","fileCount":39,"integrity":"sha512-bJevt4HxnzeXSqEpzMnPfFeCs4a+BltU5kgEgF0gBSQFPjhAHMrQt+ddKjnMJTNYEmFz521y4V1gcPEKTna29Q==","signatures":[{"sig":"MEUCIHXj/1ZZikKCHsoNs9pwS6AUjLil/sRJ093QvMawqik9AiEA2tSzPRsWKgkKXXUHxyJthD+N778c6VrCS88fYzMKOJg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":579882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcF17kCRA9TVsSAnZWagAAUjkP/2e++lR02QeGz9Lj7FVE\n3llK9MtP1WknqYI2ZhaTeFenQpd9JU2ME6OqW0cC8/A1XGl3vtJhPkDR+M9P\nir9CVn8un/Z70fE+8qIV9wIJwp72mnLsHjySgB+kSDwSXaZ/RKl1uhnmsdgo\nBBFyw1XawiX5GFZkPWPJWlQH68qzCxuJeyHpLc6xjgJSv+uFYMFC6qlEoUd+\nX7e3w1Aa9WtElsZuRgTZF9+fbDXwquc0+i3I1bBj0Le4ey1Oh3c8fAsypq02\nHX0D6yZKDLtfMEJgIxIcX638/prNRbmtr5Xzm+jmzIQg4IHo25GY5YQ+qdNt\nrWJv3SUJgovMgRz7bhufkyvy+CmVPbOTkO2bOWLjkvyQPpMXeAHU7OyLNqiu\noZj9Mb29XdsWdv+A17proFcdkHowVpgksRsQgey+dycbsakgERGafcDsoTiG\nFsXKzLx5VOFsoWF56ZsW7hCpJY7dzQ+8O7khsOrFAwuAn5ccK3MEI+9R8sxQ\ng9pYYWBqR+obX76krv35fOqzRg8+miH0DwHacwILVbZroBvmtD3/LCjp2ROD\nBR/SFvgoI5aOGSwY/k4FRJRnkuU9fv6KAQW9eEs0ixm00Nxa7m3JdcQairAT\nUthX4ep9ztprJGso37WCFrlUYbDK3uL0jjviI+4knCPsZIuYpGb8pPrR19Fq\n9JWD\r\n=slgB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/VueContextMenu.umd.js","scripts":{"lint":"vue-cli-service lint","build":"vue-cli-service build --target lib --name VueContextMenu src/components/index.js","serve":"vue-cli-service serve","test:unit":"vue-cli-service test:unit","build:demo":"vue-cli-service build --mode demo --dest demo","publish:demo":"git subtree push --prefix demo origin gh-pages"},"_npmUser":{"name":"b4dnewz","email":"filippo@codekraft.it"},"description":"Functional and customizable context menu for VueJs","directories":{},"dependencies":{"vue":"^2.5.17"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^5.8.0","node-sass":"^4.9.0","babel-core":"7.0.0-bridge.0","babel-jest":"^23.6.0","sass-loader":"^7.0.1","babel-eslint":"^10.0.1","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.2.0","eslint-plugin-vue":"^5.0.0-0","@vue/cli-plugin-babel":"^3.2.0","vue-template-compiler":"^2.5.17","@vue/cli-plugin-eslint":"^3.2.0","@vue/cli-plugin-unit-jest":"^3.2.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-context-menu_0.1.0_1545035491507_0.4043821446951288","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@codekraft-studio/vue-context-menu","version":"0.1.1","license":"MIT","_id":"@codekraft-studio/vue-context-menu@0.1.1","maintainers":[{"name":"b4dnewz","email":"filippo@codekraft.it"}],"dist":{"shasum":"7fd743f2d44a92a48d53a1b0c42dcee01e0ad819","tarball":"https://registry.npmjs.org/@codekraft-studio/vue-context-menu/-/vue-context-menu-0.1.1.tgz","fileCount":40,"integrity":"sha512-IVsur/93FmDMUYPDK+J8H7huwFA7kbhqlctD0WeuRIlX4R68JTQFIIk8YmpTO+7qT1atL2+f7tODaEwlmrjFiA==","signatures":[{"sig":"MEQCIDN1MmTMos5MgTQD1spH3Glu4OPdqgfg2qmXBICP82KRAiAQeLLDZNqYCFL1BsqOIo5eIGoRnyBQ4VxY3VOVt306nA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":588668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcJJzhCRA9TVsSAnZWagAArtsP/jr8q1tOp+60vFORU4Se\nHjQahPukUfWcDuWwEgaofP1PdpGaWjTaanWrmg+Tj2jSlVkK5/U50doUDuI2\nhTv34GbJOduH2/A0jDS+fWr8c3pFYk1bjbFsIKfKHtzmOTlMvYvQIzfQxLO4\nWKRI8J9xJJTHyaDtRVpvRVVLAybkCqtIMvHY/5ZuFEiqw7RJnlTVMkmMeLKq\nCkeukSRnDG53DPYEqMfC483pl6DxaGCFUonVXTitCLBhHrP6L7AE3lN3EbD5\nd7DJ8z10fe0dyHbjaIcj5sPxxDswVEcttI+UcIdzlsE4OIXbjanQXbQeHhhQ\ndWPk/eSsYsk9VgcE75c5Et/gcA1q5VMoi8MQrU5xFXHLknlDd2u58xi/MOdM\nRBpwNR3+UOGRrOAf06CSIXek9mgHUoylq1ktpDgxRuixt3o4nkrXrS7Ja5sH\nQKrK9UUtZMInJHWppZDknGJOUiYyH7s5epG8UlI/cnztsgmQ15JeRJ99sK6R\nczYAUHUOycxmahglKxOH+WSjpHZKpdszQIfZ/kIDWlB9e7kaPODbkDRkMtxy\nw8myztrjWdXsDNm+F4cIX4eesDIP01R38Tx/QOFAa7m0MbEwpv0fbWtn6gj4\n+xvLuqR/hd3Ki0X6s3HsvyIAbPr1D342F8umF6ZAPAdx85HzLr66xiAK5QEC\nCJah\r\n=v71Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/VueContextMenu.umd.js","scripts":{"lint":"vue-cli-service lint","build":"vue-cli-service build --target lib --name VueContextMenu src/components/index.js","serve":"vue-cli-service serve","test:unit":"vue-cli-service test:unit","build:demo":"vue-cli-service build --mode demo --dest demo","publish:demo":"git subtree push --prefix demo origin gh-pages"},"_npmUser":{"name":"b4dnewz","email":"filippo@codekraft.it"},"description":"Functional and customizable context menu for VueJs","directories":{},"licenseText":"The MIT License (MIT)\n\nCopyright (c) 2018 Filippo Conti\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","dependencies":{"vue":"^2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^5.8.0","node-sass":"^4.9.0","babel-core":"7.0.0-bridge.0","babel-jest":"^23.6.0","sass-loader":"^7.0.1","babel-eslint":"^10.0.1","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.2.0","eslint-plugin-vue":"^5.0.0-0","@vue/cli-plugin-babel":"^3.2.0","vue-template-compiler":"^2.5.21","@vue/cli-plugin-eslint":"^3.2.0","@vue/cli-plugin-unit-jest":"^3.2.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-context-menu_0.1.1_1545903328530_0.05398529614740477","host":"s3://npm-registry-packages"}}},"time":{"created":"2018-12-17T08:31:31.366Z","modified":"2024-08-10T13:19:50.347Z","0.1.0":"2018-12-17T08:31:31.735Z","0.1.1":"2018-12-27T09:35:28.727Z"},"license":"MIT","description":"Functional and customizable context menu for VueJs","maintainers":[{"email":"erikyo83@gmail.com","name":"erikyo"},{"email":"filippo@codekraft.it","name":"b4dnewz"}],"readme":"# vue-context-menu\n\n> functional and customizable context menu for VueJs\n\n[![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url]\n\nCheck out the [demo](https://codekraft-studio.github.io/vue-context-menu/) to see it in action.\n\n## Installation\n\nDownload the project using your favorite package manager:\n\n```\nnpm install @codekraft-studio/vue-context-menu\nyarn add @codekraft-studio/vue-context-menu\n```\n\nThan import it in your project and load it:\n\n```js\nimport Vue from 'vue'\nimport VueContextMenu from '@codekraft-studio/vue-context-menu'\n\nVue.use(VueContextMenu)\n```\n\n## Usage\n\nIt's very simple to use, first you need to setup your context menu components with the menu template you desire:\n\n```html\n<VueContextMenu ref=\"SimpleMenu\">\n  <ul>\n    <li>First action</li>\n    <li>Second action</li>\n  </ul>\n</VueContextMenu>\n```\n\nYou should assign a reference name to the component so it's accessible inside your component instance and template scope through `$refs` object, in case of the example above you can access the context menu via `$refs.SimpleMenu`.\n\nThe next step is to bind the context menu to the element(s) where he belongs:\n\n```html\n<div class=\"container\" @contextmenu=\"$refs.SimpleMenu.open\">\n  <!-- Some content -->\n</div>\n```\n\nWhen the rightclick (or contextmenu) event occurs on the element your custom menu should appear.\n\nYou can also pass a context object to the menu with the element clicked, this is useful in case of dynamic menus or lists:\n\n```html\n<li v-for=\"(item, index) in items\" :key=\"index\" @contextmenu=\"$refs.ListMenu.open($event, item)\">\n  <span>{{item.name}}</span>\n</li>\n\n<VueContextMenu ref=\"ListMenu\">\n  <template slot-scope=\"{item}\">\n    <ul>\n      <li @click=\"onEditClick(item)\">Edit {{item.name}}</li>\n      <li @click=\"onRemoveClick(item)\">Remove {{item.name}}</li>\n    </ul>\n  </template>\n</VueContextMenu>\n```\n\nIn the example above the context menu will open with the `item` value as context and it's forwarded to the menu actions methods.\n\nBe sure to add the `$event` object as __first argument__ of the __open__ method, otherwise it will not work properly.\n\n## Methods\n\nUsually you should use only the __open__ method and bind it to the `@contextmenu` event of your elements, but here a list of the component methods:\n\n#### .open(event, context = {})\n\nEnsure the position of the context menu relative to the target element of the event and shows it, the optional context is forwarded to the menu template scope.\n\n#### .close()\n\nHide the context menu and reset it's position.\n\n---\n\n## Project setup\n```\nyarn install\n```\n\n### Compiles and hot-reloads for development\n```\nyarn run serve\n```\n\n### Compiles and minifies for production\n```\nyarn run build\n```\n\n### Run your tests\n```\nyarn run test\n```\n\n### Lints and fixes files\n```\nyarn run lint\n```\n\n### Run your unit tests\n```\nyarn run test:unit\n```\n\n---\n\n## License\n\nThis project is released under [MIT License](LICENSE) by [codekraft-studio](https://github.com/codekraft-studio).\n\n[npm-image]: https://badge.fury.io/js/%40codekraft-studio%2Fvue-context-menu.svg\n\n[npm-url]: https://npmjs.org/package/@codekraft-studio/vue-context-menu\n\n[daviddm-image]: https://david-dm.org/codekraft-studio/vue-context-menu.svg?theme=shields.io\n\n[daviddm-url]: https://david-dm.org/codekraft-studio/vue-context-menu\n","readmeFilename":"README.md"}