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

10.26

/src/tag/tag.component.ts

import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input } from '@angular/core';
import { useHostRenderer } from '@tethys/cdk/dom';
import { isThemeColor, ThyThemeColor } from 'ngx-tethys/core';
import { coerceBooleanProperty, hexToRgb } from 'ngx-tethys/util';

export type ThyTagColor = ThyThemeColor | string;

export type ThyTagShape = 'pill' | 'rectangle';

export type ThyTagSize = 'sm' | 'md' | 'lg';

/**
 * 标签组件
 * @name thy-tag,[thyTag]
 */
@Component({
    selector: 'thy-tag,[thyTag]',
    templateUrl: './tag.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: {
        class: 'thy-tag',
        '[class.thy-tag-pill]': 'thyShape() === "pill"',
        '[class.thy-tag-outline]': 'thyTheme() === "outline"',
        '[class.thy-tag-hover]': 'thyHoverable()',
        '[class.thy-tag-md]': 'thySize() === "md"',
        '[class.thy-tag-sm]': 'thySize() === "sm"',
        '[class.thy-tag-xs]': 'thySize() === "xs"',
        '[class.thy-tag-lg]': 'thySize() === "lg"'
    }
})
export class ThyTag {
    private elementRef = inject(ElementRef);

    private hostRenderer = useHostRenderer();

    /**
     * 标签颜色，thyColor 的简写
     * @type primary | success | info | warning | danger | default | light | string
     * @default default
     */
    readonly thyTag = input<ThyTagColor>('');

    /**
     * 标签形状
     * @type pill | rectangle
     */
    readonly thyShape = input<ThyTagShape>('rectangle');

    /**
     * 标签颜色，支持设置主题色和颜色值，主题色为 default、primary、success、info、warning、danger
     */
    readonly thyColor = input<ThyTagColor>('');

    /**
     * 标签主题，fill 为颜色填充，outline 为线框，weak-fill 为背景色0.1透明度效果
     * @type outline | fill | weak-fill
     */
    readonly thyTheme = input<'outline' | 'fill' | 'weak-fill'>('fill');

    /**
     * 标签大小
     * @type sm | md | lg
     */
    readonly thySize = input<ThyTagSize>('md');

    /**
     * 可 Hover 悬停的标签，设置为 true 时会有一个 Hover 效果
     * @default false
     */
    readonly thyHoverable = input(false, { transform: coerceBooleanProperty });

    protected readonly color = computed(() => this.thyColor() || this.thyTag() || 'default');

    constructor() {
        effect(() => {
            this.setColor();
        });
    }

    private setColor(): void {
        this.elementRef.nativeElement.style.removeProperty('background-color');
        this.elementRef.nativeElement.style.removeProperty('border-color');
        this.elementRef.nativeElement.style.removeProperty('color');
        this.hostRenderer.updateClass([]);

        if (isThemeColor(this.color())) {
            this.hostRenderer.updateClass([`thy-tag-${this.thyTheme() === 'fill' ? '' : this.thyTheme() + '-'}${this.color()}`]);
        } else {
            if (this.thyTheme() === 'fill') {
                this.elementRef.nativeElement.style.backgroundColor = this.color();
            } else if (this.thyTheme() === 'outline') {
                this.elementRef.nativeElement.style.color = this.color();
                this.elementRef.nativeElement.style['border-color'] = this.color();
            } else {
                this.elementRef.nativeElement.style.backgroundColor = hexToRgb(this.color(), 0.1);
                this.elementRef.nativeElement.style.color = this.color();
            }
        }
    }
}

1	import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input } from '@angular/core';
2	import { useHostRenderer } from '@tethys/cdk/dom';
3	import { isThemeColor, ThyThemeColor } from 'ngx-tethys/core';
4	import { coerceBooleanProperty, hexToRgb } from 'ngx-tethys/util';
5
6	export type ThyTagColor = ThyThemeColor \| string;
7
8	export type ThyTagShape = 'pill' \| 'rectangle';
9
10	export type ThyTagSize = 'sm' \| 'md' \| 'lg';
11
12	/**	1✔
13	* 标签组件
UNCOV 14	* @name thy-tag,[thyTag]	×
UNCOV 15	*/	×
UNCOV 16	@Component({	×
UNCOV 17	selector: 'thy-tag,[thyTag]',	×
UNCOV 18	templateUrl: './tag.component.html',	×
UNCOV 19	changeDetection: ChangeDetectionStrategy.OnPush,	×
UNCOV 20	host: {	×
UNCOV 21	class: 'thy-tag',	×
UNCOV 22	'[class.thy-tag-pill]': 'thyShape() === "pill"',	×
UNCOV 23	'[class.thy-tag-outline]': 'thyTheme() === "outline"',	×
UNCOV 24	'[class.thy-tag-hover]': 'thyHoverable()',	×
25	'[class.thy-tag-md]': 'thySize() === "md"',
26	'[class.thy-tag-sm]': 'thySize() === "sm"',
27	'[class.thy-tag-xs]': 'thySize() === "xs"',
UNCOV 28	'[class.thy-tag-lg]': 'thySize() === "lg"'	×
UNCOV 29	}	×
UNCOV 30	})	×
UNCOV 31	export class ThyTag {	×
UNCOV 32	private elementRef = inject(ElementRef);	×
UNCOV 33		×
34	private hostRenderer = useHostRenderer();
35
UNCOV 36	/**	×
UNCOV 37	* 标签颜色，thyColor 的简写	×
38	* @type primary \| success \| info \| warning \| danger \| default \| light \| string
UNCOV 39	* @default default	×
UNCOV 40	*/	×
UNCOV 41	readonly thyTag = input<ThyTagColor>('');	×
42
43	/**
UNCOV 44	* 标签形状	×
UNCOV 45	* @type pill \| rectangle	×
46	*/
47	readonly thyShape = input<ThyTagShape>('rectangle');
48
49	/**	1✔
50	* 标签颜色，支持设置主题色和颜色值，主题色为 default、primary、success、info、warning、danger	1✔
51	*/
52	readonly thyColor = input<ThyTagColor>('');
53
54	/**
55	* 标签主题，fill 为颜色填充，outline 为线框，weak-fill 为背景色0.1透明度效果
56	* @type outline \| fill \| weak-fill
57	*/
58	readonly thyTheme = input<'outline' \| 'fill' \| 'weak-fill'>('fill');
59		1✔
60	/**
61	* 标签大小
62	* @type sm \| md \| lg
63	*/
64	readonly thySize = input<ThyTagSize>('md');
65
66	/**
67	* 可 Hover 悬停的标签，设置为 true 时会有一个 Hover 效果
68	* @default false
69	*/
70	readonly thyHoverable = input(false, { transform: coerceBooleanProperty });
71
72	protected readonly color = computed(() => this.thyColor() \|\| this.thyTag() \|\| 'default');
73
74	constructor() {
75	effect(() => {
76	this.setColor();
77	});
78	}
79
80	private setColor(): void {
81	this.elementRef.nativeElement.style.removeProperty('background-color');
82	this.elementRef.nativeElement.style.removeProperty('border-color');
83	this.elementRef.nativeElement.style.removeProperty('color');
84	this.hostRenderer.updateClass([]);
85
86	if (isThemeColor(this.color())) {
87	this.hostRenderer.updateClass([`thy-tag-${this.thyTheme() === 'fill' ? '' : this.thyTheme() + '-'}${this.color()}`]);
88	} else {
89	if (this.thyTheme() === 'fill') {
90	this.elementRef.nativeElement.style.backgroundColor = this.color();
91	} else if (this.thyTheme() === 'outline') {
92	this.elementRef.nativeElement.style.color = this.color();
93	this.elementRef.nativeElement.style['border-color'] = this.color();
94	} else {
95	this.elementRef.nativeElement.style.backgroundColor = hexToRgb(this.color(), 0.1);
96	this.elementRef.nativeElement.style.color = this.color();
97	}
98	}
99	}
100	}

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