vxe-gantt 0.0.2 → 3.0.0-beta.0

package/styles/components/gantt.scss

@@ -0,0 +1,591 @@
+@use '../helpers/baseMixin.scss';
+@use './gantt-module/all.scss';
+
+.vxe-gantt {
+  position: relative;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  &.is--loading {
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 99;
+      user-select: none;
+      background-color: var(--vxe-ui-loading-background-color);
+    }
+    & > .vxe-gantt-view {
+      .vxe-loading {
+        background-color: transparent;
+      }
+    }
+  }
+  &.is--maximize {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0.5em 1em;
+    background-color: var(--vxe-ui-layout-background-color);
+  }
+  &.is--split-drag {
+    cursor: col-resize;
+    .vxe-gantt--table-wrapper,
+    .vxe-gantt--view-wrapper {
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        background: transparent;
+        user-select: none;
+      }
+    }
+  }
+  .vxe-gantt--form-wrapper,
+  .vxe-gantt--top-wrapper,
+  .vxe-gantt--bottom-wrapper  {
+    position: relative;
+  }
+  .vxe-gantt--gantt-container {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+  }
+  .vxe-gantt--left-wrapper,
+  .vxe-gantt--right-wrapper {
+    flex-shrink: 0;
+    overflow: auto;
+    outline: 0;
+  }
+  .vxe-gantt--table-wrapper,
+  .vxe-gantt--view-wrapper {
+    display: none;
+    position: relative;
+    flex-grow: 1;
+    overflow: hidden;
+  }
+  .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);
+    &.is--resize {
+      cursor: col-resize;
+    }
+  }
+  &.show--left {
+    .vxe-gantt--table-wrapper {
+      display: block;
+    }
+    &.show--right {
+      .vxe-gantt--table-wrapper {
+        flex-grow: unset;
+        flex-shrink: 0;
+        width: var(--vxe-ui-gantt-view-table-default-width);
+      }
+    }
+  }
+  &.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-header-wrapper,
+.vxe-gantt--layout-footer-wrapper,
+.vxe-gantt--layout-aside-left-wrapper,
+.vxe-gantt--layout-aside-left-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,
+  &.border--full,
+  &.border--outer {
+    .vxe-gantt-view--header-wrapper {
+      background-color: var(--vxe-ui-table-header-background-color);
+    }
+  }
+  &.border--full {
+    .vxe-gantt-view--header-column,
+    .vxe-gantt-view--body-column,
+    .vxe-gantt-view--footer-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;
+    }
+  }
+  &.border--default,
+  &.border--full,
+  &.border--outer,
+  &.border--inner {
+    .vxe-gantt-view--scroll-y-top-corner,
+    .vxe-gantt-view--scroll-y-bottom-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-view--scroll-y-top-corner {
+      &::before {
+        border-bottom-width: var(--vxe-ui-table-border-width);
+      }
+    }
+    .vxe-gantt-view--scroll-y-bottom-corner {
+      border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
+    }
+    .vxe-gantt-view--scroll-x-wrapper {
+      &::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        pointer-events: none;
+      }
+    }
+    &.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);
+        }
+      }
+    }
+    &.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);
+        }
+      }
+    }
+  }
+  
+  &.border--default,
+  &.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-view--scroll-y-bottom-corner {
+      &::before {
+        border-left-width: var(--vxe-ui-table-border-width);
+        border-right-width: var(--vxe-ui-table-border-width);
+      }
+    }
+    &.sy-pos--right {
+      .vxe-gantt-view--scroll-y-top-corner,
+      .vxe-gantt-view--scroll-y-bottom-corner {
+        &::before {
+          width: calc(100% + 1px);
+          left: -1px;
+        }
+      }
+    }
+    .vxe-gantt-view--scroll-y-wrapper {
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        pointer-events: none;
+      }
+    }
+    &.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);
+        }
+      }
+    }
+    &.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;
+  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;
+  & > div {
+    margin-top: 1em;
+    &: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: 0.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;
+  user-select: none;
+  @include baseMixin.createAnimationTransition(all, 0.1s);
+  &:hover {
+    background-color: var(--vxe-ui-font-primary-lighten-color);
+  }
+  &:active {
+    transform: scale(0.9);
+  }
+}
+.vxe-gantt--resizable-split-tip {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 100%;
+  z-index: 18;
+  pointer-events: none;
+  user-select: none;
+  cursor: col-resize;
+  &: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;
+  user-select: none;
+  pointer-events: none;
+}
+.vxe-gantt--resizable-split-number-left,
+.vxe-gantt--resizable-split-number-right {
+  position: absolute;
+  padding: 0.25em 0.25em;
+  font-size: 12px;
+  border-radius: var(--vxe-ui-border-radius);
+  white-space: nowrap;
+  color: #ffffff;
+  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-view--layout-wrapper {
+      & > .vxe-gantt-view--scroll-y-virtual {
+        visibility: hidden;
+      }
+    }
+  }
+  .vxe-gantt-view--scroll-x-virtual {
+    height: 0;
+  }
+  .vxe-gantt-view--scroll-y-virtual {
+    width: 0;
+  }
+  .vxe-gantt-view--scroll-x-virtual,
+  .vxe-gantt-view--scroll-y-virtual {
+    visibility: hidden;
+    position: relative;
+    flex-shrink: 0;
+    z-index: 7;
+  }
+  .vxe-gantt-view--scroll-x-handle,
+  .vxe-gantt-view--scroll-y-handle,
+  .vxe-gantt-view--scroll-x-wrapper,
+  .vxe-gantt-view--scroll-y-wrapper,
+  .vxe-gantt-view--scroll-y-top-corner,
+  .vxe-gantt-view--scroll-y-bottom-corner,
+  .vxe-gantt-view--scroll-x-left-corner,
+  .vxe-gantt-view--scroll-x-right-corner {
+    position: absolute;
+  }
+  .vxe-gantt-view--scroll-x-handle,
+  .vxe-gantt-view--scroll-x-wrapper {
+    width: 100%;
+    left: 0;
+    bottom: 0;
+  }
+  .vxe-gantt-view--scroll-x-handle {
+    overflow-y: hidden;
+    overflow-x: scroll;
+    height: 18px;
+  }
+  .vxe-gantt-view--scroll-x-wrapper {
+    height: 100%;
+  }
+  .vxe-gantt-view--scroll-y-handle,
+  .vxe-gantt-view--scroll-y-wrapper {
+    width: 100%;
+    height: 100%;
+    right: 0;
+    top: 0;
+  }
+  .vxe-gantt-view--scroll-y-handle {
+    overflow-y: scroll;
+    overflow-x: hidden;
+    width: 18px;
+    height: 100%;
+  }
+  .vxe-gantt-view--scroll-x-space {
+    height: 1px;
+  }
+  .vxe-gantt-view--scroll-y-space {
+    width: 1px;
+  }
+  .vxe-gantt-view--scroll-x-left-corner,
+  .vxe-gantt-view--scroll-x-right-corner,
+  .vxe-gantt-view--scroll-y-top-corner,
+  .vxe-gantt-view--scroll-y-bottom-corner {
+    display: none;
+    position: absolute;
+  }
+  .vxe-gantt-view--scroll-x-left-corner,
+  .vxe-gantt-view--scroll-x-right-corner {
+    bottom: 0;
+    width: 0;
+    height: 100%;
+    &::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-view--scroll-x-left-corner {
+    left: 0;
+  }
+  .vxe-gantt-view--scroll-x-right-corner {
+    right: 0;
+  }
+  &.sy-pos--right {
+    .vxe-gantt-view--scroll-x-right-corner {
+      right: 1px;
+      &::before {
+        border-right: 0;
+      }
+    }
+  }
+  &.sx-pos--bottom {
+    .vxe-gantt-view--scroll-x-right-corner {
+      bottom: 1px;
+      &::before {
+        border-bottom: 0;
+      }
+    }
+  }
+  .vxe-gantt-view--scroll-y-top-corner {
+    background-color: var(--vxe-ui-table-header-background-color);
+  }
+  .vxe-gantt-view--scroll-y-top-corner,
+  .vxe-gantt-view--scroll-y-bottom-corner {
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 0;
+  }
+  .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-body--x-space {
+    width: 100%;
+    height: 1px;
+    margin-bottom: -1px;
+  }
+  .vxe-body--y-space {
+    width: 0;
+    float: left;
+  }
+}
+.vxe-gantt-view--header-table {
+  height: 100%;
+}
+.vxe-gantt-view--header-table,
+.vxe-gantt-view--body-table {
+  border: 0;
+  border-spacing: 0;
+  border-collapse: separate;
+  table-layout: fixed;
+  col {
+    width: var(--vxe-ui-gantt-view-default-cell-width);
+  }
+}
+.vxe-gantt-view--header-wrapper,
+.vxe-gantt-view--body-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--header-inner-wrapper,
+.vxe-gantt-view--body-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--header-column,
+.vxe-gantt-view--body-column,
+.vxe-gantt-view--footer-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);
+  &.size--medium {
+    font-size: var(--vxe-ui-font-size-medium);
+  }
+  &.size--small {
+    font-size: var(--vxe-ui-font-size-small);
+  }
+  &.size--mini {
+    font-size: var(--vxe-ui-font-size-mini);
+  }
+}
+

package/styles/helpers/baseMixin.scss

@@ -0,0 +1,96 @@
+@mixin createAnimationTransition ($property, $duration: .1s, $func: ease-in-out) {
+  transition: $property $duration $func;
+}
+
+@mixin createCheckboxIcon {
+  .vxe-checkbox--icon {
+    font-size: 1.22em;
+  }
+  .vxe-checkbox--icon {
+    color: var(--vxe-ui-input-border-color);
+    vertical-align: middle;
+    font-weight: 700;
+    user-select: none;
+  }
+  &.is--checked,
+  &.is--indeterminate {
+    color: var(--vxe-ui-font-primary-color);
+    .vxe-checkbox--icon {
+      color: var(--vxe-ui-font-primary-color);
+    }
+  }
+  &:not(.is--disabled) {
+    cursor: pointer;
+    &:hover {
+      .vxe-checkbox--icon {
+        color: var(--vxe-ui-font-primary-color);
+      }
+    }
+  }
+  &.is--hidden {
+    cursor: default;
+  }
+  &.is--disabled {
+    color: var(--vxe-ui-font-disabled-color);
+    cursor: not-allowed;
+    .vxe-checkbox--icon {
+      color: var(--vxe-ui-input-disabled-color);
+    }
+  }
+  .vxe-checkbox--label {
+    padding-left: 0.5em;
+    vertical-align: middle;
+  }
+}
+
+@mixin createRadioIcon {
+  cursor: pointer;
+  .vxe-radio--icon {
+    font-size: 1.26em;
+  }
+  .vxe-radio--icon {
+    color: var(--vxe-ui-input-border-color);
+    border-radius: 50%;
+    vertical-align: middle;
+    font-weight: 700;
+    user-select: none;
+  }
+  &.is--checked {
+    color: var(--vxe-ui-font-primary-color);
+    .vxe-radio--icon {
+      color: var(--vxe-ui-font-primary-color);
+    }
+  }
+  &:not(.is--disabled) {
+    cursor: pointer;
+    &:hover {
+      .vxe-radio--icon {
+        color: var(--vxe-ui-font-primary-color);
+      }
+    }
+  }
+  &.is--disabled {
+    color: var(--vxe-ui-font-disabled-color);
+    cursor: not-allowed;
+    .vxe-radio--icon {
+      color: var(--vxe-ui-input-disabled-color);
+    }
+  }
+  .vxe-radio--label {
+    padding-left: 0.5em;
+    vertical-align: middle;
+  }
+}
+
+@mixin createEmptyMask {
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    user-select: none;
+  }
+}

package/styles/helpers/baseVar.scss

@@ -0,0 +1,4 @@
+// 24 栅格布局
+$colSpanList: 4.16667%, 8.33333%, 12.5%, 16.66667%, 20.83333%, 25%, 29.16667%, 33.33333%,
+              37.5%, 41.66667%, 45.83333%, 50%, 54.16667%, 58.33333%, 62.5%, 66.66667%,
+              70.83333%, 75%, 79.16667%, 83.33333%, 87.5%, 91.66667%, 95.83333%, 100%;

package/styles/helpers/placement.scss

@@ -0,0 +1,39 @@
+@use './baseMixin.scss';
+
+@mixin createPlacementPanel {
+  display: none;
+  position: absolute;
+  left: 0;
+  padding: 4px 0;
+  color: var(--vxe-ui-font-color);
+  text-align: left;
+  &:not(.is--transfer) {
+    min-width: 100%;
+  }
+  &.is--transfer {
+    position: fixed;
+  }
+  &.ani--leave {
+    display: block;
+    opacity: 0;
+    transform: scaleY(0.5);
+    transition: transform .3s cubic-bezier(.23,1,.32,1), opacity .3s cubic-bezier(.23,1,.32,1);
+    transform-origin: center top;
+    backface-visibility: hidden;
+    &[placement="top"] {
+      transform-origin: center bottom;
+    }
+  }
+  &.ani--enter {
+    opacity: 1;
+    transform: scaleY(1);
+    & > div {
+      &::after {
+        display: none;
+      }
+    }
+  }
+  & > div {
+    @include baseMixin.createEmptyMask();
+  }
+}