zm-tree-org
Version:
A simplified organization chart with components dependent on [Vue org tree](https://github.com/hukaibaihu/vue-org-tree). On this basis, part of the source code is optimized and modified. And it depends on [Vue draggable recoverable](https://github.com/ma
1 lines • 21.2 kB
Source Map (JSON)
{"version":3,"sources":["zm-tree-org.css","webpack://zm-tree-org/src/components/zm-draggable/D:/web project/zm-tree-org/src/components/zm-draggable/index.vue","webpack://zm-tree-org/src/components/clone-org/D:/web project/zm-tree-org/src/components/clone-org/index.vue","webpack://zm-tree-org/src/components/contextmenu/D:/web project/zm-tree-org/src/components/contextmenu/index.vue","webpack://zm-tree-org/src/styles/index.scss"],"names":[],"mappings":"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","file":"zm-tree-org.css","sourcesContent":["@import url(//at.alicdn.com/t/c/font_2201426_5zouj4513g3.css);\n.zm-draggable[data-v-642fda4b]{touch-action:none;position:absolute;box-sizing:border-box}\n\n.clone-tree-org[data-v-6f281458]{opacity:0;position:fixed;top:0;left:0;z-index:1000}\n\n.zm-tree-contextmenu[data-v-0a392941]{position:fixed;top:100px;left:100px;z-index:100;background:#fff;padding:10px 0;overflow:hidden;border:1px solid #ddd;box-shadow:0px 2px 10px 0px rgba(29,29,31,0.1)}.zm-tree-contextmenu ul[data-v-0a392941]{list-style-type:none;padding:0;margin:0}.zm-tree-contextmenu li[data-v-0a392941]{font-size:12px;padding:3px 10px;cursor:pointer;list-style-type:none}.zm-tree-contextmenu li[data-v-0a392941]:hover{color:#2d8cf0;background:#f0faff}.zm-tree-contextmenu .copy-textarea[data-v-0a392941]{position:absolute;top:-100px;left:-100px}\n\n.zm-tree-org{height:100%;padding:15px;position:relative;background:#fff}.zm-tree-org .zm-draggable{touch-action:none}.zm-tree-org .zm-draggable:not(.dragging){transition:all 0.1s}.zm-tree-org .zoom-container{position:relative;width:100%;height:100%;overflow:hidden;text-align:center;transform-origin:left top}.zm-tree-org .zoom-container.is-center{display:flex;justify-content:center}.tree-org{display:table;text-align:center}.tree-org:before,.tree-org:after{content:'';display:table}.tree-org:after{clear:both}.tree-org-node,.tree-org-node__children{position:relative;margin:0;padding:0;list-style-type:none}.tree-org-node:before,.tree-org-node:after,.tree-org-node__children:before,.tree-org-node__children:after{transition:all .35s}.tree-org-node{padding-top:20px;display:table-cell;vertical-align:top}.tree-org-node.is-leaf,.tree-org-node.collapsed{padding-left:10px;padding-right:10px}.tree-org-node:before,.tree-org-node:after{content:'';position:absolute;top:0;left:0;width:50%;height:19px}.tree-org-node:after{left:50%;border-left:1px solid #ddd}.tree-org-node:not(:first-child):before,.tree-org-node:not(:last-child):after{border-top:1px solid #ddd}.tree-org-node__textarea{width:100%;height:100%;position:absolute;top:0;left:0;font-size:14px}.tree-org-node__content{position:relative;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tree-org-node__content.is-empty.is-edit{width:50px;height:100px}.tree-org-node__content .tree-org-node__inner{text-align:center;border-radius:2px;box-shadow:0 1px 5px rgba(0,0,0,0.15)}.tree-org-node__content .tree-org-node__text{padding:10px 15px}.tree-org-node__expand{position:absolute;top:100%;left:50%;width:20px;height:20px;z-index:10;margin-left:-11px;margin-top:9px;background-color:#fff;border:1px solid #ccc;border-radius:50%;box-shadow:0 0 2px rgba(0,0,0,0.15);cursor:pointer;color:#666;transition:all .35s ease}.tree-org-node__expand.expanded{margin-left:-10px}.tree-org-node__expand:hover{background-color:#e7e8e9;transform:scale(1.15)}.tree-org-node__expand .tree-org-node__expand-btn:before,.tree-org-node__expand .tree-org-node__expand-btn:after{content:'';position:absolute}.tree-org-node__expand .tree-org-node__expand-btn:before{top:50%;left:4px;right:4px;height:0;border-top:1px solid #ccc}.tree-org-node__expand .tree-org-node__expand-btn:after{top:4px;left:50%;bottom:4px;width:0;border-left:1px solid #ccc}.tree-org-node__expand.expanded .tree-org-node__expand-btn:after{border:none}.collapsable .tree-org-node.collapsed{padding-bottom:30px}.collapsable .tree-org-node.collapsed .tree-org-node__content:after{content:'';position:absolute;top:100%;left:0;width:50%;height:20px;border-right:1px solid #ddd}.tree-org>.tree-org-node{display:flex !important;flex-direction:column;align-items:center;padding-top:0}.tree-org>.tree-org-node:after{border-left:0}.tree-org-node__children{display:table;padding-top:20px;width:100%}.tree-org-node__children:before{content:'';position:absolute;top:0;left:50%;width:0;height:20px;border-left:1px solid #ddd}.tree-org-node__children:after{content:'';display:table;clear:both}.horizontal>.tree-org-node{flex-direction:row}.horizontal .tree-org-node{display:table-cell;float:none;padding-top:0;padding-left:20px}.horizontal .tree-org-node.is-leaf,.horizontal .tree-org-node.collapsed{padding-top:10px;padding-bottom:10px}.horizontal .tree-org-node:before,.horizontal .tree-org-node:after{width:19px;height:50%}.horizontal .tree-org-node:after{top:50%;left:0;border-left:0}.horizontal .tree-org-node:only-child:before{top:1px;border-bottom:1px solid #ddd}.horizontal .tree-org-node:not(:first-child):before,.horizontal .tree-org-node:not(:last-child):after{border-top:0;border-left:1px solid #ddd}.horizontal .tree-org-node:not(:only-child):after{border-top:1px solid #ddd}.horizontal .tree-org-node .tree-org-node-inner{display:table}.horizontal .tree-org-node__content{display:table-cell;vertical-align:middle}.horizontal.collapsable .tree-org-node.collapsed{padding-right:30px}.horizontal.collapsable .tree-org-node.collapsed .tree-org-node__content:after{top:0;left:100%;width:20px;height:50%;border-right:0;border-bottom:1px solid #ddd}.horizontal .tree-org-node__expand{top:50%;left:100%;margin-top:-11px;margin-left:9px}.horizontal .tree-org-node__expand.expanded{margin-top:-10px}.horizontal>.tree-org-node:only-child:before{border-bottom:0}.horizontal .tree-org-node__children{display:table-cell;padding-top:0;padding-left:20px}.horizontal .tree-org-node__children:before{top:50%;left:0;width:20px;height:0;border-left:0;border-top:1px solid #ddd}.horizontal .tree-org-node__children:after{display:none}.horizontal .tree-org-node__children>.tree-org-node{display:block}.zm-tree-handle{position:absolute;bottom:10px;right:10px}.zm-tree-handle .zm-tree-percent,.zm-tree-handle .zm-tree-handle-item{width:32px;height:32px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:32px;font-size:12px;text-align:center}.zm-tree-handle .zm-tree-handle-item{color:#999;border:1px solid #ddd;cursor:pointer;position:relative;background:#fff}.zm-tree-handle .zm-tree-handle-item:not(:last-child){margin-bottom:6px}.zm-tree-handle .zm-tree-handle-item.zoom-out{margin-bottom:-1px;z-index:2}.zm-tree-handle .zm-tree-handle-item.zoom-in:hover{z-index:3}.zm-tree-handle .zm-tree-handle-item:hover{color:#2d8cf0;background:#f0faff;border-color:#2d8cf0}.zm-tree-handle .zm-tree-handle-item:hover .zm-tree-restore{border-color:#2d8cf0}.zm-tree-handle .zm-tree-handle-item:hover .zm-tree-restore:after{border-color:#2d8cf0}.zm-tree-handle .zm-tree-handle-item .zm-tree-icon{font-size:18px}.zm-tree-handle .zm-tree-handle-item .zm-tree-restore{display:inline-block;width:10px;height:10px;border:1px solid #aaa;margin-left:-2px;margin-bottom:-2px}.zm-tree-handle .zm-tree-handle-item .zm-tree-restore:after{content:\"\";display:block;height:100%;border-top:1px solid #aaa;border-right:1px solid #aaa;transform:translate(3px, -3px)}.zm-tree-handle .zm-tree-handle-item .zm-tree-svg{display:flex;height:100%;justify-content:center;align-items:center}.zm-tree-handle .zm-tree-handle-item .zm-tree-svg img{width:50%;height:50%;vertical-align:middle;opacity:0.5}\n\n\n/*# sourceMappingURL=zm-tree-org.css.map*/","@import \"demo/assets/styles/variables.scss\";\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.zm-draggable {\n touch-action: none;\n position: absolute;\n box-sizing: border-box;\n}\n","@import \"demo/assets/styles/variables.scss\";\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.clone-tree-org{\n opacity: 0;\n position: fixed;\n top:0;\n left:0;\n z-index:1000;\n}\n","@import \"demo/assets/styles/variables.scss\";\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\r\n.zm-tree-contextmenu {\r\n position: fixed;\r\n top: 100px;\r\n left: 100px;\r\n z-index: 100;\r\n background: #fff;\r\n padding: 10px 0;\r\n overflow: hidden;\r\n border: 1px solid #ddd;\r\n box-shadow: 0px 2px 10px 0px rgba(29, 29, 31, 0.1);\r\n ul {\r\n list-style-type: none;\r\n padding: 0;\r\n margin: 0;\r\n }\r\n li {\r\n font-size: 12px;\r\n padding: 3px 10px;\r\n cursor: pointer;\r\n list-style-type: none;\r\n &:hover {\r\n color: #2d8cf0;\r\n background: #f0faff;\r\n }\r\n }\r\n .copy-textarea {\r\n position: absolute;\r\n top: -100px;\r\n left: -100px;\r\n }\r\n}\r\n","@import \"demo/assets/styles/variables.scss\";// @import url(\"//at.alicdn.com/t/font_2201426_wnqkpnyga1.css\");\r\n@import url(\"//at.alicdn.com/t/c/font_2201426_5zouj4513g3.css\");\r\n.zm-tree-org {\r\n height: 100%;\r\n padding: 15px;\r\n position: relative;\r\n background: #fff;\r\n .zm-draggable {\r\n touch-action: none;\r\n &:not(.dragging) {\r\n transition: all 0.1s;\r\n }\r\n }\r\n .zoom-container {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n text-align: center;\r\n transform-origin: left top;\r\n &.is-center {\r\n display: flex;\r\n justify-content: center;\r\n }\r\n }\r\n}\r\n.tree-org {\r\n display: table;\r\n text-align: center;\r\n &:before, &:after {\r\n content: '';\r\n display: table;\r\n }\r\n &:after {\r\n clear: both;\r\n }\r\n &-node, &-node__children {\r\n position: relative;\r\n margin: 0;\r\n padding: 0;\r\n list-style-type: none;\r\n &:before, &:after {\r\n transition: all .35s;\r\n }\r\n }\r\n\r\n &-node {\r\n padding-top: 20px;\r\n display: table-cell;\r\n vertical-align: top;\r\n &.is-leaf, &.collapsed {\r\n padding-left: 10px;\r\n padding-right: 10px;\r\n }\r\n\r\n &:before, &:after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 50%;\r\n height: 19px;\r\n }\r\n\r\n &:after {\r\n left: 50%;\r\n border-left: 1px solid #ddd;\r\n }\r\n\r\n &:not(:first-child):before,\r\n &:not(:last-child):after {\r\n border-top: 1px solid #ddd;\r\n }\r\n &__textarea {\r\n width: 100%;\r\n height: 100%;\r\n position:absolute;\r\n top: 0;\r\n left: 0;\r\n font-size: 14px;\r\n }\r\n &__content {\r\n position: relative;\r\n display: inline-block;\r\n user-select: none;\r\n &.is-empty.is-edit {\r\n width: 50px;\r\n height: 100px;\r\n }\r\n .tree-org-node__inner {\r\n text-align: center;\r\n border-radius: 2px;\r\n box-shadow: 0 1px 5px rgba(0, 0, 0, .15);\r\n }\r\n .tree-org-node__text {\r\n padding: 10px 15px;\r\n }\r\n }\r\n &__expand {\r\n position: absolute;\r\n top: 100%;\r\n left: 50%;\r\n width: 20px;\r\n height: 20px;\r\n z-index: 10;\r\n margin-left: -11px;\r\n margin-top: 9px;\r\n background-color: #fff;\r\n border: 1px solid #ccc;\r\n border-radius: 50%;\r\n box-shadow: 0 0 2px rgba(0, 0, 0, .15);\r\n cursor: pointer;\r\n color: #666;\r\n transition: all .35s ease;\r\n &.expanded {\r\n margin-left: -10px;\r\n }\r\n &:hover {\r\n background-color: #e7e8e9;\r\n transform: scale(1.15);\r\n }\r\n .tree-org-node__expand-btn {\r\n &:before, &:after {\r\n content: '';\r\n position: absolute;\r\n }\r\n\r\n &:before {\r\n top: 50%;\r\n left: 4px;\r\n right: 4px;\r\n height: 0;\r\n border-top: 1px solid #ccc;\r\n }\r\n\r\n &:after {\r\n top: 4px;\r\n left: 50%;\r\n bottom: 4px;\r\n width: 0;\r\n border-left: 1px solid #ccc;\r\n }\r\n }\r\n &.expanded {\r\n .tree-org-node__expand-btn:after {\r\n border: none;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.collapsable .tree-org-node.collapsed {\r\n padding-bottom: 30px;\r\n .tree-org-node__content:after {\r\n content: '';\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n width: 50%;\r\n height: 20px;\r\n border-right: 1px solid #ddd;\r\n }\r\n}\r\n.tree-org > .tree-org-node {\r\n display: flex!important;\r\n flex-direction: column;\r\n align-items: center;\r\n padding-top: 0;\r\n &:after {\r\n border-left: 0;\r\n }\r\n}\r\n.tree-org-node__children {\r\n display: table;\r\n padding-top: 20px;\r\n width: 100%;\r\n &:before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 50%;\r\n width: 0;\r\n height: 20px;\r\n border-left: 1px solid #ddd;\r\n }\r\n &:after {\r\n content: '';\r\n display: table;\r\n clear: both;\r\n }\r\n}\r\n\r\n.horizontal {\r\n & > .tree-org-node{\r\n flex-direction: row;\r\n }\r\n .tree-org-node {\r\n display: table-cell;\r\n float: none;\r\n padding-top: 0;\r\n padding-left: 20px;\r\n\r\n &.is-leaf, &.collapsed {\r\n padding-top: 10px;\r\n padding-bottom: 10px;\r\n }\r\n\r\n &:before, &:after {\r\n width: 19px;\r\n height: 50%;\r\n }\r\n\r\n &:after {\r\n top: 50%;\r\n left: 0;\r\n border-left: 0;\r\n }\r\n\r\n &:only-child:before {\r\n top: 1px;\r\n border-bottom: 1px solid #ddd;\r\n }\r\n\r\n &:not(:first-child):before,\r\n &:not(:last-child):after {\r\n border-top: 0;\r\n border-left: 1px solid #ddd;\r\n }\r\n\r\n &:not(:only-child):after {\r\n border-top: 1px solid #ddd;\r\n }\r\n\r\n .tree-org-node-inner {\r\n display: table;\r\n }\r\n\r\n }\r\n\r\n .tree-org-node__content {\r\n display: table-cell;\r\n vertical-align: middle;\r\n }\r\n\r\n &.collapsable .tree-org-node.collapsed {\r\n padding-right: 30px;\r\n\r\n .tree-org-node__content:after {\r\n top: 0;\r\n left: 100%;\r\n width: 20px;\r\n height: 50%;\r\n border-right: 0;\r\n border-bottom: 1px solid #ddd;\r\n }\r\n }\r\n\r\n .tree-org-node__expand {\r\n top: 50%;\r\n left: 100%;\r\n margin-top: -11px;\r\n margin-left: 9px;\r\n &.expanded {\r\n margin-top: -10px;\r\n }\r\n }\r\n\r\n & > .tree-org-node:only-child:before {\r\n border-bottom: 0;\r\n }\r\n\r\n .tree-org-node__children {\r\n display: table-cell;\r\n padding-top: 0;\r\n padding-left: 20px;\r\n\r\n &:before {\r\n top: 50%;\r\n left: 0;\r\n width: 20px;\r\n height: 0;\r\n border-left: 0;\r\n border-top: 1px solid #ddd;\r\n }\r\n &:after {\r\n display: none;\r\n }\r\n\r\n & > .tree-org-node {\r\n display: block;\r\n }\r\n }\r\n}\r\n.zm-tree-handle {\r\n position: absolute;\r\n bottom: 10px;\r\n right: 10px;\r\n .zm-tree-percent,\r\n .zm-tree-handle-item {\r\n width: 32px;\r\n height: 32px;\r\n user-select: none;\r\n line-height: 32px;\r\n font-size: 12px;\r\n text-align: center;\r\n }\r\n .zm-tree-handle-item {\r\n color: #999;\r\n border: 1px solid #ddd;\r\n cursor: pointer;\r\n position: relative;\r\n background: #fff;\r\n &:not(:last-child){\r\n margin-bottom: 6px;\r\n }\r\n &.zoom-out {\r\n margin-bottom: -1px;\r\n z-index: 2;\r\n }\r\n &.zoom-in:hover {\r\n z-index: 3;\r\n }\r\n &:hover {\r\n color: #2d8cf0;\r\n background: #f0faff;\r\n border-color: #2d8cf0;\r\n .zm-tree-restore {\r\n border-color: #2d8cf0;\r\n &:after {\r\n border-color: #2d8cf0;\r\n }\r\n }\r\n }\r\n .zm-tree-icon {\r\n font-size: 18px;\r\n }\r\n .zm-tree-restore {\r\n display: inline-block;\r\n width: 10px;\r\n height: 10px;\r\n border: 1px solid #aaa;\r\n margin-left: -2px;\r\n margin-bottom: -2px;\r\n &:after {\r\n content: \"\";\r\n display: block;\r\n height: 100%;\r\n border-top: 1px solid #aaa;\r\n border-right: 1px solid #aaa;\r\n transform: translate(3px, -3px);\r\n }\r\n }\r\n .zm-tree-svg{\r\n display: flex;\r\n height: 100%;\r\n justify-content: center;\r\n align-items: center;\r\n img {\r\n width: 50%;\r\n height: 50%;\r\n vertical-align: middle;\r\n opacity: 0.5;\r\n }\r\n } \r\n }\r\n}\r\n"]}