feat: ✨添加所有 root 的 props

xpyjs · May 12, 2023 · 295c129 · 295c129
1 parent 97232cd
commit 295c129
Show file tree

Hide file tree

Showing 16 changed files with 236 additions and 82 deletions.
diff --git a/demo/demo.vue b/demo/demo.vue
@@ -4,6 +4,12 @@
       data-id="index"
       :data="ganttData"
       :links="ganttLinks"
+      :border-color="borderColor"
+      show-checkbox
+      :show-expand="showExpand"
+      :expand-all="expandAll"
+      :show-today="true"
+      :show-weekend="true"
       @row-click="onClickRow"
     >
       <x-gantt-column label="group1">
@@ -54,11 +60,16 @@
     共{{ ganttData.length }}条
     <button @click="onAdd">增加</button>
     <button @click="onReduce">减少</button>
+    <button @click="onExpand">{{ showExpand ? '隐藏' : '展示' }}</button>
+    <button @click="expandAll = !expandAll">
+      {{ expandAll ? '闭合' : '展开' }}
+    </button>
+    <button @click="onChangeBorderColor">border颜色</button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue';
 
 let id = 0;
 
@@ -104,6 +115,18 @@ const ganttLinks = [
   }
 ];
 
+const showExpand = ref(true);
+function onExpand() {
+  showExpand.value = !showExpand.value;
+}
+const expandAll = ref(false);
+
+const colors = ['red', 'blue', 'green', 'yellow', 'pink', 'orange'];
+const borderColor = ref('black');
+function onChangeBorderColor() {
+  borderColor.value = colors[Math.floor(Math.random() * colors.length)];
+}
+
 function onAdd() {
   ganttData.push({
     index: ++id,

diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
 
 <head>
   <meta charset="UTF-8" />

diff --git a/src/components/column/selection.vue b/src/components/column/selection.vue
@@ -2,7 +2,7 @@
   <div class="level-block" :style="{ width: `${data!.level * indent}px` }" />
 
   <div
-    v-if="!!data?.children?.length"
+    v-if="$styleBox.showExpand && !!data?.children?.length"
     :class="['expand-icon', { 'expand-icon__expanded': data?.isExpand }]"
     @click="
       () => {
@@ -38,7 +38,7 @@ import { PropType, ref } from 'vue';
 import useStyle from '@/composables/useStyle';
 import useData from '@/composables/useData';
 import RowItem from '@/models/data/row';
-const { rowHeight } = useStyle();
+const { rowHeight, $styleBox } = useStyle();
 const checked = ref(false);
 
 defineProps({

diff --git a/src/components/column/style.scss b/src/components/column/style.scss
@@ -5,6 +5,10 @@
   box-sizing: border-box;
   border-right: 1px solid;
 
+  &:nth-last-child(1) {
+    border-right: 0px;
+  }
+
   & > div {
     width: calc(100% - 12px);
     overflow: hidden;

diff --git a/src/components/common/GanttBody.vue b/src/components/common/GanttBody.vue
@@ -24,7 +24,7 @@
     <!-- 周末 -->
     <template v-for="(date, i) in ganttHeader.dates">
       <div
-        v-if="date.isWeekend()"
+        v-if="$styleBox.showWeekend && date.isWeekend()"
         :key="i"
         class="xg-gantt-body-date-line weekend"
         :style="{
@@ -60,7 +60,7 @@ import LinkPath from './LinkPath.vue';
 import useLinks from '@/composables/useLinks';
 
 const { $slotsBox } = useSlotsBox();
-const { bodyHeight } = useStyle();
+const { bodyHeight, $styleBox } = useStyle();
 const { ganttWidth, ganttColumnWidth } = useGanttWidth();
 const { inView } = useInView();
 const { todayLeft, showToday } = useToday();

diff --git a/src/components/common/GanttHeader.vue b/src/components/common/GanttHeader.vue
@@ -26,7 +26,12 @@
                   $param.hoverItem?.end.isSame(c.date, ganttHeader.unit))
             }
           ]"
-          :style="{ ...$styleBox.getBorderColor() }"
+          :style="{
+            ...$styleBox.getBorderColor(),
+            color: $styleBox.headerStyle?.textColor,
+            backgroundColor:
+              $styleBox.headerStyle?.bgColor || $styleBox.primaryColor
+          }"
           :colspan="c.colSpan"
           :rowspan="c.rowSpan"
         >
@@ -76,7 +81,7 @@ onMounted(updateHeaderHeight);
     border-bottom: 1px solid;
     border-right: 1px solid;
     font-size: 14px;
-    background-color: blueviolet;
+    background-color: #eca710;
   }
 
   .highlight {

diff --git a/src/components/common/Row.vue b/src/components/common/Row.vue
@@ -15,6 +15,7 @@
       top: `${(props.data?.flatIndex ?? 0) * rowHeight}px`,
       height: `${rowHeight}px`,
       borderWidth: props.renderStyle ? '1px' : 0,
+      backgroundColor: props.renderStyle ? ($styleBox.levelColor[props.data!.level] ?? undefined) : undefined,
       ...$styleBox.getBorderColor()
     }"
     @mouseenter="onEnter"
@@ -69,10 +70,10 @@ function onDblClick() {
 }
 
 .xg-row.xg-row__hover {
-  background-color: #f0f0f0aa;
+  background-color: #f0f0f0aa !important;
 }
 
 .xg-row__select {
-  background-color: #e0e0e0aa;
+  background-color: #e0e0e0aa !important;
 }
 </style>
diff --git a/src/components/common/TableHeader.vue b/src/components/common/TableHeader.vue
@@ -2,7 +2,11 @@
   <table
     ref="tableHeaderRef"
     class="xg-table-header"
-    :style="{ height: `${$param.headerHeight}px` }"
+    :style="{
+      height: `${$param.headerHeight}px`,
+      color: $styleBox.headerStyle?.textColor,
+      backgroundColor: $styleBox.headerStyle?.bgColor || $styleBox.primaryColor
+    }"
     cellpadding="0"
     cellspacing="0"
     border="0"
@@ -26,8 +30,10 @@ import useParams from '@/composables/useParam';
 import TableHeaderTh from './TableHeaderTh.vue';
 import useElement from '@/composables/useElement';
 import { onMounted } from 'vue';
+import useStyle from '@/composables/useStyle';
 
 const { $slotsBox } = useSlotsBox();
+const { $styleBox } = useStyle();
 
 const { $param } = useParams();
 const { tableHeaderRef, updateHeaderHeight } = useElement();
@@ -37,7 +43,7 @@ onMounted(updateHeaderHeight);
 <style lang="scss" scoped>
 .xg-table-header {
   width: 100%;
-  background-color: blueviolet;
+  background-color: #eca710;
   table-layout: fixed;
   border-collapse: separate;
   top: 0;

diff --git a/src/components/common/TableHeaderTh.vue b/src/components/common/TableHeaderTh.vue
@@ -63,42 +63,30 @@ onResizeTableColumn(headerRef, {
 </script>
 
 <style lang="scss" scoped>
-.xg-table-header {
-  width: 100%;
-  height: 80px;
-  background-color: blueviolet;
-  table-layout: fixed;
-  border-collapse: separate;
-  top: 0;
-  position: sticky;
-  z-index: 10;
+.xg-table-header-cell {
   overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  text-align: center;
+  position: relative;
+  box-sizing: border-box;
+  border-bottom: 1px solid;
+  border-right: 1px solid;
+  padding: 0 12px;
+  font-size: 14px;
+  pointer-events: none;
+}
 
-  .xg-table-header-cell {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    vertical-align: middle;
-    text-align: left;
-    position: relative;
-    box-sizing: border-box;
-    border-bottom: 1px solid;
-    border-right: 1px solid;
-    padding: 0 20px;
-    font-size: 14px;
-    pointer-events: none;
-  }
-
-  .cell-resizable {
-    &::after {
-      content: '';
-      position: absolute;
-      right: -5px;
-      top: 0;
-      bottom: 0;
-      width: 10px;
-      cursor: col-resize;
-      pointer-events: auto;
-    }
+.cell-resizable {
+  &::after {
+    content: '';
+    position: absolute;
+    right: -5px;
+    top: 0;
+    bottom: 0;
+    width: 10px;
+    cursor: col-resize;
+    pointer-events: auto;
   }
 }
 </style>
diff --git a/src/components/root/rootProps.ts b/src/components/root/rootProps.ts
@@ -45,7 +45,7 @@ export default {
   },
 
   /**
-   * 接收一个表头高度，应该保证大于30，默认值为60
+   * 接收一个表头高度，默认值为80。如果高度过小，且表头过于复杂，可能会引起高度异常
    */
   headerHeight: {
     type: [Number, String],
@@ -107,7 +107,7 @@ export default {
         throw new Error(
           `${
             Errors.header + Errors.invalidProps
-          }"border" should be a positive integer.`
+          }"border" should be a nonnegative integer.`
         );
       }
       return r;
@@ -218,14 +218,6 @@ export default {
     default: '#eca710'
   },
 
-  /**
-   * 显示设置按钮
-   */
-  showSettingBtn: {
-    type: Boolean,
-    default: true
-  },
-
   /**
    * 日期单位
    */

diff --git a/src/composables/useData.ts b/src/composables/useData.ts
@@ -1,13 +1,17 @@
+import type rootProps from '@/components/root/rootProps';
 import type RowItem from '@/models/data/row';
 import { useStore } from '@/store';
-import { computed, toRaw, watch, type Ref } from 'vue';
+import { computed, type ExtractPropTypes, toRaw, watch, type Ref } from 'vue';
 import useGanttHeader from './useGanttHeader';
 
 export default () => {
   const store = useStore();
   const { setGanttHeaders } = useGanttHeader();
 
-  function initData(data: Ref<any[]>, props: any) {
+  function initData(
+    data: Ref<any[]>,
+    props: ExtractPropTypes<typeof rootProps>
+  ) {
     const options: DataOptions = {
       dataId: props.dataId,
       isExpand: !props.showExpand || props.expandAll,
@@ -29,6 +33,22 @@ export default () => {
       },
       { deep: true }
     );
+
+    watch(
+      () => props.showExpand,
+      () => {
+        store.$data.updateExpand(true);
+        store.$links.update(store.$data.flatData);
+      }
+    );
+
+    watch(
+      () => props.expandAll,
+      val => {
+        store.$data.updateExpand(!props.showExpand || val);
+        store.$links.update(store.$data.flatData);
+      }
+    );
   }
 
   function toRowData(data?: RowItem): RowData {

diff --git a/src/composables/useGanttWidth.ts b/src/composables/useGanttWidth.ts
@@ -6,20 +6,19 @@ export default () => {
   const store = useStore();
 
   const ganttColumnWidth = computed(() => {
-    // const size = store.$styleBox.ganttColumnSize;
-    // switch (size) {
-    //   case 'small':
-    //     if (store.$styleBox.unit === 'week') return 7;
-    //     return 15;
-    //   case 'large':
-    //     if (store.$styleBox.unit === 'week') return 30;
-    //     return 60;
-    //   case 'normal':
-    //   default:
-    //     if (store.$styleBox.unit === 'week') return 15;
-    //     return 30;
-    // }
-    return 30;
+    const size = store.$styleBox.ganttColumnSize;
+    switch (size) {
+      case 'small':
+        if (store.$styleBox.unit === 'week') return 7;
+        return 20;
+      case 'large':
+        if (store.$styleBox.unit === 'week') return 30;
+        return 60;
+      case 'normal':
+      default:
+        if (store.$styleBox.unit === 'week') return 15;
+        return 30;
+    }
   });
 
   const ganttWidth = computed(() => {