├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
└── src
    ├── App.vue
    ├── components
        ├── OrganizationChartContainer.vue
        ├── OrganizationChartNode.vue
        └── index.js
    └── main.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Xuebin Dong
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ![OrgChart](http://dabeng.github.io/OrgChart/img/heading.svg)
  2 | 
  3 | # [jQuery Version](https://github.com/dabeng/OrgChart)
  4 | # [ES6 Version](http://github.com/dabeng/OrgChart.js)
  5 | # [Web Components Version](http://github.com/dabeng/OrgChart-Webcomponents)
  6 | # [Angular Version -- the most space-saving solution](https://github.com/dabeng/ng-orgchart)
  7 | # [React Version](https://github.com/dabeng/react-orgchart)
  8 | 
  9 | ## Foreword
 10 | - First of all, thanks a lot for [wesnolte](https://github.com/wesnolte)'s great work:blush: -- [jOrgChart](https://github.com/wesnolte/jOrgChart). The thought that using nested tables to build out the tree-like orgonization chart is amazing. This idea is more simple and direct than its counterparts based on svg
 11 | - Unfortunately, it's long time not to see the update of jOrgChart. on the other hand, I got some interesting ideas to add, so I choose to create a new repo.
 12 | 
 13 | ## Features
 14 | - For now, just static organization chart
 15 | 
 16 | # Installation
 17 | ```
 18 | npm install vue-organization-chart -S
 19 | ```
 20 | # [Demos](https://codesandbox.io/dashboard/sandboxes/Vue%20OrgChart)
 21 | 
 22 | # Usage
 23 | ```html
 24 | <template>
 25 |   <div>
 26 |     <organization-chart :datasource="ds"></organization-chart>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 |   import Vue from 'vue'
 32 |   import OrganizationChart from 'vue-organization-chart'
 33 |   import 'vue-organization-chart/dist/orgchart.css'
 34 | 
 35 |   export default {
 36 |     components: {
 37 |       OrganizationChart
 38 |     },
 39 |     data () {
 40 |       return {
 41 |         ds: {
 42 |           'id': '1',
 43 |           'name': 'Lao Lao',
 44 |           'title': 'general manager',
 45 |           'children': [
 46 |             { 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
 47 |             { 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
 48 |               'children': [
 49 |                 { 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
 50 |                 { 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
 51 |                   'children': [
 52 |                     { 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
 53 |                     { 'id': '7', 'name': 'Xiang Xiang', 'title': 'UE engineer' }
 54 |                   ]
 55 |                  }
 56 |                ]
 57 |              },
 58 |             { 'id': '8', 'name': 'Hong Miao', 'title': 'department manager' },
 59 |             { 'id': '9', 'name': 'Chun Miao', 'title': 'department manager' }
 60 |           ]
 61 |         }
 62 |       }
 63 |     }
 64 |   }
 65 | </script>
 66 | ```
 67 | 
 68 | # Attributes
 69 | <table>
 70 |   <thead>
 71 |     <tr><th>Name</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr>
 72 |   </thead>
 73 |   <tbody>
 74 |     <tr>
 75 |       <td>datasource</td><td>json</td><td>yes</td><td></td><td>datasource usded to build out structure of orgchart. It could be a json object.</td>
 76 |     </tr>
 77 |     <tr>
 78 |       <td>pan</td><td>boolean</td><td>no</td><td>false</td><td>Users could pan the orgchart by mouse drag&drop if they enable this attribute.</td>
 79 |     </tr>
 80 |     <tr>
 81 |       <td>zoom</td><td>boolean</td><td>no</td><td>false</td><td>Users could zoomin/zoomout the orgchart by mouse wheel if they enable this attribute.</td>
 82 |     </tr>
 83 |     <tr>
 84 |       <td>zoomin-limit</td><td>number</td><td>no</td><td>7</td><td>Users are allowed to set a zoom-in limit.</td>
 85 |     </tr>
 86 |     <tr>
 87 |       <td>zoomout-limit</td><td>number</td><td>no</td><td>0.5</td><td>Users are allowed to set a zoom-out limit.</td>
 88 |     </tr>
 89 |   </tbody>
 90 | </table>
 91 | 
 92 | # Events
 93 | <table>
 94 |   <thead>
 95 |     <tr><th>Name</th><th>Parameters</th><th>Description</th></tr>
 96 |   </thead>
 97 |   <tbody>
 98 |     <tr>
 99 |       <td>node-click</td><td>node data</td><td>triggers when user clicks the node.</td>
100 |     </tr>
101 |   </tbody>
102 | </table>
103 | 
104 | # Scoped Slots
105 | ```html
106 | <template slot-scope="{ nodeData }">
107 |   <!-- feel free to customize the internal structure of node -->
108 | </template>
109 | ```
110 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-organization-chart",
 3 |   "version": "1.1.6",
 4 |   "description": "organization chart component based vuejs",
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "build-component": "vue-cli-service build --target lib --name orgchart ./src/components/index.js",
 9 |     "lint": "vue-cli-service lint"
10 |   },
11 |   "main": "./dist/orgchart.umd.min.js",
12 |   "files": [
13 |     "dist"
14 |   ],
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "https://github.com/dabeng/vue-orgchart.git"
18 |   },
19 |   "keywords": [
20 |     "vuejs",
21 |     "organization",
22 |     "chart",
23 |     "orgchart",
24 |     "tree",
25 |     "tree-like",
26 |     "tree-view"
27 |   ],
28 |   "author": "dabeng <dabeng413@gmail.com>",
29 |   "license": "MIT",
30 |   "dependencies": {
31 |     "jquery": "^3.3.1",
32 |     "vue": "^2.5.17"
33 |   },
34 |   "devDependencies": {
35 |     "@vue/cli-plugin-babel": "^3.0.4",
36 |     "@vue/cli-plugin-eslint": "^3.0.4",
37 |     "@vue/cli-service": "^3.0.4",
38 |     "vue-template-compiler": "^2.5.17"
39 |   },
40 |   "eslintConfig": {
41 |     "root": true,
42 |     "env": {
43 |       "node": true
44 |     },
45 |     "extends": [
46 |       "plugin:vue/essential",
47 |       "eslint:recommended"
48 |     ],
49 |     "rules": {},
50 |     "parserOptions": {
51 |       "parser": "babel-eslint"
52 |     }
53 |   },
54 |   "postcss": {
55 |     "plugins": {
56 |       "autoprefixer": {}
57 |     }
58 |   },
59 |   "browserslist": [
60 |     "> 1%",
61 |     "last 2 versions",
62 |     "not ie <= 8"
63 |   ]
64 | }
65 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dabeng/vue-orgchart/a5999f29a5503e2cbe5927e243e4a0411a2b1cce/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-orgchart</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-orgchart doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <org-chart :datasource="ds" @node-click="selectNode">
 4 | <!--       <template slot-scope="{ nodeData }">
 5 |         <b @click="selectNode(nodeData)">{{ nodeData.name }}</b>
 6 |       </template> -->
 7 |     </org-chart>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import OrgChart from './components/OrganizationChartContainer.vue'
13 | 
14 | export default {
15 |   name: 'app',
16 |   components: {
17 |     OrgChart
18 |   },
19 |   data () {
20 |     return {
21 |       ds: {
22 |         'id': '1',
23 |         'name': 'Lao Lao',
24 |         'title': 'general manager',
25 |         'children': [
26 |           { 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
27 |           { 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
28 |             'children': [
29 |               { 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
30 |               { 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
31 |                 'children': [
32 |                   { 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
33 |                   { 'id': '7', 'name': 'Xiang Xiang', 'title': 'UE engineer' }
34 |                 ]
35 |                }
36 |              ]
37 |            },
38 |           { 'id': '8', 'name': 'Hong Miao', 'title': 'department manager' },
39 |           { 'id': '9', 'name': 'Chun Miao', 'title': 'department manager' }
40 |         ]
41 |       }
42 |     }
43 |   },
44 |   methods: {
45 |     selectNode (nodeData) {
46 |       alert('node ' + nodeData.name + ' is selected')
47 |     }
48 |   }
49 | }
50 | </script>
51 | 
52 | <style>
53 | #app {
54 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
55 |   -webkit-font-smoothing: antialiased;
56 |   -moz-osx-font-smoothing: grayscale;
57 |   text-align: center;
58 |   color: #2c3e50;
59 | }
60 | </style>
61 | 


--------------------------------------------------------------------------------
/src/components/OrganizationChartContainer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-bind="{ scopedSlots: $scopedSlots }"
  3 |     class="orgchart-container"
  4 |     @wheel="zoom && zoomHandler($event)"
  5 |     @mouseup="pan && panning && panEndHandler($event)"
  6 |   >
  7 |     <div
  8 |       class="orgchart"
  9 |       :style="{ transform: transformVal, cursor: cursorVal }"
 10 |       @mousedown="pan && panStartHandler($event)"
 11 |       @mousemove="pan && panning && panHandler($event)"
 12 |     >
 13 |       <organization-chart-node :datasource="datasource" :handle-click="handleClick">
 14 |         <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope">
 15 |           <slot :name="slot" v-bind="scope"/>
 16 |         </template>
 17 |       </organization-chart-node>
 18 |     </div>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script>
 23 | import $ from 'jquery'
 24 | import OrganizationChartNode from './OrganizationChartNode.vue'
 25 | 
 26 | export default {
 27 |   name: 'Container',
 28 |   props: {
 29 |     datasource: {
 30 |       type: Object,
 31 |       required: true
 32 |     },
 33 |     pan: {
 34 |       type: Boolean,
 35 |       required: false
 36 |     },
 37 |     zoom: {
 38 |       type: Boolean,
 39 |       required: false
 40 |     },
 41 |     zoomoutLimit: {
 42 |       type: Number,
 43 |       required: false,
 44 |       default: 0.5
 45 |     },
 46 |     zoominLimit: {
 47 |       type: Number,
 48 |       required: false,
 49 |       default: 7
 50 |     }
 51 |   },
 52 |   data () {
 53 |     return {
 54 |       cursorVal: 'default',
 55 |       panning: false,
 56 |       startX: 0,
 57 |       startY: 0,
 58 |       transformVal: ''
 59 |     }
 60 |   },
 61 |   components: {
 62 |     OrganizationChartNode
 63 |   },
 64 |   methods: {
 65 |     handleClick (nodeData) {
 66 |       this.$emit('node-click', nodeData);
 67 |     },
 68 |     panEndHandler () {
 69 |       this.panning = false
 70 |       this.cursorVal = 'default'
 71 |     },
 72 |     panHandler (e) {
 73 |         let newX = 0
 74 |         let newY = 0
 75 |         if (!e.targetTouches) { // pand on desktop
 76 |           newX = e.pageX - this.startX
 77 |           newY = e.pageY - this.startY
 78 |         } else if (e.targetTouches.length === 1) { // pan on mobile device
 79 |           newX = e.targetTouches[0].pageX - this.startX
 80 |           newY = e.targetTouches[0].pageY - this.startY
 81 |         } else if (e.targetTouches.length > 1) {
 82 |           return;
 83 |         }
 84 |         if (this.transformVal === '') {
 85 |           if (this.transformVal.indexOf('3d') === -1) {
 86 |             this.transformVal = 'matrix(1,0,0,1,' + newX + ',' + newY + ')'
 87 |           } else {
 88 |             this.transformVal = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,' + newX + ', ' + newY + ',0,1)'
 89 |           }
 90 |         } else {
 91 |           let matrix = this.transformVal.split(',')
 92 |           if (this.transformVal.indexOf('3d') === -1) {
 93 |             matrix[4] = newX
 94 |             matrix[5] = newY + ')'
 95 |           } else {
 96 |             matrix[12] = newX
 97 |             matrix[13] = newY
 98 |           }
 99 |           this.transformVal = matrix.join(',')
100 |         }
101 |     },
102 |     panStartHandler (e) {
103 |       if ($(e.target).closest('.node').length) {
104 |         this.panning = false
105 |         return
106 |       } else {
107 |         this.cursorVal = 'move'
108 |         this.panning = true
109 |       }
110 |       let lastX = 0
111 |       let lastY = 0
112 |       if (this.transformVal !== '') {
113 |         let matrix = this.transformVal.split(',')
114 |         if (this.transformVal.indexOf('3d') === -1) {
115 |           lastX = parseInt(matrix[4])
116 |           lastY = parseInt(matrix[5])
117 |         } else {
118 |           lastX = parseInt(matrix[12])
119 |           lastY = parseInt(matrix[13])
120 |         }
121 |       }
122 |       if (!e.targetTouches) { // pand on desktop
123 |         this.startX = e.pageX - lastX
124 |         this.startY = e.pageY - lastY
125 |       } else if (e.targetTouches.length === 1) { // pan on mobile device
126 |         this.startX = e.targetTouches[0].pageX - lastX
127 |         this.startY = e.targetTouches[0].pageY - lastY
128 |       } else if (e.targetTouches.length > 1) {
129 |         return
130 |       }
131 |     },
132 |     setChartScale (newScale) {
133 |       let matrix = ''
134 |       let targetScale = 1
135 |       if (this.transformVal === '') {
136 |         this.transformVal = 'matrix(' + newScale + ', 0, 0, ' + newScale + ', 0, 0)'
137 |       } else {
138 |         matrix = this.transformVal.split(',')
139 |         if (this.transformVal.indexOf('3d') === -1) {
140 |           targetScale = Math.abs(window.parseFloat(matrix[3]) * newScale)
141 |           if (targetScale > this.zoomoutLimit && targetScale < this.zoominLimit) {
142 |             matrix[0] = 'matrix(' + targetScale
143 |             matrix[3] = targetScale
144 |             this.transformVal = matrix.join(',')
145 |           }
146 |         } else {
147 |           targetScale = Math.abs(window.parseFloat(matrix[5]) * newScale)
148 |           if (targetScale > this.zoomoutLimit && targetScale < this.zoominLimit) {
149 |             matrix[0] = 'matrix3d(' + targetScale
150 |             matrix[5] = targetScale
151 |             this.transformVal = matrix.join(',')
152 |           }
153 |         }
154 |       }
155 |     },
156 |     zoomHandler (e) {
157 |       let newScale  = 1 + (e.deltaY > 0 ? -0.2 : 0.2)
158 |       this.setChartScale(newScale)
159 |     }
160 |   }
161 | };
162 | </script>
163 | 
164 | <style>
165 | .orgchart-container {
166 |   position: relative;
167 |   display: inline-block;
168 |   height: 420px;
169 |   width: calc(100% - 24px);
170 |   border: 2px dashed #aaa;
171 |   border-radius: 5px;
172 |   overflow: auto;
173 |   text-align: center;
174 | }
175 | .orgchart {
176 |   box-sizing: border-box;
177 |   display: inline-block;
178 |   min-height: 202px;
179 |   min-width: 202px;
180 |   -webkit-touch-callout: none;
181 |   -webkit-user-select: none;
182 |   -khtml-user-select: none;
183 |   -moz-user-select: none;
184 |   -ms-user-select: none;
185 |   user-select: none;
186 |   background-image: linear-gradient(
187 |       90deg,
188 |       rgba(200, 0, 0, 0.15) 10%,
189 |       rgba(0, 0, 0, 0) 10%
190 |     ),
191 |     linear-gradient(rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
192 |   background-size: 10px 10px;
193 |   border: 1px dashed rgba(0, 0, 0, 0);
194 |   padding: 20px;
195 | }
196 | 
197 | .orgchart .hidden,
198 | .orgchart ~ .hidden {
199 |   display: none;
200 | }
201 | 
202 | .orgchart.b2t {
203 |   transform: rotate(180deg);
204 | }
205 | 
206 | .orgchart.l2r {
207 |   position: absolute;
208 |   transform: rotate(-90deg) rotateY(180deg);
209 |   transform-origin: left top;
210 | }
211 | 
212 | .orgchart .verticalNodes ul {
213 |   list-style: none;
214 |   margin: 0;
215 |   padding-left: 18px;
216 |   text-align: left;
217 | }
218 | .orgchart .verticalNodes ul:first-child {
219 |   margin-top: 2px;
220 | }
221 | .orgchart .verticalNodes > td::before {
222 |   content: "";
223 |   border: 1px solid rgba(217, 83, 79, 0.8);
224 | }
225 | .orgchart .verticalNodes > td > ul > li:first-child::before {
226 |   box-sizing: border-box;
227 |   top: -4px;
228 |   height: 30px;
229 |   width: calc(50% - 2px);
230 |   border-width: 2px 0 0 2px;
231 | }
232 | .orgchart .verticalNodes ul > li {
233 |   position: relative;
234 | }
235 | .orgchart .verticalNodes ul > li::before,
236 | .orgchart .verticalNodes ul > li::after {
237 |   box-sizing: border-box;
238 |   content: "";
239 |   position: absolute;
240 |   left: -6px;
241 |   border-color: rgba(217, 83, 79, 0.8);
242 |   border-style: solid;
243 |   border-width: 0 0 2px 2px;
244 | }
245 | .orgchart .verticalNodes ul > li::before {
246 |   top: -4px;
247 |   height: 30px;
248 |   width: 11px;
249 | }
250 | .orgchart .verticalNodes ul > li::after {
251 |   top: 1px;
252 |   height: 100%;
253 | }
254 | .orgchart .verticalNodes ul > li:first-child::after {
255 |   box-sizing: border-box;
256 |   top: 24px;
257 |   width: 11px;
258 |   border-width: 2px 0 0 2px;
259 | }
260 | .orgchart .verticalNodes ul > li:last-child::after {
261 |   box-sizing: border-box;
262 |   border-width: 2px 0 0;
263 | }
264 | 
265 | .orgchart.r2l {
266 |   position: absolute;
267 |   transform: rotate(90deg);
268 |   transform-origin: left top;
269 | }
270 | 
271 | .orgchart > .spinner {
272 |   font-size: 100px;
273 |   margin-top: 30px;
274 |   color: rgba(68, 157, 68, 0.8);
275 | }
276 | 
277 | .orgchart table {
278 |   border-spacing: 0;
279 |   border-collapse: separate;
280 | }
281 | 
282 | .orgchart > table:first-child {
283 |   margin: 20px auto;
284 | }
285 | 
286 | .orgchart td {
287 |   text-align: center;
288 |   vertical-align: top;
289 |   padding: 0;
290 | }
291 | 
292 | .orgchart .lines:nth-child(3) td {
293 |   box-sizing: border-box;
294 |   height: 20px;
295 | }
296 | 
297 | .orgchart .lines .topLine {
298 |   border-top: 2px solid rgba(217, 83, 79, 0.8);
299 | }
300 | 
301 | .orgchart .lines .rightLine {
302 |   border-right: 1px solid rgba(217, 83, 79, 0.8);
303 |   float: none;
304 |   border-radius: 0;
305 | }
306 | 
307 | .orgchart .lines .leftLine {
308 |   border-left: 1px solid rgba(217, 83, 79, 0.8);
309 |   float: none;
310 |   border-radius: 0;
311 | }
312 | 
313 | .orgchart .lines .downLine {
314 |   background-color: rgba(217, 83, 79, 0.8);
315 |   margin: 0 auto;
316 |   height: 20px;
317 |   width: 2px;
318 |   float: none;
319 | }
320 | 
321 | /* node styling */
322 | .orgchart .node {
323 |   box-sizing: border-box;
324 |   display: inline-block;
325 |   position: relative;
326 |   margin: 0;
327 |   padding: 3px;
328 |   border: 2px dashed transparent;
329 |   text-align: center;
330 |   width: 130px;
331 | }
332 | 
333 | .orgchart.l2r .node,
334 | .orgchart.r2l .node {
335 |   width: 50px;
336 |   height: 130px;
337 | }
338 | 
339 | .orgchart .node > .spinner {
340 |   position: absolute;
341 |   top: calc(50% - 15px);
342 |   left: calc(50% - 15px);
343 |   vertical-align: middle;
344 |   font-size: 30px;
345 |   color: rgba(68, 157, 68, 0.8);
346 | }
347 | 
348 | .orgchart .node:hover {
349 |   background-color: rgba(238, 217, 54, 0.5);
350 |   transition: 0.5s;
351 |   cursor: default;
352 |   z-index: 20;
353 | }
354 | 
355 | .orgchart .node.focused {
356 |   background-color: rgba(238, 217, 54, 0.5);
357 | }
358 | 
359 | .orgchart .ghost-node {
360 |   position: fixed;
361 |   left: -10000px;
362 |   top: -10000px;
363 | }
364 | 
365 | .orgchart .ghost-node rect {
366 |   fill: #ffffff;
367 |   stroke: #bf0000;
368 | }
369 | 
370 | .orgchart .node.allowedDrop {
371 |   border-color: rgba(68, 157, 68, 0.9);
372 | }
373 | 
374 | .orgchart .node .title {
375 |   text-align: center;
376 |   font-size: 12px;
377 |   font-weight: bold;
378 |   height: 20px;
379 |   line-height: 20px;
380 |   overflow: hidden;
381 |   text-overflow: ellipsis;
382 |   white-space: nowrap;
383 |   background-color: rgba(217, 83, 79, 0.8);
384 |   color: #fff;
385 |   border-radius: 4px 4px 0 0;
386 | }
387 | 
388 | .orgchart.b2t .node .title {
389 |   transform: rotate(-180deg);
390 |   transform-origin: center bottom;
391 | }
392 | 
393 | .orgchart.l2r .node .title {
394 |   transform: rotate(-90deg) translate(-40px, -40px) rotateY(180deg);
395 |   transform-origin: bottom center;
396 |   width: 120px;
397 | }
398 | 
399 | .orgchart.r2l .node .title {
400 |   transform: rotate(-90deg) translate(-40px, -40px);
401 |   transform-origin: bottom center;
402 |   width: 120px;
403 | }
404 | 
405 | .orgchart .node .title .symbol {
406 |   float: left;
407 |   margin-top: 4px;
408 |   margin-left: 2px;
409 | }
410 | 
411 | .orgchart .node .content {
412 |   box-sizing: border-box;
413 |   width: 100%;
414 |   height: 20px;
415 |   font-size: 11px;
416 |   line-height: 18px;
417 |   border: 1px solid rgba(217, 83, 79, 0.8);
418 |   border-radius: 0 0 4px 4px;
419 |   text-align: center;
420 |   background-color: #fff;
421 |   color: #333;
422 |   overflow: hidden;
423 |   text-overflow: ellipsis;
424 |   white-space: nowrap;
425 | }
426 | 
427 | .orgchart.b2t .node .content {
428 |   transform: rotate(180deg);
429 |   transform-origin: center top;
430 | }
431 | 
432 | .orgchart.l2r .node .content {
433 |   transform: rotate(-90deg) translate(-40px, -40px) rotateY(180deg);
434 |   transform-origin: top center;
435 |   width: 120px;
436 | }
437 | 
438 | .orgchart.r2l .node .content {
439 |   transform: rotate(-90deg) translate(-40px, -40px);
440 |   transform-origin: top center;
441 |   width: 120px;
442 | }
443 | 
444 | .orgchart .node .edge {
445 |   font-size: 15px;
446 |   position: absolute;
447 |   color: rgba(68, 157, 68, 0.5);
448 |   cursor: default;
449 |   transition: 0.2s;
450 | }
451 | 
452 | .orgchart.noncollapsable .node .edge {
453 |   display: none;
454 | }
455 | 
456 | .orgchart .edge:hover {
457 |   color: #449d44;
458 |   cursor: pointer;
459 | }
460 | 
461 | .orgchart .node .verticalEdge {
462 |   width: calc(100% - 10px);
463 |   width: -webkit-calc(100% - 10px);
464 |   width: -moz-calc(100% - 10px);
465 |   left: 5px;
466 | }
467 | 
468 | .orgchart .node .topEdge {
469 |   top: -4px;
470 | }
471 | 
472 | .orgchart .node .bottomEdge {
473 |   bottom: -4px;
474 | }
475 | 
476 | .orgchart .node .horizontalEdge {
477 |   width: 15px;
478 |   height: calc(100% - 10px);
479 |   height: -webkit-calc(100% - 10px);
480 |   height: -moz-calc(100% - 10px);
481 |   top: 5px;
482 | }
483 | 
484 | .orgchart .node .rightEdge {
485 |   right: -4px;
486 | }
487 | 
488 | .orgchart .node .leftEdge {
489 |   left: -4px;
490 | }
491 | 
492 | .orgchart .node .horizontalEdge::before {
493 |   position: absolute;
494 |   top: calc(50% - 7px);
495 | }
496 | 
497 | .orgchart .node .rightEdge::before {
498 |   right: 3px;
499 | }
500 | 
501 | .orgchart .node .leftEdge::before {
502 |   left: 3px;
503 | }
504 | 
505 | .orgchart .node .toggleBtn {
506 |   position: absolute;
507 |   left: 5px;
508 |   bottom: -2px;
509 |   color: rgba(68, 157, 68, 0.6);
510 | }
511 | 
512 | .orgchart .node .toggleBtn:hover {
513 |   color: rgba(68, 157, 68, 0.8);
514 | }
515 | 
516 | .oc-export-btn {
517 |   display: inline-block;
518 |   position: absolute;
519 |   right: 5px;
520 |   top: 5px;
521 |   padding: 6px 12px;
522 |   margin-bottom: 0;
523 |   font-size: 14px;
524 |   font-weight: 400;
525 |   line-height: 1.42857143;
526 |   text-align: center;
527 |   white-space: nowrap;
528 |   vertical-align: middle;
529 |   touch-action: manipulation;
530 |   cursor: pointer;
531 |   user-select: none;
532 |   color: #fff;
533 |   background-color: #5cb85c;
534 |   border: 1px solid transparent;
535 |   border-color: #4cae4c;
536 |   border-radius: 4px;
537 | }
538 | 
539 | .oc-export-btn[disabled] {
540 |   cursor: not-allowed;
541 |   box-shadow: none;
542 |   opacity: 0.3;
543 | }
544 | 
545 | .oc-export-btn:hover,
546 | .oc-export-btn:focus,
547 | .oc-export-btn:active {
548 |   background-color: #449d44;
549 |   border-color: #347a34;
550 | }
551 | 
552 | .orgchart ~ .mask {
553 |   position: absolute;
554 |   top: 0;
555 |   right: 0;
556 |   bottom: 0;
557 |   left: 0;
558 |   z-index: 999;
559 |   text-align: center;
560 |   background-color: rgba(0, 0, 0, 0.3);
561 | }
562 | 
563 | .orgchart ~ .mask .spinner {
564 |   position: absolute;
565 |   top: calc(50% - 54px);
566 |   left: calc(50% - 54px);
567 |   color: rgba(255, 255, 255, 0.8);
568 |   font-size: 108px;
569 | }
570 | 
571 | .orgchart .node {
572 |   transition: transform 0.3s, opacity 0.3s;
573 | }
574 | 
575 | .orgchart .slide-down {
576 |   opacity: 0;
577 |   transform: translateY(40px);
578 | }
579 | 
580 | .orgchart.l2r .node.slide-down,
581 | .orgchart.r2l .node.slide-down {
582 |   transform: translateY(130px);
583 | }
584 | 
585 | .orgchart .slide-up {
586 |   opacity: 0;
587 |   transform: translateY(-40px);
588 | }
589 | 
590 | .orgchart.l2r .node.slide-up,
591 | .orgchart.r2l .node.slide-up {
592 |   transform: translateY(-130px);
593 | }
594 | 
595 | .orgchart .slide-right {
596 |   opacity: 0;
597 |   transform: translateX(130px);
598 | }
599 | 
600 | .orgchart.l2r .node.slide-right,
601 | .orgchart.r2l .node.slide-right {
602 |   transform: translateX(40px);
603 | }
604 | 
605 | .orgchart .slide-left {
606 |   opacity: 0;
607 |   transform: translateX(-130px);
608 | }
609 | 
610 | .orgchart.l2r .node.slide-left,
611 | .orgchart.r2l .node.slide-left {
612 |   transform: translateX(-40px);
613 | }
614 | </style>
615 | 


--------------------------------------------------------------------------------
/src/components/OrganizationChartNode.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <table>
 3 |     <tbody>
 4 |       <tr>
 5 |        <td :colspan="datasource.children && datasource.children.length ? datasource.children.length*2 : null">
 6 |         <div class="node" :id="datasource.id" @click.stop="handleClick(datasource)">
 7 |           <slot :node-data="datasource">
 8 |             <div class="title">
 9 |               <i class="fa fa-users symbol"></i>
10 |               {{ datasource.name }}
11 |             </div>
12 |             <div class="content">{{ datasource.title }}</div>
13 |           </slot>
14 |         </div>
15 |        </td>
16 |       </tr>
17 |       <template v-if="datasource.children && datasource.children.length">
18 |         <tr class="lines">
19 |           <td :colspan="datasource.children.length*2">
20 |             <div class="downLine"></div>
21 |           </td>
22 |         </tr>
23 |         <tr class="lines">
24 |           <td class="rightLine"></td>
25 |          <template v-for="n in (datasource.children.length-1)">
26 |             <td class="leftLine topLine"></td>
27 |             <td class="rightLine topLine"></td>
28 |          </template>
29 |           <td class="leftLine"></td>
30 |         </tr>
31 |         <tr class="nodes">
32 |           <td colspan="2" v-for="child in datasource.children" :key="child.id">
33 |             <node :datasource="child" :handle-click="handleClick">
34 |               <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope">
35 |                 <slot :name="slot" v-bind="scope"/>
36 |               </template>
37 |             </node>
38 |           </td>
39 |         </tr>
40 |       </template>
41 |     </tbody>
42 |   </table>
43 | </template>
44 | 
45 | <script>
46 | export default {
47 |   name: 'node',
48 |   props: {
49 |     datasource: Object,
50 |     handleClick: Function
51 |   },
52 |   methods: {
53 |   }
54 | };
55 | </script>
56 | 
57 | <style>
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
1 | import OrgChart from './OrganizationChartContainer.vue'
2 | 
3 | OrgChart.install = (Vue) => { 
4 |   Vue.component('OrgChart', OrgChart)
5 | }
6 | 
7 | export default OrgChart
8 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------