{"_id":"@doramart/virtual-tree-select-vue2","name":"@doramart/virtual-tree-select-vue2","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@doramart/virtual-tree-select-vue2","version":"0.1.0","description":"A high-performance virtual scrolling tree select component for Vue 2.6 with Composition API support","main":"./dist/index.cjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.cjs","types":"./dist/index.d.ts"},"./style.css":"./dist/style.css"},"scripts":{"dev":"vite","build":"vite build && npm run build:types && npm run move:types","build:types":"tsc --emitDeclarationOnly","move:types":"mv dist/vue2/src/index.d.ts dist/index.d.ts && rm -rf dist/vue2 dist/shared","type-check":"tsc --noEmit","postinstall":"node scripts/check-vue-version.js","prepublishOnly":"npm run build"},"keywords":["vue2","vue","tree","tree-select","select","virtual-scroll","virtual-list","component","ui","composition-api","performance","large-dataset"],"author":{"name":"Virtual Tree Select Contributors"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/doramart/virtual-tree-select.git","directory":"packages/vue2"},"homepage":"https://github.com/doramart/virtual-tree-select#readme","bugs":{"url":"https://github.com/doramart/virtual-tree-select/issues"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"peerDependencies":{"vue":"~2.6.14","@vue/composition-api":"^1.7.0"},"devDependencies":{"@types/node":"^20.10.0","@vue/composition-api":"^1.7.2","less":"^4.2.0","typescript":"^5.3.0","vite":"^4.5.0","vite-plugin-vue2":"^2.0.3","vue":"~2.6.14","vue-template-compiler":"~2.6.14"},"dependencies":{"lodash-es":"^4.17.21","resize-observer-polyfill":"^1.5.1"},"_id":"@doramart/virtual-tree-select-vue2@0.1.0","gitHead":"f919e96e3200bb82d0e06ad846d31b5f5f0dc790","_nodeVersion":"20.19.4","_npmVersion":"10.8.2","dist":{"integrity":"sha512-8j4/Ouep+VxaZDaX2qRzVN/zp67mqr2jpLzR8a3q3ha80Wwi3pQxJd7nIqJCvE6ICPpPOP6RQQupngE6zThTmw==","shasum":"1ba3312468a13e761f7785c57fabe239a60fc30f","tarball":"https://registry.npmjs.org/@doramart/virtual-tree-select-vue2/-/virtual-tree-select-vue2-0.1.0.tgz","fileCount":6,"unpackedSize":146577,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIE+q1coldIOLWO+i3FIC0/hk/F+EHNlL+4y3UIbqz1UPAiEA3xECjhhxeK5UuNFdAU+/kO+WqldfTz8c4TQwE+BtzcA="}]},"_npmUser":{"name":"doramart","email":"doramart@qq.com"},"directories":{},"maintainers":[{"name":"doramart","email":"doramart@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/virtual-tree-select-vue2_0.1.0_1767530444914_0.02893972352071983"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-04T12:40:44.638Z","0.1.0":"2026-01-04T12:40:45.097Z","modified":"2026-01-04T12:40:45.487Z"},"maintainers":[{"name":"doramart","email":"doramart@qq.com"}],"description":"A high-performance virtual scrolling tree select component for Vue 2.6 with Composition API support","homepage":"https://github.com/doramart/virtual-tree-select#readme","keywords":["vue2","vue","tree","tree-select","select","virtual-scroll","virtual-list","component","ui","composition-api","performance","large-dataset"],"repository":{"type":"git","url":"git+https://github.com/doramart/virtual-tree-select.git","directory":"packages/vue2"},"author":{"name":"Virtual Tree Select Contributors"},"bugs":{"url":"https://github.com/doramart/virtual-tree-select/issues"},"license":"MIT","readme":"# @virtual-tree-select/vue2\n\n[![npm version](https://badge.fury.io/js/%40virtual-tree-select%2Fvue2.svg)](https://www.npmjs.com/package/@virtual-tree-select/vue2)\n[![license](https://img.shields.io/npm/l/@virtual-tree-select/vue2.svg)](https://github.com/doramart/virtual-tree-select/blob/main/LICENSE)\n\n> A high-performance virtual scrolling tree select component for Vue 2.6 with Composition API support\n\n## ✨ Features\n\n- 🚀 **Virtual Scrolling** - Smoothly handle 10,000+ nodes\n- 🎯 **Single/Multiple Selection** - Flexible selection modes\n- 📊 **Group Layout** - 3 layout modes (equal height, weighted, adaptive)\n- 🔍 **Search & Filter** - Quick node search\n- ⌨️ **Keyboard Navigation** - Full keyboard support\n- ⭐ **Priority Display** - Selected items shown first\n- 📈 **Parent Statistics** - Show selection count (e.g., 2/100)\n- 🎨 **Custom Rendering** - Slot-based customization\n- 🏷️ **Tag Management** - Tag display in multiple mode\n- 📍 **Smart Positioning** - Auto-adjust to screen boundaries (uses fixed positioning)\n- 💪 **TypeScript** - Full type definitions\n- 🎭 **Theme Customization** - Less variables support\n\n## 📦 Installation\n\n```bash\nnpm install @virtual-tree-select/vue2 @vue/composition-api\n```\n\nOr using yarn:\n\n```bash\nyarn add @virtual-tree-select/vue2 @vue/composition-api\n```\n\nOr using pnpm:\n\n```bash\npnpm add @virtual-tree-select/vue2 @vue/composition-api\n```\n\n## ⚠️ Important Notes\n\n### Vue Version Requirements\n\n- **Vue 2.6.x** is required (NOT 2.7.x)\n- If you're using Vue 2.7, please use [@virtual-tree-select/vue3](https://www.npmjs.com/package/@virtual-tree-select/vue3) instead\n- Lock your Vue version in package.json: `\"vue\": \"~2.6.14\"`\n\n### Required Dependencies\n\nThis package requires `@vue/composition-api` to work:\n\n```json\n{\n  \"dependencies\": {\n    \"vue\": \"~2.6.14\",\n    \"@vue/composition-api\": \"^1.7.0\",\n    \"@virtual-tree-select/vue2\": \"^0.1.0\"\n  }\n}\n```\n\n### Plugin Registration\n\nYou must register the Composition API plugin before using the component:\n\n```javascript\nimport Vue from 'vue';\nimport VueCompositionAPI from '@vue/composition-api';\n\nVue.use(VueCompositionAPI);\n```\n\n## 🚀 Quick Start\n\n### Options API\n\n```vue\n<template>\n  <VirtualTreeSelect\n    :value=\"selectedKeys\"\n    :dataSource=\"treeData\"\n    mode=\"multiple\"\n    placeholder=\"Please select\"\n    @input=\"handleChange\"\n  />\n</template>\n\n<script>\nimport Vue from 'vue';\nimport VueCompositionAPI from '@vue/composition-api';\nimport { VirtualTreeSelect } from '@virtual-tree-select/vue2';\nimport '@virtual-tree-select/vue2/style.css';\n\nVue.use(VueCompositionAPI);\n\nexport default {\n  components: {\n    VirtualTreeSelect,\n  },\n  data() {\n    return {\n      selectedKeys: [],\n      treeData: [\n        {\n          key: '1',\n          title: 'Node 1',\n          children: [\n            { key: '1-1', title: 'Child Node 1-1' },\n            { key: '1-2', title: 'Child Node 1-2' },\n          ],\n        },\n      ],\n    };\n  },\n  methods: {\n    handleChange(value) {\n      this.selectedKeys = value;\n    },\n  },\n};\n</script>\n```\n\n### Composition API\n\n```vue\n<template>\n  <VirtualTreeSelect\n    :value=\"selectedKeys\"\n    :dataSource=\"treeData\"\n    mode=\"multiple\"\n    placeholder=\"Please select\"\n    @input=\"selectedKeys = $event\"\n  />\n</template>\n\n<script>\nimport Vue from 'vue';\nimport VueCompositionAPI, { ref } from '@vue/composition-api';\nimport { VirtualTreeSelect } from '@virtual-tree-select/vue2';\nimport '@virtual-tree-select/vue2/style.css';\n\nVue.use(VueCompositionAPI);\n\nexport default {\n  components: {\n    VirtualTreeSelect,\n  },\n  setup() {\n    const selectedKeys = ref([]);\n    const treeData = ref([\n      {\n        key: '1',\n        title: 'Node 1',\n        children: [\n          { key: '1-1', title: 'Child Node 1-1' },\n          { key: '1-2', title: 'Child Node 1-2' },\n        ],\n      },\n    ]);\n\n    return {\n      selectedKeys,\n      treeData,\n    };\n  },\n};\n</script>\n```\n\n## 📖 Documentation\n\n- [API Documentation](../../docs/API.md) - Complete API reference\n- [Migration Guide](../../docs/MIGRATION_VUE2.md) - Vue 2.6 specific guide\n- [Main Repository](https://github.com/doramart/virtual-tree-select) - Source code and examples\n- [Demo](../../demo/vue2) - Live examples\n\n## 🔧 Requirements\n\n- Vue 2.6.x (NOT 2.7.x)\n- @vue/composition-api 1.7.0 or higher\n- TypeScript 5.0+ (optional, but recommended)\n\n## 🔄 Vue 2 vs Vue 3 Differences\n\n| Feature | Vue 3 | Vue 2.6 |\n|---------|-------|---------|\n| v-model | `v-model:value` | `:value` + `@input` |\n| Events | `update:value` | `input` |\n| Positioning | Teleport | Fixed positioning |\n| Dependencies | None | @vue/composition-api |\n\n### Event Handling\n\n```javascript\n// Vue 3\n<VirtualTreeSelect v-model:value=\"value\" />\n\n// Vue 2.6\n<VirtualTreeSelect :value=\"value\" @input=\"value = $event\" />\n```\n\n## 💡 Usage Examples\n\n### Single Selection Mode\n\n```vue\n<template>\n  <VirtualTreeSelect\n    :value=\"selectedKey\"\n    :dataSource=\"treeData\"\n    mode=\"single\"\n    placeholder=\"Select one item\"\n    @input=\"selectedKey = $event\"\n  />\n</template>\n```\n\n### With Search\n\n```vue\n<template>\n  <VirtualTreeSelect\n    :value=\"selectedKeys\"\n    :searchValue=\"searchText\"\n    :dataSource=\"treeData\"\n    mode=\"multiple\"\n    showSearch\n    @input=\"selectedKeys = $event\"\n    @update:searchValue=\"searchText = $event\"\n  />\n</template>\n```\n\n### Custom Node Rendering\n\n```vue\n<template>\n  <VirtualTreeSelect\n    :value=\"selectedKeys\"\n    :dataSource=\"treeData\"\n    mode=\"multiple\"\n    @input=\"selectedKeys = $event\"\n  >\n    <template #title=\"{ node }\">\n      <span :style=\"{ color: node.color }\">\n        {{ node.title }}\n      </span>\n    </template>\n  </VirtualTreeSelect>\n</template>\n```\n\n## 🤝 Contributing\n\nContributions are welcome! Please read our [Contributing Guide](../../CONTRIBUTING.md) for details.\n\n## 📄 License\n\nMIT © [Virtual Tree Select Contributors](https://github.com/doramart/virtual-tree-select/graphs/contributors)\n\n## 🔗 Related Packages\n\n- [@virtual-tree-select/vue3](https://www.npmjs.com/package/@virtual-tree-select/vue3) - Vue 3 version\n- [@virtual-tree-select/shared](https://www.npmjs.com/package/@virtual-tree-select/shared) - Shared utilities\n","readmeFilename":"README.md","_rev":"1-ac80267a7e4765f21ea8edb61bb5beb0"}