@alauda/ui 6.0.4-beta.9 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alauda/ui",
-  "version": "6.0.4-beta.9",
+  "version": "6.1.0",
   "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,9 +1,13 @@
 import { CdkCell } from '@angular/cdk/table';
 import { EventEmitter } from '@angular/core';
-export declare class TableCellComponent extends CdkCell {
+export declare class TableExpandButtonCellComponent extends CdkCell {
     expand: boolean;
     disabled: boolean;
-    template: boolean;
     expandChange: EventEmitter<any>;
     get expanded(): string;
 }
+export declare class TableExpandPanelCellComponent extends CdkCell {
+    expand: boolean;
+    background: boolean;
+    get expanded(): string;
+}

package/theme/_mixin.scss

@@ -98,6 +98,57 @@
   }
 }
 
+@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;
+    min-height: $table-row-min-height + 2px;
     @include text-set(m, placeholder);
 
     background-color: get-color(n-10);
@@ -60,62 +60,3 @@
     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: 15px;
+$table-cell-padding-v: 16px;
 $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;