feat: table supports the use of attributes

alauda · Dec 8, 2022 · 211a0f0 · 211a0f0
1 parent 6c6266b
commit 211a0f0
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 23 deletions.
diff --git a/src/table/table-cell.directive.ts b/src/table/table-cell.directive.ts
@@ -8,7 +8,7 @@ const bem = buildBem('aui-table');
 /** Cell template container that adds the right classes and role. */
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: 'aui-table-cell',
+  selector: 'aui-table-cell,[aui-table-cell]',
   host: {
     class: 'aui-table__cell',
     role: 'gridcell',

diff --git a/src/table/table-header-cell.directive.ts b/src/table/table-header-cell.directive.ts
@@ -8,7 +8,7 @@ const bem = buildBem('aui-table');
 /** Header cell template container that adds the right classes and role. */
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: 'aui-table-header-cell',
+  selector: 'aui-table-header-cell,[aui-table-header-cell]',
   host: {
     class: 'aui-table__header-cell',
     role: 'columnheader',

diff --git a/src/table/table-header-row.component.ts b/src/table/table-header-row.component.ts
@@ -7,7 +7,7 @@ import {
 
 /** Header template container that contains the cell outlet. Adds the right class and role. */
 @Component({
-  selector: 'aui-table-header-row',
+  selector: 'aui-table-header-row,[aui-table-header-row]',
   template: CDK_ROW_TEMPLATE,
   host: {
     class: 'aui-table__header-row',

diff --git a/src/table/table-row.component.ts b/src/table/table-row.component.ts
@@ -11,7 +11,7 @@ import {
 
 /** Data row template container that contains the cell outlet. Adds the right class and role. */
 @Component({
-  selector: 'aui-table-row',
+  selector: 'aui-table-row,[aui-table-row]',
   template: CDK_ROW_TEMPLATE,
   host: {
     class: 'aui-table__row',

diff --git a/src/table/table.component.scss b/src/table/table.component.scss
@@ -135,3 +135,67 @@
     }
   }
 }
+
+// 作为table组件，使用原生table是常见的，所以提供内置的样式适配
+table.aui-table {
+  display: table;
+  width: 100%;
+  border-spacing: 0;
+
+  .aui-table {
+    &__row,
+    &__header-row {
+      display: table-row;
+    }
+
+    &__cell,
+    &__header-cell {
+      display: table-cell;
+    }
+
+    &__cell {
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
+      border-color: use-rgb(n-8);
+    }
+  }
+
+  tbody {
+    tr:first-child td {
+      border-top-width: 1px;
+      border-top-style: solid;
+
+      &:first-child {
+        border-top-left-radius: use-var(border-radius-l);
+      }
+
+      &:last-child {
+        border-top-right-radius: use-var(border-radius-l);
+      }
+    }
+
+    tr td:first-child {
+      border-left-width: 1px;
+      border-left-style: solid;
+    }
+
+    tr td:last-child {
+      border-right-width: 1px;
+      border-right-style: solid;
+    }
+
+    tr:last-child td {
+      &:first-child {
+        border-bottom-left-radius: use-var(border-radius-l);
+      }
+
+      &:last-child {
+        border-bottom-right-radius: use-var(border-radius-l);
+      }
+    }
+  }
+
+  [rowspan='0'] {
+    display: none;
+  }
+}
diff --git a/src/table/table.component.ts b/src/table/table.component.ts
@@ -26,7 +26,7 @@ import {
 } from './table-placeholder.directive';
 
 @Component({
-  selector: 'aui-table',
+  selector: 'aui-table,[aui-table]',
   exportAs: 'auiTable',
   encapsulation: ViewEncapsulation.None,
   styleUrls: ['table.component.scss', 'table-scroll.scss'],

diff --git a/stories/table/table.stories.mdx b/stories/table/table.stories.mdx
@@ -54,44 +54,66 @@ Table 组件基于 CdkTable 开发, 加了一些 alauda 自定义的表格样式
   >
     {{
       template: /* HTML */ `
-        <aui-table [dataSource]="dataSource">
+        <table
+          aui-table
+          [dataSource]="dataSource"
+        >
           <ng-container auiTableColumnDef="id">
-            <aui-table-header-cell *auiTableHeaderCellDef>
+            <th
+              aui-table-header-cell
+              *auiTableHeaderCellDef
+            >
               No.
-            </aui-table-header-cell>
-            <aui-table-cell *auiTableCellDef="let item">
+            </th>
+            <td
+              aui-table-cell
+              *auiTableCellDef="let item"
+              [attr.rowspan]="item.id === 1 ? 2 : item.id === 2 ? 0 : 1"
+            >
               <div>{{ item.id }}</div>
-            </aui-table-cell>
+            </td>
           </ng-container>
           <ng-container auiTableColumnDef="name">
-            <aui-table-header-cell *auiTableHeaderCellDef>
+            <th
+              aui-table-header-cell
+              *auiTableHeaderCellDef
+            >
               Name
-            </aui-table-header-cell>
-            <aui-table-cell
+            </th>
+            <td
+              aui-table-cell
               *auiTableCellDef="let item"
               direction="column"
             >
               {{ item.name }}
               <div style="font-size: 12px;color: #96989b;line-height: 16px;">
                 {{ item.displayName }}
               </div>
-            </aui-table-cell>
+            </td>
           </ng-container>
           <ng-container auiTableColumnDef="value">
-            <aui-table-header-cell *auiTableHeaderCellDef>
+            <th
+              aui-table-header-cell
+              *auiTableHeaderCellDef
+            >
               Value
-            </aui-table-header-cell>
-            <aui-table-cell *auiTableCellDef="let item">
+            </th>
+            <td
+              aui-table-cell
+              *auiTableCellDef="let item"
+            >
               {{ item.value }}
-            </aui-table-cell>
+            </td>
           </ng-container>
-          <aui-table-header-row
+          <tr
+            aui-table-header-row
             *auiTableHeaderRowDef="['id', 'name', 'value']; sticky: sticky"
-          ></aui-table-header-row>
-          <aui-table-row
+          ></tr>
+          <tr
+            aui-table-row
             *auiTableRowDef="let row; columns: ['id', 'name', 'value'];"
-          ></aui-table-row>
-        </aui-table>
+          ></tr>
+        </table>
       `,
       props: {
         dataSource: DATA_SOURCE,