vxe-gantt 0.0.2 → 0.0.3

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,6 @@
 import { log } from '@vxe-ui/core'
 
-const version = `ui v${process.env.VUE_APP_VXE_VERSION}`
+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,49 +1,50 @@
 import XEUtils from 'xe-utils'
-import { getConfig } from '@vxe-ui/core'
+import { VxeUI } from '@vxe-ui/core'
 import DomZIndex from 'dom-zindex'
 
 export function isEnableConf (conf: any): boolean {
   return conf && conf.enabled !== false
 }
 
-export function nextZIndex () {
-  return DomZIndex.getNext()
+export function isEmptyValue (cellValue: any) {
+  return cellValue === null || cellValue === undefined || cellValue === ''
 }
 
-export function getLastZIndex () {
-  return DomZIndex.getCurrent()
+export function parseFile (file: File) {
+  const name = file.name
+  const tIndex = XEUtils.lastIndexOf(name, '.')
+  const type = name.substring(tIndex + 1, name.length).toLowerCase()
+  const filename = name.substring(0, tIndex)
+  return { filename, type }
 }
 
-export function nextSubZIndex () {
-  return DomZIndex.getSubNext()
+export function nextZIndex () {
+  return DomZIndex.getNext()
 }
 
-export function getSubLastZIndex () {
-  return DomZIndex.getSubCurrent()
+export function getLastZIndex () {
+  return DomZIndex.getCurrent()
 }
 
-export function getGlobalDefaultConfig (value: any, globalValue: any) {
-  if (XEUtils.eqNull(value)) {
-    return globalValue
-  }
-  return value
+export function hasChildrenList (item: any) {
+  return item && item.children && item.children.length > 0
 }
 
-export function getFuncText (content: string | number | boolean | null | undefined, args?: any) {
+export function getFuncText (content?: string | number | boolean | null, args?: any) {
   if (content) {
-    const translate = getConfig().translate
+    const translate = VxeUI.getConfig().translate
     return XEUtils.toValueString(translate ? translate('' + content, args) : content)
   }
   return ''
 }
 
+export function formatText (value: any, placeholder?: any) {
+  return '' + (isEmptyValue(value) ? (placeholder ? VxeUI.getConfig().emptyCell : '') : value)
+}
+
 /**
  * 判断值为：'' | null | undefined 时都属于空值
  */
 export function eqEmptyValue (cellValue: any) {
-  return cellValue === null || cellValue === undefined || cellValue === ''
-}
-
-export function handleBooleanDefaultValue (value: boolean | undefined | null) {
-  return XEUtils.isBoolean(value) ? value : null
+  return cellValue === '' || XEUtils.eqNull(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,46 @@
+.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: #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);
+  pointer-events: all;
+  &:hover {
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      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;
+  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;
+}