@alauda/ui 6.0.2-beta.19 → 6.0.2-beta.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alauda/ui",
-  "version": "6.0.2-beta.19",
+  "version": "6.0.2-beta.22",
   "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

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

package/theme/_base-var.scss

@@ -29,10 +29,6 @@
   @return rgba(var(--aui-color-#{$name}), $opacity);
 }
 
-@function get-neg-size($name) {
-  @return calc(var(--aui-#{$name}) * -1);
-}
-
 $divider-line: 1px solid get-color(n-8);
 
 /**

package/theme/_pattern.scss

@@ -1,74 +1,27 @@
-@import 'var.scss';
-
-@mixin table-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-  font-size: $font-size-larger;
-  color: $color-text-main;
-}
-
-@mixin table-placeholder {
-  padding: calc(#{get-size(spacing-xxl)} - 1px) 0;
-  text-align: center;
-  font-size: get-size(font-size-m);
-  color: get-color(n-4);
-  background: get-color(n-10);
-  border: solid 1px get-color(n-8);
-  border-radius: get-size(border-radius-l);
-
-  aui-icon {
-    margin-right: get-size(spacing-m);
-  }
-}
+@import 'var';
+@import 'mixin';
 
 @mixin shadow-0 {
-  border-radius: $border-radius;
-  background-color: $color-white;
+  border-radius: get-size(border-radius-m);
+  background-color: get-color(n-10);
 }
 
 @mixin shadow-2 {
-  border-radius: $border-radius;
-  background-color: $color-white;
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.24);
+  border-radius: get-size(border-radius-m);
+  background-color: get-color(n-10);
+  box-shadow: 0 0 2px 0 get-rgba(n-1, 0.24);
 }
 
 @mixin shadow-8 {
-  border-radius: $border-radius;
-  background-color: $color-white;
-  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
+  border-radius: get-size(border-radius-m);
+  background-color: get-color(n-10);
+  box-shadow: 0 2px 8px 0 get-rgba(n-1, 0.16);
 }
 
 @mixin shadow-16 {
-  border-radius: $border-radius;
-  background-color: $color-white;
-  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16);
-}
-
-@mixin feat-stage-tag {
-  display: inline-block;
-  padding: 0 4px * 1.2;
-  border-radius: 6px * 1.2;
-  // stylelint-disable-next-line font-family-no-missing-generic-family-keyword
-  font-family: Calibri;
-  font-size: 12px;
-  font-weight: bold;
-  font-style: italic;
-  line-height: 12px * 1.2;
-  color: #333;
-  background-color: #ffdf00;
-  transform: scale(0.8333, 0.8333);
-}
-
-@mixin feat-stage-text {
-  // stylelint-disable-next-line font-family-no-missing-generic-family-keyword
-  font-family: Calibri;
-  font-size: 12px;
-  font-weight: bold;
-  font-style: italic;
-  color: #ffdf00;
-  transform: scale(0.8333, 0.8333);
+  border-radius: get-size(border-radius-m);
+  background-color: get-color(n-10);
+  box-shadow: 0 4px 16px 0 get-rgba(n-1, 0.16);
 }
 
 @mixin zh-form-label-width($parent) {
@@ -83,29 +36,47 @@
   }
 }
 
-@mixin form-width($selector: '.aui-form') {
-  #{$selector} {
-    margin: auto;
-    max-width: 960px;
+@mixin table-placeholder($className) {
+  #{$className} {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: $table-cell-padding-v $table-cell-padding-h;
+    min-height: $table-row-min-height;
+    @include text-set(m, placeholder);
+
+    background-color: get-color(n-10);
+    border: solid 1px get-color(n-8);
+    border-radius: get-size(border-radius-l);
+  }
+
+  .aui-table .aui-table__row + #{$className} {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
   }
 }
 
-@mixin with-detail($detailColumn: 'detail') {
-  ::ng-deep .aui-table {
+@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 calc(#{get-size(table-cell-padding-lr)} / 2);
+        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);
         }
       }
@@ -113,31 +84,32 @@
   }
 }
 
-@mixin with-expand($expandColumn: 'expand') {
-  ::ng-deep .aui-table {
+@mixin table-with-expand($expandColumn: 'expand') {
+  .aui-table {
     &__cell,
     &__header-cell {
       &.aui-table__column-#{$expandColumn} {
-        max-width: calc(
-          var(--aui-table-cell-padding-lr) / 2 + var(--aui-font-size-l)
-        );
-        padding-right: 0;
-        /* stylelint-disable function-calc-no-unspaced-operator */
-        line-height: calc(
-          #{get-size(table-row-min-height-m)} - 2 * #{get-size(
-              table-cell-padding-tb-m
-            )}
-        );
-        /* stylelint-enable function-calc-no-unspaced-operator */
+        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(font-size-l);
-          height: get-size(font-size-l);
+          width: get-size(icon-size-m);
+          height: get-size(icon-size-m);
+
           &.collapsed {
-            background-color: get-rgba(primary, 0.1);
-            border-color: get-rgba(primary, 0.1);
+            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

@@ -35,18 +35,10 @@ $text-button-mini-height: 16px;
 $text-button-mini-font-size: 12px;
 
 // Table
-$table-border-width: 1px;
-$table-header-row-height: 42px;
-$table-cell-horizontal-padding: 8px;
-$table-row-vertical-padding: 12px;
-
-$table-header-row-bg: #fafafa;
-$table-header-row-border-color: #eee;
-$table-header-row-color: #333;
-$table-row-border-color: #eee;
-$table-row-bg: #fff;
-$table-row-color: #333;
-$table-font-size-base: 14px;
+$table-padding: 12px;
+$table-row-min-height: 60px;
+$table-cell-padding-v: 15px;
+$table-cell-padding-h: 10px;
 
 // Sort
 $sort-indicator-color: #ccc;

package/theme/style.css

@@ -239,15 +239,6 @@ html[aui-color-mode=dark] {
   --aui-form-item-width-l: 732px;
   --aui-form-item-width-m: 436px;
   --aui-form-item-width-s: 140px;
-  --aui-table-margin: 12px;
-  --aui-table-cell-padding-lr: 20px;
-  --aui-table-cell-padding-tb-s: 11px;
-  --aui-table-cell-padding-tb-m: 15px;
-  --aui-table-row-min-height-s: 50px;
-  --aui-table-row-min-height-m: 58px;
-  --aui-table-header-cell-padding-tb: 11px;
-  --aui-table-header-height: 44px;
-  --aui-table-border-width: 1px;
   --aui-color-primary: var(--aui-color-blue);
   --aui-color-p-0: var(--aui-color-b-0);
   --aui-color-p-1: var(--aui-color-b-1);