vxe-gantt 0.0.3 → 4.0.0-beta.1

package/packages/gantt/src/props.ts

@@ -9,5 +9,6 @@ export const ganttProps = {
   layouts: Array as PropType<VxeGanttPropTypes.Layouts>,
   taskConfig: Object as PropType<VxeGanttPropTypes.TaskConfig>,
   taskViewConfig: Object as PropType<VxeGanttPropTypes.TaskViewConfig>,
-  taskBarConfig: Object as PropType<VxeGanttPropTypes.TaskBarConfig>
+  taskBarConfig: Object as PropType<VxeGanttPropTypes.TaskBarConfig>,
+  taskSplitConfig: Object as PropType<VxeGanttPropTypes.TaskSplitConfig>
 }

package/packages/gantt/src/table-props.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue'
-import { VxeUI } from '../../ui'
+import { VxeUI } from '@vxe-ui/core'
 
 import type { VxeTablePropTypes } from 'vxe-table'
 

package/packages/ui/index.ts

@@ -1,4 +1,6 @@
-import { VxeUI, setConfig, setIcon } from '@vxe-ui/core'
+import { VxeUI } from '@vxe-ui/core'
+
+const { setConfig, setIcon } = VxeUI
 
 VxeUI.ganttVersion = process.env.VUE_APP_VXE_VERSION as string
 
@@ -39,6 +41,12 @@ setConfig({
       // afterDelete: null,
       // beforeSave: null,
       // afterSave: null
+    },
+    taskSplitConfig: {
+      enabled: true,
+      resize: true,
+      showCollapseTableButton: true,
+      showCollapseTaskButton: true
     }
   }
 })

package/packages/ui/src/log.ts

@@ -1,4 +1,6 @@
-import { log } from '@vxe-ui/core'
+import { VxeUI } from '@vxe-ui/core'
+
+const { log } = VxeUI
 
 const version = `gantt v${process.env.VUE_APP_VXE_VERSION}`
 

package/packages/ui/src/utils.ts

@@ -48,3 +48,7 @@ export function formatText (value: any, placeholder?: any) {
 export function eqEmptyValue (cellValue: any) {
   return cellValue === '' || XEUtils.eqNull(cellValue)
 }
+
+export function getStringValue (cellValue: any) {
+  return eqEmptyValue(cellValue) ? '' : cellValue
+}

package/styles/components/gantt-module/gantt-chart.scss

@@ -6,19 +6,31 @@
 }
 .vxe-gantt-view--chart-row {
   position: relative;
+  &.is--round {
+    & > .vxe-gantt-view--chart-bar {
+      border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
+      &:hover {
+        &::after {
+          border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
+        }
+      }
+      & > .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;
-  width: 100px;
   top: 50%;
   left: 0;
   color: #ffffff;
   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);
+  background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
   pointer-events: all;
   &:hover {
     &::after {
@@ -29,18 +41,25 @@
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.1);
-      border-radius: var(--vxe-ui-base-border-radius);
     }
   }
 }
 .vxe-gantt-view--chart-progress {
   flex-shrink: 0;
-  width: 40px;
+  width: 0;
+  height: 100%;
   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);
+  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 {
-  flex-grow: 1;
-  text-align: right;
+  position: absolute;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.9em;
+  padding: 0 0.6em;
 }

package/styles/components/gantt.scss

@@ -75,9 +75,11 @@
   }
   .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);
+    &.is--resize {
+      cursor: col-resize;
+    }
   }
   &.show--left {
     .vxe-gantt--table-wrapper {
@@ -87,7 +89,7 @@
       .vxe-gantt--table-wrapper {
         flex-grow: unset;
         flex-shrink: 0;
-        width: 30%;
+        width: var(--vxe-ui-gantt-view-table-default-width);
       }
     }
   }
@@ -279,6 +281,12 @@
   transform: translate(-50%, -50%);
   z-index: 15;
   pointer-events: none;
+  & > div {
+    margin-top: 1em;
+    &:first-child {
+      margin-top: 0;
+    }
+  }
 }
 .vxe-gantt--view-split-bar-left-btn,
 .vxe-gantt--view-split-bar-right-btn {
@@ -304,9 +312,6 @@
     transform: scale(0.9);
   }
 }
-.vxe-gantt--view-split-bar-right-btn {
-  margin-top: 1em;
-}
 .vxe-gantt--resizable-split-tip {
   display: none;
   position: absolute;
@@ -496,7 +501,7 @@
   overflow: hidden;
 }
 .vxe-gantt-view--column-info {
-  width: var(--vxe-ui-gantt-view-column-width);
+  width: var(--vxe-ui-gantt-view-default-cell-width);
 }
 
 // 任务视图
@@ -523,7 +528,7 @@
   border-collapse: separate;
   table-layout: fixed;
   col {
-    width: var(--vxe-ui-gantt-view-column-width);
+    width: var(--vxe-ui-gantt-view-default-cell-width);
   }
 }
 .vxe-gantt-view--header-wrapper,

package/styles/theme/base.scss

@@ -1,7 +1,11 @@
 :root {
   /*gantt*/
-  --vxe-ui-gantt-view-column-width: 40px;
+  --vxe-ui-gantt-view-default-cell-width: 40px;
   --vxe-ui-gantt-view-chart-bar-height: 1.6em;
   --vxe-ui-gantt-view-split-bar-width: 10px;
   --vxe-ui-gantt-view-split-bar-height: 6.8em;
+  --vxe-ui-gantt-view-table-default-width: 30%;
+  --vxe-ui-gantt-view-task-bar-border-radius: calc(var(--vxe-ui-gantt-view-split-bar-height) / 2);
+  --vxe-ui-gantt-view-task-bar-background-color: var(--vxe-ui-font-primary-lighten-color);
+  --vxe-ui-gantt-view-task-bar-completed-background-color: var(--vxe-ui-font-primary-color);
 }