chore: 🔧change type

xpyjs · Apr 15, 2023 · b753fd8 · b753fd8
1 parent 945794f
commit b753fd8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 26 deletions.
diff --git a/src/components/common/TableHeader.vue b/src/components/common/TableHeader.vue
@@ -10,7 +10,7 @@
       </template>
     </colgroup>
     <thead>
-      <tr v-for="(r, trIndex) in $slotsBox.headers.headers" :key="trIndex">
+      <tr v-for="(r, trIndex) in $slotsBox.tableHeaders.headers" :key="trIndex">
         <th
           v-for="(c, i) in r"
           :key="i"

diff --git a/src/models/param/header.ts b/src/models/param/header.ts
@@ -1,22 +1,22 @@
 import { isArray } from 'lodash';
 import { type VNode } from 'vue';
 
-class Column {
+class TableColumn {
   node: VNode;
   /**
    * 非叶子结点只接收 label 参数作为标题
    */
   label: string;
-  children?: Column[];
-  parent?: Column;
+  children?: TableColumn[];
+  parent?: TableColumn;
   level: number;
   colSpan: number;
   rowSpan: number;
 
   /**
    *
    */
-  constructor(node: VNode, parent?: Column) {
+  constructor(node: VNode, parent?: TableColumn) {
     this.node = node;
     this.label = node.props?.label ?? '';
     this.parent = parent;
@@ -26,28 +26,28 @@ class Column {
   }
 }
 
-export default class Header {
-  columns: Column[] = [];
-  leafs: Column[] = [];
+class TableHeader {
+  columns: TableColumn[] = [];
+  leafs: TableColumn[] = [];
 
   /**
    * 表头渲染使用
    */
-  headers: Column[][] = [];
+  headers: TableColumn[][] = [];
 
   /**
    * 添加表头
    */
   setColumn(v: VNode) {
     // 如果是 column，需要放进 headers 中。并且需要判断是不是有子项（多级表头使用）
-    this.columns.push(new Column(v));
+    this.columns.push(new TableColumn(v));
   }
 
   /**
    * 添加子表头
    */
-  setSubColumn(node: VNode, parent: Column): Column {
-    const newItem = new Column(node, parent);
+  setSubColumn(node: VNode, parent: TableColumn): TableColumn {
+    const newItem = new TableColumn(node, parent);
     if (isArray(parent.children)) {
       parent.children?.push(newItem);
     } else {
@@ -68,10 +68,10 @@ export default class Header {
    * This function idea from https://github.com/elemefe/element
    * 将 columns 内容转换为行的内容，这样才能循环渲染多级表头
    */
-  private convertToRows(columns: Column[]) {
+  private convertToRows(columns: TableColumn[]) {
     let maxLevel = 1;
 
-    const traverse = (column: Column, parent?: Column) => {
+    const traverse = (column: TableColumn, parent?: TableColumn) => {
       if (parent) {
         column.level = parent.level + 1;
         if (maxLevel < column.level) {
@@ -95,7 +95,7 @@ export default class Header {
       traverse(column);
     });
 
-    const rows: Column[][] = [];
+    const rows: TableColumn[][] = [];
     for (let i = 0; i < maxLevel; i++) {
       rows.push([]);
     }
@@ -117,8 +117,8 @@ export default class Header {
   /**
    * This function idea from https://github.com/elemefe/element
    */
-  private getAllColumns(columns: Column[]) {
-    const result: Column[] = [];
+  private getAllColumns(columns: TableColumn[]) {
+    const result: TableColumn[] = [];
     columns.forEach(column => {
       if (column.children) {
         result.push(column);
@@ -134,3 +134,5 @@ export default class Header {
     return result;
   }
 }
+
+export { TableHeader };
diff --git a/src/models/param/slotsBox.ts b/src/models/param/slotsBox.ts
@@ -1,10 +1,10 @@
 import Variables from '@/constants/vars';
 import SliderVue from '@/components/slider/index.vue';
 import { type Component, type VNode, h, type Slots } from 'vue';
-import Header from './header';
+import { TableHeader } from './header';
 
 export default class SlotsBox {
-  headers!: Header;
+  tableHeaders!: TableHeader;
   cols!: VNode[];
   slider!: VNode;
 
@@ -13,7 +13,7 @@ export default class SlotsBox {
   }
 
   private init() {
-    this.headers = new Header();
+    this.tableHeaders = new TableHeader();
     this.cols = [];
     this.slider = h(SliderVue);
   }
@@ -28,7 +28,7 @@ export default class SlotsBox {
     return !!v.type?.name && !!v.type?.setup;
   }
 
-  private setMultiColumn(col: VNode, column: Header['columns'][0]) {
+  private setMultiColumn(col: VNode, column: TableHeader['columns'][0]) {
     const s: () => any[] = (col.children as any)?.default;
 
     if (s) {
@@ -43,7 +43,7 @@ export default class SlotsBox {
             );
           })
           .forEach(v => {
-            const c = this.headers.setSubColumn(v, column);
+            const c = this.tableHeaders.setSubColumn(v, column);
 
             this.setMultiColumn(v, c);
           });
@@ -57,7 +57,7 @@ export default class SlotsBox {
    * 将 columns 的叶子结点平铺
    */
   private setLeafCols() {
-    this.cols = this.headers.leafs.map(v => v.node);
+    this.cols = this.tableHeaders.leafs.map(v => v.node);
   }
 
   setSlots(slots: Slots) {
@@ -87,15 +87,15 @@ export default class SlotsBox {
             this.slider = v;
           } else if (SlotsBox.__checkType(type, Variables.name.column)) {
             // column，则要放到 header 中去，然后还要有叶子结点的渲染
-            this.headers.setColumn(v);
+            this.tableHeaders.setColumn(v);
 
             // 看一下有没有嵌套 x-gantt-column，如果有，表示需要嵌套表头
-            this.setMultiColumn(v, this.headers.columns[index]);
+            this.setMultiColumn(v, this.tableHeaders.columns[index]);
           }
         });
 
       // 生成表头需要的内容
-      this.headers.generate();
+      this.tableHeaders.generate();
 
       // 生成完表头，就可以获取用于渲染内容的叶子节点的 column
       this.setLeafCols();