{"_id":"@albiizeka/treeselect","_rev":"5-a1375552f6cb112dc33728dccf6ea93f","name":"@albiizeka/treeselect","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@albiizeka/treeselect","version":"1.0.0","keywords":["Vue-3-treeselect"],"author":{"name":"Albi Zeka"},"license":"MIT","_id":"@albiizeka/treeselect@1.0.0","maintainers":[{"name":"albizeka","email":"albiizeka@gmail.com"}],"homepage":"https://github.com/albizeka/Treeselect#readme","bugs":{"url":"https://github.com/albizeka/Treeselect/issues"},"dist":{"shasum":"fc2f697885c64da73bd49534e3b3f18d9f31834d","tarball":"https://registry.npmjs.org/@albiizeka/treeselect/-/treeselect-1.0.0.tgz","fileCount":19,"integrity":"sha512-bkVzc7ZpBLs+Bo0SPByFxompfhDV5dorzpMBO0A5AzMTvpdvVJLvWAE04i36LYcdmu/+2TLcGouzNdg48Jjr1A==","signatures":[{"sig":"MEUCIGh8LMzjeIl39CfMFILAe/s7nygh9m9ZNGjJu+uecArzAiEA+cqMejaq+lICqe9L+r9U+kdMbPQ7oweMNB5K30poDxw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731592},"main":"index.js","gitHead":"c3d078b0ad7e61533aca73ed1ccec80b16d41c6f","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"albizeka","email":"albiizeka@gmail.com"},"repository":{"url":"git+https://github.com/albizeka/Treeselect.git","type":"git"},"_npmVersion":"10.1.0","description":"A treeselect pre-builded library","directories":{},"_nodeVersion":"20.8.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/treeselect_1.0.0_1703238072348_0.13491860954738777","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@albiizeka/treeselect","version":"1.0.1","keywords":["Vue-3-treeselect"],"author":{"name":"Albi Zeka"},"license":"MIT","_id":"@albiizeka/treeselect@1.0.1","maintainers":[{"name":"albizeka","email":"albiizeka@gmail.com"}],"homepage":"https://github.com/albizeka/Treeselect#readme","bugs":{"url":"https://github.com/albizeka/Treeselect/issues"},"dist":{"shasum":"0870e7ac9e2e331b28892513cfeea180dcff4a08","tarball":"https://registry.npmjs.org/@albiizeka/treeselect/-/treeselect-1.0.1.tgz","fileCount":19,"integrity":"sha512-MHzt5QAk5EKsYdI55AnbNW7mSkhyX/aZ2gXkoVs2dF0uARSCTQiqe4NzAI8z7EXBTnFpr9mZT5kJijw3vZOrQQ==","signatures":[{"sig":"MEYCIQC1CY8OljpAzit4iBQglg5rmr4ZhOhhTRkL8fRwnC6mNgIhALc+pxcoPww46N5qDEiz7l9wjbwCoE7+aR2Tcc4HzgFs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731612},"main":"index.js","gitHead":"3a1a4e0ce202e04dab2a5215c7da1c5e1bf2bf62","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"albizeka","email":"albiizeka@gmail.com"},"repository":{"url":"git+https://github.com/albizeka/Treeselect.git","type":"git"},"_npmVersion":"10.1.0","description":"A treeselect pre-builded library","directories":{},"_nodeVersion":"20.8.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/treeselect_1.0.1_1703238222253_0.9225679284667501","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@albiizeka/treeselect","version":"1.0.2","keywords":["Vue-3-treeselect"],"author":{"name":"Albi Zeka"},"license":"MIT","_id":"@albiizeka/treeselect@1.0.2","maintainers":[{"name":"albizeka","email":"albiizeka@gmail.com"}],"homepage":"https://github.com/albizeka/Treeselect#readme","bugs":{"url":"https://github.com/albizeka/Treeselect/issues"},"dist":{"shasum":"66492c869d21081a372d05c921194537a2d4bb8d","tarball":"https://registry.npmjs.org/@albiizeka/treeselect/-/treeselect-1.0.2.tgz","fileCount":19,"integrity":"sha512-aVy9cl8wy+ZXghxvThGhccOnYi7SM7B7wHo1RSOrbtM45HjbQa357ClbGUmi+Gg1iXg0ZOEWCwx/vrWDacpulw==","signatures":[{"sig":"MEYCIQDR0BHnml3Hei+HPUJipK0BcdYGG8wNBOadp9qS2mylYgIhAMRJQxO464BUkFbSk8oysPRLxl8uz28eOMYqKy71NWLz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731742},"main":"dist/vue3-treeselect.common.js","unpkg":"dist/vue3-treeselect.umd.js","gitHead":"d93938fff2b7b2af609348cd87809238bc45e1a8","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"albizeka","email":"albiizeka@gmail.com"},"repository":{"url":"git+https://github.com/albizeka/Treeselect.git","type":"git"},"_npmVersion":"10.1.0","description":"A treeselect pre-builded library","directories":{},"_nodeVersion":"20.8.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/treeselect_1.0.2_1703239107655_0.7095957962182124","host":"s3://npm-registry-packages"}}},"time":{"created":"2023-12-22T09:41:12.348Z","modified":"2026-05-18T08:40:48.398Z","1.0.0":"2023-12-22T09:41:12.593Z","1.0.1":"2023-12-22T09:43:42.540Z","1.0.2":"2023-12-22T09:58:27.908Z"},"bugs":{"url":"https://github.com/albizeka/Treeselect/issues"},"author":{"name":"Albi Zeka"},"license":"MIT","homepage":"https://github.com/albizeka/Treeselect#readme","keywords":["Vue-3-treeselect"],"repository":{"url":"git+https://github.com/albizeka/Treeselect.git","type":"git"},"description":"A treeselect pre-builded library","maintainers":[{"email":"albiizeka@gmail.com","name":"albizeka"},{"email":"valonid@gmail.com","name":"valonid"}],"readme":"# vue3-treeselect\r\n[![npm](https://badgen.now.sh/npm/v/vue3-treeselect)](https://www.npmjs.com/package/vue3-treeselect)  [![Coverage](https://badgen.net/codecov/c/github/megafetis/vue3-treeselect)](https://codecov.io/gh/megafetis/vue3-treeselect?branch=main)\r\n![npm monthly downloads](https://badgen.now.sh/npm/dm/megafetis/vue3-treeselect)\r\n [![Known vulnerabilities](https://snyk.io/test/npm/megafetis/vue3-treeselect/badge.svg)](https://snyk.io/test/npm/megafetis/vue3-treeselect) ![License](https://badgen.net/github/license/megafetis/vue3-treeselect)\r\n\r\n> A multi-select component with nested options support for Vue 3. Thank to [riophae](https://github.com/riophae/vue-treeselect) and his sources and library for vue 2 taken as basis.\r\n\r\nBreaking changes from his library:\r\n\r\n* property `value` => `modelValue`\r\n* event `input` => `updated:modelValue`\r\n* Now use slots with `<template>`\r\n\r\n![Vue-Treeselect Screenshot](https://raw.githubusercontent.com/riophae/vue-treeselect/master/screenshot.png)\r\n\r\n### Features\r\n\r\n- Single & multiple select with nested options support\r\n- Fuzzy matching\r\n- Async searching\r\n- Delayed loading (load data of deep level options only when needed)\r\n- Keyboard support (navigate using <kbd>Arrow Up</kbd> & <kbd>Arrow Down</kbd> keys, select option using <kbd>Enter</kbd> key, etc.)\r\n- Rich options & highly customizable\r\n- Supports a wide range of browsers (see [below](#browser-compatibility))\r\n- RTL support\r\n\r\n*Requires Vue 3.0+*\r\n\r\n### Getting Started\r\n\r\nIt's recommended to install vue3-treeselect via npm, and build your app using a bundler like [webpack](https://webpack.js.org/).\r\n\r\n```bash\r\nnpm install --save vue3-treeselect\r\n```\r\n\r\nThis example shows how to integrate vue3-treeselect with your [Vue SFCs](https://vuejs.org/v2/guide/single-file-components.html).\r\n\r\n```vue\r\n<!-- Vue SFC -->\r\n<template>\r\n  <div id=\"app\">\r\n    <treeselect v-model=\"value\" :multiple=\"true\" :options=\"options\" />\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  // import the component\r\n  import Treeselect from 'vue3-treeselect'\r\n  // import the styles\r\n  import 'vue3-treeselect/dist/vue3-treeselect.css'\r\n\r\n  export default {\r\n    // register the component\r\n    components: { Treeselect },\r\n    data() {\r\n      return {\r\n        // define the default value\r\n        value: null,\r\n        // define options\r\n        options: [ {\r\n          id: 'a',\r\n          label: 'a',\r\n          children: [ {\r\n            id: 'aa',\r\n            label: 'aa',\r\n          }, {\r\n            id: 'ab',\r\n            label: 'ab',\r\n          } ],\r\n        }, {\r\n          id: 'b',\r\n          label: 'b',\r\n        }, {\r\n          id: 'c',\r\n          label: 'c',\r\n        } ],\r\n      }\r\n    },\r\n  }\r\n</script>\r\n```\r\n\r\nIf you just don't want to use webpack or any other bundlers, you can simply include the standalone UMD build in your page. In this way, make sure Vue as a dependency is included before vue3-treeselect.\r\n\r\n```html\r\n<html>\r\n  <head>\r\n    <!-- include Vue 2.x -->\r\n    <script src=\"https://cdn.jsdelivr.net/npm/vue@next\"></script>\r\n    <!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->\r\n    <script src=\"https://cdn.jsdelivr.net/npm/vue3-treeselect@^0.1.0/dist/vue3-treeselect.umd.min.js\"></script>\r\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/vue3-treeselect@^0.1.0/dist/vue3-treeselect.min.css\">\r\n  </head>\r\n  <body>\r\n    <div id=\"app\">\r\n      <treeselect v-model=\"value\" :multiple=\"true\" :options=\"options\" />\r\n    </div>\r\n  </body>\r\n  <script>\r\n      createApp({\r\n          data: {\r\n            // define the default value\r\n            value: null,\r\n            // define options\r\n            options: [ {\r\n            id: 'a',\r\n            label: 'a',\r\n            children: [ {\r\n                id: 'aa',\r\n                label: 'aa',\r\n            }, {\r\n                id: 'ab',\r\n                label: 'ab',\r\n            } ],\r\n            }, {\r\n            id: 'b',\r\n            label: 'b',\r\n            }, {\r\n            id: 'c',\r\n            label: 'c',\r\n            } ],\r\n        },\r\n      })\r\n        .component('treeselect', VueTreeselect.Treeselect)\r\n        .mount('#app')\r\n\r\n  </script>\r\n</html>\r\n```\r\n\r\n### Documentation for vue 2 & Live Demo. Be careful with breaking changes above.\r\n\r\n[Visit the website](https://vue-treeselect.js.org/)\r\n\r\nNote: please use a desktop browser since the website hasn't been optimized for mobile devices.\r\n\r\n### Browser Compatibility\r\n\r\n- Chrome\r\n- Edge\r\n- Firefox\r\n- Safari\r\n\r\nIt should function well on IE9, but the style can be slightly broken due to the lack of support of some relatively new CSS features, such as `transition` and `animation`. Nevertheless it should look 90% same as on modern browsers.\r\n\r\n### Bugs\r\n\r\nYou can [open an issue](https://github.com/megafetis/vue3-treeselect/issues/new).\r\n\r\n### Contributing\r\n\r\n1. Fork & clone the repo\r\n2. Install dependencies by `yarn` or `npm install`\r\n3. Check out a new branch\r\n4. `npm run dev` & hack\r\n5. Make sure `npm test` passes\r\n6. Push your changes & file a pull request\r\n\r\n### Credits\r\n\r\nThis project is inspired by [vue-treeselect](https://github.com/riophae/vue-treeselect).\r\nSpecial thanks go to their respective authors!\r\n\r\nSome icons used in this project:\r\n\r\n  - \"link\" icon made by [Smashicons](https://www.flaticon.com/authors/smashicons) is licensed under [CC 3.0 BY](https://creativecommons.org/licenses/by/3.0/)\r\n  - \"spinner\" icon from [SpinKit](https://github.com/tobiasahlin/SpinKit) is licensed under the [MIT License](https://github.com/tobiasahlin/SpinKit/blob/master/LICENSE)\r\n  - \"caret\" icon made by [Dave Gandy](https://www.flaticon.com/authors/dave-gandy) is licensed under [CC 3.0 BY](https://creativecommons.org/licenses/by/3.0/)\r\n  - \"delete\" icon made by [Freepik](https://www.flaticon.com/authors/freepik) is licensed under [CC 3.0 BY](https://creativecommons.org/licenses/by/3.0/)\r\n  - \"checkmark symbol\" & \"minus symbol\" icons made by [Catalin Fertu](https://www.flaticon.com/authors/catalin-fertu) are licensed under [CC 3.0 BY](https://creativecommons.org/licenses/by/3.0/)\r\n\r\n### License\r\n\r\nReleased under the [MIT License](https://github.com/megafetis/vue3-treeselect/blob/master/LICENSE).\r\n","readmeFilename":"README.md"}