ngx-tethys 20.0.1-0 → 20.0.2

package/shared/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { Type, TemplateRef, ViewContainerRef, OnInit, OnDestroy, ElementRef, AfterContentInit, QueryList, ChangeDetectorRef, AfterViewInit, Signal, InputSignal, InjectionToken, WritableSignal } from '@angular/core';
+import { Type, TemplateRef, ViewContainerRef, OnInit, OnDestroy, ElementRef, AfterContentInit, QueryList, ChangeDetectorRef, AfterViewInit, Signal, InputSignal, InjectionToken } from '@angular/core';
 import { CdkDrag } from '@angular/cdk/drag-drop';
 import * as i2 from '@angular/forms';
 import { ControlValueAccessor } from '@angular/forms';
@@ -13,7 +13,7 @@ import { ThyTagSize } from 'ngx-tethys/tag';
 import { ThySharedLocale } from 'ngx-tethys/i18n';
 import * as ngx_tethys_shared from 'ngx-tethys/shared';
 import { Highlightable } from '@angular/cdk/a11y';
-import { Subject, Observable } from 'rxjs';
+import { SafeAny } from 'ngx-tethys/types';
 
 /**
  * 视图 Outlet 组件，取代 NgComponentOutlet 和 NgTemplateOutlet
@@ -28,12 +28,12 @@ declare class ThyViewOutletDirective {
     /**
      * 组件或者模板 TemplateRef
      */
-    readonly thyViewOutlet: _angular_core.InputSignal<Type<any> | TemplateRef<any>>;
+    readonly thyViewOutlet: _angular_core.InputSignal<Type<any> | TemplateRef<any> | null>;
     /**
      * 组件和模板上下文传递数据
      */
     readonly thyViewOutletContext: _angular_core.InputSignal<any>;
-    private keyValueDiffer;
+    private keyValueDiffer?;
     private readonly isViewOutletChanged;
     constructor();
     private updateContext;
@@ -48,7 +48,7 @@ declare class ThyTranscludeDirective {
     viewRef: ViewContainerRef;
     protected _viewRef: ViewContainerRef;
     protected _ngTransclude: TemplateRef<any>;
-    readonly thyTransclude: _angular_core.InputSignal<TemplateRef<any>>;
+    readonly thyTransclude: _angular_core.InputSignal<TemplateRef<any> | undefined>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThyTranscludeDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ThyTranscludeDirective, "[thyTransclude]", never, { "thyTransclude": { "alias": "thyTransclude"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -202,7 +202,7 @@ declare class ThyScrollDirective implements OnInit, OnDestroy {
  * @private
  */
 declare class ThyDragDropDirective implements AfterContentInit, OnDestroy {
-    draggables: QueryList<CdkDrag>;
+    draggables?: QueryList<CdkDrag>;
     private ngUnsubscribe$;
     constructor();
     ngAfterContentInit(): void;
@@ -241,8 +241,8 @@ type ThyListLayout = 'list' | 'grid';
  */
 declare class ThyFormCheckBaseComponent extends TabIndexDisabledControlValueAccessorMixin implements ControlValueAccessor {
     protected thyTranslate: ThyTranslate;
-    protected changeDetectorRef?: ChangeDetectorRef;
-    _innerValue: boolean;
+    protected changeDetectorRef?: ChangeDetectorRef | undefined;
+    _innerValue: boolean | null;
     _disabled: boolean;
     private onTouchedCallback;
     private onChangeCallback;
@@ -256,11 +256,11 @@ declare class ThyFormCheckBaseComponent extends TabIndexDisabledControlValueAcce
     /**
      * Label 展示文本
      */
-    readonly thyLabelText: _angular_core.InputSignal<string>;
+    readonly thyLabelText: _angular_core.InputSignal<string | undefined>;
     /**
      * Label 文本多语言 key
      */
-    readonly thyLabelTextTranslateKey: _angular_core.InputSignal<string>;
+    readonly thyLabelTextTranslateKey: _angular_core.InputSignal<string | undefined>;
     _labelText: _angular_core.Signal<any>;
     _isNoText: _angular_core.Signal<boolean>;
     disabled: boolean;
@@ -273,7 +273,7 @@ declare class ThyFormCheckBaseComponent extends TabIndexDisabledControlValueAcce
     writeValue(obj: boolean): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
-    setDisabledState?(isDisabled: boolean): void;
+    setDisabledState(isDisabled: boolean): void;
     updateValue(value: boolean): void;
     constructor();
     change(): void;
@@ -308,13 +308,13 @@ declare class ThySelectControl implements OnInit, AfterViewInit {
     readonly thyPanelOpened: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly thyIsMultiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly thyShowSearch: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly thySelectedOptions: _angular_core.InputSignal<SelectOptionBase | SelectOptionBase[]>;
+    readonly thySelectedOptions: _angular_core.InputSignal<SelectOptionBase | SelectOptionBase[] | undefined>;
     protected readonly previousSelectedOptions: _angular_core.WritableSignal<unknown>;
     readonly thyDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly customDisplayTemplate: _angular_core.InputSignal<TemplateRef<any>>;
+    readonly customDisplayTemplate: _angular_core.InputSignal<TemplateRef<any> | undefined>;
     readonly thyAllowClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly thyPlaceholder: _angular_core.InputSignal<string>;
-    readonly thySize: _angular_core.InputSignal<SelectControlSize>;
+    readonly thySize: _angular_core.InputSignal<SelectControlSize | undefined>;
     readonly tagSize: Signal<ThyTagSize>;
     readonly thyMaxTagCount: _angular_core.InputSignalWithTransform<number | "auto", number | "auto">;
     readonly thyBorderless: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -326,14 +326,14 @@ declare class ThySelectControl implements OnInit, AfterViewInit {
     }>;
     readonly thyOnClear: _angular_core.OutputEmitterRef<Event>;
     readonly thyOnBlur: _angular_core.OutputEmitterRef<Event>;
-    readonly inputElement: Signal<ElementRef<any>>;
+    readonly inputElement: Signal<ElementRef<any> | undefined>;
     locale: Signal<ThySharedLocale>;
     isSelectedValue: Signal<boolean>;
-    readonly tagsContainer: Signal<ElementRef<any>>;
+    readonly tagsContainer: Signal<ElementRef<any> | undefined>;
     visibleTagCount: _angular_core.WritableSignal<number>;
     showClearIcon: Signal<boolean>;
-    selectedTags: Signal<SelectOptionBase[]>;
-    collapsedSelectedTags: Signal<SelectOptionBase[]>;
+    selectedTags: Signal<(SelectOptionBase | undefined)[]>;
+    collapsedSelectedTags: Signal<(SelectOptionBase | undefined)[]>;
     selectedValueStyle: Signal<{
         display: string;
     }>;
@@ -364,9 +364,6 @@ declare class ThySelectCommonModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<ThySelectCommonModule>;
 }
 
-interface IThyOptionParentComponent {
-    isMultiple: boolean;
-}
 interface IThyOptionGroupComponent {
     hidden: boolean;
 }
@@ -383,10 +380,6 @@ interface IThyListOptionParentComponent {
     scrollIntoView(option: IThyOptionComponent): void;
     isSelected(option: IThyOptionComponent): boolean;
 }
-/**
- * Injection token used to provide the parent component to options.
- */
-declare const THY_OPTION_PARENT_COMPONENT: InjectionToken<IThyOptionParentComponent>;
 /**
  * Injection token used to provide the parent component to options.
  */
@@ -401,9 +394,9 @@ declare class ThyListOption implements IThyOptionComponent, Highlightable {
     parentSelectionList: ngx_tethys_shared.IThyListOptionParentComponent;
     role: string;
     tabIndex: number;
-    readonly isMultiple: _angular_core.Signal<unknown>;
-    readonly isListOption: _angular_core.Signal<boolean>;
-    readonly isGridOption: _angular_core.Signal<boolean>;
+    readonly isMultiple: _angular_core.Signal<{}>;
+    readonly isListOption: _angular_core.Signal<boolean | undefined>;
+    readonly isGridOption: _angular_core.Signal<boolean | undefined>;
     readonly id: _angular_core.InputSignal<string>;
     readonly thyValue: _angular_core.InputSignal<any>;
     readonly thyDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -436,81 +429,159 @@ declare class ThyOptionSelectionChangeEvent {
     isUserInput: boolean;
     constructor(option: ThyOption, isUserInput?: boolean);
 }
-declare class ThyOptionVisibleChangeEvent {
-    option: ThyOption;
+/**
+ * 选项组件
+ * @name thy-option
+ */
+declare class ThyOption {
+    /**
+     * 选项的值，具有唯一性
+     */
+    readonly thyValue: _angular_core.InputSignal<any>;
+    /**
+     * 选项的原始值
+     */
+    readonly thyRawValue: _angular_core.InputSignal<any>;
+    /**
+     * 选项的文本
+     */
+    readonly thyLabelText: _angular_core.InputSignal<string | undefined>;
+    /**
+     * 是否显示自定义模板
+     */
+    readonly thyShowOptionCustom: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * 搜索关键字
+     */
+    readonly thySearchKey: _angular_core.InputSignal<string | undefined>;
+    /**
+     * 是否禁用
+     */
+    readonly thyDisabled: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * 是否选中，会跟随 ThyOptionSelectionChangeEvent 抛出去
+     */
+    readonly selected: _angular_core.WritableSignal<boolean>;
+    /**
+     * 选项被选中时的回调
+     */
+    readonly selectionChange: _angular_core.OutputEmitterRef<ThyOptionSelectionChangeEvent>;
+    /**
+     * 模板
+     */
+    readonly template: _angular_core.Signal<TemplateRef<any> | undefined>;
+    private readonly optionGroupComponent;
+    get groupLabel(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThyOption, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThyOption, "thy-option", never, { "thyValue": { "alias": "thyValue"; "required": false; "isSignal": true; }; "thyRawValue": { "alias": "thyRawValue"; "required": false; "isSignal": true; }; "thyLabelText": { "alias": "thyLabelText"; "required": false; "isSignal": true; }; "thyShowOptionCustom": { "alias": "thyShowOptionCustom"; "required": false; "isSignal": true; }; "thySearchKey": { "alias": "thySearchKey"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, never, ["*"], true, never>;
 }
+
 /**
+ * 选项渲染组件
  * @private
- * @order 20
+ * @name thy-option-render
  */
-declare class ThyOption extends SelectOptionBase implements OnDestroy, Highlightable {
+declare class ThyOptionRender implements Highlightable {
     element: ElementRef<HTMLElement>;
-    parent: ngx_tethys_shared.IThyOptionParentComponent;
-    private cdr;
-    thyValue: any;
-    thyRawValue: any;
-    thyLabelText: string;
-    readonly thyShowOptionCustom: _angular_core.InputSignal<boolean>;
-    readonly thySearchKey: _angular_core.InputSignal<string>;
-    readonly template: _angular_core.Signal<TemplateRef<any>>;
+    private hostRenderer;
+    /**
+     * 选项的值，具有唯一性
+     */
+    readonly thyValue: _angular_core.InputSignal<any>;
+    /**
+     * 选项的原始值
+     */
+    readonly thyRawValue: _angular_core.InputSignal<any>;
+    /**
+     * 选项的文本
+     */
+    readonly thyLabelText: _angular_core.InputSignal<string | undefined>;
+    /**
+     * 搜索关键字
+     */
+    readonly thySearchKey: _angular_core.InputSignal<string | undefined>;
+    /**
+     * 是否禁用
+     */
     readonly thyDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly hidden: WritableSignal<boolean>;
-    get disabled(): boolean;
-    get tabIndex(): string;
-    readonly selected: WritableSignal<boolean>;
-    readonly selectionChange: _angular_core.OutputEmitterRef<ThyOptionSelectionChangeEvent>;
-    readonly visibleChange: _angular_core.OutputEmitterRef<ThyOptionVisibleChangeEvent>;
+    /**
+     * 是否显示自定义模板
+     */
+    readonly thyShowOptionCustom: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * 模板
+     */
+    readonly thyTemplate: _angular_core.InputSignal<TemplateRef<any> | undefined>;
+    /**
+     * 模板上下文
+     */
+    readonly thyTemplateContext: _angular_core.InputSignal<any>;
+    /**
+     * 被选中时，是否显示勾选图标
+     */
+    readonly thyShowCheckedIcon: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Select 组件选中的值
+     */
+    readonly thySelectedValuesMap: _angular_core.InputSignal<Map<any, boolean>>;
+    /**
+     * 当前高亮选项的值
+     */
+    readonly thyActivatedValue: _angular_core.InputSignal<any>;
+    /**
+     * 点击选项时的回调
+     */
+    readonly optionClick: _angular_core.OutputEmitterRef<{
+        value: SafeAny;
+        isUserInput?: boolean;
+    }>;
+    /**
+     * 鼠标悬浮时的回调
+     */
+    readonly optionHover: _angular_core.OutputEmitterRef<any>;
+    /**
+     * 是否被选中
+     */
+    readonly selected: _angular_core.Signal<boolean>;
+    /**
+     * 是否高亮
+     */
+    readonly activated: _angular_core.Signal<boolean>;
+    readonly tabIndex: _angular_core.Signal<"0" | "-1">;
     constructor();
-    getHostElement(): HTMLElement;
-    onClick(event: Event): void;
+    mouseEnter(): void;
     handleKeydown(event: KeyboardEvent): void;
     selectViaInteraction(): void;
-    select(event?: Event): void;
+    select(): void;
     deselect(): void;
-    hideOption(): void;
-    showOption(): void;
-    matchSearchText(searchText: string): boolean;
     setActiveStyles(): void;
     setInactiveStyles(): void;
-    getLabel(): string;
-    private emitSelectionChangeEvent;
-    ngOnDestroy(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThyOption, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThyOption, "thy-option", never, { "thyValue": { "alias": "thyValue"; "required": false; }; "thyRawValue": { "alias": "thyRawValue"; "required": false; }; "thyLabelText": { "alias": "thyLabelText"; "required": false; }; "thyShowOptionCustom": { "alias": "thyShowOptionCustom"; "required": false; "isSignal": true; }; "thySearchKey": { "alias": "thySearchKey"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "visibleChange": "visibleChange"; }, never, ["*"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThyOptionRender, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThyOptionRender, "thy-option-render", never, { "thyValue": { "alias": "thyValue"; "required": false; "isSignal": true; }; "thyRawValue": { "alias": "thyRawValue"; "required": false; "isSignal": true; }; "thyLabelText": { "alias": "thyLabelText"; "required": false; "isSignal": true; }; "thySearchKey": { "alias": "thySearchKey"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; "isSignal": true; }; "thyShowOptionCustom": { "alias": "thyShowOptionCustom"; "required": false; "isSignal": true; }; "thyTemplate": { "alias": "thyTemplate"; "required": false; "isSignal": true; }; "thyTemplateContext": { "alias": "thyTemplateContext"; "required": false; "isSignal": true; }; "thyShowCheckedIcon": { "alias": "thyShowCheckedIcon"; "required": false; "isSignal": true; }; "thySelectedValuesMap": { "alias": "thySelectedValuesMap"; "required": false; "isSignal": true; }; "thyActivatedValue": { "alias": "thyActivatedValue"; "required": false; "isSignal": true; }; }, { "optionClick": "optionClick"; "optionHover": "optionHover"; }, never, never, true, never>;
 }
 
-/**
- * @private
- */
-declare class ThySelectOptionGroup implements OnDestroy, AfterContentInit {
-    private _ngZone;
-    private cdr;
+declare class ThySelectOptionGroup {
+    readonly thyGroupLabel: _angular_core.InputSignal<string | undefined>;
     readonly thyDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly hidden: WritableSignal<boolean>;
-    readonly thyGroupLabel: _angular_core.InputSignal<string>;
-    options: QueryList<ThyOption>;
-    _destroy$: Subject<void>;
-    optionVisibleChanges: Observable<ThyOptionVisibleChangeEvent>;
-    ngAfterContentInit(): void;
-    _resetOptions(): void;
-    ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThySelectOptionGroup, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThySelectOptionGroup, "thy-option-group", never, { "thyDisabled": { "alias": "thyDisabled"; "required": false; "isSignal": true; }; "thyGroupLabel": { "alias": "thyGroupLabel"; "required": false; "isSignal": true; }; }, {}, ["options"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThySelectOptionGroup, "thy-option-group", never, { "thyGroupLabel": { "alias": "thyGroupLabel"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-declare class ThyOptionsContainer implements OnInit {
-    readonly optionsTemplate: _angular_core.Signal<TemplateRef<any>>;
-    constructor();
-    ngOnInit(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThyOptionsContainer, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThyOptionsContainer, "thy-options-container", never, {}, {}, never, ["*"], true, never>;
+/**
+ * @private
+ */
+declare class ThyOptionGroupRender {
+    readonly thyGroupLabel: _angular_core.InputSignal<string | undefined>;
+    readonly thyDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThyOptionGroupRender, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThyOptionGroupRender, "thy-option-group-render", never, { "thyGroupLabel": { "alias": "thyGroupLabel"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class ThyOptionModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThyOptionModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<ThyOptionModule, never, [typeof i1$1.CommonModule, typeof i3.ThyIconModule, typeof ThyListOption, typeof ThyOptionGroup, typeof ThyOption, typeof ThySelectOptionGroup, typeof ThyOptionsContainer], [typeof ThyListOption, typeof ThyOptionGroup, typeof ThyOption, typeof ThySelectOptionGroup, typeof ThyOptionsContainer]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<ThyOptionModule, never, [typeof i1$1.CommonModule, typeof i3.ThyIconModule, typeof ThyListOption, typeof ThyOptionGroup, typeof ThyOption, typeof ThyOptionRender, typeof ThySelectOptionGroup, typeof ThyOptionGroupRender], [typeof ThyListOption, typeof ThyOptionGroup, typeof ThyOption, typeof ThyOptionRender, typeof ThySelectOptionGroup, typeof ThyOptionGroupRender]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<ThyOptionModule>;
 }
 
-export { SelectOptionBase, THY_LIST_OPTION_PARENT_COMPONENT, THY_OPTION_PARENT_COMPONENT, ThyAutofocusDirective, ThyContextMenuDirective, ThyCtrlEnterDirective, ThyDragDropDirective, ThyEnterDirective, ThyFormCheckBaseComponent, ThyListOption, ThyOption, ThyOptionGroup, ThyOptionModule, ThyOptionSelectionChangeEvent, ThyOptionVisibleChangeEvent, ThyOptionsContainer, ThyScrollDirective, ThySelectCommonModule, ThySelectControl, ThySelectOptionGroup, ThySharedModule, ThyShowDirective, ThyStopPropagationDirective, ThyStringOrTemplateOutletDirective, ThyTranscludeDirective, ThyViewOutletDirective };
-export type { IThyListOptionParentComponent, IThyOptionComponent, IThyOptionGroupComponent, IThyOptionParentComponent, SelectControlSize, ThyListLayout };
+export { SelectOptionBase, THY_LIST_OPTION_PARENT_COMPONENT, ThyAutofocusDirective, ThyContextMenuDirective, ThyCtrlEnterDirective, ThyDragDropDirective, ThyEnterDirective, ThyFormCheckBaseComponent, ThyListOption, ThyOption, ThyOptionGroup, ThyOptionGroupRender, ThyOptionModule, ThyOptionRender, ThyOptionSelectionChangeEvent, ThyScrollDirective, ThySelectCommonModule, ThySelectControl, ThySelectOptionGroup, ThySharedModule, ThyShowDirective, ThyStopPropagationDirective, ThyStringOrTemplateOutletDirective, ThyTranscludeDirective, ThyViewOutletDirective };
+export type { IThyListOptionParentComponent, IThyOptionComponent, IThyOptionGroupComponent, SelectControlSize, ThyListLayout };

package/shared/option/styles/option.mixin.scss

@@ -57,16 +57,6 @@
             background: rgba(variables.$primary, 0.1);
             color: variables.$primary;
 
-            // &.hover,
-            // &:hover {
-            // background: $hover-bg-color;
-            // color: $body-color;
-
-            // .prefix-icon {
-            //     color: $gray-300;
-            // }
-            // }
-
             .prefix-icon {
                 color: variables.$primary;
             }

package/shared/option/styles/select-dropdown.scss

@@ -6,29 +6,30 @@ $optionsSize: 'sm', 'default', 'md', 'lg';
 
 .thy-select-dropdown-options {
     @include select.thy-select-options-container();
+    &-with-virtual-scroll {
+        overflow-y: hidden;
+        .cdk-virtual-scroll-content-wrapper {
+            width: 100%;
+        }
+    }
 
     .loading-more {
         min-height: auto;
         text-align: center;
     }
 
-    .thy-option-item-group {
+    .thy-option-group-render {
         @include option.thy-option-common-layout();
     }
 
     .thy-option-item {
         @include option.thy-option();
-        &.hidden {
-            display: none;
-        }
     }
 
-    .thy-option-item-group {
+    .thy-option-group-render {
         flex-direction: column;
-
-        &.thy-select-option-group-hidden {
-            display: none;
-        }
+        height: 40px;
+        padding: 5px 0;
 
         .group-name {
             width: 100%;