d4d3bf94-0b08-4dba-b53c-fd90c5e0b80a

Committed 27 Mar 2025 01:46AM UTC coverage: 90.236% (+0.06%) from 90.179%

Build # d4d3bf94-0b08-4dba-b53c-fd90c5e0b80a

Build Type

push

circleci

Committed by

minlovehua

Commit Message

feat: save draft

Run Details

5598 of 6865 branches covered (81.54%)

Branch coverage included in aggregate %.

8 of 8 new or added lines in 7 files covered. (100.0%)

157 existing lines in 46 files now uncovered.

13357 of 14141 relevant lines covered (94.46%)

992.52 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

91.76

/src/autocomplete/autocomplete.component.ts

import {
    Component,
    TemplateRef,
    ViewChild,
    ChangeDetectionStrategy,
    ContentChildren,
    QueryList,
    OnInit,
    Output,
    EventEmitter,
    NgZone,
    OnDestroy,
    AfterContentInit,
    ChangeDetectorRef,
    Input,
    ElementRef,
    inject,
    Signal
} from '@angular/core';
import { defer, merge, Observable, Subject, timer } from 'rxjs';
import { take, switchMap, takeUntil, startWith } from 'rxjs/operators';
import { SelectionModel } from '@angular/cdk/collections';
import {
    THY_OPTION_PARENT_COMPONENT,
    IThyOptionParentComponent,
    ThyOption,
    ThyOptionSelectionChangeEvent,
    ThyStopPropagationDirective
} from 'ngx-tethys/shared';
import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
import { ThyEmpty } from 'ngx-tethys/empty';
import { NgClass } from '@angular/common';
import { coerceBooleanProperty } from 'ngx-tethys/util';
import { injectLocale, ThyAutoCompleteLocale } from 'ngx-tethys/i18n';
import { injectPanelEmptyIcon } from 'ngx-tethys/core';

/** Event object that is emitted when an autocomplete option is activated. */
export interface ThyAutocompleteActivatedEvent {
    /** Reference to the autocomplete panel that emitted the event. */
    source: ThyAutocomplete;

    /** Option that was selected. */
    option: ThyOption | null;
}

/**
 * 自动完成组件
 * @name thy-autocomplete
 */
@Component({
    selector: 'thy-autocomplete',
    templateUrl: 'autocomplete.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [
        {
            provide: THY_OPTION_PARENT_COMPONENT,
            useExisting: ThyAutocomplete
        }
    ],
    imports: [ThyStopPropagationDirective, NgClass, ThyEmpty]
})
export class ThyAutocomplete implements IThyOptionParentComponent, OnInit, AfterContentInit, OnDestroy {
    private ngZone = inject(NgZone);
    private changeDetectorRef = inject(ChangeDetectorRef);

    private ngUnsubscribe$ = new Subject<void>();

    private locale: Signal<ThyAutoCompleteLocale> = injectLocale('autocomplete');

    emptyIcon: Signal<string> = injectPanelEmptyIcon();

    dropDownClass: { [key: string]: boolean };

    isMultiple = false;

    mode = '';

    isEmptyOptions = false;

    selectionModel: SelectionModel<ThyOption>;

    isOpened = false;

    /** Manages active item in option list based on key events. */
    keyManager: ActiveDescendantKeyManager<ThyOption>;

    @ViewChild('contentTemplate', { static: true })
    contentTemplateRef: TemplateRef<any>;

    // scroll element container
    @ViewChild('panel')
    optionsContainer: ElementRef<any>;

    /**
     * @private
     */
    @ContentChildren(ThyOption, { descendants: true }) options: QueryList<ThyOption>;

    readonly optionSelectionChanges: Observable<ThyOptionSelectionChangeEvent> = defer(() => {
        if (this.options) {
            return merge(...this.options.map(option => option.selectionChange));
        }
        return this.ngZone.onStable.asObservable().pipe(
            take(1),
            switchMap(() => this.optionSelectionChanges)
        );
    }) as Observable<ThyOptionSelectionChangeEvent>;

    /**
     * 空选项时的文本
     * @default 没有任何数据
     */
    @Input() thyEmptyText = this.locale().empty;

    /**
     * 是否默认高亮第一个选项
     * @type boolean
     * @default false
     */
    @Input({ transform: coerceBooleanProperty }) thyAutoActiveFirstOption: boolean;

    /**
     * 被选中时调用，参数包含选中项的 value 值
     * @type EventEmitter<ThyOptionSelectionChangeEvent>
     */
    @Output() thyOptionSelected: EventEmitter<ThyOptionSelectionChangeEvent> = new EventEmitter<ThyOptionSelectionChangeEvent>();

    /**
     * 只读，展开下拉菜单的回调
     * @type EventEmitter<void>
     */
    @Output() readonly thyOpened: EventEmitter<void> = new EventEmitter<void>();

    /**
     * 只读，关闭下拉菜单的回调
     * @type EventEmitter<void>
     */
    @Output() readonly thyClosed: EventEmitter<void> = new EventEmitter<void>();

    /** Emits whenever an option is activated using the keyboard. */
    /**
     * 只读，option 激活状态变化时，调用此函数
     * @type EventEmitter<ThyAutocompleteActivatedEvent>
     */
    @Output() readonly thyOptionActivated: EventEmitter<ThyAutocompleteActivatedEvent> = new EventEmitter<ThyAutocompleteActivatedEvent>();

    ngOnInit() {
        this.setDropDownClass();
        this.instanceSelectionModel();
    }

    ngAfterContentInit() {
        this.options.changes.pipe(startWith(null), takeUntil(this.ngUnsubscribe$)).subscribe(() => {
            this.resetOptions();
            timer(0).subscribe(() => {
                this.isEmptyOptions = this.options.length <= 0;
                this.changeDetectorRef.detectChanges();
            });
            this.initKeyManager();
        });
    }

    initKeyManager() {
        const changedOrDestroyed$ = merge(this.options.changes, this.ngUnsubscribe$);
        this.keyManager = new ActiveDescendantKeyManager<ThyOption>(this.options).withWrap();
        this.keyManager.change.pipe(takeUntil(changedOrDestroyed$)).subscribe(index => {
            this.thyOptionActivated.emit({ source: this, option: this.options.toArray()[index] || null });
        });
    }

    open() {
        this.isOpened = true;
        this.changeDetectorRef.markForCheck();
        this.thyOpened.emit();
    }

    close() {
        this.isOpened = false;
        this.thyClosed.emit();
    }

    private resetOptions() {
        const changedOrDestroyed$ = merge(this.options.changes, this.ngUnsubscribe$);

        this.optionSelectionChanges.pipe(takeUntil(changedOrDestroyed$)).subscribe((event: ThyOptionSelectionChangeEvent) => {
            this.onSelect(event.option, event.isUserInput);
        });
    }

    private instanceSelectionModel() {
        if (this.selectionModel) {
            this.selectionModel.clear();
        }
        this.selectionModel = new SelectionModel<ThyOption>(this.isMultiple);
        this.selectionModel.changed.pipe(takeUntil(this.ngUnsubscribe$)).subscribe(event => {
            event.added.forEach(option => option.select());
            event.removed.forEach(option => option.deselect());
        });
    }

    private onSelect(option: ThyOption, isUserInput: boolean) {
        const wasSelected = this.selectionModel.isSelected(option);

        if (option.thyValue == null && !this.isMultiple) {
            option.deselect();
            this.selectionModel.clear();
        } else {
            if (wasSelected !== option.selected) {
                option.selected ? this.selectionModel.select(option) : this.selectionModel.deselect(option);
            }

            if (isUserInput) {
                this.keyManager.setActiveItem(option);
            }
        }

        if (wasSelected !== this.selectionModel.isSelected(option)) {
            this.thyOptionSelected.emit(new ThyOptionSelectionChangeEvent(option, false));
        }
        this.changeDetectorRef.markForCheck();
    }

    private setDropDownClass() {
        let modeClass = '';
        if (this.isMultiple) {
            modeClass = `thy-select-dropdown-${this.mode}`;
        } else {
            modeClass = `thy-select-dropdown-single`;
        }
        this.dropDownClass = {
            [`thy-select-dropdown`]: true,
            [modeClass]: true
        };
    }

    ngOnDestroy() {
        this.ngUnsubscribe$.next();
        this.ngUnsubscribe$.complete();
    }
}

1	import {
2	Component,
3	TemplateRef,
4	ViewChild,
5	ChangeDetectionStrategy,
6	ContentChildren,
7	QueryList,
8	OnInit,
9	Output,
10	EventEmitter,
11	NgZone,
12	OnDestroy,
13	AfterContentInit,
14	ChangeDetectorRef,
15	Input,
16	ElementRef,
17	inject,
18	Signal	1✔
19	} from '@angular/core';
20	import { defer, merge, Observable, Subject, timer } from 'rxjs';	15✔
21	import { take, switchMap, takeUntil, startWith } from 'rxjs/operators';	15✔
22	import { SelectionModel } from '@angular/cdk/collections';	15✔
23	import {	15✔
24	THY_OPTION_PARENT_COMPONENT,	15✔
25	IThyOptionParentComponent,	15✔
26	ThyOption,	15✔
27	ThyOptionSelectionChangeEvent,	15✔
28	ThyStopPropagationDirective	15✔
29	} from 'ngx-tethys/shared';	15✔
30	import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';	15!
31	import { ThyEmpty } from 'ngx-tethys/empty';	102✔
32	import { NgClass } from '@angular/common';
33	import { coerceBooleanProperty } from 'ngx-tethys/util';	×
34	import { injectLocale, ThyAutoCompleteLocale } from 'ngx-tethys/i18n';
35	import { injectPanelEmptyIcon } from 'ngx-tethys/core';	15✔
36		15✔
37	/** Event object that is emitted when an autocomplete option is activated. */	15✔
38	export interface ThyAutocompleteActivatedEvent {	15✔
39	/** Reference to the autocomplete panel that emitted the event. */	15✔
40	source: ThyAutocomplete;
41
42	/** Option that was selected. */	15✔
43	option: ThyOption \| null;	15✔
44	}
45
46	/**	15✔
47	* 自动完成组件	15✔
48	* @name thy-autocomplete	15✔
49	*/	15✔
50	@Component({	15✔
51	selector: 'thy-autocomplete',
52	templateUrl: 'autocomplete.component.html',	15✔
53	changeDetection: ChangeDetectionStrategy.OnPush,
54	providers: [
55	{
56	provide: THY_OPTION_PARENT_COMPONENT,	15✔
57	useExisting: ThyAutocomplete	15✔
58	}	15✔
59	],	8✔
60	imports: [ThyStopPropagationDirective, NgClass, ThyEmpty]
61	})
62	export class ThyAutocomplete implements IThyOptionParentComponent, OnInit, AfterContentInit, OnDestroy {
63	private ngZone = inject(NgZone);	11✔
64	private changeDetectorRef = inject(ChangeDetectorRef);	11✔
65		11✔
66	private ngUnsubscribe$ = new Subject<void>();
67
68	private locale: Signal<ThyAutoCompleteLocale> = injectLocale('autocomplete');	11✔
69		11✔
70	emptyIcon: Signal<string> = injectPanelEmptyIcon();
71
72	dropDownClass: { [key: string]: boolean };	15✔
73		15✔
74	isMultiple = false;	5✔
75
76	mode = '';
77
78	isEmptyOptions = false;	15!
UNCOV 79		×
80	selectionModel: SelectionModel<ThyOption>;
81		15✔
82	isOpened = false;	15✔
83		3✔
84	/** Manages active item in option list based on key events. */	3✔
85	keyManager: ActiveDescendantKeyManager<ThyOption>;
86
87	@ViewChild('contentTemplate', { static: true })
88	contentTemplateRef: TemplateRef<any>;	5✔
89		5✔
90	// scroll element container	2✔
91	@ViewChild('panel')	2✔
92	optionsContainer: ElementRef<any>;
93
94	/**	3!
95	* @private	3!
96	*/
97	@ContentChildren(ThyOption, { descendants: true }) options: QueryList<ThyOption>;	3!
98		3✔
99	readonly optionSelectionChanges: Observable<ThyOptionSelectionChangeEvent> = defer(() => {
100	if (this.options) {
101	return merge(...this.options.map(option => option.selectionChange));	5✔
102	}	3✔
103	return this.ngZone.onStable.asObservable().pipe(
104	take(1),	5✔
105	switchMap(() => this.optionSelectionChanges)
106	);
107	}) as Observable<ThyOptionSelectionChangeEvent>;	15✔
108		15✔
109	/**	3✔
110	* 空选项时的文本
111	* @default 没有任何数据
112	*/	12✔
113	@Input() thyEmptyText = this.locale().empty;
114		15✔
115	/**
116	* 是否默认高亮第一个选项
117	* @type boolean
118	* @default false
119	*/
120	@Input({ transform: coerceBooleanProperty }) thyAutoActiveFirstOption: boolean;	15✔
121		15✔
122	/**
123	* 被选中时调用，参数包含选中项的 value 值	1✔
124	* @type EventEmitter<ThyOptionSelectionChangeEvent>
125	*/
126	@Output() thyOptionSelected: EventEmitter<ThyOptionSelectionChangeEvent> = new EventEmitter<ThyOptionSelectionChangeEvent>();
127
128	/**
129	* 只读，展开下拉菜单的回调
130	* @type EventEmitter<void>
131	*/
132	@Output() readonly thyOpened: EventEmitter<void> = new EventEmitter<void>();
133
134	/**
135	* 只读，关闭下拉菜单的回调	1✔
136	* @type EventEmitter<void>
137	*/
138	@Output() readonly thyClosed: EventEmitter<void> = new EventEmitter<void>();
139
140	/** Emits whenever an option is activated using the keyboard. */
141	/**
142	* 只读，option 激活状态变化时，调用此函数
143	* @type EventEmitter<ThyAutocompleteActivatedEvent>
144	*/
145	@Output() readonly thyOptionActivated: EventEmitter<ThyAutocompleteActivatedEvent> = new EventEmitter<ThyAutocompleteActivatedEvent>();
146
147	ngOnInit() {
148	this.setDropDownClass();
149	this.instanceSelectionModel();
150	}
151
152	ngAfterContentInit() {
153	this.options.changes.pipe(startWith(null), takeUntil(this.ngUnsubscribe$)).subscribe(() => {
154	this.resetOptions();
155	timer(0).subscribe(() => {
156	this.isEmptyOptions = this.options.length <= 0;
157	this.changeDetectorRef.detectChanges();
158	});
159	this.initKeyManager();
160	});
161	}
162
163	initKeyManager() {
164	const changedOrDestroyed$ = merge(this.options.changes, this.ngUnsubscribe$);
165	this.keyManager = new ActiveDescendantKeyManager<ThyOption>(this.options).withWrap();
166	this.keyManager.change.pipe(takeUntil(changedOrDestroyed$)).subscribe(index => {
167	this.thyOptionActivated.emit({ source: this, option: this.options.toArray()[index] \|\| null });
168	});
169	}
170
171	open() {
172	this.isOpened = true;
173	this.changeDetectorRef.markForCheck();
174	this.thyOpened.emit();
175	}
176
177	close() {
178	this.isOpened = false;
179	this.thyClosed.emit();
180	}
181
182	private resetOptions() {
183	const changedOrDestroyed$ = merge(this.options.changes, this.ngUnsubscribe$);
184
185	this.optionSelectionChanges.pipe(takeUntil(changedOrDestroyed$)).subscribe((event: ThyOptionSelectionChangeEvent) => {
186	this.onSelect(event.option, event.isUserInput);
187	});
188	}
189
190	private instanceSelectionModel() {
191	if (this.selectionModel) {
192	this.selectionModel.clear();
193	}
194	this.selectionModel = new SelectionModel<ThyOption>(this.isMultiple);
195	this.selectionModel.changed.pipe(takeUntil(this.ngUnsubscribe$)).subscribe(event => {
196	event.added.forEach(option => option.select());
197	event.removed.forEach(option => option.deselect());
198	});
199	}
200
201	private onSelect(option: ThyOption, isUserInput: boolean) {
202	const wasSelected = this.selectionModel.isSelected(option);
203
204	if (option.thyValue == null && !this.isMultiple) {
205	option.deselect();
206	this.selectionModel.clear();
207	} else {
208	if (wasSelected !== option.selected) {
209	option.selected ? this.selectionModel.select(option) : this.selectionModel.deselect(option);
210	}
211
212	if (isUserInput) {
213	this.keyManager.setActiveItem(option);
214	}
215	}
216
217	if (wasSelected !== this.selectionModel.isSelected(option)) {
218	this.thyOptionSelected.emit(new ThyOptionSelectionChangeEvent(option, false));
219	}
220	this.changeDetectorRef.markForCheck();
221	}
222
223	private setDropDownClass() {
224	let modeClass = '';
225	if (this.isMultiple) {
226	modeClass = `thy-select-dropdown-${this.mode}`;
227	} else {
228	modeClass = `thy-select-dropdown-single`;
229	}
230	this.dropDownClass = {
231	[`thy-select-dropdown`]: true,
232	[modeClass]: true
233	};
234	}
235
236	ngOnDestroy() {
237	this.ngUnsubscribe$.next();
238	this.ngUnsubscribe$.complete();
239	}
240	}

atinc / ngx-tethys / d4d3bf94-0b08-4dba-b53c-fd90c5e0b80a

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous