{"_id":"@bdct/vue-tagsinputv2","_rev":"1-6d4c07ea53b62028b3b69733ed0c8469","name":"@bdct/vue-tagsinputv2","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"@bdct/vue-tagsinputv2","version":"2.0.0","description":"Small modiciations to @voerro/vue-tagsinput","main":"src/main.js","keywords":["vue","vuejs","tagsinput","input","tags","typeahead","autocomplete"],"author":{"name":"Benjamin Darcet"},"license":"MIT","scripts":{"dev":"cross-env NODE_ENV=development webpack-dev-server --open --hot","build":"cross-env NODE_ENV=production webpack --progress --hide-modules"},"dependencies":{"vue":"^2.5.0"},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"devDependencies":{"babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-preset-env":"^1.6.0","babel-preset-stage-3":"^6.24.1","cross-env":"^5.0.5","css-loader":"^0.28.7","file-loader":"^1.1.4","vue-loader":"^13.0.5","vue-template-compiler":"^2.4.4","webpack":"^3.6.0","webpack-dev-server":"^2.9.1"},"repository":{"type":"git","url":"https://github.com/Benjamin57/vue-tagsinput"},"private":null,"licenseText":"MIT License\n\nCopyright (c) 2017 Alexander Zavyalov\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","_id":"@bdct/vue-tagsinputv2@2.0.0","dist":{"shasum":"7b8527a69ea105a6362167bee4ef5d6af0c4e2f4","integrity":"sha512-vIRzagd2nE4h+DS5fOTe0wif0a2nbC54iK+Wpqqjyfm2MC/A9Ig0pSgk69JVqurpgiOOhBSAHKIexMXFkfLnBg==","tarball":"https://registry.npmjs.org/@bdct/vue-tagsinputv2/-/vue-tagsinputv2-2.0.0.tgz","fileCount":21,"unpackedSize":1681085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNx3BCRA9TVsSAnZWagAAJmAP/iLhKoZgMFBTVc72L/so\nI6zV+EiP3DoyV2ynODD83KQB5qdTYYNGafgMJ4m/8YMjsquRLyiSZCx/oX6i\n2Ffo4XnPSkNgvrQT2pQ9e9QhqnCArFqtP/yNdGDbPVia4tifQqtst/XSPYZH\nROtnijEI3TtuIHbizKtd8PPb/HkHPxpFdTR/4BQHucrngvcXGzGCRycSx6WT\nc01Bk7nb8Khp3l27HrJ277/8nAlUh6y0vzfiq4U4hdo1tHsA6ljV4YN7LHRO\njz1hkkZzeeY36mFML03APUJc/1hS9YR1coS4dQdSUvVW+1cTobNs8UIYYAiu\nHADQCNgWAXFS6LHk0BbIa5XrilrVqmfSASqJbj60wVMNKTjjzQN4HdnUHt8F\nI+WvH0ThZwK/gYLslLeMiutYH/tN+IeC6/J5prLYQIW2IUybMkPtwsD5bTYM\nVyZ/1WEiXM7y4Xy8+lvIxLzeMpZavahkzkFbQCFml9gt3oDiW6yAzOurKmC8\nE+45rwp96qpwzm4nUdPYfdnX6sqgcEzXfeJNpOyWZNvw24DrPeeOBqgtfta9\n8oPMFkGMENGy0SkVJX5tuKnxsatPpI9Z1fcdgU2llB/UzDdxoFYqPO4WU27f\nGjOctwvnkaQspvAJM6GXeO2CRwYnQ8dd9399qq4vS56KVagVuX0kfe4aVusA\n4In5\r\n=QOI1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBS6C0OQbjqHE3qi8KMyGNJLE56aJ+kDjF9b+XRPiK6/AiBS41ZPcWEbFwh/I6eWdy37vgYP1elhpCH6Rl0oAvKDPQ=="}]},"maintainers":[{"name":"bdct","email":"b.darcet@gmail.com"}],"_npmUser":{"name":"bdct","email":"b.darcet@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tagsinputv2_2.0.0_1563893184509_0.45822757314840423"},"_hasShrinkwrap":false}},"time":{"created":"2019-07-23T14:46:24.299Z","2.0.0":"2019-07-23T14:46:24.712Z","modified":"2022-04-04T18:03:03.031Z"},"maintainers":[{"name":"bdct","email":"b.darcet@gmail.com"}],"description":"Small modiciations to @voerro/vue-tagsinput","keywords":["vue","vuejs","tagsinput","input","tags","typeahead","autocomplete"],"repository":{"type":"git","url":"https://github.com/Benjamin57/vue-tagsinput"},"author":{"name":"Benjamin Darcet"},"license":"MIT","readme":"# Voerro Vue Tags Input v2\n\n[![npm (scoped)](https://img.shields.io/npm/v/@voerro/vue-tagsinput.svg?style=flat-square)](https://www.npmjs.com/package/@voerro/vue-tagsinput)\n[![npm](https://img.shields.io/npm/dm/@voerro/vue-tagsinput.svg?style=flat-square)](https://www.npmjs.com/package/@voerro/vue-tagsinput)\n[![MIT](https://img.shields.io/github/license/AlexMordred/vue-tagsinput.svg?style=flat-square)](https://opensource.org/licenses/MIT)\n\nA simple tags input with typeahead built with Vue.js 2.\n\n![](demo.gif)\n![](demo2.gif)\n\n[**Live Demo**](https://voerro.github.io/vue-tagsinput/)\n\n## Installation via NPM\n\n```\nnpm i @voerro/vue-tagsinput --save-dev\n```\nor\n```\nnpm i @voerro/vue-tagsinput --save\n```\n\nThen register the component with Vue:\n\n```javascript\nimport VoerroTagsInput from '@voerro/vue-tagsinput';\n\nVue.component('tags-input', VoerroTagsInput);\n```\n\nInclude the `dist/style.css` file on your page to apply the styling. You can use CDN, `require()` it inside your JS code, or `@include` it inside your (S)CSS assets. Read the `Styling` section to learn how to customize the appearance.\n\n## Installation via CDN\n\nIf you're not using NPM, you can include the required files into your page manually from a CDN. Don't forget to include Vue as well. For example:\n\n```html\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/@voerro/vue-tagsinput@1.8.0/dist/voerro-vue-tagsinput.js\"></script>\n\n<script>\n    new Vue({\n        el: '#app',\n        components: { \"v-tags-input\": VoerroTagsInput },\n    });\n</script>\n```\n\nInclude the CSS file on your page to apply the styling. Read the `Styling` section to learn how to customize the appearance.\n\n```\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@voerro/vue-tagsinput@2.0.0/dist/style.css\">\n```\n\n**IMPORTANT:** Always grab the latest versions of the package from [JSDELIVR](https://www.jsdelivr.com/package/npm/@voerro/vue-tagsinput?path=dist), the ones provided in the examples above might be outdated. Same goes for Vue.js.\n\n## Usage\n\n```html\n<tags-input element-id=\"tags\"\n    v-model=\"selectedTags\"\n    :existing-tags=\"[\n        { key: 'web-development', value: 'Web Development' },\n        { key: 'php', value: 'PHP' },\n        { key: 'javascript', value: 'JavaScript' },\n    ]\"\n    :typeahead=\"true\"></tags-input>\n```\n\n```html\n<tags-input element-id=\"tags\"\n    v-model=\"selectedTags\"\n    :existing-tags=\"[\n        { key: 1, value: 'Web Development' },\n        { key: 2, value: 'PHP' },\n        { key: 3, value: 'JavaScript' },\n    ]\"\n    :typeahead=\"true\"></tags-input>\n```\n\n`element-id` will be applied to `id` and `name` attributes of the hidden input that contains the list of the selected tags as its value. Optionally you can also use the `v-model` directive to bind a variable to the array of selected tags.\n\n`existing-tags` is the list of the existing on your website tags. Include it even if you're not using typeahead.\n\nRemove the `typeahead` property to disable this functionality.\n\n#### Setting Selected Tags Programmatically\n\nIf you need to programmatically (manually) set or change the list of selected tags from \"outside\" - just set the required value to the variable bound with the component via `v-model`.\n\nFor example, the variable name is `selectedTags`:\n```html\n<tags-input element-id=\"tags\" \n    v-model=\"selectedTags\"></tags-input>\n```\n\nYou can pre-set the value of this variable:\n```javascript\nnew Vue({\n    el: '#app',\n\n    components: { VoerroTagsInput },\n\n    data: {\n        selectedTags: [\n            { key: 'web-development', value: 'Web Development' },\n            { key: 'php', value: 'PHP' },\n            { key: 'javascript', value: 'JavaScript' },\n        ],\n    }\n});\n```\n\n... or change it whenever you need to:\n```javascript\nnew Vue({\n    el: '#app',\n\n    components: { VoerroTagsInput },\n\n    data: {\n        selectedTags: [],\n    },\n\n    methods: {\n        setSelectedTags() {\n            this.selectedTags = [{ key: 'php', value: 'PHP' }];\n        }\n    }\n});\n```\n\n#### All Available Props\n\nProp | Type | Default | Description\n--- | --- | --- | ---\nelementId | String | - | id & name for the hidden input.\nexisting-tags | Array | [] | An array with existing tags in the following format: `[{ key: 'id-or-slug-of-the-tag', value: 'Tag\\'s text representation' }, {...}, ...]`\ntypeahead | Boolean | false | Whether the typeahead (autocomplete) functionality should be enabled.\ntypeahead-style | String | 'badges' | The autocomplete prompt style. Possible values: `badges`, `dropdown`.\ntypeahead-max-results | Number | 0 | Maximum number of typeahead results to be shown. 0 - unlimited.\ntypeahead-activation-threshold | Number | 1 | Show typeahead results only after at least this many characters were entered. When set to 0, typeahead with all the available tags will be displayed on input focus.\nplaceholder | String | 'Add a tag' | The placeholder of the tag input.\nlimit | Number | 0 | Limit the number of tags that can be chosen. 0 = no limit.\nonly-existing-tags | Boolean | false | Only existing tags can be added/chosen. New tags won't be created.\ncase-sensitive-tags | Boolean | false | Determines whether tags are case sensitive. Setting this to `true` would allow tags like `php`, `PHP`, `PhP`, and so on to be added at the same time.\ndelete-on-backspace | Boolean | true | Whether deleting tags by pressing Backspace is allowed.\nallow-duplicates | Boolean | false | Allow users to add the same tags multiple times.\nvalidate | Function | `text => true` | Callback to validate tags' text with.\nadd-tags-on-comma | Boolean | false | Add new tags when comma is pressed. The search (typeahead) results are ignored.\nadd-tags-on-blur | Boolean | false | Add new tags when on the input is blur. The search (typeahead) results are ignored.\nsort-search-results | Boolean | true | Whether the search results should be sorted.\nbefore-adding-tag | Function | `tag => true` | Callback to perform additional checks and actions before a tag is added. Return `true` to allow a tag to be added or `false` to forbid the action.\nbefore-removing-tag | Function | `tag => true` | Callback to perform additional checks and actions before a tag is removed. Return `true` to allow a tag to be added or `false` to forbid the action.\n\n#### Events\n\nEvent | Description\n--- | ---\n@initialized | Fired when the component is completely ready to be worked with. Fired from the Vue.js' `mounted()` method.\n@tag-added | Fired when a new tag is added. The slug of the tag is passed along.\n@tag-removed | Fired when a tag is removed. The slug of the tag is passed along.\n@tags-updated | Fired when a tag is added or removed.\n@keydown | Fires on a keydown event\n@keyup | Fires on a keyup event\n@focus | Fired when the input is focused\n@blur | Fired when the input is blurred\n\n```html\n<voerro-tags-input\n    ...\n    @initialized=\"onInitialized\"\n    @tag-added=\"onTagAdded\"\n    @tag-removed=\"onTagRemoved\"\n    @tags-updated=\"onTagsUpdated\"\n    @keydown=\"onKeyDown\"\n    @keyup=\"onKeyUp\"\n    @focus=\"onFocus\"\n    @blur=\"onBlur\"\n></voerro-tags-input>\n```\n\n```javascript\n<script>\nnew Vue({\n    ...\n\n    methods: {\n        onInitialized() {\n            console.log('Initialized');\n        },\n\n        onTagAdded(slug) {\n            console.log(`Tag added: ${slug}`);\n        },\n\n        onTagRemoved(slug) {\n            console.log(`Tag removed: ${slug}`);\n        },\n\n        onTagsUpdated() {\n            console.log('Tags updated');\n        },\n\n        onKeyDown() {\n            console.log('Key down');\n        },\n\n        onKeyUp() {\n            console.log('Key up');\n        },\n\n        onFocus() {\n            console.log('Input focused');\n        },\n\n        onBlur() {\n            console.log('Input blurred');\n        },\n    }\n});\n</script>\n```\n\n## Data\n\nYou can bind the array of selected tags to a variable via `v-model`. A tag object within the array looks like this:\n\n```\n{ key: 'web-development', value: 'Web Development' }\n```\n\n`key` is whatever unique key you use for the tags in your project. It could be a unique slug, it could be a unique numeric id, it could be something else. `value` is the text representation of a tag.\n\nThere's also a hidden text input, which has the stringified version of the array of selected tags as its value. The `name` and `id` of the input equal to whatever you set to the `element-id` prop.\n\nThe tags that don't exist in the `existing-tags` array will have its `key` equal to an empty string `''`. In your backend you can consider these tags as `to be created`.\n\n## Styling\n\nIf you want to completely re-style the component - write your own styles from scratch using `dist/style.css` as a reference. Alternatively you can override specific parts of `dist/style.css` using `!important`.\n\nCertain classes/styles can be overridden via component props on a per instance basis in case you just want to make minor changes, e.g. you just want to change colors.\n\nProp | Default class | Area\n--- | --- | ---\nwrapper-class | tags-input-wrapper-default | Outer appearance of the input - a wrapper providing a border and padding around the selected tags. If you're using CSS frameworks, you could use the frameworks' native classes, e.g. `form-control` for Bootstrap or `input` for Bulma.\n\n## Using Typeahead (Autocomplete)\n\nWhen search results are displayed underneath the input, use the `arrow down` and `arrow up` keys on the keyboard to move the selection. Press `Enter` to select a tag. Press `Esc` to discard the search results and then `Enter` to add a new tag the way you've typed it.\n\n## Updating From Older Versions\n\n#### Older versions up to v1.5.0 -> v1.5.1\n\nSee the `v1` branch for details.\n\n#### v1.5.1 and above -> v2.*\n\nA pretty serious bug (#53) was fixed in `v2.0.0`. The data format for the `existing-tags` prop and the `v-model` directive has been changed. You can find the new format in this documentation, see above.\n\n## Contribution\n\nEveryone is welcome to contribute. When making a contribution, please base your branch off of `dev` and merge it into `dev` as well. Thank you!\n\n## Support\n\nThis software is absolutely free to use and is developed in the author's free time. If you found this software useful and would like to say thank you to the author, please consider making a donation. It's not the amount, it's the gesture.\n\n- BTC (Bitcoin): 34ReKHWmSoGbcEHJw3HtyZ5CXz1UfoUKG5\n- PayPal: https://paypal.me/AlexanderZavyalov\n","readmeFilename":"README.md"}