{"id":13810572,"url":"https://github.com/megafetis/vue3-blocks-tree","last_synced_at":"2025-07-29T01:04:49.065Z","repository":{"id":40303860,"uuid":"328681027","full_name":"megafetis/vue3-blocks-tree","owner":"megafetis","description":"A vue3 block organization tree view component. Hierarchical horizontal or vertical tree","archived":false,"fork":false,"pushed_at":"2024-05-20T15:09:56.000Z","size":392,"stargazers_count":104,"open_issues_count":6,"forks_count":22,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-07-03T10:07:03.071Z","etag":null,"topics":["next","org","organization-tree","select","tree","vue3"],"latest_commit_sha":null,"homepage":"https://megafetis.github.io/vue3-blocks-tree-demo/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/megafetis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.mit","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-11T13:58:09.000Z","updated_at":"2025-05-17T02:25:33.000Z","dependencies_parsed_at":"2024-08-04T02:05:18.077Z","dependency_job_id":null,"html_url":"https://github.com/megafetis/vue3-blocks-tree","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/megafetis/vue3-blocks-tree","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megafetis%2Fvue3-blocks-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megafetis%2Fvue3-blocks-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megafetis%2Fvue3-blocks-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megafetis%2Fvue3-blocks-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/megafetis","download_url":"https://codeload.github.com/megafetis/vue3-blocks-tree/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megafetis%2Fvue3-blocks-tree/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267612771,"owners_count":24115521,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["next","org","organization-tree","select","tree","vue3"],"created_at":"2024-08-04T02:01:00.814Z","updated_at":"2025-07-29T01:04:49.031Z","avatar_url":"https://github.com/megafetis.png","language":"Vue","funding_links":["https://www.buymeacoffee.com/megafetis"],"categories":["Packages","Vue"],"sub_categories":[],"readme":"# vue3-blocks-tree\n\n\u003e A simple organization structure tree view based on Vue3.x. It supports events, slots, horizontal vision and nodes manipulation\n\nThanks to [hukaibaihu](https://github.com/hukaibaihu/vue-org-tree) and his sources for vue 2 taken as basis.\n\n## Usage\n```vue\n\n\u003ctemplate\u003e\n    \u003ch1\u003eBasic\u003c/h1\u003e\n    \u003cdiv\u003e\n        \u003cblocks-tree :data=\"treeData\" :horizontal=\"treeOrientation=='1'\"  :collapsable=\"true\"\u003e\u003c/blocks-tree\u003e\n    \u003c/div\u003e\n\n    \u003ch1\u003eWith slots\u003c/h1\u003e\n    \u003cdiv\u003e\n        \u003cblocks-tree :data=\"treeData\" :horizontal=\"treeOrientation=='1'\" :collapsable=\"true\" :props=\"{label: 'label', expand: 'expand', children: 'children',  key:'some_id'}\"\u003e\n        \u003ctemplate #node=\"{data,context}\"\u003e\n            \u003cspan\u003e\n                \u003cinput type=\"checkbox\" :checked=\"selected.indexOf(data.some_id)\u003e -1\" @change=\"(e)=\u003etoggleSelect(data,e.target.checked)\"/\u003e {{data.label}}\n            \u003c/span\u003e\n            \u003cbr/\u003e\n            \u003cspan v-if=\"data.children \u0026\u0026 data.children.length\"\u003e\n                \u003ca href=\"#\" @click=\"context.toggleExpand\"\u003etoggle expand\u003c/a\u003e\n            \u003c/span\u003e\n        \u003c/template\u003e\n        \u003c/blocks-tree\u003e\n        \u003cdiv\u003e\n        Selected: {{selected}}\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003ch1\u003eChange orientation\u003c/h1\u003e\n    \u003cselect v-model=\"treeOrientation\"\u003e\n        \u003coption value=\"0\"\u003eVertical\u003c/option\u003e\n        \u003coption value=\"1\"\u003eHorizontal\u003c/option\u003e\n    \u003c/select\u003e\n\n\u003c/template\u003e\n\u003cscript\u003e\nimport { defineComponent,ref,reactive } from 'vue';\n\nexport default defineComponent({\n\n    setup() {\n\n        let selected = ref([]);\n        let treeOrientation = ref(\"0\");\n        let treeData = reactive({\n            label: 'root',\n            expand: true,\n            some_id: 1,\n            children: [\n                { label: 'child 1', some_id: 2, },\n                { label: 'child 2', some_id: 3, },\n                { \n                    label: 'subparent 1', \n                    some_id: 4, \n                    expand: false, \n                    children: [\n                        { label: 'subchild 1', some_id: 5 },\n                        {  \n                            label: 'subchild 2', \n                            some_id: 6, \n                            expand: false, \n                            children: [\n                                { label: 'subchild 11', some_id: 7 },\n                                { label: 'subchild 22', some_id: 8 },\n                            ]\n                        },\n                    ]\n                },\n            ]\n        });\n\n        const toggleSelect = (node, isSelected) =\u003e {\n            isSelected ? selected.value.push(node.some_id) : selected.value.splice(selected.value.indexOf(node.some_id), 1);\n            if(node.children \u0026\u0026 node.children.length) {\n                node.children.forEach(ch=\u003e{\n                    toggleSelect(ch,isSelected)\n                })\n            }\n        }\n\n        return {\n            treeData,\n            selected,\n            toggleSelect,\n            treeOrientation\n        }\n    }\n})\n\n\u003c/script\u003e\n\n```\n\n### Demo\n\n\n[https://megafetis.github.io/vue3-blocks-tree-demo]\n\n\n### NPM\n\n```\n# use npm\nnpm i vue3-blocks-tree\n\n# use yarn\nyarn add vue3-blocks-tree\n```\n### Import Plugins\n\n``` js\nimport {createApp} from 'vue';\nimport VueBlocksTree from 'vue3-blocks-tree';\nimport 'vue3-blocks-tree/dist/vue3-blocks-tree.css';\n// or import 'vue3-blocks-tree/src/styles/blocks-tree.less';\n\nlet defaultoptions = {treeName:'blocks-tree'}\n\ncreateApp(App)\n    .use(VueBlocksTree,defaultoptions)\n    // or .component('blocks-tree',VueBlocksTree)\n\n// ...\n```\n\n\n## API\n\n  api               | descripton                                                  | type\n  ------------------|-------------------------------------------------------------|:---------------------------------------------------------------------\n  node context      |  Context to node manipulation  in slot or in event callback | interface NodeContext { isExpanded():boolean;  toggleExpand():void; }\n\n\n#### props\n\n  prop              | descripton                              | type                   | default\n  ------------------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:\n  data              |                                         | `Object`               |\n  props             |  configure props                        | `Object`               | `{label: 'label', children: 'children', expand: 'expand',key: 'id'}`\n  labelWidth        |  node label width                       | `String` \\| `Number`   | `auto`\n  collapsable       |  children node is collapsable           | `Boolean`              | `true`\n  renderContent     |  how to render node label               | `Function`             |     -\n  nodeClassName     |  custom node class                      | `Function` \\| `String` |     -\n  labelClassName    |  node label class                       | `Function` \\| `String` |     -\n\n\n\n### events\n\n  event name        | descripton                              | type\n  ------------------|-----------------------------------------|:----------------------\n  node-click        |  Click event                            | `Function`\n  node-mouseover    |  onMouseOver event                      | `Function`\n  node-mouseout     |  onMouseOut event                       | `Function`\n  node-expand       |  click expand button event              | `Function`\n\n### Slots\n\n  slot name         | descripton                              | params\n  ------------------|-----------------------------------------|:----------------------\n  node              |  current node scoped slot               | data - node data, context - node context\n\n#### node-expand\nwell be called when the collapse-btn clicked\n\n- params `e` `Event`\n- params `data` `Current node data`\n- params `context` `Node context`\n\n#### node-click\nwell be called when the node-label clicked\n\n- params `e` `Event`\n- params `data` `Current node data`\n- params `context` `Node context`\n\n#### node-mouseover\nIt is called when the mouse hovers over the label.\n\n- params `e` `Event`\n- params `data` `Current node data`\n- params `context` `Node context`\n\n#### node-mouseout\nIt is called when the mouse leaves the label.\n\n- params `e` `Event`\n- params `data` `Current node data`\n- params `context` `Node context`\n\n## Example\n\n- default\n\n  ![default](./images/default.png)\n\n- horizontal\n\n  ![horizontal](./images/horizontal.png)\n\n- use node slot\n\n  ![horizontal](./images/slots.png)\n\n\n## License\n[MIT](http://opensource.org/licenses/MIT)\n\n\u003ca href=\"https://www.buymeacoffee.com/megafetis\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\" alt=\"Buy Me A Coffee\" style=\"height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;\" \u003e\u003c/a\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmegafetis%2Fvue3-blocks-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmegafetis%2Fvue3-blocks-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmegafetis%2Fvue3-blocks-tree/lists"}