@alauda/ui 6.3.1-beta.2 → 6.3.1-beta.22

package/form/common-form.d.ts

@@ -1,38 +1,35 @@
 import { ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { Observable, ReplaySubject } from 'rxjs';
+import { ReplaySubject } from 'rxjs';
 import * as i0 from "@angular/core";
 /**
  * form control 内部不保持 value 属性，当不使用 ngModel 时可以通过 [(value)] 实现双向绑定；
  * 也可以分别传入 value 和 监听 valueChange 事件以实现阻断用户操作的功能。
  */
-export declare class CommonFormControl<T, V = T> implements ControlValueAccessor {
+export declare class CommonFormControl<V, M = V> implements ControlValueAccessor {
     protected cdr: ChangeDetectorRef;
     get disabled(): boolean | '';
     set disabled(val: boolean | '');
     get readonly(): boolean | "";
     set readonly(val: boolean | "");
-    get propValue(): T;
-    set propValue(val: T);
-    valueChange: EventEmitter<T>;
-    protected onChange: (_: T) => void;
+    get propValue(): V;
+    set propValue(val: V);
+    valueChange: EventEmitter<V>;
+    protected onChange: (_: V) => void;
     protected onTouched: () => void;
-    protected value$$: ReplaySubject<V>;
     private _propValue;
     private _disabled;
-    snapshot: {
-        value: V;
-    };
-    value$: Observable<V>;
+    model: M;
+    model$: ReplaySubject<M>;
     constructor(cdr: ChangeDetectorRef);
-    registerOnChange(fn: (_: T) => void): void;
+    registerOnChange(fn: (_: V) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
-    writeValue(value: T): void;
+    writeValue(value: V): void;
+    emitModel(model: M): void;
     emitValue(value: V): void;
-    emitValueChange(value: T): void;
-    protected valueIn(v: T): V;
-    protected valueOut(v: V): T;
+    protected valueIn(value: V): M;
+    protected modelOut(model: M): V;
     static ɵfac: i0.ɵɵFactoryDeclaration<CommonFormControl<any, any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<CommonFormControl<any, any>, never, never, { "disabled": "disabled"; "readonly": "readonly"; "propValue": "value"; }, { "valueChange": "valueChange"; }, never>;
 }

package/input/number-input/number-input.component.d.ts

@@ -17,7 +17,7 @@ export declare class NumberInputComponent extends CommonFormControl<number> impl
     isFocus: boolean;
     ngAfterViewInit(): void;
     valueIn(v: number): number;
-    valueOut(value: number): number;
+    modelOut(value: number): number;
     inputChanged(value: string): void;
     takeOneStep(positive: boolean): void;
     private parsePrecision;

package/input/tags-input/tags-input.component.d.ts

@@ -1,6 +1,5 @@
 import { AfterViewInit, ChangeDetectorRef, ElementRef, Injector, OnChanges, Renderer2, SimpleChanges } from '@angular/core';
 import { AsyncValidatorFn, FormBuilder, NgControl, ValidatorFn, FormControl } from '@angular/forms';
-import { Observable } from 'rxjs';
 import { CommonFormControl } from '../../form/public-api';
 import { ComponentSize } from '../../types';
 import { Bem } from '../../utils';
@@ -31,11 +30,8 @@ export declare class TagsInputComponent extends CommonFormControl<string[]> impl
     get hostDisplay(): string;
     get maxHeight(): string;
     private readonly withMaxRowCount;
-    snapshot: {
-        value: string[];
-    };
-    value$: Observable<string[]>;
     focused: boolean;
+    model: string[];
     readonly inputControl: FormControl;
     controlContainer: NgControl;
     get rootClass(): string;
@@ -44,13 +40,13 @@ export declare class TagsInputComponent extends CommonFormControl<string[]> impl
     constructor(cdr: ChangeDetectorRef, fb: FormBuilder, renderer: Renderer2, injector: Injector);
     ngOnChanges({ inputValidator, inputAsyncValidator, disabled, }: SimpleChanges): void;
     ngAfterViewInit(): void;
-    writeValue(val: string[]): void;
     onRemove(index: number): void;
     onInput(): void;
     onKeyDown(event: KeyboardEvent): void;
     onInputFocus(): void;
     onInputBlur(event: Event): void;
     trackByValue(_: number, value: string): string;
+    protected valueIn(v: string[]): string[];
     private sortByReadonly;
     private pushValue;
     private syncControlStatus;

package/package.json

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

package/radio/radio-group/radio-group.component.d.ts

@@ -17,7 +17,6 @@ export declare class RadioGroupComponent extends CommonFormControl<any> {
     size$: Observable<RadioSize>;
     isPlain$: Observable<boolean>;
     name$: Observable<string>;
-    writeValue(value: any): void;
     onRadioChange(value: any): void;
     onRadioBlur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RadioGroupComponent, never>;

package/select/base-select.d.ts

@@ -33,7 +33,7 @@ export declare abstract class BaseSelect<T, V = T> extends CommonFormControl<V>
     hide: EventEmitter<void>;
     protected selectRef: ElementRef<HTMLElement>;
     protected tooltipRef: TooltipDirective;
-    protected optionListRef: ElementRef;
+    protected optionListRef: ElementRef<HTMLDivElement>;
     protected inputtingOption: OptionComponent<T>;
     protected optionContent?: OptionContentDirective;
     customOptions: QueryList<OptionComponent<T>>;

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

@@ -15,8 +15,8 @@ export declare class MultiSelectComponent<T = unknown> extends BaseSelect<T, T[]
     hasEnabledOptions$: Observable<boolean>;
     private _allowSelectAll;
     isMulti: boolean;
-    selectedValues: T[];
-    values$: Observable<T[]>;
+    model: T[];
+    values$: import("rxjs").ReplaySubject<T[]>;
     tagClassFn: TagClassFn<T>;
     maxRowCount: number;
     customRowHeight: number;
@@ -44,12 +44,13 @@ export declare class MultiSelectComponent<T = unknown> extends BaseSelect<T, T[]
     onInputFocus(): void;
     onInputBlur(): void;
     onKeyDown(event: KeyboardEvent): void;
-    writeValue(val: T[]): void;
     selectOption(option: OptionComponent<T>): void;
     addValue(value: T): void;
     removeValue(value: T): void;
     clearValue(event: Event): void;
     onSelectAllClick(): void;
+    private includes;
+    protected valueIn(v: T[]): T[];
     private resetInput;
     private setInputWidth;
     static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectComponent<any>, never>;

package/select/option/option.component.d.ts

@@ -13,16 +13,17 @@ export declare class OptionComponent<T> {
     private readonly label$$;
     private readonly labelContext$$;
     private readonly value$$;
+    private readonly disabled$$;
     get label(): string | TemplateRef<unknown>;
     set label(val: string | TemplateRef<unknown>);
     get labelContext(): unknown;
     set labelContext(val: unknown);
     get value(): T;
     set value(val: T);
-    get disabled(): boolean | '';
+    get disabled(): boolean;
     set disabled(val: boolean | '');
     isMulti: boolean;
-    elRef: ElementRef;
+    elRef: ElementRef<HTMLDivElement>;
     private readonly select;
     selected: boolean;
     visible: boolean;
@@ -31,6 +32,7 @@ export declare class OptionComponent<T> {
     value$: Observable<T>;
     label$: Observable<string | TemplateRef<unknown>>;
     labelContext$: Observable<unknown>;
+    disabled$: Observable<boolean>;
     selected$: Observable<boolean>;
     size$: Observable<ComponentSize>;
     visible$: Observable<boolean>;

package/select/select.component.d.ts

@@ -16,7 +16,7 @@ export declare class SelectComponent<T = unknown> extends BaseSelect<T> implemen
     ngAfterContentInit(): void;
     onShowOptions(): void;
     onHideOptions(): void;
-    writeValue(val: T): void;
+    protected valueIn(v: T): T;
     selectOption(option: OptionComponent<T>): void;
     clearValue(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent<any>, never>;

package/select/select.types.d.ts

@@ -4,6 +4,7 @@ export interface SelectOption {
     labelContext?: unknown;
 }
 export interface SelectFilterOption<T> extends SelectOption {
+    disabled?: boolean;
     value: T;
 }
 export declare type OptionFilterFn<T> = (filter: string, option: SelectFilterOption<T>) => boolean;

package/switch/switch.component.d.ts

@@ -4,7 +4,6 @@ import * as i0 from "@angular/core";
 export declare class SwitchComponent extends CommonFormControl<boolean> {
     bem: Bem;
     loading: boolean;
-    writeValue(value: boolean): void;
     onSwitch(): void;
     onBlur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SwitchComponent, never>;

package/theme/_mixin.scss

@@ -1,37 +1,39 @@
 @import 'base-var';
 @import 'var';
 
-@function theme-selector($host) {
-  $scope: &;
-
+@function theme-selector($theme, $scope) {
   @if ($scope) {
-    @return selector-nest($host, $scope);
+    @return selector-nest($theme, $scope);
   } @else {
-    @return $host;
+    @return $theme;
   }
 }
 
 @mixin theme-light {
+  $scope: &;
+
   @at-root {
-    #{theme-selector(':root')} {
+    #{theme-selector(':root', $scope)} {
       @content;
     }
 
-    #{theme-selector('html[aui-theme-mode=light]')} {
+    #{theme-selector('html[aui-theme-mode=light]', $scope)} {
       @content;
     }
   }
 }
 
 @mixin theme-dark {
+  $scope: &;
+
   @at-root {
     @media (prefers-color-scheme: dark) {
-      #{theme-selector('html[aui-theme-mode=system]')} {
+      #{theme-selector('html[aui-theme-mode=system]', $scope)} {
         @content;
       }
     }
 
-    #{theme-selector('html[aui-theme-mode=dark]')} {
+    #{theme-selector('html[aui-theme-mode=dark]', $scope)} {
       @content;
     }
   }
@@ -92,6 +94,15 @@
   }
 }
 
+@mixin modal-backdrop() {
+  @include theme-light {
+    background-color: use-rgba(origin-shadow, 0.4);
+  }
+  @include theme-dark {
+    background-color: use-rgba(origin-shadow, 0.75);
+  }
+}
+
 @mixin transition($target: all) {
   transition: $target $animation-duration $animation-interpolation;
 }
@@ -104,13 +115,14 @@
   transform: translate(-50%, -50%);
 }
 
-@mixin scroll-bar($color: rgba(0, 0, 0, 0.3)) {
+@mixin scroll-bar($color: #{use-rgba(n-1, 0.2)}) {
   &::-webkit-scrollbar {
     width: 4px;
     height: 4px;
   }
 
   &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
     background-color: $color;
   }
 }

package/theme/style.css

@@ -15,6 +15,7 @@
  ******************************
  */
 :root {
+  color-scheme: light;
   --aui-color-blue: 0, 122, 245;
   --aui-color-b-0: 0, 103, 208;
   --aui-color-b-1: 38, 141, 246;
@@ -69,6 +70,7 @@
 }
 
 html[aui-theme-mode=light] {
+  color-scheme: light;
   --aui-color-blue: 0, 122, 245;
   --aui-color-b-0: 0, 103, 208;
   --aui-color-b-1: 38, 141, 246;
@@ -124,6 +126,7 @@ html[aui-theme-mode=light] {
 
 @media (prefers-color-scheme: dark) {
   html[aui-theme-mode=system] {
+    color-scheme: dark;
     --aui-color-blue: 61, 142, 255;
     --aui-color-b-0: 54, 116, 204;
     --aui-color-b-1: 109, 170, 255;
@@ -178,6 +181,7 @@ html[aui-theme-mode=light] {
   }
 }
 html[aui-theme-mode=dark] {
+  color-scheme: dark;
   --aui-color-blue: 61, 142, 255;
   --aui-color-b-0: 54, 116, 204;
   --aui-color-b-1: 109, 170, 255;
@@ -285,7 +289,7 @@ html[aui-theme-mode=dark] {
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, "Ubuntu", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.43;

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

@@ -56,7 +56,7 @@ export declare class TreeSelectComponent<T = unknown> extends CommonFormControl<
     closeOption(): void;
     updateSelectDisplay(value: any): void;
     clearValue(event: Event): void;
-    writeValue(value: T): void;
+    protected valueIn(v: T): T;
     getPlaceholder(): string;
     getInputValue(): string;
     trackByLabel: (_: number, node: TreeNode<T>) => string;