vxe-gantt 0.0.3 → 3.0.0-beta.0

package/lib/vxe-gantt/style/style.min.css

@@ -1 +1 @@
-@charset "UTF-8";.vxe-gantt-view--chart-wrapper{position:absolute;top:0;left:0;pointer-events:none}.vxe-gantt-view--chart-row{position:relative}.vxe-gantt-view--chart-bar{display:flex;flex-direction:row;position:absolute;width:100px;top:50%;left:0;color:#fff;transform:translateY(-50%);border-radius:var(--vxe-ui-base-border-radius);height:var(--vxe-ui-gantt-view-chart-bar-height);background-color:var(--vxe-ui-font-primary-lighten-color);pointer-events:all}.vxe-gantt-view--chart-bar:hover::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.1);border-radius:var(--vxe-ui-base-border-radius)}.vxe-gantt-view--chart-progress{flex-shrink:0;width:40px;text-align:left;border-radius:var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-font-primary-color)}.vxe-gantt-view--chart-content{flex-grow:1;text-align:right}.vxe-gantt{position:relative;overflow:auto;display:flex;flex-direction:column}.vxe-gantt.is--loading:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:99;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--vxe-ui-loading-background-color)}.vxe-gantt.is--loading>.vxe-gantt-view .vxe-loading{background-color:transparent}.vxe-gantt.is--maximize{position:fixed;top:0;left:0;width:100%;height:100%;padding:.5em 1em;background-color:var(--vxe-ui-layout-background-color)}.vxe-gantt.is--split-drag{cursor:col-resize}.vxe-gantt.is--split-drag .vxe-gantt--table-wrapper::after,.vxe-gantt.is--split-drag .vxe-gantt--view-wrapper::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:0 0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-gantt .vxe-gantt--bottom-wrapper,.vxe-gantt .vxe-gantt--form-wrapper,.vxe-gantt .vxe-gantt--top-wrapper{position:relative}.vxe-gantt .vxe-gantt--gantt-container{position:relative;display:flex;flex-direction:row}.vxe-gantt .vxe-gantt--left-wrapper,.vxe-gantt .vxe-gantt--right-wrapper{flex-shrink:0;overflow:auto;outline:0}.vxe-gantt .vxe-gantt--table-wrapper,.vxe-gantt .vxe-gantt--view-wrapper{display:none;position:relative;flex-grow:1;overflow:hidden}.vxe-gantt .vxe-gantt--view-split-bar{flex-shrink:0;cursor:col-resize;width:var(--vxe-ui-gantt-view-split-bar-width);background-color:var(--vxe-ui-gantt-view-split-bar-background-color)}.vxe-gantt.show--left .vxe-gantt--table-wrapper{display:block}.vxe-gantt.show--left.show--right .vxe-gantt--table-wrapper{flex-grow:unset;flex-shrink:0;width:30%}.vxe-gantt.show--right .vxe-gantt--view-wrapper{display:block}.vxe-gantt--layout-body-wrapper{display:flex;flex-direction:row;overflow:auto;flex-grow:1}.vxe-gantt--layout-body-content-wrapper{flex-grow:1;overflow:hidden}.vxe-gantt--layout-aside-left-wrapper,.vxe-gantt--layout-footer-wrapper,.vxe-gantt--layout-header-wrapper{flex-shrink:0;overflow:auto}.vxe-gantt--border-line{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none;border:var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color)}.vxe-gantt.border--default .vxe-gantt-view--header-wrapper,.vxe-gantt.border--full .vxe-gantt-view--header-wrapper,.vxe-gantt.border--outer .vxe-gantt-view--header-wrapper{background-color:var(--vxe-ui-table-header-background-color)}.vxe-gantt.border--full .vxe-gantt-view--body-column,.vxe-gantt.border--full .vxe-gantt-view--footer-column,.vxe-gantt.border--full .vxe-gantt-view--header-column{background-image:linear-gradient(var(--vxe-ui-table-border-color),var(--vxe-ui-table-border-color)),linear-gradient(var(--vxe-ui-table-border-color),var(--vxe-ui-table-border-color));background-repeat:no-repeat;background-size:var(--vxe-ui-table-border-width) 100%,100% var(--vxe-ui-table-border-width);background-position:right top,right bottom}.vxe-gantt.border--default .vxe-gantt-view--scroll-y-bottom-corner::before,.vxe-gantt.border--default .vxe-gantt-view--scroll-y-top-corner::before,.vxe-gantt.border--full .vxe-gantt-view--scroll-y-bottom-corner::before,.vxe-gantt.border--full .vxe-gantt-view--scroll-y-top-corner::before,.vxe-gantt.border--inner .vxe-gantt-view--scroll-y-bottom-corner::before,.vxe-gantt.border--inner .vxe-gantt-view--scroll-y-top-corner::before,.vxe-gantt.border--outer .vxe-gantt-view--scroll-y-bottom-corner::before,.vxe-gantt.border--outer .vxe-gantt-view--scroll-y-top-corner::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-width:0;border-style:solid;border-color:var(--vxe-ui-table-border-color)}.vxe-gantt.border--default .vxe-gantt-view--scroll-y-top-corner::before,.vxe-gantt.border--full .vxe-gantt-view--scroll-y-top-corner::before,.vxe-gantt.border--inner .vxe-gantt-view--scroll-y-top-corner::before,.vxe-gantt.border--outer .vxe-gantt-view--scroll-y-top-corner::before{border-bottom-width:var(--vxe-ui-table-border-width)}.vxe-gantt.border--default .vxe-gantt-view--scroll-y-bottom-corner,.vxe-gantt.border--full .vxe-gantt-view--scroll-y-bottom-corner,.vxe-gantt.border--inner .vxe-gantt-view--scroll-y-bottom-corner,.vxe-gantt.border--outer .vxe-gantt-view--scroll-y-bottom-corner{border-top:var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color)}.vxe-gantt.border--default .vxe-gantt-view--scroll-x-wrapper::after,.vxe-gantt.border--full .vxe-gantt-view--scroll-x-wrapper::after,.vxe-gantt.border--inner .vxe-gantt-view--scroll-x-wrapper::after,.vxe-gantt.border--outer .vxe-gantt-view--scroll-x-wrapper::after{content:"";position:absolute;left:0;width:100%;height:100%;z-index:1;pointer-events:none}.vxe-gantt.border--default.sx-pos--top .vxe-gantt-view--scroll-x-wrapper::after,.vxe-gantt.border--full.sx-pos--top .vxe-gantt-view--scroll-x-wrapper::after,.vxe-gantt.border--inner.sx-pos--top .vxe-gantt-view--scroll-x-wrapper::after,.vxe-gantt.border--outer.sx-pos--top .vxe-gantt-view--scroll-x-wrapper::after{top:0;border-bottom:var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color)}.vxe-gantt.border--default.sx-pos--bottom .vxe-gantt-view--scroll-x-wrapper::after,.vxe-gantt.border--full.sx-pos--bottom .vxe-gantt-view--scroll-x-wrapper::after,.vxe-gantt.border--inner.sx-pos--bottom .vxe-gantt-view--scroll-x-wrapper::after,.vxe-gantt.border--outer.sx-pos--bottom .vxe-gantt-view--scroll-x-wrapper::after{bottom:0;height:calc(100% + var(--vxe-ui-table-border-width));border-top:var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color)}.vxe-gantt.border--default .vxe-gantt-view--scroll-y-top-corner::before,.vxe-gantt.border--full .vxe-gantt-view--scroll-y-top-corner::before{border-left-width:var(--vxe-ui-table-border-width);border-right-width:var(--vxe-ui-table-border-width)}.vxe-gantt.border--default .vxe-gantt-view--scroll-y-bottom-corner::before,.vxe-gantt.border--full .vxe-gantt-view--scroll-y-bottom-corner::before{border-left-width:var(--vxe-ui-table-border-width);border-right-width:var(--vxe-ui-table-border-width)}.vxe-gantt.border--default.sy-pos--right .vxe-gantt-view--scroll-y-bottom-corner::before,.vxe-gantt.border--default.sy-pos--right .vxe-gantt-view--scroll-y-top-corner::before,.vxe-gantt.border--full.sy-pos--right .vxe-gantt-view--scroll-y-bottom-corner::before,.vxe-gantt.border--full.sy-pos--right .vxe-gantt-view--scroll-y-top-corner::before{width:calc(100% + 1px);left:-1px}.vxe-gantt.border--default .vxe-gantt-view--scroll-y-wrapper::after,.vxe-gantt.border--full .vxe-gantt-view--scroll-y-wrapper::after{content:"";position:absolute;top:0;width:100%;height:100%;z-index:1;pointer-events:none}.vxe-gantt.border--default.sy-pos--left .vxe-gantt-view--scroll-y-wrapper::after,.vxe-gantt.border--full.sy-pos--left .vxe-gantt-view--scroll-y-wrapper::after{left:0;border-right:var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color)}.vxe-gantt.border--default.sy-pos--right .vxe-gantt-view--scroll-y-wrapper::after,.vxe-gantt.border--full.sy-pos--right .vxe-gantt-view--scroll-y-wrapper::after{right:0;width:calc(100% + var(--vxe-ui-table-border-width));border-left:var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color)}.vxe-gantt--view-split-bar{position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-gantt--view-split-bar-handle{position:absolute;top:0;left:0;width:100%;height:100%;z-index:13}.vxe-gantt--view-split-bar-btn-wrapper{display:flex;flex-direction:column;align-items:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:15;pointer-events:none}.vxe-gantt--view-split-bar-left-btn,.vxe-gantt--view-split-bar-right-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:.5em;height:var(--vxe-ui-gantt-view-split-bar-height);width:var(--vxe-ui-gantt-view-split-bar-width);color:var(--vxe-ui-layout-background-color);border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-gantt-view-handle-background-color);border:1px solid var(--vxe-ui-input-border-color);pointer-events:all;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:all .1s ease-in-out}.vxe-gantt--view-split-bar-left-btn:hover,.vxe-gantt--view-split-bar-right-btn:hover{background-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-gantt--view-split-bar-left-btn:active,.vxe-gantt--view-split-bar-right-btn:active{transform:scale(.9)}.vxe-gantt--view-split-bar-right-btn{margin-top:1em}.vxe-gantt--resizable-split-tip{display:none;position:absolute;top:0;left:0;width:1px;height:100%;z-index:18;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:col-resize}.vxe-gantt--resizable-split-tip:before{content:"";display:block;height:100%;background-color:var(--vxe-ui-table-resizable-drag-line-color)}.vxe-gantt--resizable-split-tip-number{position:absolute;top:0;left:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.vxe-gantt--resizable-split-number-left,.vxe-gantt--resizable-split-number-right{position:absolute;padding:.25em .25em;font-size:12px;border-radius:var(--vxe-ui-border-radius);white-space:nowrap;color:#fff;background-color:var(--vxe-ui-table-resizable-drag-line-color)}.vxe-gantt--resizable-split-number-left{right:0}.vxe-gantt--resizable-split-number-right{left:1px}.vxe-gantt.is--loading>.vxe-gantt-view--scroll-x-virtual{visibility:hidden}.vxe-gantt.is--loading>.vxe-gantt-view--layout-wrapper>.vxe-gantt-view--scroll-y-virtual{visibility:hidden}.vxe-gantt .vxe-gantt-view--scroll-x-virtual{height:0}.vxe-gantt .vxe-gantt-view--scroll-y-virtual{width:0}.vxe-gantt .vxe-gantt-view--scroll-x-virtual,.vxe-gantt .vxe-gantt-view--scroll-y-virtual{visibility:hidden;position:relative;flex-shrink:0;z-index:7}.vxe-gantt .vxe-gantt-view--scroll-x-handle,.vxe-gantt .vxe-gantt-view--scroll-x-left-corner,.vxe-gantt .vxe-gantt-view--scroll-x-right-corner,.vxe-gantt .vxe-gantt-view--scroll-x-wrapper,.vxe-gantt .vxe-gantt-view--scroll-y-bottom-corner,.vxe-gantt .vxe-gantt-view--scroll-y-handle,.vxe-gantt .vxe-gantt-view--scroll-y-top-corner,.vxe-gantt .vxe-gantt-view--scroll-y-wrapper{position:absolute}.vxe-gantt .vxe-gantt-view--scroll-x-handle,.vxe-gantt .vxe-gantt-view--scroll-x-wrapper{width:100%;left:0;bottom:0}.vxe-gantt .vxe-gantt-view--scroll-x-handle{overflow-y:hidden;overflow-x:scroll;height:18px}.vxe-gantt .vxe-gantt-view--scroll-x-wrapper{height:100%}.vxe-gantt .vxe-gantt-view--scroll-y-handle,.vxe-gantt .vxe-gantt-view--scroll-y-wrapper{width:100%;height:100%;right:0;top:0}.vxe-gantt .vxe-gantt-view--scroll-y-handle{overflow-y:scroll;overflow-x:hidden;width:18px;height:100%}.vxe-gantt .vxe-gantt-view--scroll-x-space{height:1px}.vxe-gantt .vxe-gantt-view--scroll-y-space{width:1px}.vxe-gantt .vxe-gantt-view--scroll-x-left-corner,.vxe-gantt .vxe-gantt-view--scroll-x-right-corner,.vxe-gantt .vxe-gantt-view--scroll-y-bottom-corner,.vxe-gantt .vxe-gantt-view--scroll-y-top-corner{display:none;position:absolute}.vxe-gantt .vxe-gantt-view--scroll-x-left-corner,.vxe-gantt .vxe-gantt-view--scroll-x-right-corner{bottom:0;width:0;height:100%}.vxe-gantt .vxe-gantt-view--scroll-x-left-corner::before,.vxe-gantt .vxe-gantt-view--scroll-x-right-corner::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-width:var(--vxe-ui-table-border-width);border-style:solid;border-color:var(--vxe-ui-table-border-color)}.vxe-gantt .vxe-gantt-view--scroll-x-left-corner{left:0}.vxe-gantt .vxe-gantt-view--scroll-x-right-corner{right:0}.vxe-gantt.sy-pos--right .vxe-gantt-view--scroll-x-right-corner{right:1px}.vxe-gantt.sy-pos--right .vxe-gantt-view--scroll-x-right-corner::before{border-right:0}.vxe-gantt.sx-pos--bottom .vxe-gantt-view--scroll-x-right-corner{bottom:1px}.vxe-gantt.sx-pos--bottom .vxe-gantt-view--scroll-x-right-corner::before{border-bottom:0}.vxe-gantt .vxe-gantt-view--scroll-y-top-corner{background-color:var(--vxe-ui-table-header-background-color)}.vxe-gantt .vxe-gantt-view--scroll-y-bottom-corner,.vxe-gantt .vxe-gantt-view--scroll-y-top-corner{top:0;right:0;width:100%;height:0}.vxe-gantt .vxe-gantt-view--scroll-y-bottom-corner{margin-top:-1px}.vxe-gantt-view--layout-wrapper{display:flex;flex-direction:row;background-color:var(--vxe-ui-layout-background-color)}.vxe-gantt-view--viewport-wrapper{position:relative;overflow:hidden;flex-grow:1}.vxe-gantt-view--render-vars{width:0;height:0;overflow:hidden}.vxe-gantt-view--column-info{width:var(--vxe-ui-gantt-view-column-width)}.vxe-gantt-view{flex-grow:1;overflow:hidden}.vxe-gantt-view .vxe-body--x-space{width:100%;height:1px;margin-bottom:-1px}.vxe-gantt-view .vxe-body--y-space{width:0;float:left}.vxe-gantt-view--header-table{height:100%}.vxe-gantt-view--body-table,.vxe-gantt-view--header-table{border:0;border-spacing:0;border-collapse:separate;table-layout:fixed}.vxe-gantt-view--body-table col,.vxe-gantt-view--header-table col{width:var(--vxe-ui-gantt-view-column-width)}.vxe-gantt-view--body-wrapper,.vxe-gantt-view--header-wrapper{overflow:hidden}.vxe-gantt-view--header-inner-wrapper{overflow-y:hidden;overflow-x:scroll}.vxe-gantt-view--body-inner-wrapper{overflow-y:auto;overflow-x:auto}.vxe-gantt-view--body-inner-wrapper,.vxe-gantt-view--header-inner-wrapper{position:relative;width:100%;height:100%;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.vxe-gantt-view--header-column{text-align:center;font-size:1em}.vxe-gantt-view--body-column{height:48px}.vxe-gantt-view--body-column,.vxe-gantt-view--footer-column,.vxe-gantt-view--header-column{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-gantt-view.mode--day .vxe-gantt-view--header-column{height:50%}.vxe-gantt{font-size:var(--vxe-ui-font-size-default)}.vxe-gantt.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-gantt.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-gantt.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+@charset "UTF-8";.vxe-gantt-view--chart-wrapper{position:absolute;top:0;left:0;pointer-events:none}.vxe-gantt-view--chart-row{position:relative}.vxe-gantt-view--chart-row.is--round>.vxe-gantt-view--chart-bar{border-radius:var(--vxe-ui-gantt-view-task-bar-border-radius)}.vxe-gantt-view--chart-row.is--round>.vxe-gantt-view--chart-bar:hover::after{border-radius:var(--vxe-ui-gantt-view-task-bar-border-radius)}.vxe-gantt-view--chart-row.is--round>.vxe-gantt-view--chart-bar>.vxe-gantt-view--chart-progress{border-radius:var(--vxe-ui-gantt-view-task-bar-border-radius) 0 0 var(--vxe-ui-gantt-view-task-bar-border-radius)}.vxe-gantt-view--chart-bar{display:flex;flex-direction:row;align-items:center;position:absolute;top:50%;left:0;color:#fff;transform:translateY(-50%);height:var(--vxe-ui-gantt-view-chart-bar-height);background-color:var(--vxe-ui-gantt-view-task-bar-background-color);pointer-events:all}.vxe-gantt-view--chart-bar:hover::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.1)}.vxe-gantt-view--chart-progress{flex-shrink:0;width:0;height:100%;text-align:left;background-color:var(--vxe-ui-gantt-view-task-bar-completed-background-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-gantt-view--chart-content{position:absolute;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9em;padding:0 .6em}.vxe-gantt{position:relative;overflow:auto;display:flex;flex-direction:column}.vxe-gantt.is--loading:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:99;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:var(--vxe-ui-loading-background-color)}.vxe-gantt.is--loading>.vxe-gantt-view .vxe-loading{background-color:transparent}.vxe-gantt.is--maximize{position:fixed;top:0;left:0;width:100%;height:100%;padding:.5em 1em;background-color:var(--vxe-ui-layout-background-color)}.vxe-gantt.is--split-drag{cursor:col-resize}.vxe-gantt.is--split-drag .vxe-gantt--table-wrapper::after,.vxe-gantt.is--split-drag .vxe-gantt--view-wrapper::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:0 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-gantt .vxe-gantt--bottom-wrapper,.vxe-gantt .vxe-gantt--form-wrapper,.vxe-gantt .vxe-gantt--top-wrapper{position:relative}.vxe-gantt .vxe-gantt--gantt-container{position:relative;display:flex;flex-direction:row}.vxe-gantt .vxe-gantt--left-wrapper,.vxe-gantt .vxe-gantt--right-wrapper{flex-shrink:0;overflow:auto;outline:0}.vxe-gantt .vxe-gantt--table-wrapper,.vxe-gantt .vxe-gantt--view-wrapper{display:none;position:relative;flex-grow:1;overflow:hidden}.vxe-gantt .vxe-gantt--view-split-bar{flex-shrink:0;width:var(--vxe-ui-gantt-view-split-bar-width);background-color:var(--vxe-ui-gantt-view-split-bar-background-color)}.vxe-gantt .vxe-gantt--view-split-bar.is--resize{cursor:col-resize}.vxe-gantt.show--left .vxe-gantt--table-wrapper{display:block}.vxe-gantt.show--left.show--right .vxe-gantt--table-wrapper{flex-grow:unset;flex-shrink:0;width:var(--vxe-ui-gantt-view-table-default-width)}.vxe-gantt.show--right .vxe-gantt--view-wrapper{display:block}.vxe-gantt--layout-body-wrapper{display:flex;flex-direction:row;overflow:auto;flex-grow:1}.vxe-gantt--layout-body-content-wrapper{flex-grow:1;overflow:hidden}.vxe-gantt--layout-aside-left-wrapper,.vxe-gantt--layout-footer-wrapper,.vxe-gantt--layout-header-wrapper{flex-shrink:0;overflow:auto}.vxe-gantt--border-line{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none;border:var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color)}.vxe-gantt.border--default .vxe-gantt-view--header-wrapper,.vxe-gantt.border--full .vxe-gantt-view--header-wrapper,.vxe-gantt.border--outer .vxe-gantt-view--header-wrapper{background-color:var(--vxe-ui-table-header-background-color)}.vxe-gantt.border--full .vxe-gantt-view--body-column,.vxe-gantt.border--full .vxe-gantt-view--footer-column,.vxe-gantt.border--full .vxe-gantt-view--header-column{background-image:linear-gradient(var(--vxe-ui-table-border-color),var(--vxe-ui-table-border-color)),linear-gradient(var(--vxe-ui-table-border-color),var(--vxe-ui-table-border-color));background-repeat:no-repeat;background-size:var(--vxe-ui-table-border-width) 100%,100% var(--vxe-ui-table-border-width);background-position:right top,right bottom}.vxe-gantt.border--default .vxe-gantt-view--scroll-y-bottom-corner::before,.vxe-gantt.border--default .vxe-gantt-view--scroll-y-top-corner::before,.vxe-gantt.border--full .vxe-gantt-view--scroll-y-bottom-corner::before,.vxe-gantt.border--full .vxe-gantt-view--scroll-y-top-corner::before,.vxe-gantt.border--inner .vxe-gantt-view--scroll-y-bottom-corner::before,.vxe-gantt.border--inner .vxe-gantt-view--scroll-y-top-corner::before,.vxe-gantt.border--outer .vxe-gantt-view--scroll-y-bottom-corner::before,.vxe-gantt.border--outer .vxe-gantt-view--scroll-y-top-corner::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-width:0;border-style:solid;border-color:var(--vxe-ui-table-border-color)}.vxe-gantt.border--default .vxe-gantt-view--scroll-y-top-corner::before,.vxe-gantt.border--full .vxe-gantt-view--scroll-y-top-corner::before,.vxe-gantt.border--inner .vxe-gantt-view--scroll-y-top-corner::before,.vxe-gantt.border--outer .vxe-gantt-view--scroll-y-top-corner::before{border-bottom-width:var(--vxe-ui-table-border-width)}.vxe-gantt.border--default .vxe-gantt-view--scroll-y-bottom-corner,.vxe-gantt.border--full .vxe-gantt-view--scroll-y-bottom-corner,.vxe-gantt.border--inner .vxe-gantt-view--scroll-y-bottom-corner,.vxe-gantt.border--outer .vxe-gantt-view--scroll-y-bottom-corner{border-top:var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color)}.vxe-gantt.border--default .vxe-gantt-view--scroll-x-wrapper::after,.vxe-gantt.border--full .vxe-gantt-view--scroll-x-wrapper::after,.vxe-gantt.border--inner .vxe-gantt-view--scroll-x-wrapper::after,.vxe-gantt.border--outer .vxe-gantt-view--scroll-x-wrapper::after{content:"";position:absolute;left:0;width:100%;height:100%;z-index:1;pointer-events:none}.vxe-gantt.border--default.sx-pos--top .vxe-gantt-view--scroll-x-wrapper::after,.vxe-gantt.border--full.sx-pos--top .vxe-gantt-view--scroll-x-wrapper::after,.vxe-gantt.border--inner.sx-pos--top .vxe-gantt-view--scroll-x-wrapper::after,.vxe-gantt.border--outer.sx-pos--top .vxe-gantt-view--scroll-x-wrapper::after{top:0;border-bottom:var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color)}.vxe-gantt.border--default.sx-pos--bottom .vxe-gantt-view--scroll-x-wrapper::after,.vxe-gantt.border--full.sx-pos--bottom .vxe-gantt-view--scroll-x-wrapper::after,.vxe-gantt.border--inner.sx-pos--bottom .vxe-gantt-view--scroll-x-wrapper::after,.vxe-gantt.border--outer.sx-pos--bottom .vxe-gantt-view--scroll-x-wrapper::after{bottom:0;height:calc(100% + var(--vxe-ui-table-border-width));border-top:var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color)}.vxe-gantt.border--default .vxe-gantt-view--scroll-y-top-corner::before,.vxe-gantt.border--full .vxe-gantt-view--scroll-y-top-corner::before{border-left-width:var(--vxe-ui-table-border-width);border-right-width:var(--vxe-ui-table-border-width)}.vxe-gantt.border--default .vxe-gantt-view--scroll-y-bottom-corner::before,.vxe-gantt.border--full .vxe-gantt-view--scroll-y-bottom-corner::before{border-left-width:var(--vxe-ui-table-border-width);border-right-width:var(--vxe-ui-table-border-width)}.vxe-gantt.border--default.sy-pos--right .vxe-gantt-view--scroll-y-bottom-corner::before,.vxe-gantt.border--default.sy-pos--right .vxe-gantt-view--scroll-y-top-corner::before,.vxe-gantt.border--full.sy-pos--right .vxe-gantt-view--scroll-y-bottom-corner::before,.vxe-gantt.border--full.sy-pos--right .vxe-gantt-view--scroll-y-top-corner::before{width:calc(100% + 1px);left:-1px}.vxe-gantt.border--default .vxe-gantt-view--scroll-y-wrapper::after,.vxe-gantt.border--full .vxe-gantt-view--scroll-y-wrapper::after{content:"";position:absolute;top:0;width:100%;height:100%;z-index:1;pointer-events:none}.vxe-gantt.border--default.sy-pos--left .vxe-gantt-view--scroll-y-wrapper::after,.vxe-gantt.border--full.sy-pos--left .vxe-gantt-view--scroll-y-wrapper::after{left:0;border-right:var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color)}.vxe-gantt.border--default.sy-pos--right .vxe-gantt-view--scroll-y-wrapper::after,.vxe-gantt.border--full.sy-pos--right .vxe-gantt-view--scroll-y-wrapper::after{right:0;width:calc(100% + var(--vxe-ui-table-border-width));border-left:var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color)}.vxe-gantt--view-split-bar{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-gantt--view-split-bar-handle{position:absolute;top:0;left:0;width:100%;height:100%;z-index:13}.vxe-gantt--view-split-bar-btn-wrapper{display:flex;flex-direction:column;align-items:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:15;pointer-events:none}.vxe-gantt--view-split-bar-btn-wrapper>div{margin-top:1em}.vxe-gantt--view-split-bar-btn-wrapper>div:first-child{margin-top:0}.vxe-gantt--view-split-bar-left-btn,.vxe-gantt--view-split-bar-right-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:.5em;height:var(--vxe-ui-gantt-view-split-bar-height);width:var(--vxe-ui-gantt-view-split-bar-width);color:var(--vxe-ui-layout-background-color);border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-gantt-view-handle-background-color);border:1px solid var(--vxe-ui-input-border-color);pointer-events:all;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:all .1s ease-in-out}.vxe-gantt--view-split-bar-left-btn:hover,.vxe-gantt--view-split-bar-right-btn:hover{background-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-gantt--view-split-bar-left-btn:active,.vxe-gantt--view-split-bar-right-btn:active{transform:scale(.9)}.vxe-gantt--resizable-split-tip{display:none;position:absolute;top:0;left:0;width:1px;height:100%;z-index:18;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:col-resize}.vxe-gantt--resizable-split-tip:before{content:"";display:block;height:100%;background-color:var(--vxe-ui-table-resizable-drag-line-color)}.vxe-gantt--resizable-split-tip-number{position:absolute;top:0;left:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.vxe-gantt--resizable-split-number-left,.vxe-gantt--resizable-split-number-right{position:absolute;padding:.25em .25em;font-size:12px;border-radius:var(--vxe-ui-border-radius);white-space:nowrap;color:#fff;background-color:var(--vxe-ui-table-resizable-drag-line-color)}.vxe-gantt--resizable-split-number-left{right:0}.vxe-gantt--resizable-split-number-right{left:1px}.vxe-gantt.is--loading>.vxe-gantt-view--scroll-x-virtual{visibility:hidden}.vxe-gantt.is--loading>.vxe-gantt-view--layout-wrapper>.vxe-gantt-view--scroll-y-virtual{visibility:hidden}.vxe-gantt .vxe-gantt-view--scroll-x-virtual{height:0}.vxe-gantt .vxe-gantt-view--scroll-y-virtual{width:0}.vxe-gantt .vxe-gantt-view--scroll-x-virtual,.vxe-gantt .vxe-gantt-view--scroll-y-virtual{visibility:hidden;position:relative;flex-shrink:0;z-index:7}.vxe-gantt .vxe-gantt-view--scroll-x-handle,.vxe-gantt .vxe-gantt-view--scroll-x-left-corner,.vxe-gantt .vxe-gantt-view--scroll-x-right-corner,.vxe-gantt .vxe-gantt-view--scroll-x-wrapper,.vxe-gantt .vxe-gantt-view--scroll-y-bottom-corner,.vxe-gantt .vxe-gantt-view--scroll-y-handle,.vxe-gantt .vxe-gantt-view--scroll-y-top-corner,.vxe-gantt .vxe-gantt-view--scroll-y-wrapper{position:absolute}.vxe-gantt .vxe-gantt-view--scroll-x-handle,.vxe-gantt .vxe-gantt-view--scroll-x-wrapper{width:100%;left:0;bottom:0}.vxe-gantt .vxe-gantt-view--scroll-x-handle{overflow-y:hidden;overflow-x:scroll;height:18px}.vxe-gantt .vxe-gantt-view--scroll-x-wrapper{height:100%}.vxe-gantt .vxe-gantt-view--scroll-y-handle,.vxe-gantt .vxe-gantt-view--scroll-y-wrapper{width:100%;height:100%;right:0;top:0}.vxe-gantt .vxe-gantt-view--scroll-y-handle{overflow-y:scroll;overflow-x:hidden;width:18px;height:100%}.vxe-gantt .vxe-gantt-view--scroll-x-space{height:1px}.vxe-gantt .vxe-gantt-view--scroll-y-space{width:1px}.vxe-gantt .vxe-gantt-view--scroll-x-left-corner,.vxe-gantt .vxe-gantt-view--scroll-x-right-corner,.vxe-gantt .vxe-gantt-view--scroll-y-bottom-corner,.vxe-gantt .vxe-gantt-view--scroll-y-top-corner{display:none;position:absolute}.vxe-gantt .vxe-gantt-view--scroll-x-left-corner,.vxe-gantt .vxe-gantt-view--scroll-x-right-corner{bottom:0;width:0;height:100%}.vxe-gantt .vxe-gantt-view--scroll-x-left-corner::before,.vxe-gantt .vxe-gantt-view--scroll-x-right-corner::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-width:var(--vxe-ui-table-border-width);border-style:solid;border-color:var(--vxe-ui-table-border-color)}.vxe-gantt .vxe-gantt-view--scroll-x-left-corner{left:0}.vxe-gantt .vxe-gantt-view--scroll-x-right-corner{right:0}.vxe-gantt.sy-pos--right .vxe-gantt-view--scroll-x-right-corner{right:1px}.vxe-gantt.sy-pos--right .vxe-gantt-view--scroll-x-right-corner::before{border-right:0}.vxe-gantt.sx-pos--bottom .vxe-gantt-view--scroll-x-right-corner{bottom:1px}.vxe-gantt.sx-pos--bottom .vxe-gantt-view--scroll-x-right-corner::before{border-bottom:0}.vxe-gantt .vxe-gantt-view--scroll-y-top-corner{background-color:var(--vxe-ui-table-header-background-color)}.vxe-gantt .vxe-gantt-view--scroll-y-bottom-corner,.vxe-gantt .vxe-gantt-view--scroll-y-top-corner{top:0;right:0;width:100%;height:0}.vxe-gantt .vxe-gantt-view--scroll-y-bottom-corner{margin-top:-1px}.vxe-gantt-view--layout-wrapper{display:flex;flex-direction:row;background-color:var(--vxe-ui-layout-background-color)}.vxe-gantt-view--viewport-wrapper{position:relative;overflow:hidden;flex-grow:1}.vxe-gantt-view--render-vars{width:0;height:0;overflow:hidden}.vxe-gantt-view--column-info{width:var(--vxe-ui-gantt-view-default-cell-width)}.vxe-gantt-view{flex-grow:1;overflow:hidden}.vxe-gantt-view .vxe-body--x-space{width:100%;height:1px;margin-bottom:-1px}.vxe-gantt-view .vxe-body--y-space{width:0;float:left}.vxe-gantt-view--header-table{height:100%}.vxe-gantt-view--body-table,.vxe-gantt-view--header-table{border:0;border-spacing:0;border-collapse:separate;table-layout:fixed}.vxe-gantt-view--body-table col,.vxe-gantt-view--header-table col{width:var(--vxe-ui-gantt-view-default-cell-width)}.vxe-gantt-view--body-wrapper,.vxe-gantt-view--header-wrapper{overflow:hidden}.vxe-gantt-view--header-inner-wrapper{overflow-y:hidden;overflow-x:scroll}.vxe-gantt-view--body-inner-wrapper{overflow-y:auto;overflow-x:auto}.vxe-gantt-view--body-inner-wrapper,.vxe-gantt-view--header-inner-wrapper{position:relative;width:100%;height:100%;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.vxe-gantt-view--header-column{text-align:center;font-size:1em}.vxe-gantt-view--body-column{height:48px}.vxe-gantt-view--body-column,.vxe-gantt-view--footer-column,.vxe-gantt-view--header-column{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-gantt-view.mode--day .vxe-gantt-view--header-column{height:50%}.vxe-gantt{font-size:var(--vxe-ui-font-size-default)}.vxe-gantt.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-gantt.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-gantt.size--mini{font-size:var(--vxe-ui-font-size-mini)}

package/lib/vxe-ui/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,10 +13,11 @@ Object.keys(_ui).forEach(function (key) {
   if (key in exports && exports[key] === _ui[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function () {
+    get: function get() {
       return _ui[key];
     }
   });
 });
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var _default = exports.default = _ui.default;

package/lib/vxe-ui/index.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var _exportNames={},_ui=(exports.default=void 0,_interopRequireWildcard(require("../ui")));function _interopRequireWildcard(e,t){var i,n;return"function"==typeof WeakMap&&(i=new WeakMap,n=new WeakMap),(_interopRequireWildcard=function(t,e){if(!e&&t&&t.__esModule)return t;var r,o,u={__proto__:null,default:t};if(null!==t&&("object"==typeof t||"function"==typeof t)){if(r=e?n:i){if(r.has(t))return r.get(t);r.set(t,u)}for(let e in t)"default"!==e&&{}.hasOwnProperty.call(t,e)&&((o=(r=Object.defineProperty)&&Object.getOwnPropertyDescriptor(t,e))&&(o.get||o.set)?r(u,e,o):u[e]=t[e])}return u})(e,t)}Object.keys(_ui).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_ui[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _ui[e]}})});var _default=exports.default=_ui.default;
+function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(exports,"__esModule",{value:!0});var _exportNames={},_ui=(exports.default=void 0,_interopRequireWildcard(require("../ui")));function _getRequireWildcardCache(e){var t,r;return"function"!=typeof WeakMap?null:(t=new WeakMap,r=new WeakMap,(_getRequireWildcardCache=function(e){return e?r:t})(e))}function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=_typeof(e)&&"function"!=typeof e)return{default:e};t=_getRequireWildcardCache(t);if(t&&t.has(e))return t.get(e);var r,o,n={__proto__:null},u=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((o=u?Object.getOwnPropertyDescriptor(e,r):null)&&(o.get||o.set)?Object.defineProperty(n,r,o):n[r]=e[r]);return n.default=e,t&&t.set(e,n),n}Object.keys(_ui).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_ui[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _ui[e]}})});var _default=exports.default=_ui.default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vxe-gantt",
-  "version": "0.0.3",
-  "description": "A Gantt chart based on Vxe UI and for use on PC systems",
+  "version": "3.0.0-beta.0",
+  "description": "A vue based gantt component",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
     "serve": "vue-cli-service serve",
@@ -20,13 +20,13 @@
   ],
   "main": "lib/index.common.js",
   "module": "es/index.esm.js",
-  "unpkg": "lib/index.umd.js",
+  "unpkg": "lib/index.umd.js", 
   "jsdelivr": "lib/index.umd.js",
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "peerDependencies": {
-    "vxe-pc-ui": "^4.8.0",
-    "vxe-table": "^4.15.0"
+    "vxe-pc-ui": "^3.8.0",
+    "vxe-table": "^3.17.0"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.21.0",
@@ -57,14 +57,15 @@
     "gulp-sourcemaps": "^3.0.0",
     "gulp-typescript": "^5.0.1",
     "gulp-uglify": "^3.0.2",
-    "postcss": "^8.4.38",
     "sass": "^1.80.4",
     "sass-loader": "^14.2.1",
-    "typescript": "~4.9.5",
-    "vue": "3.4.27",
-    "vue-router": "~4.5.1",
-    "vxe-pc-ui": "^4.8.13",
-    "vxe-table": "^4.15.6"
+    "typescript": "~4.5.5",
+    "vue-template-compiler": "2.6.14",
+    "vue": "~2.6.14",
+    "vue-i18n": "^8.15.1",
+    "vue-router": "^3.5.1",
+    "vxe-pc-ui": "^3.8.15",
+    "vxe-table": "^3.17.8"
   },
   "vetur": {
     "tags": "helper/vetur/tags.json",
@@ -87,6 +88,5 @@
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/x-extends/vxe-gantt/issues"
-  },
-  "homepage": "https://github.com/x-extends/vxe-gantt/"
+  }
 }

package/packages/components.ts

@@ -1,19 +1,22 @@
-import { App } from 'vue'
-import { setConfig, VxeGlobalConfig } from '@vxe-ui/core'
-
+import { VueConstructor } from 'vue'
+import VxeUI from './ui'
 import VxeGantt from './gantt'
 
+import type { VxeGlobalConfig } from 'vxe-pc-ui'
+
+const { setConfig } = VxeUI
+
 const components = [
   VxeGantt
 ]
 
-export function install (app: App, options?: VxeGlobalConfig) {
+export function install (app: VueConstructor, options?: VxeGlobalConfig) {
   setConfig(options)
 
   components.forEach(component => app.use(component))
 }
 
-export * from './ui'
+export { VxeUI }
 
 // Components
 export * from './gantt'

package/packages/gantt/index.ts

@@ -1,9 +1,9 @@
-import { App } from 'vue'
+import { VueConstructor } from 'vue'
 import { VxeUI } from '@vxe-ui/core'
 import VxeGanttComponent from './src/gantt'
 
 export const VxeGantt = Object.assign({}, VxeGanttComponent, {
-  install (app: App) {
+  install (app: VueConstructor) {
     app.component(VxeGanttComponent.name as string, VxeGanttComponent)
   }
 })

package/packages/gantt/src/gantt-body.ts

@@ -1,40 +1,53 @@
-import { h, inject, VNode, ref, Ref, onMounted, onUnmounted } from 'vue'
+import { VNode, CreateElement } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import { getCellRestHeight } from './util'
 import GanttViewChartComponent from './gantt-chart'
 
-import type { VxeTablePropTypes } from 'vxe-table'
+import type { VxeTablePropTypes, TableInternalData } from 'vxe-table'
 import type { VxeGanttViewConstructor, VxeGanttViewPrivateMethods, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
 
 export default defineVxeComponent({
   name: 'VxeGanttViewBody',
-  setup () {
-    const $xeGantt = inject('$xeGantt', {} as (VxeGanttConstructor & VxeGanttPrivateMethods))
-    const $xeGanttView = inject('$xeGanttView', {} as VxeGanttViewConstructor & VxeGanttViewPrivateMethods)
-
-    const { reactData, internalData } = $xeGanttView
-    const { refTable } = $xeGantt.getRefMaps()
-
-    const refElem = ref() as Ref<HTMLDivElement>
-    const refBodyScroll = ref() as Ref<HTMLDivElement>
-    const refBodyTable = ref() as Ref<HTMLTableElement>
-    const refBodyXSpace = ref() as Ref<HTMLDivElement>
-    const refBodyYSpace = ref() as Ref<HTMLDivElement>
-
-    const renderRows = () => {
-      const $xeTable = refTable.value
+  inject: {
+    $xeGantt: {
+      default: null
+    },
+    $xeGanttView: {
+      default: null
+    }
+  },
+  props: {},
+  data () {
+    return {}
+  },
+  computed: {
+    ...({} as {
+      $xeGantt(): (VxeGanttConstructor & VxeGanttPrivateMethods)
+      $xeGanttView(): (VxeGanttViewConstructor & VxeGanttViewPrivateMethods)
+    })
+  },
+  methods: {
+    //
+    // Render
+    //
+    renderRows (h: CreateElement) {
+      const _vm = this
+      const $xeGantt = _vm.$xeGantt
+      const $xeGanttView = _vm.$xeGanttView
+      const $xeTable = $xeGanttView.internalData.xeTable
 
-      const fullAllDataRowIdData = $xeTable ? $xeTable.internalData.fullAllDataRowIdData : {}
+      const tableInternalData = ($xeTable ? $xeTable as unknown : {}) as TableInternalData
+      const fullAllDataRowIdData = tableInternalData.fullAllDataRowIdData || {}
       let cellOpts: VxeTablePropTypes.CellConfig = {}
       let rowOpts : VxeTablePropTypes.RowConfig = {}
       let defaultRowHeight = 0
       if ($xeTable) {
-        const { computeCellOpts, computeRowOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps()
-        cellOpts = computeCellOpts.value
-        rowOpts = computeRowOpts.value
-        defaultRowHeight = computeDefaultRowHeight.value
+        cellOpts = $xeTable.computeCellOpts
+        rowOpts = $xeTable.computeRowOpts
+        defaultRowHeight = $xeTable.computeDefaultRowHeight
       }
 
+      const { reactData } = $xeGanttView
       const { tableData, tableColumn } = reactData
 
       const trVNs:VNode[] = []
@@ -51,69 +64,92 @@ export default defineVxeComponent({
               class: 'vxe-gantt-view--body-column',
               style: {
                 height: `${cellHeight}px`
+              },
+              on: {
+                click (evnt: MouseEvent) {
+                  $xeGantt.handleTaskCellClickEvent(evnt, { row })
+                },
+                dblclick (evnt: MouseEvent) {
+                  $xeGantt.handleTaskCellDblclickEvent(evnt, { row })
+                }
               }
             })
           }))
         )
       })
       return trVNs
-    }
+    },
+    renderVN (h: CreateElement) {
+      const _vm = this
+      const $xeGanttView = _vm.$xeGanttView
+      const { reactData } = $xeGanttView
 
-    const renderVN = () => {
-      const { tableColumn } = reactData
+      const { tableColumn, viewCellWidth } = reactData
       return h('div', {
-        ref: refElem,
+        ref: 'refElem',
         class: 'vxe-gantt-view--body-wrapper'
       }, [
         h('div', {
-          ref: refBodyScroll,
+          ref: 'refBodyScroll',
           class: 'vxe-gantt-view--body-inner-wrapper',
-          onScroll: $xeGanttView.triggerBodyScrollEvent
+          on: {
+            scroll: $xeGanttView.triggerBodyScrollEvent
+          }
         }, [
           h('div', {
-            ref: refBodyXSpace,
+            ref: 'refBodyXSpace',
             class: 'vxe-body--x-space'
           }),
           h('div', {
-            ref: refBodyYSpace,
+            ref: 'refBodyYSpace',
             class: 'vxe-body--y-space'
           }),
           h('table', {
-            ref: refBodyTable,
+            ref: 'refBodyTable',
             class: 'vxe-gantt-view--body-table'
           }, [
             h('colgroup', {}, tableColumn.map((column, cIndex) => {
               return h('col', {
-                key: cIndex
+                key: cIndex,
+                style: {
+                  width: `${viewCellWidth}px`
+                }
               })
             })),
-            h('tbody', {}, renderRows())
+            h('tbody', {}, _vm.renderRows(h))
           ]),
           h(GanttViewChartComponent)
         ])
       ])
     }
+  },
+  mounted () {
+    const _vm = this
+    const $xeGanttView = _vm.$xeGanttView
+    const { internalData } = $xeGanttView
 
-    onMounted(() => {
-      const { elemStore } = internalData
-      const prefix = 'main-body-'
-      elemStore[`${prefix}wrapper`] = refElem
-      elemStore[`${prefix}scroll`] = refBodyScroll
-      elemStore[`${prefix}table`] = refBodyTable
-      elemStore[`${prefix}xSpace`] = refBodyXSpace
-      elemStore[`${prefix}ySpace`] = refBodyYSpace
-    })
-
-    onUnmounted(() => {
-      const { elemStore } = internalData
-      const prefix = 'main-body-'
-      elemStore[`${prefix}wrapper`] = null
-      elemStore[`${prefix}scroll`] = null
-      elemStore[`${prefix}table`] = null
-      elemStore[`${prefix}xSpace`] = null
-      elemStore[`${prefix}ySpace`] = null
-    })
+    const { elemStore } = internalData
+    const prefix = 'main-body-'
+    elemStore[`${prefix}wrapper`] = _vm.$refs.refElem as HTMLDivElement
+    elemStore[`${prefix}scroll`] = _vm.$refs.refBodyScroll as HTMLDivElement
+    elemStore[`${prefix}table`] = _vm.$refs.refBodyTable as HTMLDivElement
+    elemStore[`${prefix}xSpace`] = _vm.$refs.refBodyXSpace as HTMLDivElement
+    elemStore[`${prefix}ySpace`] = _vm.$refs.refBodyYSpace as HTMLDivElement
+  },
+  destroyed () {
+    const _vm = this
+    const $xeGanttView = _vm.$xeGanttView
+    const { internalData } = $xeGanttView
 
-    return renderVN
+    const { elemStore } = internalData
+    const prefix = 'main-body-'
+    elemStore[`${prefix}wrapper`] = null
+    elemStore[`${prefix}scroll`] = null
+    elemStore[`${prefix}table`] = null
+    elemStore[`${prefix}xSpace`] = null
+    elemStore[`${prefix}ySpace`] = null
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
   }
 })

package/packages/gantt/src/gantt-chart.ts

@@ -1,92 +1,143 @@
-import { h, inject, VNode, ref, Ref, onMounted, onUnmounted } from 'vue'
+import { VNode, CreateElement } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
+import { VxeUI } from '@vxe-ui/core'
 import XEUtils from 'xe-utils'
 import { getCellRestHeight } from './util'
+import { getStringValue } from '../../ui/src/utils'
 
-import type { VxeTablePropTypes } from 'vxe-table'
+import type { VxeTablePropTypes, TableInternalData } from 'vxe-table'
 import type { VxeGanttViewConstructor, VxeGanttViewPrivateMethods, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
 
+const { renderEmptyElement } = VxeUI
+
 export default defineVxeComponent({
   name: 'VxeGanttViewChart',
-  setup () {
-    const $xeGantt = inject('$xeGantt', {} as (VxeGanttConstructor & VxeGanttPrivateMethods))
-    const $xeGanttView = inject('$xeGanttView', {} as VxeGanttViewConstructor & VxeGanttViewPrivateMethods)
-
-    const { reactData, internalData } = $xeGanttView
-    const { refTable } = $xeGantt.getRefMaps()
-    const { computeProgressField } = $xeGantt.getComputeMaps()
-
-    const refElem = ref() as Ref<HTMLDivElement>
-
-    const renderVN = () => {
-      const $xeTable = refTable.value
+  inject: {
+    $xeGantt: {
+      default: null
+    },
+    $xeGanttView: {
+      default: null
+    }
+  },
+  props: {},
+  data () {
+    return {}
+  },
+  computed: {
+    ...({} as {
+      $xeGantt(): (VxeGanttConstructor & VxeGanttPrivateMethods)
+      $xeGanttView(): (VxeGanttViewConstructor & VxeGanttViewPrivateMethods)
+    })
+  },
+  methods: {
+    //
+    // Render
+    //
+    renderVN (h: CreateElement) {
+      const _vm = this
+      const $xeGantt = _vm.$xeGantt
+      const $xeGanttView = _vm.$xeGanttView
+      const $xeTable = $xeGanttView.internalData.xeTable
 
-      const fullAllDataRowIdData = $xeTable ? $xeTable.internalData.fullAllDataRowIdData : {}
+      const tableInternalData = ($xeTable ? $xeTable as unknown : {}) as TableInternalData
+      const fullAllDataRowIdData = tableInternalData.fullAllDataRowIdData || {}
       let cellOpts: VxeTablePropTypes.CellConfig = {}
       let rowOpts : VxeTablePropTypes.RowConfig = {}
       let defaultRowHeight = 0
       if ($xeTable) {
-        const { computeCellOpts, computeRowOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps()
-        cellOpts = computeCellOpts.value
-        rowOpts = computeRowOpts.value
-        defaultRowHeight = computeDefaultRowHeight.value
+        cellOpts = $xeTable.computeCellOpts
+        rowOpts = $xeTable.computeRowOpts
+        defaultRowHeight = $xeTable.computeDefaultRowHeight
       }
 
+      const { reactData } = $xeGanttView
       const { tableData } = reactData
-      const progressField = computeProgressField.value
+      const titleField = $xeGantt.computeTitleField
+      const progressField = $xeGantt.computeProgressField
+      const taskBarOpts = $xeGantt.computeTaskBarOpts
+      const { showProgress, showContent, contentMethod, barStyle } = taskBarOpts
+      const { round } = barStyle || {}
 
-      const trVNs:VNode[] = []
+      const trVNs: VNode[] = []
       tableData.forEach((row, rIndex) => {
         const rowid = $xeTable ? $xeTable.getRowid(row) : ''
         const rowRest = fullAllDataRowIdData[rowid] || {}
         const cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight)
-        const progressValue = XEUtils.get(row, progressField)
+        let title = getStringValue(XEUtils.get(row, titleField))
+        const progressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(row, progressField)))) : 0
+        if (contentMethod) {
+          title = getStringValue(contentMethod({ row, title }))
+        }
         trVNs.push(
           h('div', {
             key: rIndex,
-            rowid,
-            class: 'vxe-gantt-view--chart-row',
+            attrs: {
+              rowid
+            },
+            class: ['vxe-gantt-view--chart-row', {
+              'is--round': round
+            }],
             style: {
               height: `${cellHeight}px`
             }
           }, [
             h('div', {
               class: 'vxe-gantt-view--chart-bar',
-              rowid
+              attrs: {
+                rowid
+              },
+              on: {
+                click (evnt: MouseEvent) {
+                  $xeGantt.handleTaskBarClickEvent(evnt, { row })
+                },
+                dblclick (evnt: MouseEvent) {
+                  $xeGantt.handleTaskBarDblclickEvent(evnt, { row })
+                }
+              }
             }, [
-              h('div', {
-                class: 'vxe-gantt-view--chart-progress',
-                style: progressValue
-                  ? {
-                      width: `${progressValue}%`
-                    }
-                  : undefined
-              }),
-              h('div', {
-                class: 'vxe-gantt-view--chart-content'
-              })
+              showProgress
+                ? h('div', {
+                  class: 'vxe-gantt-view--chart-progress',
+                  style: {
+                    width: `${progressValue || 0}%`
+                  }
+                })
+                : renderEmptyElement($xeGantt),
+              showContent
+                ? h('div', {
+                  class: 'vxe-gantt-view--chart-content'
+                }, title)
+                : renderEmptyElement($xeGantt)
             ])
           ])
         )
       })
       return h('div', {
-        ref: refElem,
+        ref: 'refElem',
         class: 'vxe-gantt-view--chart-wrapper'
       }, trVNs)
     }
+  },
+  mounted () {
+    const _vm = this
+    const $xeGanttView = _vm.$xeGanttView
+    const { internalData } = $xeGanttView
 
-    onMounted(() => {
-      const { elemStore } = internalData
-      const prefix = 'main-chart-'
-      elemStore[`${prefix}wrapper`] = refElem
-    })
-
-    onUnmounted(() => {
-      const { elemStore } = internalData
-      const prefix = 'main-chart-'
-      elemStore[`${prefix}wrapper`] = null
-    })
+    const { elemStore } = internalData
+    const prefix = 'main-chart-'
+    elemStore[`${prefix}wrapper`] = _vm.$refs.refElem as HTMLDivElement
+  },
+  destroyed () {
+    const _vm = this
+    const $xeGanttView = _vm.$xeGanttView
+    const { internalData } = $xeGanttView
 
-    return renderVN
+    const { elemStore } = internalData
+    const prefix = 'main-chart-'
+    elemStore[`${prefix}wrapper`] = null
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
   }
 })