68ef226c-f83e-44c1-b8ed-e420a83c5d84

Committed 28 May 2025 10:31AM UTC coverage: 10.352% (-80.0%) from 90.316%

Build # 68ef226c-f83e-44c1-b8ed-e420a83c5d84

Build Type

Pull #3460

circleci

Committed by

pubuzhixing8

Commit Message

chore: xxx

Pull Request Pull Request #3460: refactor(icon): migrate signal input #TINFR-1476

Run Details

132 of 6823 branches covered (1.93%)

Branch coverage included in aggregate %.

10 of 14 new or added lines in 1 file covered. (71.43%)

11648 existing lines in 344 files now uncovered.

2078 of 14525 relevant lines covered (14.31%)

6.69 hits per line

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

4.62

/src/property-operation/property-operation.component.ts

import {
    AfterContentInit,
    Component,
    ContentChild,
    ElementRef,
    EventEmitter,
    HostBinding,
    Input,
    OnInit,
    Output,
    TemplateRef,
    ViewChild,
    OnDestroy,
    NgZone,
    inject
} from '@angular/core';
import { useHostRenderer } from '@tethys/cdk/dom';
import { ThyTranslate } from 'ngx-tethys/core';
import { coerceBooleanProperty, htmlElementIsEmpty } from 'ngx-tethys/util';
import { fromEvent, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ThyIcon } from 'ngx-tethys/icon';
import { ThyFlexibleText } from 'ngx-tethys/flexible-text';
import { ThyButtonIcon } from 'ngx-tethys/button';
import { NgTemplateOutlet, NgClass } from '@angular/common';

type ThyPropertyOperationTypes = 'primary' | 'success' | 'warning' | 'danger';

/**
 * 属性操作组件
 * @name thy-property-operation
 * @order 10
 */
@Component({
    selector: 'thy-property-operation',
    templateUrl: './property-operation.component.html',
    imports: [NgTemplateOutlet, NgClass, ThyButtonIcon, ThyFlexibleText, ThyIcon]
})
export class ThyPropertyOperation implements OnInit, AfterContentInit, OnDestroy {
    private thyTranslate = inject(ThyTranslate);
    private elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
    private ngZone = inject(NgZone);

    private initialized = false;

    private hostRenderer = useHostRenderer();

    labelText: string;

    onlyHasTips = false;

    showClose = false;

    type: ThyPropertyOperationTypes;

    icon: string;

    value: string;

    labelHideWhenHasValue = false;

    /**
     * 点击移除图标时的事件回调，此函数只有在thyShowClose为true时才会发生
     */
    @Output() thyOnRemove = new EventEmitter();

    /**
     * 点击事件回调
     */
    @Output() thyClick = new EventEmitter<Event>();

    @HostBinding('class.thy-property-operation') _isPropertyOperation = true;

    @ContentChild('operationIcon') operationIcon: TemplateRef<any>;

    @ViewChild('contentElement', { static: true }) contentElement: ElementRef;

    /**
     * 属性的 Label 文本
     */
    @Input()
    set thyLabelText(value: string) {
        this.labelText = value;
    }

    /**
     * 属性的值
     */
    @Input()
    set thyValue(value: string) {
        this.value = value;
        this.setOnlyHasTips();
    }

    /**
     * 属性的 Label Translate Key
     */
    @Input()
    set thyLabelTextTranslateKey(value: string) {
        this.labelText = this.thyTranslate.instant(value);
    }

    /**
     * 图标
     */
    @Input()
    set thyIcon(value: string) {
        this.icon = value;
    }

    /**
     * 当有属性值时是否展示移除图标
     * @default false
     */
    @Input({ transform: coerceBooleanProperty })
    set thyShowClose(value: boolean) {
        this.showClose = value;
    }

    // 支持有值时，label不显示
    @Input({ transform: coerceBooleanProperty })
    set thyLabelHasValue(value: boolean) {
        this.labelHideWhenHasValue = !value;
    }

    /**
     * 有值时隐藏 label
     * @default false
     */
    @Input({ transform: coerceBooleanProperty })
    set thyLabelHideWhenHasValue(value: boolean) {
        this.labelHideWhenHasValue = value;
    }

    /**
     * 属性类型
     * @type  danger | primary | success | warning | null
     * @default null
     */
    @Input()
    set thyType(value: ThyPropertyOperationTypes) {
        this.type = value;
        this.setHostClass();
    }

    /**
     * 激活状态
     * @default false
     */
    @HostBinding('class.active')
    @Input({ alias: 'thyActive', transform: coerceBooleanProperty })
    active: boolean;

    /**
     * 禁用操作，添加后property operation中thyClick和thyOnRemove事件将会被禁用
     * @default false
     */
    @HostBinding('class.thy-property-operation-disabled')
    @Input({ alias: 'thyDisabled', transform: coerceBooleanProperty })
    disabled: boolean;

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

    private setHostClass(first = false) {
        if (!this.initialized && !first) {
            return;
        }
        this.hostRenderer.updateClass(this.type ? [`thy-property-operation-${this.type}`] : []);
    }

    private setOnlyHasTips(first = false) {
        if (!this.initialized && !first) {
            return;
        }
        if (this.value) {
            this.onlyHasTips = false;
        } else if (htmlElementIsEmpty(this.contentElement.nativeElement)) {
            this.onlyHasTips = true;
        } else {
            this.onlyHasTips = false;
        }
    }

    ngOnInit() {
        this.setHostClass(true);

        this.ngZone.runOutsideAngular(() =>
            fromEvent<Event>(this.elementRef.nativeElement, 'click')
                .pipe(takeUntil(this.destroy$))
                .subscribe(event => {
                    if (this.disabled || this.thyClick.observers.length === 0) {
                        return;
                    }

                    this.ngZone.run(() => this.thyClick.emit(event));
                })
        );
    }

    ngAfterContentInit() {
        this.setOnlyHasTips(true);
        this.initialized = true;
    }

    ngOnDestroy(): void {
        this.destroy$.next();
    }

    remove($event: Event) {
        $event.stopPropagation();
        this.thyOnRemove.emit($event);
    }
}

1	import {
2	AfterContentInit,
3	Component,
4	ContentChild,
5	ElementRef,
6	EventEmitter,
7	HostBinding,
8	Input,
9	OnInit,
10	Output,
11	TemplateRef,
12	ViewChild,
13	OnDestroy,
14	NgZone,
15	inject
16	} from '@angular/core';
17	import { useHostRenderer } from '@tethys/cdk/dom';
18	import { ThyTranslate } from 'ngx-tethys/core';	1✔
19	import { coerceBooleanProperty, htmlElementIsEmpty } from 'ngx-tethys/util';
UNCOV 20	import { fromEvent, Subject } from 'rxjs';	×
UNCOV 21	import { takeUntil } from 'rxjs/operators';	×
UNCOV 22	import { ThyIcon } from 'ngx-tethys/icon';	×
UNCOV 23	import { ThyFlexibleText } from 'ngx-tethys/flexible-text';	×
UNCOV 24	import { ThyButtonIcon } from 'ngx-tethys/button';	×
UNCOV 25	import { NgTemplateOutlet, NgClass } from '@angular/common';	×
UNCOV 26		×
UNCOV 27	type ThyPropertyOperationTypes = 'primary' \| 'success' \| 'warning' \| 'danger';	×
UNCOV 28		×
UNCOV 29	/**	×
UNCOV 30	* 属性操作组件	×
UNCOV 31	* @name thy-property-operation	×
32	* @order 10
33	*/
UNCOV 34	@Component({	×
35	selector: 'thy-property-operation',
36	templateUrl: './property-operation.component.html',
UNCOV 37	imports: [NgTemplateOutlet, NgClass, ThyButtonIcon, ThyFlexibleText, ThyIcon]	×
UNCOV 38	})	×
39	export class ThyPropertyOperation implements OnInit, AfterContentInit, OnDestroy {
40	private thyTranslate = inject(ThyTranslate);
41	private elementRef = inject<ElementRef<HTMLElement>>(ElementRef);	×
42	private ngZone = inject(NgZone);
43
UNCOV 44	private initialized = false;	×
45
46	private hostRenderer = useHostRenderer();
UNCOV 47		×
48	labelText: string;
49
UNCOV 50	onlyHasTips = false;	×
51
52	showClose = false;
53		×
54	type: ThyPropertyOperationTypes;
55
UNCOV 56	icon: string;	×
UNCOV 57		×
58	value: string;
59		×
UNCOV 60	labelHideWhenHasValue = false;	×
UNCOV 61		×
62	/**
UNCOV 63	* 点击移除图标时的事件回调，此函数只有在thyShowClose为true时才会发生	×
64	*/
65	@Output() thyOnRemove = new EventEmitter();	×
UNCOV 66		×
UNCOV 67	/**	×
68	* 点击事件回调
UNCOV 69	*/	×
UNCOV 70	@Output() thyClick = new EventEmitter<Event>();	×
71
UNCOV 72	@HostBinding('class.thy-property-operation') _isPropertyOperation = true;	×
UNCOV 73		×
74	@ContentChild('operationIcon') operationIcon: TemplateRef<any>;
75
76	@ViewChild('contentElement', { static: true }) contentElement: ElementRef;	×
77
78	/**
79	* 属性的 Label 文本
UNCOV 80	*/	×
UNCOV 81	@Input()	×
82	set thyLabelText(value: string) {
83	this.labelText = value;
UNCOV 84	}	×
UNCOV 85		×
86	/**
UNCOV 87	* 属性的值	×
88	*/
89	@Input()
90	set thyValue(value: string) {
UNCOV 91	this.value = value;	×
UNCOV 92	this.setOnlyHasTips();	×
93	}
94
UNCOV 95	/**	×
96	* 属性的 Label Translate Key
97	*/
UNCOV 98	@Input()	×
UNCOV 99	set thyLabelTextTranslateKey(value: string) {	×
100	this.labelText = this.thyTranslate.instant(value);
101	}	1✔
102
103	/**
104	* 图标
105	*/
106	@Input()
107	set thyIcon(value: string) {
108	this.icon = value;
109	}
110
111	/**
112	* 当有属性值时是否展示移除图标
113	* @default false
114	*/
115	@Input({ transform: coerceBooleanProperty })
116	set thyShowClose(value: boolean) {
117	this.showClose = value;
118	}
119		1✔
120	// 支持有值时，label不显示
121	@Input({ transform: coerceBooleanProperty })
122	set thyLabelHasValue(value: boolean) {
123	this.labelHideWhenHasValue = !value;
124	}
125
126	/**
127	* 有值时隐藏 label
128	* @default false
129	*/
130	@Input({ transform: coerceBooleanProperty })
131	set thyLabelHideWhenHasValue(value: boolean) {
132	this.labelHideWhenHasValue = value;
133	}
134
135	/**
136	* 属性类型
137	* @type danger \| primary \| success \| warning \| null
138	* @default null
139	*/
140	@Input()
141	set thyType(value: ThyPropertyOperationTypes) {
142	this.type = value;
143	this.setHostClass();
144	}
145
146	/**
147	* 激活状态
148	* @default false
149	*/
150	@HostBinding('class.active')
151	@Input({ alias: 'thyActive', transform: coerceBooleanProperty })
152	active: boolean;
153
154	/**
155	* 禁用操作，添加后property operation中thyClick和thyOnRemove事件将会被禁用
156	* @default false
157	*/
158	@HostBinding('class.thy-property-operation-disabled')
159	@Input({ alias: 'thyDisabled', transform: coerceBooleanProperty })
160	disabled: boolean;
161
162	private destroy$ = new Subject<void>();
163
164	private setHostClass(first = false) {
165	if (!this.initialized && !first) {
166	return;
167	}
168	this.hostRenderer.updateClass(this.type ? [`thy-property-operation-${this.type}`] : []);
169	}
170
171	private setOnlyHasTips(first = false) {
172	if (!this.initialized && !first) {
173	return;
174	}
175	if (this.value) {
176	this.onlyHasTips = false;
177	} else if (htmlElementIsEmpty(this.contentElement.nativeElement)) {
178	this.onlyHasTips = true;
179	} else {
180	this.onlyHasTips = false;
181	}
182	}
183
184	ngOnInit() {
185	this.setHostClass(true);
186
187	this.ngZone.runOutsideAngular(() =>
188	fromEvent<Event>(this.elementRef.nativeElement, 'click')
189	.pipe(takeUntil(this.destroy$))
190	.subscribe(event => {
191	if (this.disabled \|\| this.thyClick.observers.length === 0) {
192	return;
193	}
194
195	this.ngZone.run(() => this.thyClick.emit(event));
196	})
197	);
198	}
199
200	ngAfterContentInit() {
201	this.setOnlyHasTips(true);
202	this.initialized = true;
203	}
204
205	ngOnDestroy(): void {
206	this.destroy$.next();
207	}
208
209	remove($event: Event) {
210	$event.stopPropagation();
211	this.thyOnRemove.emit($event);
212	}
213	}

atinc / ngx-tethys / 68ef226c-f83e-44c1-b8ed-e420a83c5d84

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