vxe-gantt 0.0.2 → 3.0.0-beta.0

package/packages/gantt/src/util.ts

@@ -0,0 +1,12 @@
+import type { VxeTableDefines, VxeTablePropTypes } from 'vxe-table'
+
+export function getRefElem (refEl: any) {
+  if (refEl) {
+    return (refEl.$el || refEl) as HTMLElement
+  }
+  return null
+}
+
+export function getCellRestHeight (rowRest: VxeTableDefines.RowCacheItem, cellOpts: VxeTablePropTypes.CellConfig, rowOpts: VxeTablePropTypes.RowConfig, defaultRowHeight: number) {
+  return rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight
+}

package/packages/index.ts

@@ -1,4 +1,8 @@
-import * as VxeUIExport from './components'
+import * as VxeUIGanttExport from './components'
 
 export * from './components'
-export default VxeUIExport
+
+/**
+ * A vue based PC component library
+ */
+export default VxeUIGanttExport

package/packages/ui/index.ts

@@ -1,12 +1,64 @@
-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
 
 setConfig({
-  gantt: {}
+  gantt: {
+    // size: null,
+    // zoomConfig: {
+    //   escRestore: true
+    // },
+    formConfig: {
+      enabled: true
+    },
+    pagerConfig: {
+      enabled: true
+      // perfect: false
+    },
+    toolbarConfig: {
+      enabled: true
+      // perfect: false
+    },
+    proxyConfig: {
+      enabled: true,
+      autoLoad: true,
+      showLoading: true,
+      showResponseMsg: true,
+      showActionMsg: true,
+      response: {
+        list: null,
+        result: 'result',
+        total: 'page.total',
+        message: 'message'
+      }
+      // beforeItem: null,
+      // beforeColumn: null,
+      // beforeQuery: null,
+      // afterQuery: null,
+      // beforeDelete: null,
+      // afterDelete: null,
+      // beforeSave: null,
+      // afterSave: null
+    },
+    taskSplitConfig: {
+      enabled: true,
+      resize: true,
+      showCollapseTableButton: true,
+      showCollapseTaskButton: true
+    }
+  }
 })
 
-setIcon({})
+const iconPrefix = 'vxe-icon-'
+
+setIcon({
+  // gantt
+  GANTT_VIEW_LEFT_OPEN: iconPrefix + 'arrow-left',
+  GANTT_VIEW_LEFT_CLOSE: iconPrefix + 'arrow-right',
+  GANTT_VIEW_RIGHT_OPEN: iconPrefix + 'arrow-right',
+  GANTT_VIEW_RIGHT_CLOSE: iconPrefix + 'arrow-left'
+})
 
-export * from '@vxe-ui/core'
 export default VxeUI

package/packages/ui/src/comp.ts

@@ -1,3 +1,3 @@
-import { defineComponent } from 'vue'
+import Vue from 'vue'
 
-export const defineVxeComponent = defineComponent
+export const defineVxeComponent = ((options: any) => options) as typeof Vue.extend

package/packages/ui/src/dom.ts

@@ -1,5 +1,7 @@
 import XEUtils from 'xe-utils'
 
+const reClsMap: { [key: string]: any } = {}
+
 let tpImgEl: HTMLImageElement | undefined
 
 export function initTpImg () {
@@ -17,7 +19,9 @@ export function getTpImg () {
   return tpImgEl
 }
 
-const reClsMap: { [key: string]: any } = {}
+export function getPropClass (property: any, params: any) {
+  return property ? XEUtils.isFunction(property) ? property(params) : property : ''
+}
 
 function getClsRE (cls: any) {
   if (!reClsMap[cls]) {
@@ -71,13 +75,20 @@ export function hasControlKey (evnt: KeyboardEvent | MouseEvent | DragEvent) {
   return evnt.ctrlKey || evnt.metaKey
 }
 
-export function toCssUnit (val?: number | string | null, unit = 'px') {
+export function toCssUnit (val?: number | string, unit = 'px') {
   if (XEUtils.isNumber(val) || /^\d+$/.test(`${val}`)) {
     return `${val}${unit}`
   }
   return `${val || ''}`
 }
 
+export function queryElement (elem: HTMLTableCellElement, selector: string) {
+  if (elem) {
+    return elem.querySelector<HTMLElement>(selector)
+  }
+  return null
+}
+
 export function getDomNode () {
   const documentElement = document.documentElement
   const bodyElem = document.body
@@ -89,6 +100,46 @@ export function getDomNode () {
   }
 }
 
+export function getOffsetHeight (elem?: HTMLElement) {
+  return elem ? elem.offsetHeight : 0
+}
+
+export function getPaddingTopBottomSize (elem: HTMLElement) {
+  if (elem) {
+    const computedStyle = getComputedStyle(elem)
+    const paddingTop = XEUtils.toNumber(computedStyle.paddingTop)
+    const paddingBottom = XEUtils.toNumber(computedStyle.paddingBottom)
+    return paddingTop + paddingBottom
+  }
+  return 0
+}
+
+export function setScrollTop (elem: HTMLElement | null | undefined, scrollTop: number) {
+  if (elem) {
+    elem.scrollTop = scrollTop
+  }
+}
+
+export function setScrollLeft (elem: HTMLElement | null | undefined, scrollLeft: number) {
+  if (elem) {
+    elem.scrollLeft = scrollLeft
+  }
+}
+
+// export function setScrollLeftAndTop (elem: HTMLElement | null, scrollLeft: number, scrollTop: number) {
+//   if (elem) {
+//     elem.scrollLeft = scrollLeft
+//     elem.scrollTop = scrollTop
+//   }
+// }
+
+export function updateCellTitle (overflowElem: any, column: any) {
+  const content = column.type === 'html' ? overflowElem.innerText : overflowElem.textContent
+  if (overflowElem.getAttribute('title') !== content) {
+    overflowElem.setAttribute('title', content)
+  }
+}
+
 /**
  * 检查触发源是否属于目标节点
  */
@@ -121,16 +172,6 @@ export function getAbsolutePos (elem: any) {
   return { boundingTop, top: scrollTop + boundingTop, boundingLeft, left: scrollLeft + boundingLeft, visibleHeight, visibleWidth }
 }
 
-export function getPaddingTopBottomSize (elem: HTMLElement) {
-  if (elem) {
-    const computedStyle = getComputedStyle(elem)
-    const paddingTop = XEUtils.toNumber(computedStyle.paddingTop)
-    const paddingBottom = XEUtils.toNumber(computedStyle.paddingBottom)
-    return paddingTop + paddingBottom
-  }
-  return 0
-}
-
 const scrollIntoViewIfNeeded = 'scrollIntoViewIfNeeded'
 const scrollIntoView = 'scrollIntoView'
 
@@ -153,101 +194,3 @@ export function triggerEvent (targetElem: Element, type: string) {
 export function isNodeElement (elem: any): elem is HTMLElement {
   return elem && elem.nodeType === 1
 }
-
-export function updatePanelPlacement (targetElem: HTMLElement | null | undefined, panelElem: HTMLElement | null | undefined, options: {
-  placement?: '' | 'top' | 'bottom' | null
-  teleportTo?: boolean
-  marginSize?: number
-}) {
-  const { placement, teleportTo, marginSize } = Object.assign({ teleportTo: false, marginSize: 32 }, options)
-  let panelPlacement: 'top' | 'bottom' = 'bottom'
-  let top: number | '' = ''
-  let bottom: number | '' = ''
-  let left: number | '' = ''
-  const right: number | '' = ''
-  let minWidth: number | '' = ''
-  const stys: Record<string, string> = {}
-  if (panelElem && targetElem) {
-    const documentElement = document.documentElement
-    const bodyElem = document.body
-    const targetHeight = targetElem.offsetHeight
-    const panelHeight = panelElem.offsetHeight
-    const panelWidth = panelElem.offsetWidth
-
-    const panelRect = panelElem.getBoundingClientRect()
-    const targetRect = targetElem.getBoundingClientRect()
-    const visibleHeight = documentElement.clientHeight || bodyElem.clientHeight
-    const visibleWidth = documentElement.clientWidth || bodyElem.clientWidth
-    minWidth = targetElem.offsetWidth
-    if (teleportTo) {
-      left = targetRect.left
-      top = targetRect.top + targetHeight
-      if (placement === 'top') {
-        panelPlacement = 'top'
-        top = targetRect.top - panelHeight
-      } else if (!placement) {
-        // 如果下面不够放，则向上
-        if (top + panelHeight + marginSize > visibleHeight) {
-          panelPlacement = 'top'
-          top = targetRect.top - panelHeight
-        }
-        // 如果上面不够放，则向下（优先）
-        if (top < marginSize) {
-          panelPlacement = 'bottom'
-          top = targetRect.top + targetHeight
-        }
-      }
-      // 如果溢出右边
-      if (left + panelWidth + marginSize > visibleWidth) {
-        left -= left + panelWidth + marginSize - visibleWidth
-      }
-      // 如果溢出左边
-      if (left < marginSize) {
-        left = marginSize
-      }
-    } else {
-      if (placement === 'top') {
-        panelPlacement = 'top'
-        bottom = targetHeight
-      } else if (!placement) {
-        // 如果下面不够放，则向上
-        top = targetHeight
-        if (targetRect.top + targetRect.height + marginSize > visibleHeight) {
-          // 如果上面不够放，则向下（优先）
-          if (targetRect.top - targetHeight - panelHeight > marginSize) {
-            panelPlacement = 'top'
-            top = ''
-            bottom = targetHeight
-          }
-        }
-      }
-      // 是否超出右侧
-      if (panelRect.left + panelRect.width + marginSize > visibleWidth) {
-        left = -(panelRect.left + panelRect.width + marginSize - visibleWidth)
-      }
-    }
-    if (XEUtils.isNumber(top)) {
-      stys.top = toCssUnit(top)
-    }
-    if (XEUtils.isNumber(bottom)) {
-      stys.bottom = toCssUnit(bottom)
-    }
-    if (XEUtils.isNumber(left)) {
-      stys.left = toCssUnit(left)
-    }
-    if (XEUtils.isNumber(right)) {
-      stys.right = toCssUnit(right)
-    }
-    if (XEUtils.isNumber(minWidth)) {
-      stys.minWidth = toCssUnit(minWidth)
-    }
-  }
-  return {
-    top: top || 0,
-    bottom: bottom || 0,
-    left: left || 0,
-    right: right || 0,
-    style: stys,
-    placement: panelPlacement
-  }
-}

package/packages/ui/src/log.ts

@@ -1,6 +1,8 @@
-import { log } from '@vxe-ui/core'
+import { VxeUI } from '@vxe-ui/core'
 
-const version = `ui v${process.env.VUE_APP_VXE_VERSION}`
+const { log } = VxeUI
+
+const version = `gantt v${process.env.VUE_APP_VXE_VERSION}`
 
 export const warnLog = log.create('warn', version)
 export const errLog = log.create('error', version)

package/packages/ui/src/utils.ts

@@ -1,7 +1,9 @@
 import XEUtils from 'xe-utils'
-import { getConfig } from '@vxe-ui/core'
+import { VxeUI } from '@vxe-ui/core'
 import DomZIndex from 'dom-zindex'
 
+const { getConfig } = VxeUI
+
 export function isEnableConf (conf: any): boolean {
   return conf && conf.enabled !== false
 }
@@ -44,6 +46,6 @@ export function eqEmptyValue (cellValue: any) {
   return cellValue === null || cellValue === undefined || cellValue === ''
 }
 
-export function handleBooleanDefaultValue (value: boolean | undefined | null) {
-  return XEUtils.isBoolean(value) ? value : null
+export function getStringValue (cellValue: any) {
+  return eqEmptyValue(cellValue) ? '' : cellValue
 }

package/packages/ui/src/vn.ts

@@ -1,37 +0,0 @@
-import XEUtils from 'xe-utils'
-import { VxeComponentSlotType } from '@vxe-ui/core'
-
-export function getOnName (type: string) {
-  return 'on' + type.substring(0, 1).toLocaleUpperCase() + type.substring(1)
-}
-
-export function getModelEvent (name: string) {
-  switch (name) {
-    case 'input':
-    case 'textarea':
-      return 'input'
-    case 'select':
-      return 'change'
-  }
-  return 'update:modelValue'
-}
-
-export function getChangeEvent (name: string) {
-  switch (name) {
-    case 'input':
-    case 'textarea':
-    case 'VxeInput':
-    case 'VxeTextarea':
-    case '$input':// 已废弃
-    case '$textarea':// 已废弃
-      return 'input'
-  }
-  return 'change'
-}
-
-export function getSlotVNs (vns: VxeComponentSlotType | VxeComponentSlotType[] | undefined) {
-  if (XEUtils.isArray(vns)) {
-    return vns
-  }
-  return vns ? [vns] : []
-}

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

@@ -0,0 +1 @@
+@use './gantt-chart.scss'

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

@@ -0,0 +1,65 @@
+.vxe-gantt-view--chart-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+.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;
+  top: 50%;
+  left: 0;
+  color: #ffffff;
+  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;
+  &:hover {
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 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: 0.9em;
+  padding: 0 0.6em;
+}