@alauda/ui 6.0.4-beta.17 → 6.0.4-beta.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alauda/ui",
-  "version": "6.0.4-beta.17",
+  "version": "6.0.4-beta.18",
   "description": "Angular UI components by Alauda Frontend Team.",
   "repository": "git+https://github.com/alauda/alauda-ui.git",
   "author": "Alauda Frontend",

package/table/table-cell.component.d.ts

@@ -1,12 +1,9 @@
 import { CdkCell } from '@angular/cdk/table';
 import { EventEmitter } from '@angular/core';
-export declare class TableExpandButtonCellComponent extends CdkCell {
+export declare class TableCellComponent extends CdkCell {
     expand: boolean;
     disabled: boolean;
+    template: boolean;
     expandChange: EventEmitter<any>;
     get expanded(): string;
 }
-export declare class TableExpandPanelCellComponent extends CdkCell {
-    expand: boolean;
-    get expanded(): string;
-}

package/theme/_mixin.scss

@@ -98,57 +98,6 @@
   }
 }
 
-@mixin expand-button() {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  width: get-size(icon-size-m);
-  height: get-size(icon-size-m);
-  font-size: get-size(icon-size-m);
-  line-height: get-size(icon-size-m);
-  color: get-color(primary);
-  background-color: get-color(p-6);
-  border-radius: 50%;
-  border: none;
-  cursor: pointer;
-  transition: transform 0.1s ease-in-out;
-
-  aui-icon {
-    display: block;
-    width: get-size(icon-size-m);
-    height: get-size(icon-size-m);
-  }
-
-  &:hover {
-    background-color: get-color(p-7);
-  }
-
-  &:active {
-    background-color: get-color(p-5);
-  }
-
-  &.isExpanded {
-    transform: rotate(90deg);
-    color: get-color(n-10);
-    background-color: get-color(primary);
-
-    &:hover {
-      background-color: get-color(p-1);
-    }
-
-    &:active {
-      background-color: get-color(p-0);
-    }
-  }
-
-  &[disabled],
-  &.isExpanded[disabled] {
-    background-color: get-color(n-8);
-    color: get-color(n-6);
-    cursor: not-allowed;
-  }
-}
-
 @mixin text-overflow {
   white-space: nowrap;
   overflow: hidden;

package/theme/_pattern.scss

@@ -43,7 +43,7 @@
     justify-content: center;
     align-items: center;
     padding: $table-cell-padding-v $table-cell-padding-h;
-    min-height: $table-row-min-height + 2px;
+    min-height: $table-row-min-height;
     @include text-set(m, placeholder);
 
     background-color: get-color(n-10);
@@ -60,3 +60,62 @@
     border-top-right-radius: 0;
   }
 }
+
+@mixin table-with-detail($detailColumn: 'detail') {
+  .aui-table {
+    &__row {
+      flex-wrap: wrap;
+    }
+
+    &__column-#{$detailColumn} {
+      &.aui-table__header-cell {
+        display: none;
+      }
+
+      &.aui-table__cell {
+        width: 100%;
+        flex-shrink: 0;
+        flex-basis: 100%;
+        padding: 0 $table-cell-padding-h;
+        overflow: hidden;
+
+        .aui-table__cell-expand-detail {
+          border-radius: get-size(border-radius-l);
+          background-color: get-color(n-9);
+        }
+      }
+    }
+  }
+}
+
+@mixin table-with-expand($expandColumn: 'expand') {
+  .aui-table {
+    &__cell,
+    &__header-cell {
+      &.aui-table__column-#{$expandColumn} {
+        display: flex;
+        align-items: center;
+        height: $table-row-min-height - 2px;
+        max-width: calc(#{$table-cell-padding-h} + #{get-size(icon-size-m)});
+        margin-right: -2px;
+
+        .aui-table__cell-expand-button {
+          width: get-size(icon-size-m);
+          height: get-size(icon-size-m);
+
+          &.collapsed {
+            background-color: get-color(p-6);
+            border-color: get-color(p-6);
+            color: get-color(primary);
+          }
+
+          &[disabled] {
+            background-color: get-color(n-8);
+            border-color: get-color(n-8);
+            color: get-color(n-6);
+          }
+        }
+      }
+    }
+  }
+}

package/theme/_var.scss

@@ -37,7 +37,7 @@ $text-button-mini-font-size: 12px;
 // Table
 $table-padding: 12px;
 $table-row-min-height: 60px;
-$table-cell-padding-v: 16px;
+$table-cell-padding-v: 15px;
 $table-cell-padding-h: 10px;
 
 // Sort
@@ -212,7 +212,6 @@ $tag-large-font-size: $font-size-regular;
 $tag-large-padding: 16px - $tag-border-width;
 
 $tag-medium-height: $height-small;
-$tag-medium-font-size: $font-size-regular;
 $tag-medium-padding: 12px - $tag-border-width;
 
 $tag-small-height: $height-mini;
@@ -323,5 +322,8 @@ $date-picker-body-size: 216px;
 $date-picker-seprator-gap: 20px;
 $date-picker-row-gap: 8px;
 $date-picker-cell-size: 24px;
-$range-picker-body-width: 552px;
-$range-picker-header-width: 275px;
+$range-picker-body-width: 524px;
+$range-picker-panel-spacing: 32px;
+$range-picker-header-width: (
+    $range-picker-body-width - $range-picker-panel-spacing
+  ) / 2;

package/accordion/accordion.component.scss.ngstyle.d.ts

@@ -1 +0,0 @@
-export {};

package/esm2015/accordion/accordion.component.scss.ngstyle.js

@@ -1,9 +0,0 @@
-/**
- * @fileoverview This file was generated by the Angular template compiler. Do not edit.
- *
- * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes,extraRequire}
- * tslint:disable
- */
-var styles = [".aui-accordion.hasBg{padding:12px;border-radius:var(--aui-border-radius-l);background-color:rgb(var(--aui-color-n-9))}aui-accordion+aui-accordion .aui-accordion{margin-top:var(--aui-spacing-xl)}"];
-export { styles as styles };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLmNvbXBvbmVudC5zY3NzLm5nc3R5bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvYWNjb3JkaW9uL2FjY29yZGlvbi5jb21wb25lbnQuc2Nzcy5uZ3N0eWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBpMCBmcm9tICdAYW5ndWxhci9jb3JlJztcbmkwLkNvbXBvbmVudEZhY3Rvcnk7XG4iXX0=