@alauda/ui 5.7.7-beta.8 → 6.0.1-beta.0

package/theme/_mixin.scss

@@ -1,10 +1,44 @@
 @import 'base-var';
 @import 'var';
 
-@mixin text-set($size: m, $color: main) {
+@mixin theme-light {
+  :root {
+    @content;
+  }
+
+  html[aui-color-mode='light'] {
+    @content;
+  }
+}
+
+@mixin theme-dark {
+  @media (prefers-color-scheme: dark) {
+    html[aui-color-mode='auto'] {
+      @content;
+    }
+  }
+
+  html[aui-color-mode='dark'] {
+    @content;
+  }
+}
+
+@mixin text-set($size: m, $color: none) {
   font-size: get-size(font-size-#{$size});
   line-height: get-size(line-height-#{$size});
-  color: get-text-color($color);
+  @if $color != none {
+    color: get-text-color($color);
+  }
+}
+
+@mixin icon-set($size: m, $color: none) {
+  display: inline-flex;
+  align-items: center;
+  height: get-size(line-height-#{$size});
+  font-size: get-size(font-size-#{$size});
+  @if $color != none {
+    color: get-text-color($color);
+  }
 }
 
 // 使用 box-shadow 模拟带圆角的 outline
@@ -87,3 +121,16 @@
   background-color: $input-bg-color;
   border-color: $input-border-color;
 }
+
+@mixin vertical-dashed-line($width: 1px, $color: 'n-7') {
+  background: linear-gradient(
+    to bottom,
+    get-color($color),
+    get-color($color) 8px,
+    transparent 6px,
+    transparent
+  );
+  width: $width;
+  background-size: 100% 14px;
+  height: 100%;
+}

package/theme/_pattern.scss

@@ -97,7 +97,44 @@
         width: 100%;
         flex-shrink: 0;
         flex-basis: 100%;
-        margin: 12px 0 -12px 0;
+        padding: 0 calc(#{get-size(table-cell-padding-lr)} / 2);
+        overflow: hidden;
+        .aui-table__cell-expand-detail {
+          background-color: get-color(n-9);
+          margin-top: get-size(table-cell-padding-tb-m);
+          padding: get-size(table-cell-padding-tb-m);
+        }
+      }
+    }
+  }
+}
+
+@mixin with-expand($expandColumn: 'expand') {
+  ::ng-deep .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 */
+
+        .aui-table__cell-expand-button {
+          width: get-size(font-size-l);
+          height: get-size(font-size-l);
+          &.collapsed {
+            background-color: get-rgba(primary, 0.1);
+            border-color: get-rgba(primary, 0.1);
+            color: get-color(primary);
+          }
+        }
       }
     }
   }

package/theme/_var.scss

@@ -54,13 +54,33 @@ $sort-indicator-color-active: #2c2f36;
 $sort-indicator-size: 4px;
 $sort-indicator-margin: 4px;
 
+// Nav menu
+$nav-menu-main-panel-width: 48px;
+$nav-menu-main-panel-expanded-width: 200px;
+$nav-menu-color: $color-text-help;
+$nav-menu-color-hover: $color-white;
+$nav-menu-divider-color: #555;
+$nav-menu-bg-color-main: #333;
+$nav-menu-bg-color-secondary: mix(#000, $nav-menu-bg-color-main, 24%);
+$nav-menu-bg-color-tertiary: mix(#fff, $nav-menu-bg-color-main, 5%);
+
+$nav-item-selected-marker-width: 4px;
+$nav-item-selected-marker-color: $color-primary;
+$nav-item-padding-hoz: 12px;
+$nav-item-padding-ver: 7px;
+$nav-item-padding-ver-large: 13px;
+$nav-item-icon-size: 16px;
+$nav-item-icon-margin: 8px;
+$nav-item-font-size: $font-size-regular;
+$nav-item-line-height: 18px;
+
 // Page
 $page-background: #f2f2f2;
 $page-header-background: #262626;
 $page-header-height: 48px;
 $page-toolbar-height: 44px;
 $page-snackbar-height: 56px;
-$page-sider-width: 200px;
+$page-sider-width: $nav-menu-main-panel-expanded-width;
 $page-content-padding: 20px;
 
 // Code editor
@@ -228,12 +248,15 @@ $tag-info-bg-color: $color-disabled-bg;
 $tag-large-height: $height-medium;
 $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;
 $tag-small-font-size: $font-size-small;
 $tag-margin: 8px;
+
 $tag-mini-height: 20px;
 $tag-mini-margin: 6px;
 $tag-mini-padding: 8px - $tag-border-width;
@@ -291,7 +314,7 @@ $section-border-width: $border-width;
 $icon-margin-hoz: 4px;
 
 // Tabs
-$tab-label-content-max-width: 150px;
+$tab-label-content-max-width: 160px;
 $tab-label-padding-large: 16px 20px;
 $tab-label-padding-medium: 12px 20px;
 $tab-label-padding-small: 8px 16px;
@@ -299,7 +322,7 @@ $tab-label-font-size-large: $font-size-larger;
 $tab-label-font-size-medium: $font-size-large;
 $tab-label-font-size-small: $font-size-regular;
 $tab-border: $border-width $border-style #ededed;
-$tab-header-type-card-bg-color: #fafafa;
+$tab-header-type-card-bg-color: get-color(n-9);
 $tab-header-indicator-color: $color-primary;
 $tab-scroll-transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
 $tab-pagination-button-z-index: 3;
@@ -307,8 +330,8 @@ $tab-label-z-index: 2;
 $tab-active-indicator-z-index: 1;
 $tab-label-focus-box-shadow: inset 0 0 0 3px rgba($color-primary, 0.3);
 $tab-header-close-icon-size: 16px;
-$tab-header-close-icon-color: $color-text-help;
-$tab-header-close-icon-color-hover: $color-white;
+$tab-header-title-font-size: $font-size-extra-large;
+$tab-header-title-spacing: 20px;
 
 // Status bar
 $status-bar-border-radius: $border-radius;
@@ -336,6 +359,6 @@ $date-picker-icon-size: $font-size-large;
 $date-picker-body-size: 216px;
 $date-picker-seprator-gap: 20px;
 $date-picker-row-gap: 8px;
-$date-picker-cell-size: 22px;
+$date-picker-cell-size: 24px;
 $range-picker-body-width: 552px;
 $range-picker-header-width: 275px;

package/theme/public-api.d.ts

@@ -1 +1,4 @@
+export * from './theme.pipe';
+export * from './theme.module';
 export * from './theme.service';
+export * from './theme.types';

package/theme/style.css

@@ -15,54 +15,6 @@
  ******************************
  */
 :root {
-  --aui-inline-height-l: 40px;
-  --aui-inline-height-m: 32px;
-  --aui-inline-height-s: 28px;
-  --aui-inline-height-xs: 24px;
-  --aui-inline-padding-l: 19px;
-  --aui-inline-padding-m: 15px;
-  --aui-inline-padding-s: 11px;
-  --aui-inline-padding-xs: 7px;
-  --aui-inline-padding-xxs: 5px;
-  --aui-spacing-xxxxxl: 40px;
-  --aui-spacing-xxxxl: 32px;
-  --aui-spacing-xxxl: 24px;
-  --aui-spacing-xxl: 20px;
-  --aui-spacing-xl: 16px;
-  --aui-spacing-l: 12px;
-  --aui-spacing-m: 8px;
-  --aui-spacing-s: 4px;
-  --aui-spacing-xs: 2px;
-  --aui-font-weight-bold: 500;
-  --aui-font-weight-normal: 400;
-  --aui-font-size-xxl: 20px;
-  --aui-font-size-xl: 18px;
-  --aui-font-size-l: 16px;
-  --aui-font-size-m: 14px;
-  --aui-font-size-s: 12px;
-  --aui-line-height-xxxl: 32px;
-  --aui-line-height-xxl: 28px;
-  --aui-line-height-xl: 24px;
-  --aui-line-height-l: 22px;
-  --aui-line-height-m: 20px;
-  --aui-line-height-s: 16px;
-  --aui-icon-size-xxl: 24px;
-  --aui-icon-size-xl: 24px;
-  --aui-icon-size-l: 16px;
-  --aui-icon-size-m: 16px;
-  --aui-icon-size-s: 12px;
-  --aui-border-radius-l: 4px;
-  --aui-border-radius-m: 2px;
-  --aui-page-header-height: 60px;
-  --aui-page-toolbar-height: 44px;
-  --aui-page-snackbar-height: 60px;
-  --aui-page-sider-width: 260px;
-  --aui-page-padding-m: 20px;
-  --aui-page-padding-s: 16px;
-  --aui-form-item-width-l: 732px;
-  --aui-form-item-width-m: 436px;
-  --aui-form-item-width-s: 140px;
-  --aui-border-m: 1px;
   --aui-color-blue: 0, 122, 245;
   --aui-color-b-0: 0, 103, 208;
   --aui-color-b-1: 38, 141, 246;
@@ -104,19 +56,54 @@
   --aui-color-n-8: 237, 239, 242;
   --aui-color-n-9: 247, 249, 252;
   --aui-color-n-10: 255, 255, 255;
-  --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);
-  --aui-color-p-2: var(--aui-color-b-2);
-  --aui-color-p-3: var(--aui-color-b-3);
-  --aui-color-p-4: var(--aui-color-b-4);
-  --aui-color-p-5: var(--aui-color-b-5);
-  --aui-color-p-6: var(--aui-color-b-6);
-  --aui-color-p-7: var(--aui-color-b-7);
+}
+
+html[aui-color-mode=light] {
+  --aui-color-blue: 0, 122, 245;
+  --aui-color-b-0: 0, 103, 208;
+  --aui-color-b-1: 38, 141, 246;
+  --aui-color-b-2: 77, 162, 248;
+  --aui-color-b-3: 102, 175, 249;
+  --aui-color-b-4: 179, 215, 252;
+  --aui-color-b-5: 204, 228, 253;
+  --aui-color-b-6: 229, 241, 254;
+  --aui-color-b-7: 242, 248, 254;
+  --aui-color-green: 0, 194, 97;
+  --aui-color-g-0: 0, 165, 82;
+  --aui-color-g-1: 38, 203, 120;
+  --aui-color-g-2: 76, 212, 144;
+  --aui-color-g-4: 179, 236, 207;
+  --aui-color-g-6: 230, 249, 239;
+  --aui-color-g-7: 242, 251, 246;
+  --aui-color-yellow: 245, 163, 0;
+  --aui-color-y-0: 220, 146, 0;
+  --aui-color-y-1: 246, 176, 38;
+  --aui-color-y-2: 248, 190, 77;
+  --aui-color-y-4: 252, 227, 179;
+  --aui-color-y-6: 254, 245, 230;
+  --aui-color-y-7: 254, 250, 243;
+  --aui-color-red: 235, 0, 39;
+  --aui-color-r-0: 199, 0, 33;
+  --aui-color-r-1: 237, 38, 71;
+  --aui-color-r-2: 241, 76, 103;
+  --aui-color-r-4: 249, 179, 190;
+  --aui-color-r-6: 253, 230, 233;
+  --aui-color-r-7: 254, 243, 244;
+  --aui-color-n-0: 0, 0, 0;
+  --aui-color-n-1: 50, 52, 55;
+  --aui-color-n-2: 100, 102, 105;
+  --aui-color-n-3: 124, 126, 129;
+  --aui-color-n-4: 150, 152, 155;
+  --aui-color-n-5: 174, 176, 179;
+  --aui-color-n-6: 200, 202, 205;
+  --aui-color-n-7: 212, 214, 217;
+  --aui-color-n-8: 237, 239, 242;
+  --aui-color-n-9: 247, 249, 252;
+  --aui-color-n-10: 255, 255, 255;
 }
 
 @media (prefers-color-scheme: dark) {
-  [aui-color-mode=auto] {
+  html[aui-color-mode=auto] {
     --aui-color-blue: 0, 122, 245;
     --aui-color-b-0: 0, 103, 208;
     --aui-color-b-1: 38, 141, 246;
@@ -160,7 +147,7 @@
     --aui-color-n-10: 255, 255, 255;
   }
 }
-html[aui-color-mode=light] {
+html[aui-color-mode=dark] {
   --aui-color-blue: 0, 122, 245;
   --aui-color-b-0: 0, 103, 208;
   --aui-color-b-1: 38, 141, 246;
@@ -204,48 +191,75 @@ html[aui-color-mode=light] {
   --aui-color-n-10: 255, 255, 255;
 }
 
-html[aui-color-mode=dark] {
-  --aui-color-blue: 0, 122, 245;
-  --aui-color-b-0: 0, 103, 208;
-  --aui-color-b-1: 38, 141, 246;
-  --aui-color-b-2: 77, 162, 248;
-  --aui-color-b-3: 102, 175, 249;
-  --aui-color-b-4: 179, 215, 252;
-  --aui-color-b-5: 204, 228, 253;
-  --aui-color-b-6: 229, 241, 254;
-  --aui-color-b-7: 242, 248, 254;
-  --aui-color-green: 0, 194, 97;
-  --aui-color-g-0: 0, 165, 82;
-  --aui-color-g-1: 38, 203, 120;
-  --aui-color-g-2: 76, 212, 144;
-  --aui-color-g-4: 179, 236, 207;
-  --aui-color-g-6: 230, 249, 239;
-  --aui-color-g-7: 242, 251, 246;
-  --aui-color-yellow: 245, 163, 0;
-  --aui-color-y-0: 220, 146, 0;
-  --aui-color-y-1: 246, 176, 38;
-  --aui-color-y-2: 248, 190, 77;
-  --aui-color-y-4: 252, 227, 179;
-  --aui-color-y-6: 254, 245, 230;
-  --aui-color-y-7: 254, 250, 243;
-  --aui-color-red: 235, 0, 39;
-  --aui-color-r-0: 199, 0, 33;
-  --aui-color-r-1: 237, 38, 71;
-  --aui-color-r-2: 241, 76, 103;
-  --aui-color-r-4: 249, 179, 190;
-  --aui-color-r-6: 253, 230, 233;
-  --aui-color-r-7: 254, 243, 244;
-  --aui-color-n-0: 0, 0, 0;
-  --aui-color-n-1: 50, 52, 55;
-  --aui-color-n-2: 100, 102, 105;
-  --aui-color-n-3: 124, 126, 129;
-  --aui-color-n-4: 150, 152, 155;
-  --aui-color-n-5: 174, 176, 179;
-  --aui-color-n-6: 200, 202, 205;
-  --aui-color-n-7: 212, 214, 217;
-  --aui-color-n-8: 237, 239, 242;
-  --aui-color-n-9: 247, 249, 252;
-  --aui-color-n-10: 255, 255, 255;
+:root {
+  --aui-inline-height-l: 40px;
+  --aui-inline-height-m: 32px;
+  --aui-inline-height-s: 28px;
+  --aui-inline-height-xs: 24px;
+  --aui-inline-padding-l: 19px;
+  --aui-inline-padding-m: 15px;
+  --aui-inline-padding-s: 11px;
+  --aui-inline-padding-xs: 7px;
+  --aui-inline-padding-xxs: 5px;
+  --aui-spacing-xxxxxl: 40px;
+  --aui-spacing-xxxxl: 32px;
+  --aui-spacing-xxxl: 24px;
+  --aui-spacing-xxl: 20px;
+  --aui-spacing-xl: 16px;
+  --aui-spacing-l: 12px;
+  --aui-spacing-m: 8px;
+  --aui-spacing-s: 4px;
+  --aui-spacing-xs: 2px;
+  --aui-font-weight-bold: 500;
+  --aui-font-weight-normal: 400;
+  --aui-font-size-xxl: 20px;
+  --aui-font-size-xl: 18px;
+  --aui-font-size-l: 16px;
+  --aui-font-size-m: 14px;
+  --aui-font-size-s: 12px;
+  --aui-line-height-xxxl: 32px;
+  --aui-line-height-xxl: 28px;
+  --aui-line-height-xl: 24px;
+  --aui-line-height-l: 22px;
+  --aui-line-height-m: 20px;
+  --aui-line-height-s: 16px;
+  --aui-icon-size-xxl: 24px;
+  --aui-icon-size-xl: 24px;
+  --aui-icon-size-l: 16px;
+  --aui-icon-size-m: 16px;
+  --aui-icon-size-s: 12px;
+  --aui-border-radius-l: 4px;
+  --aui-border-radius-m: 2px;
+  --aui-page-header-height: 60px;
+  --aui-page-toolbar-height: 44px;
+  --aui-page-snackbar-height: 60px;
+  --aui-page-sider-width: 260px;
+  --aui-page-padding-m: 20px;
+  --aui-page-padding-s: 16px;
+  --aui-form-item-width-l: 732px;
+  --aui-form-item-width-m: 436px;
+  --aui-form-item-width-s: 140px;
+  --aui-border-m: 1px;
+  --aui-table-margin: 12px;
+  --aui-table-cell-padding-lr: 20px;
+  --aui-table-cell-padding-tb-s: 12px;
+  --aui-table-cell-padding-tb-m: 16px;
+  --aui-table-row-min-height-s: 52px;
+  --aui-table-row-min-height-m: 60px;
+  --aui-table-header-cell-padding-tb: 12px;
+  --aui-table-header-height: 44px;
+  --aui-table-border-width: 1px;
+  --aui-select-width: 100%;
+  --aui-select-options-padding: 8px;
+  --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);
+  --aui-color-p-2: var(--aui-color-b-2);
+  --aui-color-p-3: var(--aui-color-b-3);
+  --aui-color-p-4: var(--aui-color-b-4);
+  --aui-color-p-5: var(--aui-color-b-5);
+  --aui-color-p-6: var(--aui-color-b-6);
+  --aui-color-p-7: var(--aui-color-b-7);
 }
 
 body {
@@ -259,7 +273,11 @@ a {
   color: rgb(var(--aui-color-primary));
   text-decoration: none;
 }
-a:hover, a:active, a:focus {
+a:hover {
+  color: rgb(var(--aui-color-p-1));
+  text-decoration: underline;
+}
+a:active, a:focus {
   color: rgb(var(--aui-color-p-0));
   text-decoration: underline;
 }

package/theme/theme.module.d.ts

@@ -0,0 +1,2 @@
+export declare class ThemeModule {
+}

package/theme/theme.module.ngfactory.d.ts

@@ -0,0 +1,3 @@
+import * as i0 from '@angular/core';
+import * as i1 from './theme.module';
+export declare const ThemeModuleNgFactory: i0.NgModuleFactory<i1.ThemeModule>;

package/theme/theme.pipe.d.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectorRef, OnDestroy, PipeTransform } from '@angular/core';
+import { ThemeService } from './theme.service';
+import { ThemeSet } from './theme.types';
+export declare class ThemePipe<T> implements PipeTransform, OnDestroy {
+    private currentTheme;
+    private readonly destroy$$;
+    constructor(themeService: ThemeService, cdr: ChangeDetectorRef);
+    transform(v: ThemeSet<T>): T;
+    ngOnDestroy(): void;
+}

package/theme/theme.service.d.ts

@@ -1,5 +1,12 @@
+import { Theme, ThemeMode } from './theme.types';
 export declare class ThemeService {
-    getCurrentColorMode(): ColorMode;
-    setColorMode(mode: ColorMode): void;
+    private readonly htmlEl;
+    private browserTheme;
+    private themeMode;
+    private readonly currentAppTheme$$;
+    currentAppTheme$: import("rxjs").Observable<Theme>;
+    constructor();
+    setThemeMode(mode: ThemeMode): void;
+    getAppTheme(): Theme;
+    private themeChanged;
 }
-export declare type ColorMode = 'auto' | 'light' | 'dark';

package/theme/theme.types.d.ts

@@ -0,0 +1,3 @@
+export declare type Theme = 'light' | 'dark';
+export declare type ThemeMode = 'auto' | 'light' | 'dark';
+export declare type ThemeSet<T> = Record<Theme, T> | ((theme: Theme) => T);

package/time-picker/component.d.ts

@@ -24,6 +24,7 @@ export declare class TimePickerComponent extends CommonFormControl<TimePickerDat
     focused: boolean;
     hovered: boolean;
     bem: import("../public-api").Bem;
+    get rootClass(): string;
     writeValue(value: TimePickerDataLike): void;
     setValue(value: Dayjs): void;
     changeFromPanel(value: Dayjs): void;

package/tooltip/tooltip.component.d.ts

@@ -1,11 +1,13 @@
 import { ChangeDetectorRef, ElementRef, TemplateRef } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
+import { Bem } from '../utils';
 import { TooltipType } from './tooltip.types';
 export declare class TooltipComponent {
     elRef: ElementRef<HTMLElement>;
     cdr: ChangeDetectorRef;
     text: string;
     template: TemplateRef<any>;
+    bem: Bem;
     inputContent$: Observable<string | TemplateRef<any>>;
     inputType$: Observable<TooltipType>;
     inputPosition$: Observable<string>;

package/tree-select/tree-select.component.d.ts

@@ -51,6 +51,8 @@ export declare class TreeSelectComponent<T = unknown> extends CommonFormControl<
     onNodeClick(node: TreeNodeComponent<T>): void;
     getVisibleNodeCount(): number;
     selectNode(node: TreeNodeComponent<T>): void;
+    onKeyDown(event: KeyboardEvent): void;
+    closeOption(): void;
     updateSelectDisplay(value: any): void;
     clearValue(event: Event): void;
     writeValue(value: T): void;