{"_id":"@applaud/vue-draggable-nested-tree","name":"@applaud/vue-draggable-nested-tree","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@applaud/vue-draggable-nested-tree","version":"1.0.0","description":"A draggable tree view component for vue2","main":"dist/vue-draggable-nested-tree.cjs.js","module":"dist/vue-draggable-nested-tree.es.js","author":{"name":"Applaud"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Applaud-devpack/vue-draggable-nested-tree.git"},"scripts":{"dev":"vue-cli-service serve","build-vue":"vue-cli-service build","build":"node build/build-lib.js","lint":"vue-cli-service lint"},"dependencies":{"draggable-helper":"1.0.20","helper-js":"1.3.7","tree-helper":"1.0.5","vue":"2.5.21","vue-functions":"1.0.3"},"devDependencies":{"@vue/cli-plugin-babel":"^3.0.1","@vue/cli-plugin-eslint":"^3.0.1","@vue/cli-service":"^3.0.1","babel-eslint":"^10.0.1","eslint":"^5.8.0","eslint-plugin-vue":"^5.0.0","vue-template-compiler":"^2.5.21","pug":"^2.0.3","pug-plain-loader":"^1.0.0","bili":"^3.4.2","rollup-plugin-vue":"^4.3.2"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"gitHead":"42a8104f839d2e2b1371e56bccfd8453080bdece","bugs":{"url":"https://github.com/Applaud-devpack/vue-draggable-nested-tree/issues"},"homepage":"https://github.com/Applaud-devpack/vue-draggable-nested-tree#readme","_id":"@applaud/vue-draggable-nested-tree@1.0.0","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"mahesh_reddy","email":"applaud.devpack@gmail.com"},"dist":{"integrity":"sha512-a1rf+Mnaa1Pe1rB44bRG2CwmzsZwMVC/Wl24vhq41WfVgq3WhdRV16QfZLjgDV9CeChzlaXKBW6SjgH9SDN2NQ==","shasum":"08d438c6ef54521fd6bb3222db9c62d7884b1c86","tarball":"https://registry.npmjs.org/@applaud/vue-draggable-nested-tree/-/vue-draggable-nested-tree-1.0.0.tgz","fileCount":30,"unpackedSize":596522,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoHjkO/iXiw3ZXCNZkBb9CEfgaCrbQ3ztkbSKcWQpVqQIgAzc/p/fL7WSn1RwQ7gu8HgYaukOOY5UnoP1UShXN6UM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJilY7uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp49BAAmhSfvgEVXy/RM0/BjD99u4mP8tRuMm44CSox7hq/tuIom9e9\r\nwtzPzC41Am/AbPn+K2rHmReVpMt6XwEvGk8oXpoCM4Dso9+SDp0adXbFnh8u\r\nBKFXPVPXDSidi6rkGinOFP4UXoRR8Bowpb72X7shZVmc1g/hFFQ5kQWFkJbc\r\n8I2GM/wjHvwSuVPAX/sQX1lh/DWwwtlvSNLMSBTO5MHxUttbd5OeAuhJ405M\r\n0cvAsr//cLv3PaEcquco1PSY7AFNYrl9rDFgvVHZkV+GbNNPJx6k0hxWkWdU\r\nLa0/NAxOHVWmrfbOMIWvDvsns8Pc6KuAAJFjyD2hhM5XIdsAfSp+hXwUnEm3\r\n25AhkP+qMVyPZpy2chYHhSdl7Xiusj6nymXOmNNKDGUdEToATF3Lz/mrI0wk\r\n6XxJMLRuvTBkD89F5dP5VwPElKe66GgznkB7fwJCmy1kxuaytCEAaBeAr7vT\r\nQSKR0fQU7yXlMrGGXumYu7WPz7sNJ+GKjDQSOcchBtYh5YC04dJ5rDak8ezg\r\n5hcHg9yo/5sxYbf+2AJVN4dIvmtRoFq3c5F4oHJK+dCzgN/njCUYhi13Lvbc\r\n3kad2NPzvQwNhNmyz8AW2wTwmu6V79E1iPM98XrYKmyyjyD9ysl8vNHg6fRX\r\nkQvcq2pZzOCF2eLD2MKAt72gbY4WKDPAKso=\r\n=Mhf7\r\n-----END PGP SIGNATURE-----\r\n"},"directories":{},"maintainers":[{"name":"mahesh_reddy","email":"applaud.devpack@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-draggable-nested-tree_1.0.0_1653968622213_0.8788111536667087"},"_hasShrinkwrap":false}},"time":{"created":"2022-05-31T03:43:42.155Z","1.0.0":"2022-05-31T03:43:42.459Z","modified":"2022-05-31T03:43:42.599Z"},"maintainers":[{"name":"mahesh_reddy","email":"applaud.devpack@gmail.com"}],"description":"A draggable tree view component for vue2","homepage":"https://github.com/Applaud-devpack/vue-draggable-nested-tree#readme","repository":{"type":"git","url":"git+https://github.com/Applaud-devpack/vue-draggable-nested-tree.git"},"author":{"name":"Applaud"},"bugs":{"url":"https://github.com/Applaud-devpack/vue-draggable-nested-tree/issues"},"license":"MIT","readme":"<a name=\"vue_draggable_nested_tree\"></a>\n# vue-draggable-nested-tree vue\n\nThis is a draggable tree component. This component does not have css, you need to add your style refer to demo. The demo style is less, not difficult.\nThis component doesn't render node. It exposes a node rendering slot. Please refer to the demo for rendering.   \n\n* [demo](https://codepen.io/phphe/pen/KRapQm)\n* [ie11 example](https://github.com/phphe/vue-draggable-nested-tree/tree/master/ie11-example)\n* [English Doc](https://github.com/phphe/vue-draggable-nested-tree/blob/master/README.md)\n\n# touch\nSupport touch(single point).\n\n# Indexes\n* [vue-draggable-nested-tree](#vue_draggable_nested_tree)\n* [install](#install)\n* [usage](#usage)\n  * [import](#import)\n  * [data](#data)\n  * [template](#template)\n  * [template for old browsers(eg: IE)](#template_for_old_browsers)\n* [api](#api)\n  * [Tree props](#tree_props)\n     * [Noraml - Tree props](#noraml_tree_props)\n     * [Hooks - Tree props](#hooks_tree_props)\n     * [draggableHelperInfo: {event, options, store}](#draggable_helper_info)\n  * [Tree properties](#tree_properties)\n  * [Tree events](#tree_events)\n  * [Tree methods](#tree_methods)\n  * [node properties](#node_properties)\n   * [node deep properties example](#node_deep_properties_example)\n* [other](#other)\n  * [demo css](#demo_css)\n  * [examples](#examples)\n  * [draggable & droppable](#draggable_&_droppable)\n  * [Traverse tree](#traverse_tree)\n  * [draggable library](#draggable_library)\n\n<a name=\"install\"></a>\n# install\n```sh\nnpm i @appalud/vue-draggable-nested-tree\n```\n<a name=\"usage\"></a>\n# usage\n<a name=\"import\"></a>\n### import\n```js\nimport {DraggableTree} from '@appalud/vue-draggable-nested-tree'\n// @appalud/vue-draggable-nested-tree contains Tree, TreeNode, DraggableTree, DraggableTreeNode\n// import the component and register it as global or local component\n```\n<a name=\"data\"></a>\n### data\n```js\ndata: [\n  {text: 'node 1'},\n  {text: 'node 2'},\n  {text: 'node 3 undraggable', draggable: false},\n  {text: 'node 4'},\n  {text: 'node 4 undroppable', droppable: false},\n  {text: 'node 5', children: [\n    {text: 'node 1'},\n    {text: 'node 2', children: [\n      {text: 'node 3'},\n      {text: 'node 4'},\n    ]},\n    {text: 'node 2 undroppable', droppable: false, children: [\n      {text: 'node 3'},\n      {text: 'node 4'},\n    ]},\n    {text: 'node 2', children: [\n      {text: 'node 3'},\n      {text: 'node 4 undroppable', droppable: false},\n    ]},\n    {text: 'node 3'},\n    {text: 'node 4'},\n    {text: 'node 3'},\n    {text: 'node 4'},\n    {text: 'node 3'},\n    {text: 'node 4'},\n    {text: 'node 3'},\n    {text: 'node 4'},\n  ]},\n]\n```\n<a name=\"template\"></a>\n### template\n```pug\nTree(:data=\"data\" draggable crossTree)\n  div(slot-scope=\"{data, store, vm}\")\n    //- data is node\n    //- store is the tree\n    //- vm is node Vue instance, you can get node level by vm.level\n    template(v-if=\"!data.isDragPlaceHolder\")\n      b(v-if=\"data.children && data.children.length\" @click=\"store.toggleOpen(data)\") {{data.open ? '-' : '+'}}&nbsp;\n      span {{data.text}}\n```\n<a name=\"template_for_old_browsers\"></a>\n### template for old browsers(eg: IE)\n```pug\n//- slot-scope=\"{data, store, vm}\" may not work in old browsers, replace with slot-scope=\"slot\"\nTree(:data=\"data\" draggable crossTree)\n  div(slot-scope=\"slot\")\n    //- data is node\n    //- store is the tree\n    //- vm is node Vue instance, you can get node level by vm.level\n    template(v-if=\"!slot.data.isDragPlaceHolder\")\n      b(v-if=\"slot.data.children && slot.data.children.length\" @click=\"slot.store.toggleOpen(slot.data)\") {{slot.data.open ? '-' : '+'}}&nbsp;\n      span {{slot.data.text}}\n```\n<a name=\"api\"></a>\n# api\n**The 'store' is the tree vm**\n<a name=\"tree_props\"></a>\n### Tree props\n<a name=\"noraml_tree_props\"></a>\n###### Noraml - Tree props\n```js\n// base tree\ndata: {}, // type Array\nindent: {default: 16},\nactivatedClass: {default: 'active'},\nopenedClass: {default: 'open'},\nspace: {default: 10}, // space between node, unit px\n// draggable tree\npreventSelect: {default: true}, // if to prevent drag handler text be selected when drag, excluding input and textarea\ngetTriggerEl: {type: Function}, // get the el trigger drag, default is node self. arguments(nodeVm)\ndraggable: {}, // is the tree draggable, default false\ndroppable: {default: true}, // is the tree droppable, default true\ncrossTree: {}, // can a node of the tree be dragged into other tree, or receive other tree node\n```\n<a name=\"hooks_tree_props\"></a>\n###### Hooks - Tree props\n```js\nondragstart: {type: Function}, // hook. return false to prevent drag. arguments(node, draggableHelperInfo)\nondragend: {type: Function}, // hook. return false to prevent drop. arguments(node, draggableHelperInfo)\n```\n<a name=\"draggable_helper_info\"></a>\n###### draggableHelperInfo\n{event, options, store}\n<a name=\"tree_properties\"></a>\n### Tree properties\n```js\n// base\nrootData, // generated by tree\n// draggable\ndplh, // drag placeholder. globally unique.\ntrees, // array, all trees in the app. globally unique.\n```\n<a name=\"tree_events\"></a>\n### Tree events\n```js\n// store is the tree vm\ndrag(node), // on drag start.\ndrop(node, targetTree, oldTree), // after drop.\nchange(node, targetTree, oldTree), // after drop, only when the node position changed\nnodeOpenChanged(node) // on a node is closed or open\n```\n* targetTree and oldTree are tree vm.\n* oldTree is available only when cross tree. Otherwise null.\n* if cross tree, both targetTree and oldTree will emit drop and change.\n\n<a name=\"tree_methods\"></a>\n### Tree methods\n```js\npure(node, withChildren, after)\n/*\npure\nreturn a node data without runtime properties.(!: property which starts with '_' will be removed)\nwithChildren: optional. after: Function, optional\nthe code about after(t is computed node data):\nif (after) {\n  return after(t, node) || t\n}\nreturn t\n*/\ngetNodeById(id)\ngetActivated()\ngetOpened()\nactiveNode(node, inactiveOld)\ntoggleActive(node, inactiveOld)\nopenNode(node, closeOld)\ntoggleOpen(node, closeOld)\n// follow methods are easy, so I paste their soure code\ngetPureData(after) { return this.pure(this.rootData, true, after).children } // after: Function, optional\ndeleteNode(node) { return hp.arrayRemove(node.parent.children, node) }\n// add node: like array. eg: node.children.push(newNodeData)\n// update node: just assign to the node properties directly\nisNodeDraggable(node)\nisNodeDroppable(node)\n```\n<a name=\"node_properties\"></a>\n### node properties\n```js\n// base\n_id\n_vm\nparent\nchildren: [],\nopen,\nactive: false,\nstyle: {},\nclass: '',\ninnerStyle: {},\ninnerClass: '',\ninnerBackStyle: {},\ninnerBackClass: {},\n// draggable\ndraggable // default true. Please check 'draggable & droppable' below\ndroppable // default true. Please check 'draggable & droppable' below\nisDragPlaceHolder\n```\n<a name=\"node_deep_properties_example\"></a>\n#### node deep properties example\n```js\nnode._vm // vm\nnode._vm.level // 节点层级, 只读\nnode._vm.store // tree\nnode.parent._vm // parent node vm\nnode._vm.store\n```\n<a name=\"other\"></a>\n# other\n<a name=\"demo_css\"></a>\n### demo css\n```css\n.he-tree{\n  border: 1px solid #ccc;\n  padding: 20px;\n  width: 300px;\n}\n.tree-node{\n}\n.tree-node-inner{\n  padding: 5px;\n  border: 1px solid #ccc;\n  cursor: pointer;\n}\n.draggable-placeholder{\n}\n.draggable-placeholder-inner{\n  border: 1px dashed #0088F8;\n  box-sizing: border-box;\n  background: rgba(0, 136, 249, 0.09);\n  color: #0088f9;\n  text-align: center;\n  padding: 0;\n  display: flex;\n  align-items: center;\n}\n```\n<a name=\"examples\"></a>\n### examples\nclone the package, and\n```sh\nnpm install\nnpm run dev\n```\n* [Base](https://github.com/phphe/vue-draggable-nested-tree/blob/master/src/examples/Base.vue)\n* [MaxLevel](https://github.com/phphe/vue-draggable-nested-tree/blob/master/src/examples/MaxLevel.vue)\n\n<a name=\"draggable_&_droppable\"></a>\n### draggable & droppable\nA node is default draggable and droppable. You can set draggable and droppable property of a node. The another way is listen event 'drag', traverse all data to set draggable or droppable property.\n<a name=\"traverse_tree\"></a>\n### Traverse tree\nRecommend to use my other library [tree-helper](https://github.com/phphe/tree-helper). It has 2 traverse methods: depthFirstSearch, breadthFirstSearch.\n<a name=\"draggable_library\"></a>\n### draggable library\n[draggable-helper](https://github.com/phphe/draggable-helper) is my another library for drag. And it also is using by this component. You can use it to help you drag functions.\n","readmeFilename":"README.md"}