@worktile/gantt 20.0.2 → 21.0.0-next.0

package/gantt.component.scss

@@ -85,7 +85,7 @@
 
   .gantt-main-container {
     width: 100%;
-    height: calc(100% - var(--gantt-header-height));
+    height: calc(100% - #{variables.$gantt-header-height});
     flex: 1;
     position: absolute;
     bottom: 0;
@@ -103,16 +103,28 @@
       background: variables.$gantt-group-background-color;
       border-bottom: 1px solid variables.$gantt-border-color;
       box-sizing: border-box;
+      height: variables.$gantt-row-height;
     }
 
     .gantt-item {
       border-bottom: 1px solid variables.$gantt-border-color;
       box-sizing: border-box;
       position: relative;
+      height: variables.$gantt-row-height;
 
       &.gantt-main-item-active {
         background-color: rgba($color: variables.$gantt-table-header-drag-line-color, $alpha: 0.1);
       }
+      .gantt-bar-placeholder {
+        position: absolute;
+        background-color: variables.$color-primary;
+        opacity: 0.1;
+        border-radius: 4px;
+        &-range {
+          height: 10px;
+          border-radius: 2px;
+        }
+      }
     }
 
     .gantt-quick-time-focus-container {
@@ -130,6 +142,7 @@
           display: flex;
           justify-content: space-between;
           align-items: center;
+          height: variables.$gantt-row-height;
           span {
             width: 24px;
             height: 24px;
@@ -152,10 +165,16 @@
             justify-content: center;
             align-items: center;
             cursor: pointer;
+            color: variables.$color-text-light;
             background-color: variables.$gantt-bar-bg;
             border: 1px solid variables.$gantt-border-color;
             border-radius: 4px;
             box-shadow: 0 4px 7px 1px rgba(0, 0, 0, 0.05);
+
+            &:hover {
+              color: variables.$color-primary;
+            }
+
             .gantt-icon {
               display: inline-block;
               svg {
@@ -182,6 +201,7 @@
     left: 0;
     right: 0;
     bottom: 0;
+    top: variables.$gantt-header-height;
     z-index: 2;
     overflow: auto;
 
@@ -241,7 +261,7 @@
   .gantt-container-header {
     flex: 1;
     overflow: hidden;
-    background-color: #fafafa;
+    background-color: variables.$gantt-container-background-color;
   }
 }
 
@@ -252,7 +272,7 @@
   right: 0;
   bottom: 0;
   z-index: 3;
-  background-color: white;
+  background-color: variables.$color-background;
   border-top: 1px solid variables.$gantt-border-color;
   border-bottom: 1px solid variables.$gantt-border-color;
   overflow: hidden;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@worktile/gantt",
-  "version": "20.0.2",
+  "version": "21.0.0-next.0",
   "schematics": "./schematics/collection.json",
   "author": "walkerkay001",
   "license": "MIT",
   "exports": {
     ".": {
       "sass": "./styles/index.scss",
-      "types": "./index.d.ts",
+      "types": "./types/worktile-gantt.d.ts",
       "default": "./fesm2022/worktile-gantt.mjs"
     },
     "./styles/variables": {
@@ -24,15 +24,15 @@
     }
   },
   "peerDependencies": {
-    "@angular/common": ">=20.0.0",
-    "@angular/core": ">=20.0.0",
-    "@angular/cdk": ">=20.0.0",
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0",
+    "@angular/cdk": ">=21.0.0",
     "rxjs": "^6.5.0 || ^7.0.0",
     "date-fns": ">=4.0.0",
     "@date-fns/tz": ">=1.0.0"
   },
   "module": "fesm2022/worktile-gantt.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/worktile-gantt.d.ts",
   "sideEffects": false,
   "dependencies": {
     "tslib": "^2.3.0"

package/styles/variables.scss

@@ -1,67 +1,105 @@
-// basic
-$gantt-color: #333 !default;
-$gantt-primary-color: #6698ff !default;
-$gantt-header-height: 44px !default;
-$gantt-border-color: #eee !default;
-$gantt-bg-color: #fff !default;
-$gantt-side-shadow: 12px 0 16px -10px rgba(0, 0, 0, 0.15) !default;
-$gantt-container-background-color: #fafafa !default;
-$gantt-group-background-color: rgba(
-  $color: #f3f3f3,
-  $alpha: 0.5
-) !default;
-$gantt-table-td-padding: 0 15px !default;
+// ============================================
+// Foundation - 主题色变量
+// ============================================
+$color-primary: var(--gantt-color-primary, #6698ff);
+$color-danger: var(--gantt-color-danger, #ff7575);
+$color-highlight: var(--gantt-color-highlight, #ff9f73);
+$color-background: var(--gantt-color-background, #ffffff);
+
+$color-text-main: var(--gantt-color-text-main, #333333);
+$color-text-muted: var(--gantt-color-text-muted, #888888);
+$color-text-light: var(--gantt-color-text-light, #aaaaaa);
+$color-text-inverse: var(--gantt-color-text-inverse, #ffffff);
+
+$color-gray-100: var(--gantt-color-gray-100, #fafafa);
+$color-gray-200: var(--gantt-color-gray-200, #f5f5f5);
+$color-gray-300: var(--gantt-color-gray-300, #f3f3f3);
+$color-gray-400: var(--gantt-color-gray-400, #eeeeee);
+$color-gray-500: var(--gantt-color-gray-500, #dddddd);
+$color-gray-600: var(--gantt-color-gray-600, #cacaca);
+
+$color-shadow: rgba(0, 0, 0, 0.15) !default;
+
+// ============================================
+// Foundation - 基础变量
+// ============================================
+
+$gantt-primary-color: $color-primary !default; // #6698ff
+$gantt-header-height: var(--gantt-header-height, 44px) !default;
+$gantt-row-height: var(--gantt-row-height, 44px) !default;
+$gantt-bar-height: var(--gantt-bar-height, 22px) !default;
+$gantt-bar-background-color: $gantt-primary-color !default; // 跟随主色
+
+$gantt-color: $color-text-main !default; // #333
+$gantt-bg-color: $color-background !default; // #fff
+$gantt-border-color: $color-gray-400 !default; // #eee
+$gantt-container-background-color: $color-gray-100 !default; // #fafafa
+
+// ============================================
+// Layout - 布局变量
+// ============================================
+$gantt-footer-height: 44px !default;
+$gantt-side-shadow: 12px 0 16px -10px $color-shadow !default; // rgba(0, 0, 0, 0.15)
+$gantt-footer-shadow: 16px 0 14px -10px $color-shadow !default;
+$gantt-scrollbar-shadow: 10px 0px 10px -3px $color-shadow !default;
+
+// ============================================
+// Group - 分组
+// ============================================
+$gantt-group-background-color: rgba($color-gray-300, 0.5) !default; // #f3f3f3
 
-// calendar
-$gantt-date-primary-color: #888 !default;
+// ============================================
+// Calendar - 日历
+// ============================================
+$gantt-date-primary-color: $color-text-muted !default; // #888
 $gantt-date-primary-font-size: 14px !default;
-$gantt-date-primary-border: #ddd !default;
-$gantt-date-secondary-color: #333 !default;
+$gantt-date-primary-border: $color-gray-500 !default; // #ddd
+$gantt-date-secondary-color: $color-text-main !default; // #333
 $gantt-date-secondary-font-size: 14px !default;
-$gantt-date-secondary-weekend-color: #aaa !default;
-$gantt-date-week-backdrop-bg: rgba(
-  $color: #f3f3f3,
-  $alpha: 0.5
-) !default;
-$gantt-date-today-color: #ff9f73 !default;
-$gantt-date-today-text-color: #fff !default;
-
-// bar
-$gantt-bar-bg: #fff !default;
-$gantt-bar-layer-bg: #fff !default;
-$gantt-bar-handle-color: #cacaca !default;
+$gantt-date-secondary-weekend-color: $color-text-light !default; // #aaa
+$gantt-date-week-backdrop-bg: rgba($color-gray-300, 0.5) !default; // #f3f3f3
+$gantt-date-today-color: $color-highlight !default; // #ff9f73
+$gantt-date-today-text-color: $color-background !default; // #fff
+
+// ============================================
+// Bar - 甘特条
+// ============================================
+$gantt-bar-bg: $color-background !default; // #fff
+$gantt-bar-layer-bg: $color-background !default; // #fff
+$gantt-bar-handle-color: $color-gray-600 !default; // #cacaca
 $gantt-bar-handle-height: 12px !default;
 $gantt-bar-link-handle-point: $gantt-primary-color !default;
-$gantt-bar-background-color: $gantt-primary-color !default;
 
-// drag
+// ============================================
+// Drag - 拖拽
+// ============================================
 $gantt-item-drag-mask-color: $gantt-primary-color !default;
 $gantt-link-dragging-line-color: $gantt-primary-color !default;
 
-// link
+// ============================================
+// Link - 关联线
+// ============================================
 $gantt-link-line-color: $gantt-primary-color !default;
 
-// table
+// ============================================
+// Table - 表格
+// ============================================
+$gantt-table-td-padding: 0 15px !default;
 $gantt-table-header-drag-line-width: 3px !default;
 $gantt-table-header-drag-line-color: $gantt-primary-color !default;
-$gantt-table-items-drop-background-color: #f5f5f5 !default;
+$gantt-table-items-drop-background-color: $color-gray-200 !default; // #f5f5f5
 
-// baseline
-$gantt-baseline-background-color: #cacaca !default;
+// ============================================
+// Baseline - 基线
+// ============================================
+$gantt-baseline-background-color: $color-gray-600 !default; // #cacaca
 
-// toolbar
+// ============================================
+// Toolbar - 工具栏
+// ============================================
 $gantt-toolbar-view-active-color: $gantt-primary-color !default;
 
-// loader
+// ============================================
+// Loader - 加载器
+// ============================================
 $gantt-loader-loading-color: $gantt-primary-color !default;
-
-// footer
-$gantt-footer-height: 44px !default;
-$gantt-footer-shadow: 16px 0 14px -10px rgba(0, 0, 0, 0.15) !default;
-
-// @deprecated, please use global config `GANTT_GLOBAL_CONFIG` set custom height
-$gantt-item-height: none;
-$gantt-group-height: none;
-
-// scrollbar
-$gantt-scrollbar-shadow: 10px 0px 10px -3px rgba(0, 0, 0, 0.15) !default;