{"id":22014060,"url":"https://github.com/beeplin/vue-orgchart","last_synced_at":"2025-03-23T08:26:57.763Z","repository":{"id":143736648,"uuid":"130956987","full_name":"beeplin/vue-orgchart","owner":"beeplin","description":"A Vue component that wraps orgchart.js and supports scoped slots to customize nodes in chart","archived":false,"fork":false,"pushed_at":"2018-05-01T12:49:10.000Z","size":281,"stargazers_count":6,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T20:57:03.462Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/beeplin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-04-25T05:51:08.000Z","updated_at":"2024-08-12T06:50:48.000Z","dependencies_parsed_at":"2023-07-28T04:15:54.924Z","dependency_job_id":null,"html_url":"https://github.com/beeplin/vue-orgchart","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beeplin%2Fvue-orgchart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beeplin%2Fvue-orgchart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beeplin%2Fvue-orgchart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beeplin%2Fvue-orgchart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beeplin","download_url":"https://codeload.github.com/beeplin/vue-orgchart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245075242,"owners_count":20556897,"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","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":[],"created_at":"2024-11-30T03:26:04.721Z","updated_at":"2025-03-23T08:26:57.740Z","avatar_url":"https://github.com/beeplin.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-orgchart\n\nA Vue component that wraps [orgchart.js](https://github.com/dabeng/OrgChart.js) and supports scoped slots to customize nodes in chart.\n\n`\u003cul\u003e` support and ajax support are dropped since now you can just fetch data with your favorite ajax library like `axios`, `fetch` etc. and then pass data to this component. It will automatically repaint on data change.\n\n## see demo\n\nClone this repo and run:\n\n```bash\nyarn\nyarn dev\n```\n\n## install\n\n```bash\nnpm i @c42/vue-orgchart\n```\n\n## usage\n\n### props\n\n```js\n  {\n    data: { type: Object, required: true }, // Data to build structure of orgchart. see below.\n    vue: { type: Function, required: true }, // Vue constructor used to render nodes.\n    nodeId: { type: String, default: 'id' }, // It sets one property of data as unique identifier of every orgchart node.\n    direction: { type: String, default: 't2b' }, // The available values are t2b(implies \"top to bottom\", it's default value), b2t(implies \"bottom to top\"), l2r(implies \"left to right\"), r2l(implies \"right to left\").\n    depth: { type: Number, default: 999 }, // It indicates the level that at the very beginning orgchart is expanded to.\n    verticalDepth: { type: Number, default: 999 }, // Users can make use of this option to align the nodes vertically from the specified depth.\n    exportButton: { type: Boolean, default: true }, // It enable the export button for orgchart.\n    exportFilename: { type: String, default: 'OrgChart' }, // It's filename when you export current orgchart as a picture.\n    htmlToCanvas: { type: Function, default: () =\u003e () =\u003e {} }, // html2canvas to convert html to picture for export.\n\n    toggleSiblingsResp: { type: Boolean, default: true }, // Once enable this option, users can show/hide left/right sibling nodes respectively by clicking left/right arrow.\n    pan: { type: Boolean, default: true }, // Users could pan the orgchart by mouse drag\u0026drop if they enable this option.\n    zoom: { type: Boolean, default: true }, // Users could zoomin/zoomout the orgchart by mouse wheel if they enable this option.\n    draggable: { type: Boolean, default: true }, // Users can drag \u0026 drop the nodes of orgchart if they enable this option. **Note**: this feature doesn't work on IE due to its poor support for HTML5 drag \u0026 drop API.\n    dropCriteria: { type: Function, default: () =\u003e () =\u003e true }, // Users can construct their own criteria to limit the relationships between dragged node and drop zone. Furtherly, this function accept three arguments(draggedNode, dragZone, dropZone) and just only return boolen values.\n\n    // css classes\n    containerClass: { type: String, default: '' },\n    chartClass: { type: String, default: '' },\n    spinnertClass: { type: String, default: '' },\n    exportBtnClass: { type: String, default: '' },\n    leftArrowClass: { type: String, default: '' },\n    rightArrowClass: { type: String, default: '' },\n    upArrowClass: { type: String, default: '' },\n    downArrowClass: { type: String, default: '' },\n    commonClass: { type: String, default: '' }, // Typically `fa` if using font-awesome\n    parentNodeSymbolClass: { type: String, default: '' }, // Class of icon to imply that the node has child nodes.\n  }\n```\n\n### events\n\n`@drag`:\n\n```js\nonDrag = ({ targetId, sourceId, destinationId }) =\u003e {\n  // targetId: id of the node being dragged\n  // sourceId: id of the orignial parent node of the dragged node\n  // destinationId: id of the node that the dragged node is dropped to\n}\n```\n\n### scoped slot\n\nYou can use scoped slot to customize your node. Example:\n\n```html\n  \u003cOrgChart :data=\"chartData\"\n            :vue=\"Vue\"\n            :html-to-canvas=\"html2canvas\"\n            node-id=\"_id\"\n            ...\n            @drag=\"updateDataOnDrag\"\u003e\n    \u003cdiv slot-scope=\"{ nodeData }\"\u003e  \u003c!-- nodeData is the data of the coresponding node --\u003e\n      \u003cdiv class=\"title\"\u003e{{ nodeData.name }}\u003c/div\u003e\n      \u003cdiv @click=\"addChildNode(nodeData, $event)\"\u003eadd child\u003c/div\u003e\n      \u003cdiv @click=\"addSiblingNode(nodeData, $event)\"\u003eadd sibling\u003c/div\u003e\n      \u003cdiv @click=\"removeNode(nodeData, $event)\"\u003eremove\u003c/div\u003e\n      \u003cdiv class=\"content\"\u003ethis is #{{ nodeData._id }}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/OrgChart\u003e\n```\n\n### add/remove/move nodes\n\nJust modify the data, and the orgchart will update. See `src/App.vue` for a complete example.\n\n### css\n\n```js\nimport '@c42/vue-orgchart/lib/orgchart.css'\n```\n\nOr use your customized version.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeeplin%2Fvue-orgchart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeeplin%2Fvue-orgchart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeeplin%2Fvue-orgchart/lists"}